added footer, embeded links, change event list to workshop schedule …

…and updated Favcon + page title
CUNYTechPrep · Aug 13, 2024 · e24a0b0 · e24a0b0
1 parent c4152c3
commit e24a0b0
Show file tree

Hide file tree

Showing 19 changed files with 223 additions and 105 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/public\CTP-favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>CTP Hacks 2024</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/CTP-favicon.ico b/public/CTP-favicon.ico
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,6 +5,8 @@ import Countdwn from './components/theme_cntdwn/Countdwn';
 import SidePanel from './components/left_sidebar/SidePanel';
 import SponsorSection from './components/sponsor/SponsorSection';
 import EventList from './components/highlights/EventList';
+// import Projects from './components/project_sub/Projects';
+import Footer from './components/footer/Footer';
 
 const App = () => {
   return (
@@ -32,6 +34,11 @@ const App = () => {
           </div>
         </div>
 
+        {/* 8.13.2024 | emain hidden until content is updated with cohort 10 projevct submissions and replace DevPost link + discord section with winner project. */}
+
+        {/* <Projects /> */}
+
+        <Footer />
       </div>
     </div>
   );

diff --git a/src/assets/LinkedIn-Logo.png b/src/assets/LinkedIn-Logo.png
diff --git a/src/assets/Lyft-Logo.wine.png b/src/assets/Lyft-Logo.wine.png
diff --git a/src/assets/asana-1.png b/src/assets/asana-1.png
diff --git a/src/assets/asana-logo.png b/src/assets/asana-logo.png
diff --git a/src/assets/diversity-it-logo.png b/src/assets/diversity-it-logo.png
diff --git a/src/assets/diversity.png b/src/assets/diversity.png
diff --git a/src/assets/linkedin.png b/src/assets/linkedin.png
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
@@ -0,0 +1,24 @@
+import logo from '../../assets/logo.png';
+import { SOCIAL_MEDIA_LINKS } from '../../constants';
+
+const Footer = () => {
+    return (
+        <div className="mb-8 mt-20">
+            <div className="flex items-center justify-center">
+                <img src={logo} width={200} className="my-10" alt="Logo" />
+            </div>
+            <div className="flex items-center justify-center gap-8">
+                {SOCIAL_MEDIA_LINKS.map((item, index) => (
+                    <a key={index} href={item.href} target="_blank" rel="noopener noreferrer">
+                        {item.icon}
+                    </a>
+                ))}
+            </div>
+            <p className="mt-8 text-center text-sm tracking-wide text-gray-400">
+                &copy; compileTab. All rights reserved.
+            </p>
+        </div>
+    );
+};
+
+export default Footer;
diff --git a/src/components/highlights/EventList.jsx b/src/components/highlights/EventList.jsx
@@ -34,7 +34,7 @@ const EventList = () => {
 
       {/* Right Side: Event List */}
       <div className="flex-1 bg-white bg-opacity-20 backdrop-blur-sm p-4 rounded-lg shadow-lg md:ml-4 mt-4 md:mt-0 h-80 overflow-y-auto">
-        <h3 className="text-2xl font-bold mb-4 text-white">Upcoming Events</h3>
+        <h3 className="text-2xl font-bold mb-4 text-white">Workshops Schedule</h3>
         <ul className="space-y-4">
           {events.map((event, index) => (
             <li key={index} className="border-b border-gray-600 pb-4">

diff --git a/src/components/left_sidebar/SidePanel.css b/src/components/left_sidebar/SidePanel.css
@@ -0,0 +1,11 @@
+/* @media (max-width: 305px) {
+    .hidden-on-small {
+        display: none;
+    }
+}
+
+@media (min-width: 306px) {
+    .hidden-on-small {
+        display: block;
+    }
+} */
diff --git a/src/components/left_sidebar/SidePanel.jsx b/src/components/left_sidebar/SidePanel.jsx
@@ -1,17 +1,29 @@
 import React from 'react';
 import backgroundImage from '../../assets/ctp_sidemenu_banner.png';
+import './SidePanel.css';
 
 const SidePanel = () => {
   return (
     <div className="relative h-96 md:h-screen w-full md:w-1/4 p-4">
       <div
-        className="relative h-full w-full bg-cover bg-center rounded-lg shadow-lg"
-        style={{ backgroundImage: `url(${backgroundImage})` }}
+        className="relative h-full w-full bg-cover bg-center rounded-lg shadow-lg hidden-on-small"
+        style={{ 
+          backgroundImage: `url(${backgroundImage})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center'
+        }}
       >
-        <div className="absolute inset-0 bg-black bg-opacity-10 rounded-lg flex flex-col items-center justify-center text-white p-6">
-          <h2 className="text-base font-bold mt-48 mb-4 text-center">We need your help to make this event memorable and productive for our new cohort!</h2>
-          <p className="mb-6 text-center">Click below if you’d like to mentor our fellows, judge projects, or make a donation so that fellows can earn prizes.</p>
-          <button className="bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 hover:opacity-90 text-white font-bold py-2 px-6 rounded-full transition-opacity duration-300">
+        <div className="absolute inset-0 bg-black bg-opacity-15 rounded-lg flex flex-col items-center justify-center text-white p-6">
+          <h2 className="text-base font-bold mt-16 mb-4 text-center sm:mt-24 md:mt-32 lg:mt-48 hidden-on-small">
+            We need your help to make this event memorable and productive for our new cohort!
+          </h2>
+          <p className="mb-6 text-center px-4 md:px-6 lg:px-8 hidden-on-small">
+            Click below if you’d like to mentor our fellows, judge projects, or make a donation so that fellows can earn prizes.
+          </p>
+          <button 
+            className="bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 hover:opacity-90 text-white font-bold py-2 px-6 rounded-full transition-opacity duration-300 hidden-on-small"
+            onClick={() => window.open('https://docs.google.com/forms/d/e/1FAIpQLSeYhkdzozg2p1NpvO9eZlhr5BJegiJMOCuEYKDsIROViJHgag/viewform', '_blank')}
+          >
             Get Involved!
           </button>
         </div>

diff --git a/src/components/nav/Navbar.jsx b/src/components/nav/Navbar.jsx
@@ -16,11 +16,11 @@ const Navbar = () => {
         e.preventDefault();
         const targetElement = document.querySelector(href);
 
-        // Fixed navbar: if hyperlink exist will scroll to the target element value
-        if(targetElement) {
+        // Fixed navbar: if hyperlink exists, will scroll to the target element value
+        if (targetElement) {
             const offset = -85;
             const elementPosition = targetElement.getBoundingClientRect().top; 
-            const offsetPosition = elementPosition + window.scrollY+ offset;
+            const offsetPosition = elementPosition + window.scrollY + offset;
 
             window.scrollTo({
                 top: offsetPosition,
@@ -37,68 +37,68 @@ const Navbar = () => {
                 {/* Desktop Menu */}
                 {/* MX auto to center navbar and have it hidden on small screen by default */}
                 <div className="mx-auto hidden max-w-2xl items-center justify-center rounded-lg border border-stone-50/30 bg-black/20 py-3 backdrop-blur-lg lg:flex">
-                {/* Display logo + links */}
-                <div className="flex items-center justify-between gap-6">
-                    <div>
-                        <a href="#">
-                            <img src={logo} width={150} alt="logo" />
-                        </a>
+                    {/* Display logo + links */}
+                    <div className="flex items-center justify-between gap-6">
+                        <div>
+                            <a href="https://cunytechprep.org/">
+                                <img src={logo} width={150} alt="logo" />
+                            </a>
+                        </div>
+                        {/* Navbar Tabs */}
+                        <div>
+                            <ul className="flex items-center gap-4">
+                                {/* Navigation links declared in constants folder index.jsx file */}
+                                {NAVIGATION_LINKS.map((item, index) => (
+                                    <li key={index}>
+                                        <a className="text-sm hover:text-sm hover:text-yellow-400"  
+                                            href={item.href} 
+                                            onClick={(e) => handleLinkClick(e, item.href)}>
+                                            {item.label}
+                                        </a> 
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
                     </div>
-                    {/* Navbar Tabs */}
-                    <div>
-                        <ul className="flex items-center gap-4">
-                            {/* Navigation links declared in constants folder index.jsx file */}
+                </div>
+                {/* Mobile Menu */}
+                <div className="rounded-lg backdrop-blur-md lg:hidden">
+                    <div className="flex items-center justify-between">
+                        <div> 
+                            <a href="https://cunytechprep.org/">
+                                <img src={logo}
+                                alt="logo" width={90}
+                                className="m-2"/>
+                            </a>
+                        </div>
+                        {/* Menu button */}
+                        <div className="flex items-center">
+                            <button className="focus:outline-none lg:hidden" onClick={toggleMobileMenu}>
+                                {isMobileMenuOpen ? (
+                                    <FaTimes className="m-2 h-6 w-5" />
+                                ) : (
+                                    <FaBars className="m-2 h-6 w-5"/>
+                                )}
+                            </button> 
+                        </div>
+                    </div>
+                    {isMobileMenuOpen && (
+                        <ul className="ml-4 mt-4 flex flex-col gap-4 backdrop-blur-md">
                             {NAVIGATION_LINKS.map((item, index) => (
-                            <li key={index}>
-
-                                <a className="text-sm hover:text-sm hover:text-yellow-400"  
-                                href={item.href} 
-                                onClick={(e) => handleLinkClick(e, item.href)} > {item.label}
-                                </a> 
-                            </li>
+                                <li key={index}>
+                                    <a href={item.href}
+                                        className="block w-full text-lg" 
+                                        onClick={(e) => handleLinkClick(e, item.href)}>
+                                        {item.label}
+                                    </a>
+                                </li>
                             ))}
                         </ul>
-                    </div>
+                    )}
                 </div>
-            </div>
-            {/* Mobile Menu */}
-            <div className="rounded-lg 
-            backdrop-blur-md lg:hidden">
-                <div className="flex items-center justify-between">
-                    <div> 
-                        <a href="#">
-                            <img src={logo}
-                            alt="logo" width={90}
-                            className="m-2"/>
-                        </a>
-                    </div>
-                    {/* Menu button */}
-                    <div className="flex items-center">
-                        <button className="focus:outline-none lg:hidden" onClick={toggleMobileMenu}>
-                            {isMobileMenuOpen ? (
-                                <FaTimes className="m-2 h-6 w-5" />
-                            ): (
-                                <FaBars className="m-2 h-6 w-5"/>
-                            )}
-                        </button> 
-                    </div>
-                </div>
-                {isMobileMenuOpen && (
-                    <ul className="ml-4 mt-4 flex flex-col gap-4 backdrop-blur-md">
-                        {NAVIGATION_LINKS.map((item, index) => (
-                            <li key={index}>
-                                <a href={item.href}
-                                    className="block w-full text-lg" onClick={(e) => handleLinkClick(e, item.href)}>
-                                        {item.label}
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                )}
-            </div>
             </nav>
         </div>
     );
 };
 
-export default Navbar;
+export default Navbar;
diff --git a/src/components/project_sub/Projects.jsx b/src/components/project_sub/Projects.jsx
@@ -0,0 +1,40 @@
+import { PROJECTS } from "../../constants/index";
+import { MdArrowOutward } from "react-icons/md";
+
+const Projects = () => {
+    return (
+        <section className="pt-20" id="projects">
+            <h2 className="mb-12 text-center text-4xl lg:text-5xl font-extrabold tracking-tight text-gray-200"> 
+                Projects
+            </h2>
+            <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 px-4 md:px-8">
+                {/* project contents found in constants folder in index.jsx  */}
+                {PROJECTS.map((project) => (
+                    <div key={project.id} className="group relative overflow-hidden rounded-3xl shadow-lg transition-shadow hover:shadow-2xl">
+                        <img 
+                            src={project.image}
+                            alt={project.name}
+                            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105 rounded-3xl" 
+                        />
+
+                        <div className="absolute inset-0 flex flex-col items-center justify-center text-white opacity-0 backdrop-blur-md transition-opacity duration-500 group-hover:opacity-100 bg-black/50 rounded-3xl">
+                            <h3 className="mb-4 text-2xl font-semibold uppercase tracking-wide">{project.name}</h3>
+                            <p className="mb-8 px-6 text-sm md:text-base leading-relaxed">{project.description}</p>
+                            <a 
+                                href={project.githubLink} 
+                                target="_blank" 
+                                rel="noopener noreferrer" 
+                                className="flex items-center rounded-full bg-white text-black px-6 py-3 font-semibold hover:bg-gray-300 transition-all duration-300"
+                            >
+                                <span>View on Github</span>
+                                <MdArrowOutward className="ml-2" />
+                            </a>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </section>
+    );
+}
+
+export default Projects;
diff --git a/src/components/sponsor/SponsorSection.jsx b/src/components/sponsor/SponsorSection.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import lyftLogo from '../../assets/Lyft-Logo.wine.png'; 
-import asanaLogo from '../../assets/asana-1.png';      
-import diversityLogo from '../../assets/diversity.png'; 
-import linkedinLogo from '../../assets/linkedin.png'; 
+import asanaLogo from '../../assets/asana-logo.png';      
+import diversityLogo from '../../assets/diversity-it-logo.png'; 
+import linkedinLogo from '../../assets/LinkedIn-Logo.png'; 
 
 const sponsors = [
   { src: lyftLogo, alt: 'Lyft' },
@@ -22,36 +22,36 @@ const SponsorSection = () => {
   }, []);
 
   return (
-    <div className="w-full p-6 mt-1 rounded-lg shadow-lg bg-opacity-75" style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}>
+    <div className="w-full p-4 mt-4 rounded-lg shadow-lg bg-opacity-75 bg-cover bg-center" style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)', backgroundImage: `url('/path/to/your/background/image')` }}>
       {/* Special Thanks Section */}
-      <h3 className="text-2xl font-bold text-center text-white mb-4">
+      <h3 className="text-2xl font-bold text-center text-white mb-6">
         Special Thanks to Our Sponsors!
       </h3>
 
       {/* Sponsor Images Container */}
-      <div className="hidden md:flex justify-center space-x-4">
+      <div className="hidden md:grid grid-cols-2 lg:grid-cols-4 gap-4 justify-center">
         {sponsors.map((sponsor, index) => (
           <img
             key={index}
             src={sponsor.src}
             alt={sponsor.alt}
-            className="h-16 md:h-20 lg:h-24 object-contain"
+            className="h-16 lg:h-20 xl:h-24 object-contain mx-auto"
             style={{ filter: 'drop-shadow(2px 4px 6px black)' }}
           />
         ))}
       </div>
 
       {/* Mobile View: Rotating Sponsor */}
-      <div className="md:hidden flex justify-center mt-4">
+      <div className="md:hidden flex flex-col items-center mt-4 space-y-4">
         <img
           src={sponsors[currentSponsorIndex].src}
           alt={sponsors[currentSponsorIndex].alt}
-          className="h-16 md:h-20 lg:h-24 object-contain"
+          className="h-16 sm:h-20 md:h-24 object-contain"
           style={{ filter: 'drop-shadow(2px 4px 6px black)' }}
         />
       </div>
     </div>
   );
 };
 
-export default SponsorSection;
+export default SponsorSection;