Spaces:

victor
/

iphone1-landing

Running

App Files Files Community

victor HF Staff commited on 11 days ago

Commit

4a5bd8c

verified ·

1 Parent(s): 731d811

apple landing page for new iphone

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +262 -19
script.js +83 -0
style.css +63 -20

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Iphone1 Landing
-emoji: 🔥
-colorFrom: gray
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: iPhone1-Landing
+colorFrom: yellow
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,262 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>iPhone&nbsp;1 — Apple (Unofficial Landing)</title>
+  <meta name="description" content="iPhone 1 — A new generation of performance and design." />
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23000'/%3E%3Cpath d='M20 44c6-3 11-1 14-7-3 1-7 2-10 0-3-2-5-1-7 1 2 2 2 4 3 6zM30 18h4v6h-4zM26 24h8v16h-8z' fill='%23fff'/%3E%3C/svg%3E" />
+  <link rel="stylesheet" href="style.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+</head>
+<body class="antialiased bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100 transition-colors duration-500">
+  <header class="sticky top-0 z-50 border-b border-zinc-200/60 dark:border-zinc-800/60 backdrop-blur supports-[backdrop-filter]:bg-white/40 dark:supports-[backdrop-filter]:bg-zinc-950/40">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <nav class="flex h-16 items-center justify-between">
+        <a href="#" class="flex items-center gap-3 group">
+          <svg class="h-5 w-5 text-zinc-900 dark:text-zinc-100 transition-transform group-hover:scale-105" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M16.365 1.43a5.4 5.4 0 0 1-1.52 3.94 4.77 4.77 0 0 1-3.69 1.67 4.8 4.8 0 0 1 1.52-3.62 4.9 4.9 0 0 1 3.67-1.99zM20.59 17.15c-.35.8-.77 1.54-1.26 2.22-.66.93-1.19 1.57-1.6 1.92-.58.52-1.2.79-1.87.8-.5 0-1.1-.13-1.79-.4-.69-.26-1.32-.39-1.89-.39-.61 0-1.26.13-1.95.4-.69.26-1.25.41-1.68.44-.57.05-1.21-.13-1.92-.55-.71-.42-1.35-1.05-1.92-1.89-2.1-3.07-3.39-6.6-3.86-10.58-.17-1.39-.05-2.7.37-3.93.4-1.15 1-2.01 1.79-2.6.56-.43 1.19-.65 1.89-.65.54 0 1.16.15 1.86.45.7.31 1.3.47 1.8.47.44 0 1.1-.16 1.98-.48.87-.32 1.61-.49 2.21-.49.69 0 1.39.18 2.11.54 1.15.6 1.98 1.56 2.49 2.9-.93.73-1.54 1.72-1.84 2.97-.27 1.1-.3 2.09-.09 2.98.22.94.64 1.82 1.25 2.64-.23.62-.5 1.24-.83 1.87z"/>
+          </svg>
+          <span class="font-semibold tracking-tight text-lg">Apple (Unofficial)</span>
+        </a>
+        <div class="hidden md:flex items-center gap-8">
+          <a href="#features" class="text-sm hover:text-zinc-600 dark:hover:text-zinc-300 transition">Features</a>
+          <a href="#specs" class="text-sm hover:text-zinc-600 dark:hover:text-zinc-300 transition">Tech Specs</a>
+          <a href="#buy" class="text-sm hover:text-zinc-600 dark:hover:text-zinc-300 transition">Buy</a>
+        </div>
+        <div class="flex items-center gap-3">
+          <button id="themeToggle" class="p-2 rounded-full hover:bg-zinc-200/60 dark:hover:bg-zinc-800 transition" aria-label="Toggle theme">
+            <svg id="iconSun" class="h-5 w-5 hidden dark:block" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.8 1.42-1.42zM1 13h3v-2H1v2zm10 10h2v-3h-2v3zm9.66-3.55l1.41-1.41-1.79-1.8-1.42 1.42 1.8 1.79zM20 11v2h3v-2h-3zm-8-8h2V0h-2v3zm-9.66 16.95l-1.79 1.8 1.41 1.41 1.8-1.79-1.42-1.42zM12 6a6 6 0 100 12A6 6 0 0012 6z"/>
+            </svg>
+            <svg id="iconMoon" class="h-5 w-5 dark:hidden" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M21.64 13a9 9 0 01-11.63-11.63 1 1 0 00-1.39-1.23A11 11 0 1023 14.84a1 1 0 00-1.36-1.84z"/>
+            </svg>
+          </button>
+          <a href="#buy" class="hidden sm:inline-flex items-center gap-2 rounded-full bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium px-4 py-2 transition shadow-sm shadow-primary-500/30">
+            <svg class="h-4 w-4 opacity-90" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h10v2H4z"/>
+            </svg>
+            Buy
+          </a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  <main>
+    <!-- Hero -->
+    <section id="hero" class="relative overflow-hidden">
+      <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
+        <div class="absolute -top-24 -left-32 h-[36rem] w-[36rem] rounded-full bg-primary-500/20 blur-3xl"></div>
+        <div class="absolute top-1/3 -right-24 h-[30rem] w-[30rem] rounded-full bg-secondary-500/20 blur-3xl"></div>
+        <div class="absolute inset-x-0 bottom-0 h-64 bg-gradient-to-t from-zinc-100 dark:from-zinc-900 to-transparent"></div>
+      </div>
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="grid items-center gap-12 py-16 md:grid-cols-2 md:py-24">
+          <div>
+            <p class="mb-3 inline-flex items-center gap-2 rounded-full border border-zinc-200/60 bg-white/50 px-3 py-1 text-xs font-medium text-zinc-700 backdrop-blur dark:border-zinc-800/60 dark:bg-zinc-950/40 dark:text-zinc-300">
+              <span class="inline-block h-2 w-2 rounded-full bg-primary-500"></span>
+              New Generation
+            </p>
+            <h1 class="text-5xl font-extrabold tracking-tight sm:text-6xl lg:text-7xl">
+              iPhone&nbsp;1
+            </h1>
+            <p class="mt-5 max-w-prose text-lg text-zinc-600 dark:text-zinc-400">
+              A new chapter in performance, design, and intelligence. Built to move you forward.
+            </p>
+            <div class="mt-8 flex flex-wrap items-center gap-3">
+              <a href="#buy" class="inline-flex items-center gap-2 rounded-full bg-primary-500 hover:bg-primary-600 text-white text-sm font-semibold px-5 py-3 transition shadow-lg shadow-primary-500/30">
+                Buy now
+                <svg class="h-4 w-4 opacity-90" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M13 5l7 7-7 7v-4H4v-6h9V5z"/>
+                </svg>
+              </a>
+              <a href="#features" class="inline-flex items-center gap-2 rounded-full border border-zinc-300/60 bg-white/60 px-5 py-3 text-sm font-semibold text-zinc-900 backdrop-blur hover:bg-zinc-100 dark:border-zinc-700/60 dark:bg-zinc-950/40 dark:text-zinc-100 dark:hover:bg-zinc-800/60 transition">
+                Learn more
+              </a>
+            </div>
+            <p class="mt-3 text-xs text-zinc-500 dark:text-zinc-400">Price starts at $999. This is an unofficial concept page.</p>
+          </div>
+          <div class="relative">
+            <div id="device3d" class="relative mx-auto h-[580px] w-[300px] rounded-[3rem] border border-zinc-900/10 bg-zinc-900 p-3 shadow-2xl transition-transform duration-700 will-change-transform dark:border-zinc-700/40 dark:bg-zinc-800">
+              <div class="relative h-full w-full rounded-[2.5rem] bg-zinc-800 overflow-hidden">
+                <div class="absolute inset-0 bg-[radial-gradient(120%_100%_at_50%_10%,rgba(255,255,255,.08),rgba(255,255,255,0)_60%)]"></div>
+                <div class="absolute top-3 left-1/2 h-2 w-24 -translate-x-1/2 rounded-full bg-zinc-700"></div>
+                <div class="absolute right-6 top-20 h-8 w-1 rounded-full bg-zinc-700"></div>
+                <div class="absolute right-6 top-32 h-12 w-1 rounded-full bg-zinc-700"></div>
+                <div class="absolute inset-0 grid place-items-center">
+                  <div class="absolute -top-10 h-24 w-24 rounded-full bg-primary-500/30 blur-2xl"></div>
+                  <div class="absolute -bottom-8 h-24 w-24 rounded-full bg-secondary-500/20 blur-2xl"></div>
+                  <div class="relative rounded-[2rem] border border-zinc-700/40 bg-gradient-to-br from-zinc-900 to-zinc-800 p-6">
+                    <div class="aspect-[9/19.5] rounded-[1.4rem] border border-zinc-700/40 bg-[radial-gradient(150%_130%_at_50%_0%,#0ea5e9,transparent_60%),radial-gradient(120%_100%_at_50%_100%,#10b981,transparent_60%)] p-3">
+                      <div class="h-full w-full rounded-[1.2rem] bg-zinc-900/60 backdrop-blur-sm"></div>
+                    </div>
+                    <div class="mt-6 grid grid-cols-3 gap-2 text-center text-[10px] text-zinc-300">
+                      <div class="rounded-lg bg-zinc-800/60 p-2">
+                        <div class="text-[11px] font-semibold text-white">A18</div>
+                        <div class="text-[10px] text-zinc-400">Fusion</div>
+                      </div>
+                      <div class="rounded-lg bg-zinc-800/60 p-2">
+                        <div class="text-[11px] font-semibold text-white">48MP</div>
+                        <div class="text-[10px] text-zinc-400">Camera</div>
+                      </div>
+                      <div class="rounded-lg bg-zinc-800/60 p-2">
+                        <div class="text-[11px] font-semibold text-white">5G</div>
+                        <div class="text-[10px] text-zinc-400">Connect</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="mt-6 text-center">
+              <a href="#features" class="inline-flex items-center gap-2 text-sm text-zinc-600 underline-offset-4 hover:underline dark:text-zinc-400">
+                Explore features
+                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M13 5l7 7-7 7v-4H4v-6h9V5z"/>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Features -->
+    <section id="features" class="border-t border-zinc-200/60 bg-zinc-100/50 py-20 dark:border-zinc-800/60 dark:bg-zinc-900/30">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="mb-12 text-center">
+          <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">Powerfully simple</h2>
+          <p class="mt-3 text-zinc-600 dark:text-zinc-400">Everything you need. Nothing you don’t.</p>
+        </div>
+        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          <div class="rounded-2xl border border-zinc-200/60 bg-white p-6 transition hover:shadow-lg dark:border-zinc-800/60 dark:bg-zinc-900">
+            <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500/10 text-primary-500">
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M9 3v2H5v14h14v-4h2V5H9V3zM7 7h10v10H7V7z"/>
+              </svg>
+            </div>
+            <h3 class="font-semibold">A18 Fusion</h3>
+            <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">Next‑gen CPU and GPU built for demanding workflows and pro‑level gaming.</p>
+          </div>
+          <div class="rounded-2xl border border-zinc-200/60 bg-white p-6 transition hover:shadow-lg dark:border-zinc-800/60 dark:bg-zinc-900">
+            <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-500/10 text-secondary-500">
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M4 6h16v12H4zM7 9h10v6H7z"/>
+              </svg>
+            </div>
+            <h3 class="font-semibold">Pro Camera System</h3>
+            <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">48MP main sensor with advanced computational photography.</p>
+          </div>
+          <div class="rounded-2xl border border-zinc-200/60 bg-white p-6 transition hover:shadow-lg dark:border-zinc-800/60 dark:bg-zinc-900">
+            <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500/10 text-primary-500">
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M3 12h18M12 3v18"/>
+              </svg>
+            </div>
+            <h3 class="font-semibold">All‑day battery</h3>
+            <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">Up to 28 hours of video playback. Fast charging supported.</p>
+          </div>
+          <div class="rounded-2xl border border-zinc-200/60 bg-white p-6 transition hover:shadow-lg dark:border-zinc-800/60 dark:bg-zinc-900">
+            <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-500/10 text-secondary-500">
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5v6l4 2-.8 1.46L11 14V7h2z"/>
+              </svg>
+            </div>
+            <h3 class="font-semibold">5G</h3>
+            <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">Superfast downloads and low latency for streaming and gaming.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Tech Specs -->
+    <section id="specs" class="py-20">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="mb-12 text-center">
+          <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">Tech Specs</h2>
+          <p class="mt-3 text-zinc-600 dark:text-zinc-400">Quick look at key specifications.</p>
+        </div>
+        <div class="grid gap-6 md:grid-cols-2">
+          <div class="rounded-2xl border border-zinc-200/60 bg-white p-6 dark:border-zinc-800/60 dark:bg-zinc-900">
+            <h3 class="mb-4 font-semibold">Display</h3>
+            <ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
+              <li>6.1‑inch Super Retina XDR OLED</li>
+              <li>2532×1170 resolution at 460 ppi</li>
+              <li>True Tone, P3 wide color</li>
+            </ul>
+          </div>
+          <div class="rounded-2xl border border-zinc-200/60 bg-white p-6 dark:border-zinc-800/60 dark:bg-zinc-900">
+            <h3 class="mb-4 font-semibold">Chip</h3>
+            <ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
+              <li>A18 Fusion chip</li>
+              <li>6‑core CPU, 5‑core GPU</li>
+              <li>16‑core Neural Engine</li>
+            </ul>
+          </div>
+          <div class="rounded-2xl border border-zinc-200/60 bg-white p-6 dark:border-zinc-800/60 dark:bg-zinc-900">
+            <h3 class="mb-4 font-semibold">Camera</h3>
+            <ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
+              <li>48MP main, 12MP ultra wide</li>
+              <li>4K Dolby Vision recording</li>
+              <li>Action mode, Night mode</li>
+            </ul>
+          </div>
+          <div class="rounded-2xl border border-zinc-200/60 bg-white p-6 dark:border-zinc-800/60 dark:bg-zinc-900">
+            <h3 class="mb-4 font-semibold">Connectivity</h3>
+            <ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
+              <li>5G (sub‑6 GHz and mmWave)</li>
+              <li>Dual SIM (nano + eSIM)</li>
+              <li>Wi‑Fi 6E, Bluetooth 5.3</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Buy -->
+    <section id="buy" class="border-t border-zinc-200/60 py-20 dark:border-zinc-800/60">
+      <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+        <div class="rounded-3xl border border-zinc-200/60 bg-gradient-to-br from-white to-zinc-50 p-8 text-center dark:border-zinc-800/60 dark:from-zinc-900 dark:to-zinc-950">
+          <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">Get iPhone&nbsp;1</h2>
+          <p class="mt-3 text-zinc-600 dark:text-zinc-400">Starting at $999. Available in 128, 256, and 512&nbsp;GB.</p>
+          <div class="mt-6 flex flex-wrap justify-center gap-3">
+            <button class="inline-flex items-center gap-2 rounded-full bg-primary-500 hover:bg-primary-600 px-5 py-3 text-sm font-semibold text-white transition shadow-lg shadow-primary-500/30">
+              <svg class="h-4 w-4 opacity-90" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h10v2H4z"/></svg>
+              Add to Bag
+            </button>
+            <button class="inline-flex items-center gap-2 rounded-full border border-zinc-300/60 bg-white/60 px-5 py-3 text-sm font-semibold text-zinc-900 backdrop-blur hover:bg-zinc-100 dark:border-zinc-700/60 dark:bg-zinc-950/40 dark:text-zinc-100 dark:hover:bg-zinc-800/60 transition">
+              Compare models
+            </button>
+          </div>
+          <p class="mt-3 text-xs text-zinc-500 dark:text-zinc-400">This is a concept page. Not affiliated with Apple Inc.</p>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer class="border-t border-zinc-200/60 py-10 text-sm text-zinc-600 dark:border-zinc-800/60 dark:text-zinc-400">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="flex flex-col items-center justify-between gap-4 sm:flex-row">
+        <p>Copyright © 2025 Apple (Unofficial). All rights reserved.</p>
+        <div class="flex items-center gap-4">
+          <a class="hover:text-zinc-800 dark:hover:text-zinc-200" href="#">Privacy</a>
+          <a class="hover:text-zinc-800 dark:hover:text-zinc-200" href="#">Terms</a>
+          <a class="hover:text-zinc-800 dark:hover:text-zinc-200" href="#">Support</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+  <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,83 @@

