16 hero registration

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 (
+    <Link
+      href={href}
+      className="
+        group relative flex items-center overflow-hidden
+        w-full h-full rounded-full
+        text-[var(--text-light)] no-underline
+        transition-[background,flex-direction] duration-300
+        hover:flex-row-reverse
+        border-2 border-[#D5E1E5]
+        bg-white
+      "
+    >
+      {/* static placeholder (hidden but preserves layout) */}
+      <div className="relative aspect-square h-full rounded-full border-2 border-[#005271] invisible" />
+
+      {/* animated heart coin */}
+      <div
+        className="
+          absolute left-0 top-0 z-10
+          aspect-square h-full rounded-full
+          shadow-[0px_9px_75px_rgba(0,0,0,0.75)]
+          group-hover:animate-slide-right
+        "
+      >
+        <Image
+          src="/Images/reghero/HeartButton.svg"
+          alt="heart"
+          fill
+          className="object-contain"
+          priority
+        />
+      </div>
+
+      <p
+        className="w-full text-center transition-all
+                    rounded-full
+                    font-bold
+                    tracking-[0.32px]
+                    text-[14px]
+                    md:text-[16px]
+                    text-[var(--teal-1,#005271)]
+                  "
+      >
+        {text}
+      </p>
+
+      {/* overlay */}
+      <span
+        className="
+          pointer-events-none absolute inset-0
+          bg-[var(--background-light)] opacity-15
+        "
+      />
+    </Link>
+  );
+}

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 (
+    <>
+      <div className="flex flex-col items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[13%]">
+        <div className="absolute top-0 left-[27%] md:left-[30%] -z-10 overflow-hidden">
+          <Image
+            src="/Images/reghero/Green.svg"
+            alt="Animals on couch"
+            width={300}
+            height={300}
+            className="flex flex-row justify-center object-contain w-[40%] md:h-full md:w-full"
+          />
+        </div>
+        <div>
+          <Image
+            src="/Images/reghero/Watertower.svg"
+            alt="watertower"
+            width={156.5}
+            height={221.27}
+            className="absolute top-29 left-27 -z-10 hidden md:block"
+          />
+          <Image
+            src="/Images/reghero/YellowDonut.svg"
+            alt="Animals on couch"
+            width={100}
+            height={100}
+            className="absolute -z-10 top-[56%] md:top-[50%] left-[2%] justify-center object-contain animate-slow-spin"
+          />
+          <Image
+            src="/Images/reghero/BlueThing.svg"
+            alt="Animals on couch"
+            width={100}
+            height={100}
+            className="absolute order-2 md:order-none top-[85%] -left-[5%] md:left-[35%] justify-center -z-10 object-contain animate-slow-spin"
+          />
+        </div>
+        {/* animals on couch */}
+        <div className="order-2 md:order-none flex flex-row md:min-w-[360px] items-stretch gap-6">
+          <Image
+            src="/Images/reghero/Couch.svg"
+            alt="Animals on couch"
+            width={110}
+            height={144}
+            className="flex flex-row justify-center object-contain pr-[13%] md:p-0 md:h-full w-screen md:w-screen"
+          />
+        </div>
+
+        {/* right side */}
+        <div className="order-1 md:order-none flex w-full flex-col justify-between md:w-full">
+          {/* here text + buttons */}
+          <div className="flex flex-row justify-start items-start md:justify-end md:items-end">
+            <div className="flex flex-col items-start gap-[22px] text-left md:items-end md:gap-[31px] md:text-right">
+              <div className="flex flex-col items-start text-left md:items-end md:text-right w-full">
+                <p className="flex gap-2 text-[30px] font-bold leading-[115%] tracking-[0.8px] break-625:text-[40px]">
+                  <span className="text-black">
+                    <WordCycle />
+                  </span>
+                  <span className="text-[#005271]">for</span>
+                </p>
+                <h1 className="text-[45px] font-bold leading-[115%] tracking-[0.9px] text-[var(--text-hero)] break-625:text-[66px] break-625:leading-[100%] break-625:tracking-[3.52px] md:text-[88px]">
+                  social good
+                </h1>
+                <p className="mt-[10px] text-[16px] w-full tracking-[0.48px] text-black break-625:text-[20px]">
+                  May 9-10, 2026 @ UCenter
+                </p>
+              </div>
+
+              <div className="flex flex-row items-start gap-[12px] break-625:flex-col break-625:items-end break-625:gap-[28px] sm:flex-row sm:items-center">
+                <Link
+                  href="https://hackdavis.typeform.com/to/N6DEZIVH"
+                  target="_blank"
+                  className="
+                    rounded-full
+                    px-4 py-2
+                    md:px-6 md:py-2
+                    text-[14px]
+                    text-nowrap
+                    md:text-[16px]
+                    border border-[var(--teal-1,#005271)]
+                    bg-white
+                    shadow-[4px_4px_0_0_#005271]
+                    text-center
+                    font-bold
+                    tracking-[0.32px]
+                    text-[var(--teal-1,#005271)]
+                  "
+                >
+                  Register Now
+                </Link>
+
+                <div className="flex h-[40px] w-[138px] flex-shrink-0 items-center rounded-[100px] bg-black/15 text-center text-[18px] font-bold tracking-[0.4px] text-black break-625:h-[50px] break-625:w-[170px] break-625:py-0 break-625:text-[20px]">
+                  <HeartButton text="Sponsor" href="mailto:team@hackdavis.io" />
+                </div>
+              </div>
+
+              <div className="flex flex-col items-start gap-2 text-left break-625:flex-row break-625:items-end break-625:text-right">
+                <span className="hidden text-[18px] font-normal tracking-[0.48px] text-black break-625:inline md:text-[20px]">
+                  Check out the{' '}
+                </span>
+                <div className="flex items-center gap-2 text-black">
+                  <FormLink href="/?section=teams" includeComma={false}>
+                    Apply to be a{' '}
+                    <span style={{ color: '#FFC53D' }}>Judge</span>,{' '}
+                    <span style={{ color: '#FFC5AB' }}>Mentor</span>, or{' '}
+                    <span style={{ color: '#9EE7E5' }}>Volunteer</span>
+                  </FormLink>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* desktop numbers */}
+          <div className="hidden md:flex items-end gap-0 pt-[15%] pl-[25%]">
+            <Image
+              src="/Images/reghero/One.svg"
+              alt="1"
+              width={150}
+              height={150}
+              className="object-contain w-[200px] h-[200px] shrink-0"
+            />
+            <Image
+              src="/Images/reghero/Zero.svg"
+              alt="0"
+              width={150}
+              height={150}
+              className="object-contain w-[200px] h-[200px] shrink-0 translate-y-[24px] -translate-x-[20px]"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="block md:hidden order-1 md:order-none relative ml-[25%] md:ml-0 pt-[9%] flex flex-row items-stretch sm:pl-0 md:pl-[25%]">
+        <Image
+          src="/Images/reghero/One.svg"
+          alt="Animals on couch"
+          width={150}
+          height={150}
+          className="
+            object-contain
+            w-[120px] h-[120px]
+            md:w-[200px] md:h-[200px]
+          "
+        />
+        <Image
+          src="/Images/reghero/Zero.svg"
+          alt="Animals on couch"
+          width={150}
+          height={150}
+          className="
+            object-contain
+            w-[120px] h-[120px]
+            md:w-[200px] md:h-[200px]
+            translate-y-[30px]
+            -translate-x-[20px]
+            md:translate-y-[24px]
+          "
+        />
+      </div>
+    </>
+  );
+}
+
+interface FormLinkProps {
+  href: string;
+  includeComma: boolean;
+  children: React.ReactNode;
+}
+
+function FormLink({ href, includeComma, children }: FormLinkProps) {
+  return (
+    <Link
+      href={href}
+      className="group flex items-center text-[16px] md:text-[18px] font-bold tracking-[0.48px] text-black md:text-[20px]"
+    >
+      <span className="font-bold">{children}</span>
+
+      <Image
+        src="/Images/reghero/icon_arrow.svg"
+        alt="Arrow icon"
+        width={10}
+        height={10}
+        className="m-1 object-contain transition-transform group-hover:translate-x-1"
+      />
+
+      {includeComma && <span>,</span>}
+    </Link>
+  );
+}

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<HTMLSpanElement | null>(null);
+
+  useEffect(() => {
+    const swapInterval = setInterval(() => {
+      setWordIdx((idx) => (idx + 1) % words.length);
+    }, 3000);
+    return () => clearInterval(swapInterval);
+  }, []);
+
+  return (
+    <span className="inline-block align-baseline text-[#AFD157] font-bold text-left md:text-right">
+      <SwitchTransition>
+        <CSSTransition
+          key={words[wordIdx]}
+          nodeRef={nodeRef}
+          timeout={400}
+          mountOnEnter
+          unmountOnExit
+          classNames={{
+            enter: 'opacity-0 translate-y-[35px]',
+            enterActive: 'opacity-100 translate-y-0',
+            exit: 'opacity-100',
+            exitActive: 'opacity-0 -translate-y-[35px]',
+          }}
+        >
+          <span
+            ref={nodeRef}
+            className="inline-block will-change-transform will-change-opacity"
+            style={{
+              transition: 'all 400ms cubic-bezier(0.165, 0.84, 0.44, 1)',
+            }}
+          >
+            {words[wordIdx]}
+          </span>
+        </CSSTransition>
+      </SwitchTransition>
+    </span>
+  );
+}

app/(pages)/(index-page)/page.tsx

@@ -1,7 +1,11 @@
+import HeroInfo from './_components/heroInfo/heroInfo';
+
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20">
-      <p>Halo! Welcome to the HackDavis template repo :D</p>
+    <div className="pt-40 flex flex-end pl-[9%] w-full">
+      <div className="flex-end">
+        <HeroInfo />
+      </div>
     </div>
   );
 }

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;
-}
+}