Merge pull request #14 from asusoda/Organize-Files

Organized Files
asusoda · Aug 3, 2024 · fb9467c · fb9467c
2 parents d788e7d + 14ca8e5
commit fb9467c
Show file tree

Hide file tree

Showing 18 changed files with 175 additions and 119 deletions.
diff --git a/src/components/NavigationBar.tsx → bin/NavigationBar.tsx b/src/components/NavigationBar.tsx → bin/NavigationBar.tsx
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/soda-logo.png" />
+    <link rel="icon" type="image/svg+xml" href="/Soda_logo_Light_Mode.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SoDA - The Software Developer Association at ASU</title>
   </head>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
-import Footer from "./components/Footer";
+import Footer from "./components/Footer/Footer";
 
 function App() {
   return (

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
diff --git a/src/components/AllRightsReserved.tsx → src/components/Footer/CopyrightsNotice.tsx b/src/components/AllRightsReserved.tsx → src/components/Footer/CopyrightsNotice.tsx
@@ -1,4 +1,4 @@
-export default function AllRightsReserved() {
+export function AllRightsReserved() {
   return (
     <div className="text-center items-center py-5">
       <p className="text-sm text-soda-gray">

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -0,0 +1,19 @@
+import HorizontalLine from "../HorizontalLine";
+import { LeftFooterGrid } from "./LeftFooterGrid";
+import RightFooterGrid from "./RightFooterGrid";
+import { MiddleFooterGrid } from "./MiddleFooterGrid";
+import { AllRightsReserved } from "./CopyrightsNotice";
+
+export default function Footer() {
+  return (
+    <footer>
+      <HorizontalLine />
+      <main className="footer-container">
+        <LeftFooterGrid />
+        <MiddleFooterGrid />
+        <RightFooterGrid />
+      </main>
+      <AllRightsReserved />
+    </footer>
+  );
+}
diff --git a/src/components/Footer/LeftFooterGrid.tsx b/src/components/Footer/LeftFooterGrid.tsx
@@ -0,0 +1,14 @@
+import SocialMediaLinks from "../SocialMediaLinks";
+
+export function LeftFooterGrid() {
+  return (
+    <section className="col-span-2 max-md:col-span-2 max-md:p-2">
+      <div className="flex flex-col max-md:flex-row justify-between h-full">
+        <div className="flex gap-3 items-center max-sm:flex-row max-sm:items-center max-sm:hidden">
+          <img src="/logo/soda-logo-white.png" className="w-6" />
+          <span className="text-soda-gray">THESODA.IO - Since 2017</span>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Footer/MiddleFooterGrid.tsx b/src/components/Footer/MiddleFooterGrid.tsx
@@ -0,0 +1,33 @@
+const organization = [
+  {
+    name: "Get Involved",
+    source: "https://asu.campuslabs.com/engage/organization/soda",
+  },
+  {
+    name: "Projects",
+    source: "https://github.com/orgs/asusoda/repositories",
+  },
+  {
+    name: "News",
+    source: "https://asu.campuslabs.com/engage/organization/soda/news",
+  },
+  {
+    name: "Gallery",
+    source: "https://asu.campuslabs.com/engage/organization/soda/gallery",
+  },
+];
+
+export function MiddleFooterGrid() {
+  return (
+    <section className="grid grid-rows-3 gap-2">
+      <h5 className="text-soda-white text-[16px] ">Organization</h5>
+      {organization.map((el, i) => (
+        <a href={el.source} key={i}>
+          <p className="text-soda-gray hover:text-soda-white text-[16px]">
+            {el.name}
+          </p>
+        </a>
+      ))}
+    </section>
+  );
+}
diff --git a/src/components/Footer/RightFooterGrid.tsx b/src/components/Footer/RightFooterGrid.tsx
@@ -0,0 +1,30 @@
+const resources = [
+  {
+    name: "Contact",
+    source: "https://asu.campuslabs.com/engage/organization/soda",
+  },
+  {
+    name: "Constitution",
+    source:
+      "https://docs.google.com/document/d/1VZmeN7BdD3D1mjQtc5td02BwbOCKrsivLQeMkF-y_1g/edit",
+  },
+  {
+    name: "Privacy & Policy",
+    source: "/",
+  },
+];
+
+export default function RightFooterGrid() {
+  return (
+    <section className="grid grid-rows-3 gap-1">
+      <h5 className="text-soda-white text-[16px]">Resources</h5>
+      {resources.map((el, i) => (
+        <a href={el.source} key={i}>
+          <p className="text-soda-gray text-[16px] hover:text-soda-white">
+            {el.name}
+          </p>
+        </a>
+      ))}
+    </section>
+  );
+}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -7,21 +7,23 @@ function Hero() {
   return (
     <>
       <main className="hero">
-        {/* <AnimatedBackGround /> */}
-        <div className="hero-container z-10">
-          <div className="md:w-1/2 flex flex-col items-center justify-between">
-            <h1 className="text-4xl md:text-6xl font-bold leading-tight px-6">
-              The Software Developers Association
+        <section className="hero-container">
+          <summary className="left-hero">
+            <h1 className="hero-large-text">
+              The Software Developers Association (SoDA)
             </h1>
-            <p className="mt-4 text-xl px-6">
-              The premiere software development club for Arizona State
-              University students.
+            <p className="hero-small-text">
+              SoDA is one of the largest communities of students at Arizona
+              State University. We provide opportunities to collaborate on
+              projects outside of the classroom, learn from university and
+              industry professionals, and prepare for a career as a software
+              developer.
             </p>
             <Statistics />
             <SocialMediaLinks />
-          </div>
+          </summary>
           <EventsPhotoCarousel />
-        </div>
+        </section>
       </main>
     </>
   );

diff --git a/src/components/SocialMediaLinks.tsx b/src/components/SocialMediaLinks.tsx
@@ -6,6 +6,8 @@ import { CgWebsite } from "react-icons/cg";
 import { FaDiscord } from "react-icons/fa6";
 import { IoLogoFreebsdDevil } from "react-icons/io";
 
+//Edit any changes to the SoDA URLs here
+//Icons can be found at: https://react-icons.github.io/react-icons/
 const socialMediaLinks = [
   { href: "https://thesoda.io/", icon: <CgWebsite /> },
   { href: "https://www.linkedin.com/company/thesoda/", icon: <FaLinkedin /> },

diff --git a/src/components/Sponsors/SponsorsMarquee.tsx → src/components/Sponsors/Sponsors.tsx b/src/components/Sponsors/SponsorsMarquee.tsx → src/components/Sponsors/Sponsors.tsx
@@ -46,12 +46,10 @@ function SponsorsMarquee() {
   };
 
   return (
-    <section id="sponsors">
-      <h1 className="text-white font-bold text-2xl md:text-4xl text-center p-5">
-        Our Sponsors
-      </h1>
-      <section className="flex flex-row overflow-x-hidden bg-white">
-        <div className="py-8 pl-20 flex flex-row animate-marquee whitespace-nowrap gap-8">
+    <main id="sponsors">
+      <h1 className="sponsor-header-text ">Our Sponsors</h1>
+      <section className="sponsor-container">
+        <div className="marquee-effect-container">
           {sponsors.map((element, index) => (
             <img
               key={index}
@@ -70,7 +68,7 @@ function SponsorsMarquee() {
           ))}
         </div>
       </section>
-    </section>
+    </main>
   );
 }
 

diff --git a/src/components/Team/Contacts.ts b/src/components/Team/Contacts.ts
@@ -0,0 +1,19 @@
+export interface Contacts {
+  advisors: TeamMember[];
+  teams: Teams;
+}
+
+export type TeamMember = {
+  name: string;
+  role: string;
+  email: string;
+  image: string;
+};
+
+export type Teams = {
+  [team: string]: TeamMember[];
+};
+
+export interface MemberCardsProps {
+  contacts: Contacts;
+}
diff --git a/src/components/Team/TeamCards.css b/src/components/Team/TeamCards.css
@@ -118,13 +118,13 @@
   color: black;
   padding-bottom: 8px;
   font-weight: bold;
-  font-size: 2em;
+  font-size: 1.8em;
 }
 
 .card-meta {
   color: black;
   padding-bottom: 8px;
-  font-size: 0.9em;
+  font-size: 1em;
 }
 
 .card-email {

diff --git a/src/components/Team/TeamCards.tsx b/src/components/Team/TeamCards.tsx
@@ -1,31 +1,10 @@
 import React, { Component } from "react";
 import { Card, Divider, Popup, Image } from "semantic-ui-react";
+import { MemberCardsProps, Contacts } from "./Contacts";
+import contactsData from "./TeamList.json";
 import "./TeamCards.css";
 
-import contactsData from "./TeamList.json";
 const contacts: Contacts = contactsData as Contacts;
-
-type TeamMember = {
-  name: string;
-  role: string;
-  email: string;
-  image: string;
-};
-
-type Teams = {
-  [team: string]: TeamMember[];
-};
-
-interface Contacts {
-  advisors: TeamMember[];
-  teams: Teams;
-}
-
-// Define the props interface
-interface MemberCardsProps {
-  contacts: Contacts;
-}
-
 class MemberCards extends Component<MemberCardsProps> {
   constructor(props: MemberCardsProps) {
     super(props);

diff --git a/src/components/AnimatedBackGround.tsx → src/components/ui/AnimatedBackGround.tsx b/src/components/AnimatedBackGround.tsx → src/components/ui/AnimatedBackGround.tsx
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,16 +1,18 @@
 import InfoCards from "../components/Info/InfoCards";
 import MemberCards from "../components/Team/TeamCards";
 import Hero from "../components/Hero";
-import SponsorsMarquee from "../components/Sponsors/SponsorsMarquee";
+import SponsorsMarquee from "../components/Sponsors/Sponsors";
+import contactsData from "../components/Team/TeamList.json"; // Adjust the path as necessary
+import { Contacts } from "../components/Team/Contacts";
 
 function Home() {
   return (
-    <section className="home area">
+    <main className="home area">
       <Hero />
       <SponsorsMarquee />
-      <MemberCards />
+      <MemberCards contacts={contactsData as Contacts} />
       <InfoCards />
-    </section>
+    </main>
   );
 }