Archive page

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package.json

@@ -17,7 +17,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
+    "start": "^5.1.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -46,6 +47,8 @@
     ]
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.4"
+    "@svgr/webpack": "^8.1.0",
+    "tailwindcss": "^3.4.4",
+    "url-loader": "^4.1.1"
   }
 }

src/App.tsx

@@ -4,6 +4,8 @@ import Home from "./screens/Home/Home";
 import NotFound from "./screens/NotFound";
 import Footer from "./components/Footer";
 import Navbar from "./components/Navbar";
+import Archive from "./screens/Archive";
+
 
 function App() {
   return (
@@ -12,6 +14,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Home />}></Route>
         <Route path="/join" element={<JoinPage />}></Route>
+        <Route path="/archive" element={<Archive/>}></Route>
         <Route path="*" element={<NotFound />}></Route>
       </Routes>
       <Footer />

src/modules/listOfSponsor.tsx

@@ -0,0 +1,68 @@
+import nvidiaLogo from '../screens/sponsors/nvidia.svg';
+import appleLogo from '../screens/sponsors/apple-black-logo-svgrepo-com.svg'
+import googleLogo from '../screens/sponsors/google-icon-logo-svgrepo-com.svg';
+import ibmLogo from '../screens/sponsors/ibm-logo-svgrepo-com.svg';
+import amazonLogo from '../screens/sponsors/amazon-icon-logo-svgrepo-com.svg';
+import appianLogo from '../screens/sponsors/appian-rebrand-1.svg'
+import geicoLogo from '../screens/sponsors/geico-1.svg'
+import microsoftLogo from '../screens/sponsors/microsoft-logo-svgrepo-com.svg'
+import githubLogo from '../screens/sponsors/github-2.svg'
+import leidosLogo from '../screens/sponsors/leidos-1.svg'
+import palantirLogo from '../screens/sponsors/palantir-technologies-logo.svg'
+import redbullLogo from '../screens/sponsors/redbull-logo-svgrepo-com.svg'
+import mongodbLogo from '../screens/sponsors/mongodb-icon-2.svg'
+
+export const sponsors = [
+    {
+        name: "NVIDIA",
+        logo: nvidiaLogo,
+    },
+    {
+        name: "Apple",
+        logo: appleLogo,
+    },
+    {
+        name: "Google",
+        logo: googleLogo,
+    },
+    {
+        name: "IBM",
+        logo: ibmLogo,
+    },
+    {
+        name: "Amazon",
+        logo: amazonLogo,
+    },
+    {
+        name: "Appian",
+        logo: appianLogo,
+    },
+    {
+        name: "GEICO",
+        logo: geicoLogo,
+    },
+    {
+        name: "GitHub",
+        logo: githubLogo,
+    },
+    {
+        name: "Leidos",
+        logo: leidosLogo,
+    },
+    {
+        name: "Microsoft",
+        logo: microsoftLogo,
+    },
+    {
+        name: "Mongo DB",
+        logo: mongodbLogo,
+    },
+    {
+        name: "Palantir",
+        logo: palantirLogo,
+    },
+    {
+        name: "Redbull",
+        logo: redbullLogo,
+    },
+]

src/screens/Archive.css

@@ -0,0 +1,143 @@
+.archive-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px;
+    background-color: #ffffff; /* Overall white background */
+    font-family: Arial, sans-serif; /* Optionally use a custom web font */
+  }
+
+  .history-section {
+    background-color: #ffffff; /* White background */
+    padding: 30px;
+    border-radius: 10px;
+    margin-bottom: 30px;
+    width: 90%;
+    max-width: 900px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-left: 6px solid #121A6A; /* Orange border for aesthetic */
+  }
+
+  .history-title {
+    font-size: 32px;
+    color: #121A6A; /* Dark blue color */
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+
+  .history-text {
+    font-size: 18px;
+    color: #121A6A; /* Dark blue color */
+    line-height: 1.8;
+    margin-bottom: 15px;
+    text-align: justify;
+  }
+
+  .placement-section {
+    background-color: #ffffff; /* White background */
+    padding: 30px;
+    border-radius: 10px;
+    width: 90%;
+    max-width: 900px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-left: 6px solid #2848BA; /* Blue border for aesthetic */
+    text-align: center;
+  }
+
+  .placement-title {
+    font-size: 28px;
+    color: #121A6A; /* Dark blue color */
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+
+  .placement-text {
+    font-size: 18px;
+    color: #121A6A; /* Dark blue color */
+    line-height: 1.8;
+    margin-bottom: 25px;
+  }
+
+  .placement-image {
+    width: 100%;
+    height: auto;
+    max-width: 800px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .sponsors-section {
+    background-color: #ffffff;
+    padding: 30px;
+    border-radius: 10px;
+    width: 90%;
+    max-width: 900px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin-top: 30px;
+    text-align: center;
+    border-left: 6px solid #87A2FC;
+  }
+
+  .sponsors-title {
+    font-size: 24px;
+    color: #121A6A;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .sponsors-text {
+    font-size: 16px;
+    color: #121A6A;
+    margin-bottom: 20px;
+  }
+
+  .sponsors-carousel {
+    overflow: hidden;
+    border: hidden;
+    width: 100%;
+    position: relative;
+    margin-bottom: 20px; /* Space between rows */
+  }
+
+  .sponsors-track {
+    display: flex;
+    border:hidden ;
+    animation: scroll 30s linear infinite;
+    width: fit-content; /* Ensures the track can be wide enough to fit all logos */
+  }
+
+  .sponsor-logo {
+    width: 180px; /* Larger sponsor logos */
+    height: 100px; /* Larger height for logos */
+    background-color: white; /* Grey placeholder for sponsor logos */
+    margin: 0 15px; /* Adjusted margin for larger logos */
+    border: 2px solid #121A6A; /* Dark blue border for logos */
+    padding: 10px;
+    border-radius: 10px;
+    background-color: white; /* Light background */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
+    display: inline-block;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center; /* Centers the image horizontally in the box */
+    align-items: center; /* Centers the image vertically in the box */
+    width: 250px; /* Set a fixed width for the box */
+    height: 100px; /* Set a fixed height for the box */
+    box-sizing: border-box;
+  }
+
+  .sponsor-logo img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  /* Animation for scrolling sponsor logos */
+  @keyframes scroll {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-50%);
+    }
+  }

src/screens/Archive.tsx

@@ -0,0 +1,118 @@
+import './Archive.css';
+import { sponsors } from '../modules/listOfSponsor';
+import { useState } from 'react';
+import React from "react";
+import placementImage from "../assets/hoohacks-placement.png"; // Replace with actual image path
+
+
+const Archive = () => {
+
+  return (
+    <div className="archive-container">
+      {/* History Section */}
+      <div className="history-section">
+        <h1 className="history-title">Our History</h1>
+        <p className="history-text">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.
+        Cras vehicula tortor a justo vehicula, non cursus magna consectetur. Sed aliquet massa nec urna aliquam, ac laoreet nunc tristique.
+        Integer euismod, ligula ut aliquam fringilla, ipsum nulla viverra ligula, a bibendum nisl ante quis lacus. Nam cursus, purus vel pellentesque pharetra, purus quam fermentum lorem,
+        a luctus orci nisl sit amet arcu. Fusce id sapien bibendum, pharetra eros id, tempus erat.
+        </p>
+        <p className="history-text">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras vehicula tortor a justo vehicula, non cursus magna consectetur.
+        Sed aliquet massa nec urna aliquam, ac laoreet nunc tristique. Integer euismod, ligula ut aliquam fringilla, ipsum nulla viverra ligula,
+        a bibendum nisl ante quis lacus. Nam cursus, purus vel pellentesque pharetra, purus quam fermentum lorem, a luctus orci nisl sit amet arcu.
+        Fusce id sapien bibendum, pharetra eros id, tempus erat.
+        </p>
+      </div>
+
+      {/* Placement Section */}
+      <div className="placement-section">
+        <h2 className="placement-title">Beyond HooHacks</h2>
+        <p className="placement-text">
+          Our members and alumni have continued their success through
+          internships and full-time employment across a variety of industries.
+        </p>
+        <img src={placementImage} alt="Placement Companies" className="placement-image" />
+      </div>
+
+      {/* Sponsors Section */}
+      <div className="sponsors-section">
+        <h3 className="sponsors-title">Our Sponsors</h3>
+        <p className="sponsors-text">
+          HooHacks wouldn't be possible without the incredible support of our sponsors.
+          Their generosity and commitment help us foster innovation and creativity each year.
+          Some of our previous sponsors include:
+        </p>
+
+        {/* First Carousel Row */}
+        <div className="sponsors-carousel">
+          <div className="sponsors-track">
+            {sponsors.map((sponsor, index) => (
+              <div className='sponsor-logo' key={`row1-${index}`}>
+              <img
+              src={`${process.env.PUBLIC_URL}${sponsor.logo}`}
+              alt={sponsor.name}
+              />
+              </div>
+            ))}
+            {sponsors.map((sponsor, index) => (
+              <div className="sponsor-logo" key={`row1-dup-${index}`}>
+                <img
+                src={`${process.env.PUBLIC_URL}${sponsor.logo}`}
+                alt={sponsor.name}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Second Carousel Row */}
+        <div className="sponsors-carousel">
+          <div className="sponsors-track">
+            {sponsors.map((sponsor, index) => (
+                <div className='sponsor-logo' key={`row2-${index}`}>
+                <img
+                src={`${process.env.PUBLIC_URL}${sponsor.logo}`}
+                alt={sponsor.name}
+                />
+                </div>
+            ))}
+            {sponsors.map((sponsor, index) => (
+              <div className='sponsor-logo' key={`row2-dup-${index}`} >
+                <img
+                src={`${process.env.PUBLIC_URL}${sponsor.logo}`}
+                alt={sponsor.name}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Third Carousel Row */}
+        <div className="sponsors-carousel">
+          <div className="sponsors-track">
+            {sponsors.map((sponsor, index) => (
+              <div className="sponsor-logo" key={`row3-${index}`}>
+                <img
+                src={`${process.env.PUBLIC_URL}${sponsor.logo}`}
+                alt={sponsor.name}
+                />
+              </div>
+            ))}
+            {sponsors.map((sponsor, index) => (
+              <div className="sponsor-logo" key={`row3-dup-${index}`}>
+                <img
+                src={`${process.env.PUBLIC_URL}${sponsor.logo}`}
+                alt={sponsor.name}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Archive;

src/screens/Home/AnimatedText.tsx

@@ -3,14 +3,15 @@ import hoohacksLogo from "../../assets/hooMain.png";
 
 const AnimatedText = () => {
   return (
-    <div className="relative flex justify-center items-center h-screen bg-white overflow-hidden pt-24 md:pt-32 lg:pt-48 px-4 md:px-8 lg:px-16">
+    <div className="relative flex justify-center items-start h-screen bg-white overflow-hidden px-4 md:px-8 lg:px-16">
       <img
         src={hoohacksLogo}
         alt="HooHacks Logo"
-        className="z-20 h-24 md:h-32 lg:h-48"
+        className="z-20 h-24 md:h-32 lg:h-48 absolute top-12 md:top-8 lg:top-60"
       />
+
     </div>
   );
 };
 
-export default AnimatedText;
+export default AnimatedText;