Upload 4 files

src/pages/Home.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { products } from "../data/products.js";
+
+export default function Home() {
+  const featured = products[0];
+
+  return (
+    <div className="space-y-12">
+      <section className="overflow-hidden rounded-3xl border border-neutral-200 bg-gradient-to-b from-neutral-50 to-white">
+        <div className="grid items-center gap-10 p-8 md:grid-cols-2 md:p-12">
+          <div className="space-y-4">
+            <p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">New</p>
+            <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">
+              {featured.name}
+            </h1>
+            <p className="text-lg text-neutral-600">{featured.tagline}</p>
+            <div className="flex flex-wrap gap-3 pt-2">
+              <Link
+                to={`/product/${featured.slug}`}
+                className="rounded-full bg-neutral-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-neutral-800"
+              >
+                Learn more
+              </Link>
+              <Link
+                to="/store"
+                className="rounded-full border border-neutral-300 bg-white px-5 py-2.5 text-sm font-semibold text-neutral-900 hover:bg-neutral-50"
+              >
+                Shop all
+              </Link>
+            </div>
+            <p className="text-xs text-neutral-500 pt-2">
+              Tip: Replace placeholder images/specs with your own licensed assets & data.
+            </p>
+          </div>
+
+          <div className="relative">
+            <img
+              src={featured.heroImage}
+              alt={featured.name}
+              className="w-full rounded-2xl border border-neutral-200 object-cover"
+              loading="lazy"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {products.map((p) => (
+          <Link
+            key={p.slug}
+            to={`/product/${p.slug}`}
+            className="group rounded-3xl border border-neutral-200 bg-white p-5 hover:shadow-sm"
+          >
+            <div className="overflow-hidden rounded-2xl border border-neutral-200">
+              <img
+                src={p.heroImage}
+                alt={p.name}
+                className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+                loading="lazy"
+              />
+            </div>
+            <div className="pt-4">
+              <p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">{p.category}</p>
+              <h3 className="pt-1 text-lg font-semibold tracking-tight">{p.name}</h3>
+              <p className="pt-1 text-sm text-neutral-600">{p.tagline}</p>
+              <p className="pt-3 text-sm font-semibold text-neutral-900">From ${p.priceFrom}</p>
+            </div>
+          </Link>
+        ))}
+      </section>
+    </div>
+  );
+}

src/pages/NotFound.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function NotFound() {
+  return (
+    <div className="rounded-3xl border border-neutral-200 bg-white p-8">
+      <h2 className="text-2xl font-semibold">Page not found</h2>
+      <p className="pt-2 text-neutral-600">The page you requested doesn’t exist.</p>
+      <Link to="/" className="mt-6 inline-block rounded-full bg-neutral-900 px-5 py-2.5 text-sm font-semibold text-white">
+        Go home
+      </Link>
+    </div>
+  );
+}