+// Simple color and theme management
+(function () {
+  const config = {
+    primary: "gray",
+    secondary: "slate",
+    theme: "light", // light | dark
+  };
+  function applyTheme(theme) {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  }
+  // Theme toggle
+  const toggle = document.getElementById("themeToggle");
+  if (toggle) {
+    toggle.addEventListener("click", () => {
+      const isDark = document.documentElement.classList.toggle("dark");
+      const next = isDark ? "dark" : "light";
+      try {
+        localStorage.setItem("theme", next);
+      } catch (_) {}
+    });
+  }
+  // Restore saved theme
+  try {
+    const saved = localStorage.getItem("theme");
+    if (saved === "dark" || saved === "light") {
+      applyTheme(saved);
+    } else {
+      applyTheme(config.theme);
+    }
+  } catch (_) {
+    applyTheme(config.theme);
+  }
+  // Device tilt effect (hero)
+  const device = document.getElementById("device3d");
+  if (device) {
+    let raf = null;
+    let rx = 0, ry = 0, tx = 0, ty = 0;
+    const max = 8;
+    const onMove = (e) => {
+      const rect = device.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dx = (e.clientX - cx) / (rect.width / 2);
+      const dy = (e.clientY - cy) / (rect.height / 2);
+      tx = Math.max(-1, Math.min(1, dx));
+      ty = Math.max(-1, Math.min(1, dy));
+      ry = tx * max;
+      rx = -ty * max;
+      if (!raf) {
+        raf = requestAnimationFrame(() => {
+          device.style.transform = `perspective(1000px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg) translateZ(0)`;
+          raf = null;
+        });
+      }
+    };
+    const reset = () => {
+      device.style.transform = "perspective(1000px) rotateX(0deg) rotateY(0deg)";
+    };
+    window.addEventListener("mousemove", onMove, { passive: true });
+    window.addEventListener("mouseleave", reset);
+    window.addEventListener("touchmove", (e) => {
+      if (!e.touches || e.touches.length === 0) return;
+      const t = e.touches[0];
+      onMove({ clientX: t.clientX, clientY: t.clientY });
+    }, { passive: true });
+    window.addEventListener("touchend", reset);
+  }
+  // Optional: uncomment to log config or expose it for debugging
+  // console.log("iPhone 1 Landing — Config:", config);
+})();

