merged archive in

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

@@ -7,6 +7,7 @@ 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_hole_top from '@public/images/what_is_hackdavis/sand_hole_top.svg';
 
 import Image from 'next/image';
 
@@ -20,11 +21,78 @@ export default function SandCastle() {
   );
 }
 
+function SandCastleContent() {
+  return (
+    <div className="mt-20 flex h-fit w-full flex-wrap justify-center p-[10%] pt-[10%] sm:mt-10 sm:flex-row sm:p-[5%]">
+      <div className="w-full sm:p-10 md:w-2/3">
+        <WhatIsHackDavisText />
+      </div>
+      <div className="flex w-full items-end justify-end sm:items-center sm:justify-center md:w-1/3">
+        <div className="relative mt-8 flex h-full w-2/3 justify-center sm:w-full md:-mt-10 md:justify-end">
+          <div className="relative h-[150px] w-[185px] sm:h-[200px] sm:w-[245px] md:h-[245px] md:w-[301px]">
+            <Image
+              src={sandcastle}
+              alt="sandcastle"
+              fill
+              style={{ objectFit: 'contain' }}
+              priority
+            />
+          </div>
+          <div className="relative -ml-10 h-[200px] w-[200px] sm:-ml-12 sm:h-[270px] sm:w-[270px] md:-ml-16 md:h-[335.45px] md:w-[330px]">
+            <Image
+              src={froggy}
+              alt="froggy"
+              fill
+              style={{ objectFit: 'contain' }}
+              priority
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function WhatIsHackDavisText() {
+  return (
+    <div className="flex w-full max-w-[500px] flex-col items-start justify-center text-sand-text-color">
+      <h1 className="text-2xl font-bold sm:text-3xl md:text-4xl">HackDavis</h1>
+      <p className="max-w-[90%] text-base sm:text-xl md:text-2xl">
+        is one of the
+        <strong> largest collegiate hackathon </strong> in Califronia, where
+        over 950 students, creators, and leaders come together to{' '}
+        <strong>create for social good</strong>.
+      </p>
+    </div>
+  );
+}
+
+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">
+        <Image
+          src={sand_background}
+          alt="sand background"
+          fill
+          className="object-cover object-top"
+          style={{
+            minWidth: '100%',
+            minHeight: '100%',
+          }}
+        />
+        <SandCastleTexture />
+        <div className="absolute inset-0 z-10 flex w-full">{children}</div>
+      </div>
+    </div>
+  );
+}
+
 function SandCastleTexture() {
   return (
     <div className="absolute inset-0 h-[950px] w-full">
-      <div className="absolute left-[15%] top-[65%]">
-        <div className="relative h-[80px] w-[80px]">
+      <div className="absolute left-[15%] top-[50%] md:left-[10%] md:top-[60%] 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}
             alt="shell"
@@ -33,13 +101,13 @@ function SandCastleTexture() {
           />
         </div>
       </div>
-      <div className="absolute left-[35%] top-[10%]">
+      <div className="absolute right-[10%] top-[8%] lg:left-[35%] lg:top-[10%]">
         <div className="relative h-[50px] w-[50px]">
           <Image src={star} alt="star" fill style={{ objectFit: 'contain' }} />
         </div>
       </div>
       <div className="absolute left-[60%] top-[40%]">
-        <div className="relative h-[100px] w-[100px]">
+        <div className="relative hidden h-[50px] w-[50px] md:block md:h-[75px] md:w-[75px] lg:h-[100px] lg:w-[100px]">
           <Image src={crab} alt="crab" fill style={{ objectFit: 'contain' }} />
         </div>
       </div>
@@ -76,71 +144,3 @@ function SandCastleTexture() {
     </div>
   );
 }
-
-function SandCastleContent() {
-  return (
-    <div className="flex h-fit w-full flex-row flex-wrap p-[10%]">
-      <div className="w-full sm:w-full md:w-[400px] lg:w-[500px]">
-        <WhatIsHackDavis />
-      </div>
-      <div className="w-full md:w-1/3">
-        <div className="relative mt-8 flex h-full w-full justify-center md:-mt-10 md:justify-end">
-          <div className="relative h-[150px] w-[150px] sm:h-[200px] sm:w-[200px] md:h-[250px] md:w-[250px]">
-            <Image
-              src={sandcastle}
-              alt="sandcastle"
-              fill
-              style={{ objectFit: 'contain' }}
-            />
-          </div>
-          <div className="relative -ml-12 h-[150px] w-[150px] sm:-ml-16 sm:h-[200px] sm:w-[200px] md:-ml-24 md:h-[250px] md:w-[250px]">
-            <Image
-              src={froggy}
-              alt="froggy"
-              fill
-              style={{ objectFit: 'contain' }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function SandCastleBackground({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex h-auto w-screen flex-col justify-center bg-sand-background-light">
-      {/* Medium sand layer */}
-      <div className="relative h-[950px] w-full">
-        <Image
-          src={sand_background}
-          alt="sand background"
-          fill
-          className="object-cover"
-          style={{
-            minWidth: '100%',
-            minHeight: '100%',
-          }}
-        />
-        <SandCastleTexture />
-        <div className="absolute inset-0 z-10 flex w-full items-center justify-center">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function WhatIsHackDavis() {
-  return (
-    <div className="flex flex-col items-start justify-center p-4 text-sand-text-color">
-      <h1 className="text-3xl font-bold sm:text-4xl md:text-5xl">HackDavis</h1>
-      <p className="max-w-[90%] text-lg sm:max-w-[80%] sm:text-xl md:max-w-[70%] md:text-2xl">
-        is one of the
-        <strong> largest collegiate hackathon </strong> in Califronia, where
-        over 950 students, creators, and leaders come together to{' '}
-        <strong>create for social good</strong>.
-      </p>
-    </div>
-  );
-}

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

@@ -1,12 +1,17 @@
+@import '@globals/styles/mixins.scss';
+
 .container {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
   height: 1024px;
   width: 100%;
   background-color: var(--grass-background-dark);
   overflow-x: clip;
   position: relative;
+
+  @include sm-desktop {
+    flex-direction: column;
+    height: 100%;
+  }
 }
 
 .topBlock {
@@ -23,6 +28,42 @@
   border-radius: 40px;
 }
 
+.top {
+  display: none;
+
+  @include sm-desktop {
+    display: flex;
+    z-index: 1;
+
+    .grass {
+      position: absolute;
+      width: 1280px;
+      max-width: none;
+      height: auto;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: inherit;
+    }
+  }
+}
+
+.bottom {
+  display: none;
+
+  @include sm-desktop {
+    display: flex;
+    z-index: 1;
+
+    .bottomCow {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      z-index: inherit;
+    }
+  }
+}
+
 .left {
   z-index: 1;
 
@@ -103,6 +144,10 @@
       z-index: inherit;
     }
   }
+
+  @include sm-desktop {
+    display: none;
+  }
 }
 
 .right {
@@ -175,12 +220,21 @@
       z-index: inherit;
     }
   }
+
+  @include sm-desktop {
+    display: none;
+  }
 }
 
 .sponsors {
   display: flex;
   align-items: center;
   background-color: var(--water-background);
+  z-index: 0;
+
+  @include sm-desktop {
+    padding: 166px 0px 268px;
+  }
 }
 
 .sandTexture {

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

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+
 import Bunny from './_components/Bunny/Bunny';
 import Cow from './_components/Cow/Cow';
 import Ducky from './_components/Ducky/Ducky';
@@ -8,11 +9,24 @@ import RedFlower from 'public/Sponsors/characters/red-flower.svg';
 import YellowFlower from 'public/Sponsors/characters/yellow-flower.svg';
 import LeftGrass from 'public/Sponsors/characters/left-grass.svg';
 import RightGrass from 'public/Sponsors/characters/right-grass.svg';
+import TopGrass from 'public/Sponsors/characters/TopGrass.svg';
+import BottomCow from 'public/Sponsors/characters/BottomCow.svg';
+
 import styles from './Sponsors.module.scss';
 
 export default async function Sponsors() {
   return (
     <div className={styles.container}>
+      <div className={styles.top}>
+        <Image
+          src={TopGrass}
+          alt="grass"
+          width={1280}
+          height={189}
+          className={styles.grass}
+        />
+      </div>
+
       <div className={styles.left}>
         <div className={styles.grass}>
           <Image src={LeftGrass} alt="grass" height={185} width={617} />
@@ -83,6 +97,16 @@ export default async function Sponsors() {
           <div className={`${styles.sandTexture} ${styles.firstTexture}`}></div>
         </div>
       </div>
+
+      <div className={styles.bottom}>
+        <Image
+          src={BottomCow}
+          alt="sleeping cow"
+          width={396}
+          height={209}
+          className={styles.bottomCow}
+        />
+      </div>
     </div>
   );
 }

app/(pages)/(index-page)/_components/Sponsors/_components/Marquee/Logo.module.scss

@@ -1,3 +1,5 @@
+@import '@globals/styles/mixins.scss';
+
 .container {
   background: var(--card-background);
   border-radius: 10px;
@@ -16,11 +18,11 @@
     height: 250px;
     padding: 20px 40px;
 
-    // @mixin lg {
-    //   width: 350px;
-    //   height: 200px;
-    //   padding: 30px 60px;
-    // }
+    @include phone {
+      width: 245px;
+      height: 140px;
+      padding: 10px 20px;
+    }
   }
 
   img {

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

@@ -1,3 +1,5 @@
+@import '@globals/styles/mixins.scss';
+
 .marquee {
   --gap: 36px;
   --scroll-start: 0;
@@ -16,9 +18,13 @@
     hsl(0 0% 0% / 0)
   );
 
-    &:hover .marqueeGroup {
-      animation-play-state: paused;
-    }
+  &:hover .marqueeGroup {
+    animation-play-state: paused;
+  }
+
+  @include phone {
+    --gap: 20px
+  }
 }
 
 .marqueeGroup {

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

@@ -1,3 +1,5 @@
+@import '@globals/styles/mixins.scss';
+
 .container{
     display: flex;
     flex-direction: column;
@@ -14,4 +16,8 @@
         letter-spacing: 1px;
         margin-top: 2%;
     }
+
+    @include phone {
+        gap: 10px;
+    }
 }

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

@@ -1,8 +1,4 @@
 .container {
   display: flex;
   flex-direction: column;
-}
-
-.sponsors {
-  z-index: 5;
 }