Merge pull request #12 from SayarB/team

GDGVIT · Sep 9, 2023 · 877173d · 877173d
2 parents 7d098c3 + 2962507
commit 877173d
Show file tree

Hide file tree

Showing 11 changed files with 421 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; /* 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,33 @@
+"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"
+import Footer from '@/components/Footer'
+
+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-4 lg:col-span-4 md:col-span-3 col-span-8 text-white pt-24">
+                <h1 className={`font-extrabold ${curtab ===0 ?"text-pastel_red" : curtab===1 ? "text-pastel_blue" : "text-pastel_green"} 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_blue underline underline-offset-4 team-tab-after" : "text-grey"} hover:text-blue cursor-pointer`}>Designers</p>
+                    <p onClick={() => setCurtab(2)} className={`${curtab === 2 ? "text-pastel_green underline underline-offset-4 team-tab-after" : "text-grey"} hover:text-green cursor-pointer`}>Managers</p>
+                </div>
+            </div>
+            <div className="xl:col-span-8 lg:col-span-8 md:col-span-9 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>
+        <Footer bg={curtab === 0 ? "bg-pastel_red" : curtab ===1 ? "bg-pastel_blue" : "bg-pastel_green"} />
+    </main>
+  )
+}
diff --git a/web/components/Footer.tsx b/web/components/Footer.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { FC } from 'react'
+
+interface Props {
+    bg: string
+}
+
+const Footer: FC<Props> = ({bg}) => {
+  return (
+    <div className={`w-full p-16 ${bg}`}>
+        <p className="text-center">Made with &#9829; by GDSC-VIT</p>
+    </div>
+  )
+}
+
+export default Footer
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
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -14,6 +14,8 @@ module.exports = {
       },
       colors: {
         pastel_red: '#EF7167',
+        pastel_blue: '#71A3F5',
+        pastel_green: '#4AB582',
         dark: '#15171B',
         blue: '#4285F4BF',
         green: '#0F9D58BF',