Merge branch 'main' into 154-fix-sponsorship-section-style-improvement

package.json

@@ -14,6 +14,7 @@
     "dependencies": {
         "@types/node": "^20.11.24",
         "@uidotdev/usehooks": "^2.4.1",
+        "axios": "^1.6.8",
         "class-variance-authority": "^0.7.0",
         "hamburger-react": "^2.5.0",
         "react": "^18.2.0",

src/components/Navbar/NavItems.tsx

@@ -6,17 +6,18 @@ interface NavItemsProps {
 }
 
 const links = [
-    { title: 'About', href: 'about-section' },
-    { title: 'Sponsors', href: 'sponsors-section' },
-    { title: 'Partners', href: 'partners-section' },
-    { title: 'FAQ', href: 'faq-section' },
-    { title: 'The Team', href: 'team-section' },
-    { title: 'Contact', href: 'contact-section' },
+    { title: 'About', href: 'about-anchor' },
+    { title: 'Sponsors', href: 'sponsors-anchor', offset: 200 },
+    { title: 'Partners', href: 'partners-anchor', offset: 20 },
+    { title: 'FAQ', href: 'faq-anchor', offset: 120 },
+    { title: 'The Team', href: 'team-anchor' },
+    { title: 'Contact', href: 'contact-anchor', offset: 100 },
 ];
 
 const rowStyle = 'flex-row items-center';
 const colStyle = 'flex-col lg:p-0';
-const scrollPadding = -120;
+const navbarHeightPx = 80;
+const scrollPaddingPx = -navbarHeightPx; // navbarHeight + extra padding
 
 const NavItems: React.FC<NavItemsProps> = ({ isHorizontal, handleClick }) => {
     return (
@@ -29,10 +30,15 @@ const NavItems: React.FC<NavItemsProps> = ({ isHorizontal, handleClick }) => {
                 <li key={link.title}>
                     <Link
                         to={link.href}
-                        smooth duration={500}
-                        offset={scrollPadding}
+                        smooth
+                        duration={500}
+                        offset={
+                            link.offset
+                                ? -link.offset + scrollPaddingPx
+                                : scrollPaddingPx
+                        }
+                        className="text-md w-full"
                         onClick={handleClick}
-                        className="link-hover--two text-md"
                     >
                         {link.title}
                     </Link>

src/components/Navbar/Navbar.tsx

@@ -28,9 +28,7 @@ const Navbar = () => {
             </div>
 
             <div className="portal-btn hidden transition-all duration-500 ease-in-out lg:mr-32 lg:block">
-                <Button className="xl:px-6 xl:py-3">
-                    Application Portal
-                </Button>
+                <Button className="xl:px-6 xl:py-3">Application Portal</Button>
             </div>
 
             {/* banner-holder: banner is out of flow, to prevent banner affect the desired flow, adding a placeholder banner holder when the screen is smaller  */}

src/components/sections/Contact.section.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
-import {
-    TopBorder,
-    BottomBorder,
-    MiddleBody,
-    ArrowRightIcon,
-    Hawk,
-    BirdParts,
-} from '@assets';
-import { SocialIcons } from '@components';
+import { TopBorder, BottomBorder, MiddleBody, Hawk, BirdParts } from '@assets';
+import { Button, SocialIcons } from '@components';
 
 const ContactSection: React.FC = () => {
+    const openInNewTab = (url: string) => {
+        const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+        if (newWindow) newWindow.opener = null;
+    };
+
+    const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault(); // Prevent default form submission behavior
+        openInNewTab('http://eepurl.com/hDHf8b');
+    };
     return (
-        <section className="contact-section relative z-10">
+        <section className="relative z-10">
             <img src={TopBorder} className="z-0 w-full" />
             <img
                 src={Hawk}
@@ -24,7 +26,10 @@ const ContactSection: React.FC = () => {
 
             <div className="absolute inset-x-0 z-10 mx-auto max-w-4xl px-4 pt-10 sm:pt-16 md:px-8 md:pt-20 lg:px-12 lg:pt-32 xl:pt-32">
                 <div className="contact-info mb-2 text-center sm:mb-4 sm:text-left md:mb-6 lg:mb-12">
-                    <h2 className="font-raleway text-2xl font-extrabold leading-tight tracking-wider text-[#32848C] sm:text-4xl md:text-5xl lg:text-8xl">
+                    <h2
+                        id="contact-anchor"
+                        className="font-raleway text-2xl font-extrabold leading-tight tracking-wider text-[#32848C] sm:text-4xl md:text-5xl lg:text-8xl"
+                    >
                         CONTACT US
                     </h2>
                     <p className="text-md lg:text-lg xl:mt-9">
@@ -38,20 +43,14 @@ const ContactSection: React.FC = () => {
                         Sign up for our newsletter!
                     </h3>
                     <div className="mt-2 flex flex-col items-center sm:items-start md:mt-4">
-                        <div className="relative mb-4 w-full sm:mb-6 sm:w-1/2 lg:max-w-lg">
-                            {' '}
-                            {/* Adjusted margin-bottom for small screens */}
-                            <input
-                                type="email"
-                                placeholder="Enter your email"
-                                className="h-12 w-full rounded-lg border-2 border-gray-400 bg-white pl-4 pr-12 text-sm focus:outline-none"
-                            />
-                            <button
-                                type="submit"
-                                className="absolute inset-y-0 right-0 flex w-12 items-center justify-center rounded-r-lg px-4 shadow-none focus:bg-transparent focus:outline-none"
+                        <div className="relative mb-4 flex w-full justify-center sm:mb-6 sm:w-1/2 sm:justify-start lg:max-w-lg">
+                            <Button
+                                type="button" // Changed to type="button" to prevent form submission
+                                onClick={handleSubmit}
+                                className="inset-y-0 flex w-1/3 justify-center rounded-r-lg px-4 sm:w-2/3 sm:justify-start"
                             >
-                                <img src={ArrowRightIcon} alt="Submit" />
-                            </button>
+                                Subscribe
+                            </Button>
                         </div>
                         <div className="pt-2 sm:pt-4">
                             <SocialIcons color="#32848C" />

src/components/sections/HeroStats.section.tsx

@@ -56,10 +56,9 @@ const HeroStatSection: React.FC = () => {
                     alt="Hawkhacks stats"
                     className="block w-full sm:hidden"
                 />
-                {/*  */}
-                <div className="px-4 sm:px-0 space-y-1 pb-4 pl-10 text-left sm:pl-24 sm:pt-12 lg:pl-16 lg:pt-16 2xl:pl-60 2xl:pt-24">
+                <div className="mt-16 px-4 sm:ml-16 sm:mt-16 sm:px-0 lg:ml-20 lg:mt-24 xl:ml-24 xl:mt-32 2xl:mt-10">
                     <img
-                        className="inline-block aspect-square w-16 sm:mx-0 lg:w-28 xl:w-32 2xl:w-52"
+                        className="hidden aspect-square sm:mb-4 sm:block sm:w-28 lg:mb-10 xl:w-36 2xl:w-60"
                         src={HawkHacksLogo}
                         alt="Hawkhacks logo"
                     />
@@ -73,18 +72,18 @@ const HeroStatSection: React.FC = () => {
                     </div>
                     <div>
                         <p className="text-xl font-bold text-[#2B6469] sm:hidden sm:text-2xl">
-                            April 5th - 7th
+                            May 17 - 19
                         </p>
                         <p className="text-xl font-bold text-[#2B6469] sm:hidden sm:text-2xl">
                             In Person
                         </p>
                     </div>
                 </div>
-                <div className="absolute left-1/2 top-2/3 w-2/3 -translate-x-1/2 -translate-y-1/2 transform text-[#1D4549] sm:top-[70%] md:top-3/4 ">
-                    <h1
-                        className="mb-5 text-center text-4.5xl uppercase drop-shadow-md lg:text-6.5xl xl:text-7.5xl"
-                        id="about-section"
-                    >
+                <div
+                    id="about-anchor"
+                    className="absolute left-1/2 top-2/3 w-2/3 -translate-x-1/2 -translate-y-1/2 transform pt-24 text-[#1D4549] sm:top-[70%] sm:pt-36 md:top-3/4 md:pt-36 "
+                >
+                    <h1 className="mb-5 text-center text-4.5xl uppercase drop-shadow-md lg:text-6.5xl xl:text-7.5xl">
                         About Hawkhacks
                     </h1>
                     <div className="space-y-3 text-center text-[#1D4549] lg:space-y-10">

src/components/sections/Sponsor.section.tsx

@@ -275,4 +275,4 @@ const SponsorFAQSection = () => {
   );
 };
 
-export { SponsorFAQSection };
+export { SponsorFAQSection };

src/components/sections/TeamFAQ.section.tsx

@@ -43,16 +43,16 @@ const Department: React.FC<DepartmentProps> = ({ title, members }) => {
     );
 };
 
-// the naming is confusing...
-// faq section first, but the meet the team banner is within faq section...
-// not separate enough...
 const TeamSection = () => {
     return (
         <div className="bg-brightUbe">
-            <section id="faq-section" className="stacked -mb-24 bg-cover">
+            <section className="stacked -mb-24 bg-cover">
                 <img src={FaqBackground} alt="" className="w-full" />
                 <div className="container mx-auto px-4">
-                    <h2 className="mt-20 text-center font-bold text-white drop-shadow-md md:mt-32">
+                    <h2
+                        id="faq-anchor"
+                        className="mt-20 text-center font-bold text-white drop-shadow-md md:mt-32"
+                    >
                         FAQ
                     </h2>
 
@@ -62,12 +62,11 @@ const TeamSection = () => {
                 </div>
             </section>
 
-            <section
-                id="team-section"
-                className="relative isolate p-4 md:p-8 lg:p-12 md:-translate-y-[10%] xl:-translate-y-[15%]"
-            >
-                {/* remove the overflow, and set negative offset works like a charm */}
-                <div className="relative mx-auto mb-10 w-fit sm:mb-24 lg:mb-32">
+            <section className="relative isolate p-4 md:-translate-y-[10%] md:p-8 lg:p-12 xl:-translate-y-[15%]">
+                <div
+                    id="team-anchor"
+                    className="relative mx-auto mb-10 w-fit sm:mb-24 lg:mb-32"
+                >
                     <img
                         className="mx-auto w-full max-w-fit sm:hidden"
                         src="src/assets/team/meet-the-team-banner.webp"
@@ -86,7 +85,7 @@ const TeamSection = () => {
                 </div>
 
                 <img
-                    className="absolute right-0 -z-10 hidden translate-x-1/3 lg:block 2xl:translate-x-32"
+                    className="absolute right-0 -z-10 hidden lg:block "
                     src="src/assets/team/meet-the-team-building-right.svg"
                     alt=""
                 />

src/components/sections/data/faqData.ts

@@ -5,7 +5,7 @@ const faqData = [
     },
     {
         question: '🕒 When and where is HawkHacks happening?',
-        answer: 'HawkHacks will take place for 36 hours, starting on some day idk, Some day @ 6PM EDT all the way till Someday @ 2PM EDT.  \\n HawkHacks is a fully in-person event, meaning everything will be hosted and managed at Wilfrid Laurier University!',
+        answer: 'HawkHacks will take place for 36 hours, starting on May 17 @ 6PM EDT all the way till May 19 @ 2PM EDT.  \\n HawkHacks is a fully in-person event, meaning everything will be hosted and managed at Wilfrid Laurier University!',
     },
     {
         question: '💰 How much does it cost?',

src/index.css

@@ -8,7 +8,7 @@ body {
     font-variant-numeric: lining-nums;
     font-feature-settings: 'lnum' 1;
     font-weight: 600;
-    background-color: #FDDDB7;
+    background-color: #fdddb7;
 }
 
 @layer base {
@@ -38,7 +38,7 @@ body {
     }
 
     button {
-        @apply w-full rounded-lg border-black bg-[#2B6469] p-4 text-white shadow-[2px_2px_0px_0px_black] hover:bg-[#3F9098]/90 focus:bg-[#3F9098] focus:shadow-none transition-shadow;
+        @apply w-full rounded-lg border-black bg-[#2B6469] p-4 text-white shadow-[2px_2px_0px_0px_black] transition-shadow hover:bg-[#3F9098]/90 focus:bg-[#3F9098] focus:shadow-none;
     }
 }
 
@@ -55,21 +55,21 @@ body {
 
 @layer utilities {
     .stacked {
-      display: grid;
+        display: grid;
     }
 
     .stacked > * {
-      grid-column: 1 / -1;
-      grid-row: 1 / -1;
+        grid-column: 1 / -1;
+        grid-row: 1 / -1;
     }
 
     .stacked > .media {
-      z-index: -1;
-      width: 100%;
-      height: 100%;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
     }
 
     .place-items-end-center {
-      place-items: end center;
+        place-items: end center;
     }
 }