From 376b3bf6efb7fb49bf165bfee38c82e55ce293db Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 16 Nov 2024 18:14:46 -0800 Subject: [PATCH 1/8] Main Navbar logic working --- .../_components/Navbar/Navbar.module.scss | 45 ++++++++ app/(pages)/_components/Navbar/Navbar.tsx | 102 ++++++++++++++++-- app/(pages)/page.tsx | 26 ++++- public/icons/white_logo.svg | 6 ++ 4 files changed, 169 insertions(+), 10 deletions(-) create mode 100644 app/(pages)/_components/Navbar/Navbar.module.scss create mode 100644 public/icons/white_logo.svg diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss new file mode 100644 index 0000000..8879b10 --- /dev/null +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -0,0 +1,45 @@ +.content { + position: fixed; + top: 0; + left: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 32px; + background-color: transparent; + transition: background-color 0.6s ease, box-shadow 0.6s ease; + z-index: 1000; + background-color: #2BC0F1; // TODO: This is a placeholder so that it can be seen on white backgrounds until the main hero section comes in + // Comment out once main background is in. + + &.scrolled { + background-color: rgba(4, 102, 101, 0.415); // TODO: NEEDS TO BE CHANGED + backdrop-filter: blur(10px); + } + } + + .navLinks { + display: flex; + gap: 24px; + + .navLink { + cursor: pointer; + font-size: 16px; + font-weight: 400; + color: #ffffff; + text-decoration: none; + transition: color 0.3s; + + &:hover { + color: #9EE7E5; + } + + &.active { + color: #9EE7E5; // Active section color + font-weight: 700; + text-decoration: underline; + } + } + } + \ No newline at end of file diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index 21b61a7..c84d383 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -1,7 +1,95 @@ -export default function Navbar(){ - return ( -
- halo! Edit this navbar in app/(pages)/_components/Navbar/Navbar.tsx -
- ) -} \ No newline at end of file +'use client'; + +import { useState, useEffect } from 'react'; +import Image from 'next/image'; +import styles from './Navbar.module.scss'; +import WhiteLogo from '/public/icons/white_logo.svg'; + +export default function Navbar() { + const [activeSection, setActiveSection] = useState(''); + const [isScrolled, setIsScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => { + const scrollPosition = window.scrollY; + setIsScrolled(scrollPosition > 150); // Apply "scrolled" class after 150px + + const sections = ['about', 'faq', 'sponsors']; + let newActiveSection = ''; + + let closestDistance = Infinity; + let closestSection = ''; + + sections.forEach((section) => { + const element = document.getElementById(section); + if (element) { + const { offsetTop, offsetHeight } = element; + const sectionStart = offsetTop; + const sectionEnd = offsetTop + offsetHeight; + + // Check if scroll position is within this section's range + if (scrollPosition >= sectionStart - 100 && scrollPosition < sectionEnd - 100) { + newActiveSection = section; + } + + // Calculate distance to section if it's not the active section + const distance = Math.abs(scrollPosition - (sectionStart + sectionEnd) / 2); + if (distance < closestDistance) { + closestDistance = distance; + closestSection = section; + } + } + }); + + // If no section is fully in view, highlight the closest one + setActiveSection(newActiveSection || closestSection); + }; + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + const scrollToSection = (sectionId: string) => { + const section = document.getElementById(sectionId); + if (section) { + section.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }; + + return ( +
+
+ White HackDavis Logo +
+
+

scrollToSection('about')} + className={`${styles.navLink} ${ + activeSection === 'about' ? styles.active : '' + }`} + > + ABOUT +

+

scrollToSection('faq')} + className={`${styles.navLink} ${ + activeSection === 'faq' ? styles.active : '' + }`} + > + FAQ +

+

scrollToSection('sponsors')} + className={`${styles.navLink} ${ + activeSection === 'sponsors' ? styles.active : '' + }`} + > + SPONSORS +

