Skip to content

Commit 687e1dd

Browse files
AmirHosseinKarimiAmirHosseinKarimi
authored
Merge pull request #18 from frontChapter/hero
Add Hero section
2 parents 7fb87e1 + 8f0d944 commit 687e1dd

File tree

7 files changed

+1609
-0
lines changed

7 files changed

+1609
-0
lines changed

‎src/app/components/Hero/Hero.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import HeroContent from "./HeroContent";
2+
import HeroSVG from "./HeroSVG";
3+
import { HeroLeftTech, HeroRightTech } from "./HeroTechSVG";
4+
import React from "react";
5+
6+
const Hero = () => {
7+
return (
8+
<div className="relative w-full overflow-hidden bg-background px-4 pb-[400px] text-foreground dark:bg-background-dark dark:text-foreground-dark md:px-8 min-[2200px]:pb-[800px]">
9+
<HeroContent />
10+
<div className="absolute left-1/2 top-0 -translate-x-1/2 px-16">
11+
<div className="absolute -right-[55%] -top-[150px] z-10 hidden items-center justify-center xl:flex">
12+
<HeroLeftTech />
13+
</div>
14+
15+
<div className="absolute -left-[8%] -top-[150px] z-10 hidden items-center justify-center xl:flex">
16+
<HeroRightTech />
17+
</div>
18+
</div>
19+
20+
<div className="absolute left-1/2 top-[345px] -translate-x-1/2 min-[1650px]:w-full min-[1650px]:max-w-[100%]">
21+
<HeroSVG />
22+
</div>
23+
</div>
24+
);
25+
};
26+
27+
export default Hero;

‎src/app/components/Hero/HeroContent.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Badge } from "@/components/ui/badge";
2+
import { Button } from "@/components/ui/button";
3+
import { linksConfig } from "@/configs/links";
4+
import { CarrotIcon, TicketIcon } from "lucide-react";
5+
import Link from "next/link";
6+
7+
const HeroContent = () => {
8+
return (
9+
<div className="relative z-20 flex flex-col justify-center text-center">
10+
<Badge
11+
variant="outline"
12+
className="mx-auto mt-20 w-fit animate-appear opacity-0"
13+
>
14+
<div className="text-md flex items-center gap-1 p-1 text-muted-foreground-dark">
15+
<CarrotIcon className="size-6 text-orange-500" />
16+
<span>فرانت چپتر پخت و پز می‌کند</span>
17+
</div>
18+
</Badge>
19+
<h1 className="inline-block animate-appear bg-gradient-to-r from-foreground-dark to-muted-foreground-dark bg-clip-text pb-8 pt-12 text-[32px] font-extrabold text-transparent opacity-0 lg:text-[80px] lg:leading-[80px]">
20+
همایش فرانت چپتر ۱۴۰۳{" "}
21+
</h1>
22+
23+
<h2 className="mb-6 animate-appear text-[24px] font-bold leading-[24px] text-brand-foreground-dark opacity-0 lg:mb-12 lg:text-[56px] lg:leading-[56px]">
24+
بزرگترین همایش فرانت‌اند ایران
25+
</h2>
26+
<p className="t ext-base mx-auto mb-12 max-w-[360px] animate-appear font-medium text-[#A1A1AA] opacity-0 sm:max-w-full lg:text-xl">
27+
همایش فرانت چپتر محلی برای گردهمایی و به اشتراک‌گذاری تجربیات
28+
<br className="hidden sm:block" /> برنامه‌نویسان، متخصصین و علاقه‌مندان
29+
حوزه فرانت‌اند
30+
</p>
31+
<div className="relative z-10 flex animate-appear flex-wrap justify-center gap-4 opacity-0 delay-300">
32+
<Link href={linksConfig.buyTicket}>
33+
<Button
34+
variant="secondary"
35+
size="default"
36+
className="rounded-md text-primary-foreground-dark"
37+
>
38+
<div className="flex items-center gap-2">
39+
<TicketIcon className="relative h-4 w-4" />
40+
ثبت نام در همایش
41+
</div>
42+
</Button>
43+
</Link>
44+
<div className="overflow-hidden rounded-md">
45+
<Link href={linksConfig.support}>
46+
<Button variant="glow" size="default">
47+
ارتباط با پشتیبانی
48+
</Button>
49+
</Link>
50+
</div>
51+
</div>
52+
</div>
53+
);
54+
};
55+
56+
export default HeroContent;

