Shreyansh/legacy page

frontend/src/app/components/Legacy/CarouselImage.tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+import Image from "next/image";
+
+export default function CarouselImage({ text }: { text: string }): ReactElement {
+
+  return (
+    <li>
+
+    <div className=" w-[7.3rem] h-[0.75rem] md:w-[10rem] md:h-[2.875rem] sm:w-fit sm:h-[0.5rem] flex justify-center items-center rounded-xl">
+
+        <p>
+            {text} 
+        </p>
+
+    </div>
+
+    </li>
+
+  );
+}

frontend/src/app/components/Quotes/QuotesCard.tsx

@@ -1,8 +1,72 @@
-export default function QuotesCard(){
-    return(
+import Image from "next/image";
+import hero from "../../assets/images/Hero.jpg"
+import { ReactElement } from "react";
+import { cabinetBold, cabinetExtraBold, cabinetMedium, satoshiRegular } from "../../utils/fonts";
+
+interface QuotesCardDetails {
+    title_front:string;
+    title_highlight:string;
+    title_back:string;
+    description:string;  
+    name:string;
+    position:string;
+    photo:ReactElement;
+}
+
+const QuotesCard: React.FC<QuotesCardDetails> = ({
+            title_front,
+            title_highlight,
+            title_back,
+            description,
+            name,
+            position, 
+            photo,
+        }) => {
+            return (
         <>
-
+            <div className="md:flex md:flex-row justify-center items-center gap-9 sm:flex sm:flex-col">
+                        <div className="photo flex justify-center items-center">
+
+                            <div className="w-[19.125rem] lg:w-[20.763rem] h-[29.096rem] lg:h-[28.133rem] primary-gradient-background rounded-[1rem] p-[0.1875rem]">
+                                <div className="w-full lg:w-full h-full lg:h-full legacy-gradient-background rounded-[1rem] p-[0.1rem]">
+                                    <div className="h-fit w-fit">
+                                    {photo}
+                                    </div>
+                                        <div className="z-index-50 bg-[#110C24] flex justify-start h-fit lg:max-h-[7rem] lg-w[15.813rem] rounded-[1rem] lg:mx-3 lg:mt-[10rem] mt-[14rem] px-3 py-2 ">
+                                            <div className="flex flex-col">
+                                                <div className={`${cabinetBold.className} text-[1.125rem] h-fit`}>{name}
+                                                </div>
+                                                <div className={`${cabinetMedium} text-[0.875rem] h-fit`}>
+                                                    {position}
+                                                </div>
+                                            </div>
+                                        </div>
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <div className="quotebox">
+                            <div className="flex flex-col md:flex-row justify-center items-center mt-[2.813rem] md:mt-[0.7rem] lg:mt-[0.7rem]">
+                                <div className="w-[19.728rem] lg:w-[50.75rem] h-[29.096rem] lg:h-[28.133rem] sm:h-max-[26.125rem] legacy-gradient-background rounded-[2rem] p-[0.1rem] mb-4">
+                                    <div className="bg-dark-purple w-full h-full rounded-[1.9rem]">
+                                        <div className="flex flex-col py-[2rem] px-[3.063rem] lg:py-[4.3rem] lg:px-[4.813rem] justify-center items-center">
+                                            <div className={`${cabinetBold.className} text-[1.5rem] lg:leading-[3rem] lg:text-[2.25rem] mb-[1.5rem]`}>
+                                                {title_front}<span className="text-secondary">{title_highlight}</span>{title_back}<br />
+                                            </div>
+                                            <div className={`${cabinetMedium.className} text-[0.75rem] leading-[1.5rem] lg:text-[1.125rem]`}>
+                                                {description}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+            </div>
 
         </>
     );
-}
+}
+
+export default QuotesCard;

frontend/src/app/components/Register/RegisterCard.tsx

@@ -18,8 +18,8 @@ export default function RegisterCard(): ReactElement {
             <p
               className={`${satoshiRegular.className} items-center text-white text-sm lg:text-xl mt-[1.5rem] mb-[0.5rem]`}
             >
-              Secure your spot at DeerHack today and elevate your skills,
-              <br className="hidden lg:block" /> expand your network, and ignite
+              Secure your spot at DeerHack today and elevate 
+              <br className="hidden lg:block" /> your skills, expand your network, and ignite
               innovation.
             </p>
           </div>

frontend/src/app/globals.css

@@ -11,6 +11,10 @@
     background: linear-gradient(140.3deg, #6633cc -15.9%, #f5c144 72.56%);
   }
 
+  .legacy-gradient-background {
+    background: linear-gradient(116.3deg, #6633CC 3.83%, #110C24 78.88%);
+  }
+
   .text-primary-gradient-color {
     @apply bg-gradient-to-r from-primary from-1% to-secondary bg-clip-text text-transparent;
   }
@@ -42,4 +46,10 @@
   .headings {
     @apply text-center text-3xl lg:text-6xl text-primary-gradient-color w-fit mx-auto px-4 md:px-0;
   }
+
+  .carousel-gradient{
+    background: linear-gradient(270deg, #140E2B 100%, rgba(20, 14, 43, 0.15) -745.2%);
+  }
+
+
 }

frontend/src/app/legacy/page.tsx

@@ -39,9 +39,12 @@ export default function LegacyPage(){
 />
 
         </div>
-        <div>
+        <div className="pb-[10rem] flex items-center justify-center">
           <HistorySection/>
         </div>
+        <div className="headings">
+          Honoring the legacy of DeerHack by honoring its Essence, Evolving its vision and passing it with a purpose every year.
+        </div>
         <Footer/>
 
 

frontend/src/app/sections/HistorySection/data.ts

@@ -0,0 +1,27 @@
+export const data = [
+  {
+    id: 1,
+    text: "Error 404",
+  },
+  {
+    id: 2,
+    text: "Nymna",
+  },
+  {
+    id: 3,
+    text: "Decent",
+  },
+  {
+    id: 4,
+    text: "Team Solo",
+  },
+  {
+    id: 5,
+    text: "Team Everest",
+  },
+  {
+    id: 6,
+    text: "Team ABC",
+  },
+];
+

frontend/src/app/sections/HistorySection/page.tsx

@@ -1,32 +1,134 @@
-import { cabinetBold, cabinetExtraBold } from "@/app/utils/fonts";
-import LegacyCard from "@/app/components/Legacy/LegacyCards";
-import Deerhack24 from "@/app/assets/icons/MainLogo";
-import Deerhack25 from "@/app/assets/icons/Deerhack25";
-import styles from "./styles.module.css";
+"use client";
+import { useState } from "react";
+import { cabinetExtraBold } from "@/app/utils/fonts";
 import QuotesCard from "@/app/components/Quotes/QuotesCard";
-import WinnerCard from "@/app/components/Winners/WinnersCard";
 import DeerHack23Legacy from "@/app/components/Legacy/DeerHack23Legacy";
+import CarouselImage from "@/app/components/Legacy/CarouselImage";
 import Winners23SVG from "@/app/assets/images/legacyWinners23SVG";
+import LegacyDemoSVG from "../../assets/images/legacyWinners23SVG";
+import IdeaSVG from "@/app/assets/images/idea";
+import { data } from "./data";
+import ArrowSVG from "@/app/assets/icons/ArrowSVG";
+
 const Page = () => {
+    const quotes = [
+        {
+            id: 1,
+            titleFront: "We wanted Deehack to be the ",
+            titleHighlight: "Best Hackathon in Nepal",
+            description: " and we made it possible”",
+            titleBack:
+                "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi...",
+            name: "John Doe",
+            position: "CEO, ABC",
+            photo: <LegacyDemoSVG width={261.03} height={190} />,
+        },
+        {
+            id: 2,
+            titleFront: "This is dummy text 2 ",
+            titleHighlight: "Best Hackathon in Nepal",
+            description: " and we made it possible”",
+            titleBack:
+                "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi...",
+            name: "Jane Doe",
+            position: "CTO, XYZ",
+            photo: <IdeaSVG />,
+        },
+    ];
+
+    const [index, setIndex] = useState(0);
+    const quotesData = quotes[index];
+
+    const handlePrev = () => {
+        const newIndex = (index - 1 + quotes.length) % quotes.length;
+        setIndex(newIndex);
+    };
+
+    const handleNext = () => {
+        const newIndex = (index + 1) % quotes.length;
+        setIndex(newIndex);
+    };
+
     return (
-      <>
-       <div className="lg:w-[1351px] lg:h-[1100px]  text-white flex flex-col">
-        <h1
-        className={`headings ${cabinetExtraBold.className} text-5xl mb-16 pt-32`}>
-            Deerhack 2023
+        <div className="w-full px-4 lg:px-0 lg:w-[1171px] text-white flex flex-col lg:gap-10 md:gap-10 gap-1 mx-auto">
+            <h1
+                className={`headings ${cabinetExtraBold.className} text-5xl mb-16 pt-32`}
+            >
+                Deerhack 2023
+            </h1>
+
+            <div className="flex flex-row justify-center items-center">
+                <QuotesCard
+                    title_front={quotesData.titleFront}
+                    title_highlight={quotesData.titleHighlight}
+                    title_back={quotesData.titleBack}
+                    description={quotesData.description}
+                    name={quotesData.name}
+                    position={quotesData.position}
+                    photo={quotesData.photo}
+                />
+
+                <div className="flex gap-4 mt-4 flex-wrap ">
+                    <button
+                        onClick={handleNext}
+                        className=" bg-yellow-500 rounded-[100px] hover:bg-gray-400 text-black h-fit lg:block md:block hidden"
+                    >
+                        <ArrowSVG />
+                    </button>
+                </div>
+
+            </div>
+
+              <div className="flex gap-4 flex-wrap">
+                    <button
+                        onClick={handleNext}
+                        className=" bg-yellow-500 rounded-[100px] hover:bg-gray-400 text-black h-fit lg:hidden md:hidden block ml-[10vw] "
+                    >
+                        <ArrowSVG />
+                    </button>
+                </div>
+
 
-        </h1>
-        <DeerHack23Legacy
-            logo={<Winners23SVG width={261.03} height={190}/>}
-            title="Contrivers"
-            description="DeerHack 2023 Overall Winners"
-        />
+                <div className="flex justify-center mt-4 gap-2">
+                    {quotes.map((_, i) => (
+                        <div
+                            key={i}
+                            onClick={() => setIndex(i)}
+                            className={`w-3 h-3 rounded-full cursor-pointer transition-all duration-300 ${i === index ? "bg-white scale-110" : "bg-gray-500"
+                                }`}
+                        />
+                    ))}
+                </div>
+
+            <div className="flex flex-col gap-4">
 
-        {/* Here you will call your components like <QuotesCard/> or <WinnerCard/> */}
+                <div className="flex flex-row">
+                    <div className="text-primary-gradient-color">Participating Teams:</div>
+                    <div className="w-full inline-flex flex-nowrap overflow-hidden bg-[#1B133854] [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-200px),transparent_100%)]">
+                        {[...Array(2)].map((_, j) => (
+                            <ul
+                                key={j}
+                                className="flex items-center justify-center md:justify-start [&_li]:mx-2 [&_img]:max-w-none animate-infinite-scroll"
+                            >
+                                {data.map((e, i) => (
+                                    <div className="flex items-center" key={`${j}-${i}`}>
+                                        <CarouselImage text={`${e.text}`} />
+                                        <div className="font-bold text-[1rem]">&middot;</div>
+                                    </div>
+                                ))}
+                            </ul>
+                        ))}
+                    </div>
+                </div>
 
+                <DeerHack23Legacy
+                    logo={<Winners23SVG width={261.03} height={190} />}
+                    title="Contrivers"
+                    description="DeerHack 2023 Overall Winners"
+                />
+            </div>
+            </div>
+            );
+};
 
-        </div>
-        </>
-        );
-        }
-        export default Page;
+            export default Page;

frontend/src/app/sections/LegacySection/page.tsx

@@ -6,7 +6,7 @@ import styles from "./styles.module.css";
 const Page = () => {
     return (
       <>
-       <div className="lg:w-[1351px] lg:h-[1100px]  text-white flex flex-col">
+       <div className="lg:w-[1351px] text-white flex flex-col">
         <h1
         className={`headings ${cabinetExtraBold.className} text-5xl mb-16 pt-32`}>
             Legacy

frontend/tailwind.config.ts

@@ -39,6 +39,7 @@ const config: Config = {
       animation: {
         "infinite-scroll": "infinite-scroll 70s linear infinite",
         "inf-scroll": "inf-scroll 70s linear infinite",
+         'slide-left': 'slide-left 8s linear infinite',
       },
       keyframes: {
         "infinite-scroll": {
@@ -49,9 +50,14 @@ const config: Config = {
           from: { transform: "translateX(-100%)" },
           to: { transform: "translateX(0)" },
         },
+         "slide-left": {
+          from: { transform: 'translateX(0)' },
+          to: { transform: 'translateX(-100%)' },
+        },
       },
     },
   },
+
   plugins: [],
   corePlugins: {
     opacity: true,