animal crossing component done

app/(pages)/hackers/_components/AnimalsCrossing/animalsCrossing.module.scss

@@ -0,0 +1,87 @@
+.section_container{
+    background-color: var(--background-secondary);
+    height: 363px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.callout1, .callout2 {
+    // width: 45%;
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    gap: var(--small-spacer);
+    padding: 10.5px 14.2px;
+    position: absolute;
+    border-radius: 36px;
+
+    .callout_text {
+        font-size: 1.2rem;
+        font-weight: 500;
+    }
+}
+
+.callout1{
+    background-color: var(--background-light);
+    min-height: 45px;
+    left: 23px;
+    top: 77px;
+}
+
+.callout2{
+    right: 23px;
+    top: 144px;
+    background-color: #9ee7e5;
+}
+
+.arrow_lt{
+    z-index: 1;
+    position: absolute;
+    left: 19px;
+    top: 99.72px; 
+}
+
+.arrow_rt{
+    z-index: 1;
+    position: absolute;
+    right: 19px;
+    top: 164.8px;
+}
+
+.animals{
+    width: 100%;
+    padding-bottom: 32px;
+
+    position: absolute;
+    bottom: 0px;
+    z-index: 50;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.crosswalk{
+    z-index: 10;
+    height: 75px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    background-color: #3a3a3a;
+
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+
+    .xing{
+        bottom: 1px;
+        height: 77.5px;
+        width: 8.5px;
+        transform: rotate(-18.5deg);
+        flex-shrink: 0;
+        z-index: 25;
+        background-color: #f0bf5e;
+        border-radius: 6px;
+    }
+}

app/(pages)/hackers/_components/AnimalsCrossing/animalsCrossing.tsx

@@ -0,0 +1,35 @@
+'use client';
+import styles from './animalsCrossing.module.scss';
+import Image from 'next/image';
+import Cow from '/public/hackers/crossing_cow.svg';
+import Bunny from '/public/hackers/crossing_bunny.svg';
+import Frog from '/public/hackers/crossing_frog.svg';
+import Duck from '/public/hackers/crossing_duck.svg';
+import arrowLt from '/public/hackers/callout_left.svg';
+import arrowRt from '/public/hackers/callout_right.svg';
+
+export default function AnimalsCrossing() {
+  return (
+    <div className={styles.section_container}>
+      <div className={styles.callout1}>
+        <p className={styles.callout_text}>Davis Creamery after?</p>
+      </div>
+      <Image src={arrowLt} alt="callout_arrow" className={styles.arrow_lt} />
+      <div className={styles.callout2}>
+        <p className={styles.callout_text}>Ooh! I'm down :3</p>
+      </div>
+      <Image src={arrowRt} alt="callout_arrow" className={styles.arrow_rt} />
+      <div className={styles.animals}>
+        <Image src={Cow} alt="Cow" className={styles.mascots} />
+        <Image src={Bunny} alt="Bunny" className={styles.mascots} />
+        <Image src={Frog} alt="Frog" className={styles.mascots} />
+        <Image src={Duck} alt="Duck" className={styles.mascots} />
+      </div>
+      <div className={styles.crosswalk}>
+        {Array.from({ length: 10 }, (_, index) => (
+          <div key={index} className={styles.xing} />
+        ))}
+      </div>
+    </div>
+  );
+}

app/(pages)/hackers/page.tsx

@@ -2,13 +2,15 @@ import Welcome from './_components/Welcome/Welcome';
 import Tips from './_components/Tips/Tips';
 import JudgingProgress from './_components/JudgingProgress/JudgingProgress';
 import JudgeNotHere from './_components/JudgeNotHere/JudgeNotHere';
+import AnimalsCrossing from './_components/AnimalsCrossing/animalsCrossing';
 export default function Judging() {
   return (
     <main>
       <Welcome />
       <Tips />
       <JudgingProgress />
       <JudgeNotHere />
+      <AnimalsCrossing />
     </main>
   );
 }