-
+
Register
diff --git a/apps/web/src/app/sections/About/About.tsx b/apps/web/src/app/sections/About/About.tsx
index d986e9b..21ae787 100644
--- a/apps/web/src/app/sections/About/About.tsx
+++ b/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 (
{/* group 1 */}
-
-
+
+
-
+
+ {/*
Women In Engineering Hackathon
*/}
+ {/*
*/}
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.
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.
diff --git a/apps/web/src/app/sections/Countdown/Countdown.css b/apps/web/src/app/sections/Countdown/Countdown.css
new file mode 100644
index 0000000..73c7219
--- /dev/null
+++ b/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 */
+ }
+}
diff --git a/apps/web/src/app/sections/Countdown/Countdown.tsx b/apps/web/src/app/sections/Countdown/Countdown.tsx
index bd76018..52f656b 100644
--- a/apps/web/src/app/sections/Countdown/Countdown.tsx
+++ b/apps/web/src/app/sections/Countdown/Countdown.tsx
@@ -1,8 +1,6 @@
"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);
@@ -10,7 +8,7 @@ function Countdown() {
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 (
-
-
- {/*
*/}
- {/*
*/}
-
-
-
-
-
-
+
-
-
-
-
+
+
+
Unlock the Secrets of the Museum in...
+
+
+
+ {/* DAYS */}
+
{days}
+
+ {/* HOURS */}
+
{hours}
+
+ {/* MINUTES */}
+
{minutes}
+
+ {/* SECONDS */}
+
{seconds}
-
+
+
);
}
diff --git a/apps/web/src/app/sections/FAQ/FAQ.tsx b/apps/web/src/app/sections/FAQ/FAQ.tsx
index 52d2e95..b6200c5 100644
--- a/apps/web/src/app/sections/FAQ/FAQ.tsx
+++ b/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 (
-
-
- {/*
*/}
+
+
+
-
-
-
Frequently Asked Questions
-
-
-
+
- {/*
*/}
{dataColOne.map((FAQ, index) => (
@@ -34,8 +27,8 @@ function FAQ() {
-
-
+
+
@@ -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.",
},
{
diff --git a/apps/web/src/app/sections/Footer/Footer.css b/apps/web/src/app/sections/Footer/Footer.css
index f21479f..506d464 100644
--- a/apps/web/src/app/sections/Footer/Footer.css
+++ b/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;
}
\ No newline at end of file
diff --git a/apps/web/src/app/sections/Footer/Footer.tsx b/apps/web/src/app/sections/Footer/Footer.tsx
index 31b3fac..c236df2 100644
--- a/apps/web/src/app/sections/Footer/Footer.tsx
+++ b/apps/web/src/app/sections/Footer/Footer.tsx
@@ -3,8 +3,9 @@ import "./Footer.css";
function Footer() {
return (
-
-
+
+ {/* Main Container */}
+
-
-
-
+
+ {/* Navigation and Contact Sections */}
+
+
+ {/* Navigation */}
+
Navigation
@@ -44,7 +48,7 @@ function Footer() {
Sponsors
@@ -68,7 +72,9 @@ function Footer() {
MLH Conduct
-
+
+ {/* Contact Us */}
+
Contact Us
@@ -108,11 +114,20 @@ function Footer() {
X
+
-
+ {/* Other Hackathons */}
+
+
+ {/* New Column with Image */}
+
+
-
);
diff --git a/apps/web/src/app/sections/Jumbotron/Jumbotron.css b/apps/web/src/app/sections/Jumbotron/Jumbotron.css
index 8837d2c..a5b9bbf 100644
--- a/apps/web/src/app/sections/Jumbotron/Jumbotron.css
+++ b/apps/web/src/app/sections/Jumbotron/Jumbotron.css
@@ -17,7 +17,7 @@
background-position:
/* top left,
bottom 420px right 0, */
- center;
+ top center;
padding: 2rem 1rem;
display: flex;
flex-direction: column;
@@ -64,7 +64,7 @@
.jumbo-text {
- font-family: var(--font-gantari);
+ font-family: var(--font-marcellus);
}
.countdown-container {
@@ -80,7 +80,7 @@
flex-wrap: wrap;
width: 100%;
position: relative;
- margin-top: 1rem;
+ margin-top: 8rem;
margin-bottom: 6rem;
gap: 3rem;
}
@@ -100,14 +100,14 @@
border-radius: 50%;
box-shadow: 0px 25px 101.5px #D2AF71;
color: #755642;
- font-family: var(--font-marcellus);
+ font-family: var(--font-righteous);
}
.label {
color: #CCBA97;
margin-top: 1rem;
font-size: 12px;
- font-family: var(--font-marcellus);
+ font-family: var(--font-darker-grotesque);
}
/* Circle Sizes & Text Sizes */
@@ -166,79 +166,42 @@
/* Media Queries */
@media (max-width: 780px) {
- .jumbo-title {
- line-height: 1.2;
- }
-
- .jumbo-text {
- font-size: 1rem;
- }
-
- /* Make all circles the same size on mobile */
- .circle-container.large .circle,
- .circle-container.medium .circle,
- .circle-container.small .circle,
- .circle-container.smallest .circle {
- width: 4.5rem;
- height: 4.5rem;
- }
-
- /* Uniform text size for all circles on mobile */
- .circle-container.large p,
- .circle-container.medium p,
- .circle-container.small p,
- .circle-container.smallest p {
- font-size: 1.2rem;
- }
-
- .countdown-container {
- padding: 2rem 1rem;
- }
-
- .countdown {
- margin-top: 5rem;
- margin-bottom: 2rem;
- gap: 1.5rem;
- }
-
- .circle-container {
- margin: 0;
+ .jumbotron {
+ display: flex;
+ flex-direction: column;
+ justify-content: center; /* Center content vertically */
+ align-items: center; /* Center content horizontally */
+ min-height: 100vh; /* Ensure the jumbotron takes up the full viewport height */
+ background-size: cover;
+ background-position: top left;
}
- /* Reset all vertical positioning on mobile */
- .circle-container.large,
- .circle-container.medium,
- .circle-container.small,
- .circle-container.smallest {
- transform: translateY(0);
+ .jumbo-group {
+ display: flex;
+ flex-direction: column;
+ align-items: center; /* Center the title horizontally */
+ justify-content: center; /* Center the title vertically */
+ text-align: center; /* Center-align the text */
+ margin-top: 0; /* Remove any top margin */
}
- /* .wehack-stats-mascot {
- width: 9rem;
- height: 9rem;
- margin: 0;
- padding: 0;
- object-fit: contain;
- max-width: none;
- } */
-
- .jumbo-buttons {
- scale: 0.8; /* This will make the button 80% of its original size */
- margin: 0.5rem 0;
+ .jumbo-title {
+ font-size: 2.5rem; /* Adjust font size for smaller screens */
+ text-align: center;
+ line-height: 3rem;
+ text-shadow: 0rem 0rem 5rem black,
+ 2px 2px 5px rgba(0, 0, 0, 0.7);
}
- .jumbotron {
- min-height: 100vh;
- background-size:
- /* 200px auto,
- 200px auto, */
- cover;
- background-position:
- /* top left,
- bottom 150px right 0, */
- center;
+ .jumbo-text {
+ font-size: 1.5rem; /* Adjust font size for smaller screens */
+ text-align: center;
+ font-weight: 300;
+ text-shadow: 0rem 0rem 5rem black,
+ 1px 1px 3px rgba(0, 0, 0, 0.5);
}
}
+
@media (min-width: 1024px) {
.jumbotron {
@@ -247,5 +210,5 @@
}
.circle p {
- font-family: var(--font-marcellus);
+ font-family: var(--font-junge);
}
\ No newline at end of file
diff --git a/apps/web/src/app/sections/Jumbotron/Jumbotron.tsx b/apps/web/src/app/sections/Jumbotron/Jumbotron.tsx
index f7387e8..8564d78 100644
--- a/apps/web/src/app/sections/Jumbotron/Jumbotron.tsx
+++ b/apps/web/src/app/sections/Jumbotron/Jumbotron.tsx
@@ -1,90 +1,20 @@
"use client";
import React, { useEffect, useState } from 'react'
import './Jumbotron.css'
-import Button from '@/components/Button/Button';
function Jumbotron() {
- 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");
-
- useEffect(() => {
- const interval = setInterval(() => {
- const now = new Date();
- const difference = target.getTime() - now.getTime();
-
- if (difference > 0) {
- const d = Math.floor(difference / (1000 * 60 * 60 * 24));
- const h = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
- const m = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
- const s = Math.floor((difference % (1000 * 60)) / 1000);
-
- setDays(d);
- setHours(h);
- setMinutes(m);
- setSeconds(s);
- } else {
- clearInterval(interval);
- }
- }, 1000);
-
- return () => clearInterval(interval); // Clear the interval on unmount
- }, [target]);
-
-
return (
-
WEHack 2026 Presents
+
WEHack 2026 Presents
The Night at the Museum
-
April 11-12 2026
+
April 11th-12th
{/*
-
- {/* Countdown Timer Here */}
-
- {/*
-
-
-
-
-
-
-
-
-
*/}
diff --git a/apps/web/src/app/sections/Sponsor/Sponsor.css b/apps/web/src/app/sections/Sponsor/Sponsor.css
index eb2a328..3b51fea 100644
--- a/apps/web/src/app/sections/Sponsor/Sponsor.css
+++ b/apps/web/src/app/sections/Sponsor/Sponsor.css
@@ -1,161 +1,212 @@
-/*
- * NOTE: The 4-column layout is handled by Tailwind classes on the
- * 'Sponsor-logos' element in the React component (e.g., grid md:grid-cols-4).
-*/
-
-/* ========================================= */
-/* 1. MAIN CONTAINER (.Sponsor-container) */
-/* ========================================= */
+/* --- General and Large Screen Styles (Existing Code) --- */
+/* General container background */
.Sponsor-container {
- width: 100%;
- height: auto;
- /* Grid/Flex handling is deferred to Tailwind classes */
- gap:0px;
- justify-items: center;
- align-items: center;
- padding: 1.5rem;
- padding-bottom: 10rem;
+ background-size: cover;
+ background-repeat: repeat;
+ min-height: 100vh;
}
.Sponsor-title {
- text-shadow: 0rem 0rem 3rem white;
-}
-
-.Sponsor-logos {
- /* No layout properties here */
+ font-family: 'Garamond', 'Times New Roman', serif;
+ color: #E0E0E0;
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
-/* ========================================= */
-/* 2. LOGO CONTAINER (.Sponsor-logo) */
-/* Styles the vase background shape */
-/* ========================================= */
+/* ** Element Sizing & Styles ** */
-.Sponsor-logo {
- /* VASE BACKGROUND STYLING */
- background-image: var(--vase-image); /* Uses the path passed from React */
- background-color: transparent;
- background-size: contain;
+/* Vase Item container and background image styling */
+.Vase-item {
background-repeat: no-repeat;
background-position: center;
-
- /* LAYOUT & SIZING */
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- overflow: hidden;
-
- /* DIMENSIONS & SPACING */
- width: 100%;
- min-height: 200px; /* Base height for visibility */
- padding: 0;
- /* Margin is set to 0 to prevent accidental shifting and allow Tailwind gap to manage spacing */
- margin: 0;
-
- /* AESTHETICS */
- border-radius: 0;
- transition: box-shadow 0.3s ease;
+ background-size: contain;
+ filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4)); /* Shadow for 3D effect */
+ width: 100%; /* Take full width of the flex container */
+ height: 100%; /* Take full height of the flex container */
+ transition: transform 0.3s ease-in-out;
}
-.Sponsor-logo:hover {
- box-shadow: 0rem 0rem 1.5rem white;
- border-radius: 0;
+
+/* Specific sizing for the vases (These only take effect on larger screens) */
+.Vase-item.vase-style-1 { max-width: 350px; max-height: 200px; margin-left: 80px;}
+.Vase-item.vase-style-2 { max-width: 250px; max-height: 200px; margin-left: 60px; }
+.Vase-item.vase-style-3 { max-width: 250px; max-height: 200px; margin-left: 60px;}
+.Vase-item.vase-style-4 { max-width: 140px; max-height: 160px; }
+.Vase-item.vase-style-5 { max-width: 300px; max-height: 300px; margin-left: 80px; margin-bottom: 80px;}
+.Vase-item.vase-style-6 { max-width: 300px; max-height: 200px; margin-bottom: 0px; }
+.Vase-item.vase-style-7 { max-width: 180px; max-height: 180px; margin-bottom: 30px; margin-left:40px;}
+.Vase-item.vase-style-8 { max-width: 180px; max-height: 180px; margin-bottom: 30px; margin-right: 40px;}
+.Vase-item.vase-style-9 { max-width: 300px; max-height: 200px; margin-bottom: -5px; margin-left:60px; margin-right: -65px;}
+.Vase-item.vase-style-10 { max-width: 180px; max-height: 180px; margin-bottom: -5px; margin-left:40px;}
+/* Base style for the Sponsor placeholder (parent of both box and vase) */
+.Sponsor-placeholder {
+ /* Base styles for boxes */
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
-/* ========================================= */
-/* 3. INNER LOGO IMAGE (.sponsor-img) */
-/* The actual logo that sits inside the vase */
-/* ========================================= */
+/* Margin only around sponsor BOXES in the specific Row */
+.Sponsor-placeholder.sponsor-row-2-box {
+ margin: -32px;
+ margin-right: 50px;
+ margin-top: 5px;
+}
-.sponsor-img {
- /* SIZING: Adjust to fit inside the vase opening */
- max-width: 50%;
- max-height: 50%;
- height: auto;
-
- /* VISUAL & LAYERING */
- display: block;
- z-index: 2;
- transition: opacity 0.3s ease;
+.Sponsor-placeholder.sponsor-row-3-box {
+ margin: 30px;
+ margin-left: 0px;
}
-.Sponsor-logo:hover .sponsor-img {
- opacity: 0;
+/* Reset base style for Vases */
+.Sponsor-placeholder:has(.Vase-item) {
+ background: none;
+ border: none;
+ box-shadow: none;
}
-/* ========================================= */
-/* 4. HOVER PSEUDO-ELEMENT (::before) */
-/* Displays the alternate (hover) logo */
-/* ========================================= */
+/* ** Glow Effect on Hover ** */
-.Sponsor-logo::before {
- content: '';
- display: block;
+.Sponsor-placeholder:not(:has(.Vase-item)):hover {
+ box-shadow: 0 0 25px 5px rgba(135, 206, 250, 0.7),
+ 0 0 10px 2px rgba(135, 206, 250, 0.5) inset;
+ transform: translateY(-5px) scale(1.02);
+ border-color: rgba(135, 206, 250, 0.5);
+ cursor: pointer;
- /* POSITIONING */
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-
- /* BACKGROUND IMAGE (The Hover Logo) */
- background-image: var(--hover-image);
- background-size: 50%;
- background-position: center;
- background-repeat: no-repeat;
-
- /* TRANSITION */
- opacity: 0;
- transition: opacity 0.3s ease;
- z-index: 1;
}
-.Sponsor-logo:hover::before {
- opacity: 1;
+.Sponsor-placeholder:has(.Vase-item):hover .Vase-item {
+ filter: drop-shadow(0 0 15px rgba(135, 206, 250, 0.7)) drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4));
+ transform: translateY(-5px) scale(1.02);
+ cursor: pointer;
}
-/* ========================================= */
-/* 5. EFFECTS AND ANIMATIONS */
-/* ========================================= */
-
-.vinyl-yellow {
- position: absolute;
- -webkit-animation: spinCC 4s linear infinite;
- -moz-animation: spinCC 4s linear infinite;
- animation: spinCC 4s linear infinite;
+.Sponsor-placeholder:hover .Box-content img {
+ opacity: 1;
+ filter: brightness(1.2);
}
-.glow-sponsor {
- filter: drop-shadow(0 0 20px #992444);
- transform: rotate(5deg);
+.sponsor-text-container .sponsor-text {
+ font-family: var(--font-marcellus), sans-serif;
}
-/* ANIMATION KEYFRAMES for spinCC */
-@-moz-keyframes spinCC {
- 100% { -moz-transform: rotate(-360deg); }
-}
-@-webkit-keyframes spinCC {
- 100% { -webkit-transform: rotate(-360deg); }
+/* ---------------------------------------------------------------- */
+/* --- RESPONSIVE CAROUSEL STYLES (Applies to small screens) --- */
+/* ---------------------------------------------------------------- */
+
+@media (max-width: 768px) {
+ /* * 1. Target the row container to enable the carousel behavior (No change needed here) */
+ .Sponsor-row {
+ /* Override Tailwind's grid setup for the carousel */
+ display: flex;
+ grid-template-columns: none; /* Disable the 5-column grid */
+
+ /* Enable horizontal scrolling */
+ overflow-x: scroll;
+ overflow-y: hidden;
+
+ /* Prevent content from wrapping to the next line (core carousel functionality) */
+ white-space: nowrap;
+
+ /* Ensure gap is applied between flex items */
+ gap: 20px !important; /* Use !important to ensure it overrides Tailwind's gap utility */
+
+ /* Hide the scrollbar for a cleaner look */
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ padding-bottom: 5px; /* Space for hidden scrollbar */
+
+ /* === REMOVED SCROLL CUE: Gradient mask is gone === */
+ mask-image: none;
+ -webkit-mask-image: none;
+ }
+
+ /* Hide the scrollbar for Webkit browsers (Chrome, Safari) */
+ .Sponsor-row::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* * 2. Make each sponsor/vase item (the placeholder) a fixed width */
+ .Sponsor-placeholder {
+ /* Prevents the item from shrinking/growing to fill space */
+ flex-shrink: 0;
+ flex-grow: 0;
+
+ /* * NEW SCROLL CUE: Set width to 44%. This forces 2.2 items to be visible,
+ * ensuring the 3rd item is always partially clipped by the viewport.
+ */
+ min-width: 44%;
+ max-width: 44%;
+ width: 44%;
+ }
+
+ /* * 3. Adjust Vases to ensure they fill the new placeholder width */
+ .Sponsor-placeholder:has(.Vase-item) {
+ /* Vases must use the same width calculation as the standard box items for consistent layout */
+ min-width: 44%;
+ max-width: 44%;
+ width: 44%;
+ }
+
+ /* Reset specific vase sizing so they scale to the new container size (No change needed here) */
+ .Vase-item.vase-style-1,
+ .Vase-item.vase-style-2,
+ .Vase-item.vase-style-3,
+ .Vase-item.vase-style-4,
+ .Vase-item.vase-style-5,
+ .Vase-item.vase-style-6,
+ .Vase-item.vase-style-7,
+ .Vase-item.vase-style-8 {
+ /* Overrides the max-width/height from the general styles for carousel view */
+ max-width: 100%;
+ max-height: 100%;
+ width: 100%; /* Take full width of its container */
+ height: 100%;
+ }
}
-@keyframes spinCC {
- 100% {
- -webkit-transform: rotate(-360deg);
- transform: rotate(-360deg);
- }
+
+/* --- Headers Styles (Copied from Headers.css for consistency) --- */
+/* Header 3 - Golden Frame */
+.header-3 {
+ font-size: 2rem;
+ font-family: var(--font-cinzel-decorative);
+ background: #FFF7DA; /* Light linen background */
+ border: 5px solid #FFB412; /* Golden border */
+ padding: 1rem 1.5rem;
+ text-align: center;
+ margin: 2rem auto;
+ width: 75%;
+ max-width: 1200px;
+ position: relative;
+ box-shadow: 0 4px 8px rgba(77, 190, 255, 0.4); /* Golden shadow */
+ margin-bottom: 4rem;
}
-/* ========================================= */
-/* 6. MEDIA QUERIES */
-/* ========================================= */
+.header-3 h1 {
+ color: #4C4C4C; /* Dark golden text */
+}
-/* Note: The large margin rules were removed to fix the right shift.
- If you need spacing, adjust the 'gap-4' in the React component. */
-@media (min-width: 793px) {
- /* Currently empty, but ready for future adjustments */
+/* Responsive styles */
+@media (max-width: 768px) {
+ .header-1, .header-2, .header-3 {
+ padding: 1rem 1.5rem; /* Reduce padding for smaller screens */
+ max-width: 90%; /* Adjust width to fit smaller screens */
+ }
+
+ .header-1 h1, .header-2 h1, .header-3 h1 {
+ font-size: 1.5rem; /* Reduce font size for smaller screens */
+ letter-spacing: 1px; /* Adjust letter spacing */
+ }
}
-@media (min-width: 1100px) {
- /* Currently empty */
+@media (max-width: 480px) {
+ .header-1, .header-2, .header-3 {
+ padding: 0.75rem 1rem; /* Further reduce padding for very small screens */
+ border-width: 8px; /* Reduce border thickness */
+ }
+
+ .header-1 h1, .header-2 h1, .header-3 h1 {
+ font-size: 1.25rem; /* Further reduce font size */
+ letter-spacing: 0.5px; /* Adjust letter spacing */
+ }
}
\ No newline at end of file
diff --git a/apps/web/src/app/sections/Sponsor/Sponsor.tsx b/apps/web/src/app/sections/Sponsor/Sponsor.tsx
index 71ae7a3..11e29b7 100644
--- a/apps/web/src/app/sections/Sponsor/Sponsor.tsx
+++ b/apps/web/src/app/sections/Sponsor/Sponsor.tsx
@@ -1,61 +1,208 @@
import React from 'react';
import './Sponsor.css';
-const sponsors = [
- // NOTE: Added a 'vase' property for the background image path
- { default: '/static/images/sample_sponsors/statefarm_logo_brown.png', hover: '/static/images/sample_sponsors/statefarm_logo.png', vase: '/static/images/sponsor_vases/A2-trimmed.png' },
- { default: '/static/images/sample_sponsors/jpmorgan_logo_brown.png', hover: '/static/images/sample_sponsors/jpmorgan_logo.png', vase: '/static/images/sponsor_vases/A2-trimmed.png' },
- { default: '/static/images/sample_sponsors/axxess_logo_brown.png', hover: '/static/images/sample_sponsors/axxess_logo.png', vase: '/static/images/sponsor_vases/A2-trimmed.png' },
- { default: '/static/images/sample_sponsors/statefarm_logo_brown.png', hover: '/static/images/sample_sponsors/statefarm_logo.png', vase: '/static/images/sponsor_vases/A7-trimmed.png' },
- { default: '/static/images/sample_sponsors/jpmorgan_logo_brown.png', hover: '/static/images/sample_sponsors/jpmorgan_logo.png', vase: '/static/images/sponsor_vases/A2-trimmed.png' },
- { default: '/static/images/sample_sponsors/axxess_logo_brown.png', hover: '/static/images/sample_sponsors/axxess_logo.png', vase: '/static/images/sponsor_vases/A2-trimmed.png' },
- { default: '/static/images/sample_sponsors/axxess_logo_brown.png', hover: '/static/images/sample_sponsors/axxess_logo.png', vase: '/static/images/sponsor_vases/A7-trimmed.png' },
- { default: '/static/images/sample_sponsors/axxess_logo_brown.png', hover: '/static/images/sample_sponsors/axxess_logo.png', vase: '/static/images/sponsor_vases/A8-trimmed.png' }
+// --- VASE ASSET PATHS ---
+const VASE_A1 = 'img/static/images/sponsor_vases/A3-trimmed.png';
+const VASE_A2 = 'img/static/images/sponsor_vases/A2-trimmed.png';
+const VASE_A3 = 'img/static/images/sponsor_vases/A3-trimmed.png';
+const VASE_A4 = 'img/static/images/sponsor_vases/A4-trimmed.png';
+const VASE_A5 = 'img/static/images/sponsor_vases/A5-trimmed.png';
+const VASE_A6 = 'img/static/images/sponsor_vases/A6-trimmed.png';
+const VASE_A7 = 'img/static/images/sponsor_vases/A7-trimmed.png';
+const VASE_A8 = 'img/static/images/sponsor_vases/A8-trimmed.png';
+
+const LOGO_STATEFARM = 'img/static/images/sponsors/statefarm_bronze.png';
+const LOGO_CBRE = 'img/static/images/sponsors/cbre_gold.png';
+const LOGO_VERIZON = 'img/static/images/sponsors/verizon_gold.svg';
+const LOGO_CAPITAL_ONE = 'img/static/images/sponsors/capital_one_silver.png';
+const LOGO_HCSC = 'img/static/images/sponsors/hcsc_logo.png';
+const LOGO_CODEPATH = 'img/static/images/sponsors/codepath_bronze.png';
+const LOGO_NH = 'img/static/images/sponsors/nh_logo.png';
+const LOGO_AXXESS = 'img/static/images/sponsors/axxess_bronze.png';
+const LOGO_DFW_ATW = 'img/static/images/sponsors/dfw_atw_bronze.png';
+
+
+// Define grid item structure
+interface GridItem {
+ id: number;
+ type: 'vase' | 'box';
+ imagePath: string;
+ vaseClass?: string;
+}
+
+// Row tier labels
+const rowTitles: Record
= {
+ 1: "GOLD SPONSORS",
+ 2: "SILVER SPONSORS",
+ 3: "BRONZE SPONSORS",
+ 4: null
+};
+
+// --- 20 GRID ITEMS ---
+const dummySponsors: GridItem[] = [
+
+ { id: 2, type: 'vase', imagePath: VASE_A5, vaseClass: 'vase-style-6' },
+ { id: 4, type: 'box', imagePath: LOGO_VERIZON },
+ { id: 5, type: 'vase', imagePath: VASE_A2, vaseClass: 'vase-style-9' },
+ { id: 3, type: 'box', imagePath: LOGO_CBRE },
+ { id: 1, type: 'vase', imagePath: VASE_A1, vaseClass: 'vase-style-1' },
+
+ { id: 6, type: 'vase', imagePath: VASE_A6, vaseClass: 'vase-style-6' },
+ { id: 10, type: 'vase', imagePath: VASE_A7, vaseClass: 'vase-style-10' },
+ { id: 9, type: 'box', imagePath: LOGO_CAPITAL_ONE },
+ { id: 7, type: 'vase', imagePath: VASE_A3, vaseClass: 'vase-style-6' },
+ { id: 8, type: 'vase', imagePath: VASE_A4, vaseClass: 'vase-style-6' },
+
+ { id: 11, type: 'vase', imagePath: VASE_A5, vaseClass: 'vase-style-6' },
+ { id: 13, type: 'box', imagePath: LOGO_HCSC },
+ { id: 14, type: 'box', imagePath: LOGO_CODEPATH },
+ { id: 15, type: 'box', imagePath: LOGO_STATEFARM },
+ { id: 12, type: 'vase', imagePath: VASE_A7, vaseClass: 'vase-style-6' },
+
+ { id: 16, type: 'box', imagePath: LOGO_NH },
+ { id: 20, type: 'vase', imagePath: VASE_A8, vaseClass: 'vase-style-8' },
+ { id: 17, type: 'box', imagePath: LOGO_DFW_ATW },
+ { id: 19, type: 'vase', imagePath: VASE_A2, vaseClass: 'vase-style-7' },
+ { id: 18, type: 'box', imagePath: LOGO_AXXESS },
];
-function Sponsor() {
+// Size rules
+const getBoxSizeClass = (id: number, type: 'vase' | 'box'): string => {
+ const row = Math.ceil(id / 5);
+
+ if (type === 'box') {
+ switch (row) {
+ // Largest boxes
+ case 1:
+ return 'h-64 md:h-72 lg:h-64 w-72';
+
+ // Medium boxes
+ case 2:
+ return 'h-48 md:h-56 lg:h-64 w-72';
+
+ // Small boxes
+ case 3:
+ return 'h-32 md:h-36 lg:h-40 w-48';
+
+ case 4:
+ return 'h-32 md:h-36 lg:h-40 w-48';
+
+ default:
+ return 'h-20';
+ }
+ }
+
+
+ if (type === 'vase') {
+ switch (row) {
+ case 1: return 'h-48 md:h-64 lg:h-80';
+ case 2: return 'h-44 md:h-60 lg:h-72';
+ case 3: return 'h-40 md:h-56 lg:h-64';
+ case 4: return 'h-36 md:h-52 lg:h-56';
+ default: return 'h-48 md:h-64';
+ }
+ }
+
+ return '';
+};
+
+// Group items into rows
+const groupedSponsors = dummySponsors.reduce((acc, item) => {
+ const row = Math.ceil(item.id / 5);
+ if (!acc[row]) acc[row] = [];
+ acc[row].push(item);
+ return acc;
+}, {} as Record);
+
+const Sponsor: React.FC = () => {
return (
-
![{"Dallas']({"img/static/images/About.webp"})
![a raccoon sitting]({"/img/static/images/Raccoon_Popcorn.svg"})
- 
+
+ {/* DAYS */}
+ 
*/}
+ 
.png)
![]({"/img/static/images/white)
![a bear trying to catch a butterfly]({"/static/images/raccoon)
- 
- 
- 
+
+ {/* Bottom-left cat eyes (toggles open/closed) */}
- {/* Title Box
- 
{
diff --git a/apps/web/src/components/shared/Nav.css b/apps/web/src/components/shared/Nav.css
index 4c750b4..81e58c4 100644
--- a/apps/web/src/components/shared/Nav.css
+++ b/apps/web/src/components/shared/Nav.css
@@ -2,7 +2,7 @@ a:hover {
/* background-color:#4A3628;
border-radius:1rem; */
/* Updated cursor with icon */
- cursor: url('/img/static/images/cursor-img.png') 16 16, auto;
+ cursor: pointer;
text-shadow: 0rem 0rem 1rem white;
transition: 0.3s ease-in-out;
}
diff --git a/apps/web/src/components/shared/Navbar.tsx b/apps/web/src/components/shared/Navbar.tsx
index 78b2b70..64e7305 100644
--- a/apps/web/src/components/shared/Navbar.tsx
+++ b/apps/web/src/components/shared/Navbar.tsx
@@ -59,7 +59,7 @@ export default async function Navbar({ className }: NavbarProps) {
Sponsors