Epic Navbar Update

app/components/Carousel/Carousel.css

@@ -0,0 +1,70 @@
+div.carousel{
+    margin-top: 5vh;
+}
+
+.slider-btn:hover {
+    filter: drop-shadow(0rem 0rem .5rem #FFE9D7);
+}
+
+.carousel__dot {
+    width: 2rem;
+    height: 2rem;
+
+}
+
+@keyframes spin {
+    from {transform:rotate(0deg);}
+    to {transform:rotate(360deg);}
+}
+
+.carousel__dot--selected {
+    width: 2.5rem;
+    height: 2.5rem;
+    transition: .5s;
+    filter: drop-shadow(0rem 0rem 1rem #ab9c7c);
+    animation: spin 3s infinite linear;
+
+}
+.slider{
+    height: 26rem;
+    width: 26rem;
+}
+
+.button-grp{
+    width: 26rem;
+}
+
+.text-container{
+    width: 26rem;
+    height: 26rem;
+}
+
+@media screen and (max-width: 600px) {
+
+    .slider {
+        height: 13rem;
+        width: 13rem;
+    }
+    .dot {
+        height: 2rem;
+        width: 2rem;
+    }
+    .text-container {
+        height: 16rem;
+        width: 13rem;
+        margin-bottom: 4px;
+        p {
+            font-size: x-small;
+            line-height: 1.5;
+        }
+    }
+    .button-grp {
+        width: 13rem;
+    }
+    .sticker{
+        width: 12rem;
+    }
+
+}
+
+

app/components/Carousel/Carousel.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import React from 'react';
+import {CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, Dot} from 'pure-react-carousel';
+import 'pure-react-carousel/dist/react-carousel.es.css';
+import './Carousel.css';
+
+export class Carousel extends React.Component {
+    render() {
+        return (
+            <CarouselProvider
+                naturalSlideWidth={100}
+                naturalSlideHeight={125}
+                totalSlides={3}
+                orientation="horizontal"
+                isIntrinsicHeight={true}
+                isPlaying={true}
+                interval={6000}
+                infinite={true}
+
+            >
+                <div className="flex flex-row justify-items-center justify-center flex-wrap">
+                    <div className="row mx-2">
+                        <Slider className="slider mx-4 border-solid border-4 border-[#992444] rounded-md shadow-lg">
+                            <Slide index={0}>
+                                <img className="slider "
+                                     src={"/static/images/testimonial-sanjana.jpg"} alt="testimonial picture"
+                                     loading="eager"></img>
+                            </Slide>
+                            <Slide index={1}>
+                                <img
+                                    className="slider "
+                                    src={"/static/images/testimonial-elisa.jpg"} alt="testimonial picture"
+                                    loading="eager"></img>
+
+                            </Slide>
+                            <Slide index={2}>
+                                <img
+                                    className="slider "
+                                    src={"/static/images/testimonial-tanvi.jpg"} alt="testimonial picture" loading="eager"></img>
+                            </Slide>
+                        </Slider>
+
+
+
+
+                        <div className="button-grp my-3 mx-4 flex flex-row  h-10 items-center justify-between">
+                            <ButtonBack
+                                className='slider-btn text-center text-[#A6CDC4] font-medium text-2xl lg:text-2xl'>&lt;</ButtonBack>
+                            <Dot slide={0} className="dot mt-0.5"><img
+
+                                src={"/static/images/gold-vinyl.png"} loading="eager" alt={"carousel dot"}></img>
+                            </Dot>
+                            <Dot slide={1} className="dot mt-0.5"><img
+
+                                src={"/static/images/blue-vinyl.png"} loading="eager" alt={"carousel dot"}></img></Dot>
+                            <Dot slide={2} className="dot mt-0.5" ><img
+
+                                src={"/static/images/red-vinyl.png"} loading="eager" alt={"carousel dot"}></img></Dot>
+                            <ButtonNext
+                                className='slider-btn text-center text-[#A6CDC4] font-medium text-2xl lg:text-2xl'>&gt;</ButtonNext>
+                        </div>
+                    </div>
+
+                    <div className="flex-col">
+                        <Slider className="text-container justify-items-center flex-row mb-8">
+                            <Slide index={0} className='text-[#CCBA97] font-medium text-lg lg:text-xl'>
+                                <p className=" text-justify text-md">"WEHack was the perfect opportunity for me because
+                                    I felt like I was completely in a safe space where all my ideas were accepted. It
+                                    gave me the chance to develop many different skills as well as many different
+                                    relationships. I was able to gain the confidence from creating and conceiving a
+                                    project all the way to presenting it in a completely inclusive space and it
+                                    definitely fueled my innovation!"</p>
+                                <p className="mt-5">~ Sanjana Kotha (Sophomore)</p>
+                            </Slide>
+                            <Slide index={1} className='text-center text-[#CCBA97] font-medium text-lg lg:text-xl'>
+                                <p className=" text-justify ">"WEHack gave me one of my most memorable experiences. It
+                                    gave me the opportunity to work with new applications and attend the amazing
+                                    workshops that gave me insight into tech applications and the tech industry. As a
+                                    first-time hacker, WEHack stepped me out of my comfort zone and empowered me to
+                                    spend the weekend developing my technical and soft skills. Experienced or not,
+                                    WEHack gives women and non-binary students the opportunity to work on a challenge,
+                                    talk to companies, and develop skills!"</p>
+                                <p className="mt-5">~ Elisa Paul (Sophomore)</p>
+                            </Slide>
+                            <Slide index={2} className='text-center text-[#CCBA97] font-medium text-lg lg:text-xl'>
+                                <p className=" text-justify ">"I had a wonderful time at WEHack. I gained a lot of
+                                    knowledge from both independent research online and through my collaboration with my
+                                    teammates. Engaging with professionals from various companies proved to be
+                                    incredibly valuable. Along the way of developing our project for different
+                                    challenges, I formed new friendships and left with a strong sense of confidence in
+                                    my ability to apply the skills I’ve acquired through my coursework."</p>
+                                <p className="mt-5">~ Tanvi Deshpande (Junior)</p>
+                            </Slide>
+
+                        </Slider>
+                        <div className="flex-row justify-self-end">
+                            <img className="sticker w-64 h-auto mx-1 mt-18"
+                                 src={"/static/images/i-love-wehack-sticker.png"} alt={"WEHack Sticker"}/>
+                        </div>
+                    </div>
+                </div>
+            </CarouselProvider>
+        );
+    }
+}
+

app/components/Stats/Stats.css

@@ -1,3 +1,37 @@
-.stats-title {
-    filter: drop-shadow(0rem 0rem 1rem #FFE9D7);
-}
+.stats-section {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 60px;
+    padding: 2rem;
+  }
+
+  .stat-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .stat-image {
+    width: 250px;
+    height: auto;
+    filter: drop-shadow(0rem 0rem 0.8rem #CCBA97);
+  }
+
+  .mascot-image {
+    width: 150px;
+    height: auto;
+  }
+
+  @media (max-width: 768px) {
+    .stats-section {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .stat-column {
+      margin-bottom: 20px;
+    }
+  }

app/components/Stats/Stats.tsx

@@ -4,32 +4,46 @@ function Stats() {
   return (
     // stats-container flex flex-wrap flex-col gap-y-20 justify-between sm:flex-row md:flex-row: lg:flex-row pt-40 sm:pt-40 md:pt-48 lg:pt-72
 
+    <section className="stats-section">
+        <div className="stat-column">
+            <img src={"/static/images/stats-hackers.png"} alt="280+ Hackers" className="stat-image" />
+            <img src={"/static/images/Raccoon_Music.png"} alt="a raccoon listening to music" loading="eager" className="mascot-image" />
+        </div>
+        <div className="stat-column">
+            <img src={"/static/images/Raccoon_Hearts.png"} alt="a raccoon with hearts" loading="eager" className="mascot-image" />
+            <img src={"/static/images/stats-workshops.png"} alt="40 Workshops" className="stat-image" />
+        </div>
+        <div className="stat-column">
+            <img src={"/static/images/stats-projects.png"} alt="50+ Projects" className="stat-image" />
+            <img src={"/static/images/Raccoon_Sleeping.png"} alt="a raccoon sleeping" loading="eager" className="mascot-image" />
+        </div>
+
+      {/*
         <div className='stats-container flex flex-col gap-y-20 lg:flex-row pt-40 sm:pt-40 md:pt-40 lg:pt-28 lg:space-x-24'>
             <div className='statsOne flex flex-wrap flex-col content-center justify-between gap-y-3'>
-                <img className="wehack-stats-mascot h-auto max-w-60 sm:max-w-64 md:max-w-72 lg:max-w-72" src={"/static/images/IMG_0843(2).png"} alt="a bear trying to catch a butterfly" loading="eager"></img>
+                <img className="wehack-stats-mascot h-auto max-w-60 sm:max-w-64 md:max-w-72 lg:max-w-72" src={"/static/images/Raccoon_Hearts.png"} alt="a raccoon with hearts" loading="eager"></img>
                 <div className='stats-text flex flex-col gap-y-3'>
                     <h1 className='stats-title text-center text-[#FFE9D7] text-5xl md:text-5xl lg:text-5xl'>280+</h1>
                     <p className='text-center text-[#FFE9D7] font-medium text-lg lg:text-xl'>Hackers</p>
                 </div>
             </div>
             <div className='statsTwo flex flex-wrap flex-col content-center justify-between gap-y-3'>
-                <img className="wehack-stats-mascot h-auto max-w-60 sm:max-w-64 md:max-w-72 lg:max-w-72 lg:mt-20" src={"/static/images/IMG_0845(2).png"} alt="a bee" loading="eager"></img>
+                <img className="wehack-stats-mascot h-auto max-w-60 sm:max-w-64 md:max-w-72 lg:max-w-72 lg:mt-20" src={"/static/images/Raccoon_Music.png"} alt="a raccoon listening to music" loading="eager"></img>
                 <div className='stats-text flex flex-col gap-y-3'>
                     <h1 className='stats-title text-center text-[#FFE9D7] text-5xl md:text-5xl lg:text-5xl'>50+</h1>
                     <p className='text-center text-[#FFE9D7] font-medium text-lg lg:text-xl'>Projects Submitted</p>
                 </div>
             </div>
             <div className='statsThree flex flex-wrap flex-col content-center justify-between gap-y-3'>
-            {/* IMG_0846(1) */}
-                <img className="wehack-stats-mascot h-auto max-w-60 sm:max-w-64 md:max-w-72 lg:max-w-72 lg:mt-20" src={"/static/images/IMG_0846(1).png"} alt="a bear sleeping" loading="eager"></img>
+                <img className="wehack-stats-mascot h-auto max-w-60 sm:max-w-64 md:max-w-72 lg:max-w-72 lg:mt-20" src={"/static/images/Raccoon_Sleeping.png"} alt="a raccoon sleeping" loading="eager"></img>
                 <div className='stats-text flex flex-col gap-y-3'>
                     <h1 className='stats-title text-center text-[#FFE9D7] text-5xl md:text-5xl lg:text-5xl'>48</h1>
                     <p className='text-center text-[#FFE9D7] font-medium text-lg lg:text-xl'>Workshops and Mini-Events</p>
                 </div>
             </div>
         </div>
-        
-
+    */}
+    </section>
 
   )
 }

app/globals.css

@@ -49,9 +49,18 @@ body {
 /* shoutout to anastasiia fr: 
 https://medium.com/@a.pirus/simplifying-multiple-fonts-styling-in-next-js-13-with-css-variables-cb57e9707693 */
 
-h1, h2, h3 {
-    font-family:var(--font-inknut-antiqua);
+h1, h3 {
+    /* font-family:var(--font-inknut-antiqua); */
+    /* font-family: var(--font-junge); */
+    font-family: var(--font-righteous);
+
+}
+
+h2 {
+    /* font-family: var(--font-julius-sans-one); */
+    font-family: var(--font-darker-grotesque);
 }
+
 p {
     font-family:var(--font-nunito);
 }

app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 // import { Inter } from "next/font/google";
-import { Inknut_Antiqua, Nunito } from "next/font/google";
+import { Inknut_Antiqua, Nunito, Junge, Julius_Sans_One, Righteous, Darker_Grotesque} from "next/font/google";
 import "./globals.css";
 import Script from  "next/script"
 
@@ -14,6 +14,31 @@ const inknut = Inknut_Antiqua({
   variable: '--font-inknut-antiqua'
 });
 
+const righteous = Righteous({
+  subsets: ['latin'],
+  variable: '--font-righteous',
+  weight: '400'
+});
+
+const darker_grotesque = Darker_Grotesque({
+  subsets: ['latin'],
+  variable: '--font-darker-grotesque',
+});
+
+// Add Junge font
+const junge = Junge({
+  subsets: ["latin"],
+  variable: "--font-junge",
+  weight: "400"
+});
+
+// Add Julius Sans One font
+const julius_sans = Julius_Sans_One({
+  subsets: ["latin"],
+  variable: "--font-julius-sans-one",
+  weight: "400",
+});
+
 export const metadata: Metadata = {
   title: "WEHack",
   description: "WEHack 24-25 Website",
@@ -43,7 +68,7 @@ export default function RootLayout({
         </Script>
 
       </head>
-      <body className={`${nunito.variable} ${inknut.variable}`}>{children}</body>
+      <body className={`${nunito.variable} ${inknut.variable} ${junge.variable} ${julius_sans.variable} ${righteous.variable} ${darker_grotesque.variable}`}>{children}</body>
     </html>
   );
 }