From 42aab086edfaa5b215b3f0d79a1802790f4b2575 Mon Sep 17 00:00:00 2001
From: iloveginger <pokharel.shreyansh99@gmail.com>
Date: Wed, 30 Apr 2025 19:37:37 +0545
Subject: [PATCH 1/7] Quotes Card Added

---
 .../src/app/components/Quotes/QuotesCard.tsx  | 43 +++++++++++++++++--
 frontend/src/app/globals.css                  |  4 ++
 frontend/src/app/legacy/page.tsx              |  2 +-
 .../src/app/sections/HistorySection/page.tsx  |  7 +++
 4 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/Quotes/QuotesCard.tsx b/frontend/src/app/components/Quotes/QuotesCard.tsx
index a58802c..2bfe7a3 100644
--- a/frontend/src/app/components/Quotes/QuotesCard.tsx
+++ b/frontend/src/app/components/Quotes/QuotesCard.tsx
@@ -1,8 +1,43 @@
-export default function QuotesCard(){
-    return(
+import Image from "next/image";
+import hero from "../../assets/images/Hero.jpg"
+export default function QuotesCard() {
+    return (
         <>
-        
+            <div className="flex flex-row gap-9">
+                <div className="photo">
+
+                    <div className="w-[19.728rem] lg:w-[20.763rem] h-[29.096rem] lg:h-[28.133rem] primary-gradient-background rounded-[1rem] p-[0.1875rem]">
+                    <div className="w-[19.728rem] lg:w-full h-[29.096rem] lg:h-full legacy-gradient-background rounded-[1rem] p-[0.1rem]">
+                        <div className="z-index-20 relative top-[12rem]">
+
+                            {/* <Image
+                                src={hero}
+                                width={316.208}
+                                height={450.130859375}
+                                alt="right leaf"
+                                className=""
+                            /> */}
+                            <div className="z-index-50 bg-[#110C24] lg:h-[3.125rem] lg-w[15.813rem] rounded-[1rem]">
+
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+
+                </div>
+                <div className="quotebox">
+                    <div className="flex flex-col md:flex-row justify-center items-center">
+                        <div className="w-[19.728rem] lg:w-[50.75rem] h-[29.096rem] lg:h-[27.813rem] legacy-gradient-background rounded-[3.6rem] p-[0.1rem]">
+                            <div className="bg-dark-purple w-full h-full rounded-[3.5rem]">
+                                
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
 
         </>
     );
-}
\ No newline at end of file
+}
+
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 0610884..ec577d1 100644
--- a/frontend/src/app/globals.css
+++ b/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;
   }
