feat:track section

package.json

@@ -12,13 +12,11 @@
     "autoprefixer": "10.4.14",
     "eslint": "7.28.0",
     "eslint-config-next": "13.4.5",
-
     "hamburger-react": "^2.5.0",
-    "next": "13.4.5",
+    "next": "^13.4.5",
     "postcss": "8.4.24",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-
     "react-dom": "^18.2.0",
     "sharp": "^0.32.1",
     "tailwindcss": "3.3.2"

src/app/page.js

@@ -1,26 +1,25 @@
-
 import Accordion from "@/components/FAQs/Accordion";
 import Hero from "@/components/Hero/Hero";
 import Timeline from "@/components/Timeline/timeline";
 import Statistics from "../components/suraj/Statistics";
 import { AboutUs } from "@/components/AboutUs";
 import Footer from "@/components/Footer/Footer";
 import { Sponsor } from "@/components/Sponsor/Sponsors";
+import Track from "@/components/TRACK/Track";
 
 export default function Home() {
   return (
     <>
-
       <Hero />
       <AboutUs />
       <Statistics />
       <Timeline />
-      <Sponsor/>
+      <Track />
+      <Sponsor />
       <div className="relative">
-      <Accordion/>
-      <Footer/>
-
-      </div>    
+        <Accordion />
+        <Footer />
+      </div>
     </>
   );
 }

src/components/TRACK/Track.css

@@ -0,0 +1,145 @@
+.imago {
+  position: relative;
+}
+.imagos {
+  position: relative;
+}
+.text {
+  position: absolute;
+  color: white;
+  text-align: center;
+  font-family: Syoog;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 180%;
+}
+.sp {
+  color: #06ebe5;
+}
+.headin {
+  color: #ca40cd;
+  text-align: center;
+  font-family: Syoog;
+  font-size: 106px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 180%;
+  text-decoration-line: underline;
+}
+.hea {
+  color: #bbb4b4;
+  text-align: center;
+  font-family: Syoog;
+  font-size: 55px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 180%; /* 118.8px */
+  text-decoration-line: underline;
+}
+.text2 {
+  position: absolute;
+  color: #fff;
+  text-align: center;
+  font-family: Syoog;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 200;
+  line-height: 130%; /* 72px */
+}
+
+.ima-full {
+  display: block;
+}
+.ima-small {
+  display: none;
+}
+
+@media screen and (max-width: 1024px) {
+  .text2 {
+    position: absolute;
+    color: #fff;
+    text-align: center;
+    font-family: Syoog;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 50;
+    line-height: 130%; /* 72px */
+  }
+  .headin {
+    font-size: 55px;
+  }
+  .hea {
+    color: #bbb4b4;
+    text-align: center;
+    font-family: Syoog;
+    font-size: 45px;
+    font-style: normal;
+    font-weight: 100;
+    line-height: 100%; /* 118.8px */
+    text-decoration-line: underline;
+  }
+  .text {
+    font-size: 28px;
+  }
+}
+
+@media screen and (max-width: 768px) and (min-width: 600px) {
+  .text2 {
+    position: absolute;
+    top: 70px;
+    left: 38px;
+    color: #fff;
+    text-align: center;
+    font-family: Syoog;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 50;
+    line-height: 130%; /* 72px */
+  }
+  .text {
+    top: 26px;
+    font-size: 28px;
+  }
+  .hea {
+    color: #bbb4b4;
+    text-align: center;
+    font-family: Syoog;
+    font-size: 35px;
+    font-style: normal;
+    font-weight: 100;
+    line-height: 100%;
+    text-decoration-line: underline;
+  }
+  .imagio {
+    position: relative;
+  }
+
+  .parent {
+    display: grid;
+  }
+  .child {
+    display: inline;
+  }
+
+  .ima-full {
+    display: none;
+    position: relative;
+  }
+  .ima-small {
+    display: block;
+    position: relative;
+    max-width: 80vw;
+    margin: 0 auto;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .text2 {
+    font-size: 14px;
+    top: 67px;
+  }
+  .text {
+    font-size: 18px;
+  }
+}

src/components/TRACK/Track.js

@@ -0,0 +1,98 @@
+import Image from "next/image";
+import "./Track.css";
+
+function Track() {
+  return (
+    <div className="h-fit py-40">
+      <div className=" parent max-w-[1200px] md:gap-y-0 px-4 sm:grid lg:grid-rows-2 md:grid-rows-2 gap-x-[4vw] sm:grid-rows-3 grid-flow-col mx-auto">
+        <div className="child lg:row-span-2 md:row-span-2 place-content-evenly  justify-center grid xl:justify-end mb-4 ">
+          <div className="imagio flex flex-col items-center md:justify-start justify-center h-fit ">
+            <Image
+            width={500}
+            height={400}
+              src={"/Images/gold-border.png"}
+              alt="Picture of the author"
+              className="ima-full"
+            />
+            <Image
+            width={250}
+            height={200}
+              src={"/Images/gold-border-mobile.png"}
+              alt="Picture of the author"
+              className="ima-small"
+            />
+            <div className="text flex flex-col gap-6">
+              <h1 className="headin">Gold</h1>
+              <p className="">
+                Cash Prizes <span className="sp"> ₹25k</span>
+              </p>
+              <p className="">Goodies & Tshirts</p>
+              <p className="">
+                Vouchers worth<span className="sp"> $50k </span>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className=" child h-fit  mb-4">
+          <div className="imago grid place-items-center xl:place-items-start">
+            <Image
+            width={500}
+            height={400}
+              src={"/Images/silver-border.png"}
+              alt="Picture of the author"
+              className="ima-full"
+            />
+            <Image
+            width={250}
+            height={200}
+              src={"/Images/silver-border-mobile.png"}
+              alt="Picture of the author"
+              className="ima-small"
+            />
+            <div className="text2 h-full flex flex-col gap-4 xl:translate-x-[40%] -translate-y-[25%]  md:translate-y-0">
+              <h1 className="hea">Silver</h1>
+              <p className="">
+                Cash Prizes <span className="sp">₹17k</span>
+              </p>
+              <p className="">Goodies & Tshirts</p>
+              <p className="">
+                Vouchers worth<span className="sp"> $50k </span>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className=" child mb-4">
+          <div className="imagos grid place-items-center xl:place-items-start">
+            <Image
+            width={500}
+            height={400}
+              src={"/Images/bronze-border.png"}
+              alt="Picture of the author"
+              className="ima-full"
+            />
+            <Image
+            width={250}
+            height={200}
+              src={"/Images/bronze-border-mobile.png"}
+              alt="Picture of the author"
+              className="ima-small"
+            />
+            <div className="text2 h-full flex flex-col gap-4 xl:translate-x-[40%] -translate-y-[25%]  md:translate-y-0 ">
+              <h1 className="hea">Bronze</h1>
+              <p className="">
+                Cash Prizes <span className="sp"> ₹10k</span>
+              </p>
+              <p className="">Goodies & Tshirts</p>
+              <p className="">
+                Vouchers worth<span className="sp"> $50k </span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Track;