Merge pull request #191 from LaurierHawkHacks/fix/179/fix-navbar-links

fix: make sure the navbar links are linking to the right places

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: 500 },
 ];
 
 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

@@ -13,7 +13,7 @@ const ContactSection: React.FC = () => {
         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}
@@ -26,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">

src/components/sections/HeroStats.section.tsx

@@ -79,11 +79,11 @@ const HeroStatSection: React.FC = () => {
                         </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

@@ -25,10 +25,7 @@ import {
 const SponsorFAQSection = () => {
     return (
         <div>
-            <section
-                id="sponsors-section"
-                className="sponsor-section relative z-20"
-            >
+            <section className="sponsor-section relative z-20">
                 <img src={TopBorder} alt="Top Border" className="z-10 w-full" />
                 <img
                     src={Hawk}
@@ -48,7 +45,10 @@ const SponsorFAQSection = () => {
                     />
                     <div className="absolute bottom-0 left-0 right-0 top-6 flex flex-col items-center space-y-6 pt-[110px] sm:space-y-12">
                         <div className="absolute left-1/2 top-6 -translate-x-1/2 transform">
-                            <div className="font-raleway vs:text-[60px] text-center text-[50px] font-black leading-[117px] tracking-widest text-[#404040] drop-shadow-lg sm:text-[80px]">
+                            <div
+                                id="sponsors-anchor"
+                                className="font-raleway vs:text-[60px] text-center text-[50px] font-black leading-[117px] tracking-widest text-[#404040] drop-shadow-lg sm:text-[80px]"
+                            >
                                 SPONSORS
                             </div>
                         </div>
@@ -152,8 +152,11 @@ const SponsorFAQSection = () => {
                                 />
                             </div>
                         </div>
-                        <div className="mt-20" id="partners-section">
-                            <div className="font-raleway vs:text-[60px] mt-6 text-center text-[50px] font-black leading-[117px] tracking-widest text-[#404040] drop-shadow-lg sm:text-[80px]">
+                        <div className="mt-20">
+                            <div
+                                className="font-raleway vs:text-[60px] mt-6 text-center text-[50px] font-black leading-[117px] tracking-widest text-[#404040] drop-shadow-lg sm:text-[80px]"
+                                id="partners-anchor"
+                            >
                                 PARTNERS
                             </div>
                             <div className="flex flex-wrap items-center justify-center gap-3">

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"

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;
     }
 }