diff --git a/app/humans/page.tsx b/app/humans/page.tsx index 7ec901f..6088380 100644 --- a/app/humans/page.tsx +++ b/app/humans/page.tsx @@ -1,19 +1,183 @@ -import HumansCard from "@/components/HumansCard/Card"; -import eshaan from "@/public/eshaan.webp"; - -export default function Humans(){ - return( -
- -
- - ) -} \ No newline at end of file +"use client" +import { useState,useMemo } from "react" +import HumanCard from "@/components/HumansCard/Card" +import Image from "next/image" +import {organizerss} from "@/data/orgData.js" +import {mentorss} from "@/data/mentorData" +import {famm} from "@/data/famData" + + + +export default function HumansPage() { + const [activeTab, setActiveTab] = + useState<"organizers" | "mentors" | "family">("organizers") + + const organizersGrid = useMemo( + () => ( +
+
+ {organizerss.map((p, i) => ( + + ))} +
+
+ ),[]) + + const mentorsGrid = useMemo( + () => ( +
+ {mentorss.map((p) => ( + + ))} +
+ ), + [] + ) + + const familyGrid = useMemo( + () => ( +
+ {famm.map((p) => ( + + ))} +
+ ), + [] + ) + + return ( +
+
+ Sponsors background + + {/* Past Partners Section */} +
+ {/* Left side - Past Partners text */} +
+ Humans at Hackbyte +
+ + {/* Right side - HB4 Logo */} +
+ Cool Keyboard +
+
+
+ +
+
+ Decorative glass design +
+ + {/* Toggle Button */} +
+
+ + + + + + +
+
+ + {/* Content based on active tab */} +
+ {activeTab === "organizers" && organizersGrid} + {activeTab === "mentors" && mentorsGrid} + {activeTab === "family" && familyGrid} +
+ +
+
+ ) +} diff --git a/components/HumansCard/Card.tsx b/components/HumansCard/Card.tsx index 6d8c849..a7c987a 100644 --- a/components/HumansCard/Card.tsx +++ b/components/HumansCard/Card.tsx @@ -5,6 +5,7 @@ import { TwitterLogoIcon, GitHubLogoIcon, } from "@radix-ui/react-icons"; +import beLogo from "@/public/behanceLogo.svg" interface HumanCardProps { name: string; @@ -13,6 +14,7 @@ interface HumanCardProps { linkedin?: string; twitter?: string; github?: string; + behance?: string; } export default function HumanCard({ @@ -22,31 +24,29 @@ export default function HumanCard({ linkedin, twitter, github, + behance }: HumanCardProps) { return ( -
-
- {name} +
+
+ {name}

{role}

{name} @@ -67,6 +67,11 @@ export default function HumanCard({ )} + {behance && ( + + behance + + )}

diff --git a/components/MailingList/index.jsx b/components/MailingList/index.jsx index 0c33779..e3b41ba 100644 --- a/components/MailingList/index.jsx +++ b/components/MailingList/index.jsx @@ -105,17 +105,15 @@ const MailingList = () => { alt="bullet" className="w-2 h-2 md:w-5 md:h-5" /> -
- - {text} - - - ))} - + + + {text} + + + ))} +
+ + + + + + + + + diff --git a/public/humans_title.svg b/public/humans_title.svg new file mode 100644 index 0000000..b623f80 --- /dev/null +++ b/public/humans_title.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/keyboard.svg b/public/keyboard.svg new file mode 100644 index 0000000..ed31554 --- /dev/null +++ b/public/keyboard.svg @@ -0,0 +1,182 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +