feat: team page basic

GDGVIT · Sep 8, 2023 · cb206d8 · cb206d8
1 parent 7d098c3
commit cb206d8
Show file tree

Hide file tree

Showing 9 changed files with 401 additions and 1 deletion.
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
diff --git a/web/app/globals.css b/web/app/globals.css
@@ -67,3 +67,13 @@
   right: 45px;
   font-size: 60px;
 }
+.team-tab-after::after {
+  content: "";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid #EF7167; /* You can change the color by specifying a different value here */
+  margin-left: 8px; /* Adjust the margin as needed for spacing */
+}
diff --git a/web/app/team/layout.tsx b/web/app/team/layout.tsx
@@ -0,0 +1,26 @@
+import '../globals.css'
+import { Unbounded } from 'next/font/google'
+import localFont from "next/font/local"
+
+const unbounded = Unbounded({ subsets: ['latin'], variable: '--font-unbounded' })
+const neue_machina = localFont({
+  src: '../NeueMachina-Regular.otf',
+  variable: '--font-neuemachina'
+})
+
+export const metadata = {
+  title: 'GDSC VIT',
+  description: 'Google Developers Students Club VIT',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={`${unbounded.variable} ${neue_machina.variable} text-[10px] md:text-[16px]`} >
+      <body className='overflow-hidden bg-dark'>{children}</body>
+    </ html>
+  )
+}
diff --git a/web/app/team/page.tsx b/web/app/team/page.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import React, { useState } from 'react'
+import Navbar from '@/components/Navbar'
+import TeamCardForGrid from '@/components/TeamCardForGrid'
+import team_members_technical from "@/content/team_members.json"
+import team_members_design from "@/content/team_members_design.json"
+import team_members_managers from "@/content/team_members_managers.json"
+
+export default function Team() {
+    const [curtab, setCurtab] = useState(0)
+  return (
+    <main id='main-thing' className='h-[100vh] overflow-scroll overflow-x-hidden snap-y'>
+        <Navbar theme={"light"} />
+        <div className="sm:grid-cols-12 sm:grid p-10 mt-24 gap-16">
+            <div className="xl:col-span-6 lg:col-span-5 md:col-span-4 col-span-8 text-white pt-24">
+                <h1 className='font-extrabold text-pastel_red uppercase lg:text-3xl md:text-2xl text-4xl'>Meet The Team</h1>
+                <p className="mt-4 font-light">We’ve got a strong team filled with caffeine addicted developers, gradients loving designers and machine like working managers.</p>
+                <div className="mt-8 flex flex-col gap-2">
+                    <p onClick={() => setCurtab(0)} className={`${curtab === 0 ? "text-pastel_red underline underline-offset-4 team-tab-after" : "text-grey"} hover:text-pastel_red cursor-pointer`}>Techies</p>
+                    <p onClick={() => setCurtab(1)} className={`${curtab === 1 ? "text-pastel_red underline underline-offset-4 team-tab-after" : "text-grey"} hover:text-pastel_red cursor-pointer`}>Designers</p>
+                    <p onClick={() => setCurtab(2)} className={`${curtab === 2 ? "text-pastel_red underline underline-offset-4 team-tab-after" : "text-grey"} hover:text-pastel_red cursor-pointer`}>Managers</p>
+                </div>
+            </div>
+            <div className="xl:col-span-6 lg:col-span-7 md:col-span-8 col-span-12 text-white grid lg:grid-cols-3 md:grid-cols-1 sm:grid-cols-3 sm:mt-0 mt-16">
+                {curtab === 0 ? team_members_technical.map((mem, i) => <TeamCardForGrid i={i} key={"mem" + i} title={mem.name} img={mem.img} subtitle={mem.position} />) : curtab === 1 ? team_members_design.map((mem, i) => <TeamCardForGrid i={i} key={"mem" + i} title={mem.name} img={mem.img} subtitle={mem.position} />) : team_members_managers.map((mem, i) => <TeamCardForGrid i={i} key={"mem" + i} title={mem.name} img={mem.img} subtitle={mem.position} />)}
+            </div>
+        </div>
+    </main>
+  )
+}
diff --git a/web/components/TeamCardForGrid.tsx b/web/components/TeamCardForGrid.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from 'next/image'
+import Card from './Card'
+type Props = {
+    img: string
+    title: string
+    subtitle?: string;
+    i: number;
+}
+
+const TeamCardForGrid = ({ img, title, subtitle, i }: Props) => {
+    return (
+        <div className='bg-white flex-col p-3 m-2 lg:m-4 rounded-md border-2 border-black flex'>
+            <div className='w-full border-2 border-black rounded-md '>
+                <Image src={img} layout='responsive' width={300} height={300} alt='Logo' />
+            </div>
+            <h2 className='my-3 font-sans xl:text-2xl text-xl font-semibold text-black'>
+                {title}
+            </h2>
+            <h3 className='text-grey'>
+                {subtitle}
+            </h3>
+        </div>
+    )
+}
+export default TeamCardForGrid
diff --git a/web/content/team_members_design.json b/web/content/team_members_design.json
@@ -0,0 +1,47 @@
+[
+  {
+    "name": "Pranav Ram",
+    "position": "Design Lead — Projects",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  }
+]
diff --git a/web/content/team_members_managers.json b/web/content/team_members_managers.json
@@ -0,0 +1,47 @@
+[
+  {
+    "name": "Vishesh Bansal",
+    "position": "Community Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  },
+  {
+    "name": "Yajat",
+    "position": "Tech Lead",
+    "img": "/vishesh.jpg"
+  }
+]
diff --git a/web/package-lock.json b/web/package-lock.json