Aarush/environment track

frontend/src/app/MainPage.tsx

@@ -22,8 +22,8 @@ export default function Home() {
       <Hero />
       <AboutTheEventPage />
       <BenefitsPage />
-      <TrackPage />
       <PrizesPage />
+      <TrackPage />
       <ExpectationsPage />
       <DeerhackStatsPage />
       <ImageCarouselPage />

frontend/src/app/assets/icons/EnvironmentTrack.tsx

@@ -0,0 +1,19 @@
+const EnvironmentTrackSVG = ({
+  height = 23,
+  width = 21,
+}: {
+  height?: number;
+  width?: number;
+}) => {
+
+  return(
+<svg 
+width={width} 
+height={height} 
+viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.53036 21.469C2.42712 20.3656 1.56292 19.0905 0.937751 17.6437C0.312584 16.197 0 14.7012 0 13.1564C0 11.6116 0.294196 10.0852 0.882589 8.57713C1.47098 7.06909 2.42712 5.65301 3.751 4.32888C4.60908 3.47065 5.66941 2.73502 6.932 2.122C8.19459 1.50898 9.69009 1.02469 11.4185 0.669138C13.1469 0.313585 15.1205 0.0990267 17.3392 0.025464C19.5579 -0.0480987 22.0402 0.0377245 24.786 0.282933C24.9822 2.88215 25.0435 5.27294 24.9699 7.4553C24.8964 9.63766 24.6941 11.6055 24.3631 13.3587C24.0322 15.1119 23.5664 16.6445 22.9657 17.9564C22.365 19.2682 21.6234 20.3656 20.7408 21.2483C19.4415 22.5479 18.0624 23.4981 16.6037 24.0989C15.145 24.6996 13.6556 25 12.1356 25C10.542 25 8.98525 24.6874 7.46523 24.0621C5.94522 23.4368 4.63359 22.5724 3.53036 21.469ZM7.6491 20.8805C8.36008 21.2973 9.08944 21.5977 9.83719 21.7816C10.5849 21.9655 11.3511 22.0575 12.1356 22.0575C13.2634 22.0575 14.3788 21.8307 15.4821 21.377C16.5853 20.9234 17.6395 20.1939 18.6447 19.1885C19.086 18.7472 19.5334 18.128 19.987 17.3311C20.4405 16.5342 20.8328 15.492 21.1637 14.2047C21.4947 12.9173 21.746 11.3603 21.9176 9.53344C22.0892 7.70664 22.1138 5.53041 21.9912 3.00475C20.7899 2.95571 19.4353 2.93732 17.9276 2.94958C16.4198 2.96184 14.9182 3.07832 13.4227 3.299C11.9272 3.51969 10.5053 3.87525 9.15686 4.36566C7.80846 4.85608 6.70522 5.53041 5.84715 6.38864C4.74392 7.49208 3.98391 8.58326 3.56713 9.66218C3.15035 10.7411 2.94196 11.7832 2.94196 12.7886C2.94196 14.2353 3.21777 15.5043 3.76939 16.5955C4.32101 17.6866 4.80521 18.4529 5.22198 18.8943C6.25167 16.9326 7.61233 15.0506 9.30396 13.2484C10.9956 11.4461 12.9692 9.96869 15.2247 8.81621C13.4595 10.361 11.9211 12.1081 10.6095 14.0575C9.29783 16.007 8.31105 18.2813 7.6491 20.8805Z" fill="#FCF7FF"/>
+</svg>
+  )
+}
+
+export default EnvironmentTrackSVG;

frontend/src/app/assets/icons/EnvironmentTrackBody.tsx

@@ -0,0 +1,20 @@
+const EnvironmentTrackBodySVG = ({
+  height = 25,
+  width = 24,
+}: {
+  height?: number;
+  width?: number;
+}) => {
+  return(
+<svg 
+width= "84" 
+height= "84"
+className = "invert"
+viewBox="0 0 105 105" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="52.5" cy="52.5" r="52.5" fill="#110C24"/>
+<path d="M34.5607 69.813C32.3542 67.6061 30.6258 65.0559 29.3755 62.1625C28.1252 59.269 27.5 56.2774 27.5 53.1878C27.5 50.0982 28.0884 47.0453 29.2652 44.0293C30.442 41.0132 32.3542 38.181 35.002 35.5328C36.7182 33.8163 38.8388 32.345 41.364 31.119C43.8892 29.893 46.8802 28.9244 50.337 28.2133C53.7938 27.5022 57.7409 27.0731 62.1784 26.9259C66.6159 26.7788 71.5804 26.9504 77.0721 27.4409C77.4643 32.6393 77.5869 37.4209 77.4398 41.7856C77.2927 46.1503 76.8882 50.0859 76.2263 53.5924C75.5643 57.0989 74.6327 60.164 73.4314 62.7877C72.2301 65.4115 70.7469 67.6061 68.9817 69.3716C66.3829 71.9708 63.6249 73.8712 60.7074 75.0727C57.79 76.2742 54.8112 76.875 51.7712 76.875C48.5841 76.875 45.4705 76.2497 42.4305 74.9992C39.3904 73.7486 36.7672 72.0199 34.5607 69.813ZM42.7982 68.636C44.2202 69.4697 45.6789 70.0704 47.1744 70.4383C48.6699 70.8061 50.2021 70.99 51.7712 70.99C54.0267 70.99 56.2577 70.5363 58.4642 69.6291C60.6706 68.7218 62.779 67.2628 64.7894 65.2521C65.672 64.3693 66.5668 63.131 67.4739 61.5372C68.381 59.9433 69.1656 57.859 69.8275 55.2843C70.4894 52.7097 70.992 49.5955 71.3353 45.9419C71.6785 42.2883 71.7275 37.9358 71.4823 32.8845C69.0797 32.7864 66.3707 32.7496 63.3552 32.7742C60.3397 32.7987 57.3364 33.0316 54.3454 33.473C51.3544 33.9144 48.5105 34.6255 45.8137 35.6063C43.1169 36.5872 40.9104 37.9358 39.1943 39.6523C36.9878 41.8592 35.4678 44.0415 34.6343 46.1994C33.8007 48.3572 33.3839 50.4415 33.3839 52.4522C33.3839 55.3457 33.9355 57.8836 35.0388 60.0659C36.142 62.2483 37.1104 63.7808 37.944 64.6636C40.0033 60.7402 42.7247 56.9763 46.1079 53.3717C49.4912 49.7671 53.4383 46.8124 57.9493 44.5074C54.419 47.597 51.3422 51.0913 48.7189 54.9901C46.0957 58.8889 44.1221 63.4375 42.7982 68.636Z" fill="#ABDF00"/>
+</svg>
+  )
+}
+
+export default EnvironmentTrackBodySVG;

frontend/src/app/components/Tracks/TracksBodyCard.tsx

@@ -21,7 +21,7 @@ const TracksBodyCard: React.FC<TracksBodyCardProps> = ({
 }: TracksBodyCardProps) => {
   return (
     <div
-      className={`max-w-[1250px]  min-h-[526px]  sm:max-h-[423px] flex xl:items-center justify-start align-start flex-col xl:flex-row cursor-pointer px-8 lg:pb-44 pb-24 pt-10 text-lg lg:mx-0 ${cabinetBold.className} rounded-2xl bg-grape ${bodyStyling} gap-8 lg:gap-0`}
+      className={`max-w-[1345px]  min-h-[526px]  sm:max-h-[423px] flex xl:items-center justify-start align-start flex-col xl:flex-row cursor-pointer px-8 lg:pb-44 pb-24 pt-10 text-lg lg:mx-0 ${cabinetBold.className} rounded-2xl bg-grape ${bodyStyling} gap-8 lg:gap-0`}
     >
       <div className="xl:w-3/5 self-start sm:xl lg:px-5 lg:mt-10 ">
         <div className="rounded-full w-16 h-16 flex items-center justify-start">

frontend/src/app/sections/Tracks/TracksCard.tsx

@@ -13,6 +13,8 @@ import DataScienceNew from "@/app/assets/icons/DataScienceNew";
 import BlockchainNew from "@/app/assets/icons/BlockChainNew";
 import OpenInnovationNew from "@/app/assets/icons/OpenInnovationNew";
 import EdTechNew from "@/app/assets/icons/EdTechNew";
+import EnvironmentTrackSVG from "@/app/assets/icons/EnvironmentTrack";
+import EnvironmentTrackBodySVG from "@/app/assets/icons/EnvironmentTrackBody";
 
 const TracksCard = () => {
   const [selectedTrack, setSelectedTrack] = useState<string>(
@@ -27,19 +29,19 @@ const TracksCard = () => {
       headStyling:
         selectedTrack === "Interactive Technology"
           ? "bg-grape text-magnolia active"
-          : "bg-violet hover:bg-grape hover:text-magnolia",
+          : "bg-violet hover:bg-grape hover:text-magnolia transition-all duration-300",
       bodyStyling: "bg-grape text-magnolia",
       description:
         "Enter the World of IoT with DeerHack. Explore connectivity, innovation, and the future of global interaction.",
     },
     {
-      title: "Data Science / Machine Learning",
+      title: "Data Science / ML",
       svg: <DataScienceSVG height={25} width={25} />,
       svgBody: <DataScienceNew height={50} width={50} />,
       headStyling:
-        selectedTrack === "Data Science / Machine Learning"
+        selectedTrack === "Data Science / ML"
           ? "bg-purpures text-magnolia active"
-          : "bg-violet hover:bg-purpures hover:text-magnolia",
+          : "bg-violet hover:bg-purpures hover:text-magnolia transition-all duration-300",
       bodyStyling: "bg-purpures text-magnolia",
       description:
         "Dive deep into the captivating realm of Data Analysis and Predictive Modeling, Leveraging algorithms ",
@@ -51,7 +53,7 @@ const TracksCard = () => {
       headStyling:
         selectedTrack === "Blockchain"
           ? "bg-magnolia text-dark-purple active"
-          : "bg-violet hover:bg-magnolia hover:text-dark-purple",
+          : "bg-violet hover:bg-magnolia hover:text-dark-purple transition-all duration-300",
       bodyStyling: "bg-magnolia text-dark-purple",
       description:
         "Embrace Decentralization with DeerHack. Explore smart contracts, secure transactions, and reshape industries at the forefront of innovation.",
@@ -63,7 +65,7 @@ const TracksCard = () => {
       headStyling:
         selectedTrack === "Open Innovation"
           ? "bg-secondary text-dark-purple active"
-          : "bg-violet hover:bg-secondary hover:text-dark-purple",
+          : "bg-violet hover:bg-secondary hover:text-dark-purple transition-all duration-300",
       bodyStyling: "bg-secondary text-dark-purple",
       description:
         "Transforming Challenges into Opportunities at DeerHack. Be part of the solution, forging a brighter future for all.",
@@ -75,12 +77,23 @@ const TracksCard = () => {
       headStyling:
         selectedTrack === "Ed-Tech"
           ? "gradient-bg text-magnolia active"
-          : "bg-violet hover:gradient-bg hover:text-magnolia",
+          : "bg-violet hover:gradient-bg hover:text-magnolia transition-all duration-300",
       bodyStyling: "gradient-bg text-magnolia",
       description:
         "Reimagining education at DeerHack through smart, interactive, and personalized tech",
     },
-
+    {
+      title: "Environment",
+      svg: <EnvironmentTrackSVG height={25} width={25} />,
+      svgBody: <EnvironmentTrackBodySVG height={50} width={50} />,
+      headStyling:
+        selectedTrack === "Environment"
+          ? "gradient-bg text-magnolia active invert "
+          : "bg-violet hover:gradient-bg hover:text-magnolia hover:invert transition-all duration-300",
+      bodyStyling: "gradient-bg text-magnolia invert transition-all duration-300",
+      description:
+        "Think Green, Code Clean at DeerHack. Dive into the world of climate-positive innovation. Turn environmental challenges into elegant, scalable, and sustainable tech solutions.",
+    },
   ];
 
   const handleTrackSelection = (title: string) => {
@@ -90,10 +103,10 @@ const TracksCard = () => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="lg:w-[69.25rem]  mx-5 lg:mx-auto">
+    <div className="lg:w-[70.36rem]  mx-5 lg:mx-auto transition-all duration-300 ease-in">
 
       <div
-        className={`flex  lg:justify-center items-start text-magnolia  lg:gap-3 md:gap-6 gap-3 overflow-x-auto  no-scrollbar justify-evenly px-3`}
+        className={`flex  lg:justify-center items-start text-magnolia  lg:gap-[12px] md:gap-6 gap-3 overflow-x-auto no-scrollbar justify-evenly px-3`}
         ref={containerRef}
       >
         {trackData.map((track, index) => (