diff --git a/frontend/src/app/legacy/page.tsx b/frontend/src/app/legacy/page.tsx
index 9ac422b..0c8f142 100644
--- a/frontend/src/app/legacy/page.tsx
+++ b/frontend/src/app/legacy/page.tsx
@@ -39,7 +39,7 @@ export default function LegacyPage(){
 />
 
         </div>
-        <div>
+        <div className="pb-[100rem] flex items-center justify-center">
           <HistorySection/>
         </div>
         <Footer/>
diff --git a/frontend/src/app/sections/HistorySection/page.tsx b/frontend/src/app/sections/HistorySection/page.tsx
index 2264d8b..188f2c2 100644
--- a/frontend/src/app/sections/HistorySection/page.tsx
+++ b/frontend/src/app/sections/HistorySection/page.tsx
@@ -7,6 +7,7 @@ import QuotesCard from "@/app/components/Quotes/QuotesCard";
 import WinnerCard from "@/app/components/Winners/WinnersCard";
 import DeerHack23Legacy from "@/app/components/Legacy/DeerHack23Legacy";
 import Winners23SVG from "@/app/assets/images/legacyWinners23SVG";
+
 const Page = () => {
     return (
       <>
@@ -16,11 +17,17 @@ const Page = () => {
             Deerhack 2023
             
         </h1>
+        <div className = "flex flex-col">
+        <QuotesCard />
+
+
+        
         <DeerHack23Legacy
             logo={<Winners23SVG width={261.03} height={190}/>}
             title="Contrivers"
             description="DeerHack 2023 Overall Winners"
         />
+        </div>
 
         {/* Here you will call your components like <QuotesCard/> or <WinnerCard/> */}
 

From ae7b29a94c7fb12510347022e2bc3b2e6fe7050b Mon Sep 17 00:00:00 2001
From: iloveginger <pokharel.shreyansh99@gmail.com>
Date: Tue, 6 May 2025 09:36:33 +0545
Subject: [PATCH 2/7] Fix: Quotes Card

---
 .../src/app/assets/images/legacydemosvg.tsx   | 13 ++++
 .../src/app/components/Quotes/QuotesCard.tsx  | 69 +++++++++++++------
 .../src/app/sections/HistorySection/page.tsx  | 13 +++-
 3 files changed, 70 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/app/assets/images/legacydemosvg.tsx

diff --git a/frontend/src/app/assets/images/legacydemosvg.tsx b/frontend/src/app/assets/images/legacydemosvg.tsx
new file mode 100644
index 0000000..c42bbcb
--- /dev/null
+++ b/frontend/src/app/assets/images/legacydemosvg.tsx
@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+
+export default function LegacyDemoSVG({
+  height = 93,
+  width = 107,
+}: {
+  height?: number;
+  width?: number;
+}): ReactElement {
+  return (
+  <h1>Hello world</h1>
+  );
+}
diff --git a/frontend/src/app/components/Quotes/QuotesCard.tsx b/frontend/src/app/components/Quotes/QuotesCard.tsx
index 2bfe7a3..6484caf 100644
--- a/frontend/src/app/components/Quotes/QuotesCard.tsx
+++ b/frontend/src/app/components/Quotes/QuotesCard.tsx
@@ -1,35 +1,59 @@
 import Image from "next/image";
 import hero from "../../assets/images/Hero.jpg"
-export default function QuotesCard() {
-    return (
+import { ReactElement } from "react";
+import { cabinetBold, cabinetExtraBold, cabinetMedium, satoshiRegular } from "../../utils/fonts";
+
+interface QuotesCardDetails {
+    title:string;
+    description:string;  
+    name:string;
+    position:string;
+    photo:ReactElement;
+}
+
+const QuotesCard: React.FC<QuotesCardDetails> = ({
+            title,
+            description,
+            name,
+            position, 
+            photo,
+        }) => {
+            return (
         <>
-            <div className="flex flex-row gap-9">
-                <div className="photo">
-
-                    <div className="w-[19.728rem] lg:w-[20.763rem] h-[29.096rem] lg:h-[28.133rem] primary-gradient-background rounded-[1rem] p-[0.1875rem]">
-                    <div className="w-[19.728rem] lg:w-full h-[29.096rem] lg:h-full legacy-gradient-background rounded-[1rem] p-[0.1rem]">
-                        <div className="z-index-20 relative top-[12rem]">
-
-                            {/* <Image
-                                src={hero}
-                                width={316.208}
-                                height={450.130859375}
-                                alt="right leaf"
-                                className=""
-                            /> */}
-                            <div className="z-index-50 bg-[#110C24] lg:h-[3.125rem] lg-w[15.813rem] rounded-[1rem]">
+            <div className="flex flex-row justify-center gap-9">
+                        <div className="photo">
 
+                            <div className="w-[19.728rem] lg:w-[20.763rem] h-[29.096rem] lg:h-[28.133rem] primary-gradient-background rounded-[1rem] p-[0.1875rem]">
+                                <div className="w-[19.728rem] lg:w-full h-[29.096rem] 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] mx-3 my-[-1rem] 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>
-                    </div>
 
-                </div>
                 <div className="quotebox">
                     <div className="flex flex-col md:flex-row justify-center items-center">
-                        <div className="w-[19.728rem] lg:w-[50.75rem] h-[29.096rem] lg:h-[27.813rem] legacy-gradient-background rounded-[3.6rem] p-[0.1rem]">
+                        <div className="w-[19.728rem] lg:w-[50.75rem] h-[29.096rem] lg:h-[28.133rem] legacy-gradient-background rounded-[3.6rem] p-[0.1rem]">
                             <div className="bg-dark-purple w-full h-full rounded-[3.5rem]">
-                                
+                                <div className="flex flex-col justify-center py-[4.3rem] px-[4.813rem]">
+                                 <div className={`${cabinetBold.className} text-[2.25rem] mb-[1.5rem]`}>   
+                                {title}<br/>
+                                </div>
+                                <div className = {`${cabinetMedium.className} text-[1.125rem]`}>
+                                {description}
+                                </div>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -41,3 +65,4 @@ export default function QuotesCard() {
     );
 }
 
+export default QuotesCard;
\ No newline at end of file
diff --git a/frontend/src/app/sections/HistorySection/page.tsx b/frontend/src/app/sections/HistorySection/page.tsx
index 188f2c2..197dc2e 100644
--- a/frontend/src/app/sections/HistorySection/page.tsx
+++ b/frontend/src/app/sections/HistorySection/page.tsx
@@ -7,6 +7,7 @@ import QuotesCard from "@/app/components/Quotes/QuotesCard";
 import WinnerCard from "@/app/components/Winners/WinnersCard";
 import DeerHack23Legacy from "@/app/components/Legacy/DeerHack23Legacy";
 import Winners23SVG from "@/app/assets/images/legacyWinners23SVG";
+import LegacyDemoSVG from "../../assets/images/TeamSolo";
 
 const Page = () => {
     return (
@@ -18,10 +19,16 @@ const Page = () => {
             
         </h1>
         <div className = "flex flex-col">
-        <QuotesCard />
-
+            <div className="mb-[5rem]">
+        <QuotesCard 
+        title="“We wanted Deehack to be the Best Hackathon in Nepal and we made it possible”"
+        description="Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non"
+        name="John Doe"
+        position="CEO, ABC"
+        photo={<LegacyDemoSVG width={261.03} height={190}/>}
+        />
+        </div>
 
-        
         <DeerHack23Legacy
             logo={<Winners23SVG width={261.03} height={190}/>}
             title="Contrivers"

From 1ad2604eb43ee6e2f82a709b2378617fcd481bf4 Mon Sep 17 00:00:00 2001
From: iloveginger <pokharel.shreyansh99@gmail.com>
Date: Mon, 12 May 2025 21:43:17 +0545
Subject: [PATCH 3/7] Fix: DeerHack 2023 responsiveness

---
 .../src/app/components/Quotes/QuotesCard.tsx  | 38 +++++++++----------
 .../src/app/sections/HistorySection/page.tsx  |  2 +-
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/Quotes/QuotesCard.tsx b/frontend/src/app/components/Quotes/QuotesCard.tsx
index 6484caf..d4e1ac2 100644
--- a/frontend/src/app/components/Quotes/QuotesCard.tsx
+++ b/frontend/src/app/components/Quotes/QuotesCard.tsx
@@ -20,19 +20,19 @@ const QuotesCard: React.FC<QuotesCardDetails> = ({
         }) => {
             return (
         <>
-            <div className="flex flex-row justify-center gap-9">
-                        <div className="photo">
+            <div className="lg:flex lg: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.728rem] lg:w-[20.763rem] h-[29.096rem] lg:h-[28.133rem] primary-gradient-background rounded-[1rem] p-[0.1875rem]">
-                                <div className="w-[19.728rem] lg:w-full h-[29.096rem] lg:h-full legacy-gradient-background rounded-[1rem] p-[0.1rem]">
+                            <div className="w-[19.125rem] lg:w-[20.763rem] h-[24.75rem] 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] mx-3 my-[-1rem] px-3 py-2 ">
+                                        <div className="z-index-50 bg-[#110C24] flex justify-start h-fit lg:max-h-[7rem] lg-w[15.813rem] rounded-[1rem] mx-3 mt-[11rem] 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`}>
+                                                <div className={`${cabinetMedium} text-[0.875rem] h-fit`}>
                                                     {position}
                                                 </div>
                                             </div>
@@ -42,22 +42,22 @@ const QuotesCard: React.FC<QuotesCardDetails> = ({
 
                         </div>
 
-                <div className="quotebox">
-                    <div className="flex flex-col md:flex-row justify-center items-center">
-                        <div className="w-[19.728rem] lg:w-[50.75rem] h-[29.096rem] lg:h-[28.133rem] legacy-gradient-background rounded-[3.6rem] p-[0.1rem]">
-                            <div className="bg-dark-purple w-full h-full rounded-[3.5rem]">
-                                <div className="flex flex-col justify-center py-[4.3rem] px-[4.813rem]">
-                                 <div className={`${cabinetBold.className} text-[2.25rem] mb-[1.5rem]`}>   
-                                {title}<br/>
-                                </div>
-                                <div className = {`${cabinetMedium.className} text-[1.125rem]`}>
-                                {description}
-                                </div>
+                        <div className="quotebox">
+                            <div className="flex flex-col md:flex-row justify-center items-center mt-[2.813rem] lg:mt-0">
+                                <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}<br />
+                                            </div>
+                                            <div className={`${cabinetMedium.className} text-[0.75rem] leading-[1.5rem] lg:text-[1.125rem]`}>
+                                                {description}
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </div>
 
             </div>
 
diff --git a/frontend/src/app/sections/HistorySection/page.tsx b/frontend/src/app/sections/HistorySection/page.tsx
index 197dc2e..9daa241 100644
--- a/frontend/src/app/sections/HistorySection/page.tsx
+++ b/frontend/src/app/sections/HistorySection/page.tsx
@@ -7,7 +7,7 @@ import QuotesCard from "@/app/components/Quotes/QuotesCard";
 import WinnerCard from "@/app/components/Winners/WinnersCard";
 import DeerHack23Legacy from "@/app/components/Legacy/DeerHack23Legacy";
 import Winners23SVG from "@/app/assets/images/legacyWinners23SVG";
-import LegacyDemoSVG from "../../assets/images/TeamSolo";
+import LegacyDemoSVG from "../../assets/images/legacyWinners23SVG";
 
 const Page = () => {
     return (

From e20e8a68474281bb626a89f4c9923ffcc67ab59e Mon Sep 17 00:00:00 2001
From: iloveginger <pokharel.shreyansh99@gmail.com>
Date: Tue, 13 May 2025 21:22:37 +0545
Subject: [PATCH 4/7] Fix: Responsiveness OF DeerHack 2023 Legacy

---
 frontend/src/app/assets/images/legacydemosvg.tsx    | 13 -------------
 frontend/src/app/components/Quotes/QuotesCard.tsx   |  8 ++++----
 .../src/app/components/Register/RegisterCard.tsx    |  4 ++--
 3 files changed, 6 insertions(+), 19 deletions(-)
 delete mode 100644 frontend/src/app/assets/images/legacydemosvg.tsx

diff --git a/frontend/src/app/assets/images/legacydemosvg.tsx b/frontend/src/app/assets/images/legacydemosvg.tsx
deleted file mode 100644
index c42bbcb..0000000
--- a/frontend/src/app/assets/images/legacydemosvg.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ReactElement } from "react";
-
-export default function LegacyDemoSVG({
-  height = 93,
-  width = 107,
-}: {
-  height?: number;
-  width?: number;
-}): ReactElement {
-  return (
-  <h1>Hello world</h1>
-  );
-}
diff --git a/frontend/src/app/components/Quotes/QuotesCard.tsx b/frontend/src/app/components/Quotes/QuotesCard.tsx
index d4e1ac2..523e400 100644
--- a/frontend/src/app/components/Quotes/QuotesCard.tsx
+++ b/frontend/src/app/components/Quotes/QuotesCard.tsx
@@ -20,15 +20,15 @@ const QuotesCard: React.FC<QuotesCardDetails> = ({
         }) => {
             return (
         <>
-            <div className="lg:flex lg:flex-row justify-center items-center gap-9 sm:flex sm:flex-col">
+            <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-[24.75rem] lg:h-[28.133rem] primary-gradient-background rounded-[1rem] p-[0.1875rem]">
+                            <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] mx-3 mt-[11rem] px-3 py-2 ">
+                                        <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>
@@ -43,7 +43,7 @@ const QuotesCard: React.FC<QuotesCardDetails> = ({
                         </div>
 
                         <div className="quotebox">
-                            <div className="flex flex-col md:flex-row justify-center items-center mt-[2.813rem] lg:mt-0">
+                            <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">
diff --git a/frontend/src/app/components/Register/RegisterCard.tsx b/frontend/src/app/components/Register/RegisterCard.tsx
index 8039657..8992adb 100644
--- a/frontend/src/app/components/Register/RegisterCard.tsx
+++ b/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>

From ab3e26232c3e2ff5e5a1082abc2147ab6f140e7a Mon Sep 17 00:00:00 2001
From: iloveginger <pokharel.shreyansh99@gmail.com>
Date: Tue, 13 May 2025 21:51:54 +0545
Subject: [PATCH 5/7] Fix: Title Color QuoteCard

---
 frontend/src/app/components/Quotes/QuotesCard.tsx | 10 +++++++---
 frontend/src/app/sections/HistorySection/page.tsx |  4 +++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/Quotes/QuotesCard.tsx b/frontend/src/app/components/Quotes/QuotesCard.tsx
index 523e400..c9f50cd 100644
--- a/frontend/src/app/components/Quotes/QuotesCard.tsx
+++ b/frontend/src/app/components/Quotes/QuotesCard.tsx
@@ -4,7 +4,9 @@ import { ReactElement } from "react";
 import { cabinetBold, cabinetExtraBold, cabinetMedium, satoshiRegular } from "../../utils/fonts";
 
 interface QuotesCardDetails {
-    title:string;
+    title_front:string;
+    title_highlight:string;
+    title_back:string;
     description:string;  
     name:string;
     position:string;
@@ -12,7 +14,9 @@ interface QuotesCardDetails {
 }
 
 const QuotesCard: React.FC<QuotesCardDetails> = ({
-            title,
+            title_front,
+            title_highlight,
+            title_back,
             description,
             name,
             position, 
@@ -48,7 +52,7 @@ const QuotesCard: React.FC<QuotesCardDetails> = ({
                                     <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}<br />
+                                                {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}
diff --git a/frontend/src/app/sections/HistorySection/page.tsx b/frontend/src/app/sections/HistorySection/page.tsx
index 9daa241..bc5948c 100644
--- a/frontend/src/app/sections/HistorySection/page.tsx
+++ b/frontend/src/app/sections/HistorySection/page.tsx
@@ -21,7 +21,9 @@ const Page = () => {
         <div className = "flex flex-col">
             <div className="mb-[5rem]">
         <QuotesCard 
-        title="“We wanted Deehack to be the Best Hackathon in Nepal and we made it possible”"
+        title_front="We wanted Deehack to be the "
+        title_highlight="Best Hackathon in Nepal"
+        title_back=" and we made it possible”"
         description="Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non"
         name="John Doe"
         position="CEO, ABC"

From 7c32222dc6598aaf7845a4a3ec6070c23a84a69f Mon Sep 17 00:00:00 2001
From: iloveginger <pokharel.shreyansh99@gmail.com>
Date: Wed, 14 May 2025 17:33:37 +0545
Subject: [PATCH 6/7] Fix: Carousel Added

---
 .../app/components/Legacy/CarouselImage.tsx   | 20 ++++
 frontend/src/app/globals.css                  |  6 ++
 frontend/src/app/legacy/page.tsx              |  5 +-
 .../src/app/sections/HistorySection/data.ts   | 26 +++++
 .../src/app/sections/HistorySection/page.tsx  | 96 ++++++++++++-------
 .../src/app/sections/LegacySection/page.tsx   |  2 +-
 frontend/tailwind.config.ts                   |  6 ++
 7 files changed, 127 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/app/components/Legacy/CarouselImage.tsx
 create mode 100644 frontend/src/app/sections/HistorySection/data.ts

diff --git a/frontend/src/app/components/Legacy/CarouselImage.tsx b/frontend/src/app/components/Legacy/CarouselImage.tsx
new file mode 100644
index 0000000..9ace12b
--- /dev/null
+++ b/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>
+    
+  );
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index ec577d1..439dc13 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -46,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%);
+  }
+  
+
 }
diff --git a/frontend/src/app/legacy/page.tsx b/frontend/src/app/legacy/page.tsx
index 0c8f142..a0d96c3 100644
--- a/frontend/src/app/legacy/page.tsx
+++ b/frontend/src/app/legacy/page.tsx
@@ -39,9 +39,12 @@ export default function LegacyPage(){
 />
 
         </div>
-        <div className="pb-[100rem] flex items-center justify-center">
+        <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/>
       
         
diff --git a/frontend/src/app/sections/HistorySection/data.ts b/frontend/src/app/sections/HistorySection/data.ts
new file mode 100644
index 0000000..3e1cac6
--- /dev/null
+++ b/frontend/src/app/sections/HistorySection/data.ts
@@ -0,0 +1,26 @@
+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",
+  },
+];
diff --git a/frontend/src/app/sections/HistorySection/page.tsx b/frontend/src/app/sections/HistorySection/page.tsx
index bc5948c..3a4970a 100644
--- a/frontend/src/app/sections/HistorySection/page.tsx
+++ b/frontend/src/app/sections/HistorySection/page.tsx
@@ -8,41 +8,73 @@ import WinnerCard from "@/app/components/Winners/WinnersCard";
 import DeerHack23Legacy from "@/app/components/Legacy/DeerHack23Legacy";
 import Winners23SVG from "@/app/assets/images/legacyWinners23SVG";
 import LegacyDemoSVG from "../../assets/images/legacyWinners23SVG";
+import { data } from "./data";
+import CarouselImage from "@/app/components/Legacy/CarouselImage";
 
 const Page = () => {
+
     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
-            
-        </h1>
-        <div className = "flex flex-col">
-            <div className="mb-[5rem]">
-        <QuotesCard 
-        title_front="We wanted Deehack to be the "
-        title_highlight="Best Hackathon in Nepal"
-        title_back=" and we made it possible”"
-        description="Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non"
-        name="John Doe"
-        position="CEO, ABC"
-        photo={<LegacyDemoSVG width={261.03} height={190}/>}
-        />
-        </div>
-
-        <DeerHack23Legacy
-            logo={<Winners23SVG width={261.03} height={190}/>}
-            title="Contrivers"
-            description="DeerHack 2023 Overall Winners"
-        />
-        </div>
-
-        {/* Here you will call your components like <QuotesCard/> or <WinnerCard/> */}
-
-
-        </div>
+        <>
+            <div className="lg:w-[1171px] text-white flex flex-col gap-10">
+                <h1
+                    className={`headings ${cabinetExtraBold.className} text-5xl mb-16 pt-32`}>
+                    Deerhack 2023
+
+                </h1>
+                <div className="flex flex-col">
+                    <div className="">
+                        <QuotesCard
+                            title_front="We wanted Deehack to be the "
+                            title_highlight="Best Hackathon in Nepal"
+                            title_back=" and we made it possible”"
+                            description="Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non"
+                            name="John Doe"
+                            position="CEO, ABC"
+                            photo={<LegacyDemoSVG width={261.03} height={190} />}
+                        />
+                    </div>
+
+
+                    
+                </div>
+                <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%)">
+
+                            <ul 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"><CarouselImage key={i} text={`${e.text}`} />
+                                    <div className="font-bold text-[1rem]">
+                                       &middot;
+                                     </div>
+                                    </div>
+                                    
+                                ))}
+                               
+                            </ul>
+
+                            <ul 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"><CarouselImage key={i} 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>
+
+            {/* Here you will call your components like <QuotesCard/> or <WinnerCard/> */}
         </>
         );
         }
-        export default Page;
\ No newline at end of file
+export default Page;
\ No newline at end of file
diff --git a/frontend/src/app/sections/LegacySection/page.tsx b/frontend/src/app/sections/LegacySection/page.tsx
index 446d525..61daaae 100644
--- a/frontend/src/app/sections/LegacySection/page.tsx
+++ b/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
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 30b1966..481a377 100644
--- a/frontend/tailwind.config.ts
+++ b/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,

From 072381ee9324d79afbf7869ffb4a4272e46f3d5b Mon Sep 17 00:00:00 2001
From: ConfusedKnight <aarushdangol2006@gmail.com>
Date: Thu, 15 May 2025 00:54:38 +0545
Subject: [PATCH 7/7] fix: added quotes card carousel

---
 .../src/app/sections/HistorySection/data.ts   |   1 +
 .../src/app/sections/HistorySection/page.tsx  | 160 ++++++++++++------
 2 files changed, 108 insertions(+), 53 deletions(-)

diff --git a/frontend/src/app/sections/HistorySection/data.ts b/frontend/src/app/sections/HistorySection/data.ts
index 3e1cac6..03c8192 100644
--- a/frontend/src/app/sections/HistorySection/data.ts
+++ b/frontend/src/app/sections/HistorySection/data.ts
@@ -24,3 +24,4 @@ export const data = [
     text: "Team ABC",
   },
 ];
+
diff --git a/frontend/src/app/sections/HistorySection/page.tsx b/frontend/src/app/sections/HistorySection/page.tsx
index 3a4970a..e39d3f8 100644
--- a/frontend/src/app/sections/HistorySection/page.tsx
+++ b/frontend/src/app/sections/HistorySection/page.tsx
@@ -1,80 +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 CarouselImage from "@/app/components/Legacy/CarouselImage";
+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-[1171px] text-white flex flex-col gap-10">
-                <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>
 
-                </h1>
-                <div className="flex flex-col">
-                    <div className="">
-                        <QuotesCard
-                            title_front="We wanted Deehack to be the "
-                            title_highlight="Best Hackathon in Nepal"
-                            title_back=" and we made it possible”"
-                            description="Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non"
-                            name="John Doe"
-                            position="CEO, ABC"
-                            photo={<LegacyDemoSVG width={261.03} height={190} />}
-                        />
-                    </div>
+            <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>
-                <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%)">
 
-                            <ul 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"><CarouselImage key={i} text={`${e.text}`} />
-                                    <div className="font-bold text-[1rem]">
-                                       &middot;
-                                     </div>
-                                    </div>
-                                    
-                                ))}
-                               
-                            </ul>
+            
+                <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">
 
-                            <ul className="flex items-center justify-center md:justify-start [&_li]:mx-2 [&_img]:max-w-none animate-infinite-scroll">
+                <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"><CarouselImage key={i} text={`${e.text}`} />
-                                    <div className="font-bold text-[1rem]">
-                                       &middot;
-                                     </div>
+                                    <div className="flex items-center" key={`${j}-${i}`}>
+                                        <CarouselImage text={`${e.text}`} />
+                                        <div className="font-bold text-[1rem]">&middot;</div>
                                     </div>
-                                    
                                 ))}
-                                 
                             </ul>
-                        </div>
+                        ))}
                     </div>
+                </div>
+
                 <DeerHack23Legacy
                     logo={<Winners23SVG width={261.03} height={190} />}
                     title="Contrivers"
                     description="DeerHack 2023 Overall Winners"
                 />
             </div>
+            </div>
+            );
+};
 
-            {/* Here you will call your components like <QuotesCard/> or <WinnerCard/> */}
-        </>
-        );
-        }
-export default Page;
\ No newline at end of file
+            export default Page;
\ No newline at end of file