Zubiya

apps/web/src/app/globals.css

@@ -84,7 +84,7 @@
 	}
 
 	body {
-		@apply bg-[#1E2A44] text-foreground;
+		@apply bg-[#1A1C28] text-foreground;
 	}
 }
 
@@ -137,10 +137,7 @@ body {
     overflow-x: hidden;
 }
 
-.custom-cursor-page {
-    /* changed cursor to have the mascot */
-	cursor: url('/img/static/images/cursor-img.png') 16 16, auto;
-}
+
 
 .App {
     background-image: url("/img/static/images/landing-page-background-2.webp");

apps/web/src/app/layout.tsx

@@ -40,7 +40,7 @@ const gantari = Gantari({
 const cormorant_garamond = Cormorant_Garamond({
 	subsets: ['latin'],
 	variable: '--font-cormorant-garamond',
-	weight: ['400', '700']
+	weight: ['300', '400', '700']
   });
 
 

apps/web/src/app/page.tsx

@@ -10,12 +10,12 @@ import Countdown from "./sections/Countdown/Countdown";
 import Gallery from "@/components/Gallery/Gallery";
 import FilmStrip from "@/components/FilmStrip/FilmStrip";
 import Stats from "@/components/Stats/Stats";
-import Team from "./sections/Team/Team";
+// import Team from "./sections/Team/Team";
 
 export default function Home() {
   return (
     // this is where all our components will go
-    <div className="App transform-gpu custom-cursor-page">
+    <div className="App transform-gpu">
       <Navbar />
 	    <MLHBadge />
       <Jumbotron/>

apps/web/src/app/register/page.tsx

@@ -58,7 +58,7 @@ export default async function Page() {
 				</div>
 				<main className="dark:bg-[#301814]">
 					<div className="mx-auto min-h-screen max-w-5xl px-5 pb-10 pt-[20vh] font-sans dark:text-[#CCBA97]">
-						<h1 className="text-6xl font-black md:text-8xl text-hackathon">
+						<h1 className="text-6xl font-black md:text-8xl text-hackathon font-cinzel-decorative">
 							Register
 						</h1>
 						<p className="mt-5 font-medium text-2xl">

apps/web/src/app/sections/About/About.tsx

@@ -1,22 +1,19 @@
 import React from 'react'
 import './About.css'
-import Image from 'next/image'
 
 function About() {
   return (
     <section className='about-section' id="about-wehack">
       {/* group 1 */}
-      <div className='flex justify-center items-center'>
-          <Image 
-            className="h-auto md:px-0 transform-gpu" 
-            src={"/img/static/images/Group 34.png"} 
-            alt={"Dallas' Largest Inclusive Hackathon"} 
-            width={800}
-            height={600}/>
+      <div className='flex justify-center items-center mb-10'>
+          <img className="h-auto md:px-0" src={"img/static/images/About.webp"} alt={"Dallas' Largest Inclusive Hackathon"} />
       </div>
-
+
+
       <div className='about-group flex flex-wrap flex-col sm:flex-row md:flex-row: lg:flex-row'>
-        <div className='about-text-container flex flex-col items-center justify-center gap-y-5 -mt-10 md:mt-5 lg:mt-20'>
+        <div className='about-text-container flex flex-col items-start justify-center gap-y-5 -mt-10 md:mt-5 lg:mt-20'>
+          {/* <p className='about-text text-[#CCBA97] font-bold text-xl md:text-2xl lg:text-4xl text-left'>Women In Engineering Hackathon</p> */}
+          {/* <hr className="border-t-2 border-[#CCBA97] w-[25.5%] mt-2" /> */}
           <p className='about-text text-[#CCBA97] font-medium text-lg md:text-xl lg:text-2xl'>The purpose of WEHack is to create an inclusive and encouraging environment for women, nonbinary genders, and all underrepresented groups in technology so that they can gain the skills and confidence to excel in future hackathons and the tech world.</p>
           <p className='about-text text-[#CCBA97] font-medium text-lg md:text-xl lg:text-2xl'>We aim to encourage more underrepresented individuals to harness their skills by creating software or hardware projects of their own. Whether it's networking with sponsors and hackers, gaining development and workshop experience, or competing against other teams for challenges and prizes, WEHack offers participants an opportunity to end the weekend with unique takeaways.</p>
         </div>

apps/web/src/app/sections/Countdown/Countdown.css

@@ -0,0 +1,105 @@
+.clock-wrapper {
+  position: relative;
+  width: min(90vw, 680px);
+  margin: 0 auto;
+
+}
+
+.countdown-heading {
+  text-align: left;
+  color: #F5E6C8;
+  font-family: var(--font-marcellus);
+  font-size: 2.2rem;
+  letter-spacing: 1px;
+
+  margin: 5rem 0 -6rem 7rem; /* ⬅️ remove the 5rem top margin */
+}
+
+
+.countdown {
+    margin-top: 0rem;
+}
+
+
+.clocks-image {
+  /* width: 80vw;
+  max-width: 750px; */
+  width: 75%;
+  height: auto;
+}
+
+/* Shared text style */
+.count-text {
+  position: absolute;
+  font-family: var(--font-marcellus);
+  font-weight: 400;
+  color: #fff;
+  text-align: center;
+
+  /* Default desktop size */
+  font-size: 4rem;
+
+  /* Helps readability on any background */
+  text-shadow:
+    0 0 16px rgba(255, 215, 130, 0.9);
+}
+
+/* Extra glow layer */
+.glow {
+  filter: drop-shadow(0 0 10px rgba(255, 200, 120, 0.9));
+}
+
+/* Positioning each number (percent-based → fully responsive) */
+
+/* MINUTES - top right clock */
+.count-text.minutes {
+  top: 29%;
+  left: 77.5%;
+  font-size: 3rem;
+  transform: translate(-50%, -50%);
+}
+
+/* HOURS - middle right Art Nouveau clock */
+.count-text.hours {
+  top: 58%;
+  left: 65%;
+  font-size: 3rem;;
+  transform: translate(-50%, -50%);
+}
+
+/* SECONDS - bottom right pocket watch */
+.count-text.seconds {
+  top: 76%;
+  left: 79.5%;
+  font-size: 3rem;
+  transform: translate(-50%, -50%);
+}
+
+/* DAYS - big main clock on left */
+.count-text.days {
+  top: 50%;
+  left: 34%;
+  font-size: 3rem;
+  transform: translate(-50%, -50%);
+}
+
+/* ------------------------- */
+/* RESPONSIVE: Mobile tweaks */
+/* ------------------------- */
+@media (max-width: 700px) {
+  .count-text {
+    font-size: 2.5rem;
+  }
+
+  .countdown-heading {
+    font-size: 1rem;
+    margin: 5rem 0rem -3rem 2rem;
+  }
+
+  .count-text.seconds,
+  .count-text.minutes,
+  .count-text.hours,
+  .count-text.days {
+    font-size: 1.5rem; /* Ensure all countdown numbers are smaller */
+  }
+}

apps/web/src/app/sections/Countdown/Countdown.tsx

@@ -1,16 +1,14 @@
 "use client";
 import React, { useEffect, useState } from 'react'
-import '../../sections/Jumbotron/Jumbotron.css'; // Import the Jumbotron CSS
-import Button from '@/components/Button/Button';
-import Menu from '../Menu/Menu';
+import './Countdown.css'
 
 function Countdown() {
   const [days, setDays] = useState(0);
   const [hours, setHours] = useState(0);
   const [minutes, setMinutes] = useState(0);
   const [seconds, setSeconds] = useState(0);
 
-  const target = new Date("4/5/2025 23:59:00");
+  const target = new Date("4/11/2026 08:00:00");
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -37,55 +35,33 @@ function Countdown() {
 
 
   return (
-    <section className='timer-container flex justify-center'>
-      <div className="timer-group pt-10 -mt-20 pb-24 md:-mt-20 md:pb-32 ">
-        {/* <div className="flex flex-col items-center justify-center pt-7">
-          <a href={"/register"} className="mentor-app text-md md:text-3xl mt-2" target="_blank">
-            <button className="primary-btn bg-[#A6CDC4] text-[#282738] py-4 px-5 md:px-10">Register</button>
-          </a>
-          <a href="http://www.tinyurl.com/wehack-25-mentor" className="mentor-app text-md md:text-3xl mt-10" target="_blank">
-            <button className="primary-btn bg-[#A6CDC4] text-[#282738] py-4 px-5 md:px-10">Mentor Applications</button>
-          </a>
-        </div> */}
-        {/* <Menu/> */}
-
-        <div className="countdown md:pt-10">
-          <div className="circle-container large flex flex-row justify-center">
-                <div className="circle bg-[rgba(255,233,215,0.68)] animate-pulse">
-                  <p>{days}</p>
-                </div>
-                <p className="label">Days</p>
-              </div>
-              <div className="circle-container medium">
-                <div className="circle bg-[rgba(255,233,215,0.68)] animate-pulse [animation-delay:500ms]">
-                  <p>{hours}</p>
-                </div>
-                <p className="label">Hours</p>
-              </div>
-              <div className="circle-container small">
-                <div className="circle bg-[rgba(255,233,215,0.68)] animate-pulse [animation-delay:300ms]">
-                  <p>{minutes}</p>
-                </div>
-                <p className="label">Minutes</p>
-              </div>
-              <div className="circle-container smallest">
-                <div className="circle bg-[rgba(255,233,215,0.68)] animate-pulse [animation-delay:1500ms]">
-                  <p>{seconds}</p>
-                </div>
-                <p className="label">Seconds</p>
-              </div>
+
 
-              <div>
-                <img 
-                  className="h-auto w-[13rem] md:w-[14rem] md:translate-y-20 md:pt-16 lg:pt-0 lg:w-[15rem] scale-x-[-1]"  
-                  src={"/img/static/images/Raccoon_Popcorn.svg"} 
-                  alt="a raccoon sitting" 
-                  loading="eager"
-                />
-              </div>
-            </div>
+    <section className="timer-container" id="countdown">
+        <div className="timer-group">
+          <p className="countdown-heading">Unlock the Secrets of the Museum in...</p>
+          <div className="countdown clock-wrapper">
+            <img 
+              src="img/static/images/Group 80.png"
+              alt="Countdown Clocks"
+              className="clocks-image"
+            />
+
+            {/* DAYS */}
+            <p className="count-text glow days">{days}</p>
+
+            {/* HOURS */}
+            <p className="count-text glow hours">{hours}</p>
+
+            {/* MINUTES */}
+            <p className="count-text glow minutes">{minutes}</p>
+
+            {/* SECONDS */}
+            <p className="count-text glow seconds">{seconds}</p>
           </div>
-    </section>
+
+      </div>
+</section>
   );
 }
 

apps/web/src/app/sections/FAQ/FAQ.tsx

@@ -1,28 +1,21 @@
 import React from 'react'
 import './FAQ.css'
 import Question from '@/components/Question/Question'
-import Image from 'next/image'
 
 function FAQ() {
   return (
     <div className='FAQ-container w-full h-auto flex flex-wrap flex-col items-center justify-center p-6 pb-40 lg:pb-24 pt-20' id="FAQ">
 
         <div className="title-container flex flex-col">      
-            <div className="header-container pb-12 md:pb-24 lg:pb-36 flex flex-col md:flex-row gap-x-10">
-                <div className="flex justify-start pb-5 -ml-8">
-                    {/* <img src="/static/images/sparkles.png" className="-rotate-[10deg] h-auto max-w-32 md:max-w-auto"></img> */}
+            <div className="header-container pb-1 md:pb-1 lg:pb-2 flex flex-col md:flex-row gap-x-10">
+                <div className="flex justify-start pb-2 -ml-8">
+                    <img src="img/static/images/FAQ.webp" className="h-auto w-full max-w-[800px] md:max-w-[1000px] lg:max-w-[1200px]"></img>
                 </div>
-
-                <div className="glow">
-                    <h1 className='FAQ-title text-[#992444] text-center text-4xl md:text-5xl lg:text-5xl'>Frequently Asked Questions</h1>
-                </div>
-
             </div>
         </div>
 
-        <div className='drop-down-container gap-0 mt-5 lg:-mt-12 lg:gap-0 lg:px-14'>
+        <div className='drop-down-container gap-0 mt-3 lg:-mt-8 lg:gap-0 lg:px-14'>
             <div className='column-right w-full lg:w-2/2'>
-                {/* <div className='questions-container flex flex-wrap items-center justify-center gap-0'> */}
                 <div className='questions-container flex flex-col items-stretch justify-start gap-0 w-full'>
                     {dataColOne.map((FAQ, index) => (
                         <div className='flex flex-wrap items-center justify-center w-full' key={index}>
@@ -34,8 +27,8 @@ function FAQ() {
             </div>
         </div>
 
-        <div className="vinyl-blue-container overflow-x-hidden flex justify-center md:justify-end lg:justify-end md:-ml-[10rem] lg:-ml-[25rem] xl:-ml-[45rem] pt-20 pb-72 md:pt-16 md:pb-72">
-            <Image className="vinyl overflow-x-hidden" src={"/img/static/images/Untitled_Artwork 4.png"} width={300} height={300} alt="a blue vinyl spinning"/> 
+        <div className="vinyl-blue-container flex justify-center md:justify-end lg:justify-end md:-ml-[10rem] lg:-ml-[25rem] xl:-ml-[45rem] pt-20 pb-72 md:pt-16 md:pb-72">
+            <img className="vinyl" src="img/static/images/minutes1 2 (2).png" width="300px" height="300px"></img>    
         </div>
 
 
@@ -52,7 +45,7 @@ const dataColOne = [
 
     {
         question: "When and where is WEHack?",
-        answer: "WEHack 2025 will be held in person in the Engineering and Computer Science West (ECSW) building at the University of Texas at Dallas. WEHack 2025 dates will be released soon!",
+        answer: "WEHack 2026 will be held in person in the Engineering and Computer Science West (ECSW) building at the University of Texas at Dallas. WEHack 2026 dates will be released soon!",
     },
 
     {
@@ -62,7 +55,7 @@ const dataColOne = [
 
     {
         question: "How do I apply?",
-        answer: "Hackers can register via the link at the top of the page. Mentor and volunteer applications will be posted soon! Registration for WEHack 2025 will be released in December 2024.",
+        answer: "Hackers can register via the link at the top of the page. Mentor and volunteer applications will be posted soon! Registration for WEHack 2026 will be released in December 2025.",
     },
 
     {

apps/web/src/app/sections/Footer/Footer.css

@@ -11,8 +11,6 @@
 }
 
 .nav-link:hover {
-    /*Updated cursor*/
-    cursor: url('/img/static/images/cursor-img.png') 16 16, auto;    
     text-shadow: 0rem 0rem 1rem white;
     transition: 0.3s ease-in-out;
 }