diff --git a/app/(pages)/(index-page)/_components/HeartButton/heartButton.tsx b/app/(pages)/(index-page)/_components/HeartButton/heartButton.tsx new file mode 100644 index 0000000..01dca27 --- /dev/null +++ b/app/(pages)/(index-page)/_components/HeartButton/heartButton.tsx @@ -0,0 +1,69 @@ +'use client'; + +import Link from 'next/link'; +import Image from 'next/image'; + +export default function HeartButton({ + text, + href, +}: { + text: string; + href: string; +}) { + return ( + + {/* static placeholder (hidden but preserves layout) */} +
+ + {/* animated heart coin */} +
+ heart +
+ +

+ {text} +

+ + {/* overlay */} + + + ); +} diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx new file mode 100644 index 0000000..ea78755 --- /dev/null +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -0,0 +1,194 @@ +import React from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; +import HeartButton from '../HeartButton/heartButton'; +import WordCycle from '../wordCycle/wordCycle'; + +export default function HeroInfo() { + return ( + <> +
+
+ Animals on couch +
+
+ watertower + Animals on couch + Animals on couch +
+ {/* animals on couch */} +
+ Animals on couch +
+ + {/* right side */} +
+ {/* here text + buttons */} +
+
+
+

+ + + + for +

+

+ social good +

+

+ May 9-10, 2026 @ UCenter +

+
+ +
+ + Register Now + + +
+ +
+
+ +
+ + Check out the{' '} + +
+ + Apply to be a{' '} + Judge,{' '} + Mentor, or{' '} + Volunteer + +
+
+
+
+ + {/* desktop numbers */} +
+ 1 + 0 +
+
+
+ +
+ Animals on couch + Animals on couch +
+ + ); +} + +interface FormLinkProps { + href: string; + includeComma: boolean; + children: React.ReactNode; +} + +function FormLink({ href, includeComma, children }: FormLinkProps) { + return ( + + {children} + + Arrow icon + + {includeComma && ,} + + ); +} diff --git a/app/(pages)/(index-page)/_components/wordCycle/wordCycle.tsx b/app/(pages)/(index-page)/_components/wordCycle/wordCycle.tsx new file mode 100644 index 0000000..7c8a55e --- /dev/null +++ b/app/(pages)/(index-page)/_components/wordCycle/wordCycle.tsx @@ -0,0 +1,58 @@ +'use client'; + +import { useEffect, useRef, useState } from 'react'; +import { SwitchTransition, CSSTransition } from 'react-transition-group'; + +const words = [ + 'create', + 'code', + 'design', + 'collab', + 'ideate', + 'craft', + 'hack', + 'strive', + 'build', +]; + +export default function WordCycle() { + const [wordIdx, setWordIdx] = useState(0); + const nodeRef = useRef(null); + + useEffect(() => { + const swapInterval = setInterval(() => { + setWordIdx((idx) => (idx + 1) % words.length); + }, 3000); + return () => clearInterval(swapInterval); + }, []); + + return ( + + + + + {words[wordIdx]} + + + + + ); +} diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index a8171e3..059dd7a 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -1,7 +1,11 @@ +import HeroInfo from './_components/heroInfo/heroInfo'; + export default function Home() { return ( -
-

Halo! Welcome to the HackDavis template repo :D

+
+
+ +
); } diff --git a/app/(pages)/_globals/styles/globals.scss b/app/(pages)/_globals/styles/globals.scss index 3d5d10b..4d68ac2 100644 --- a/app/(pages)/_globals/styles/globals.scss +++ b/app/(pages)/_globals/styles/globals.scss @@ -57,6 +57,7 @@ /* About Us Text Colors */ --text-dark: #123041; + --text-hero: #005271; --text-extra-dark: #0E2535; --text-black: #000000; --text-white: #FFFFFF; @@ -131,4 +132,4 @@ button { display: flex; justify-content: center; align-items: center; -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a3d9561..09f7519 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "react": "^18", "react-dom": "^18", "react-icons": "^5.5.0", + "react-transition-group": "^4.4.5", "sass": "^1.81.0" }, "devDependencies": { @@ -25,6 +26,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-transition-group": "^4.4.12", "autoprefixer": "^10.4.24", "eslint": "^8.57.1", "eslint-config-next": "14.2.4", @@ -175,7 +177,6 @@ "version": "7.28.6", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz", "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -1186,6 +1187,16 @@ "@types/react": "^18.0.0" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.12", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz", + "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "*" + } + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.54.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz", @@ -2585,7 +2596,6 @@ "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", - "dev": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { @@ -2760,6 +2770,16 @@ "node": ">=0.10.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom5": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dom5/-/dom5-3.0.1.tgz", @@ -5816,7 +5836,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" @@ -6428,7 +6447,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", @@ -6505,9 +6523,24 @@ "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/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "license": "BSD-3-Clause", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index a42894c..8a0749e 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react": "^18", "react-dom": "^18", "react-icons": "^5.5.0", + "react-transition-group": "^4.4.5", "sass": "^1.81.0" }, "devDependencies": { @@ -26,6 +27,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-transition-group": "^4.4.12", "autoprefixer": "^10.4.24", "eslint": "^8.57.1", "eslint-config-next": "14.2.4", diff --git a/public/Images/reghero/BlueThing.svg b/public/Images/reghero/BlueThing.svg new file mode 100644 index 0000000..43f880d --- /dev/null +++ b/public/Images/reghero/BlueThing.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Images/reghero/Couch.svg b/public/Images/reghero/Couch.svg new file mode 100644 index 0000000..6401186 --- /dev/null +++ b/public/Images/reghero/Couch.svg @@ -0,0 +1,263 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Images/reghero/Green.svg b/public/Images/reghero/Green.svg new file mode 100644 index 0000000..87c5b20 --- /dev/null +++ b/public/Images/reghero/Green.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Images/reghero/HDLogo.svg b/public/Images/reghero/HDLogo.svg new file mode 100644 index 0000000..5a61ebc --- /dev/null +++ b/public/Images/reghero/HDLogo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/Images/reghero/HeartButton.svg b/public/Images/reghero/HeartButton.svg new file mode 100644 index 0000000..c9e4d52 --- /dev/null +++ b/public/Images/reghero/HeartButton.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/Images/reghero/LogoBG.svg b/public/Images/reghero/LogoBG.svg new file mode 100644 index 0000000..98d8d26 --- /dev/null +++ b/public/Images/reghero/LogoBG.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/Images/reghero/One.svg b/public/Images/reghero/One.svg new file mode 100644 index 0000000..2443ebf --- /dev/null +++ b/public/Images/reghero/One.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Images/reghero/WaterTower.svg b/public/Images/reghero/WaterTower.svg new file mode 100644 index 0000000..2f60ba3 --- /dev/null +++ b/public/Images/reghero/WaterTower.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Images/reghero/YellowDonut.svg b/public/Images/reghero/YellowDonut.svg new file mode 100644 index 0000000..d8b439e --- /dev/null +++ b/public/Images/reghero/YellowDonut.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Images/reghero/Zero.svg b/public/Images/reghero/Zero.svg new file mode 100644 index 0000000..8f7a241 --- /dev/null +++ b/public/Images/reghero/Zero.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Images/reghero/icon_arrow.svg b/public/Images/reghero/icon_arrow.svg new file mode 100644 index 0000000..2b86521 --- /dev/null +++ b/public/Images/reghero/icon_arrow.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + +