Skip to content

Commit ccfdd32

Browse files
theAwmintheAwmin
committed
fix onepage mobile
1 parent 6fd342d commit ccfdd32

22 files changed

Lines changed: 455 additions & 339 deletions

‎src/app/[lang]/whitepaper/components/AvalancheCTA.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ export default function AvalancheCTA({ params, mainData }: AvalancheCTAProps) {
244244
const progressPercent = (step / TOTAL_STEPS) * 100;
245245

246246
return (
247-
<section className="w-full rounded-[28px] bg-white dark:bg-[#1A1A18] p-6">
247+
<section className="w-full rounded-xl lg:rounded-[32px] bg-white dark:bg-[#1A1A18] p-6">
248248
<style>{`
249249
@keyframes flipForward {
250250
0% { transform: rotateY(90deg); opacity: 0; }
@@ -288,15 +288,15 @@ export default function AvalancheCTA({ params, mainData }: AvalancheCTAProps) {
288288
{findByUniqueId(mainData, 1723)}
289289
</p>
290290

291-
<p className="mt-6 text-white/75 text-[14px] leading-6 max-w-[360px]">
291+
<p className="mt-6 text-white/75 text-base leading-6 max-w-[360px]">
292292
{findByUniqueId(mainData, 1724)}
293293
</p>
294294
</div>
295295

296296
{/* Button */}
297297
<div className="relative z-10">
298298
<ClipButton clip={params.lang == "fa" ? "bl" : "br"}
299-
className="w-[230px] h-[64px] group m-5 cursor-pointer duration-300 text-white hover:text-[#9100D9]">
299+
className="w-[230px] h-[64px] group cursor-pointer duration-300 text-white hover:text-[#9100D9]">
300300
<button
301301
type="button"
302302
aria-label="btn to next"
@@ -345,7 +345,7 @@ export default function AvalancheCTA({ params, mainData }: AvalancheCTAProps) {
345345
{findByUniqueId(mainData, 1726)}
346346
</h2>
347347

348-
<p className="mt-5 text-white/75 text-[14px] leading-6 max-w-[420px]">
348+
<p className="mt-5 text-white/75 text-base leading-6 max-w-[420px]">
349349
{findByUniqueId(mainData, 1727)}
350350
</p>
351351
</div>
@@ -554,13 +554,13 @@ export default function AvalancheCTA({ params, mainData }: AvalancheCTAProps) {
554554

555555
{/* Footer */}
556556
<div className="flex flex-col gap-y-5 mt-5 md:flex-row items-center justify-between pt-8">
557-
<div className="flex items-center gap-5">
558-
<span className="text-white text-[14px]">
557+
<div className="flex items-center gap-5 w-full lg:w-auto">
558+
<span className="text-white text-[14px] w-max text-nowrap">
559559
{step} {findByUniqueId(mainData, 1730)} {TOTAL_STEPS}{" "}
560560
{findByUniqueId(mainData, 1729)}
561561
</span>
562562

563-
<div className="w-[110px] h-[2px] bg-white/15 rounded-full overflow-hidden">
563+
<div className="w-full lg:w-[110px] h-[2px] bg-white/15 rounded-full overflow-hidden">
564564
<div
565565
className="h-full bg-white rounded-full transition-all duration-300"
566566
style={{ width: `${progressPercent}%` }}
@@ -608,15 +608,15 @@ export default function AvalancheCTA({ params, mainData }: AvalancheCTAProps) {
608608

609609

610610
<ClipButton clip={params.lang == "fa" ? "bl" : "br"}
611-
className="w-[230px] h-[64px] group m-5 cursor-pointer duration-300 text-white hover:text-[#9100D9]">
611+
className="w-[230px] h-[64px] group cursor-pointer duration-300 text-white hover:text-[#9100D9]">
612612
<button
613613
type="button"
614614
aria-label="btn next"
615615
onClick={handleNext}
616616
disabled={status === "submitting"}
617617
className="bg-transparent flex items-center text-base !ring-0 !border-0 focus-visible:ring-0"
618618
>
619-
<span className="text-black font-medium group-hover:text-white pe-3">{findByUniqueId(mainData, 1711)}</span>
619+
<span className="text-black font-medium group-hover:text-white pe-3">{findByUniqueId(mainData, 1755)}</span>
620620
<svg className="rtl:rotate-180 stroke-white"
621621
width="20"
622622
height="20"

‎src/app/[lang]/whitepaper/components/AvalancheEventsCard.tsx‎

Lines changed: 86 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,31 @@
22
import ClipButton from "@/components/shared/ClipButton";
33
import ClipSection from "@/components/shared/ClipContainer";
44
import { findByUniqueId } from "@/components/utils/findByUniqueId";
5-
import Image from "next/image";
5+
import { useEffect, useState } from 'react';
6+
// import Image from "next/image";
67
interface AvalancheEventsCardProps {
78
params: { lang: string };
89
mainData: { mainData: string };
910
}
1011
export default function AvalancheEventsCard({ params, mainData }: AvalancheEventsCardProps) {
12+
const [isMobile, setIsMobile] = useState(false);
1113

14+
useEffect(() => {
15+
const media = window.matchMedia("(max-width: 1023px)");
16+
17+
const update = () => setIsMobile(media.matches);
18+
19+
update();
20+
21+
media.addEventListener("change", update);
22+
23+
return () => media.removeEventListener("change", update);
24+
}, []);
1225
return (
1326
<ClipSection
1427
corner={params.lang == "fa" ? "bl" : "br"}
15-
radius={32}
16-
cornerRadius = {16}
28+
radius={isMobile ? 12 : 32}
29+
cornerRadius={16}
1730
cornerSize={120} className="w-full text-white dark:text-[#1A1A18] rounded-[28px] p-5 xl:p-7 overflow-hidden">
1831
<div className="grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-6 items-stretch">
1932
{/* Left Side */}
@@ -29,40 +42,40 @@ export default function AvalancheEventsCard({ params, mainData }: AvalancheEvent
2942
</div>
3043

3144
<ClipButton clip={params.lang == "fa" ? "bl" : "br"}
32-
className="w-[230px] overflow-hidden h-[64px] group m-5 cursor-pointer duration-300 text-black dark:text-white hover:!text-[#9100D9] ">
33-
<button
34-
type="button"
35-
aria-label="btn event"
36-
37-
className="bg-transparent flex items-center text-base !ring-0 !border-0 focus-visible:ring-0"
38-
>
39-
<span className="text-white dark:text-black font-medium group-hover:text-white pe-3">{findByUniqueId(mainData, 1711)}</span>
40-
<svg className="rtl:rotate-180 stroke-white"
41-
width="20"
42-
height="20"
43-
viewBox="0 0 24 24"
44-
fill="none"
45-
aria-hidden="true"
46-
>
47-
<path
48-
className="stroke-[#9100D9] group-hover:stroke-white"
49-
d="M5 12H19"
50-
stroke="white"
51-
strokeWidth="1.8"
52-
strokeLinecap="round"
53-
/>
54-
<path
55-
className="stroke-[#9100D9] group-hover:stroke-white"
56-
d="M13 6L19 12L13 18"
57-
stroke="white"
58-
strokeWidth="1.8"
59-
strokeLinecap="round"
60-
strokeLinejoin="round"
61-
/>
62-
</svg>
63-
64-
</button>
65-
</ClipButton>
45+
className="w-[230px] overflow-hidden h-[64px] group ms-0 m-5 cursor-pointer duration-300 text-black dark:text-white hover:!text-[#9100D9] ">
46+
<button
47+
type="button"
48+
aria-label="btn event"
49+
50+
className="bg-transparent flex items-center text-base !ring-0 !border-0 focus-visible:ring-0"
51+
>
52+
<span className="text-white dark:text-black font-medium group-hover:text-white pe-3">{findByUniqueId(mainData, 1711)}</span>
53+
<svg className="rtl:rotate-180 stroke-white"
54+
width="20"
55+
height="20"
56+
viewBox="0 0 24 24"
57+
fill="none"
58+
aria-hidden="true"
59+
>
60+
<path
61+
className="stroke-[#9100D9] group-hover:stroke-white"
62+
d="M5 12H19"
63+
stroke="white"
64+
strokeWidth="1.8"
65+
strokeLinecap="round"
66+
/>
67+
<path
68+
className="stroke-[#9100D9] group-hover:stroke-white"
69+
d="M13 6L19 12L13 18"
70+
stroke="white"
71+
strokeWidth="1.8"
72+
strokeLinecap="round"
73+
strokeLinejoin="round"
74+
/>
75+
</svg>
76+
77+
</button>
78+
</ClipButton>
6679
</div>
6780

6881
{/* Right Card */}
@@ -104,42 +117,42 @@ export default function AvalancheEventsCard({ params, mainData }: AvalancheEvent
104117
Reimagined
105118
</h3>
106119
</div>
107-
108-
<ClipButton clip={params.lang == "fa" ? "bl" : "br"}
109-
className="w-[180px] lg:w-[230px] h-[64px] group mt-5 cursor-pointer duration-300 text-black dark:text-white hover:!text-[#9100D9] ">
110-
<button
111-
type="button"
112-
aria-label="btn event"
113-
114-
className="bg-transparent flex items-center text-base !ring-0 !border-0 focus-visible:ring-0"
115-
>
116-
<span className="text-white dark:text-black font-medium group-hover:text-white pe-3">{findByUniqueId(mainData, 1711)}</span>
117-
<svg className="rtl:rotate-180 stroke-white"
118-
width="20"
119-
height="20"
120-
viewBox="0 0 24 24"
121-
fill="none"
122-
aria-hidden="true"
123-
>
124-
<path
125-
className="stroke-[#9100D9] group-hover:stroke-white"
126-
d="M5 12H19"
127-
stroke="white"
128-
strokeWidth="1.8"
129-
strokeLinecap="round"
130-
/>
131-
<path
132-
className="stroke-[#9100D9] group-hover:stroke-white"
133-
d="M13 6L19 12L13 18"
134-
stroke="white"
135-
strokeWidth="1.8"
136-
strokeLinecap="round"
137-
strokeLinejoin="round"
138-
/>
139-
</svg>
140-
141-
</button>
142-
</ClipButton>
120+
121+
<ClipButton clip={params.lang == "fa" ? "bl" : "br"}
122+
className="w-[180px] lg:w-[230px] h-[64px] group mt-5 cursor-pointer duration-300 text-black dark:text-white hover:!text-[#9100D9] ">
123+
<button
124+
type="button"
125+
aria-label="btn event"
126+
127+
className="bg-transparent flex items-center text-base !ring-0 !border-0 focus-visible:ring-0"
128+
>
129+
<span className="text-white dark:text-black font-medium group-hover:text-white pe-3">{findByUniqueId(mainData, 1711)}</span>
130+
<svg className="rtl:rotate-180 stroke-white"
131+
width="20"
132+
height="20"
133+
viewBox="0 0 24 24"
134+
fill="none"
135+
aria-hidden="true"
136+
>
137+
<path
138+
className="stroke-[#9100D9] group-hover:stroke-white"
139+
d="M5 12H19"
140+
stroke="white"
141+
strokeWidth="1.8"
142+
strokeLinecap="round"
143+
/>
144+
<path
145+
className="stroke-[#9100D9] group-hover:stroke-white"
146+
d="M13 6L19 12L13 18"
147+
stroke="white"
148+
strokeWidth="1.8"
149+
strokeLinecap="round"
150+
strokeLinejoin="round"
151+
/>
152+
</svg>
153+
154+
</button>
155+
</ClipButton>
143156
</div>
144157
</ClipSection>
145158
</div>

0 commit comments

Comments
 (0)