Final fixes

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

@@ -29,7 +29,10 @@ export default function BigWave() {
       <div className={styles.stats_container}>
         <div className={styles.stats}>
           <Statistics />
-          <Link href={'google.com'} className={styles.sponsor_button}>
+          <Link
+            href={'mailto:[email protected]'}
+            className={styles.sponsor_button}
+          >
             Sponsor 2025
           </Link>
         </div>

app/(pages)/(index-page)/_components/HeartButton/heartButton.module.scss

@@ -5,7 +5,7 @@
     width: 100%;
     height: 100%;
 
-    transition: background 500ms ease, flex-direction 100ms ease;
+    transition: background 500ms ease, flex-direction 200ms ease-in-out;
     color: var(--text-light);
     border-radius: 100px;
 
@@ -20,6 +20,12 @@
         flex-direction: row-reverse;
         background: var(--highlight-yellow);
         color: var(--background-dark);
+
+        .heart_coin_animated {
+            right: 0;
+            left: unset;
+            animation: slide 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
+        }
     }
 
     h4 {
@@ -29,6 +35,43 @@
         font-size: inherit;
     }
 
+    .heart_coin, .heart_coin_animated {
+        height: 100%;
+        aspect-ratio: 1;
+        z-index: 2;
+        border-radius: 50%;
+        box-shadow: 0px 9px 75px rgba(0, 0, 0, 0.75);
+    }
+
+    .heart_coin {
+        visibility: hidden;
+        position: relative;
+    }
+
+    .heart_coin_animated {
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+}
+
+@keyframes slide {
+    0% {
+        left: 0;
+    }
+    25% {
+        left: 20%;
+    }
+    50% {
+        left: 40%;
+    }
+    75% {
+        left: 60%;
+    }
+    100% {
+        right: 0;
+        left: unset;
+    }
 }
 
 .button_container::after {
@@ -40,15 +83,4 @@
     bottom: 0;
     right: 0;
     position: absolute;
-}
-
-.heart_coin {
-    position: relative;
-    height: 100%;
-    aspect-ratio: 1;
-    z-index: 2;
-    border-radius: 50%;
-    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-    box-shadow: 0px 9px 75px rgba(0, 0, 0, 0.75);
-
-}
+}

app/(pages)/(index-page)/_components/HeartButton/heartButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import Link from 'next/link';
 import Image from 'next/image';
 import styles from './heartButton.module.scss';
@@ -20,45 +21,16 @@ export default function HeartButton({
           fill={true}
         />
       </div>
+      <div className={styles.heart_coin_animated}>
+        <Image
+          src="/images/donate/button_heart_coin-cropped.svg"
+          alt="heart"
+          // width={20}
+          // height={20}
+          fill={true}
+        />
+      </div>
       <h4>{text}</h4>
     </Link>
   );
 }
-// import React, { useState } from 'react';
-// import Link from 'next/link';
-// import styles from './heartButton.module.scss';
-// import heartIcon from '/public/images/donate/Heart.svg';
-// import Image from 'next/image';
-
-// interface HeartButtonProps {
-//   text: string;
-//   href: string;
-// }
-
-// const HeartButton = ({ text, href }: HeartButtonProps) => {
-//   const [isHovered, setIsHovered] = useState(false);
-
-//   return (
-//     <Link
-//       href={href}
-//       onMouseEnter={() => setIsHovered(true)}
-//       onMouseLeave={() => setIsHovered(false)}
-//       className={styles.heartButton}
-//     >
-//       <div className={styles.content}>
-//         <div className={styles.iconWrapper}>
-//           <Image
-//             src={heartIcon}
-//             alt="heart"
-//             className={styles.icon}
-//             width={20}
-//             height={20}
-//           />
-//         </div>
-//         <span className={styles.text}>{text}</span>
-//       </div>
-//     </Link>
-//   );
-// };
-
-// export default HeartButton;

app/(pages)/(index-page)/_components/SandCastle.module.scss

@@ -0,0 +1,47 @@
+@import '@globals/styles/mixins.scss';
+
+$wave-amplitude: -4%;
+$wave-period: 5s;
+
+@keyframes wave-4-motion {
+    0% {
+        transform: translateX(3%);
+    }
+    50% {
+        transform: translateX(calc($wave-amplitude + 3%));
+    }
+    100% {
+        transform: translateX(3%);
+    }
+}
+
+.sand_background_dark {
+    position: absolute;
+    bottom: 0;
+    // right: -3%;
+
+    min-width: 106%;
+    height: 650px;
+    width: 106%;
+
+    // animation: wave-4-motion $wave-period infinite ease-in-out;
+    // animation-delay: 0.6s;
+    right: 0;
+
+    @include desktop {
+        height: 560px;
+        width: 170%;
+    }
+    @include sm-desktop {
+        height: 500px;
+    }
+    @include tablet {
+        height: 330px;
+    }
+    @include phone {
+        height: 245px;
+    } 
+    @include sm-phone {
+        height: 230px;
+    }
+}

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

@@ -1,19 +1,21 @@
 import sand_background from '@public/images/what_is_hackdavis/sand_background.svg';
+import sand_background_dark from '@public/images/what_is_hackdavis/sand_background_dark.svg';
 import froggy from '@public/images/what_is_hackdavis/Froggy.svg';
 import shell from '@public/images/what_is_hackdavis/shell.svg';
 import sandcastle from '@public/images/what_is_hackdavis/sandcastle.svg';
 import star from '@public/images/what_is_hackdavis/star.svg';
 import crab from '@public/images/what_is_hackdavis/crab.svg';
 import sand_hole1 from '@public/images/what_is_hackdavis/sand_hole1.svg';
 import sand_hole2 from '@public/images/what_is_hackdavis/sand_hole2.svg';
-import sand_hole3 from '@public/images/what_is_hackdavis/sand_hole3.svg';
+// import sand_hole3 from '@public/images/what_is_hackdavis/sand_hole3.svg';
 // import sand_hole_top from '@public/images/what_is_hackdavis/sand_hole_top.svg';
 
+import styles from './SandCastle.module.scss';
 import Image from 'next/image';
 
 export default function SandCastle() {
   return (
-    <main className="overflow-hidden">
+    <main className="relative top-[-1px] overflow-hidden bg-sand-background-light pt-4 break-625:pt-0">
       <SandCastleBackground>
         <SandCastleContent />
       </SandCastleBackground>
@@ -23,8 +25,8 @@ export default function SandCastle() {
 
 function SandCastleContent() {
   return (
-    <div className="mt-20 flex h-fit w-full flex-wrap justify-center p-[10%] pt-[15%] sm:mt-10 sm:flex-row md:p-[10%]">
-      <div className="w-full sm:p-10 md:w-2/3">
+    <div className="mt-20 flex h-fit w-full flex-wrap justify-between gap-4 p-[10%] pt-[15%] sm:mt-10 sm:gap-0 md:flex-row md:p-[10%]">
+      <div className="lg:2/3 w-full break-400:w-3/4 sm:p-10 sm:pr-0 md:w-3/5 xl:w-1/2">
         <WhatIsHackDavisText />
       </div>
       <div className="flex w-full items-end justify-end sm:items-center sm:justify-center md:w-1/3">
@@ -56,13 +58,13 @@ function SandCastleContent() {
 function WhatIsHackDavisText() {
   return (
     <div className="flex w-full max-w-[900px] flex-col items-start justify-center text-sand-text-color">
-      <h1 className="text-2xl font-bold sm:text-3xl md:text-4xl lg:text-5xl">
+      <h1 className="text-2xl font-bold sm:text-3xl md:text-4xl lg:text-5xl 2xl:text-7xl">
         HackDavis
       </h1>
-      <p className="text-base sm:text-xl md:text-2xl lg:text-3xl">
+      <p className="text-base sm:text-xl md:text-2xl lg:text-3xl 2xl:text-5xl">
         is one of the
-        <strong> largest collegiate hackathon </strong> in Califronia, where
-        over 950 students, creators, and leaders come together to{' '}
+        <strong> largest collegiate hackathon </strong> in California, where
+        over 850 students, creators, and leaders come together to{' '}
         <strong>create for social good</strong>.
       </p>
     </div>
@@ -72,7 +74,7 @@ function WhatIsHackDavisText() {
 function SandCastleBackground({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex h-auto w-screen flex-col justify-center bg-sand-background-light">
-      <div className="relative h-[950px] w-full xl:h-[1000px] 2xl:h-[1400px]">
+      <div className="relative h-[750px] w-full sm:h-[950px] md:h-[900px] lg:h-[950px] xl:h-[1100px] 2xl:h-[1300px]">
         <Image
           src={sand_background}
           alt="sand background"
@@ -84,6 +86,19 @@ function SandCastleBackground({ children }: { children: React.ReactNode }) {
           }}
         />
         <SandCastleTexture />
+        <div className={styles.sand_background_dark}>
+          <Image
+            src={sand_background_dark}
+            alt="sand background dark"
+            fill
+            // className="relative min-w=full h-full"
+            className="object-cover object-top"
+            style={{
+              minWidth: '100%',
+              minHeight: '100%',
+            }}
+          />
+        </div>
         <div className="absolute inset-0 z-10 flex w-full">{children}</div>
       </div>
     </div>
@@ -92,8 +107,8 @@ function SandCastleBackground({ children }: { children: React.ReactNode }) {
 
 function SandCastleTexture() {
   return (
-    <div className="absolute inset-0 h-[950px] w-full">
-      <div className="absolute left-[15%] top-[50%] md:left-[10%] md:top-[60%] lg:top-[65%]">
+    <div className="absolute inset-0 h-full w-full">
+      <div className="absolute left-[15%] top-[50%] z-10 sm:left-[10%] sm:top-[65%] lg:top-[65%]">
         <div className="relative h-[50px] w-[50px] sm:h-[60px] sm:w-[60px] md:h-[70px] md:w-[70px] lg:h-[80px] lg:w-[80px]">
           <Image
             src={shell}
@@ -103,8 +118,8 @@ function SandCastleTexture() {
           />
         </div>
       </div>
-      <div className="absolute right-[10%] top-[8%] lg:left-[35%] lg:top-[10%]">
-        <div className="relative h-[50px] w-[50px]">
+      <div className="absolute right-[20%] top-[5%] md:right-[45%] md:top-[12%]">
+        <div className="relative h-[80px] w-[80px] md:h-[50px] md:w-[50px] xl:h-[100px] xl:w-[100px]">
           <Image src={star} alt="star" fill style={{ objectFit: 'contain' }} />
         </div>
       </div>
@@ -113,7 +128,7 @@ function SandCastleTexture() {
           <Image src={crab} alt="crab" fill style={{ objectFit: 'contain' }} />
         </div>
       </div>
-      <div className="absolute left-[0] top-[65%]">
+      {/* <div className="absolute left-[0] top-[65%]">
         <div className="relative h-[50px] w-[50px]">
           <Image
             src={sand_hole1}
@@ -122,9 +137,9 @@ function SandCastleTexture() {
             style={{ objectFit: 'contain' }}
           />
         </div>
-      </div>
-      <div className="absolute left-[50%] top-[35%]">
-        <div className="relative h-[100px] w-[100px]">
+      </div> */}
+      <div className="absolute right-[-2%] top-[15%]">
+        <div className="relative h-[25px] w-[55px]">
           <Image
             src={sand_hole2}
             alt="sand hole"
@@ -133,13 +148,13 @@ function SandCastleTexture() {
           />
         </div>
       </div>
-      <div className="absolute right-[0] top-[10%]">
-        <div className="relative h-[70px] w-[70px]">
+      <div className="absolute left-[-15px] top-[55%]">
+        <div className="relative h-[20px] w-[100px]">
           <Image
-            src={sand_hole3}
+            src={sand_hole1}
             alt="sand hole"
             fill
-            style={{ objectFit: 'contain' }}
+            style={{ objectFit: 'fill' }}
           />
         </div>
       </div>