From 945b3f7e236bf1fbaf8fb99a3c60dd51bc2653bb Mon Sep 17 00:00:00 2001
From: LuaanNguyen <luanthiennguyen2003@gmail.com>
Date: Sun, 30 Jun 2024 12:29:22 -0700
Subject: [PATCH] Add changes to Navbar

---
 public/logo/soda-logo-red.png     | Bin 0 -> 1722 bytes
 src/components/Info/InfoCards.jsx |  62 +++++-----
 src/components/Navbar.jsx         |  29 +++--
 src/components/Team/TeamCards.jsx | 193 +++++++++++++++++-------------
 src/styles/index.css              |  19 +++
 5 files changed, 177 insertions(+), 126 deletions(-)
 create mode 100644 public/logo/soda-logo-red.png

diff --git a/public/logo/soda-logo-red.png b/public/logo/soda-logo-red.png
new file mode 100644
index 0000000000000000000000000000000000000000..19f81a0ddc6d177d0cdad03c45beed6410489fb1
GIT binary patch
literal 1722
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
Q?*IS*07*qoM6N<$g8#T5aR2}S

literal 0
HcmV?d00001

diff --git a/src/components/Info/InfoCards.jsx b/src/components/Info/InfoCards.jsx
index 3c90546..c28713d 100644
--- a/src/components/Info/InfoCards.jsx
+++ b/src/components/Info/InfoCards.jsx
@@ -1,38 +1,34 @@
-import React, { Component } from 'react';
-import content from './InfoList';
-import {Card, Button, Divider} from 'semantic-ui-react';
-import './InfoCards.css'
+import { Component } from "react";
+import content from "./InfoList";
+import { Card, Button, Divider } from "semantic-ui-react";
+import "./InfoCards.css";
 
 class InfoCards extends Component {
-    render() {
-		return (
-			<div className="infocards">
-                <Divider horizontal id="title">Info</Divider><br/>
-
-                <div id="cards">
-                    {content.map(({title, content, button}) =>
-                        <Card key={title} className="Card rounded-card">
-                            <Card.Content className="card-content">
-                                <Card.Header className="card-header">{title}</Card.Header>
-                                <Card.Description className="card-description">{content}</Card.Description>
-                                <br/>
-                                <Button
-                                    className="card-button"
-                                    
-                                > 
-                                {button} </Button>
-                            </Card.Content>
-                        </Card>
-                    )}
-                </div>
-			</div>
-		);
-	}
+  render() {
+    return (
+      <div className="infocards" id="info">
+        <Divider horizontal id="title">
+          Info
+        </Divider>
+        <br />
+
+        <div id="cards">
+          {content.map(({ title, content, button }) => (
+            <Card key={title} className="Card rounded-card">
+              <Card.Content className="card-content">
+                <Card.Header className="card-header">{title}</Card.Header>
+                <Card.Description className="card-description">
+                  {content}
+                </Card.Description>
+                <br />
+                <Button className="card-button">{button} </Button>
+              </Card.Content>
+            </Card>
+          ))}
+        </div>
+      </div>
+    );
+  }
 }
 
 export default InfoCards;
-
-
-
-
-
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 5782f74..f701f03 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -10,18 +10,31 @@ function Navbar() {
     <nav className="w-full bg-black-dark fixed">
       {/* Primary Navigation - Hidden on mobile */}
       <section className="w-full justify-between hidden sm:flex py-5 px-10">
-        <a href="/">
-          <h1 className="text-purple-dark text-[21px] text-soda-red font-extrabold">
+        <a href="/" className="flex gap-3 items-center">
+          <img src="/logo/soda-logo-red.png" className="w-8"></img>
+          <h1 className="text-purple-dark text-[21px] text-soda-white font-extrabold text-3xl">
             SoDA
           </h1>
         </a>
 
-        <div className="flex gap-10">
-          <h3>Info</h3>
-          <h3>Sponsors</h3>
-          <h3>Team</h3>
-        </div>
-        <Button name="Contact" />
+        <ul className="flex gap-10 items-center text-soda-white">
+          <li>
+            <a href="#info" className="nav-text-animation">
+              Info
+            </a>
+          </li>
+          <li>
+            <a href="#sponsors" className="nav-text-animation">
+              Sponsors
+            </a>
+          </li>
+          <li>
+            <a href="#team" className="nav-text-animation">
+              Team
+            </a>
+          </li>
+        </ul>
+        <Button name="Join SoDA" />
       </section>
 
       {/*Mobile Navigation*/}
diff --git a/src/components/Team/TeamCards.jsx b/src/components/Team/TeamCards.jsx
index abc85f7..e721e07 100644
--- a/src/components/Team/TeamCards.jsx
+++ b/src/components/Team/TeamCards.jsx
@@ -1,96 +1,119 @@
-import React, { Component } from 'react';
-import { Card, Divider, Popup, Image} from 'semantic-ui-react';
+import React, { Component } from "react";
+import { Card, Divider, Popup, Image } from "semantic-ui-react";
 
-import contacts from './TeamList.json';
-import './TeamCards.css';
+import contacts from "./TeamList.json";
+import "./TeamCards.css";
 
-class MemberCards extends Component{
+class MemberCards extends Component {
+  constructor(props) {
+    super(props);
+    this.onGClick = this.onGClick.bind(this);
+    this.onIClick = this.onIClick.bind(this);
+  }
+  onGClick() {
+    window.location.href = "mailto:asu@thesoda.io";
+  }
+  onIClick() {
+    window.location.href = "mailto:industry.asu@thesoda.io";
+  }
 
-	constructor(props) {
-		super(props);
-		this.onGClick = this.onGClick.bind(this);
-		this.onIClick = this.onIClick.bind(this);
-	}
-	onGClick() {
-		window.location.href = 'mailto:asu@thesoda.io';
-	}
-	onIClick() {
-		window.location.href = 'mailto:industry.asu@thesoda.io';
-	}
+  render() {
+    const teams = contacts.teams;
+    const advisors = contacts.advisors;
 
-	render() {
-		const teams = contacts.teams
-        const advisors = contacts.advisors
+    return (
+      <div className="team" id="team">
+        <Divider horizontal id="title">
+          Team
+        </Divider>
+        <br />
+        <div id="content">
+          SoDA is here to help you. Please feel free to reach out to any of us,
+          we want to help and would be happy to answer any questions you have!
+        </div>
 
-		return (
-			<div className="team">
-				<Divider horizontal id="title">Team</Divider><br/>
-				<div id="content">
-					SoDA is here to help you. Please feel free to reach out to any of us, we want to help and would be happy to answer any questions you have!
-				</div>
+        {Object.keys(teams).map((team, i) => (
+          <React.Fragment key={i}>
+            <Divider horizontal className="subteam-divider">
+              {team}
+            </Divider>
+            <div id="cards">
+              {teams[team].map((member, j) => (
+                <Card key={j} className="Card rounded-card">
+                  <Card.Content className="card-content">
+                    <div className="card-image-wrapper">
+                      <Image
+                        className="card-image"
+                        src={member.image}
+                        size="tiny"
+                      />
+                    </div>
 
-				{Object.keys(teams).map((team, i) =>
-					<React.Fragment key={i}>
-						<Divider horizontal className="subteam-divider">{team}</Divider>
-						<div id="cards">
-							{teams[team].map((member, j) => (
-								<Card key={j} className="Card rounded-card">
-								<Card.Content className="card-content">
+                    <div className="card-text">
+                      <Card.Header className="card-header">
+                        {member.name}
+                      </Card.Header>
+                      <Card.Meta className="card-meta">
+                        {member.role}
+                        <br />
+                        <Popup
+                          key={member.name}
+                          position="bottom center"
+                          inverted
+                          trigger={
+                            <a
+                              href={"mailto:" + member.email}
+                              className="card-email"
+                            >
+                              {member.email}
+                            </a>
+                          }
+                          //header='Open Mail Client'
+                          //content={member.email}
+                        />
+                      </Card.Meta>
+                    </div>
+                  </Card.Content>
+                </Card>
+              ))}
+            </div>
+          </React.Fragment>
+        ))}
 
-									<div className="card-image-wrapper">
-										<Image className="card-image" src={member.image} size="tiny" />
-									</div>
-									
-									<div className="card-text">
-										<Card.Header className="card-header">{member.name}</Card.Header>
-										<Card.Meta className="card-meta">
-										{member.role}
-										<br />
-										<Popup 
-											key={member.name}
-											position='bottom center'
-											inverted
-											trigger={<a href={'mailto:' + member.email} className="card-email">{member.email}</a>}
-											//header='Open Mail Client'
-											//content={member.email}
-										/>
-										</Card.Meta>
-									</div>
-
-								</Card.Content>
-								</Card>
-							))}
-						</div>
-					</React.Fragment>
-				)}
-
-                <Divider horizontal className="subteam-divider">Advisors</Divider>
-                <div id="cards">
-                    {advisors.map((advisor, j) => (
-                        <Card key={j} className="Card rounded-card">
-							<Card.Content className="card-content">
-						
-								<div className="card-image-wrapper">
-									<Image className="card-image" src={advisor.image} size="tiny" />
-								</div>
-
-								<div className="card-text">
-									<Card.Header className="card-header">{advisor.name}</Card.Header>
-									<Card.Meta className="card-meta">
-										{advisor.role}
-										<br />
-										<a href={'mailto:' + advisor.email} className="card-email">{advisor.email}</a>
-									</Card.Meta>
-								</div>
-
-							</Card.Content>
-                        </Card>
-                    ))}
+        <Divider horizontal className="subteam-divider">
+          Advisors
+        </Divider>
+        <div id="cards">
+          {advisors.map((advisor, j) => (
+            <Card key={j} className="Card rounded-card">
+              <Card.Content className="card-content">
+                <div className="card-image-wrapper">
+                  <Image
+                    className="card-image"
+                    src={advisor.image}
+                    size="tiny"
+                  />
                 </div>
 
-			</div>
-		);
-	}
+                <div className="card-text">
+                  <Card.Header className="card-header">
+                    {advisor.name}
+                  </Card.Header>
+                  <Card.Meta className="card-meta">
+                    {advisor.role}
+                    <br />
+                    <a href={"mailto:" + advisor.email} className="card-email">
+                      {advisor.email}
+                    </a>
+                  </Card.Meta>
+                </div>
+              </Card.Content>
+            </Card>
+          ))}
+        </div>
+      </div>
+    );
+  }
 }
 
-export default MemberCards;
\ No newline at end of file
+export default MemberCards;
diff --git a/src/styles/index.css b/src/styles/index.css
index 629c06f..73d0c36 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2,10 +2,29 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   @apply bg-soda-black text-soda-white text-[18px] max-md:text-[14px] font-apfel min-h-screen flex flex-col justify-between;
 }
 
+.nav-text-animation {
+  @apply hover:text-xl transition ease-in-out;
+}
+
+/* --------- NAVIGATION SECTION --------- */
+.navigation {
+  @apply w-full fixed z-10 bg-soda-black;
+}
+
+.nav-container {
+  @apply w-full justify-between hidden sm:flex py-5 px-10;
+}
+
+/* --------- HOME SECTION --------- */
+
 .home {
   @apply h-screen;
 }