From 6bed307a6f56e0f4e57194c6f9995673836961cc Mon Sep 17 00:00:00 2001 From: Gabriel Diniz Date: Fri, 29 Mar 2024 12:30:45 -0400 Subject: [PATCH 01/13] Add axios for https requests --- package.json | 1 + pnpm-lock.yaml | 33 +++++++++++++++++---- src/components/sections/Contact.section.tsx | 3 +- 3 files changed, 30 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 6836e4d6..53e689fa 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5e0b90d0..b77dcf96 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: '@uidotdev/usehooks': specifier: ^2.4.1 version: 2.4.1(react-dom@18.2.0)(react@18.2.0) + axios: + specifier: ^1.6.8 + version: 1.6.8 class-variance-authority: specifier: ^0.7.0 version: 0.7.0 @@ -1506,7 +1509,6 @@ packages: /asynckit@0.4.0: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} - dev: true /autoprefixer@10.4.16(postcss@8.4.31): resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==} @@ -1531,6 +1533,16 @@ packages: possible-typed-array-names: 1.0.0 dev: true + /axios@1.6.8: + resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==} + dependencies: + follow-redirects: 1.15.6 + form-data: 4.0.0 + proxy-from-env: 1.1.0 + transitivePeerDependencies: + - debug + dev: false + /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} dev: true @@ -1696,7 +1708,6 @@ packages: engines: {node: '>= 0.8'} dependencies: delayed-stream: 1.0.0 - dev: true /commander@4.1.1: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} @@ -1821,7 +1832,6 @@ packages: /delayed-stream@1.0.0: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} - dev: true /dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} @@ -2185,6 +2195,16 @@ packages: resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==} dev: true + /follow-redirects@1.15.6: + resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + dev: false + /for-each@0.3.3: resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} dependencies: @@ -2198,7 +2218,6 @@ packages: asynckit: 0.4.0 combined-stream: 1.0.8 mime-types: 2.1.35 - dev: true /fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} @@ -2848,14 +2867,12 @@ packages: /mime-db@1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} - dev: true /mime-types@2.1.35: resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} engines: {node: '>= 0.6'} dependencies: mime-db: 1.52.0 - dev: true /mimic-fn@4.0.0: resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==} @@ -3264,6 +3281,10 @@ packages: react-is: 16.13.1 dev: false + /proxy-from-env@1.1.0: + resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} + dev: false + /psl@1.9.0: resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} dev: true diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx index 8d4314b9..32c3b205 100644 --- a/src/components/sections/Contact.section.tsx +++ b/src/components/sections/Contact.section.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { TopBorder, BottomBorder, @@ -8,6 +8,7 @@ import { BirdParts, } from '@assets'; import { SocialIcons } from '@components'; +import axios from 'axios'; const ContactSection: React.FC = () => { return ( From 00fe692258f44bbe71cbf118ec17e564b2ba338a Mon Sep 17 00:00:00 2001 From: Gabriel Diniz Date: Fri, 29 Mar 2024 13:33:39 -0400 Subject: [PATCH 02/13] Add API call to Mailchimp --- src/components/sections/Contact.section.tsx | 58 ++++++++++++++++----- 1 file changed, 46 insertions(+), 12 deletions(-) diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx index 32c3b205..525cdd02 100644 --- a/src/components/sections/Contact.section.tsx +++ b/src/components/sections/Contact.section.tsx @@ -11,6 +11,33 @@ import { SocialIcons } from '@components'; import axios from 'axios'; const ContactSection: React.FC = () => { + const [email, setEmail] = useState(''); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + try { + const response = await axios.post( + 'https://us6.api.mailchimp.com/3.0/lists/050d487d87/members', + { + email_address: email, + status: 'subscribed', + }, + { + headers: { + Authorization: `c98c4f298fa4008840f46ab61638f69d-us6`, + 'Content-Type': 'application/json', + }, + } + ); + + if (response.status === 200) { + console.log('Subscribed successfully!'); + } + } catch (error) { + console.error('Subscription error:', error); + } + }; return (
@@ -40,19 +67,26 @@ const ContactSection: React.FC = () => {
- {' '} - {/* Adjusted margin-bottom for small screens */} - - + {' '} + {/* Adjusted margin-bottom for small screens */} + setEmail(e.target.value)} + /> + +
From 0a650ed8fcf334047b472653c8d627cc2e258b8c Mon Sep 17 00:00:00 2001 From: Gabriel Diniz Date: Fri, 29 Mar 2024 13:50:27 -0400 Subject: [PATCH 03/13] Revert "Add API call to Mailchimp" This reverts commit 00fe692258f44bbe71cbf118ec17e564b2ba338a. --- src/components/sections/Contact.section.tsx | 58 +++++---------------- 1 file changed, 12 insertions(+), 46 deletions(-) diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx index 525cdd02..32c3b205 100644 --- a/src/components/sections/Contact.section.tsx +++ b/src/components/sections/Contact.section.tsx @@ -11,33 +11,6 @@ import { SocialIcons } from '@components'; import axios from 'axios'; const ContactSection: React.FC = () => { - const [email, setEmail] = useState(''); - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - - try { - const response = await axios.post( - 'https://us6.api.mailchimp.com/3.0/lists/050d487d87/members', - { - email_address: email, - status: 'subscribed', - }, - { - headers: { - Authorization: `c98c4f298fa4008840f46ab61638f69d-us6`, - 'Content-Type': 'application/json', - }, - } - ); - - if (response.status === 200) { - console.log('Subscribed successfully!'); - } - } catch (error) { - console.error('Subscription error:', error); - } - }; return (
@@ -67,26 +40,19 @@ const ContactSection: React.FC = () => {
-
+ -
+ Submit +
From 6436c91a712bb68aff6343f2fe5d55444a32cb17 Mon Sep 17 00:00:00 2001 From: Gabriel Diniz Date: Fri, 29 Mar 2024 13:50:57 -0400 Subject: [PATCH 04/13] Revert changes --- src/components/sections/Contact.section.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx index 32c3b205..8d4314b9 100644 --- a/src/components/sections/Contact.section.tsx +++ b/src/components/sections/Contact.section.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { TopBorder, BottomBorder, @@ -8,7 +8,6 @@ import { BirdParts, } from '@assets'; import { SocialIcons } from '@components'; -import axios from 'axios'; const ContactSection: React.FC = () => { return ( From 2d7c7767c520c37944e9731d3ac8e1b6d39aed05 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 14:19:22 -0400 Subject: [PATCH 05/13] fix: update a better anchor name + remove the callback that causes weird scroll issue in mobile --- src/components/Navbar/NavItems.tsx | 31 ++++++++++++------- src/components/Navbar/Navbar.tsx | 4 +-- src/components/sections/Contact.section.tsx | 7 +++-- src/components/sections/HeroStats.section.tsx | 2 +- src/components/sections/Sponsor.section.tsx | 17 +++++----- src/components/sections/TeamFAQ.section.tsx | 21 ++++++------- src/index.css | 18 +++++------ 7 files changed, 56 insertions(+), 44 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 83f63760..99d9d236 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -5,18 +5,22 @@ interface NavItemsProps { handleClick: () => void; } +// update the name of href 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' }, + { title: 'Partners', href: 'partners-anchor' }, + { title: 'FAQ', href: 'faq-anchor' }, + { title: 'The Team', href: 'team-anchor' }, + { title: 'Contact', href: 'contact-anchor' }, ]; const rowStyle = 'flex-row items-center'; const colStyle = 'flex-col lg:p-0'; -const scrollPadding = -120; +// got a hardcoded value here? +// do i want to get the value dynamically? +// maybe no need, the navbar is always 80px +const scrollPaddingPx = -80; const NavItems: React.FC = ({ isHorizontal, handleClick }) => { return ( @@ -29,10 +33,15 @@ const NavItems: React.FC = ({ isHorizontal, handleClick }) => {
  • { + console.log("hello world") + // hide the side menu + + }} + className="text-md" > {link.title} diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index b4e58509..7c501de8 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -28,9 +28,7 @@ const Navbar = () => {
    • - +
    {/* banner-holder: banner is out of flow, to prevent banner affect the desired flow, adding a placeholder banner holder when the screen is smaller */} diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx index 8d4314b9..87ad8a1a 100644 --- a/src/components/sections/Contact.section.tsx +++ b/src/components/sections/Contact.section.tsx @@ -11,7 +11,7 @@ import { SocialIcons } from '@components'; const ContactSection: React.FC = () => { return ( -
    +
    {
    -

    +

    CONTACT US

    diff --git a/src/components/sections/HeroStats.section.tsx b/src/components/sections/HeroStats.section.tsx index 53efa326..075f8df2 100644 --- a/src/components/sections/HeroStats.section.tsx +++ b/src/components/sections/HeroStats.section.tsx @@ -82,7 +82,7 @@ const HeroStatSection: React.FC = () => {

    About Hawkhacks

    diff --git a/src/components/sections/Sponsor.section.tsx b/src/components/sections/Sponsor.section.tsx index 032d5476..52da5556 100644 --- a/src/components/sections/Sponsor.section.tsx +++ b/src/components/sections/Sponsor.section.tsx @@ -25,10 +25,7 @@ import { const SponsorFAQSection = () => { return (
    -
    +
    Top Border { />
    -
    +
    SPONSORS
    @@ -152,8 +152,11 @@ const SponsorFAQSection = () => { />
    -
    -
    +
    +
    PARTNERS
    diff --git a/src/components/sections/TeamFAQ.section.tsx b/src/components/sections/TeamFAQ.section.tsx index bba14a57..f035bfdc 100644 --- a/src/components/sections/TeamFAQ.section.tsx +++ b/src/components/sections/TeamFAQ.section.tsx @@ -43,16 +43,16 @@ const Department: React.FC = ({ 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 (
    -
    +
    -

    +

    FAQ

    @@ -62,12 +62,11 @@ const TeamSection = () => {
    -
    - {/* remove the overflow, and set negative offset works like a charm */} -
    +
    +
    * { - 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; } } From 2635f931c9c90242a9e911ca7f52ef52285736c5 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 14:22:19 -0400 Subject: [PATCH 06/13] Fix add extra scroll padding --- src/components/Navbar/NavItems.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 99d9d236..f0813776 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -17,10 +17,8 @@ const links = [ const rowStyle = 'flex-row items-center'; const colStyle = 'flex-col lg:p-0'; -// got a hardcoded value here? -// do i want to get the value dynamically? -// maybe no need, the navbar is always 80px -const scrollPaddingPx = -80; +const navbarHeightPx = 80; +const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding const NavItems: React.FC = ({ isHorizontal, handleClick }) => { return ( @@ -37,9 +35,9 @@ const NavItems: React.FC = ({ isHorizontal, handleClick }) => { duration={500} offset={scrollPaddingPx} onClick={() => { - console.log("hello world") - // hide the side menu - + console.log('hello world'); + // hide the side menu + // hideMenu() }} className="text-md" > From 5ec1e5b6e169c6a2fdaee583e757bcb8e42ca3e6 Mon Sep 17 00:00:00 2001 From: Gabriel Diniz Date: Fri, 29 Mar 2024 14:49:50 -0400 Subject: [PATCH 07/13] Implement: subscribe button --- src/components/sections/Contact.section.tsx | 40 ++++++++++----------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx index 8d4314b9..0628e47f 100644 --- a/src/components/sections/Contact.section.tsx +++ b/src/components/sections/Contact.section.tsx @@ -1,15 +1,17 @@ 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) => { + e.preventDefault(); // Prevent default form submission behavior + openInNewTab('http://eepurl.com/hDHf8b'); + }; return (
    @@ -38,20 +40,14 @@ const ContactSection: React.FC = () => { Sign up for our newsletter!
    -
    - {' '} - {/* Adjusted margin-bottom for small screens */} - - + Newsletter +
    From 41139fb18052dfd86606ed2c4cb8c8c244cfc4c9 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 14:56:02 -0400 Subject: [PATCH 08/13] fix: remove the onclick listener --- src/components/Navbar/NavItems.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index f0813776..3aaba700 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -20,7 +20,7 @@ const colStyle = 'flex-col lg:p-0'; const navbarHeightPx = 80; const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding -const NavItems: React.FC = ({ isHorizontal, handleClick }) => { +const NavItems: React.FC = ({ isHorizontal }) => { return (
      = ({ isHorizontal, handleClick }) => { }`} > {links.map((link) => ( -
    • +
    • console.log("do something")}> { - console.log('hello world'); - // hide the side menu - // hideMenu() - }} - className="text-md" + className="text-md w-full border" > {link.title} From 58509f733080234c4bc4a8e65ad1f85bce44edbc Mon Sep 17 00:00:00 2001 From: Gabriel Diniz Date: Fri, 29 Mar 2024 14:57:44 -0400 Subject: [PATCH 09/13] Rename button to Subscribe --- src/components/sections/Contact.section.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx index 0628e47f..389b57c6 100644 --- a/src/components/sections/Contact.section.tsx +++ b/src/components/sections/Contact.section.tsx @@ -46,7 +46,7 @@ const ContactSection: React.FC = () => { onClick={handleSubmit} className="inset-y-0 flex w-1/3 justify-center rounded-r-lg px-4 sm:w-2/3 sm:justify-start" > - Newsletter + Subscribe
    From 5b591f7df86721add6c1b045fbd6aac8dbd562f7 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 15:22:45 -0400 Subject: [PATCH 10/13] fix: remove extra stuff --- src/components/Navbar/NavItems.tsx | 12 ++++++++++-- src/components/sections/TeamFAQ.section.tsx | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 3aaba700..4f193b10 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -20,6 +20,14 @@ const colStyle = 'flex-col lg:p-0'; const navbarHeightPx = 80; const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding +/** +if href is team anchor, +then increase the offset +otherwise +keep them the same + +*/ + const NavItems: React.FC = ({ isHorizontal }) => { return (
      = ({ isHorizontal }) => { }`} > {links.map((link) => ( -
    • console.log("do something")}> +
    • {link.title} diff --git a/src/components/sections/TeamFAQ.section.tsx b/src/components/sections/TeamFAQ.section.tsx index f035bfdc..f93a22ab 100644 --- a/src/components/sections/TeamFAQ.section.tsx +++ b/src/components/sections/TeamFAQ.section.tsx @@ -64,8 +64,8 @@ const TeamSection = () => {
      Date: Fri, 29 Mar 2024 15:46:44 -0400 Subject: [PATCH 11/13] Fix: put back the handleClick function --- src/components/Navbar/NavItems.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 4f193b10..131d67f4 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -5,7 +5,6 @@ interface NavItemsProps { handleClick: () => void; } -// update the name of href const links = [ { title: 'About', href: 'about-anchor' }, { title: 'Sponsors', href: 'sponsors-anchor' }, @@ -20,15 +19,8 @@ const colStyle = 'flex-col lg:p-0'; const navbarHeightPx = 80; const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding -/** -if href is team anchor, -then increase the offset -otherwise -keep them the same -*/ - -const NavItems: React.FC = ({ isHorizontal }) => { +const NavItems: React.FC = ({ isHorizontal, handleClick }) => { return (
        = ({ isHorizontal }) => { duration={500} offset={scrollPaddingPx} className="text-md w-full" + onClick={handleClick} > {link.title} From a1ed7164196243157ce4759b30ffff6ba6367093 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 16:30:03 -0400 Subject: [PATCH 12/13] Fix: make the about us anchor specifically be centred to the section --- src/components/Navbar/NavItems.tsx | 3 +-- src/components/sections/HeroStats.section.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index 131d67f4..e52dfd81 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -17,8 +17,7 @@ const links = [ const rowStyle = 'flex-row items-center'; const colStyle = 'flex-col lg:p-0'; const navbarHeightPx = 80; -const scrollPaddingPx = -(navbarHeightPx + 20); // navbarHeight + extra padding - +const scrollPaddingPx = -navbarHeightPx; // navbarHeight + extra padding const NavItems: React.FC = ({ isHorizontal, handleClick }) => { return ( diff --git a/src/components/sections/HeroStats.section.tsx b/src/components/sections/HeroStats.section.tsx index 075f8df2..4275de88 100644 --- a/src/components/sections/HeroStats.section.tsx +++ b/src/components/sections/HeroStats.section.tsx @@ -79,11 +79,11 @@ const HeroStatSection: React.FC = () => {

    -
    -

    +
    +

    About Hawkhacks

    From 98cedafc4abc0b641d10a67cdd1d34e696572837 Mon Sep 17 00:00:00 2001 From: Chee Kian Teoh Date: Fri, 29 Mar 2024 16:41:30 -0400 Subject: [PATCH 13/13] fix: make other sections' anchors to be at the good position --- src/components/Navbar/NavItems.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/Navbar/NavItems.tsx b/src/components/Navbar/NavItems.tsx index e52dfd81..e07d9af6 100644 --- a/src/components/Navbar/NavItems.tsx +++ b/src/components/Navbar/NavItems.tsx @@ -7,11 +7,11 @@ interface NavItemsProps { const links = [ { title: 'About', href: 'about-anchor' }, - { title: 'Sponsors', href: 'sponsors-anchor' }, - { title: 'Partners', href: 'partners-anchor' }, - { title: 'FAQ', href: 'faq-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' }, + { title: 'Contact', href: 'contact-anchor', offset: 500 }, ]; const rowStyle = 'flex-row items-center'; @@ -32,7 +32,11 @@ const NavItems: React.FC = ({ isHorizontal, handleClick }) => { to={link.href} smooth duration={500} - offset={scrollPaddingPx} + offset={ + link.offset + ? -link.offset + scrollPaddingPx + : scrollPaddingPx + } className="text-md w-full" onClick={handleClick} >