‎src/app/components/Hero/HeroSVG.tsx‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
import React from "react";
2+
3+
const HeroSVG: React.FC = () => {
4+
return (
5+
<svg
6+
className="animate-appear-zoom opacity-0 delay-1000 min-[1650px]:h-auto min-[1650px]:w-full"
7+
width="2000"
8+
height="596"
9+
viewBox="0 0 2000 596"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
>
13+
<g clipPath="url(#clip0_2375_81)">
14+
<g clipPath="url(#clip1_2375_81)">
15+
<g filter="url(#filter0_f_2375_81)">
16+
<ellipse
17+
cx="1015.5"
18+
cy="355.5"
19+
rx="577.5"
20+
ry="93.5"
21+
fill="#FB923C"
22+
fillOpacity="0.6"
23+
/>
24+
</g>
25+
</g>
26+
<path
27+
d="M1000 250C-59.8345 250 -919 1120.36 -919 2194H2919C2919 1120.36 2059.83 250 1000 250Z"
28+
fill="url(#paint0_linear_2375_81)"
29+
/>
30+
<mask
31+
id="mask0_2375_81"
32+
style={{ maskType: "alpha" }}
33+
maskUnits="userSpaceOnUse"
34+
x="-920"
35+
y="250"
36+
width="3840"
37+
height="1944"
38+
>
39+
<path
40+
d="M1000 250C-60.0298 250 -919.354 1120.36 -919.354 2194H2919.35C2919.35 1120.36 2060.03 250 1000 250Z"
41+
fill="#09090B"
42+
/>
43+
</mask>
44+
<g mask="url(#mask0_2375_81)">
45+
<g opacity="0.2" filter="url(#filter1_f_2375_81)">
46+
<path
47+
fillRule="evenodd"
48+
clipRule="evenodd"
49+
d="M-605.063 1012.2C-262.01 483.585 328.755 134.586 1000 134.586C1671.25 134.586 2262.02 483.588 2605.07 1012.21C2190.87 603.577 1624.53 351.779 999.999 351.779C375.474 351.779 -190.864 603.574 -605.063 1012.2Z"
50+
fill="#FB923C"
51+
/>
52+
</g>
53+
<g opacity="0.5" filter="url(#filter2_f_2375_81)">
54+
<path
55+
fillRule="evenodd"
56+
clipRule="evenodd"
57+
d="M-526.345 899.778C-175.652 434.666 377.575 134.586 1000 134.586C1622.43 134.586 2175.65 434.666 2526.35 899.779C2120.46 535.039 1585.83 313.478 1000 313.478C414.169 313.478 -120.463 535.039 -526.345 899.778Z"
58+
fill="#FDBA74"
59+
/>
60+
</g>
61+
<g filter="url(#filter3_f_2375_81)">
62+
<path
63+
fillRule="evenodd"
64+
clipRule="evenodd"
65+
d="M-542.499 872.221C-192.777 394.743 367.932 85.2932 1000 85.2932C1632.07 85.2932 2192.78 394.743 2542.5 872.222C2134.7 498.771 1593.64 271.267 1000 271.267C406.364 271.267 -134.699 498.771 -542.499 872.221Z"
66+
fill="#FAFAFA"
67+
/>
68+
</g>
69+
</g>
70+
<g filter="url(#filter4_dd_2375_81)">
71+
<path
72+
d="M2919 2194C2919 1120.36 2059.83 250 1000 250C-59.8345 250 -919 1120.36 -919 2194"
73+
stroke="url(#paint1_linear_2375_81)"
74+
strokeWidth="5"
75+
/>
76+
</g>
77+
<rect
78+
y="339"
79+
width="2000"
80+
height="217"
81+
fill="url(#paint2_linear_2375_81)"
82+
/>
83+
</g>
84+
<defs>
85+
<filter
86+
id="filter0_f_2375_81"
87+
x="126"
88+
y="-50"
89+
width="1779"
90+
height="811"
91+
filterUnits="userSpaceOnUse"
92+
colorInterpolationFilters="sRGB"
93+
>
94+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
95+
<feBlend
96+
mode="normal"
97+
in="SourceGraphic"
98+
in2="BackgroundImageFix"
99+
result="shape"
100+
/>
101+
<feGaussianBlur
102+
stdDeviation="156"
103+
result="effect1_foregroundBlur_2375_81"
104+
/>
105+
</filter>
106+
<filter
107+
id="filter1_f_2375_81"
108+
x="-645.063"
109+
y="94.5862"
110+
width="3290.13"
111+
height="957.622"
112+
filterUnits="userSpaceOnUse"
113+
colorInterpolationFilters="sRGB"
114+
>
115+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
116+
<feBlend
117+
mode="normal"
118+
in="SourceGraphic"
119+
in2="BackgroundImageFix"
120+
result="shape"
121+
/>
122+
<feGaussianBlur
123+
stdDeviation="20"
124+
result="effect1_foregroundBlur_2375_81"
125+
/>
126+
</filter>
127+
<filter
128+
id="filter2_f_2375_81"
129+
x="-566.345"
130+
y="94.5862"
131+
width="3132.69"
132+
height="845.193"
133+
filterUnits="userSpaceOnUse"
134+
colorInterpolationFilters="sRGB"
135+
>
136+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
137+
<feBlend
138+
mode="normal"
139+
in="SourceGraphic"
140+
in2="BackgroundImageFix"
141+
result="shape"
142+
/>
143+
<feGaussianBlur
144+
stdDeviation="20"
145+
result="effect1_foregroundBlur_2375_81"
146+
/>
147+
</filter>
148+
<filter
149+
id="filter3_f_2375_81"
150+
x="-582.499"
151+
y="45.2932"
152+
width="3165"
153+
height="866.929"
154+
filterUnits="userSpaceOnUse"
155+
colorInterpolationFilters="sRGB"
156+
>
157+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
158+
<feBlend
159+
mode="normal"
160+
in="SourceGraphic"
161+
in2="BackgroundImageFix"
162+
result="shape"
163+
/>
164+
<feGaussianBlur
165+
stdDeviation="20"
166+
result="effect1_foregroundBlur_2375_81"
167+
/>
168+
</filter>
169+
<filter
170+
id="filter4_dd_2375_81"
171+
x="-985.5"
172+
y="183.5"
173+
width="3971"
174+
height="2074.5"
175+
filterUnits="userSpaceOnUse"
176+
colorInterpolationFilters="sRGB"
177+
>
178+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
179+
<feColorMatrix
180+
in="SourceAlpha"
181+
type="matrix"
182+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
183+
result="hardAlpha"
184+
/>
185+
<feOffset />
186+
<feGaussianBlur stdDeviation="32" />
187+
<feColorMatrix
188+
type="matrix"
189+
values="0 0 0 0 0.984314 0 0 0 0 0.572549 0 0 0 0 0.235294 0 0 0 1 0"
190+
/>
191+
<feBlend
192+
mode="normal"
193+
in2="BackgroundImageFix"
194+
result="effect1_dropShadow_2375_81"
195+
/>
196+
<feColorMatrix
197+
in="SourceAlpha"
198+
type="matrix"
199+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
200+
result="hardAlpha"
201+
/>
202+
<feOffset />
203+
<feGaussianBlur stdDeviation="4" />
204+
<feColorMatrix
205+
type="matrix"
206+
values="0 0 0 0 0.992157 0 0 0 0 0.729412 0 0 0 0 0.454902 0 0 0 0.5 0"
207+
/>
208+
<feBlend
209+
mode="normal"
210+
in2="effect1_dropShadow_2375_81"
211+
result="effect2_dropShadow_2375_81"
212+
/>
213+
<feBlend
214+
mode="normal"
215+
in="SourceGraphic"
216+
in2="effect2_dropShadow_2375_81"
217+
result="shape"
218+
/>
219+
</filter>
220+
<linearGradient
221+
id="paint0_linear_2375_81"
222+
x1="1000"
223+
y1="250"
224+
x2="1000"
225+
y2="1858.58"
226+
gradientUnits="userSpaceOnUse"
227+
>
228+
<stop stopColor="#09090B" stopOpacity="0" />
229+
<stop offset="0.16253" stopColor="#09090B" stopOpacity="0.2" />
230+
<stop offset="1" stopColor="#09090B" />
231+
</linearGradient>
232+
<linearGradient
233+
id="paint1_linear_2375_81"
234+
x1="1000"
235+
y1="250"
236+
x2="1000"
237+
y2="2194"
238+
gradientUnits="userSpaceOnUse"
239+
>
240+
<stop stopColor="#FDBA74" />
241+
<stop offset="0.491922" stopColor="#FB923C" stopOpacity="0.1" />
242+
<stop offset="1" stopColor="#FB923C" stopOpacity="0" />
243+
</linearGradient>
244+
<linearGradient
245+
id="paint2_linear_2375_81"
246+
x1="1000"
247+
y1="339"
248+
x2="1000"
249+
y2="556"
250+
gradientUnits="userSpaceOnUse"
251+
>
252+
<stop stopColor="#09090B" stopOpacity="0" />
253+
<stop offset="0.855" stopColor="#09090B" />
254+
</linearGradient>
255+
<clipPath id="clip0_2375_81">
256+
<rect width="2000" height="556" fill="white" />
257+
</clipPath>
258+
<clipPath id="clip1_2375_81">
259+
<rect
260+
width="1681"
261+
height="1069"
262+
fill="white"
263+
transform="translate(159 -31)"
264+
/>
265+
</clipPath>
266+
</defs>
267+
</svg>
268+
);
269+
};
270+
271+
export default HeroSVG;

0 commit comments

Comments
 (0)