Merge pull request #103 from IEEEUCSC/main

Change navbar and chanage footer
IEEEUCSC · Feb 4, 2024 · c87f81c · c87f81c
2 parents 10ef292 + ba2c1cc
commit c87f81c
Show file tree

Hide file tree

Showing 20 changed files with 199 additions and 152 deletions.
diff --git a/Frontend/README.md b/Frontend/README.md
@@ -48,13 +48,4 @@ To learn React, check out the [React documentation](https://reactjs.org/).
 
 
 
-## FRAMER-MOTION INSTAL
-npm install framer-motion
-
-## MUI
-npm install @mui/lab @types/material-ui
-npm install @mui/icons-material
-npm install react-swipeable-views
-
-
 
diff --git a/Frontend/package.json b/Frontend/package.json
@@ -33,6 +33,7 @@
     "react-router-dom": "^6.21.3",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "react-scroll": "^1.9.0",
     "react-slideshow-image": "^4.3.0",
     "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "^0.14.0",
@@ -73,6 +74,7 @@
   "devDependencies": {
     "@types/aria-query": "^5.0.4",
     "@types/react-router-hash-link": "^2.4.9",
+    "@types/react-scroll": "^1.8.10",
     "@types/react-swipeable-views-utils": "^0.13.7",
     "@types/react-vertical-timeline-component": "^3.3.6",
     "tailwindcss": "^3.4.1"

diff --git a/Frontend/pnpm-lock.yaml b/Frontend/pnpm-lock.yaml
diff --git a/Frontend/public/footerbg.png b/Frontend/public/footerbg.png
diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx
@@ -22,7 +22,6 @@ function App() {
         <Navbar />       
       <Routes>
         <Route path="/team" element={<Registration />} />
-
         <Route path="/*" element={
           <div>     
             <Particles />     
@@ -37,6 +36,8 @@ function App() {
           </div>
         } />     
       </Routes>
+
+
       <Footer />
     </div>
   );

diff --git a/Frontend/src/Assets/Footer/ieee-wie2.png b/Frontend/src/Assets/Footer/ieee-wie2.png
diff --git a/Frontend/src/Assets/Footer/wie-ucsc2.png b/Frontend/src/Assets/Footer/wie-ucsc2.png
diff --git a/Frontend/src/Assets/NavBar/as-lpgp.png b/Frontend/src/Assets/NavBar/as-lpgp.png
diff --git a/Frontend/src/Components/Card/Card.tsx b/Frontend/src/Components/Card/Card.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, ReactElement } from 'react';
 import './Card.css'
 
+
 // Data
 import data from './data.json';
 // import { WidthFull } from '@mui/icons-material';
@@ -52,10 +53,16 @@ const Carousel: React.FC = (): ReactElement => {
   }, []);
 
   return (
-    <div className="carousel bg-white pt-10 pb-24">
-      <h2 className="relative text-5xl leading-8 font-semibold mb-16 mt-4 text-secondary tracking-widest font-sfont text-center hover:text-primary">
-        Hackaholics 5.0
-      </h2>
+    <div className="carousel bg-secondary pt-10 pb-24 p-2">
+      <div className="prizeHead">
+      <div
+          className="shape "
+        >
+          <h1 className="font-sfont font-semibold tracking-wider">
+            <span>Hackaholics 5.0</span>
+          </h1>
+        </div>
+      </div>
       <div className="relative overflow-hidden">
         <div className="flex justify-between absolute top left w-full h-full">
           <button

diff --git a/Frontend/src/Components/ContactUs/ContactUs.css b/Frontend/src/Components/ContactUs/ContactUs.css
@@ -92,12 +92,12 @@
 .nameDivContactUs h6 {
   text-align: center;
   font-size: 1.3rem;
-  color: #18113a;
+  color: white;
 }
 
 .roleDivContactUs {
   width: 80%;
-  color: #18113a;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -106,12 +106,12 @@
 .roleDivContactUs p {
   text-align: center;
   font-size: 1rem;
-  color: #18113a;
+  color: white;
 }
 
 .phoneNumberDiv {
   width: 80%;
-  color: #18113a;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -120,12 +120,12 @@
 .phoneNumberDiv p {
   text-align: center;
   font-size: 1rem;
-  color: #18113a;
+  color: white;
 }
 
 .emailDiv {
   width: 80%;
-  color: #18113a;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -134,7 +134,7 @@
 .emailDiv p {
   text-align: center;
   font-size: 1rem;
-  color: #18113a;
+  color: white;
 }
 
 .contactUsHead {

diff --git a/Frontend/src/Components/ContactUs/ContactUs.tsx b/Frontend/src/Components/ContactUs/ContactUs.tsx
@@ -5,25 +5,25 @@ import image3 from "../../Assets/Contact Us/Dilanga Harshani.png";
 
 const ContactUs = () => {
   return (
-    <div className="contactUsDiv">
+    <div className="contactUsDiv bg-secondary">
       <div className="contactUsHead">
         <div className="shape">
-          <h1>
+        <h1 className="font-sfont font-semibold tracking-wider">
             <span>Contact Us</span>
           </h1>
         </div>
       </div>
-      <div className="contactUsDivRow">
-        <div className="contactUsColumn">
+      <div className="contactUsDivRow text-neutral-100 font-pfont">
+        <div className="contactUsColumn ">
           <div className="ocPeopleImageDiv1">
             <img src={image1} alt="Avatar" className="ocPeopleImage" />
           </div>
-          <div className="nameDivContactUs">
+          <div className="nameDivContactUs text-neutral-50 font-pfont tracking-wide text-xl">
             <p>
-              <b>Ms. Uthpalani Jayasinghe</b>
+              Ms. Uthpalani Jayasinghe
             </p>
           </div>
-          <div className="roleDivContactUs">
+          <div className="roleDivContactU">
             <p>Chairperson</p>
           </div>
           <div className="phoneNumberDiv">
@@ -32,7 +32,7 @@ const ContactUs = () => {
             </p>
           </div>
           <div className="emailDiv">
-            <p>
+            <p className="tracking-widest font-pfont">
               <b className="fas fa-envelope">[email protected]</b>
             </p>
           </div>
@@ -41,9 +41,9 @@ const ContactUs = () => {
           <div className="ocPeopleImageDiv2">
             <img src={image2} alt="Avatar" className="ocPeopleImage" />
           </div>
-          <div className="nameDivContactUs">
+          <div className="nameDivContactUs text-neutral-50 font-pfont tracking-wide text-lg">
             <p>
-              <b>Ms. Oshani Wickramasinghe</b>
+              Ms. Oshani Wickramasinghe
             </p>
           </div>
           <div className="roleDivContactUs">
@@ -55,47 +55,41 @@ const ContactUs = () => {
             </p>
           </div>
           <div className="emailDiv">
-            <p>
+          <p className="tracking-widest font-pfont">
               <b className="fas fa-envelope">[email protected]</b>
             </p>
           </div>
         </div>
         <div className="contactUsColumn">
-          <div className="ocPeopleImageDiv3">
+          <div className="ocPeopleImageDiv2">
             <img src={image3} alt="Avatar" className="ocPeopleImage" />
           </div>
-          <div className="nameDivContactUs">
+          <div className="nameDivContactUs text-neutral-50 font-pfont tracking-wide text-lg">
             <p>
-              <b>Ms. Dilanga Harshani</b>
+              Ms. Dilanga Harshani
             </p>
           </div>
           <div className="roleDivContactUs">
             <p>Secretary</p>
           </div>
           <div className="phoneNumberDiv">
             <p>
-              <i className="fas fa-phone-alt"></i> +94 70 1 665 087
+              <i className="fas fa-phone-alt"></i> +94 70 166 5087
             </p>
           </div>
           <div className="emailDiv">
-            <p>
-              <b className="fas fa-envelope">
-                Email: [email protected]
-              </b>
+          <p className="tracking-widest font-pfont">
+              <b className="fas fa-envelope">[email protected]</b>
             </p>
           </div>
         </div>
         <div className="contactUsColumn">
-          <div className="ocPeopleImageDiv4">
-            <img
-              src="https://www.w3schools.com/howto/img_avatar.png"
-              alt="Avatar"
-              className="ocPeopleImage"
-            />
-          </div>
-          <div className="nameDivContactUs">
+          <div className="ocPeopleImageDiv2">
+            <img src={image2} alt="Avatar" className="ocPeopleImage" />
+          </div>
+          <div className="nameDivContactUs text-neutral-50 font-pfont tracking-wide text-lg">
             <p>
-              <b>Ms. Buddhi Yapa</b>
+              Ms. Buddhi Yapa
             </p>
           </div>
           <div className="roleDivContactUs">
@@ -107,8 +101,8 @@ const ContactUs = () => {
             </p>
           </div>
           <div className="emailDiv">
-            <p>
-              <b className="fas fa-envelope">[email protected]</b>
+          <p className="tracking-widest font-pfont">
+              <b className="fas fa-envelope">[email protected]</b>
             </p>
           </div>
         </div>

diff --git a/Frontend/src/Components/FAQ/FAQ.tsx b/Frontend/src/Components/FAQ/FAQ.tsx
@@ -3,12 +3,12 @@ import FAQcomponent from "./FAQContainor";
 import img from "../../Assets/Astronaut/astronut 8.png";
 const FAQ = () => {
   return (
-    <div className="faqDiv">
+    <div className="faqDiv bg-secondary">
       <div className="FAQHead">
         <div
           className="shape"
         >
-          <h1>
+          <h1 className="font-sfont font-semibold tracking-wider">
             <span>Frequently Asked Questions</span>
           </h1>
         </div>

diff --git a/Frontend/src/Components/Footer/Footer.css b/Frontend/src/Components/Footer/Footer.css
@@ -1,4 +1,4 @@
-* {
+/* * {
   margin: 0;
   padding: 0;
 }
@@ -32,4 +32,4 @@
   .contactUsColumn {
     width: 50%;
   }
-}
+} */