style.css CHANGED Viewed

@@ -1,28 +1,71 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* CSS Reset and base */
+*,
+*::before,
+*::after { box-sizing: border-box; }
+html, body { height: 100%; }
 body {
+  margin: 0;
+  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  line-height: 1.5;
+  background: theme(colors.zinc.50);
+  color: theme(colors.zinc.900);
 }
+@media (prefers-color-scheme: dark) {
+  body { background: theme(colors.zinc.950); color: theme(colors.zinc.100); }
 }
+/* Utilities generated from requested config */
+:root {
+  --color-primary-50: 249 250 251;   /* gray-50 */
+  --color-primary-100: 243 244 246;  /* gray-100 */
+  --color-primary-200: 229 231 235;  /* gray-200 */
+  --color-primary-300: 209 213 219;  /* gray-300 */
+  --color-primary-400: 156 163 175;  /* gray-400 */
+  --color-primary-500: 107 114 128;  /* gray-500 */
+  --color-primary-600: 75 85 99;     /* gray-600 */
+  --color-primary-700: 55 65 81;     /* gray-700 */
+  --color-primary-800: 31 41 55;     /* gray-800 */
+  --color-primary-900: 17 24 39;     /* gray-900 */
+  --color-secondary-50: 248 250 252; /* slate-50 */
+  --color-secondary-100: 241 245 249;/* slate-100 */
+  --color-secondary-200: 226 232 240;/* slate-200 */
+  --color-secondary-300: 203 213 225;/* slate-300 */
+  --color-secondary-400: 148 163 184;/* slate-400 */
+  --color-secondary-500: 100 116 139;/* slate-500 */
+  --color-secondary-600: 71 85 105;  /* slate-600 */
+  --color-secondary-700: 51 65 85;   /* slate-700 */
+  --color-secondary-800: 30 41 59;   /* slate-800 */
+  --color-secondary-900: 15 23 42;   /* slate-900 */
 }
