mjnewman · eriksaradpon · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["codespace-fluffy-space-orbit-q9p69rrwv5c4wxq"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/images/nyc.jpg b/images/nyc.jpg
diff --git a/index.html b/index.html
@@ -1,3 +1,169 @@
-test....
-<!-- add an image -->
-<img src="images/test.png" alt="image" />
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>VYB — Find the vyb. Feel the fun.</title>
+
+  <style>
+    :root {
+      --bg: #0f1115;
+      --card: #161922;
+      --text: #e6e8ef;
+      --muted: #a9afbf;
+      --accent: #6c5ce7;
+      --accent-2: #2de2e6;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
+      background: radial-gradient(circle at top right, rgba(108,92,231,0.15), transparent),
+                  radial-gradient(circle at bottom left, rgba(45,226,230,0.12), transparent),
+                  var(--bg);
+      color: var(--text);
+      padding: 40px 20px 80px;
+      line-height: 1.6;
+    }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 40px;
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-weight: 700;
+      text-decoration: none;
+      color: var(--text);
+    }
+
+    .logo-square {
+      width: 38px;
+      height: 38px;
+      border-radius: 10px;
+      background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
+    }
+
+    .btn {
+      border: none;
+      padding: 10px 16px;
+      border-radius: 10px;
+      cursor: pointer;
+      font-weight: 600;
+    }
+
+    .btn.primary {
+      background: linear-gradient(90deg, var(--accent), var(--accent-2));
+      color: #0b0d12;
+    }
+
+    .btn.ghost {
+      background: transparent;
+      border: 1px solid rgba(255,255,255,0.2);
+      color: var(--text);
+    }
+
+    .hero {
+      text-align: center;
+      max-width: 700px;
+      margin: 0 auto 60px;
+    }
+
+    .hero h1 {
+      font-size: clamp(32px, 6vw, 60px);
+      font-weight: 800;
+      line-height: 1.1;
+      margin-bottom: 16px;
+    }
+
+    .hero p {
+      color: var(--muted);
+      margin-bottom: 24px;
+      font-size: 18px;
+    }
+
+    .cards {
+      display: grid;
+      gap: 20px;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+
+    .card {
+      background: var(--card);
+      border: 1px solid rgba(255,255,255,0.06);
+      border-radius: 16px;
+      padding: 24px;
+      text-align: left;
+      transition: transform 0.2s ease;
+    }
+
+    .card:hover {
+      transform: translateY(-4px);
+    }
+
+    .card h2 {
+      color: var(--accent-2);
+      font-size: 18px;
+      margin-bottom: 8px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    .card p {
+      color: var(--text);
+      font-size: 15px;
+    }
+
+    footer {
+      text-align: center;
+      margin-top: 60px;
+      color: var(--muted);
+      font-size: 14px;
+    }
+  </style>
+</head>
+
+<body>
+  <header>
+    <a href="#" class="logo">
+      <div class="logo-square"></div>
+      <span>VYB</span>
+    </a>
+    <div>
+      <button class="btn ghost">Sign in</button>
+      <button class="btn primary">Try a sample plan</button>
+    </div>
+  </header>
+
+  <section class="hero">
+    <h1>Find the vyb. Feel the fun.</h1>
+    <p>Tell VYB how you feel and where you’re headed. Get a curated plan for today — with spots, sounds, and a path that fits your mood and budget.</p>
+    <button class="btn primary">Start with your mood</button>
+  </section>
+
+  <section class="cards">
+    <div class="card">
+      <h2>What VYB is</h2>
+      <p>A mood-based curator that builds smart lists of where to go and what to do based on how you feel, your vibe, and your budget.</p>
+    </div>
+    <div class="card">
+      <h2>Who it’s for</h2>
+      <p>People who want plans without planning — city explorers, travelers, students, and anyone chasing the right vibe for the day.</p>
+    </div>
+    <div class="card">
+      <h2>Key features</h2>
+      <p>Smart recommendations that adapt to weather, budget, distance, and crowd size — all shareable and easy to map.</p>
+    </div>
+  </section>
+
+  <footer>© 2025 VYB — Designed for UCLAx Intro to AI</footer>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -1 +1,42 @@
+/* Hero with local background image */
+.hero {
+  position: relative;
+  overflow: hidden;
+  border-radius: 20px;
+  margin: 0 auto 80px;
+  max-width: 1100px;
+  min-height: 420px;            /* ensures you see the image */
+  display: grid;
+  place-items: center;           /* centers hero content */
+  text-align: center;
+  color: #e6e8ef;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+}
 
+/* The image layer */
+.hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: url("images/nyc.jpg") center / cover no-repeat;
+  filter: brightness(0.6);       /* darken for readable text */
+  transform: scale(1.02);
+}
+
+/* Content sits above image */
+.hero > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Optional: bigger headline in hero */
+.hero h1 { 
+  font-size: clamp(36px, 6vw, 64px); 
+  line-height: 1.1; 
+  margin-bottom: 14px; 
+}
+.hero p { 
+  color: #a9afbf; 
+  max-width: 720px; 
+  margin: 0 auto 22px; 
+}