+
+
+ ); +} diff --git a/app/(pages)/page.tsx b/app/(pages)/page.tsx index b136f79..a0d7d6a 100644 --- a/app/(pages)/page.tsx +++ b/app/(pages)/page.tsx @@ -1,9 +1,29 @@ export default function Home() { return (
-

Halo! Welcome to the HackDavis template repo :D

-

Halo! Welcome to the HackDavis template repo :D

-

Halo! Welcome to the HackDavis template repo :D

+ {/* Intro Section */} +

+ Halo! Welcome to the HackDavis template repo :D +

+

+ Halo! Welcome to the HackDavis template repo :D +

+

+ Halo! Welcome to the HackDavis template repo :D +

+ + {/* Sections for Testing */} +
+

About Section

+
+ +
+

FAQ Section

+
+ +
+

Sponsors Section

+
); } diff --git a/public/icons/white_logo.svg b/public/icons/white_logo.svg new file mode 100644 index 0000000..d2c33f3 --- /dev/null +++ b/public/icons/white_logo.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file From 1c70f6713ead7ee9aaa5ec0d2d30ba8b2e0bdf70 Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 16 Nov 2024 18:49:26 -0800 Subject: [PATCH 2/8] Add Footer --- .../_components/Footer/Footer.module.scss | 203 ++++++++++++++++++ app/(pages)/_components/Footer/Footer.tsx | 110 +++++++++- package-lock.json | 65 +++++- package.json | 3 + public/Footer/arrowUp.svg | 4 + public/Footer/hdLogoMotto.svg | 31 +++ public/Footer/hdLogoMottoUpdated.svg | 4 + public/Footer/hdLogoWhite.svg | 7 + 8 files changed, 418 insertions(+), 9 deletions(-) create mode 100644 app/(pages)/_components/Footer/Footer.module.scss create mode 100644 public/Footer/arrowUp.svg create mode 100644 public/Footer/hdLogoMotto.svg create mode 100644 public/Footer/hdLogoMottoUpdated.svg create mode 100644 public/Footer/hdLogoWhite.svg diff --git a/app/(pages)/_components/Footer/Footer.module.scss b/app/(pages)/_components/Footer/Footer.module.scss new file mode 100644 index 0000000..fd1850b --- /dev/null +++ b/app/(pages)/_components/Footer/Footer.module.scss @@ -0,0 +1,203 @@ +$footer-color: rgba(18, 38, 55, 1); +$brand-icon-color: white; + +// css styling for the desktop view +.container { + width: 100%; + min-height: 240px; + display: flex; + flex-direction: row; + background: $footer-color; + align-items: center; + justify-content: space-evenly; + padding-top: 30px; + padding-bottom: 20px; + gap: 10px; + + .hackdavisLogo { + display: flex; + flex-direction: row; + align-items: center; + gap: 23.48px; + + .hdLogoWhite { + height: 72px; + width: 72px; + } + } +} + + .socialContent { + display: flex; + flex-direction: column; + gap: 10px; + width: 27vw; + align-items: center; + + .brandIcons { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 420px; + padding-top: 10px; + + .singleIcon { // used for most of the brand icons + max-width: 30px; + width: 59%; + color:$brand-icon-color; + } + .mediumIcon { // used for most of the brand icons + max-width: 40px; + width: 59%; + color:$brand-icon-color; + } + .discordIcon { // used for most of the brand icons + max-width: 40px; + width: 59%; + color:$brand-icon-color; + } + + .fbIcon { // fb icon is larger than the rest so it needs smaller size + max-width: 17px; + width: 7%; + color:$brand-icon-color; + } + } + + .copyright { + font-family: 'Metropolis'; + color:white; + font-size: 14px; + } + } + .arrowToTop { + display: flex; + flex-direction: row; + color:white; + gap: 8px; + align-items: center; + cursor: pointer; + transition: transform 0.2s ease-in-out; + + &:hover{ + transform: scale(1.1); + } + + .backToTopText { + font-size: 16px; + font-family: 'Metropolis'; + font-family: 'Metropolis'; + } + } + + +@media (max-width: 870px) { + // css styling for mobile view +.container { + position: relative; + width: 100%; + min-height: 188px; + display: flex; + flex-direction: column; + background: $footer-color; + align-items: center; + justify-content: space-around; + padding-top: 30px; + padding-bottom: 30px; + gap: 19.54px; + + .hackdavisLogo { + display: flex; + flex-direction: row; + align-items: center; + gap: 23.48px; + margin-top: 30px; + + .hdLogoWhite { + height: 72px; + width: 72px; + } + .hdMottoWhite { + height: 55px; + width: 176px; + } + + } + + .socialContent { + display: flex; + flex-direction: column; + gap: 10px; + width: 50vw; + align-items: center; + + .brandIcons { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + width: 100%; + max-width: 420px; + padding-top: 10px; + + .singleIcon { // used for most of the brand icons + max-width: 30px; + width: 8%; + color:$brand-icon-color; + + } + + .mediumIcon { // used for most of the brand icons + max-width: 40px; + width: 11%; + color:$brand-icon-color; + } + .discordIcon { // used for most of the brand icons + max-width: 40px; + width: 11%; + color:$brand-icon-color; + } + + .fbIcon { // fb icon is larger than the rest so it needs smaller size + max-width: 17px; + width: 5%; + color:$brand-icon-color; + } + } + + .copyright { + font-family: 'Metropolis'; + color:white; + font-size: 8px; + } + } + + .arrowToTop { + position: absolute; + top: 18px; + right: 31px; + display: flex; + flex-direction: row; + color:white; + gap: 8px; + align-items: center; + cursor: pointer; + transition: transform 0.2s ease-in-out; + font-size: 1px; + margin-top: 2%; + + margin-top: 2%; + + + &:hover{ + transform: scale(1.1); + } + + .backToTopText { + font-size: 12px; + } + } +} +} diff --git a/app/(pages)/_components/Footer/Footer.tsx b/app/(pages)/_components/Footer/Footer.tsx index 9403ea9..d83ea7e 100644 --- a/app/(pages)/_components/Footer/Footer.tsx +++ b/app/(pages)/_components/Footer/Footer.tsx @@ -1,7 +1,105 @@ -export default function Footer(){ - return ( -
- halo! Edit this footer in app/(pages)/_components/Footer/Footer.tsx +'use client'; +import styles from './Footer.module.scss'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faEnvelope } from '@fortawesome/free-solid-svg-icons'; +import { + faMedium, + faFacebookF, + faTwitter, + faInstagram, + faDiscord, +} from '@fortawesome/free-brands-svg-icons'; +import Image from 'next/image'; +import { config } from '@fortawesome/fontawesome-svg-core'; +config.autoAddCss = false; + +const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); +}; + +export default function Footer() { + return ( +
+
+ hackdavis Logo + hackdavis name and motto +
+
+ - ) -} \ No newline at end of file +

