Add Hero section

src/app/components/Hero/Hero.tsx

@@ -0,0 +1,27 @@
+import HeroContent from "./HeroContent";
+import HeroSVG from "./HeroSVG";
+import { HeroLeftTech, HeroRightTech } from "./HeroTechSVG";
+import React from "react";
+
+const Hero = () => {
+  return (
+    <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]">
+      <HeroContent />
+      <div className="absolute left-1/2 top-0 -translate-x-1/2 px-16">
+        <div className="absolute -right-[55%] -top-[150px] z-10 hidden items-center justify-center xl:flex">
+          <HeroLeftTech />
+        </div>
+
+        <div className="absolute -left-[8%] -top-[150px] z-10 hidden items-center justify-center xl:flex">
+          <HeroRightTech />
+        </div>
+      </div>
+
+      <div className="absolute left-1/2 top-[345px] -translate-x-1/2 min-[1650px]:w-full min-[1650px]:max-w-[100%]">
+        <HeroSVG />
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

src/app/components/Hero/HeroContent.tsx

@@ -0,0 +1,56 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { linksConfig } from "@/configs/links";
+import { CarrotIcon, TicketIcon } from "lucide-react";
+import Link from "next/link";
+
+const HeroContent = () => {
+  return (
+    <div className="relative z-20 flex flex-col justify-center text-center">
+      <Badge
+        variant="outline"
+        className="mx-auto mt-20 w-fit animate-appear opacity-0"
+      >
+        <div className="text-md flex items-center gap-1 p-1 text-muted-foreground-dark">
+          <CarrotIcon className="size-6 text-orange-500" />
+          <span>فرانت چپتر پخت و پز می‌کند</span>
+        </div>
+      </Badge>
+      <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]">
+        همایش فرانت چپتر ۱۴۰۳{" "}
+      </h1>
+
+      <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]">
+        بزرگترین همایش فرانت‌اند ایران
+      </h2>
+      <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">
+        همایش فرانت چپتر محلی برای گردهمایی و به اشتراک‌گذاری تجربیات
+        <br className="hidden sm:block" /> برنامه‌نویسان، متخصصین و علاقه‌مندان
+        حوزه فرانت‌اند
+      </p>
+      <div className="relative z-10 flex animate-appear flex-wrap justify-center gap-4 opacity-0 delay-300">
+        <Link href={linksConfig.buyTicket}>
+          <Button
+            variant="secondary"
+            size="default"
+            className="rounded-md text-primary-foreground-dark"
+          >
+            <div className="flex items-center gap-2">
+              <TicketIcon className="relative h-4 w-4" />
+              ثبت نام در همایش
+            </div>
+          </Button>
+        </Link>
+        <div className="overflow-hidden rounded-md">
+          <Link href={linksConfig.support}>
+            <Button variant="glow" size="default">
+              ارتباط با پشتیبانی
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroContent;

src/app/components/Hero/HeroSVG.tsx

@@ -0,0 +1,271 @@
+import React from "react";
+
+const HeroSVG: React.FC = () => {
+  return (
+    <svg
+      className="animate-appear-zoom opacity-0 delay-1000 min-[1650px]:h-auto min-[1650px]:w-full"
+      width="2000"
+      height="596"
+      viewBox="0 0 2000 596"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_2375_81)">
+        <g clipPath="url(#clip1_2375_81)">
+          <g filter="url(#filter0_f_2375_81)">
+            <ellipse
+              cx="1015.5"
+              cy="355.5"
+              rx="577.5"
+              ry="93.5"
+              fill="#FB923C"
+              fillOpacity="0.6"
+            />
+          </g>
+        </g>
+        <path
+          d="M1000 250C-59.8345 250 -919 1120.36 -919 2194H2919C2919 1120.36 2059.83 250 1000 250Z"
+          fill="url(#paint0_linear_2375_81)"
+        />
+        <mask
+          id="mask0_2375_81"
+          style={{ maskType: "alpha" }}
+          maskUnits="userSpaceOnUse"
+          x="-920"
+          y="250"
+          width="3840"
+          height="1944"
+        >
+          <path
+            d="M1000 250C-60.0298 250 -919.354 1120.36 -919.354 2194H2919.35C2919.35 1120.36 2060.03 250 1000 250Z"
+            fill="#09090B"
+          />
+        </mask>
+        <g mask="url(#mask0_2375_81)">
+          <g opacity="0.2" filter="url(#filter1_f_2375_81)">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              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"
+              fill="#FB923C"
+            />
+          </g>
+          <g opacity="0.5" filter="url(#filter2_f_2375_81)">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              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"
+              fill="#FDBA74"
+            />
+          </g>
+          <g filter="url(#filter3_f_2375_81)">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              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"
+              fill="#FAFAFA"
+            />
+          </g>
+        </g>
+        <g filter="url(#filter4_dd_2375_81)">
+          <path
+            d="M2919 2194C2919 1120.36 2059.83 250 1000 250C-59.8345 250 -919 1120.36 -919 2194"
+            stroke="url(#paint1_linear_2375_81)"
+            strokeWidth="5"
+          />
+        </g>
+        <rect
+          y="339"
+          width="2000"
+          height="217"
+          fill="url(#paint2_linear_2375_81)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_2375_81"
+          x="126"
+          y="-50"
+          width="1779"
+          height="811"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="156"
+            result="effect1_foregroundBlur_2375_81"
+          />
+        </filter>
+        <filter
+          id="filter1_f_2375_81"
+          x="-645.063"
+          y="94.5862"
+          width="3290.13"
+          height="957.622"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="20"
+            result="effect1_foregroundBlur_2375_81"
+          />
+        </filter>
+        <filter
+          id="filter2_f_2375_81"
+          x="-566.345"
+          y="94.5862"
+          width="3132.69"
+          height="845.193"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="20"
+            result="effect1_foregroundBlur_2375_81"
+          />
+        </filter>
+        <filter
+          id="filter3_f_2375_81"
+          x="-582.499"
+          y="45.2932"
+          width="3165"
+          height="866.929"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="20"
+            result="effect1_foregroundBlur_2375_81"
+          />
+        </filter>
+        <filter
+          id="filter4_dd_2375_81"
+          x="-985.5"
+          y="183.5"
+          width="3971"
+          height="2074.5"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="32" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.984314 0 0 0 0 0.572549 0 0 0 0 0.235294 0 0 0 1 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_2375_81"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4" />
+          <feColorMatrix
+            type="matrix"
+            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"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect1_dropShadow_2375_81"
+            result="effect2_dropShadow_2375_81"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect2_dropShadow_2375_81"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_2375_81"
+          x1="1000"
+          y1="250"
+          x2="1000"
+          y2="1858.58"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#09090B" stopOpacity="0" />
+          <stop offset="0.16253" stopColor="#09090B" stopOpacity="0.2" />
+          <stop offset="1" stopColor="#09090B" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2375_81"
+          x1="1000"
+          y1="250"
+          x2="1000"
+          y2="2194"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FDBA74" />
+          <stop offset="0.491922" stopColor="#FB923C" stopOpacity="0.1" />
+          <stop offset="1" stopColor="#FB923C" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_2375_81"
+          x1="1000"
+          y1="339"
+          x2="1000"
+          y2="556"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#09090B" stopOpacity="0" />
+          <stop offset="0.855" stopColor="#09090B" />
+        </linearGradient>
+        <clipPath id="clip0_2375_81">
+          <rect width="2000" height="556" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_2375_81">
+          <rect
+            width="1681"
+            height="1069"
+            fill="white"
+            transform="translate(159 -31)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default HeroSVG;