Feature: feat/hacklytics-bloom to dev

sites/hacklytics2027/app/page.tsx

@@ -3,46 +3,12 @@ import React, { useState, useEffect, useSyncExternalStore } from "react";
 import HomeSections from "@/components/HomeSections";
 import PixelGarden, { PixelGround } from "@/components/pixel/PixelGarden";
 import PixelSprite from "@/components/pixel/PixelSprite";
-import { BLOOM, DAISY, SPROUT, TULIP } from "@/components/pixel/sprites";
+import { DAISY, SPROUT, TULIP } from "@/components/pixel/sprites";
 import { INTEREST_HINT, INTEREST_URL } from "@/lib/links";
 
-// ─── Elegant Floral Background ─────────────────────────────────────────────
+// ─── Background: two soft color fields ────────────────────────────────────
 const FloralBackground = () => (
   <div className="fixed inset-0 z-0 pointer-events-none overflow-hidden bg-[#020204]">
-    {/* Subtle grid base */}
-    <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiLz48L3N2Zz4=')] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_80%)]" />
-
-    {/* Center digital bloom (rotating lotus).
-        No backdrop-blur on the petals: they sit over a near-black backdrop, so
-        the blur produced nothing visible while forcing 20 full-screen readbacks
-        per frame while rotating. Gradients alone look identical here. */}
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] opacity-30 animate-spin-slow">
-      {Array.from({ length: 12 }).map((_, i) => (
-        <div
-          key={i}
-          className="absolute inset-0 rounded-full border border-bloom-pink/20 bg-gradient-to-t from-bloom-pink/10 to-transparent"
-          style={{
-            transform: `rotate(${i * 30}deg) scaleY(2.5) scaleX(0.3)`,
-            transformOrigin: "center center",
-          }}
-        />
-      ))}
-    </div>
-
-    {/* Secondary Bloom */}
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] opacity-20 animate-spin-slow" style={{ animationDirection: 'reverse', animationDuration: '40s' }}>
-      {Array.from({ length: 8 }).map((_, i) => (
-        <div
-          key={i}
-          className="absolute inset-0 rounded-full border border-bloom-cyan/30 bg-gradient-to-t from-bloom-cyan/15 to-transparent"
-          style={{
-            transform: `rotate(${i * 45}deg) scaleY(2) scaleX(0.4)`,
-            transformOrigin: "center center",
-          }}
-        />
-      ))}
-    </div>
-
     {/* Ambient light fields — static radial gradients instead of pulsing
         blur() layers, which re-rasterized a 50vw surface every frame. */}
     <div
