diff --git a/.vscode/settings.json b/.vscode/settings.json index ed7c360..d3af33c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,7 @@ { - "cSpell.words": ["CODECRAFT", "tailwindcss"], + "cSpell.words": ["CODECRAFT", "headlessui", "tailwindcss"], "prettier.configPath": "./prettier.config.js", "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" } } diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx index 23eab2f..7de55d9 100644 --- a/app/(landing)/page.tsx +++ b/app/(landing)/page.tsx @@ -3,7 +3,7 @@ import { ArrowRightIcon } from '@heroicons/react/24/outline'; import Link from 'next/link'; import { lusitana } from '@/app/ui/fonts'; import Image from 'next/image'; -import Hero from './sections/Hero'; +import Hero from './sections/Hero/Hero'; import Schedule from './sections/Schedule'; import { Suspense } from 'react'; import Sponsors from './sections/Sponsors'; diff --git a/app/(landing)/sections/Hero.tsx b/app/(landing)/sections/Hero/Hero.tsx similarity index 94% rename from app/(landing)/sections/Hero.tsx rename to app/(landing)/sections/Hero/Hero.tsx index b1aa20c..3e2a6e8 100644 --- a/app/(landing)/sections/Hero.tsx +++ b/app/(landing)/sections/Hero/Hero.tsx @@ -1,4 +1,5 @@ import Image from 'next/image'; +import Navbar from './Navbar'; export default function Hero() { return ( @@ -6,6 +7,7 @@ export default function Hero() { className="bg-gray-100 w-full h-[100vh] max-h-[1300px] flex flex-col-reverse justify-center items-center" > + + {({ active }) => ( + + )} + + ); +} +function OtherPageMenuItem(props: { sectionName: string }) { + const { sectionName } = props; + const history = useRouter(); + return ( + + {({ active }) => ( + + + + + )} + + ); +} + +function CollapsedMenu() { + return ( +
+ +
+ + + +
+ + +
+ + + + + {/* */} + {} +
+ + + +
+ ); +} + +/** + * TODO: Make navbar sticky and then change the glow to the section that is currently present ?? + */ + +function Navbar() { + const pathname = usePathname(); + const isContactPage = pathname === "/contact"; + const sections = ["Home", "About", "Schedule", "FAQ"]; + + return ( +
+ yellow hackru logo + + + + Major League Hacking 2024 Hackathon Season + + + +
+ + {!isContactPage && (<> + { + sections.map((section) => { + return ( + + ); + }) + } + + + + ) + } + + { + isContactPage && ( + + + + ) + } +
+ +
+ ); +} + + +export default Navbar; \ No newline at end of file diff --git a/package.json b/package.json index 5d13e2f..68247e4 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "tsc": "tsc -p tsconfig.json --noEmit" }, "dependencies": { + "@headlessui/react": "^1.7.18", "@heroicons/react": "^2.0.18", "@tailwindcss/forms": "^0.5.7", "@types/node": "20.5.7", @@ -23,6 +24,7 @@ "postcss": "8.4.31", "react": "18.2.0", "react-dom": "18.2.0", + "react-icons": "^5.0.1", "tailwindcss": "3.3.3", "typescript": "5.2.2", "use-debounce": "^9.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b72ee55..fe1e374 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@headlessui/react': + specifier: ^1.7.18 + version: 1.7.18(react-dom@18.2.0)(react@18.2.0) '@heroicons/react': specifier: ^2.0.18 version: 2.1.1(react@18.2.0) @@ -41,6 +44,9 @@ dependencies: react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) + react-icons: + specifier: ^5.0.1 + version: 5.0.1(react@18.2.0) tailwindcss: specifier: 3.3.3 version: 3.3.3 @@ -349,6 +355,19 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true + /@headlessui/react@1.7.18(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==} + engines: {node: '>=10'} + peerDependencies: + react: ^16 || ^17 || ^18 + react-dom: ^16 || ^17 || ^18 + dependencies: + '@tanstack/react-virtual': 3.0.2(react-dom@18.2.0)(react@18.2.0) + client-only: 0.0.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@heroicons/react@2.1.1(react@18.2.0): resolution: {integrity: sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==} peerDependencies: @@ -601,6 +620,21 @@ packages: tailwindcss: 3.3.3 dev: false + /@tanstack/react-virtual@3.0.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-9XbRLPKgnhMwwmuQMnJMv+5a9sitGNCSEtf/AZXzmJdesYk7XsjYHaEDny+IrJzvPNwZliIIDwCRiaUqR3zzCA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@tanstack/virtual-core': 3.0.0 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@tanstack/virtual-core@3.0.0: + resolution: {integrity: sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==} + dev: false + /@types/bcrypt@5.0.2: resolution: {integrity: sha512-6atioO8Y75fNcbmj0G7UjI9lXN2pQ/IGJ2FWT4a/btd0Lk9lQalHLKhkgKVZ3r+spnmWUKfbMi1GEe9wyHQfNQ==} dependencies: @@ -890,9 +924,9 @@ packages: eslint: 8.56.0 eslint-config-prettier: 9.0.0(eslint@8.56.0) eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.29.1) - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.17.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.56.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.17.0)(eslint@8.56.0) eslint-plugin-jest: 27.6.1(@typescript-eslint/eslint-plugin@6.17.0)(eslint@8.56.0)(typescript@5.2.2) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.56.0) eslint-plugin-playwright: 0.16.0(eslint-plugin-jest@27.6.1)(eslint@8.56.0) @@ -1610,7 +1644,7 @@ packages: peerDependencies: eslint-plugin-import: '>=1.4.0' dependencies: - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.17.0)(eslint@8.56.0) dev: true /eslint-import-resolver-node@0.3.9: @@ -1646,6 +1680,29 @@ packages: - supports-color dev: true + /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0): + resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + eslint: '*' + eslint-plugin-import: '*' + dependencies: + debug: 4.3.4 + enhanced-resolve: 5.15.0 + eslint: 8.56.0 + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.17.0)(eslint@8.56.0) + fast-glob: 3.3.2 + get-tsconfig: 4.7.2 + is-core-module: 2.13.1 + is-glob: 4.0.3 + transitivePeerDependencies: + - '@typescript-eslint/parser' + - eslint-import-resolver-node + - eslint-import-resolver-webpack + - supports-color + dev: true + /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0): resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} engines: {node: '>=4'} @@ -1676,6 +1733,64 @@ packages: - supports-color dev: true + /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0): + resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} + engines: {node: '>=4'} + peerDependencies: + '@typescript-eslint/parser': '*' + eslint: '*' + eslint-import-resolver-node: '*' + eslint-import-resolver-typescript: '*' + eslint-import-resolver-webpack: '*' + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true + eslint: + optional: true + eslint-import-resolver-node: + optional: true + eslint-import-resolver-typescript: + optional: true + eslint-import-resolver-webpack: + optional: true + dependencies: + '@typescript-eslint/parser': 6.17.0(eslint@8.56.0)(typescript@5.2.2) + debug: 3.2.7 + eslint: 8.56.0 + eslint-import-resolver-node: 0.3.9 + transitivePeerDependencies: + - supports-color + dev: true + + /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0): + resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} + engines: {node: '>=4'} + peerDependencies: + '@typescript-eslint/parser': '*' + eslint: '*' + eslint-import-resolver-node: '*' + eslint-import-resolver-typescript: '*' + eslint-import-resolver-webpack: '*' + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true + eslint: + optional: true + eslint-import-resolver-node: + optional: true + eslint-import-resolver-typescript: + optional: true + eslint-import-resolver-webpack: + optional: true + dependencies: + '@typescript-eslint/parser': 6.17.0(eslint@8.56.0)(typescript@5.2.2) + debug: 3.2.7 + eslint: 8.56.0 + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.17.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0) + transitivePeerDependencies: + - supports-color + dev: true + /eslint-plugin-eslint-comments@3.2.0(eslint@8.56.0): resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==} engines: {node: '>=6.5.0'} @@ -1722,6 +1837,41 @@ packages: - supports-color dev: true + /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.17.0)(eslint@8.56.0): + resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==} + engines: {node: '>=4'} + peerDependencies: + '@typescript-eslint/parser': '*' + eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true + dependencies: + '@typescript-eslint/parser': 6.17.0(eslint@8.56.0)(typescript@5.2.2) + array-includes: 3.1.7 + array.prototype.findlastindex: 1.2.3 + array.prototype.flat: 1.3.2 + array.prototype.flatmap: 1.3.2 + debug: 3.2.7 + doctrine: 2.1.0 + eslint: 8.56.0 + eslint-import-resolver-node: 0.3.9 + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0) + hasown: 2.0.0 + is-core-module: 2.13.1 + is-glob: 4.0.3 + minimatch: 3.1.2 + object.fromentries: 2.0.7 + object.groupby: 1.0.1 + object.values: 1.1.7 + semver: 6.3.1 + tsconfig-paths: 3.15.0 + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color + dev: true + /eslint-plugin-jest@27.6.1(@typescript-eslint/eslint-plugin@6.17.0)(eslint@8.56.0)(typescript@5.2.2): resolution: {integrity: sha512-WEYkyVXD9NlmFBKvrkmzrC+C9yZoz5pAml2hO19PlS3spJtoiwj4p2u8spd/7zx5IvRsZsCmsoImaAvBB9X93Q==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -3351,6 +3501,14 @@ packages: scheduler: 0.23.0 dev: false + /react-icons@5.0.1(react@18.2.0): + resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==} + peerDependencies: + react: '*' + dependencies: + react: 18.2.0 + dev: false + /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} dev: true diff --git a/public/hero-desktop.png b/public/hero-desktop.png deleted file mode 100644 index de8a5ce..0000000 Binary files a/public/hero-desktop.png and /dev/null differ diff --git a/public/hero-mobile.png b/public/hero-mobile.png deleted file mode 100644 index bb60e7d..0000000 Binary files a/public/hero-mobile.png and /dev/null differ diff --git a/public/landing/yellow_hackru.png b/public/landing/yellow_hackru.png new file mode 100644 index 0000000..cab784b Binary files /dev/null and b/public/landing/yellow_hackru.png differ