HackDavis · ReehalS · Feb 5, 2026 · Feb 5, 2026
diff --git a/app/(pages)/(index-page)/_components/DonorScroll/DonorScroll.tsx b/app/(pages)/(index-page)/_components/DonorScroll/DonorScroll.tsx
@@ -0,0 +1,24 @@
+import Image from 'next/image';
+import tent from '@public/Images/donor_scroll/tent.svg';
+import mobile_cloud from '@public/Images/donor_scroll/mobile_cloud.svg';
+
+export default function DonorScroll() {
+  return (
+    <>
+      <div className="donor-scroll-section flex flex-col items-center relative w-full h-[100vw] sm:h-[800px] overflow-x-clip bg-[#11043F]">
+        <Image
+          src={mobile_cloud}
+          alt="Cloud"
+          className="h-auto w-full sm:w-[140vw] md:w-[38vw] right-0 absolute top-0 "
+        />
+        <Image
+          src={tent}
+          alt="Tent"
+          className="hidden md:block md:h-[580px] md:mt-[300px] md:ml-[80px] z-10"
+        />
+        {/* Just a black div to elevate the 'ground' */}
+        <div className="h-0 md:h-[250px] bg-black w-full -mt-[120px]"></div>
+      </div>
+    </>
+  );
+}
diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx
@@ -1,7 +1,10 @@
+import DonorScroll from './_components/DonorScroll/DonorScroll';
+
 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">
+    <div className="grid grid-rows-[20px_1fr] items-center justify-items-center">
       <p>Halo! Welcome to the HackDavis template repo :D</p>
+      <DonorScroll />
     </div>
   );
 }
diff --git a/app/(pages)/_components/Footer/Footer.tsx b/app/(pages)/_components/Footer/Footer.tsx
@@ -16,15 +16,24 @@ const scrollToTop = () => {
   window.scrollTo({ top: 0, behavior: 'smooth' });
 };
 
-export default function Footer() {
+interface FooterProps {
+  variant?: 'index' | 'about-us';
+}
+
+export default function Footer({ variant = 'about-us' }: FooterProps) {
   const logoStyles =
     'h-6 text-white transition hover:text-gray-300 break-400:h-7 md:h-8 lg:h-8 xl:h-10 2xl:h-15';
+
+  const bgColor = variant === 'index' ? 'bg-[#000008] z-[-1]' : 'bg-[#11043F]';
+
   return (
-    <footer className="relative z-10 flex w-full h-70 flex-col bg-[#11043F]">
+    <footer className={`relative z-10 flex w-full h-70 flex-col ${bgColor}`}>
       {/* Content Container */}
       <div className="mx-auto mt-[20%] flex w-3/4 flex-col items-center justify-around gap-8 break-400:mt-[7%] break-625:gap-12 md:mt-[7%] lg:relative lg:my-[5%] lg:flex-row lg:justify-between lg:gap-0 lg:px-0">
         {/* HackDavis Logo */}
-        <div className="flex w-full flex-row items-center justify-center gap-4 lg:w-1/3 bg-[#11043F]">
+        <div
+          className={`flex w-full flex-row items-center justify-center gap-4 lg:w-1/3 ${bgColor}`}
+        >
           <Image
             src="/Footer/hdLogoWhite.svg"
             alt="HackDavis Logo"

diff --git a/app/(pages)/_components/FooterWrapper.tsx b/app/(pages)/_components/FooterWrapper.tsx
@@ -0,0 +1,10 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import Footer from './Footer/Footer';
+
+export default function FooterWrapper() {
+  const pathname = usePathname();
+  const isIndexPage = pathname === '/';
+
+  return <Footer variant={isIndexPage ? 'index' : 'about-us'} />;
+}
diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
@@ -3,7 +3,7 @@ import '@globals/styles/globals.scss';
 import metadataJSON from '@app/(pages)/_globals/metadata.json';
 import fonts from './_globals/fonts';
 import Header from './_components/Header/Header';
-import Footer from '@app/(pages)/_components/Footer/Footer';
+import FooterWrapper from './_components/FooterWrapper';
 
 export const metadata: Metadata = metadataJSON;
 
@@ -17,7 +17,7 @@ export default function RootLayout({
       <body className={`${fonts} antialiased`}>
         <Header />
         {children}
-        <Footer />
+        <FooterWrapper />
       </body>
     </html>
   );

diff --git a/public/Images/donor_scroll/mobile_cloud.svg b/public/Images/donor_scroll/mobile_cloud.svg
diff --git a/public/Images/donor_scroll/tent.svg b/public/Images/donor_scroll/tent.svg