Complete team page

app/(components)/NavComp.jsx

@@ -18,7 +18,7 @@ export default function App() {
     <Navbar maxWidth="lg" position="sticky" className="fixed top-0">
       <NavbarBrand>
         <a href="tedxvitap.com" className="max-w-52">
-          <Image src={navLogo} alt="TEDxVITAP"/>
+          <Image src={navLogo} alt="TEDx VITAP"/>
         </a>
       </NavbarBrand>
       <NavbarContent className="hidden sm:flex gap-4" justify="center">

app/(components)/TeamCard.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Card, CardFooter, Image } from "@nextui-org/react";
+
+export default function TeamCard({ name, position, image}) {
+  return (
+    <Card isFooterBlurred radius="lg" className="border-none">
+      <Image
+        alt="Image of Speaker"
+        className="object-cover"
+        height={200}
+        src={image}
+        width={200}
+      />
+      <CardFooter className="justify-start bg-black/50 border-white/10 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
+        <div className="flex flex-col">
+            <h3 className="font-semibold text-foreground/90">{name}</h3>
+            <p className="text-small text-foreground/80">{position}</p>
+
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}

app/(data)/team.json

@@ -0,0 +1,107 @@
+[
+    {
+        "name": "Sagnik",
+        "position": "Student Curation Head",
+        "image": "https://i.postimg.cc/PfvR6cng/sagnik.jpg"
+    },
+    {
+        "name": "Kriti",
+        "position": "Student Curation Head",
+        "image": "https://i.postimg.cc/XvpYt38K/kriti.jpg"
+    },
+    {
+        "name": "Avinash",
+        "position": "Student Organizer Head",
+        "image": "https://i.postimg.cc/w38dTpHR/avinash.jpg"
+    },
+    {
+        "name": "Jai",
+        "position": "Student Organizer Head",
+        "image": "https://i.postimg.cc/3Rvm6s8b/jai.jpg"
+    },
+    {
+        "name": "Dhruv",
+        "position": "Student Organizer Head",
+        "image": "https://i.postimg.cc/nh4Kcbq8/dhruv.jpg"
+    },
+    {
+        "name": "Tarun",
+        "position": "Tech Head",
+        "image": "https://i.postimg.cc/yYtB62sT/tarun.jpg"
+    },
+    {
+        "name": "Aryan",
+        "position": "Tech Head",
+        "image": "https://i.postimg.cc/nh1JKrq3/aryan.jpg"
+    },
+    {
+        "name": "Vanshika",
+        "position": "Design Head",
+        "image": "https://i.postimg.cc/DzD8JG8b/vanshika.jpg"
+    },
+    {
+        "name": "Soumyadip",
+        "position": "Designer",
+        "image": "https://i.postimg.cc/kGjxH4TN/soumyadip.jpg"
+    },
+    {
+        "name": "Pranavesh",
+        "position": "Designer",
+        "image": "https://i.postimg.cc/Z5TRCPWb/pranavesh.jpg"
+    },
+    {
+        "name": "Saurabh",
+        "position": "Designer",
+        "image": "https://i.postimg.cc/4Nvk7rct/saurabh.jpg"
+    },
+    {
+        "name": "Nitin",
+        "position": "Social Media Manager",
+        "image": "https://i.postimg.cc/9fLQQvsL/nitin.jpg"
+    },
+    {
+        "name": "Anas",
+        "position": "Promotional Manager",
+        "image": "https://i.postimg.cc/G2cvKGbg/anas.jpg"
+    },
+    {
+        "name": "Vinayak",
+        "position": "Promotional Manager",
+        "image": "https://i.postimg.cc/dV77pQXJ/vinayak.jpg"
+    },
+    {
+        "name": "Eeshwar",
+        "position": "Operation Head",
+        "image": "https://i.postimg.cc/nc92YxkQ/himanshu.jpg"
+    },
+    {
+        "name": "Himanshu",
+        "position": "Stage Tech Head",
+        "image": "https://i.postimg.cc/t7GHWkrr/himanshu.jpg"
+    },
+    {
+        "name": "Indu",
+        "position": "Stage Decor Head",
+        "image": "https://i.postimg.cc/jj862dv5/indu.jpg"
+    },
+    {
+        "name": "Mithilesh",
+        "position": "Videography Head",
+        "image": "https://i.postimg.cc/2S7VjcT8/mithilesh.jpg"
+    },
+    {
+        "name": "Arjun",
+        "position": "Videography Head",
+        "image": "https://i.postimg.cc/PrcMzxk8/arjun.jpg"
+    },
+    {
+        "name": "Isa",
+        "position": "External Relations Head",
+        "image": "https://i.postimg.cc/Mp0HdPQJ/isa.jpg"
+    },
+    {
+        "name": "Rohith",
+        "position": "Resource Head",
+        "image": "https://i.postimg.cc/TPrwNk5X/rohith.jpg"
+    }
+]

app/layout.js

@@ -8,8 +8,8 @@ import FooterComp from "./(components)/FooterComp";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "TEDxVITAP",
-  description: "Generated by create next app",
+  title: "TEDx VITAP",
+  description: "Official Site for TEDx VIT-AP",
 };
 
 export default function RootLayout({ children }) {
@@ -19,10 +19,7 @@ export default function RootLayout({ children }) {
         <Providers>
           <div>
             <NavComp/>
-          </div>
-          {children}
-
-          <div>
+            {children}
             <FooterComp/>
           </div>
         </Providers>

app/merch/page.jsx

@@ -0,0 +1,8 @@
+
+export default function Merch() {
+    return (
+        <div>
+            hello merch
+        </div>
+    )
+}

app/page.js

@@ -28,4 +28,4 @@ export default function Page() {
       <GalleryComp />
     </div>
   );
-}
+}

app/team/page.jsx

@@ -0,0 +1,23 @@
+import TeamCard from "../(components)/TeamCard"
+import TeamData from "../(data)/team.json"
+
+export default function Team() {
+    return (
+        <div className="max-w-screen-lg mx-auto md:px-8">
+            <div className="pt-28 mb-8 text-2xl font-bold text-white sm:text-3xl md:mb-12 md:text-4xl">
+                MEET THE TEAM
+            </div>
+            <div className="pt-8 grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-14 ">
+                {TeamData.map((person, index) => (
+                    <div key={index}>
+                        <TeamCard
+                            name={person.name}
+                            position={person.position}
+                            image={person.image}
+                        />
+                    </div>
+                ))}            
+            </div>
+        </div>
+    )
+}