Added Template Website for the Communities

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import Opportunities from './components/Opportunities/Opportunities';
 import Membership from './components/Membership/Membership';
 import Login from './components/Login/Login';
 import EditForm from './components/Login/EditProfile';
+import TemplateWebsite from './components/TemplateWebsite/TemplateWebsite';
 
 function App() {
   return (
@@ -26,6 +27,7 @@ function App() {
           <Route path="/membership" element={<Membership />} />
           <Route path="/login" element={<Login />} />
           <Route path="/editprofile" element={<EditForm />} />
+          <Route path="/templatewebsite" element={<TemplateWebsite />} />
         </Routes>
         <Footer />
       </Container>

frontend/src/components/TemplateWebsite/MeetTheTeam.tsx

@@ -0,0 +1,262 @@
+import React, { useState } from 'react';
+import { Box, Grid, ToggleButton, createTheme, useMediaQuery } from '@mui/material';
+import previous from '../../images/previous.png';
+import next from '../../images/next.png';
+import { tempStyles } from './styles';
+import Sithu from '../../images/meettheteamImages/sithu.jpg';
+import Rahul from '../../images/meettheteamImages/rahul.png';
+import Jose from '../../images/meettheteamImages/josue martinez.jpeg';
+import Angelina from '../../images/meettheteamImages/angelina yee.jpg';
+import Maanasa from '../../images/meettheteamImages/maanasa prasad.png';
+import Michael from '../../images/meettheteamImages/michael he.png';
+import Hillary_Chang from '../../images/meettheteamImages/Hillary_Chang.webp';
+import Lucas_Hlaing from '../../images/meettheteamImages/Lucas_Hiaing.jpeg';
+import Varun_Parekh from '../../images/meettheteamImages/Varun_Parekh.jpg';
+
+const team = 
+  {
+    id: 1,
+    name: 'Project 1',
+    members: [
+      { name: 'Rahul Mistry', title: 'VP Internal', photo: Rahul },
+      { name: 'Michael He', title: 'VP External', photo: Michael },
+      { name: 'Sithu Soe', title: 'VP Operations', photo: Sithu },
+      { name: 'Maanasa Prasad', title: 'VP Events', photo: Maanasa },
+      { name: 'Lucas Hlaing', title: 'Finance Director', photo: Lucas_Hlaing },
+      { name: 'Varun Parekh', title: 'Technical Workshop Director', photo: Varun_Parekh },
+      { name: 'Angelina Yee', title: 'Marketing Chair', photo: Angelina },
+      { name: 'Jose Martinez', title: 'External Director - Alumni and Professor', photo: Jose },
+      { name: 'Hillary Chang', title: 'Corporate Connections Director', photo: Hillary_Chang },
+    ],
+  }
+
+const MeetTheTeam = () => {
+  const styles = tempStyles();
+  const theme = createTheme();
+  const [currentPage, setCurrentPage] = useState(1);
+  const isMiddleScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+  const isSmallScreen = useMediaQuery(theme.breakpoints.between('xs', 'sm'));
+  const verySmallScreen = useMediaQuery('(max-width:350px');
+
+  const membersPerPage = 6;
+  const remainingSpots = membersPerPage - (team.members.length % membersPerPage);
+
+  // Calculate the number of members displayed on the current page
+  const membersDisplayed = team.members.slice((currentPage - 1) * 6, currentPage * 6);
+
+  // Define the threshold for different margin values
+  const marginThreshold = 3;
+
+  // Check if there are fewer than 3 members displayed
+  const areFewMembers = membersDisplayed.length < marginThreshold;
+
+  // Define the margin values based on the number of members displayed
+  const marginTopValue = areFewMembers ? '3%' : '-50%';
+
+  const emptyMembers = Array.from({ length: remainingSpots }).map((_, index) => ({
+    name: `Empty Member ${index + 1}`,
+    title: 'Empty Title',
+    photo: 'blankSquare',
+  }));
+
+
+  const handlePreviousPage = () => {
+    setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
+  };
+
+  const handleNextPage = () => {
+    const maxPages = Math.ceil(team.members.length / 6);
+    setCurrentPage((prevPage) => Math.min(prevPage + 1, maxPages));
+  };
+
+  return (
+    <div>
+      <Grid item xs={12} sm={4.5} md={5.5} lg={5}>
+        <Box
+          sx={{
+            ...styles.mainTitleBottom,
+            textAlign: 'center',
+            fontSize: 'clamp(32px, 8vw, 65px)',
+          }}
+        >
+          OUR TEAM!
+        </Box>
+      </Grid>
+      <Grid
+        container
+        sx={{
+          marginTop: '4%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Grid container item xs={12} sm={9} md={9} lg={9} justifyContent="center">
+          {team.members
+            .slice((currentPage - 1) * 6, currentPage * 6)
+            .map((member, index) => (
+              <Grid
+                item
+                xs={6}
+                sm={4}
+                md={4}
+                lg={4}
+                key={index}
+                sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
+              >
+                <div
+                  style={{
+                    width: verySmallScreen
+                      ? '120px'
+                      : isSmallScreen
+                      ? '120px'
+                      : isMiddleScreen
+                      ? '140px'
+                      : '190px',
+                    height: verySmallScreen
+                      ? '120px'
+                      : isSmallScreen
+                      ? '120px'
+                      : isMiddleScreen
+                      ? '140px'
+                      : '190px',
+                    overflow: 'hidden',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <img
+                    src={member.photo}
+                    key={member.photo}
+                    alt="img"
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      objectFit: 'cover',
+                    }}
+                  />
+                </div>
+                <h3
+                  style={{
+                    color: 'white',
+                    textAlign: 'center',
+                    fontFamily: 'Inter',
+                    fontWeight: '700',
+                    fontSize: '18px',
+                  }}
+                >
+                  {member.name}
+                </h3>
+                <h5
+                  style={{
+                    color: 'white',
+                    textAlign: 'center',
+                    fontFamily: 'Inter',
+                    fontWeight: '500',
+                    fontSize: '14px',
+                    marginTop: '-2%',
+                  }}
+                >
+                  {member.title}
+                </h5>
+              </Grid>
+            ))}
+
+          {emptyMembers.map((member, index) => (
+            <Grid item xs={6} sm={4} md={4} lg={4} key={index + team.members.length}>
+              {/* Empty placeholder, no visible content */}
+            </Grid>
+          ))}
+        </Grid>
+
+        <Grid
+          container
+          item
+          xs={12}
+          sm={15}
+          md={20}
+          justifyContent="space-evenly"
+          sx={{
+            marginTop: {
+              xs: '8%', // Default margin for extra small screens
+              sm: membersDisplayed.length <= 3 ? '-30%' : '-70%', // Adjusted for small screens
+              md: membersDisplayed.length <= 3 ? '-30%' : '-60%', // Adjusted for medium screens
+              lg: membersDisplayed.length <= 3 ? '-15%' : '-45%', // Adjusted for large screens
+            },
+            marginBottom: {
+              xs: membersDisplayed.length <= 3 ? '10%' : '0%',
+              sm: membersDisplayed.length <= 3 ? '10%' : '0%',
+              md: membersDisplayed.length <= 3 ? '10%' : '0%',
+            },
+          }}
+        >
+          <Grid
+            container
+            item
+            xs={5}
+            sm={20}
+            md={15}
+            justifyContent="space-between"
+            sx={{ 
+              alignItems: 'center',
+              marginLeft:{
+                sm: '4%',
+                md: '6%',
+                lg: '10%'
+              },
+              marginRight:{
+                sm: '4%',
+                md: '6%',
+                lg: '10%'
+              }
+             }}
+
+          >
+            <Grid item>
+              <button
+                style={{
+                  border: 'none',
+                  background: 'none',
+                  cursor: currentPage === 1 ? 'auto' : 'pointer',
+                  opacity: currentPage === 1 ? '20%' : '100%',
+                }}
+                onClick={handlePreviousPage}
+                disabled={currentPage === 1}
+              >
+                <img
+                  src={previous}
+                  alt="img"
+                  style={{
+                    width: 30,
+                    height: 30,
+                  }}
+                />
+              </button>
+            </Grid>
+            <Grid item>
+              <button
+                style={{
+                  border: 'none',
+                  background: 'none',
+                  cursor:
+                    currentPage === Math.ceil(team.members.length / 6)
+                      ? 'auto'
+                      : 'pointer',
+                  opacity:
+                    currentPage === Math.ceil(team.members.length / 6) ? '20%' : '100%',
+                }}
+                onClick={handleNextPage}
+                disabled={currentPage === Math.ceil(team.members.length / 6)}
+              >
+                <img src={next} alt="img" style={{ width: 30, height: 30 }} />
+              </button>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default MeetTheTeam;

frontend/src/components/TemplateWebsite/Projects.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Container, Grid} from '@mui/material';
+import { tempStyles } from './styles';
+import {projects, Project} from './ProjectsInfo';
+
+
+const ProjectCard: React.FC<Project> = ({ name, description, image }) => {
+  return (
+    <Grid item xs={12} sm={4} sx={{justifyContent: 'center'}}>
+      <img 
+        src = {image}
+        style={{width: '100%'}}
+        alt = {'img'}
+        />
+      <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)', margin:'5px 0' }}>
+        {name}
+      </p>
+      <p style={{ color: 'white', fontSize: 'clamp(10px, 3vw, 15px)', margin:'0' }}>
+        {description}
+      </p>
+    </Grid>
+  );
+}
+
+const Projects = () => {
+  const styles = tempStyles();
+  return (
+    <Container disableGutters maxWidth='xl' sx={styles.projlist}>
+      <h1 style={{...styles.subtitle, paddingBottom:'20px', margin:'0px'}}
+      >
+        Current Projects
+      </h1>
+      <Grid container spacing={4} justifyContent="center" alignItems="center">
+        {/** I'll prob do the arrray map here */}
+        {projects.map(project => (
+          <ProjectCard 
+          id = {project.id}
+          name = {project.name}
+          description = {project.description}
+          image = {project.image}
+          />
+        )) }
+      </Grid>
+    </Container>
+  );
+};
+export default Projects;

frontend/src/components/TemplateWebsite/ProjectsInfo.tsx

@@ -0,0 +1,30 @@
+import template1 from "../../images/templatepage/template1.png"
+
+
+export interface Project {
+  id: number;
+  name: string;
+  description: string;
+  image: string;
+}
+
+export const projects : Project[] = [
+    {
+      id: 1,
+      name: "Project One",
+      description: "This is a description of Project Alpha. It's a groundbreaking initiative.",
+      image: template1,
+    },
+    {
+      id: 2,
+      name: "Project Beta",
+      description: "This is a description of Project Beta. An innovative approach to problem-solving.",
+      image: template1,
+    },
+    {
+      id: 3,
+      name: "Project Gamma",
+      description: "This is a description of Project Gamma. A cutting-edge technological solution.",
+      image: template1,
+    },
+  ];