HackNC · vihaan-kk · May 28, 2026 · May 28, 2026
diff --git a/app/globals.css b/app/globals.css
@@ -1,26 +1,20 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #f5f0e8;
+  --foreground: #111111;
+  --blue: #4B9CD3;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --font-display: var(--font-display);
+  --font-mono: var(--font-mono);
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Georgia, "Times New Roman", serif;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,14 +1,16 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Anton, IBM_Plex_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const anton = Anton({
+  weight: "400",
+  variable: "--font-display",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const mono = IBM_Plex_Mono({
+  weight: ["400", "500"],
+  variable: "--font-mono",
   subsets: ["latin"],
 });
 
@@ -23,10 +25,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
+    <html lang="en" className={`${anton.variable} ${mono.variable} h-full`}>
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,8 +1,21 @@
+import About from "@/components/About";
+import Footer from "@/components/Footer";
+import Hero from "@/components/Hero";
+import HostInterest from "@/components/HostInterest";
+import MLHBadge from "@/components/MLHBadge";
+import Nav from "@/components/Nav";
+
 export default function Home() {
   return (
-    <main>
-      <h1>HackNC 2026</h1>
-      <p>In-Progress...</p>
-    </main>
+    <>
+      <MLHBadge />
+      <Nav />
+      <main>
+        <Hero />
+        <About />
+        <HostInterest />
+      </main>
+      <Footer />
+    </>
   );
 }
diff --git a/components/About.tsx b/components/About.tsx
@@ -0,0 +1,87 @@
+const D = "var(--font-display)";
+const M = "var(--font-mono)";
+
+const stats = [
+  { value: "500+", label: "STUDENTS" },
+  { value: "3", label: "DAYS" },
+  { value: "50+", label: "PROJECTS" },
+];
+
+export default function About() {
+  return (
+    <section id="about" style={{ borderBottom: "4px solid #111" }}>
+      {/* Section header */}
+      <div
+        style={{
+          borderBottom: "2px solid #111",
+          padding: "12px 40px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "baseline",
+        }}
+      >
+        <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.15em", color: "#555" }}>
+          ABOUT THE EVENT
+        </span>
+        <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.15em", color: "#4B9CD3" }}>
+          § 01
+        </span>
+      </div>
+
+      {/* Stats bar */}
+      <div
+        style={{
+          borderBottom: "2px solid #111",
+          display: "grid",
+          gridTemplateColumns: "repeat(3, 1fr)",
+        }}
+      >
+        {stats.map(({ value, label }, i) => (
+          <div
+            key={label}
+            style={{
+              padding: "28px 40px",
+              borderRight: i < stats.length - 1 ? "2px solid #111" : "none",
+              display: "flex",
+              alignItems: "baseline",
+              gap: "12px",
+            }}
+          >
+            <span style={{ fontFamily: D, fontSize: "64px", lineHeight: 1, color: "#111" }}>
+              {value}
+            </span>
+            <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.15em", color: "#4B9CD3" }}>
+              {label}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Two-column body */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          borderBottom: "2px solid #111",
+        }}
+      >
+        <div style={{ padding: "40px", borderRight: "2px solid #111" }}>
+          <p style={{ fontSize: "17px", lineHeight: 1.7, color: "#222", margin: 0 }}>
+            HackNC is a weekend for students of all skill levels to broaden their
+            talents. Your challenge is to make an awesome project in just 24 hours.
+            You will have access to hands-on tech workshops, sponsor networking, and
+            exciting talks about what&apos;s happening right now in CS and tech —
+            not to mention all of the free food, shirts, stickers, and swag!</p>
+        </div>
+        <div style={{ padding: "40px" }}>
+          <p style={{ fontSize: "17px", lineHeight: 1.7, color: "#222", margin: 0 }}>
+            You don&apos;t need to be a senior computer science student with four internships
+            to show up. HackNC is explicitly built for people who are still figuring
+            it out. The best projects usually come from people who had no idea what
+            they were doing on Friday night.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,47 @@
+const D = "var(--font-display)";
+const M = "var(--font-mono)";
+
+export default function Footer() {
+  return (
+    <footer style={{ borderTop: "4px solid #111", background: "#111" }}>
+      <div
+        style={{
+          padding: "32px 40px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <div>
+          <span style={{ fontFamily: D, fontSize: "22px", color: "#f5f0e8", letterSpacing: "0.02em" }}>
+            HACKNC 2026
+          </span>
+          <p style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.12em", color: "#666", margin: "6px 0 0 0" }}>
+            UNIVERSITY OF NORTH CAROLINA AT CHAPEL HILL
+          </p>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "32px" }}>
+          <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.12em", color: "#555" }}>
+            © {new Date().getFullYear()} HACKNC
+          </span>
+          <a
+            href="https://mlh.io/code-of-conduct"
+            target="_blank"
+            rel="noreferrer"
+            style={{
+              fontFamily: M,
+              fontSize: "10px",
+              letterSpacing: "0.12em",
+              color: "#4B9CD3",
+              textDecoration: "none",
+              borderBottom: "1px solid #4B9CD3",
+              paddingBottom: "2px",
+            }}
+          >
+            MLH CODE OF CONDUCT
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -0,0 +1,138 @@
+const D = "var(--font-display)";
+const M = "var(--font-mono)";
+
+const meta = [
+  { label: "DATE", value: "OCT 2026\nTBD" },
+  { label: "WHERE", value: "UNC CHAPEL HILL\nCHAPEL HILL, NC" },
+  { label: "DURATION", value: "24 HOURS" },
+  { label: "COST", value: "FREE" },
+];
+
+export default function Hero() {
+  return (
+    <section
+      style={{
+        display: "grid",
+        gridTemplateColumns: "1fr 260px",
+        minHeight: "calc(100vh - 89px)",
+        borderBottom: "4px solid #111",
+      }}
+    >
+      {/* Left: title + copy */}
+      <div
+        style={{
+          borderRight: "4px solid #111",
+          padding: "48px 40px 40px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+        }}
+      >
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+          <h1
+            style={{
+              fontFamily: D,
+              fontSize: "clamp(96px, 13vw, 152px)",
+              lineHeight: 0.88,
+              letterSpacing: "-0.01em",
+              color: "#111",
+              margin: 0,
+            }}
+          >
+            HACK
+            <br />
+            <span style={{ color: "#4B9CD3" }}>NC.</span>
+          </h1>
+          <div
+            style={{
+              borderTop: "4px solid #111",
+              marginTop: "32px",
+              paddingTop: "28px",
+            }}
+          >
+            <p
+              style={{
+                fontSize: "18px",
+                lineHeight: 1.65,
+                color: "#333",
+                maxWidth: "520px",
+                margin: 0,
+              }}
+            >
+              An annual hackathon at UNC Chapel Hill. We bring together
+              students from across the Southeast to build, hack, and deploy in
+              one weekend. All skill levels welcome, first-timers especially!
+            </p>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", justifyContent: "flex-end", paddingTop: "32px" }}>
+          <a
+            href="#host-interest"
+            style={{
+              fontFamily: D,
+              fontSize: "22px",
+              color: "#111",
+              textDecoration: "none",
+              borderTop: "3px solid #111",
+              paddingTop: "8px",
+              letterSpacing: "0.03em",
+            }}
+          >
+            REGISTER INTEREST ↗
+          </a>
+        </div>
+      </div>
+
+      {/* Right: metadata column */}
+      <div
+        style={{
+          padding: "48px 28px 40px",
+          fontFamily: M,
+          display: "flex",
+          flexDirection: "column",
+          gap: "0",
+        }}
+      >
+        <p
+          style={{
+            fontSize: "clamp(36px, 4vw, 52px)",
+            fontFamily: D,
+            color: "#4B9CD3",
+            margin: "0 0 24px 0",
+            lineHeight: 1,
+          }}
+        >
+          2026
+        </p>
+        <div style={{ borderTop: "2px solid #111", marginBottom: "32px" }} />
+        {meta.map(({ label, value }) => (
+          <div key={label} style={{ marginBottom: "28px" }}>
+            <p
+              style={{
+                fontSize: "9px",
+                letterSpacing: "0.18em",
+                color: "#4B9CD3",
+                margin: "0 0 6px 0",
+                textTransform: "uppercase",
+              }}
+            >
+              {label}
+            </p>
+            <p
+              style={{
+                fontSize: "13px",
+                color: "#111",
+                margin: 0,
+                lineHeight: 1.5,
+                whiteSpace: "pre-line",
+              }}
+            >
+              {value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}