src/pages/Product.jsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { Link, useParams } from "react-router-dom";
+import { getProduct } from "../data/products.js";
+
+function SpecRow({ label, value }) {
+  return (
+    <div className="flex items-center justify-between gap-6 border-b border-neutral-200 py-3 text-sm">
+      <span className="text-neutral-600">{label}</span>
+      <span className="font-medium text-neutral-900">{value}</span>
+    </div>
+  );
+}
+
+export default function Product() {
+  const { slug } = useParams();
+  const p = getProduct(slug);
+
+  if (!p) {
+    return (
+      <div className="rounded-3xl border border-neutral-200 bg-white p-8">
+        <h2 className="text-2xl font-semibold">Product not found</h2>
+        <p className="pt-2 text-neutral-600">The product you’re looking for doesn’t exist.</p>
+        <Link to="/store" className="mt-6 inline-block rounded-full bg-neutral-900 px-5 py-2.5 text-sm font-semibold text-white">
+          Back to Store
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-10">
+      <div className="flex items-center justify-between">
+        <Link to="/store" className="text-sm font-semibold text-neutral-700 hover:text-neutral-900">
+          ← Back to Store
+        </Link>
+        <p className="text-sm text-neutral-500">From ${p.priceFrom}</p>
+      </div>
+
+      <section className="grid gap-8 md:grid-cols-2 md:items-start">
+        <div className="space-y-4">
+          <p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">{p.category}</p>
+          <h1 className="text-4xl font-semibold tracking-tight">{p.name}</h1>
+          <p className="text-lg text-neutral-600">{p.tagline}</p>
+
+          <div className="flex flex-wrap gap-3 pt-2">
+            <button className="rounded-full bg-neutral-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-neutral-800">
+              Buy (demo)
+            </button>
+            <a
+              className="rounded-full border border-neutral-300 bg-white px-5 py-2.5 text-sm font-semibold text-neutral-900 hover:bg-neutral-50"
+              href="https://www.apple.com/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Compare on official site
+            </a>
+          </div>
+
+          <div className="pt-6">
+            <h3 className="text-base font-semibold">Highlights</h3>
+            <ul className="mt-3 list-disc space-y-2 pl-5 text-sm text-neutral-700">
+              {p.highlights.map((h, idx) => (
+                <li key={idx}>{h}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <div className="overflow-hidden rounded-3xl border border-neutral-200">
+            <img src={p.heroImage} alt={p.name} className="w-full object-cover" loading="lazy" />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            {p.gallery.map((src, idx) => (
+              <div key={idx} className="overflow-hidden rounded-2xl border border-neutral-200">
+                <img src={src} alt={`${p.name} ${idx + 1}`} className="h-32 w-full object-cover" loading="lazy" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-6 md:grid-cols-2">
+        <div className="rounded-3xl border border-neutral-200 bg-white p-6">
+          <h3 className="text-base font-semibold">Specifications</h3>
+          <div className="mt-3">
+            {Object.entries(p.specs).map(([k, v]) => (
+              <SpecRow key={k} label={k.toUpperCase()} value={v} />
+            ))}
+          </div>
+          <p className="pt-4 text-xs text-neutral-500">
+            Replace these sample specs with your own data or data you’re licensed to publish.
+          </p>
+        </div>
+
+        <div className="rounded-3xl border border-neutral-200 bg-white p-6">
+          <h3 className="text-base font-semibold">Video</h3>
+          <p className="pt-2 text-sm text-neutral-600">
+            Embedded video (YouTube). Use official videos or content you have rights to.
+          </p>
+          <div className="mt-4 aspect-video overflow-hidden rounded-2xl border border-neutral-200">
+            <iframe
+              className="h-full w-full"
+              src={`https://www.youtube.com/embed/${p.youtubeId}`}
+              title="Product video"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className="rounded-3xl border border-neutral-200 bg-neutral-50 p-6 text-sm text-neutral-700">
+        <b>Note:</b> This is an original demo UI inspired by modern ecommerce layouts.
+        Do not copy Apple’s site design or use Apple’s copyrighted assets without permission.
+      </section>
+    </div>
+  );
+}

src/pages/Store.jsx

@@ -0,0 +1,66 @@
+import React, { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { products } from "../data/products.js";
+
+export default function Store() {
+  const [q, setQ] = useState("");
+
+  const filtered = useMemo(() => {
+    const term = q.trim().toLowerCase();
+    if (!term) return products;
+    return products.filter((p) =>
+      [p.name, p.category, p.tagline].some((x) => x.toLowerCase().includes(term))
+    );
+  }, [q]);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+        <div>
+          <h2 className="text-3xl font-semibold tracking-tight">Store</h2>
+          <p className="text-neutral-600">Browse products (demo data).</p>
+        </div>
+        <div className="w-full md:w-80">
+          <label className="text-xs font-semibold uppercase tracking-wider text-neutral-500">Search</label>
+          <input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search products..."
+            className="mt-2 w-full rounded-xl border border-neutral-300 bg-white px-4 py-2.5 text-sm outline-none focus:border-neutral-900"
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {filtered.map((p) => (
+          <Link
+            key={p.slug}
+            to={`/product/${p.slug}`}
+            className="group rounded-3xl border border-neutral-200 bg-white p-5 hover:shadow-sm"
+          >
+            <div className="overflow-hidden rounded-2xl border border-neutral-200">
+              <img
+                src={p.heroImage}
+                alt={p.name}
+                className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+                loading="lazy"
+              />
+            </div>
+            <div className="pt-4">
+              <p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">{p.category}</p>
+              <h3 className="pt-1 text-lg font-semibold tracking-tight">{p.name}</h3>
+              <p className="pt-1 text-sm text-neutral-600">{p.tagline}</p>
+              <p className="pt-3 text-sm font-semibold text-neutral-900">From ${p.priceFrom}</p>
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="rounded-2xl border border-neutral-200 bg-neutral-50 p-6 text-neutral-700">
+          No results. Try a different search term.
+        </div>
+      ) : null}
+    </div>
+  );
+}