@@ -85,19 +51,19 @@ const Countdown: React.FC<{ targetDate: Date }> = ({ targetDate }) => {
 
   const units = [
     { label: "Days",    value: timeLeft?.days,    color: "text-white" },
-    { label: "Hours",   value: timeLeft?.hours,   color: "text-white/80" },
-    { label: "Minutes", value: timeLeft?.minutes, color: "text-white/60" },
-    { label: "Seconds", value: timeLeft?.seconds, color: "text-white/40" },
+    { label: "Hours",   value: timeLeft?.hours,   color: "text-white" },
+    { label: "Minutes", value: timeLeft?.minutes, color: "text-white" },
+    { label: "Seconds", value: timeLeft?.seconds, color: "text-bloom-cyan" },
   ];
 
   return (
     <div className="flex flex-wrap items-center justify-center gap-6 md:gap-12 mt-12 md:mt-20">
       {units.map(({ label, value, color }) => (
         <div key={label} className="flex flex-col items-center">
-          <span className={`font-sans font-light text-5xl md:text-7xl tracking-tighter ${mounted ? color : "text-white/10"} transition-colors duration-1000`}>
+          <span className={`font-sans font-medium text-5xl md:text-7xl tracking-tighter tabular-nums ${mounted ? color : "text-white/10"} transition-colors duration-1000`}>
             {mounted ? fmt(value) : "00"}
           </span>
-          <span className="font-pixel text-[10px] md:text-xs text-white/45 mt-3">
+          <span className="font-pixel text-[10px] md:text-xs text-white/60 mt-3">
             {label}
           </span>
         </div>
@@ -109,17 +75,14 @@ const Countdown: React.FC<{ targetDate: Date }> = ({ targetDate }) => {
 // ─── Page ─────────────────────────────────────────────────────────────────
 export default function HomePage() {
   return (
-    <main className="scanlines neo-vignette relative w-full text-white bg-[#020204] overflow-x-hidden selection:bg-bloom-pink/30 selection:text-white min-h-screen">
+    <main className="relative w-full text-white bg-[#020204] overflow-x-hidden selection:bg-bloom-pink/30 selection:text-white min-h-screen">
 
       <FloralBackground />
       <PixelGarden />
 
       {/* ── HERO ── */}
       <section className="relative w-full min-h-screen flex flex-col justify-center items-center overflow-hidden">
 
-        {/* Synthwave horizon grid */}
-        <div className="neo-grid z-[1]" aria-hidden="true" />
-
         {/* MLH badge */}
         <a
           href="https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2026-season&utm_content=white"
@@ -136,17 +99,8 @@ export default function HomePage() {
         <div className="relative z-10 w-full max-w-7xl mx-auto px-6 pt-32 pb-40 md:pt-48 md:pb-48 flex flex-col items-center text-center animate-fade-in-up">
 
           {/* Pill Badge */}
-          <div className="pixel-frame pixel-cyan hud inline-flex items-center gap-3 px-5 py-2.5 bg-white/5 mb-10 hover:bg-white/10 transition-colors duration-300 cursor-pointer group">
-            <span className="neo-blink h-2 w-2 bg-bloom-lime shadow-[0_0_10px_rgba(200,255,0,0.9)]" aria-hidden />
-            <PixelSprite map={BLOOM} palette="pink" scale={2} glow className="animate-bob" />
-            <span className="font-pixel text-[10px] md:text-xs text-white/80 group-hover:text-white transition-colors">
-              Data Science @ Georgia Tech
-            </span>
-            <PixelSprite map={BLOOM} palette="cyan" scale={2} glow className="animate-bob" />
-          </div>
-
           {/* Main title - Elegantly oversized, tight tracking */}
-          <div className="flex items-end justify-center gap-4 md:gap-10 mb-8">
+          <div className="flex items-end justify-center gap-4 md:gap-10 mb-10 md:mb-12">
             <PixelSprite
               map={TULIP}
               palette="pink"
@@ -156,8 +110,7 @@ export default function HomePage() {
               style={{ animationDuration: "6s" }}
             />
             <h1
-              data-text="Hacklytics"
-              className="neo-split neo-glitch font-sans font-medium text-[16vw] sm:text-[14vw] md:text-[11vw] lg:text-[10rem] xl:text-[12rem] leading-[0.8] tracking-[-0.04em] text-white"
+              className="font-sans font-medium text-[16vw] sm:text-[14vw] md:text-[11vw] lg:text-[10rem] xl:text-[12rem] leading-[0.8] tracking-[-0.04em] text-white"
             >
               Hacklytics
             </h1>
@@ -171,9 +124,14 @@ export default function HomePage() {
             />
           </div>
 
-          <p className="font-sans text-lg md:text-xl lg:text-2xl text-white/50 max-w-2xl mx-auto leading-relaxed mb-12 font-light tracking-wide">
-            36 hours of intelligence, innovation, and digital bloom. <br className="hidden md:block"/>
-            Join 1,000+ hackers in Atlanta, GA.
+          {/* When, where and who, up front: the hero said none of them. */}
+          <p className="font-pixel text-xs md:text-sm uppercase text-bloom-cyan mb-6">
+            Feb 26–28, 2027 · Georgia Tech, Atlanta
+          </p>
+
+          <p className="font-sans text-lg md:text-xl lg:text-2xl text-white/70 max-w-2xl mx-auto leading-relaxed mb-12 font-light tracking-wide">
+            A 36-hour data science and AI hackathon <br className="hidden md:block"/>
+            run by Data Science @ GT. Free to attend.
           </p>
 
           {/* The caption sits under the pair, not under Notify me alone:
@@ -201,7 +159,7 @@ export default function HomePage() {
             </div>
             <span
               id="notify-handoff-hint"
-              className="font-sans text-[11px] leading-snug text-white/40 text-center"
+              className="font-sans text-xs leading-snug text-white/55 text-center"
             >
               {INTEREST_HINT}
             </span>
@@ -223,15 +181,8 @@ export default function HomePage() {
         <HomeSections />
       </div>
 
-      {/* Required for the spin animation if not in tailwind config */}
+      {/* Hero entrance animation, not in the tailwind config */}
       <style dangerouslySetInnerHTML={{__html: `
-        @keyframes spin-slow {
-          from { transform: translate(-50%, -50%) rotate(0deg); }
-          to { transform: translate(-50%, -50%) rotate(360deg); }
-        }
-        .animate-spin-slow {
-          animation: spin-slow 60s linear infinite;
-        }
         @keyframes fade-in-up {
           from { opacity: 0; transform: translateY(20px); }
           to { opacity: 1; transform: translateY(0); }

sites/hacklytics2027/components/Footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
     // visible band where the translucent sections above it ended.
     <footer className="relative z-10 w-full bg-gradient-to-b from-[#020204]/70 to-[#020204] to-40% overflow-hidden">
       <div className="section-wrap max-w-7xl mx-auto pt-20 md:pt-28 pb-10 px-6 relative z-10">
-        <h2 className="font-sans font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl text-white leading-[0.95] tracking-[-0.03em] mb-8">
+        <h2 className="font-sans font-bold text-4xl sm:text-5xl md:text-6xl text-white leading-[1] tracking-[-0.03em] mb-8">
           Applications open soon.
         </h2>
 
@@ -20,11 +20,11 @@ export default function Footer() {
             href={INTEREST_URL}
             target="_blank"
             rel="noopener noreferrer"
-            className="pixel-btn inline-flex items-center justify-center px-8 py-4 font-sans font-bold text-sm uppercase tracking-[0.14em] w-full sm:w-auto"
+            className="pixel-btn inline-flex items-center justify-center px-10 py-4 font-pixel text-xs w-full sm:w-auto"
           >
             Notify me →
           </a>
-          <p className="font-sans text-sm text-white/45 max-w-sm leading-relaxed">
+          <p className="font-sans text-base text-white/65 max-w-sm leading-relaxed">
             We’ll let you know the moment they do.
           </p>
         </div>

sites/hacklytics2027/components/Navbar.tsx

@@ -112,8 +112,8 @@ export default function Navbar() {
             onClick={() => setOpen(false)}
             className="flex items-center gap-3 group shrink-0"
           >
-            <PixelSprite map={SPROUT} palette="lime" scale={2} />
-            <span className="font-sans font-bold text-sm tracking-tight text-white group-hover:text-white/80 transition-colors">
+            <PixelSprite map={SPROUT} palette="lime" scale={2} glow />
+            <span className="font-pixel text-xs text-white group-hover:text-bloom-lime transition-colors">
               DS @ GT
             </span>
           </Link>
@@ -125,7 +125,7 @@ export default function Navbar() {
                 key={name}
                 href={href}
                 onClick={(e) => handleNavClick(e, href)}
-                className="font-sans text-[11px] uppercase tracking-[0.22em] text-white/55 hover:text-white transition-colors py-2"
+                className="font-sans text-xs uppercase tracking-[0.2em] text-white/70 hover:text-bloom-cyan transition-colors py-2"
               >
                 {name}
               </a>
@@ -137,7 +137,7 @@ export default function Navbar() {
             target="_blank"
             rel="noopener noreferrer"
             aria-label={`Notify me. ${INTEREST_HINT}`}
-            className="pixel-btn hidden lg:inline-flex items-center justify-center px-6 py-2.5 font-sans font-bold text-[11px] uppercase tracking-[0.14em] shrink-0"
+            className="pixel-btn hidden lg:inline-flex items-center justify-center px-6 py-2.5 font-pixel text-[11px] shrink-0"
           >
             Notify me
           </a>
@@ -181,7 +181,7 @@ export default function Navbar() {
               key={name}
               href={href}
               onClick={(e) => handleNavClick(e, href)}
-              className="font-sans font-medium text-3xl text-white/55 hover:text-white py-4 border-b border-white/10 transition-colors tracking-tight"
+              className="font-sans font-medium text-3xl text-white/75 hover:text-bloom-cyan py-4 border-b border-white/10 transition-colors tracking-tight"
             >
               {name}
             </a>
@@ -194,7 +194,7 @@ export default function Navbar() {
             rel="noopener noreferrer"
             onClick={() => setOpen(false)}
             aria-label={`Notify me. ${INTEREST_HINT}`}
-            className="pixel-btn flex items-center justify-center w-full font-sans font-bold text-sm uppercase tracking-[0.14em] px-8 py-4"
+            className="pixel-btn flex items-center justify-center w-full font-pixel text-xs px-8 py-4"
           >
             Notify me
           </a>

sites/hacklytics2027/components/sections/AboutSection.tsx

@@ -1,45 +1,26 @@
 "use client";
 import React from "react";
-import Eyebrow from "./Eyebrow";
-
-const stats = [
-  { num: "01", label: "1,000+ hackers", detail: "Capacity at Klaus" },
-  { num: "02", label: "36 hours", detail: "Fri night through Sunday" },
-  { num: "03", label: "Free to attend", detail: "Meals, swag, and cloud credits included" },
-];
 
 const AboutSection: React.FC = () => {
   return (
     <section id="about" className="section-anchor text-white relative">
-      <div className="section-wrap max-w-7xl mx-auto py-20 md:py-24 px-6">
-        <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-20">
-          <div className="lg:col-span-3">
-            <Eyebrow>About</Eyebrow>
-            <h2 className="font-sans font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl text-white mb-8 leading-[0.95] tracking-[-0.03em]">
-              A hub of innovation.
-            </h2>
-            <p className="font-sans text-lg md:text-xl text-white/55 leading-[1.65] max-w-xl font-normal">
-              Hacklytics is the Southeast’s 36-hour data science and AI hackathon,
-              hosted by Data Science @ GT at the Klaus Advanced Computing Building
-              in Atlanta, February 26–28, 2027.
+      <div className="section-wrap max-w-7xl mx-auto py-24 md:py-32 px-6">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16">
+          <h2 className="lg:col-span-5 font-sans font-bold text-4xl sm:text-5xl md:text-6xl text-white leading-[1] tracking-[-0.03em] text-balance">
+            The Southeast’s data science hackathon.
+          </h2>
+
+          <div className="lg:col-span-6 lg:col-start-7 lg:pt-3">
+            <p className="font-sans text-lg md:text-xl text-white/80 leading-[1.6] max-w-[60ch]">
+              Hacklytics is a 36-hour data science and AI hackathon run by Data
+              Science @ GT at the Klaus Advanced Computing Building in Atlanta,
+              February 26–28, 2027.
+            </p>
+            <p className="font-sans text-base md:text-lg text-white/65 leading-[1.6] max-w-[60ch] mt-5">
+              Room for 1,000+ hackers. It costs nothing to attend: meals, swag,
+              and cloud credits are covered.
             </p>
           </div>
-
-          <ol className="lg:col-span-2 flex flex-col justify-center gap-8 lg:pt-12">
-            {stats.map((s) => (
-              <li key={s.num} className="flex items-baseline gap-5">
-                <span className="font-sans text-sm text-bloom-cyan tabular-nums w-8 shrink-0">
-                  {s.num}
-                </span>
-                <div>
-                  <p className="font-sans font-bold text-xl md:text-2xl text-white tracking-tight">
-                    {s.label}
-                  </p>
-                  <p className="font-sans text-sm text-white/40 mt-1">{s.detail}</p>
-                </div>
-              </li>
-            ))}
-          </ol>
         </div>
       </div>
     </section>

sites/hacklytics2027/components/sections/FAQSection.tsx

@@ -2,7 +2,6 @@
 import React from "react";
 import Link from "next/link";
 import { INTEREST_URL } from "@/lib/links";
-import Eyebrow from "./Eyebrow";
 
 const faqItems: { q: string; a: React.ReactNode }[] = [
   {
@@ -26,7 +25,7 @@ const faqItems: { q: string; a: React.ReactNode }[] = [
           href={INTEREST_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="text-white underline underline-offset-4 hover:text-white"
+          className="text-bloom-cyan underline underline-offset-4 hover:text-white"
         >
           Get notified
         </Link>{" "}
@@ -48,7 +47,7 @@ const faqItems: { q: string; a: React.ReactNode }[] = [
           href="https://discord.gg/hacklytics"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-white underline underline-offset-4 hover:text-white"
+          className="text-bloom-cyan underline underline-offset-4 hover:text-white"
         >
           Discord
         </Link>
@@ -65,7 +64,7 @@ const faqItems: { q: string; a: React.ReactNode }[] = [
           href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-white underline underline-offset-4 hover:text-white"
+          className="text-bloom-cyan underline underline-offset-4 hover:text-white"
         >
           MLH Code of Conduct
         </Link>
@@ -77,20 +76,19 @@ const faqItems: { q: string; a: React.ReactNode }[] = [
 
 export default function FAQSection() {
   return (
-    <section id="faqs" className="section-anchor text-white relative border-t border-white/[0.06]">
-      <div className="section-wrap max-w-7xl mx-auto py-20 md:py-24 px-6">
-        <Eyebrow>FAQ</Eyebrow>
-        <h2 className="font-sans font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl text-white leading-[0.95] tracking-[-0.03em] mb-12 md:mb-16">
-          Ask us anything.
+    <section id="faqs" className="section-anchor text-white relative">
+      <div className="section-wrap max-w-7xl mx-auto py-24 md:py-32 px-6">
+        <h2 className="font-sans font-bold text-4xl sm:text-5xl md:text-6xl text-white leading-[1] tracking-[-0.03em] mb-14 md:mb-20">
+          FAQ
         </h2>
 
-        <dl className="flex flex-col gap-10 max-w-3xl">
+        <dl className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-10">
           {faqItems.map((item) => (
-            <div key={item.q}>
+            <div key={item.q} className="border-t border-white/15 pt-5">
               <dt className="font-sans font-bold text-lg md:text-xl text-white tracking-tight">
                 {item.q}
               </dt>
-              <dd className="font-sans text-base text-white/60 leading-[1.7] mt-2">
+              <dd className="font-sans text-base md:text-lg text-white/70 leading-[1.65] mt-2 max-w-[55ch]">
                 {item.a}
               </dd>
             </div>