Merge pull request #85 from UoaWDCC/yoyo-HomePage-Socials

Yoyo home page socials
UoaWDCC · Aug 10, 2024 · f241c91 · f241c91
2 parents 8550ee3 + 9f786ff
commit f241c91
Showing 121 changed files with 249 additions and 5 deletions.
diff --git a/.devcontainer/full/devcontainer.json b/.devcontainer/full/devcontainer.json
diff --git a/.devcontainer/minimal/devcontainer.json b/.devcontainer/minimal/devcontainer.json
diff --git a/.github/ISSUE_TEMPLATE/issue_template.md b/.github/ISSUE_TEMPLATE/issue_template.md
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
diff --git a/.github/workflows/deploy.production.yml b/.github/workflows/deploy.production.yml
diff --git a/.github/workflows/deploy.staging.yml b/.github/workflows/deploy.staging.yml
diff --git a/.github/workflows/generate-api-client.yml b/.github/workflows/generate-api-client.yml
@@ -19,6 +19,12 @@ jobs:
                 cmd: install
             - name: Generate API Client
               run: yarn generate:api-client
+            - name: Prettify API client code
+              uses: creyD/prettier_action@v4.3
+              with:
+                # This part is also where you can pass other options, for example:
+                  commit_message: "Chore: Prettify code"
+                  prettier_options: "--write frontend/src/api-client/**/*.ts"
             - name: Commit new API client
               uses: stefanzweifel/git-auto-commit-action@v5
               with:

diff --git a/.github/workflows/notification.yml b/.github/workflows/notification.yml
diff --git a/.gitignore b/.gitignore
diff --git a/README.MD b/README.MD
diff --git a/backend/.gitignore b/backend/.gitignore
diff --git a/backend/README.md b/backend/README.md
diff --git a/backend/docs/EventRoutes.md b/backend/docs/EventRoutes.md
diff --git a/backend/docs/ExecRoutes.md b/backend/docs/ExecRoutes.md
diff --git a/backend/docs/TicketRoutes.md b/backend/docs/TicketRoutes.md
diff --git a/backend/docs/UserRoutes.md b/backend/docs/UserRoutes.md
diff --git a/backend/fly.production.toml b/backend/fly.production.toml
diff --git a/backend/fly.staging.toml b/backend/fly.staging.toml
diff --git a/backend/package.json b/backend/package.json
diff --git a/backend/yarn.lock b/backend/yarn.lock
diff --git a/docker/docker-compose.microservice.yml b/docker/docker-compose.microservice.yml
diff --git a/docker/docker-compose.workspace.yml b/docker/docker-compose.workspace.yml
diff --git a/docker/dockerfile/Dockerfile b/docker/dockerfile/Dockerfile
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
diff --git a/frontend/.gitignore b/frontend/.gitignore
diff --git a/frontend/Dockerfile.production b/frontend/Dockerfile.production
diff --git a/frontend/Dockerfile.staging b/frontend/Dockerfile.staging
diff --git a/frontend/README.md b/frontend/README.md
diff --git a/frontend/fly.production.toml b/frontend/fly.production.toml
diff --git a/frontend/fly.staging.toml b/frontend/fly.staging.toml
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,11 +13,12 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.2.1",
-    "tailwind-scrollbar": "^3.1.0"
+    "tailwind-scrollbar": "^3.1.0",
+    "react-social-media-embed": "^2.5.13"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "^18.3.1",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.2",

