Add new Feature Preview page

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "2.3.0",
   "type": "module",
-  "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499",
+  "packageManager": "pnpm@11.2.2+sha512.36e6621fad506178936455e70247b8808ef4ec25797a9f437a93281a020484e2607f6a469a22e982987c3dbb8866e3071514ab10a4a1749e06edcd1ec118436f",
   "volta": {
     "node": "24.1.0"
   },

src/App.tsx

@@ -3,6 +3,7 @@ import { Analytics } from "@vercel/analytics/react";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Home from "./pages/home/Home";
+import Preview from "./pages/preview/Preview";
 import Terms from "./pages/legal/Terms";
 import Privacy from "./pages/legal/Privacy";
 import Disclaimer from "./pages/legal/Disclaimer";
@@ -16,6 +17,7 @@ function App() {
         <main>
           <Routes>
             <Route path="/" element={<Home />} />
+            <Route path="/preview" element={<Preview />} />
             <Route path="/terms" element={<Terms />} />
             <Route path="/privacy" element={<Privacy />} />
             <Route path="/disclaimer" element={<Disclaimer />} />

src/components/BentoGrid.module.css

@@ -122,7 +122,7 @@
 }
 
 .themeGold .description {
-  opacity: 0.5;
+  opacity: 0.7;
 }
 
 /* Night Theme */
@@ -275,6 +275,51 @@
   opacity: 0.7;
 }
 
+/* Steel Theme - light icy blue-steel, mirrors the occupancy chart palette */
+.themeSteel {
+  background:
+    radial-gradient(60% 50% at 98% 4%,   rgba(160, 185, 215, 0.55) 0%, transparent 65%),
+    radial-gradient(115% 90% at 95% 96%, rgba(58, 80, 128, 0.12) 0%, transparent 75%),
+    linear-gradient(135deg, #eef4fb 0%, #cddaec 100%);
+}
+
+.themeSteel .title {
+  color: #142a44;
+}
+
+.themeSteel .description {
+  color: #142a44;
+  opacity: 0.65;
+}
+
+/* Midnight Theme - Autopilot unconfigured dark mode palette */
+.themeMidnight {
+  background:
+    radial-gradient(95% 80% at 4% 4%,    rgba(44, 94, 148, 0.40) 0%, transparent 65%),
+    radial-gradient(65% 55% at 100% 2%,  rgba(82, 156, 204, 0.50) 0%, transparent 65%),
+    radial-gradient(115% 90% at 95% 96%, rgba(10, 22, 44, 0.40) 0%, transparent 75%),
+    linear-gradient(135deg, #14243c 0%, #060c1c 100%);
+}
+
+.themeMidnight .content {
+  position: relative;
+  z-index: 2;
+}
+
+.themeMidnight .imageWrapper {
+  position: relative;
+  z-index: 1;
+}
+
+.themeMidnight .title,
+.themeMidnight .description {
+  color: #eaf1fa;
+}
+
+.themeMidnight .description {
+  opacity: 0.65;
+}
+
 /* Spectrum Theme - based on app icon color palette */
 .themeSpectrum {
   position: relative;

src/components/BentoGrid.tsx

@@ -9,7 +9,7 @@ export interface BentoItem {
   imageDark?: string;
   component?: ReactNode;
   size: "small" | "medium" | "large" | "wide" | "full";
-  theme?: "gold" | "night" | "ios26" | "spectrum";
+  theme?: "gold" | "night" | "ios26" | "spectrum" | "midnight" | "steel";
 }
 
 interface BentoGridProps {

src/pages/preview/Preview.tsx

@@ -0,0 +1,9 @@
+import PreviewFeatures from "./sections/PreviewFeatures";
+
+export default function Preview() {
+  return (
+    <>
+      <PreviewFeatures />
+    </>
+  );
+}

src/pages/preview/sections/PreviewFeatures.module.css

@@ -0,0 +1,37 @@
+.preview {
+  padding: var(--space-4xl) 0 var(--space-3xl);
+  background: var(--color-background);
+  min-height: calc(100vh - var(--header-height));
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--space-lg);
+}
+
+.header {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto var(--space-4xl);
+}
+
+.title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: var(--space-md);
+}
+
+.subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+}
+
+.disclaimer {
+  margin-top: var(--space-3xl);
+  text-align: center;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}

src/pages/preview/sections/PreviewFeatures.tsx

@@ -0,0 +1,53 @@
+import { motion } from "framer-motion";
+import BentoGrid, { type BentoItem } from "../../../components/BentoGrid";
+import styles from "./PreviewFeatures.module.css";
+
+const previewItems: BentoItem[] = [
+  {
+    title: "Autopilot",
+    description: "Your lounge concierge. Find the best lounge for your journey based on your status and travel habits. All in real-time.",
+    size: "large",
+    image: "/images/preview/autopilot.webp",
+    theme: "midnight",
+  },
+  {
+    title: "Predictive Occupancy",
+    description: "Know before you go. See expected lounge occupancy hours in advance with AI-powered predictions based on real-world usage patterns.",
+    size: "large",
+    image: "/images/preview/predictive-occupancy.webp",
+    theme: "steel",
+  },
+  {
+    title: "Occupancy Trends",
+    description: "Decide at a glance. Instantly see whether a lounge is busier or quieter than usual with glanceable occupancy insights.",
+    size: "large",
+    image: "/images/preview/trends.webp",
+    theme: "gold",
+  }
+];
+
+export default function PreviewFeatures() {
+  return (
+    <section className={styles.preview}>
+      <div className={styles.container}>
+        <motion.div
+          className={styles.header}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-100px" }}
+          transition={{ duration: 0.6 }}
+        >
+          <span className="capsule">Preview</span>
+          <h1 className={styles.title}>What&apos;s Coming Next</h1>
+          <p className={styles.subtitle}>A sneak peek at what we&apos;re building for Loungebird</p>
+        </motion.div>
+
+        <BentoGrid items={previewItems} />
+
+        <p className={styles.disclaimer}>
+          All features shown are pre-release software and subject to change. Availability and final design may differ from what is shown here.
+        </p>
+      </div>
+    </section>
+  );
+}