Teams page

backend/Aries/urls.py

@@ -22,4 +22,5 @@
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('user/', include(user_urls)),
+    path('alum/',include(alum_urls))
 ]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

backend/user/models.py

@@ -58,4 +58,7 @@ def __str__(self):
     class Meta:
         verbose_name = "Alum"
         verbose_name_plural = "Alums"
-
+
+
+    def __str__(self):
+        return f"{self.first_name} {self.last_name} {self.user.email}"

frontend/components/Card.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Head from "next/head";
+import styles from './../styles/card.module.css'
+
+type PropType = {
+  Name:string,
+  Designation:string,
+  Image:string
+}
+
+function Card(props:PropType) {
+  const imgStyle = {
+    width: "12.4rem",
+    height: "12.8rem",
+    flexBasis: "21%",
+  };
+
+
+  return (
+    <>
+
+    <div className=' my-4 gap-1 flex flex-col .flex-shrink-0 ' style={imgStyle} >
+      <img src={props.Image} alt="memberImage not loaded" className='object-cover max-w-full h-auto align-middle  transition-transform duration-300 transform hover:scale-125  z-0 memberImage md:my-1 rounded-3xl' style={imgStyle} />
+      <div className={`text-left -mt-16 z-10 ${styles.memberDetails} ${styles.memberImage}`}><span className='pl-4 text-xl'>{props.Name}</span ><br /><span className='pl-4 text-base'>{props.Designation}</span>
+        <div className='flex justify-center'>
+          {/* <img src="/insta.svg" alt="contactIcons not loading" className='w-12 -mt-10 mx-2 memberContacts' />
+          <img src="/message.svg" alt="contactIcons not loading" className='w-12 -mt-10 mx-2 memberContacts' />
+          <img src="/linkedin.svg" alt="contactIcons not loading" className='w-12 -mt-10 mx-2 memberContacts' /> */}
+          {/* Above are usefull comments */}
+        </div>
+      </div>
+    </div>
+    </>
+  );
+}
+
+export default Card;

frontend/hooks/team.tsx

@@ -0,0 +1,22 @@
+import {useMutation} from "@tanstack/react-query";
+import { getUrl,request,getErrorBody } from "../utils/network.js";
+
+const TeamData= () => {
+    const url = getUrl('/team/')
+    return request("GET",url,null,false)
+
+}
+
+export const TeamApi = (successCallback, errorCallback) => {
+    return useMutation(TeamData, {
+      mutationKey: "get-auth-token",
+      onSuccess: (res) => {
+        successCallback(res);
+
+      },
+      onError: (err) => {
+        errorCallback(err);
+      },
+    });
+  };
+

frontend/pages/team/index.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import React , { useState } from 'react'
+
+
+import './../../styles/team.module.css'
+import Card from '@/components/Card';
+
+
+const OurTeam = () => {
+    const styleObj = {
+        background: ";",
+        borderRadius: "1.5rem",
+        boxShadow: "2px 2px 2px 0px rgba(35, 17, 17, 0.05) inset, -1px -1px 4px 0px rgba(255, 255, 255, 0.05) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.10);"
+    }
+    const bg = {
+        background: "rgba(170, 170, 170, 0.30)",
+
+        backgroundBlendMode: "luminosity",
+        marginRight: "-6rem"
+    }
+    const imgStyle = {
+        width: "12.4rem",
+        height: "12.8rem",
+        flexShrink: "0",
+        flexBasis: "21%",
+        borderRadius: "1.5rem"
+    }
+
+
+    const [bgColor,setBgColor]=useState(0);
+    const members = new Array(20).fill({Name: "XYZ", Designation: "XYZ", Image:"https://s.yimg.com/fz/api/res/1.2/N0fIf9F9GTzoaOqJ13.lNw--~C/YXBwaWQ9c3JjaGRkO2ZpPWZpbGw7aD0yMjA7cT04MDt3PTE2NQ--/https://s.yimg.com/zb/imgv1/d71ffb26-8c8a-34b1-bc0f-abfcfb942420/t_500x300"});
+    return (
+
+        <>
+
+            <div className="bg-[url('/images/bg.png')] bg-cover bg-center h-[100vh]">
+
+                <div className='w-full flex justify-center'>
+                    <div className=" inline-flex px-5 py-5 flex-col justify-center items-center gap-2.5 rounded-3xl text-3xl mt-10 bg-[linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.10) 100%)] " style={styleObj}>Our Team</div>
+                </div>
+                <div className='flex h-[80%] justify-end'>
+                    <div className="flex w-[15%] items-center justify-end  ">
+                        <div className="flex  -rotate-90 h-14 items-center gap-2 shrink-0 rounded-3xl backdrop-blur-2xl  justify-end px-4  " style={bg}>
+                            <div><button className={`flex h-10 ${ bgColor == 0 ? "activeButton" : ""  }  px-4 py-5 items-center rounded-3xl  bg-blend-luminosity text-center`}  >Current Team</button></div>
+                            <div><button className={`flex h-10  ${ bgColor == 1 ? "activeButton" : ""  } px-4 py-5 items-center rounded-3xl bg-blend-luminosity text-center`} >Alum</button></div>
+                        </div>
+                    </div>
+                    <div className="mt-5 m-auto block text-center overflow-y-scroll  scroll-smooth scrollbar-thin h-[66vh] w-[75%] pl-[2%] pt-[1%] flex flex-row flex-wrap overflow-hidden justify-around">
+
+                       { members.map((member,it)=>{
+                            return(<>
+                                <Card Name={member.Name} Designation={member.Designation} Image={member.Image}/>
+
+                            </>)}
+                        )
+                        }
+                    </div>
+                </div>
+
+                <div className="flex  align-center justify-center -mt-10 mb-0">
+                    <div className="inline-flex px-2 py-4 items-start gap-2 rounded-3xl  shadow-md shadow-slate-100 backdrop-blur-2xl " style={styleObj}>
+                        <a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/contactUs.svg" alt="" /></a>
+                        <a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/fluentPeople.svg" alt="" /></a>
+                        <a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/home.svg" alt="" /></a>
+                        <a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/info.svg" alt="" /></a>
+                        <a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/lightBulb.svg" alt="" /></a>
+                    </div>
+                </div>
+
+            </div>
+        </>
+    )
+}
+
+export default OurTeam

frontend/styles/card.module.css

@@ -0,0 +1,8 @@
+
+.memberImage:hover + .memberDetails{
+    visibility: hidden;
+}
+
+.memberImage:hover + .memberContacts{
+    z-index: 10;
+}

frontend/styles/globals.css

@@ -25,3 +25,26 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+
+::-webkit-scrollbar {
+  width: 0.75rem;
+
+}
+
+
+::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.4);
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: black;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: gray;
+}
+

frontend/styles/team.module.css

@@ -0,0 +1,17 @@
+.contactIcon{
+    display: none;
+}
+.memberDetails{
+    font-family: Arial, Helvetica, sans-serif;
+}
+.memberImage:hover ~.memberDetails{
+    visibility: hidden;
+
+}
+.memberImage:hover~.contactIcon{
+    display: inline-block;
+}
+.activeButton{
+    background-color:var(--controls-idle, linear-gradient(0deg, rgba(94, 94, 94, 0.18) 0%, rgba(94, 94, 94, 0.18) 100%), rgba(255, 255, 255, 0.07)) ;
+}
+