Skip to content

Commit 2b5d06d

Browse files
kyleleowkyleleow
committed
feat: use html5 markup
Signed-off-by: Keng Ye <[email protected]>
1 parent cf37599 commit 2b5d06d

18 files changed

+127
-132
lines changed

‎src/components/commons/SectionTitle.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ export function SectionTitle({
88
customStyle?: string;
99
}) {
1010
return (
11-
<div
11+
<h3
1212
className={classNames(
1313
"accent-gradient-1 text-transparent bg-clip-text font-mono",
1414
"leading-4 tracking-[0.04em] text-base",
1515
customStyle ?? "w-fit"
1616
)}
1717
>
1818
{text}
19-
</div>
19+
</h3>
2020
);
2121
}

‎src/components/commons/StatisticPanel.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function StatisticPanel({
2424
const isHorizontalInTablet = displayItem.length <= 2;
2525

2626
return (
27-
<div
27+
<section
2828
id={displayId}
2929
className={classNames(
3030
"card-outline-2 p-[0.5px] rounded-[30px]",
@@ -50,7 +50,7 @@ export function StatisticPanel({
5050
))}
5151
</div>
5252
</div>
53-
</div>
53+
</section>
5454
);
5555
}
5656

@@ -74,7 +74,7 @@ function StatisticsPanelItem({
7474
);
7575

7676
return (
77-
<div
77+
<article
7878
className={classNames(
7979
"flex lg:grow grow-0 lg:flex-col flex-row lg:items-center items-start gap-y-2 gap-x-2",
8080
{ "md:flex-col md:items-center md:grow": isTabletHorizontal }
@@ -132,6 +132,6 @@ function StatisticsPanelItem({
132132
</div>
133133
)}
134134
</div>
135-
</div>
135+
</article>
136136
);
137137
}

‎src/components/index/BlockchainFeatureColumn.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function FeatureIcon({
6464
};
6565

6666
return (
67-
<div
67+
<article
6868
className="blockchain-feature-item flex flex-row md:flex-col w-full md:w-[304px] lg:w-[216px]"
6969
onMouseOver={handleMouseOver}
7070
onFocus={handleMouseOver}
@@ -97,7 +97,7 @@ function FeatureIcon({
9797
{t(`BlockchainFeatureSection.${item.title}.desc`)}
9898
</div>
9999
</div>
100-
</div>
100+
</article>
101101
);
102102
}
103103

‎src/components/index/DeFiChainEcoSystemSection.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function DeFiChainEcoSystemSection(): JSX.Element {
1313
const device = useDeviceDetect();
1414

1515
return (
16-
<div
16+
<section
1717
className={classNames("relative lg:pt-[136px] md:-mb-6 lg:mb-0", {
1818
"overflow-hidden": device === ViewPort.DESKTOP,
1919
"pb-[292px]": device === ViewPort.TABLET && dimensions.width > 1500, // for bigger ipad sizes
@@ -35,7 +35,7 @@ export function DeFiChainEcoSystemSection(): JSX.Element {
3535
text={t("EcosystemSection.label")}
3636
customStyle="lg:w-fit md:w-[409px] w-[272px]"
3737
/>
38-
<span className="block lg:text-6xl text-[40px] leading-[44px] max-w-[560px] pt-[20px] lg:leading-[72px]">
38+
<h2 className="block lg:text-6xl text-[40px] leading-[44px] max-w-[560px] pt-[20px] lg:leading-[72px]">
3939
<span>
4040
{sectionTitle[0]} {sectionTitle[1]}
4141
</span>
@@ -47,7 +47,7 @@ export function DeFiChainEcoSystemSection(): JSX.Element {
4747
<span> {sectionTitle[5]} </span>
4848
<span className="text-electric">{sectionTitle[6]}</span>
4949
</span>
50-
</span>
50+
</h2>
5151

5252
<div
5353
className={classNames(
@@ -112,6 +112,6 @@ export function DeFiChainEcoSystemSection(): JSX.Element {
112112
"lg:hidden block -bottom-40 left-[40%] md:bottom-[-100px] md:left-[70%] md:z-20"
113113
)}
114114
/>
115-
</div>
115+
</section>
116116
);
117117
}

‎src/components/index/ReadyForFlexibility.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function ReadyForFlexibility() {
1313
const dimension = useWindowDimensions();
1414

1515
return (
16-
<div
16+
<section
1717
className={classNames(
1818
"relative z-10",
1919
"lg:mt-[336px] md:mt-[131px] mt-[142px]",
@@ -27,19 +27,19 @@ export function ReadyForFlexibility() {
2727
customStyle="lg:w-fit md:w-[409px] w-[272px]"
2828
/>
2929

30-
<div className="mt-5 text-6xl text-[40px] tracking-normal leading-11 md:tracking-[-0.02em]">
30+
<h2 className="mt-5 text-6xl text-[40px] tracking-normal leading-11 md:tracking-[-0.02em]">
3131
<span className="text-dark-1000">{separatedTitle.join(" ")}</span>
3232
<span className="text-electric">&nbsp;{lastWord}</span>
33-
</div>
33+
</h2>
3434

35-
<div>
35+
<h4>
3636
<div className="lg:mt-8 mt-5 lg:text-xl md:text-base lg:tracking-normal tracking-[0.03em] text-dark-700 font-desc">
3737
{t("ReadyForFlexibilitySection.descParaOne")}
3838
</div>
3939
<div className="lg:mt-8 mt-5 lg:text-xl md:text-base lg:tracking-normal tracking-[0.03em] text-dark-700 font-desc">
4040
{t("ReadyForFlexibilitySection.descParaTwo")}
4141
</div>
42-
</div>
42+
</h4>
4343

4444
<Button
4545
text={t("ReadyForFlexibilitySection.button")}
@@ -71,6 +71,6 @@ export function ReadyForFlexibility() {
7171
"md:hidden block"
7272
)}
7373
/>
74-
</div>
74+
</section>
7575
);
7676
}

‎src/components/index/RoadMapSection.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function RoadMapSlider(): JSX.Element {
7878
};
7979

8080
return (
81-
<div className="roadmap-section lg:mb-60 mb-24 relative">
81+
<section className="roadmap-section lg:mb-60 mb-24 relative">
8282
<Slider {...settings}>
8383
{cards.map((card) => (
8484
<RoadMapCard key={card.title} {...card} />
@@ -90,13 +90,13 @@ function RoadMapSlider(): JSX.Element {
9090
"2xl:left-0 lg:top-[66px] lg:left-[-326px] hidden lg:block"
9191
)}
9292
/>
93-
</div>
93+
</section>
9494
);
9595
}
9696

9797
function RoadMapCard(props: RoadMap): JSX.Element {
9898
return (
99-
<div
99+
<article
100100
data-bg-image={`url(${props.image})`}
101101
className="card-outline-2 hover:accent-gradient-1 rounded-[15px] md:h-[202px] md:w-[384px] h-[202px] w-[272px] p-[0.5px]"
102102
>
@@ -111,7 +111,7 @@ function RoadMapCard(props: RoadMap): JSX.Element {
111111
{props.description}
112112
</div>
113113
</div>
114-
</div>
114+
</article>
115115
);
116116
}
117117

‎src/components/index/blogPosts/BlogPostsSection.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ import ProjectCard from "./PostCard";
99
export function BlogPostsSection({ blogPosts }: { blogPosts: Posts[] }) {
1010
const { t } = useTranslation("page-index");
1111
return blogPosts?.length > 0 ? (
12-
<div className={classNames("relative lg:mb-56 md:mb-52 mb-48")}>
12+
<section className={classNames("relative lg:mb-56 md:mb-52 mb-48")}>
1313
<Container>
1414
<div className="flex flex-col lg:flex-row w-auto justify-between">
1515
<div className="max-w-[468px]">
1616
<SectionTitle
1717
text={t("BlogPostsSection.label")}
1818
customStyle="lg:w-fit md:w-[409px] w-[272px]"
1919
/>
20-
<div className="mt-5 text-[32px] leading-9 whitespace-pre-line lg:text-[52px] lg:leading-none">
20+
<h2 className="mt-5 text-[32px] leading-9 whitespace-pre-line lg:text-[52px] lg:leading-none">
2121
{t("BlogPostsSection.title")}
22-
</div>
22+
</h2>
2323
<Button
2424
text={t("BlogPostsSection.button")}
2525
className="text-sm mt-9 lg:py-4 lg:px-14 py-3 px-10 lg:text-base lg:mt-12"
@@ -46,7 +46,7 @@ export function BlogPostsSection({ blogPosts }: { blogPosts: Posts[] }) {
4646
"bottom-[-30%] left-[-8%] hidden md:block lg:hidden"
4747
)}
4848
/>
49-
</div>
49+
</section>
5050
) : (
5151
<div />
5252
);

‎src/components/index/blogPosts/PostCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function ProjectCard({
88
isLatest: boolean;
99
}) {
1010
return (
11-
<section
11+
<article
1212
className="w-full max-w-[318px] flex flex-col"
1313
data-testid={`card_container_${post.title[0]?.text}`}
1414
>
@@ -36,6 +36,6 @@ export default function ProjectCard({
3636
</section>
3737
</section>
3838
</a>
39-
</section>
39+
</article>
4040
);
4141
}

‎src/components/index/components/Card.tsx

+56-61
Original file line numberDiff line numberDiff line change
@@ -32,71 +32,66 @@ export function Card({
3232
const device = useDeviceDetect();
3333

3434
return (
35-
<div>
36-
<div
37-
key={id}
38-
onMouseEnter={() => {
39-
setHoverState(id);
40-
}}
41-
onMouseLeave={() => {
42-
setHoverState(undefined);
43-
}}
35+
<article
36+
key={id}
37+
onMouseEnter={() => {
38+
setHoverState(id);
39+
}}
40+
onMouseLeave={() => {
41+
setHoverState(undefined);
42+
}}
43+
className={classNames(
44+
"relative dapp-card overflow-hidden",
45+
"p-[0.5px] rounded-[15px] h-[215px] w-full xs:w-[327px] lg:w-[487px] xl:h-[215]",
46+
"md:block md:mb-[24px]",
47+
"card-outline-2 hover:accent-gradient-1",
48+
"cursor-pointer"
49+
)}
50+
>
51+
<Link
52+
href={href}
4453
className={classNames(
45-
"relative dapp-card overflow-hidden",
46-
"p-[0.5px] rounded-[15px] h-[215px] w-full xs:w-[327px] lg:w-[487px] xl:h-[215]",
47-
"md:block md:mb-[24px]",
48-
"card-outline-2 hover:accent-gradient-1",
49-
"cursor-pointer"
54+
"w-full h-full p-6 rounded-[15px] border-[0.5px] flex flex-col",
55+
"border-dark-200 bg-dark-00",
56+
"duration-1000 hover:transition hover:ease-in delay-250"
5057
)}
5158
>
52-
<Link
53-
href={href}
54-
className={classNames(
55-
"w-full h-full p-6 rounded-[15px] border-[0.5px] flex flex-col",
56-
"border-dark-200 bg-dark-00",
57-
"duration-1000 hover:transition hover:ease-in delay-250"
58-
)}
59-
>
60-
<div className={classNames(customTextStyle)}>
61-
<span
62-
className={classNames(
63-
"md:w-full text-2xl tracking-[-2%]",
64-
"whitespace-pre-line",
65-
{
66-
"accent-dfc-gradient-text":
67-
hoverState !== undefined && hoverState === id,
68-
}
69-
)}
70-
>
71-
{title}
72-
</span>
73-
<div
74-
className={classNames(
75-
"text-base text-dark-500 pt-[22px] flex flex-row items-center font-semibold"
76-
)}
77-
>
78-
{subTitle}
79-
<FiArrowUpRight size={20} className="ml-[13px]" />
80-
</div>
81-
<div
82-
className={classNames(
83-
"absolute mix-blend-screen",
84-
customIconStyle
85-
)}
86-
>
87-
{hoverState !== undefined &&
88-
hoverState === id &&
89-
Icon &&
90-
device === ViewPort.DESKTOP ? (
91-
<IconOnHover id={`${id}_hover`} />
92-
) : (
93-
<Icon id={`${id}`} />
94-
)}
95-
</div>
59+
<div className={classNames(customTextStyle)}>
60+
<span
61+
className={classNames(
62+
"md:w-full text-2xl tracking-[-2%]",
63+
"whitespace-pre-line",
64+
{
65+
"accent-dfc-gradient-text":
66+
hoverState !== undefined && hoverState === id,
67+
}
68+
)}
69+
>
70+
{title}
71+
</span>
72+
<div
73+
className={classNames(
74+
"text-base text-dark-500 pt-[22px] flex flex-row items-center font-semibold"
75+
)}
76+
>
77+
{subTitle}
78+
<FiArrowUpRight size={20} className="ml-[13px]" />
9679
</div>
97-
</Link>
98-
</div>
99-
</div>
80+
<div
81+
className={classNames("absolute mix-blend-screen", customIconStyle)}
82+
>
83+
{hoverState !== undefined &&
84+
hoverState === id &&
85+
Icon &&
86+
device === ViewPort.DESKTOP ? (
87+
<IconOnHover id={`${id}_hover`} />
88+
) : (
89+
<Icon id={`${id}`} />
90+
)}
91+
</div>
92+
</div>
93+
</Link>
94+
</article>
10095
);
10196
}
10297

‎src/pages/explore/dfi/_components/ERC20Section.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ export default function ERC20Section(): JSX.Element {
1111

1212
return (
1313
<Container className="relative pb-24 md:pb-48 lg:pb-[248px] text-center flex justify-center">
14-
<div className="max-w-[551px] flex flex-col items-center">
15-
<div
14+
<section className="max-w-[551px] flex flex-col items-center">
15+
<h2
1616
className={classNames(
1717
"text-[40px] leading-[44px] tracking-[-0.02em] ",
1818
"lg:text-6xl lg:leading-[72px] lg:tracking-normal"
1919
)}
2020
>
2121
<span>{title[0]} </span>
2222
<span className="whitespace-nowrap">{title[1]}</span>
23-
</div>
23+
</h2>
2424
<div
2525
className={classNames(
2626
"pb-8 lg:pb-12 pt-5 font-desc text-dark-800 text-base md:tracking-[0.03em]",
@@ -41,7 +41,7 @@ export default function ERC20Section(): JSX.Element {
4141
diagonalArrow
4242
className="pt-4 text-dark-800 text-sm md:text-base font-semibold hover:accent-dfc-gradient-text cursor-pointer"
4343
/>
44-
</div>
44+
</section>
4545
<div
4646
className={classNames(
4747
"absolute z-[-2] mix-blend-hard-light bg-[url(/assets/img/explore/erc20-dfi-coin.png)]",

0 commit comments

Comments
 (0)