From 0fa157b3920c3601088fc5ed76eb9b7070646cd0 Mon Sep 17 00:00:00 2001
From: VaidyaIshan <165746811+VaidyaIshan@users.noreply.github.com>
Date: Thu, 24 Apr 2025 23:15:31 +0545
Subject: [PATCH 1/2] Fix:Margins For Tracks Page

---
 frontend/src/app/components/Tracks/TracksBodyCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/Tracks/TracksBodyCard.tsx b/frontend/src/app/components/Tracks/TracksBodyCard.tsx
index ce5ca29..4db5909 100644
--- a/frontend/src/app/components/Tracks/TracksBodyCard.tsx
+++ b/frontend/src/app/components/Tracks/TracksBodyCard.tsx
@@ -23,7 +23,7 @@ const TracksBodyCard: React.FC<TracksBodyCardProps> = ({
     <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`}
     >
-      <div className="xl:w-3/5 self-start sm:xl lg:px-5 lg:mt-10 ">
+      <div className="xl:w-3/5 self-start sm:xl lg:px-5 lg:mt-[100px] bg-red ">
         <div className="rounded-full w-16 h-16 flex items-center justify-start">
           {svg}
         </div>
@@ -41,7 +41,7 @@ const TracksBodyCard: React.FC<TracksBodyCardProps> = ({
         </div>
       </div>
 
-      <div className="flex flex-col lg:-ml-20 lg:mt-6 lg:w-[500px]">
+      <div className="flex flex-col lg:-ml-20 lg:mt-[90px] lg:w-[500px]">
       <p className={`text-bold pt-4   lg:pt-6 ${cabinetExtraBold.className}`}>
       WINNER GETS
     </p>

From 701fe39847eacdbbc79f1ce413dc4cb7b6204348 Mon Sep 17 00:00:00 2001
From: VaidyaIshan <165746811+VaidyaIshan@users.noreply.github.com>
Date: Sat, 26 Apr 2025 18:46:48 +0545
Subject: [PATCH 2/2] Fix: Mobile and Ipad(md) View Design for Tracks Section

---
 .../src/app/assets/icons/BlockChainNew.tsx    |  4 +-
 .../src/app/assets/icons/DataScienceNew.tsx   |  4 +-
 frontend/src/app/assets/icons/EdTechNew.tsx   |  4 +-
 .../assets/icons/InteractiveTechnologyNew.tsx |  6 +-
 .../app/assets/icons/OpenInnovationNew.tsx    |  4 +-
 .../app/components/Tracks/TracksBodyCard.tsx  | 56 ++++++++++---------
 .../src/app/sections/Tracks/TracksCard.tsx    | 12 ++--
 7 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/frontend/src/app/assets/icons/BlockChainNew.tsx b/frontend/src/app/assets/icons/BlockChainNew.tsx
index f1d60a8..9fda859 100644
--- a/frontend/src/app/assets/icons/BlockChainNew.tsx
+++ b/frontend/src/app/assets/icons/BlockChainNew.tsx
@@ -7,8 +7,8 @@ const BlockchainNew = ({
 }) => {
   return (
     <svg
-      width="84"
-      height="84"
+    width={width}
+    height={height}
       viewBox="0 0 84 84"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/app/assets/icons/DataScienceNew.tsx b/frontend/src/app/assets/icons/DataScienceNew.tsx
index 1371470..b4d873a 100644
--- a/frontend/src/app/assets/icons/DataScienceNew.tsx
+++ b/frontend/src/app/assets/icons/DataScienceNew.tsx
@@ -7,8 +7,8 @@ const DataScienceNew = ({
 }) => {
   return (
     <svg
-      width="84"
-      height="84"
+    width={width}
+    height={height}
       viewBox="0 0 84 84"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/app/assets/icons/EdTechNew.tsx b/frontend/src/app/assets/icons/EdTechNew.tsx
index 1e8f931..26ff1cc 100644
--- a/frontend/src/app/assets/icons/EdTechNew.tsx
+++ b/frontend/src/app/assets/icons/EdTechNew.tsx
@@ -7,8 +7,8 @@ export default function EdTechNew({
 }) {
   return (
     <svg
-      width="84"
-      height="84"
+    width={width}
+    height={height}
       viewBox="0 0 84 84"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/app/assets/icons/InteractiveTechnologyNew.tsx b/frontend/src/app/assets/icons/InteractiveTechnologyNew.tsx
index 50f3f8b..72927a9 100644
--- a/frontend/src/app/assets/icons/InteractiveTechnologyNew.tsx
+++ b/frontend/src/app/assets/icons/InteractiveTechnologyNew.tsx
@@ -7,8 +7,8 @@ export default function InteractiveTechnology({
 }) {
   return (
     <svg
-      width="85"
-      height="84"
+      width={width}
+      height={height}
       viewBox="0 0 85 84"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -20,4 +20,4 @@ export default function InteractiveTechnology({
       />
     </svg>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/assets/icons/OpenInnovationNew.tsx b/frontend/src/app/assets/icons/OpenInnovationNew.tsx
index 2b98629..18d8c14 100644
--- a/frontend/src/app/assets/icons/OpenInnovationNew.tsx
+++ b/frontend/src/app/assets/icons/OpenInnovationNew.tsx
@@ -7,8 +7,8 @@ const OpenInnovationNew = ({
 }) => {
   return (
     <svg
-      width="84"
-      height="84"
+    width={width}
+    height={height}
       viewBox="0 0 84 84"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/app/components/Tracks/TracksBodyCard.tsx b/frontend/src/app/components/Tracks/TracksBodyCard.tsx
index 4db5909..f1a4148 100644
--- a/frontend/src/app/components/Tracks/TracksBodyCard.tsx
+++ b/frontend/src/app/components/Tracks/TracksBodyCard.tsx
@@ -21,35 +21,37 @@ 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={`relative md:p-10 max-w-[1250px] min-h-[400px] sm: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-[100px] lg:ml-[20px] pb-20 sm:pb-0  md:mt-[60px]  ">
+  <div className="rounded-full w-16 h-16 flex items-center justify-start">
+    {svg}
+  </div>
+  <div className={`flex flex-col`}>
+    <p
+      className={`lg:text-4xl text-2xl xl:mt-4 mt-2 ${cabinetExtraBold.className} lg:w-[400px]`}
     >
-      <div className="xl:w-3/5 self-start sm:xl lg:px-5 lg:mt-[100px] bg-red ">
-        <div className="rounded-full w-16 h-16 flex items-center justify-start">
-          {svg}
-        </div>
-        <div className={`flex flex-col `}>
-          <p
-            className={`lg:text-4xl text-2xl xl:mt-4 mt-2 ${cabinetExtraBold.className} lg:w-[400px]`}
-          >
-            {title}
-          </p>
-          <span
-            className={`lg:text-xl text-lg w-[100%] xl:mt-10 lg:w-[70%] mt-4 ${cabinetMedium.className}`}
-          >
-            {description}
-          </span>
-        </div>
-      </div>
-
-      <div className="flex flex-col lg:-ml-20 lg:mt-[90px] lg:w-[500px]">
-      <p className={`text-bold pt-4   lg:pt-6 ${cabinetExtraBold.className}`}>
-      WINNER GETS
+      {title}
     </p>
-        <span className={`${cabinetExtraBold.className} lg:text-8xl text-5xl mt-3`}>
-          Rs. 15,000
-        </span>
-      </div>
-    </div>
+    <span
+      className={`lg:text-xl text-lg w-[100%] xl:mt-10 lg:w-[70%] mt-4 ${cabinetMedium.className}`}
+    >
+      {description}
+    </span>
+  </div>
+</div>
+<div
+  className={`
+    flex flex-col p-6 sm:p-0 text-left  sm:text-left sm:static absolute bottom-0 left-2 md:relative md:left-auto md:right-auto md:w-auto  lg:-ml-20 lg:mt-[94px] lg:w-[500px] ml-[0px]`}
+>
+  <p className={`pt-4 lg:pt-6 ${cabinetExtraBold.className}`}>
+    WINNER GETS
+  </p>
+  <span className={`${cabinetExtraBold.className} lg:text-[90px] text-5xl mt-3`}>
+    Rs. 15,000
+  </span>
+</div>
+  </div>
   );
 };
 export default TracksBodyCard;
diff --git a/frontend/src/app/sections/Tracks/TracksCard.tsx b/frontend/src/app/sections/Tracks/TracksCard.tsx
index da41e0d..51dcd9e 100644
--- a/frontend/src/app/sections/Tracks/TracksCard.tsx
+++ b/frontend/src/app/sections/Tracks/TracksCard.tsx
@@ -23,7 +23,7 @@ const TracksCard = () => {
     {
       title: "Interactive Technology",
       svg: <InteractiveTechnologySVG height={24} width={24} />,
-      svgBody: <InteractiveTechnologyNewSVG height={50} width={50} />,
+      svgBody: <InteractiveTechnologyNewSVG height={85} width={84} />,
       headStyling:
         selectedTrack === "Interactive Technology"
           ? "bg-grape text-magnolia active"
@@ -35,7 +35,7 @@ const TracksCard = () => {
     {
       title: "Data Science / Machine Learning",
       svg: <DataScienceSVG height={25} width={25} />,
-      svgBody: <DataScienceNew height={50} width={50} />,
+      svgBody: <DataScienceNew height={85} width={84} />,
       headStyling:
         selectedTrack === "Data Science / Machine Learning"
           ? "bg-purpures text-magnolia active"
@@ -47,7 +47,7 @@ const TracksCard = () => {
     {
       title: "Blockchain",
       svg: <BlockchainSVG height={25} width={25} />,
-      svgBody: <BlockchainNew height={50} width={50} />,
+      svgBody: <BlockchainNew height={85} width={84}/>,
       headStyling:
         selectedTrack === "Blockchain"
           ? "bg-magnolia text-dark-purple active"
@@ -59,7 +59,7 @@ const TracksCard = () => {
     {
       title: "Open Innovation",
       svg: <OpenInnovationSVG height={25} width={25} />,
-      svgBody: <OpenInnovationNew height={50} width={50} />,
+      svgBody: <OpenInnovationNew height={85} width={84} />,
       headStyling:
         selectedTrack === "Open Innovation"
           ? "bg-secondary text-dark-purple active"
@@ -69,9 +69,9 @@ const TracksCard = () => {
         "Transforming Challenges into Opportunities at DeerHack. Be part of the solution, forging a brighter future for all.",
     },
     {
-      title: "Ed-Tech",
+      title: "Ed - Tech",
       svg: <EdTechSVG height={25} width={25} />,
-      svgBody: <EdTechNew height={50} width={50} />,
+      svgBody: <EdTechNew height={85} width={84}/>,
       headStyling:
         selectedTrack === "Ed-Tech"
           ? "gradient-bg text-magnolia active"