Merge pull request #293 from LaurierHawkHacks/fix/292/anchor-for-meet…

…-the-team-is-way-too-high-up fix: anchor for meet the team has fixed
LaurierHawkHacks · Apr 15, 2024 · 5f212a1 · 5f212a1
2 parents 42bbb43 + 9e812d0
commit 5f212a1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx
@@ -11,14 +11,13 @@ const links = [
   { 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: 'The Team', href: 'team-anchor', offset: 180 },
   { title: 'Contact', href: 'contact-anchor', offset: 100 },
 ];
 
 const rowStyle = 'flex-row items-center';
 const colStyle = 'flex-col lg:p-0';
-const navbarHeightPx = 80;
-const scrollPaddingPx = -navbarHeightPx; // navbarHeight + extra padding
+const navbarHeightPx = -88;
 
 const NavItems: React.FC<NavItemsProps> = ({ isHorizontal, handleClick }) => {
   const handleLinkClick = (title: string) => {
@@ -34,7 +33,7 @@ const NavItems: React.FC<NavItemsProps> = ({ isHorizontal, handleClick }) => {
             to={link.href}
             smooth
             duration={500}
-            offset={link.offset ? -link.offset + scrollPaddingPx : scrollPaddingPx}
+            offset={link.offset ? -link.offset + navbarHeightPx : navbarHeightPx}
             className="text-md w-full"
             onClick={() => handleLinkClick(link.title)}
           >

diff --git a/src/components/sections/TeamFAQ.section.tsx b/src/components/sections/TeamFAQ.section.tsx
@@ -73,12 +73,9 @@ const TeamFAQSection = () => {
 
             <section
                 id="team"
-                className="relative isolate p-4 md:-translate-y-[10%] md:p-8 lg:p-12 xl:-translate-y-[15%]"
+                className="relative isolate mx-auto p-4 md:p-8 lg:p-12"
             >
-                <div
-                    id="team-anchor"
-                    className="relative mx-auto mb-10 w-fit sm:mb-24 lg:mb-32"
-                >
+                <div className="relative mx-auto mb-10 w-fit sm:mb-24 lg:mb-32">
                     <img
                         className="mx-auto hidden w-full max-w-fit sm:block"
                         src={MeetTheTeamBalloon}
@@ -90,10 +87,14 @@ const TeamFAQSection = () => {
                         alt=""
                     />
                     <img
-                        className="absolute bottom-0 z-10  hidden translate-y-1/2 sm:block"
+                        className="absolute bottom-0 z-10 hidden translate-y-1/2 sm:block"
                         src={Clouds}
                         alt=""
                     />
+                    <span
+                        className="anchor sr-only bottom-1/4 left-0 -translate-y-1/2"
+                        id="team-anchor"
+                    ></span>
                 </div>
 
                 <img