+ © 2024 HackDavis • Made with ☕️ & 💛 in Davis +

+
+
+

BACK TO TOP

+ arrow up +
+
+ ); +} diff --git a/package-lock.json b/package-lock.json index dfb1481..f130e1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "nextjs-app-router-template", "version": "0.1.0", "dependencies": { + "@fortawesome/free-brands-svg-icons": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.2.2", "autoprefixer": "^10.4.20", "next": "14.2.4", "react": "^18", @@ -101,6 +104,65 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz", + "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==", + "license": "MIT", + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz", + "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -3895,7 +3957,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -4381,7 +4442,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -4449,7 +4509,6 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/read-cache": { diff --git a/package.json b/package.json index e3ac61b..05321b8 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,9 @@ "lint": "next lint" }, "dependencies": { + "@fortawesome/free-brands-svg-icons": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.2.2", "autoprefixer": "^10.4.20", "next": "14.2.4", "react": "^18", diff --git a/public/Footer/arrowUp.svg b/public/Footer/arrowUp.svg new file mode 100644 index 0000000..66751a7 --- /dev/null +++ b/public/Footer/arrowUp.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/Footer/hdLogoMotto.svg b/public/Footer/hdLogoMotto.svg new file mode 100644 index 0000000..7959832 --- /dev/null +++ b/public/Footer/hdLogoMotto.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/Footer/hdLogoMottoUpdated.svg b/public/Footer/hdLogoMottoUpdated.svg new file mode 100644 index 0000000..0b114a5 --- /dev/null +++ b/public/Footer/hdLogoMottoUpdated.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/Footer/hdLogoWhite.svg b/public/Footer/hdLogoWhite.svg new file mode 100644 index 0000000..ac3296f --- /dev/null +++ b/public/Footer/hdLogoWhite.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file From c1f34959dfef05216351cceb9e659fc211b423f3 Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 16 Nov 2024 18:49:39 -0800 Subject: [PATCH 3/8] Nav Fix --- .../_components/Navbar/Navbar.module.scss | 45 +++++++++++++------ 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss index 8879b10..fdcfc63 100644 --- a/app/(pages)/_components/Navbar/Navbar.module.scss +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -1,34 +1,51 @@ .content { position: fixed; - top: 0; + top: 38px; /* Initial gap from the top */ left: 0; width: 100%; + height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background-color: transparent; - transition: background-color 0.6s ease, box-shadow 0.6s ease; + transition: background-color 0.6s ease, box-shadow 0.6s ease, top 0.6s ease; z-index: 1000; - background-color: #2BC0F1; // TODO: This is a placeholder so that it can be seen on white backgrounds until the main hero section comes in - // Comment out once main background is in. - + background-color: #2BC0F1; // Temporary background color until hero text comes in + + // This will ensure that the background spans the entire width of the page + background-size: cover; + background-position: center; + &.scrolled { - background-color: rgba(4, 102, 101, 0.415); // TODO: NEEDS TO BE CHANGED + background-color: rgba(4, 102, 101, 0.415); // Updated background color when scrolled backdrop-filter: blur(10px); + top: 0; } - } - .navLinks { - display: flex; - gap: 24px; + .hdIcon { + img { + width: 50px; + height: 50px; + } + } + .navLinks { + display: flex; + align-items: center; + gap: 48px; + align-self: stretch; + } + .navLink { - cursor: pointer; - font-size: 16px; + color: #FFF; + text-align: center; + font-family: var(--font-family-Body); + font-size: var(--Med, 18px); + font-style: normal; font-weight: 400; - color: #ffffff; - text-decoration: none; + line-height: 100%; /* 18px */ + letter-spacing: 0.36px; transition: color 0.3s; &:hover { From 709c01c5bf59cb77f64b8cb49897f0c84bb320cf Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 16 Nov 2024 19:07:55 -0800 Subject: [PATCH 4/8] Header Done --- .../_components/Navbar/Navbar.module.scss | 71 ++++++++++++++----- app/(pages)/_components/Navbar/Navbar.tsx | 63 ++++++++-------- 2 files changed, 86 insertions(+), 48 deletions(-) diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss index fdcfc63..45fcfd9 100644 --- a/app/(pages)/_components/Navbar/Navbar.module.scss +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -1,22 +1,26 @@ -.content { +.container { + width: 100%; + } + + .content { position: fixed; - top: 38px; /* Initial gap from the top */ - left: 0; + top: 28px; width: 100%; - height: 50px; + padding-left: 40px; + padding-right: 97px; + height: 70px; + padding-top: 10px; + padding-bottom: 10px; + display: flex; align-items: center; justify-content: space-between; - padding: 16px 32px; background-color: transparent; + + background-color: #2BC0F1; // Temporary background color until hero color comes in transition: background-color 0.6s ease, box-shadow 0.6s ease, top 0.6s ease; z-index: 1000; - background-color: #2BC0F1; // Temporary background color until hero text comes in - - // This will ensure that the background spans the entire width of the page - background-size: cover; - background-position: center; - + &.scrolled { background-color: rgba(4, 102, 101, 0.415); // Updated background color when scrolled backdrop-filter: blur(10px); @@ -25,18 +29,18 @@ .hdIcon { img { - width: 50px; + width: 50px; height: 50px; } } .navLinks { - display: flex; - align-items: center; - gap: 48px; - align-self: stretch; + display: flex; + align-items: center; + gap: 48px; + align-self: stretch; } - + .navLink { color: #FFF; text-align: center; @@ -46,6 +50,7 @@ font-weight: 400; line-height: 100%; /* 18px */ letter-spacing: 0.36px; + position: relative; /* Required for the ::after pseudo-element */ transition: color 0.3s; &:hover { @@ -55,7 +60,37 @@ &.active { color: #9EE7E5; // Active section color font-weight: 700; - text-decoration: underline; + + // The underline effect + &::after { + content: ''; + position: absolute; + bottom: -4px; /* Space between text and the underline */ + left: 0; + width: 100%; + height: 2px; + background-color: #9EE7E5; + transform: scaleX(1); /* Extend the underline from left to right */ + transform-origin: left center; /* Start the scale from the left */ + transition: transform 0.3s ease-out; /* Smooth animation */ + } + } + + &::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 100%; /* Full width for underline */ + height: 2px; + background-color: #9EE7E5; + transform: scaleX(0); /* Start with no width */ + transform-origin: left center; /* Start the scale from the left */ + transition: transform 0.3s ease-out; /* Smooth animation */ + } + + &:not(.active)::after { + transform: scaleX(0); /* Make underline disappear with the same animation */ } } } diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index c84d383..af2e458 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -60,36 +60,39 @@ export default function Navbar() { }; return ( -
-
- White HackDavis Logo -
-
-

scrollToSection('about')} - className={`${styles.navLink} ${ - activeSection === 'about' ? styles.active : '' - }`} - > - ABOUT -

-

scrollToSection('faq')} - className={`${styles.navLink} ${ - activeSection === 'faq' ? styles.active : '' - }`} - > - FAQ -

-

scrollToSection('sponsors')} - className={`${styles.navLink} ${ - activeSection === 'sponsors' ? styles.active : '' - }`} - > - SPONSORS -

-
+
+
+
+ White HackDavis Logo +
+
+

scrollToSection('about')} + className={`${styles.navLink} ${ + activeSection === 'about' ? styles.active : '' + }`} + > + ABOUT +

+

scrollToSection('faq')} + className={`${styles.navLink} ${ + activeSection === 'faq' ? styles.active : '' + }`} + > + FAQ +

+

scrollToSection('sponsors')} + className={`${styles.navLink} ${ + activeSection === 'sponsors' ? styles.active : '' + }`} + > + SPONSORS +

+
+
+ ); } From f697ec1f59a2e1f016c98830efe86382dd746d6b Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 16 Nov 2024 19:17:59 -0800 Subject: [PATCH 5/8] Update Navbar.module.scss --- app/(pages)/_components/Navbar/Navbar.module.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss index 45fcfd9..3b29ac2 100644 --- a/app/(pages)/_components/Navbar/Navbar.module.scss +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -8,9 +8,9 @@ width: 100%; padding-left: 40px; padding-right: 97px; - height: 70px; - padding-top: 10px; - padding-bottom: 10px; + height: 60px; + padding-top: 5px; + padding-bottom: 5px; display: flex; align-items: center; From 4b66882552dd9548678bf04cbcc8a2bca41fa46a Mon Sep 17 00:00:00 2001 From: reehals Date: Sat, 16 Nov 2024 19:49:25 -0800 Subject: [PATCH 6/8] Fix Linting errors --- app/(api)/_actions/placeholder.ts | 2 +- app/(api)/_data/placeholder.json | 2 +- app/(api)/_utils/placeholder.ts | 2 +- app/(api)/api/placeholder.ts | 2 +- app/(pages)/(about-us)/about-us/page.tsx | 10 +- app/(pages)/_components/Navbar/Navbar.tsx | 70 +- app/(pages)/_contexts/placeholder.tsx | 2 +- app/(pages)/_data/placeholder.tsx | 2 +- app/(pages)/_globals/fonts.ts | 2 +- app/(pages)/_hooks/empty.ts | 2 +- app/(pages)/layout.tsx | 12 +- app/(pages)/page.tsx | 15 +- package-lock.json | 1094 ++++++++++++++++++++- package.json | 13 +- 14 files changed, 1129 insertions(+), 101 deletions(-) diff --git a/app/(api)/_actions/placeholder.ts b/app/(api)/_actions/placeholder.ts index b01da3b..4bd8276 100644 --- a/app/(api)/_actions/placeholder.ts +++ b/app/(api)/_actions/placeholder.ts @@ -1 +1 @@ -// empty file \ No newline at end of file +// empty file diff --git a/app/(api)/_data/placeholder.json b/app/(api)/_data/placeholder.json index 9e26dfe..0967ef4 100644 --- a/app/(api)/_data/placeholder.json +++ b/app/(api)/_data/placeholder.json @@ -1 +1 @@ -{} \ No newline at end of file +{} diff --git a/app/(api)/_utils/placeholder.ts b/app/(api)/_utils/placeholder.ts index b01da3b..4bd8276 100644 --- a/app/(api)/_utils/placeholder.ts +++ b/app/(api)/_utils/placeholder.ts @@ -1 +1 @@ -// empty file \ No newline at end of file +// empty file diff --git a/app/(api)/api/placeholder.ts b/app/(api)/api/placeholder.ts index b01da3b..4bd8276 100644 --- a/app/(api)/api/placeholder.ts +++ b/app/(api)/api/placeholder.ts @@ -1 +1 @@ -// empty file \ No newline at end of file +// empty file diff --git a/app/(pages)/(about-us)/about-us/page.tsx b/app/(pages)/(about-us)/about-us/page.tsx index cb8aed1..daa8ec8 100644 --- a/app/(pages)/(about-us)/about-us/page.tsx +++ b/app/(pages)/(about-us)/about-us/page.tsx @@ -1,7 +1,3 @@ -export default function AboutUs(){ - return( -
- Halo this is the about us page! -
- ) -} \ No newline at end of file +export default function AboutUs() { + return
Halo this is the about us page!
; +} diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index af2e458..9cc85b2 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -28,12 +28,17 @@ export default function Navbar() { const sectionEnd = offsetTop + offsetHeight; // Check if scroll position is within this section's range - if (scrollPosition >= sectionStart - 100 && scrollPosition < sectionEnd - 100) { + if ( + scrollPosition >= sectionStart - 100 && + scrollPosition < sectionEnd - 100 + ) { newActiveSection = section; } // Calculate distance to section if it's not the active section - const distance = Math.abs(scrollPosition - (sectionStart + sectionEnd) / 2); + const distance = Math.abs( + scrollPosition - (sectionStart + sectionEnd) / 2 + ); if (distance < closestDistance) { closestDistance = distance; closestSection = section; @@ -61,38 +66,37 @@ export default function Navbar() { return (
-
-
- White HackDavis Logo -
-
-

scrollToSection('about')} - className={`${styles.navLink} ${ - activeSection === 'about' ? styles.active : '' - }`} - > - ABOUT -

-

scrollToSection('faq')} - className={`${styles.navLink} ${ - activeSection === 'faq' ? styles.active : '' - }`} - > - FAQ -

-

scrollToSection('sponsors')} - className={`${styles.navLink} ${ - activeSection === 'sponsors' ? styles.active : '' - }`} - > - SPONSORS -

-
+
+
+ White HackDavis Logo
+
+

scrollToSection('about')} + className={`${styles.navLink} ${ + activeSection === 'about' ? styles.active : '' + }`} + > + ABOUT +

+

scrollToSection('faq')} + className={`${styles.navLink} ${ + activeSection === 'faq' ? styles.active : '' + }`} + > + FAQ +

+

scrollToSection('sponsors')} + className={`${styles.navLink} ${ + activeSection === 'sponsors' ? styles.active : '' + }`} + > + SPONSORS +

+
+
- ); } diff --git a/app/(pages)/_contexts/placeholder.tsx b/app/(pages)/_contexts/placeholder.tsx index b01da3b..4bd8276 100644 --- a/app/(pages)/_contexts/placeholder.tsx +++ b/app/(pages)/_contexts/placeholder.tsx @@ -1 +1 @@ -// empty file \ No newline at end of file +// empty file diff --git a/app/(pages)/_data/placeholder.tsx b/app/(pages)/_data/placeholder.tsx index b01da3b..4bd8276 100644 --- a/app/(pages)/_data/placeholder.tsx +++ b/app/(pages)/_data/placeholder.tsx @@ -1 +1 @@ -// empty file \ No newline at end of file +// empty file diff --git a/app/(pages)/_globals/fonts.ts b/app/(pages)/_globals/fonts.ts index 946ab5a..f169136 100644 --- a/app/(pages)/_globals/fonts.ts +++ b/app/(pages)/_globals/fonts.ts @@ -14,4 +14,4 @@ const fonts = [inter, montserrat]; const font_variables = fonts.map((font) => font.variable); const font_string = font_variables.join(' '); -export default font_string; \ No newline at end of file +export default font_string; diff --git a/app/(pages)/_hooks/empty.ts b/app/(pages)/_hooks/empty.ts index b01da3b..4bd8276 100644 --- a/app/(pages)/_hooks/empty.ts +++ b/app/(pages)/_hooks/empty.ts @@ -1 +1 @@ -// empty file \ No newline at end of file +// empty file diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx index 395ccfa..5ccd153 100644 --- a/app/(pages)/layout.tsx +++ b/app/(pages)/layout.tsx @@ -1,9 +1,9 @@ -import type { Metadata } from "next"; +import type { Metadata } from 'next'; import '@globals/styles/globals.scss'; import metadataJSON from '@app/(pages)/_globals/metadata.json'; -import fonts from "./_globals/fonts"; -import Navbar from "@app/(pages)/_components/Navbar/Navbar"; -import Footer from "@app/(pages)/_components/Footer/Footer"; +import fonts from './_globals/fonts'; +import Navbar from '@app/(pages)/_components/Navbar/Navbar'; +import Footer from '@app/(pages)/_components/Footer/Footer'; export const metadata: Metadata = metadataJSON; @@ -14,9 +14,7 @@ export default function RootLayout({ }>) { return ( - + {children}