+/* Primary palette */
+.bg-primary-500 { background-color: rgb(var(--color-primary-500)); }
+.hover\:bg-primary-600:hover { background-color: rgb(var(--color-primary-600)); }
+.text-primary-500 { color: rgb(var(--color-primary-500)); }
+.border-primary-500 { border-color: rgb(var(--color-primary-500)); }
+.shadow-primary-500\/30 { box-shadow: 0 10px 15px -3px rgba(var(--color-primary-500)/0.30), 0 4px 6px -2px rgba(var(--color-primary-500)/0.20); }
+/* Secondary palette */
+.bg-secondary-500 { background-color: rgb(var(--color-secondary-500)); }
+.hover\:bg-secondary-600:hover { background-color: rgb(var(--color-secondary-600)); }
+.text-secondary-500 { color: rgb(var(--color-secondary-500)); }
+.border-secondary-500 { border-color: rgb(var(--color-secondary-500)); }
+.shadow-secondary-500\/30 { box-shadow: 0 10px 15px -3px rgba(var(--color-secondary-500)/0.30), 0 4px 6px -2px rgba(var(--color-secondary-500)/0.20); }
+/* Selection */
+::selection {
+  background: rgba(var(--color-primary-500), 0.2);
 }
+/* Smooth scroll */
+html { scroll-behavior: smooth; }
+/* Remove default link underlines on brand */
+a { color: inherit; text-decoration: none; }
+/* Backdrop blur fallback */
+@supports not (backdrop-filter: blur(0)) {
+  .supports-\[backdrop-filter\]\:bg-white\/40 { background-color: rgba(255,255,255,0.85); }
+  .dark .supports-\[backdrop-filter\]\:bg-zinc-950\/40 { background-color: rgba(9,9,11,0.9); }
+}