feat: add team page

src/app/(home)/layout.tsx

@@ -1,5 +1,4 @@
 import "@/app/globals.css";
-import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 export default function RootLayout({
   children,
@@ -8,7 +7,6 @@ export default function RootLayout({
 }>) {
   return (
     <>
-      <Header />
       {children}
       <Footer />
     </>

src/app/(home)/team/page.tsx

@@ -0,0 +1,270 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import Header from "@/components/Header";
+
+type TeamRole =
+  | "Project Lead"
+  | "Technical Team"
+  | "Operations Team"
+  | "Outreach and Engagement Team";
+
+interface TeamMember {
+  id: string;
+  name: string;
+  role: string;
+  team: TeamRole;
+  image: string;
+  link: string;
+}
+
+const teamMembers: TeamMember[] = [
+  {
+    id: "1",
+    name: "Mukul Aryal",
+    role: "Project Lead",
+    team: "Project Lead",
+    image: "/MukulAryal.webp",
+    link: "https://github.com/mukulboro",
+  },
+  {
+    id: "2",
+    name: "Ashwini Subedi",
+    role: "Technical Lead",
+    team: "Technical Team",
+    image: "/Ashwini.webp",
+    link: "https://github.com/notashwinii",
+  },
+  {
+    id: "3",
+    name: "Pratik Sharma",
+    role: "Backend Developer",
+    team: "Technical Team",
+    image: "/PratikSharma.webp",
+    link: "https://github.com/pratiksharma0110",
+  },
+  {
+    id: "4",
+    name: "Himesh Dulal",
+    role: "Full Stack Developer",
+    team: "Technical Team",
+    image: "/HimeshDulal.webp",
+    link: "https://www.linkedin.com/in/himesh-dulal-2a6176277/?originalSubdomain=np",
+  },
+  {
+    id: "4",
+    name: "Shriharsh Acharya",
+    role: "Backend Developer",
+    team: "Technical Team",
+    image: "/shriharsh.webp",
+    link: "https://github.com/shri-acha",
+  },
+  {
+    id: "4",
+    name: "Ashitom Budhathoki",
+    role: "Frontend Developer",
+    team: "Technical Team",
+    image: "/AshitomBudhathoki.webp",
+    link: "https://github.com/AshitomW",
+  },
+  {
+    id: "4",
+    name: "Aakriti Pandey",
+    role: "Designer",
+    team: "Technical Team",
+    image: "/AakritiPandey.webp",
+    link: "https://www.linkedin.com/in/pandeyaakriti/",
+  },
+  {
+    id: "4",
+    name: "Dinisha Upreti",
+    role: "Designer",
+    team: "Technical Team",
+    image: "/Dinisha.webp",
+    link: "https://github.com/Dinishaaa",
+  },
+  {
+    id: "5",
+    name: "Aarya Pathak",
+    role: "Operations Lead",
+    team: "Operations Team",
+    image: "/AaryaPathak.webp",
+    link: "https://www.linkedin.com/in/aarya-pathak-421aa1269/",
+  },
+  {
+    id: "6",
+    name: "Safal Narshing Shrestha",
+    role: "Team Member",
+    team: "Operations Team",
+    image: "/SafalShrestha.webp",
+    link: " https://www.linkedin.com/in/safalnarsingh/",
+  },
+
+  {
+    id: "6",
+    name: "Abhinab Badal",
+    role: "Team Member",
+    team: "Operations Team",
+    image: "/AbhinabBadal.webp",
+    link: "https://www.linkedin.com/in/abhinab-badal-7a048b21b/",
+  },
+
+  {
+    id: "6",
+    name: "Nerish Shrestha",
+    role: "Team Member",
+    team: "Operations Team",
+    image: "/NerishShrestha.webp",
+    link: " https://www.linkedin.com/in/nerish-shrestha-30166227a/",
+  },
+
+  {
+    id: "6",
+    name: "Rasik Dhakal",
+    role: "Team Member",
+    team: "Operations Team",
+    image: "/RasikDhakal.webp",
+    link: " https://www.linkedin.com/in/dhakalrasik/",
+  },
+  {
+    id: "7",
+    name: "Anupama Neupane",
+    role: "Outreach Lead",
+    team: "Outreach and Engagement Team",
+    image: "/AnupamaNeupane.webp",
+    link: "https://www.linkedin.com/in/anupama-neupane-918b0b32a/",
+  },
+
+  {
+    id: "8",
+    name: "Mokshada Acharya",
+    role: "Team Member",
+    team: "Outreach and Engagement Team",
+    image: "/MokshadaAcharya.webp",
+    link: "https://www.linkedin.com/in/mokshada-acharya-7461a2299/",
+  },
+  {
+    id: "8",
+    name: "Shreejan Karmacharya",
+    role: "Team Member",
+    team: "Outreach and Engagement Team",
+    image: "/Shreejan.webp",
+    link: "https://www.linkedin.com/in/shreejan-karmacharya-84ba58273/",
+  },
+  {
+    id: "8",
+    name: "Saksham  Humagain",
+    role: "Team Member",
+    team: "Outreach and Engagement Team",
+    image: "/SakshamHumagain.webp",
+    link: "https://www.linkedin.com/in/saksham-humagain-260b02257/",
+  },
+];
+
+const teamOrder: TeamRole[] = [
+  "Project Lead",
+  "Technical Team",
+  "Operations Team",
+  "Outreach and Engagement Team",
+];
+
+const getLeadRole = (team: TeamRole) => {
+  switch (team) {
+    case "Project Lead":
+      return "Project Lead";
+    case "Technical Team":
+      return "Technical Lead";
+    case "Operations Team":
+      return "Operations Lead";
+    case "Outreach and Engagement Team":
+      return "Outreach Lead";
+    default:
+      return "";
+  }
+};
+
+const TeamPage: React.FC = () => {
+  return (
+    <div>
+      <Header />
+
+      {/* Grid background only for top 10rem (h-40) */}
+      <div className="relative h-40 w-full overflow-hidden">
+        <h1 className="relative pt-32 z-10 text-3xl font-bold text-slate-900 text-center">
+          Meet Our Team
+        </h1>
+      </div>
+
+      {/* Main content below, no grid background */}
+      <section className="relative bg-white">
+        <div className="max-w-5xl mx-auto py-12 px-4">
+          {teamOrder.map((team) => {
+            const members = teamMembers.filter((m) => m.team === team);
+            if (!members.length) return null;
+
+            const leadRole = getLeadRole(team);
+            const lead = members.find((m) => m.role === leadRole);
+            const rest = members.filter((m) => m.role !== leadRole);
+
+            return (
+              <section key={team} className="mb-16">
+                <h2 className="text-2xl font-semibold mb-6 text-center">
+                  {team}
+                </h2>
+                {lead && (
+                  <div className="flex justify-center mb-8">
+                    <Link href={lead.link} passHref legacyBehavior>
+                      <a
+                        className="bg-[#025C62]/5 rounded-lg shadow p-6 flex flex-col items-center hover:shadow-lg transition cursor-pointer w-72"
+                        title={`View ${lead.name}'s profile`}
+                      >
+                        <Image
+                          src={lead.image}
+                          alt={lead.name}
+                          width={120}
+                          height={120}
+                          className="rounded-full mb-4 object-cover"
+                        />
+                        <h3 className="text-xl font-bold">{lead.name}</h3>
+                        <p className="text-md text-gray-700">{lead.role}</p>
+                      </a>
+                    </Link>
+                  </div>
+                )}
+                {rest.length > 0 && (
+                  <div className="flex flex-wrap justify-center gap-8">
+                    {rest.map((member) => (
+                      <Link
+                        key={member.id + member.name}
+                        href={member.link}
+                        passHref
+                        legacyBehavior
+                      >
+                        <a
+                          className="bg-[#025C62]/5 rounded-lg shadow p-4 flex flex-col items-center hover:shadow-lg transition cursor-pointer w-64"
+                          title={`View ${member.name}'s profile`}
+                        >
+                          <Image
+                            src={member.image}
+                            alt={member.name}
+                            width={120}
+                            height={120}
+                            className="rounded-full mb-3 object-cover"
+                          />
+                          <h3 className="text-lg font-medium">{member.name}</h3>
+                          <p className="text-sm text-gray-600">{member.role}</p>
+                        </a>
+                      </Link>
+                    ))}
+                  </div>
+                )}
+              </section>
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default TeamPage;

src/components/About.tsx

@@ -4,10 +4,7 @@ import { ArrowRight, BookOpen, Users, FileText } from "lucide-react";
 
 export default function About() {
   return (
-    <section
-      id="about"
-      className="py-20 md:py-28 bg-gradient-to-b from-white to-slate-50/50"
-    >
+    <section id="about" className="py-20 md:py-28 bg-[#025C62]/5">
       <div className="container px-4 sm:px-6 lg:px-8  mx-auto ">
         {/* Header Section */}
         <div className="flex flex-col items-center justify-center space-y-6 text-center mb-16 md:mb-20">

src/components/Contact.tsx

@@ -3,70 +3,42 @@ import { Mail, Phone, MapPin } from "lucide-react";
 
 export default function Contact() {
   return (
-    <section
-      id="contact"
-      className="py-20 md:py-28 bg-gradient-to-b from-slate-50 to-white relative overflow-hidden"
-    >
-      {/* Background Pattern */}
-      <div className="absolute inset-0 bg-[linear-gradient(to_right,#f8fafc_1px,transparent_1px),linear-gradient(to_bottom,#f8fafc_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]" />
-
-      <div className="container px-4 sm:px-6 lg:px-8 xl:px-25 mx-auto  relative">
-        {/* Header Section */}
-        <div className="flex flex-col items-center justify-center space-y-6 text-center mb-16 md:mb-20">
-          <div className="space-y-4">
-            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl">
-              <span className="text-slate-900">Contact</span>
-              <span className="text-[#025C62] ml-3">Us</span>
-            </h2>
-            <p className="max-w-3xl text-slate-600 text-lg md:text-xl leading-relaxed mx-auto">
-              Have questions or need assistance? Reach out to the KURCH team.
-            </p>
-          </div>
+    <section id="contact" className="py-20 bg-[#025C62]/10">
+      <div className="container px-4 mx-auto">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h2 className="text-4xl font-bold">
+            <span className="text-slate-900">Contact</span>
+            <span className="text-[#025C62] ml-2">Us</span>
+          </h2>
+          <p className="text-slate-600 mt-4">
+            Have questions or need assistance? Reach out to the KURCH team.
+          </p>
         </div>
 
-        {/* Contact Grid */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10 max-w-5xl mx-auto">
-          {/* Email Card */}
-          <div className="group relative bg-white rounded-2xl border border-slate-200/60 p-8 hover:shadow-xl hover:shadow-slate-200/20 transition-all duration-500 hover:-translate-y-1">
-            <div className="absolute inset-0 bg-gradient-to-br from-[#025C62]/5 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-            <div className="relative text-center">
-              <div className="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-[#025C62] to-[#577B7B] shadow-lg mb-6">
-                <Mail className="h-7 w-7 text-white" />
-              </div>
-              <h3 className="text-xl font-bold text-slate-900 mb-4 group-hover:text-[#025C62] transition-colors">
-                Email
-              </h3>
-              <p className="text-slate-600 leading-relaxed">kucc@ku.edu.np</p>
+        {/* Contact Info */}
+        <div className="max-w-xl mx-auto grid gap-8">
+          <div className="flex items-center gap-4 bg-slate-50 rounded-xl border border-slate-200 p-6">
+            <Mail className="h-7 w-7 text-white bg-gradient-to-br from-[#025C62] to-[#577B7B] rounded-lg p-1" />
+            <div>
+              <div className="font-semibold text-slate-900">Email</div>
+              <div className="text-slate-600">kucc@ku.edu.np</div>
             </div>
           </div>
-
-          {/* Phone Card */}
-          <div className="group relative bg-white rounded-2xl border border-slate-200/60 p-8 hover:shadow-xl hover:shadow-slate-200/20 transition-all duration-500 hover:-translate-y-1">
-            <div className="absolute inset-0 bg-gradient-to-br from-[#025C62]/5 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-            <div className="relative text-center">
-              <div className="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-[#025C62] to-[#577B7B] shadow-lg mb-6">
-                <Phone className="h-7 w-7 text-white" />
-              </div>
-              <h3 className="text-xl font-bold text-slate-900 mb-4 group-hover:text-[#025C62] transition-colors">
-                Phone
-              </h3>
-              <p className="text-slate-600 leading-relaxed">+977-01-1234567</p>
+          <div className="flex items-center gap-4 bg-slate-50 rounded-xl border border-slate-200 p-6">
+            <Phone className="h-7 w-7 text-white bg-gradient-to-br from-[#025C62] to-[#577B7B] rounded-lg p-1" />
+            <div>
+              <div className="font-semibold text-slate-900">Phone</div>
+              <div className="text-slate-600">+977-01-1234567</div>
             </div>
           </div>
-
-          {/* Address Card */}
-          <div className="group relative bg-white rounded-2xl border border-slate-200/60 p-8 hover:shadow-xl hover:shadow-slate-200/20 transition-all duration-500 hover:-translate-y-1">
-            <div className="absolute inset-0 bg-gradient-to-br from-[#025C62]/5 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-            <div className="relative text-center">
-              <div className="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-[#025C62] to-[#577B7B] shadow-lg mb-6">
-                <MapPin className="h-7 w-7 text-white" />
-              </div>
-              <h3 className="text-xl font-bold text-slate-900 mb-4 group-hover:text-[#025C62] transition-colors">
-                Address
-              </h3>
-              <p className="text-slate-600 leading-relaxed">
+          <div className="flex items-center gap-4 bg-slate-50 rounded-xl border border-slate-200 p-6">
+            <MapPin className="h-7 w-7 text-white bg-gradient-to-br from-[#025C62] to-[#577B7B] rounded-lg p-1" />
+            <div>
+              <div className="font-semibold text-slate-900">Address</div>
+              <div className="text-slate-600">
                 Kathmandu University, Dhulikhel, Kavre, Nepal
-              </p>
+              </div>
             </div>
           </div>
         </div>