Skip to content

Added Humans Page #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yashpatil641 merged 3 commits into from
Jan 1, 2026
+1,046 −50
Merged

Added Humans Page #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
616eda0
Humans Page
owlpharoah Dec 31, 2025
c5ee917
added data
owlpharoah Dec 31, 2025
55ea946
Merge branch 'hb4' into hb4
yashpatil641 Jan 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 183 additions & 19 deletions app/humans/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,183 @@
import HumansCard from "@/components/HumansCard/Card";
import eshaan from "@/public/eshaan.webp";

export default function Humans(){
return(
<div className="m-10 p-10 w-[298px]">
<HumansCard
key={0}
name="Eshaan Modi"
role="Organizer"
image={eshaan}
linkedin="https://linkedin.com/in/johndoe"
twitter="https://twitter.com/johndoe"
github="https://github.com/johndoe"
/>
</div>

)
}
"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(
() => (
<div className="w-full">
<div
className="
grid
grid-cols-1
sm:grid-cols-2
lg:grid-cols-3
gap-y-16
gap-x-12
max-w-[300px]
md:max-w-[1400px]
mx-auto
px-8
"
>
{organizerss.map((p, i) => (
<HumanCard key={p.name} {...p} />
))}
</div>
</div>
),[])

const mentorsGrid = useMemo(
() => (
<div className="grid
grid-cols-1
sm:grid-cols-2
lg:grid-cols-3
gap-y-16
gap-x-12
max-w-[300px]
md:max-w-[1400px]
mx-auto
px-8">
{mentorss.map((p) => (
<HumanCard key={p.name} {...p} />
))}
</div>
),
[]
)

const familyGrid = useMemo(
() => (
<div className="grid
grid-cols-1
sm:grid-cols-2
lg:grid-cols-3
gap-y-16
gap-x-12
max-w-[300px]
md:max-w-[1400px]
mx-auto
px-8">
{famm.map((p) => (
<HumanCard key={p.name} {...p} />
))}
</div>
),
[]
)

return (
<div className="w-screen min-h-svh overflow-x-hidden">
<div className="-z-10 sm:h-[95vh] h-[35vh] w-screen relative overflow-hidden">
<Image
src="/sponsers_bg.svg"
alt="Sponsors background"
fill
priority
className="object-cover object-top"
sizes="100vw"
/>

{/* Past Partners Section */}
<div className="absolute inset-0 flex sm:flex-row w-screen flex-col items-center sm:justify-between justify-center lg:px-0 xl:gap-40">
{/* Left side - Past Partners text */}
<div className="w-[90%] sm:self-center self-start sm:w-[70%] md:w-[70%] lg:w-[60%] xl:w-[60%] z-20">
<Image
src="/humans_title.svg"
alt="Humans at Hackbyte"
width={574}
height={158}
className="w-full h-auto object-contain object-center"
priority
/>
</div>

{/* Right side - HB4 Logo */}
<div className="w-[35%] sm:block hidden sm:self-center self-end sm:w-[30%] md:w-[25%] lg:w-[25%] xl:w-[10%]sm:mr-40 md:mr-15 lg:mr-30 xl:mr-40">
<Image
src="/keyboard.svg"
alt="Cool Keyboard"
width={250}
height={250}
className="w-full h-auto object-contain object-center"
priority
/>
</div>
</div>
</div>

<div className="min-h-screen w-screen bg-gradient-to-b from-black relative to-[#34085B] flex flex-col items-center pt-16 pb-30">
<div className="w-full h-32 absolute z-10 bg-amber-300/300 -top-[14.9vw]">
<Image
src="/stats-upper-2.svg"
alt="Decorative glass design"
className="w-full object-cover object-top"
width={100}
height={100}
loading="lazy"
/>
</div>

{/* Toggle Button */}
<div className="w-full flex items-start justify-start sm:pt-50 pt-15 z-20 px-8 md:px-20">
<div className="flex items-center bg-[#3D1A5C] rounded-full border border-purple-700/50 h-8 md:h-10">
<button
onClick={() => setActiveTab("organizers")}
aria-pressed={activeTab === "organizers"}
className={`px-6 md:px-8 h-full rounded-full font-semibold text-sm md:text-lg transition-all duration-300 ${
activeTab === "organizers"
? "bg-[#9E00F9] text-white shadow-lg"
: "bg-transparent text-purple-300 hover:text-white"
}`}
>
Organizers
</button>

<button
onClick={() => setActiveTab("mentors")}
aria-pressed={activeTab === "mentors"}
className={`px-6 md:px-8 h-full rounded-full font-semibold text-sm md:text-lg transition-all duration-300 ${
activeTab === "mentors"
? "bg-[#9E00F9] text-white shadow-lg"
: "bg-transparent text-purple-300 hover:text-white"
}`}
>
Mentors
</button>

<button
onClick={() => setActiveTab("family")}
aria-pressed={activeTab === "family"}
className={`px-6 md:px-8 h-full rounded-full font-semibold text-sm md:text-lg transition-all duration-300 ${
activeTab === "family"
? "bg-[#9E00F9] text-white shadow-lg"
: "bg-transparent text-purple-300 hover:text-white"
}`}
>
Family
</button>

</div>
</div>

{/* Content based on active tab */}
<div className="mt-12 w-screen">
{activeTab === "organizers" && organizersGrid}
{activeTab === "mentors" && mentorsGrid}
{activeTab === "family" && familyGrid}
</div>

</div>
</div>
)
}
31 changes: 18 additions & 13 deletions components/HumansCard/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
TwitterLogoIcon,
GitHubLogoIcon,
} from "@radix-ui/react-icons";
import beLogo from "@/public/behanceLogo.svg"

interface HumanCardProps {
name: string;
Expand All @@ -13,6 +14,7 @@ interface HumanCardProps {
linkedin?: string;
twitter?: string;
github?: string;
behance?: string;
}

export default function HumanCard({
Expand All @@ -22,31 +24,29 @@ export default function HumanCard({
linkedin,
twitter,
github,
behance
}: HumanCardProps) {
return (
<div className="w-full h-full flex flex-col gap-[0.75em]">
<div className="relative w-full aspect-[253/253] rounded-[1.25em] bg-white overflow-hidden">
<Image src={image} alt={name} fill placeholder="blur" className="object-cover"/>
<div className="w-full max-w-[300px] flex flex-col gap-3">
<div className=" relative
w-full
aspect-square
rounded-2xl
bg-white
overflow-hidden">
<Image src={image} alt={name} fill className="object-cover"/>
</div>
<div className="flex flex-col gap-[0.25em] items-start pl-1">
<p
className="
text-[#777777]
font-Poppins
text-[1em]
font-semibold
leading-[140%]
text-[#777777] font-Poppins text-sm sm:text-base font-semibold leading-[140%]
"
>
{role}
</p>
<p
className="
text-white
font-Kanit
text-[1.75em]
font-semibold
leading-[140%]
text-white font-Kanit text-xl sm:text-2xl font-semibold leading-[140%]
"
>
{name}
Expand All @@ -67,6 +67,11 @@ export default function HumanCard({
<GitHubLogoIcon className="w-[1em] h-[1em]" />
</Link>
)}
{behance && (
<Link href={behance} target="_blank">
<Image src={beLogo} alt="behance" className="w-[1em] h-[1em]" />
</Link>
)}
</div>
</div>
</div>
Expand Down
20 changes: 9 additions & 11 deletions components/MailingList/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,17 +105,15 @@ const MailingList = () => {
alt="bullet"
className="w-2 h-2 md:w-5 md:h-5"
/>
</div>
<span
className={`text-[#6b21a8] text-[4vw] md:text-xl leading-tight font-poppins ${
i === 2 ? "font-[900]" : "font-[400]"
}`}
>
{text}
</span>
</li>
))}
</ul>
</div>
<span
className={`text-[#6b21a8] text-[4vw] md:text-xl leading-tight font-poppins ${i === 2 ? "font-[900]" : "font-[400]"}`}
>
{text}
</span>
</li>
))}
</ul>

<div className="flex-shrink-0 relative w-[60px] h-[60px] mr-1 md:w-[140px] md:h-[100px]">
<Image
Expand Down
14 changes: 7 additions & 7 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ const NAV_ITEMS = [
// icon: Calendar,
// href: "/schedule",
// },
// {
// id: "users",
// label: "Humans",
// activeIcon: "/People.svg",
// icon: Users,
// href: "/humans",
// },
{
id: "users",
label: "Humans",
activeIcon: "/People.svg",
icon: Users,
href: "/humans",
},
{
id: "info",
label: "FAQs",
Expand Down
Loading