From 572800dc324d4dd37eba558dd38358e84f4bfb04 Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 1 Mar 2026 00:16:02 -0800
Subject: [PATCH 1/4] moved social good hero to the right

---
 app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
index b539cf7..37e7dd1 100644
--- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
+++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
@@ -20,7 +20,7 @@ export default function HeroInfo() {
       <div
         id="home"
         ref={containerRef}
-        className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[13%]"
+        className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[5%]"
       >
         <div
           className="absolute -top-24 left-[27%] md:left-[30%] -z-10"

From 2d10fbcdb00801955c01b619654a4dbcb447946e Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 1 Mar 2026 00:31:57 -0800
Subject: [PATCH 2/4] update z index

---
 .../_components/heroInfo/heroInfo.tsx         | 276 +++++++++---------
 app/(pages)/(index-page)/page.tsx             |   2 +-
 2 files changed, 138 insertions(+), 140 deletions(-)

diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
index dcf7e97..d016b74 100644
--- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
+++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
@@ -16,106 +16,105 @@ export default function HeroInfo() {
   const { bigShape, mediumShape, littleShape, extraTiniTiny } = PARALLAX_SPEEDS;
 
   return (
-    <>
+    <div
+      id="home"
+      ref={containerRef}
+      className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[5%]"
+    >
       <div
-        id="home"
-        ref={containerRef}
-        className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[5%]"
+        className="absolute -top-7 md:-top-24 left-[27%] md:left-[30%] -z-[-40]"
+        // can't import getParallaxStyle here because it needs to spin at the same time
+        style={{
+          transform: `translateX(${
+            mousePosition.x / extraTiniTiny
+          }px) translateY(${mousePosition.y / extraTiniTiny}px)`,
+        }}
       >
+        <Image
+          src="/Images/reghero/Green.svg"
+          alt="green flower"
+          width={300}
+          height={300}
+          className="flex flex-row justify-center object-contain w-[40%] md:h-full md:w-full"
+          style={{ animation: 'spin 30s linear infinite' }}
+        />
+      </div>
+      <div>
+        <Image
+          src="/Images/reghero/WaterTower.svg"
+          alt="watertower"
+          width={156.5}
+          height={221.27}
+          className="absolute top-29 left-27 z-[-40] hidden md:block"
+          style={getParallaxStyle(mousePosition, bigShape)}
+        />
         <div
-          className="absolute -top-24 left-[27%] md:left-[30%] z-0"
+          className="absolute z-[-40] top-[56%] md:top-[50%] left-[2%]"
           // can't import getParallaxStyle here because it needs to spin at the same time
           style={{
             transform: `translateX(${
-              mousePosition.x / extraTiniTiny
-            }px) translateY(${mousePosition.y / extraTiniTiny}px)`,
+              mousePosition.x / mediumShape
+            }px) translateY(${mousePosition.y / mediumShape}px)`,
           }}
         >
           <Image
-            src="/Images/reghero/Green.svg"
-            alt="green flower"
-            width={300}
-            height={300}
-            className="flex flex-row justify-center object-contain w-[40%] md:h-full md:w-full"
-            style={{ animation: 'spin 30s linear infinite' }}
-          />
-        </div>
-        <div>
-          <Image
-            src="/Images/reghero/WaterTower.svg"
-            alt="watertower"
-            width={156.5}
-            height={221.27}
-            className="absolute top-29 left-27 z-0 hidden md:block"
-            style={getParallaxStyle(mousePosition, bigShape)}
-          />
-          <div
-            className="absolute z-0 top-[56%] md:top-[50%] left-[2%]"
-            // can't import getParallaxStyle here because it needs to spin at the same time
-            style={{
-              transform: `translateX(${
-                mousePosition.x / mediumShape
-              }px) translateY(${mousePosition.y / mediumShape}px)`,
-            }}
-          >
-            <Image
-              src="/Images/reghero/YellowDonut.svg"
-              alt="yellow donut"
-              width={100}
-              height={100}
-              className="justify-center object-contain"
-              style={{ animation: 'spin 25s linear infinite reverse' }}
-            />
-          </div>
-          <Image
-            src="/Images/reghero/BlueThing.svg"
-            alt="blue shape"
+            src="/Images/reghero/YellowDonut.svg"
+            alt="yellow donut"
             width={100}
             height={100}
-            className="absolute order-2 md:order-none top-[85%] -left-[5%] md:left-[35%] justify-center z-0 object-contain"
-            style={getParallaxStyle(mousePosition, littleShape)}
-          />
-        </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"
+            className="justify-center object-contain"
+            style={{ animation: 'spin 25s linear infinite reverse' }}
           />
         </div>
+        <Image
+          src="/Images/reghero/BlueThing.svg"
+          alt="blue shape"
+          width={100}
+          height={100}
+          className="absolute order-2 md:order-none top-[85%] -left-[5%] md:left-[35%] justify-center -z-10 object-contain"
+          style={getParallaxStyle(mousePosition, littleShape)}
+        />
+      </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 min-w-0 flex-col justify-between md:w-full md:pr-0 pr-[5%]">
-          {/* 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">
+      {/* right side */}
+      <div className="order-1 md:order-none flex w-full min-w-0 flex-col justify-between md:w-full md:pr-0 pr-[5%]">
+        {/* 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">
               <div className="flex flex-col items-start text-left md:items-end md:text-right w-full">
-                <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>
+                <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="whitespace-nowrap text-[45px] font-bold leading-[115%] tracking-[0.9px] text-[var(--text-hero)] break-900:text-[50px] break-625:text-[66px] break-625:leading-[100%] break-625:tracking-[3.52px] md:text-[88px]">
-                    social good
-                  </h1>
+                <h1 className="whitespace-nowrap text-[45px] font-bold leading-[115%] tracking-[0.9px] text-[var(--text-hero)] break-900:text-[50px] 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>
+                <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>
 
-              <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://apply.hackdavis.io/"
-                  target="_blank"
-                  className="
+            <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://apply.hackdavis.io/"
+                target="_blank"
+                className="
                     rounded-full
                     px-4 py-2
                     md:px-6 md:py-2
@@ -133,85 +132,84 @@ export default function HeroInfo() {
                     text-[var(--teal-1,#005271)]
                     hover:text-white
                   "
-                >
-                  Register Now
-                </Link>
+              >
+                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"
-                    backgroundColor="#EDF2F3"
-                    href="mailto:team@hackdavis.io"
-                  />
-                </div>
+              <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"
+                  backgroundColor="#EDF2F3"
+                  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 text-[19px]">
-                  Apply to be a{' '}
-                  <FormLink
-                    href="https://forms.gle/rvMKjxw6GjiaKPjc7"
-                    includeComma={false}
-                  >
-                    <span style={{ color: '#FFC53D' }}>Judge</span>
-                  </FormLink>
-                  {/* <span style={{ color: '#FFC5AB' }}>Mentor</span>, or{' '}
+            <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 text-[19px]">
+                Apply to be a{' '}
+                <FormLink
+                  href="https://forms.gle/rvMKjxw6GjiaKPjc7"
+                  includeComma={false}
+                >
+                  <span style={{ color: '#FFC53D' }}>Judge</span>
+                </FormLink>
+                {/* <span style={{ color: '#FFC5AB' }}>Mentor</span>, or{' '}
                     <span style={{ color: '#9EE7E5' }}>Volunteer</span> */}
-                </div>
               </div>
             </div>
           </div>
-
-          {/* desktop numbers */}
-          <div className="hidden md:flex items-end gap-0 pt-[15%] md:pl-[5%] lg:pl-[30%]">
-            <Image
-              src="/Images/reghero/One.svg"
-              alt="1"
-              width={130}
-              height={130}
-              className="object-contain w-[150px] h-[150px] lg:w-[170px] lg:h-[170px] shrink-0"
-            />
-            <Image
-              src="/Images/reghero/Zero.svg"
-              alt="0"
-              width={130}
-              height={130}
-              className="object-contain sm:w-[150px] sm:h-[150px] md:w-[150px] md:h-[150px] lg:w-[170px] lg:h-[170px] shrink-0 translate-y-[24px] -translate-x-[20px]"
-            />
-          </div>
         </div>
 
-        {/* mobile numbers: 10 */}
-        <div className="block md:hidden order-3 md:order-none relative ml-[25%] md:ml-0  pt-[9%] flex flex-row items-stretch sm:pl-0 md:pl-[25%]">
+        {/* desktop numbers */}
+        <div className="hidden md:flex items-end gap-0 pt-[15%] md:pl-[5%] lg:pl-[30%]">
           <Image
             src="/Images/reghero/One.svg"
-            alt="Animals on couch"
-            width={150}
-            height={150}
-            className="
-            object-contain
-            w-[180px] h-[180px]
-          "
+            alt="1"
+            width={130}
+            height={130}
+            className="object-contain w-[150px] h-[150px] lg:w-[170px] lg:h-[170px] shrink-0"
           />
           <Image
             src="/Images/reghero/Zero.svg"
-            alt="Animals on couch"
-            width={150}
-            height={150}
-            className="
+            alt="0"
+            width={130}
+            height={130}
+            className="object-contain sm:w-[150px] sm:h-[150px] md:w-[150px] md:h-[150px] lg:w-[170px] lg:h-[170px] shrink-0 translate-y-[24px] -translate-x-[20px]"
+          />
+        </div>
+      </div>
+
+      {/* mobile numbers: 10 */}
+      <div className="block md:hidden order-3 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-[180px] h-[180px]
+          "
+        />
+        <Image
+          src="/Images/reghero/Zero.svg"
+          alt="Animals on couch"
+          width={150}
+          height={150}
+          className="
             object-contain
             w-[180px] h-[180px]
             translate-y-[30px]
             -translate-x-[20px]
             md:translate-y-[24px]
           "
-          />
-        </div>
+        />
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx
index 46125f1..81c1cb1 100644
--- a/app/(pages)/(index-page)/page.tsx
+++ b/app/(pages)/(index-page)/page.tsx
@@ -8,7 +8,7 @@ import Sponsers from './_components/Sponsers/Sponsers';
 
 export default function Home() {
   return (
-    <div className="pt-40 flex flex-col w-full bg-[#FAFAFA] min-h-screen">
+    <div className="pt-40 flex flex-col w-full min-h-screen">
       <HeroInfo />
       <TenYears />
       <Stats />

From c2b6152b0b0b2e68043bcf70bc62987dab83d125 Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 1 Mar 2026 00:49:57 -0800
Subject: [PATCH 3/4] moved id

---
 app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
index d016b74..05b28ba 100644
--- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
+++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
@@ -17,7 +17,6 @@ export default function HeroInfo() {
 
   return (
     <div
-      id="home"
       ref={containerRef}
       className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[5%]"
     >
@@ -35,6 +34,7 @@ export default function HeroInfo() {
           alt="green flower"
           width={300}
           height={300}
+          id="home" // scroll to this image when clicking "Home" in navbar (top-most item)
           className="flex flex-row justify-center object-contain w-[40%] md:h-full md:w-full"
           style={{ animation: 'spin 30s linear infinite' }}
         />

From 28e98794ca4d64ea5cf7321e32816fb0ae1481f3 Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 1 Mar 2026 00:58:30 -0800
Subject: [PATCH 4/4] changed z index of couch and text

---
 .../(index-page)/_components/heroInfo/heroInfo.tsx   | 12 ++++++------
 app/(pages)/(index-page)/page.tsx                    |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
index 05b28ba..cb7b8d4 100644
--- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
+++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
@@ -21,7 +21,7 @@ export default function HeroInfo() {
       className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[5%]"
     >
       <div
-        className="absolute -top-7 md:-top-24 left-[27%] md:left-[30%] -z-[-40]"
+        className="absolute -top-7 md:-top-24 left-[27%] md:left-[30%]"
         // can't import getParallaxStyle here because it needs to spin at the same time
         style={{
           transform: `translateX(${
@@ -45,11 +45,11 @@ export default function HeroInfo() {
           alt="watertower"
           width={156.5}
           height={221.27}
-          className="absolute top-29 left-27 z-[-40] hidden md:block"
+          className="absolute top-29 left-27 hidden md:block"
           style={getParallaxStyle(mousePosition, bigShape)}
         />
         <div
-          className="absolute z-[-40] top-[56%] md:top-[50%] left-[2%]"
+          className="absolute top-[56%] md:top-[50%] left-[2%]"
           // can't import getParallaxStyle here because it needs to spin at the same time
           style={{
             transform: `translateX(${
@@ -71,12 +71,12 @@ export default function HeroInfo() {
           alt="blue shape"
           width={100}
           height={100}
-          className="absolute order-2 md:order-none top-[85%] -left-[5%] md:left-[35%] justify-center -z-10 object-contain"
+          className="absolute order-2 md:order-none top-[85%] -left-[5%] md:left-[35%] justify-center object-contain"
           style={getParallaxStyle(mousePosition, littleShape)}
         />
       </div>
       {/* animals on couch */}
-      <div className="order-2 md:order-none flex flex-row md:min-w-[360px] items-stretch gap-6">
+      <div className="order-2 md:order-none flex flex-row md:min-w-[360px] items-stretch gap-6 z-10">
         <Image
           src="/Images/reghero/Couch.svg"
           alt="Animals on couch"
@@ -87,7 +87,7 @@ export default function HeroInfo() {
       </div>
 
       {/* right side */}
-      <div className="order-1 md:order-none flex w-full min-w-0 flex-col justify-between md:w-full md:pr-0 pr-[5%]">
+      <div className="order-1 md:order-none flex w-full min-w-0 flex-col justify-between md:w-full md:pr-0 pr-[5%] z-10">
         {/* 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">
diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx
index 81c1cb1..73a3142 100644
--- a/app/(pages)/(index-page)/page.tsx
+++ b/app/(pages)/(index-page)/page.tsx
@@ -8,7 +8,7 @@ import Sponsers from './_components/Sponsers/Sponsers';
 
 export default function Home() {
   return (
-    <div className="pt-40 flex flex-col w-full min-h-screen">
+    <div className="pt-40 flex flex-col w-full min-h-screen bg-[#FAFAFA]">
       <HeroInfo />
       <TenYears />
       <Stats />