diff --git a/frontend/src/app/MainPage.tsx b/frontend/src/app/MainPage.tsx index d46984d..8ceffb3 100644 --- a/frontend/src/app/MainPage.tsx +++ b/frontend/src/app/MainPage.tsx @@ -22,8 +22,8 @@ export default function Home() { - + diff --git a/frontend/src/app/assets/icons/EnvironmentTrack.svg b/frontend/src/app/assets/icons/EnvironmentTrack.svg new file mode 100644 index 0000000..1157c88 --- /dev/null +++ b/frontend/src/app/assets/icons/EnvironmentTrack.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/app/assets/icons/EnvironmentTrack.tsx b/frontend/src/app/assets/icons/EnvironmentTrack.tsx new file mode 100644 index 0000000..55e80dc --- /dev/null +++ b/frontend/src/app/assets/icons/EnvironmentTrack.tsx @@ -0,0 +1,19 @@ +const EnvironmentTrackSVG = ({ + height = 23, + width = 21, +}: { + height?: number; + width?: number; +}) => { + + return( + + + + ) +} + +export default EnvironmentTrackSVG; diff --git a/frontend/src/app/assets/icons/EnvironmentTrackBody.svg b/frontend/src/app/assets/icons/EnvironmentTrackBody.svg new file mode 100644 index 0000000..480da91 --- /dev/null +++ b/frontend/src/app/assets/icons/EnvironmentTrackBody.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/app/assets/icons/EnvironmentTrackBody.tsx b/frontend/src/app/assets/icons/EnvironmentTrackBody.tsx new file mode 100644 index 0000000..4f310e2 --- /dev/null +++ b/frontend/src/app/assets/icons/EnvironmentTrackBody.tsx @@ -0,0 +1,20 @@ +const EnvironmentTrackBodySVG = ({ + height = 25, + width = 24, +}: { + height?: number; + width?: number; +}) => { + return( + + + + + ) +} + +export default EnvironmentTrackBodySVG; diff --git a/frontend/src/app/components/Tracks/TracksBodyCard.tsx b/frontend/src/app/components/Tracks/TracksBodyCard.tsx index ce5ca29..ad87826 100644 --- a/frontend/src/app/components/Tracks/TracksBodyCard.tsx +++ b/frontend/src/app/components/Tracks/TracksBodyCard.tsx @@ -21,7 +21,7 @@ const TracksBodyCard: React.FC = ({ }: TracksBodyCardProps) => { return (
diff --git a/frontend/src/app/sections/Tracks/TracksCard.tsx b/frontend/src/app/sections/Tracks/TracksCard.tsx index da41e0d..b120d80 100644 --- a/frontend/src/app/sections/Tracks/TracksCard.tsx +++ b/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( @@ -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: , svgBody: , 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: , + svgBody: , + 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(null); return ( -
+
{trackData.map((track, index) => (