diff --git a/frontend/postcss.config.mjs b/frontend/postcss.config.mjs
diff --git a/frontend/public/ASPA Title.png b/frontend/public/ASPA Title.png
diff --git a/frontend/public/ASPA Title.svg b/frontend/public/ASPA Title.svg
diff --git a/frontend/public/ContactsHeroBanner.png b/frontend/public/ContactsHeroBanner.png
diff --git a/frontend/public/Event Photo.svg b/frontend/public/Event Photo.svg
diff --git a/frontend/public/EventsHeroBanner.png b/frontend/public/EventsHeroBanner.png
diff --git a/frontend/public/discord.png b/frontend/public/discord.png
diff --git a/frontend/public/discord.svg b/frontend/public/discord.svg
diff --git a/frontend/public/facebook.svg b/frontend/public/facebook.svg
diff --git a/frontend/public/instagram.svg b/frontend/public/instagram.svg
diff --git a/frontend/public/linkedin.svg b/frontend/public/linkedin.svg
diff --git a/frontend/public/next.svg b/frontend/public/next.svg
diff --git a/frontend/public/vercel.svg b/frontend/public/vercel.svg
diff --git a/frontend/src/app/contact/page.tsx b/frontend/src/app/contact/page.tsx
diff --git a/frontend/src/app/events-admin/events-dashboard/page.tsx b/frontend/src/app/events-admin/events-dashboard/page.tsx
diff --git a/frontend/src/app/events-admin/page.tsx b/frontend/src/app/events-admin/page.tsx
diff --git a/frontend/src/app/events/event-info/event-registration/page.tsx b/frontend/src/app/events/event-info/event-registration/page.tsx
diff --git a/frontend/src/app/events/event-info/page.tsx b/frontend/src/app/events/event-info/page.tsx
diff --git a/frontend/src/app/events/page.tsx b/frontend/src/app/events/page.tsx
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
diff --git a/frontend/src/app/home/detail-form/page.tsx b/frontend/src/app/home/detail-form/page.tsx
diff --git a/frontend/src/app/home/login/page.tsx b/frontend/src/app/home/login/page.tsx
diff --git a/frontend/src/app/home/page.tsx b/frontend/src/app/home/page.tsx
@@ -1,5 +1,6 @@
 import PastEvents from "@/ui/PastEvents";
 import Description from "@/ui/home/Description";
+import Socials from "@/ui/home/Socials";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -16,6 +17,9 @@ export default function Home() {
       <section id="past-events">
         <PastEvents />
       </section>
+      <section id="socials">
+        <Socials /> 
+      </section>
     </div>
   );
 }
diff --git a/frontend/src/app/icon.ico b/frontend/src/app/icon.ico
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
diff --git a/frontend/src/app/profile-page/page.tsx b/frontend/src/app/profile-page/page.tsx
diff --git a/frontend/src/components/socials.module.css b/frontend/src/components/socials.module.css
@@ -0,0 +1,48 @@
+.socials{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.socialsBorders1{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 45px;
+    background-color: #87562A;
+    margin: 7px;
+    width: 394px;
+    height: 473px;
+}
+
+.socialsBorders2{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 45px;
+    background-color: #DD995B;
+    margin: 7px;
+    width: 394px;
+    height: 473px;
+}
+
+.socialsBorders3{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 45px;
+    background-color: #AA6F29;
+    margin: 7px;
+    width: 394px;
+    height: 473px;
+}
+
+.previews{
+    justify-content: center;
+    align-items: center;
+    width: 350px;
+    height: 422px;
+}
diff --git a/frontend/src/components/socials.tsx b/frontend/src/components/socials.tsx
@@ -0,0 +1,24 @@
+'use client';
+import React from 'react';
+import styles from './socials.module.css';
+import { InstagramEmbed } from 'react-social-media-embed/dist/components/embeds/InstagramEmbed';
+import { LinkedInEmbed } from 'react-social-media-embed/dist/components/embeds/LinkedInEmbed';
+import { FacebookEmbed } from 'react-social-media-embed/dist/components/embeds/FacebookEmbed';
+
+function Socials() {
+  return (
+    <div className={styles.socials}>
+        <div className={styles.socialsBorders1}>
+            <InstagramEmbed className={styles.previews} url="https://www.instagram.com/aspa.uoa/?hl=en"/>
+        </div>
+        <div className={styles.socialsBorders2}>
+            <LinkedInEmbed className={styles.previews} url="https://www.linkedin.com/company/aspa-auckland-student-pool-association"/>
+        </div>
+        <div className={styles.socialsBorders3}>
+            <FacebookEmbed className={styles.previews} url="https://www.facebook.com/login/?next=https%3A%2F%2Fwww.facebook.com%2Faspa.uoa%2F"/>
+        </div>
+    </div>
+  );
+}
+
+export default Socials;
diff --git a/frontend/src/ui/EventCard.module.css b/frontend/src/ui/EventCard.module.css
diff --git a/frontend/src/ui/EventCard.tsx b/frontend/src/ui/EventCard.tsx
diff --git a/frontend/src/ui/Footer.module.css b/frontend/src/ui/Footer.module.css
diff --git a/frontend/src/ui/Footer.tsx b/frontend/src/ui/Footer.tsx
diff --git a/frontend/src/ui/Header.tsx b/frontend/src/ui/Header.tsx
diff --git a/frontend/src/ui/Modal.module.css b/frontend/src/ui/Modal.module.css
diff --git a/frontend/src/ui/Modal.tsx b/frontend/src/ui/Modal.tsx
diff --git a/frontend/src/ui/NavBar.tsx b/frontend/src/ui/NavBar.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
-import { FaBars, FaTimes } from 'react-icons/fa';
+// import { FaBars, FaTimes } from 'react-icons/fa';
 import styles from './Navbar.module.css';
 import billairdBall from '../../public/billiard.png';
 import Image from 'next/image';
@@ -56,15 +56,15 @@ export default function NavBar() {
             {/* Hamburger Button */}
             <div className={styles.hamburgerButton}>
                 <button type='button' onClick={handleMenu}>
-                    <FaBars size={30} color='black' />
+                    {/* <FaBars size={30} color='black' /> */}
                 </button>
             </div>
 
             {/* Mobile Menu */}
             {open && (
                 <div className={styles.mobileMenu}>
                     <button type='button' onClick={handleMenu}>
-                        <FaTimes size={30} color='black' />
+                        {/* <FaTimes size={30} color='black' /> */}
                     </button>
 
                     <div className={styles.image}>

diff --git a/frontend/src/ui/Navbar.module.css b/frontend/src/ui/Navbar.module.css
diff --git a/frontend/src/ui/PastEvents.module.css b/frontend/src/ui/PastEvents.module.css
diff --git a/frontend/src/ui/PastEvents.tsx b/frontend/src/ui/PastEvents.tsx
diff --git a/frontend/src/ui/TestButton.module.css b/frontend/src/ui/TestButton.module.css
diff --git a/frontend/src/ui/TestButton.tsx b/frontend/src/ui/TestButton.tsx
diff --git a/frontend/src/ui/contact/ContactForm.tsx b/frontend/src/ui/contact/ContactForm.tsx
diff --git a/frontend/src/ui/contact/ExecCard.module.css b/frontend/src/ui/contact/ExecCard.module.css
diff --git a/frontend/src/ui/contact/ExecCard.tsx b/frontend/src/ui/contact/ExecCard.tsx
diff --git a/frontend/src/ui/contact/TeamList.module.css b/frontend/src/ui/contact/TeamList.module.css
diff --git a/frontend/src/ui/contact/TeamList.tsx b/frontend/src/ui/contact/TeamList.tsx
diff --git a/frontend/src/ui/contact/contacts.module.css b/frontend/src/ui/contact/contacts.module.css
diff --git a/frontend/src/ui/events/EventInfo.module.css b/frontend/src/ui/events/EventInfo.module.css
diff --git a/frontend/src/ui/events/EventInfo.tsx b/frontend/src/ui/events/EventInfo.tsx
diff --git a/frontend/src/ui/events/RegisterEventForm.tsx b/frontend/src/ui/events/RegisterEventForm.tsx
diff --git a/frontend/src/ui/events/Registereventform.module.css b/frontend/src/ui/events/Registereventform.module.css
diff --git a/frontend/src/ui/events/UpcomingEventCard.module.css b/frontend/src/ui/events/UpcomingEventCard.module.css
diff --git a/frontend/src/ui/events/UpcomingEventCard.tsx b/frontend/src/ui/events/UpcomingEventCard.tsx
diff --git a/frontend/src/ui/events/UpcomingEvents.module.css b/frontend/src/ui/events/UpcomingEvents.module.css
diff --git a/frontend/src/ui/events/UpcomingEvents.tsx b/frontend/src/ui/events/UpcomingEvents.tsx
diff --git a/frontend/src/ui/events/admin/EditRows.module.css b/frontend/src/ui/events/admin/EditRows.module.css
diff --git a/frontend/src/ui/events/admin/EditRows.tsx b/frontend/src/ui/events/admin/EditRows.tsx
diff --git a/frontend/src/ui/events/admin/EventPage.module.css b/frontend/src/ui/events/admin/EventPage.module.css
diff --git a/frontend/src/ui/events/admin/EventPage.tsx b/frontend/src/ui/events/admin/EventPage.tsx
diff --git a/frontend/src/ui/events/admin/Pagination.module.css b/frontend/src/ui/events/admin/Pagination.module.css
diff --git a/frontend/src/ui/events/admin/Pagination.tsx b/frontend/src/ui/events/admin/Pagination.tsx
diff --git a/frontend/src/ui/events/admin/ReadOnlyRow.module.css b/frontend/src/ui/events/admin/ReadOnlyRow.module.css
diff --git a/frontend/src/ui/events/admin/ReadOnlyRow.tsx b/frontend/src/ui/events/admin/ReadOnlyRow.tsx
diff --git a/frontend/src/ui/events/admin/mock-data.json b/frontend/src/ui/events/admin/mock-data.json
diff --git a/frontend/src/ui/events/admin/usePagination.tsx b/frontend/src/ui/events/admin/usePagination.tsx
diff --git a/frontend/src/ui/fonts.ts b/frontend/src/ui/fonts.ts
diff --git a/frontend/src/ui/home/Description.module.css b/frontend/src/ui/home/Description.module.css
diff --git a/frontend/src/ui/home/Description.tsx b/frontend/src/ui/home/Description.tsx
diff --git a/frontend/src/ui/home/RegisterAccountForm.tsx b/frontend/src/ui/home/RegisterAccountForm.tsx
diff --git a/frontend/src/ui/home/Registeraccountform.module.css b/frontend/src/ui/home/Registeraccountform.module.css
diff --git a/frontend/src/ui/home/Socials.module.css b/frontend/src/ui/home/Socials.module.css
@@ -0,0 +1,60 @@
+.container {
+    padding: 0px 10px 20px 10px;
+    margin: 20px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 90%;
+    margin-bottom: 10px;
+    gap: 2rem;
+  }
+
+  .title {
+    font-weight: bold;
+    text-decoration: underline 5px;
+    font-size: 6em;
+    color: #F4E5D7;
+    text-shadow: 8px 8px #5E4127;
+    text-underline-offset: 9px;
+    margin-bottom: 10px;
+  }
+
+  .button {
+    display: block;
+    margin: auto;
+    font-weight: bold;
+    font-size: 30px;
+    text-align: center;
+    color: #FBF5F0;
+    background-color: #DD995B;
+    border-radius: 45px;
+    padding: 0px 20px 0px 20px;
+    margin-top: 15px;
+  }
+
+  .button:hover {
+    background-color: #87562A;
+    color: #B7B2B8; 
+  }
+  /* Media queries for responsiveness */
+  @media screen and (max-width: 1200px) {
+
+    .title {
+      font-size: 4em;
+      text-align: center;
+    }
+
+    .content{
+      flex-direction: column;
+      align-items: center;
+      box-sizing: border-box; 
+      -moz-box-sizing: border-box;
+    }
+
+  }
diff --git a/frontend/src/ui/home/Socials.tsx b/frontend/src/ui/home/Socials.tsx
@@ -0,0 +1,23 @@
+import styles from "./Socials.module.css";
+import SocialsCard from "./SocialsCard"
+
+export default function Socials() {
+  const socials = [
+    {exec: "Name Surname", execTestimonial: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eia pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", execTitle: "Title"},
+    {exec: "Name Surname", execTestimonial: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eia pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", execTitle: "Title"},
+    {exec: "Name Surname", execTestimonial: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eia pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", execTitle: "Title"}
+]
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>
+        Check Out Our Socials!
+      </h1>
+      <div className={styles.content}>
+        {socials.map((social) => (
+          <SocialsCard key={social.exec} social={social} />     
+        ))}
+      </div>
+    </div>
+
+  );
+}
diff --git a/frontend/src/ui/home/SocialsCard.module.css b/frontend/src/ui/home/SocialsCard.module.css
@@ -0,0 +1,55 @@
+.cardbg {
+  display: flex;
+  text-align: left;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  max-width: 24.75rem;
+  min-height: 29.5rem;
+  margin: 0px 15px;
+  transition: transform 0.3s ease;
+  background-color: #87562A;
+  border-radius: 3rem;
+  align-items: center;
+}
+.card:hover {
+  transform: scale(0.95); 
+}
+
+.description h1 {
+  font-weight: medium;
+  font-size:1em;
+  color: #222629;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.description h2 {
+  font-weight: medium;
+  font-size:1em;
+  color: #222629;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.card p {
+  font-weight: 400px;
+  font-size: 2rem;
+  color: #222629;
+  line-height: 1.1;
+  overflow: hidden;
+}
+
+.cardbg .description {
+  display: flex;
+  text-align: left;
+  flex-direction: column;
+  justify-content: center;
+  width: 90%;
+  min-height: 26.25rem;
+  padding: 0px 20px;
+  background-color: #FBF5F0;
+  border-radius: 3rem;
+  justify-content: space-between;
+  padding: 2rem;
+}
diff --git a/frontend/src/ui/home/SocialsCard.tsx b/frontend/src/ui/home/SocialsCard.tsx
@@ -0,0 +1,23 @@
+import styles from "./SocialsCard.module.css";
+
+interface Social {
+  exec: string;
+  execTestimonial: string;
+  execTitle: string;
+}
+
+export default function SocialsCard({ social }: { social: Social }) {
+  return (
+    <div className={styles.cardbg}>
+      <div className={styles.description}>
+        <div>
+          <p>{social.execTestimonial}</p>
+        </div>
+        <div>
+          <h1>{social.exec}</h1>
+          <h2>{social.execTitle}</h2>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/ui/profile-page/NavLinks.tsx b/frontend/src/ui/profile-page/NavLinks.tsx
diff --git a/frontend/src/ui/profile-page/ParticipatedEvents.module.css b/frontend/src/ui/profile-page/ParticipatedEvents.module.css
diff --git a/frontend/src/ui/profile-page/ParticipatedEvents.tsx b/frontend/src/ui/profile-page/ParticipatedEvents.tsx
diff --git a/frontend/src/ui/profile-page/ProfileCard.module.css b/frontend/src/ui/profile-page/ProfileCard.module.css
diff --git a/frontend/src/ui/profile-page/ProfileCard.tsx b/frontend/src/ui/profile-page/ProfileCard.tsx
diff --git a/frontend/src/ui/profile-page/UpcomingEvents.module.css b/frontend/src/ui/profile-page/UpcomingEvents.module.css
diff --git a/frontend/src/ui/profile-page/UpcomingEvents.tsx b/frontend/src/ui/profile-page/UpcomingEvents.tsx
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
diff --git a/openapitools.json b/openapitools.json
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock