feature: Wall of Fame

app/alumni/page.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import Image, { StaticImageData } from "next/image";
+
+import AlumniCard from "@/components/alumni-card";
+import searchIcon from "@/app/assets/search.png";
+import filterIcon from "@/app/assets/filter.png";
+import karanImage from "@/app/assets/karanSir.png";
+import arnavImage from "@/app/assets/arnavSir.png";
+import arushiImage from "@/app/assets/ArushiMam.png";
+import joyjeetImage from "@/app/assets/joyjeetSir.png";
+import deepakImage from "@/app/assets/deepakSir.png";
+import himanshuImage from "@/app/assets/himanshuSir.png";
+
+type Alumni = {
+  id: string;
+  name: string;
+  role: string;
+  imageUrl: string | StaticImageData;
+  color: string; 
+};
+
+const ALUMNI: Alumni[] = [
+  {
+    id: "karandeep",
+    name: "Karandeep Singh",
+    role: "The ex-lead of gdg chapter 24-25",
+    imageUrl: karanImage,
+    color: "bg-[#FDD568]",
+  },
+  {
+    id: "arnav",
+    name: "Arnav Anand",
+    role: "the pookiest ui/ux lead ever",
+    imageUrl: arnavImage,
+    color: "bg-[#69A6FC]",
+  },
+  {
+    id: "arushi",
+    name: "Arushi Gupta",
+    role: "the begining of wit community",
+    imageUrl: arushiImage,
+    color: "bg-[#28D781]",
+  },
+  {
+    id: "joyjeet",
+    name: "Joyjeet Banerjee",
+    role: "Talk to him about futures first",
+    imageUrl: joyjeetImage,
+    color: "bg-[#FF6A66]",
+  },
+  {
+    id: "deepak",
+    name: "Deepak Kumar",
+    role: "devsecops or optum, hes the guy",
+    imageUrl: deepakImage,
+    color: "bg-[#FDD568]",
+  },
+  {
+    id: "himanshu",
+    name: "Himanshu Dania",
+    role: "take ms interview tips",
+    imageUrl: himanshuImage,
+    color: "bg-[#69A6FC]",
+  },
+];
+
+export default function AlumniPage() {
+  return (
+    <div className="min-h-[calc(100vh-4rem)] w-full">
+      <section className="w-full px-2 sm:px-4 md:px-6 lg:px-8">
+        <header className="py-6 sm:py-8 md:py-10 lg:py-12">
+          <h1 className="text-center text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight font-red-hat-mono">
+            We the People
+          </h1>
+          <div className="w-full mt-8 sm:mt-12 md:mt-16 lg:mt-20">
+            <p className="text-center text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl leading-relaxed font-normal font-red-hat-mono">
+              We came here as strangers, we left as a family — and that family never really leaves. Our alumni carry the jokes that still make us laugh, the lessons that still guide us, and the dreams that still push us forward. This isn't just history, it's living proof that what we built together lasts far beyond the campus walls. This is the place where you can meet our alumni and see the journeys they continue to shape.
+            </p>
+            <div className="mt-6 sm:mt-8 md:mt-10 flex items-center justify-end">
+              <div className="flex items-center gap-2 sm:gap-3">
+                <div className="relative">
+                  <input
+                    placeholder="Look for someone special"
+                    className="w-64 sm:w-72 md:w-80 lg:w-96 h-8 sm:h-9 md:h-10 border-none bg-[#1C1C1C] pl-8 pr-3 sm:pl-10 sm:pr-4 py-2 text-sm sm:text-base text-white placeholder:text-white/70 outline-none focus:ring-2 focus:ring-white/30 font-red-hat-mono"
+                    style={{ 
+                      fontSize: '16px',
+                      lineHeight: '100%',
+                      letterSpacing: '-0.07em',
+                      borderRadius: '40px'
+                    }}
+                    suppressHydrationWarning
+                  />
+                  <Image 
+                    src={searchIcon} 
+                    alt="Search" 
+                    width={19} 
+                    height={20} 
+                    className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 select-none"
+                  />
+                </div>
+                <button 
+                  className="w-10 sm:w-12 md:w-14 h-8 sm:h-9 md:h-10 rounded-full bg-[#1C1C1C] border-0 flex items-center justify-center hover:bg-[#2C2C2C] transition-colors"
+                  onClick={() => {
+                    // Navigate to filter page
+                    console.log('Navigate to filter page');
+                  }}
+                >
+                  <Image 
+                    src={filterIcon} 
+                    alt="Filter" 
+                    width={30} 
+                    height={20} 
+                    className="w-7 h-5"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[77px] px-4 sm:px-6 lg:px-8">
+          {ALUMNI.map((a) => (
+            <AlumniCard key={a.id} {...a} />
+          ))}
+        </div>
+        <div className="flex items-center justify-center gap-3 py-6 sm:py-8 md:py-10">
+          {[2, 3, 4].map((n) => (
+            <button
+              key={n}
+              type="button"
+              aria-label={`Go to page ${n}`}
+              className="relative flex items-center justify-center rounded-full bg-white p-0 w-[44px] h-[44px] sm:w-[52px] sm:h-[52px] md:w-[60px] md:h-[60px] shrink-0"
+              style={{
+                opacity: 1,
+                background: "#FFFFFF",
+              }}
+              // replace with your actual navigation handler (e.g. router.push)
+              onClick={() => {
+                /* navigate to page n */
+              }}
+            >
+              {/* Gradient border using pseudo-element */}
+              <div 
+                className="absolute inset-0 rounded-full p-[3px]"
+                style={{
+                  background: "linear-gradient(137.77deg, #8EEBFF 10.19%, #28D781 37.77%, #F8FF1D 72.7%, #FF1717 97.98%)",
+                }}
+              >
+                <div className="w-full h-full rounded-full bg-white"></div>
+              </div>
+              <span className="relative z-10 font-red-hat-mono font-extrabold text-[18px] sm:text-[20px] md:text-[24px] leading-[100%] text-black">
+                {n}
+              </span>
+            </button>
+          ))}
+
+          <div className="ml-2 flex items-center gap-3">
+            <span className="w-3 h-3 rounded-full bg-white/90" />
+            <span className="w-3 h-3 rounded-full bg-white/90" />
+            <span className="w-3 h-3 rounded-full bg-white/90" />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

app/globals.css

@@ -8,6 +8,8 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --font-red-hat-mono: var(--font-red-hat-mono);
+  --font-inter: var(--font-inter);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

app/layout.tsx

@@ -1,6 +1,6 @@
 import "./globals.css";
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Red_Hat_Mono, Inter } from "next/font/google";
 
 import Navbar from "@/components/navbar";
 import { ThemeProvider } from "@/components/theme-provider";
@@ -16,6 +16,16 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+const redHatMono = Red_Hat_Mono({
+  variable: "--font-red-hat-mono",
+  subsets: ["latin"],
+});
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+
 export const metadata: Metadata = {
   title: "GDGC@NITJ",
   description: "Community Developer Platform - GDGC@NITJ",
@@ -32,7 +42,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${redHatMono.variable} ${inter.variable} antialiased`}
       >
         <ThemeProvider
           attribute="class"

app/page.tsx

@@ -6,11 +6,40 @@ import youtube from "./assets/youtube.svg"
 import linkedin from "./assets/linkedin.svg"
 import github from "./assets/github.svg"
 import { Red_Hat_Mono, Space_Grotesk } from "next/font/google";
+import { Card } from "@/components/ui/card";
+import FameCard from "@/components/ui/fame-card";
+import hackmol from "./assets/hackmol.svg"
+import mol from "./assets/mol.svg"
+import gsc from "./assets/gsc.svg"
 
 const spaceGrotesk = Space_Grotesk({subsets:["latin"]})
 const redHatMono = Red_Hat_Mono({subsets: ["latin"]})
 
 export default function Home() {
+  const dummyData = 
+  [
+    {
+      title: "Hackmol",
+      tag: "hackathon",
+      description: "HackMOL is the flagship annual 30-hour hackathon being organized by Google Developer Student Club (GDSC) of NIT Jalandhar wherein young coders & developers from all over the country join together to build projects & solutions to the alarming problems of the region & the world.",
+      color: "#FDD568",
+      image: hackmol
+    },
+    {
+      title: "Hackmol",
+      tag: "hackathon",
+      description: "HackMOL is the flagship annual 30-hour hackathon being organized by Google Developer Student Club (GDSC) of NIT Jalandhar wherein young coders & developers from all over the country join together to build projects & solutions to the alarming problems of the region & the world.",
+      color: "#69A6FC",
+      image: hackmol
+    },
+    {
+      title: "Hackmol",
+      tag: "hackathon",
+      description: "HackMOL is the flagship annual 30-hour hackathon being organized by Google Developer Student Club (GDSC) of NIT Jalandhar wherein young coders & developers from all over the country join together to build projects & solutions to the alarming problems of the region & the world.",
+      color: "#28D781",
+      image: hackmol
+    },
+  ]
   return (
     <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
       <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
@@ -76,6 +105,16 @@ export default function Home() {
             </div>
           </div>
         </section>
+        <section className="my-20 flex w-full flex-col justify-center items-center">
+          <h1 className={`flex justify-center items-center font-bold ${spaceGrotesk.className} text-8xl`}>WALL OF FAME</h1>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 w-full mx-auto justify-center place-items-center py-21 md:flex-row">
+            {
+              dummyData.map((d,i)=>(
+                <FameCard title={d.title} color={d.color} description={d.description} tag={d.tag} image={d.image} key={i} />
+              ))
+            }
+          </div>
+        </section>
       </main>
       <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
         &copy; All rights reserved

components/alumni-card.tsx

@@ -0,0 +1,65 @@
+import Image, { StaticImageData } from "next/image";
+
+type Props = {
+  id: string;
+  name: string;
+  role: string;
+  imageUrl: string | StaticImageData;
+  color: string;
+};
+
+export default function AlumniCard({ name, role, imageUrl, color }: Props) {
+  return (
+    <article 
+      className={`${color} rounded-[20px] sm:rounded-[30px] md:rounded-[40px] lg:rounded-[50px] border border-black shadow-sm transition-colors hover:shadow-lg flex flex-col w-full max-w-[280px] sm:max-w-[320px] md:max-w-[365px] mx-auto`}
+      style={{ aspectRatio: '365/574' }}
+    >
+      {/* Top section with small rectangles and connect button */}
+      <div className="flex items-center justify-between px-3 sm:px-4 md:px-5 lg:px-6 pt-3 sm:pt-4 md:pt-5 lg:pt-6 pb-2 sm:pb-2.5 md:pb-3">
+        <div className="flex gap-1 sm:gap-1.5 md:gap-2">
+          <div className="w-8 sm:w-9 md:w-10 lg:w-12 h-4 sm:h-4.5 md:h-5 lg:h-6 bg-white rounded-full border border-black flex items-center justify-center">
+            <span className="text-[10px] sm:text-xs md:text-sm font-medium text-black">MS</span>
+          </div>
+          <div className="w-8 sm:w-9 md:w-10 lg:w-12 h-4 sm:h-4.5 md:h-5 lg:h-6 bg-white rounded-full border border-black flex items-center justify-center">
+            <span className="text-[10px] sm:text-xs md:text-sm font-medium text-black">IT</span>
+          </div>
+        </div>
+        <button className="w-20 sm:w-22 md:w-24 lg:w-28 h-6 sm:h-6.5 md:h-7 lg:h-8 bg-black rounded-[20px] sm:rounded-[25px] md:rounded-[30px] border-2 border-black flex items-center justify-center hover:bg-gray-800 transition-colors">
+          <span className="text-white text-[10px] sm:text-xs md:text-sm font-medium">Connect</span>
+        </button>
+      </div>
+
+      {/* Name and Role */}
+      <div className="px-3 sm:px-4 md:px-5 lg:px-6 pb-2 sm:pb-3 md:pb-3.5 lg:pb-4">
+        <h3 
+          className="text-black font-inter font-bold leading-tight mb-2 sm:mb-3 md:mb-4 lg:mb-5 w-[180px] sm:w-[200px] md:w-[241px] h-[80px] sm:h-[90px] md:h-[100px] lg:h-[116px] text-[28px] sm:text-[32px] md:text-[36px] lg:text-[42px]"
+        >
+          {name}
+        </h3>
+        <p className="text-[10px] sm:text-xs md:text-sm font-bold text-black leading-tight font-inter">
+          {role}
+        </p>
+      </div>
+
+      {/* Image - Positioned to touch right, bottom, and almost touch left borders */}
+      <div className="flex-1 relative">
+        <div 
+          className="absolute border border-black overflow-hidden rounded-[30px] sm:rounded-[35px] md:rounded-[40px] lg:rounded-[50px]"
+          style={{
+            right: '0',
+            bottom: '6px', // Responsive bottom spacing
+            left: '3px', // Responsive left spacing
+          }}
+        >
+          <Image
+            src={imageUrl}
+            alt={name}
+            width={337}
+            height={360}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      </div>
+    </article>
+  );
+}