+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..e295352
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,134 @@
+import Link from "next/link";
+import { products } from "@/lib/products";
+import { ProductCard } from "@/components/ProductCard";
+
+function ShelfCard({
+ title,
+ ids,
+ cta,
+}: {
+ title: string;
+ ids: string[];
+ cta: string;
+}) {
+ const items = products.filter((p) => ids.includes(p.id)).slice(0, 4);
+ return (
+
+
+ + Looking for something? +
++ We're sorry. The web address you entered is not a functioning + page on our site. +
+ + Go to the Amazona home page + +
+
+ );
+}
+
+export default function Home() {
+ return (
+ {title}
+
+ {items.map((p) => (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+ {p.title.split(",")[0]}
+
+ ))}
+
+
+ {cta}
+
+
+ {/* Hero banner */}
+
+
+
+ );
+}
diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
new file mode 100644
index 0000000..312ed72
--- /dev/null
+++ b/src/app/product/[id]/page.tsx
@@ -0,0 +1,133 @@
+import Image from "next/image";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getProduct, products } from "@/lib/products";
+import { formatPrice } from "@/lib/format";
+import { Stars } from "@/components/Stars";
+import { BuyBox } from "@/components/BuyBox";
+import { ProductCard } from "@/components/ProductCard";
+
+export function generateStaticParams() {
+ return products.map((p) => ({ id: p.id }));
+}
+
+export default async function ProductPage({
+ params,
+}: {
+ params: Promise<{ id: string }>;
+}) {
+ const { id } = await params;
+ const product = getProduct(id);
+ if (!product) notFound();
+
+ const discount =
+ product.listPrice && product.listPrice > product.price
+ ? Math.round((1 - product.price / product.listPrice) * 100)
+ : 0;
+
+ const related = products
+ .filter((p) => p.category === product.category && p.id !== product.id)
+ .slice(0, 4);
+
+ return (
+
+
+
+ {/* Overlapping shelf cards */}
+
+
+ + Great deals, delivered fast +
++ Everything you need, all in one place. +
++ Shop electronics, home essentials, outdoor gear and more — with + free Prime delivery on eligible items. +
+ + Shop all deals + +
+
+
+ {/* Full product grid */}
+
+
+
+
+
+
+
+ + Sign in for the best experience +
++ See personalized picks, track orders, and check out faster. +
+
+
+ + Recommended for you +
+
+ {products.map((p) => (
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
new file mode 100644
index 0000000..7d06887
--- /dev/null
+++ b/src/app/search/page.tsx
@@ -0,0 +1,12 @@
+import { Suspense } from "react";
+import { SearchResults } from "@/components/SearchResults";
+
+export default function SearchPage() {
+ return (
+
+ {/* Image */}
+
+
+ {related.length > 0 && (
+
+
+
+ {/* Info */}
+
+
+ +
+ +
+
+ {/* Buy box */}
+ + {product.title} +
+ + Visit the {product.brand} Store + +
+
+
+ + +
+ {discount > 0 && (
+
+ -{discount}%
+
+ )}
+
+ {formatPrice(product.price)}
+
+
+ {product.listPrice && (
+
+ List Price:{" "}
+
+ {formatPrice(product.listPrice)}
+
+
+ )}
+
+ + +
About this item
+-
+ {product.bullets.map((b) => (
+
- {b} + ))} +
{product.description}
+
+
+ + Products related to this item +
+
+ {related.map((p) => (
+
+
+
+ );
+}
diff --git a/src/components/CartView.tsx b/src/components/CartView.tsx
new file mode 100644
index 0000000..4fe5db9
--- /dev/null
+++ b/src/components/CartView.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useCart } from "@/lib/cart-context";
+import { formatPrice } from "@/lib/format";
+
+export function CartView() {
+ const { items, subtotal, count, setQuantity, removeItem } = useCart();
+
+ if (items.length === 0) {
+ return (
+
+ {formatPrice(product.price)}
+
+ {product.prime && (
+
+ prime{" "}
+ FREE delivery
+
+ )}
+
+ {product.inStock ? (
+ In Stock
+ ) : (
+ Currently unavailable
+ )}
+
+
+ {product.inStock && (
+ <>
+
+
+
+
+
+ Go to Cart
+
+
+ )}
+
+
+ );
+ }
+
+ return (
+
+
+ + Your Amazona Cart is empty +
++ Check out our recommendations to get started. +
+ + Continue shopping + +
+
+ );
+}
diff --git a/src/components/CheckoutView.tsx b/src/components/CheckoutView.tsx
new file mode 100644
index 0000000..259ed9b
--- /dev/null
+++ b/src/components/CheckoutView.tsx
@@ -0,0 +1,207 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useCart } from "@/lib/cart-context";
+import { formatPrice } from "@/lib/format";
+
+export function CheckoutView() {
+ const { items, subtotal, count, clear } = useCart();
+ const router = useRouter();
+ const [placed, setPlaced] = useState(false);
+ const [orderId, setOrderId] = useState("");
+
+ const shipping = subtotal >= 25 || subtotal === 0 ? 0 : 5.99;
+ const tax = Math.round(subtotal * 0.0875 * 100) / 100;
+ const total = subtotal + shipping + tax;
+
+ function placeOrder(e: React.FormEvent) {
+ e.preventDefault();
+ const id = `AMZ-${Math.random().toString(36).slice(2, 8).toUpperCase()}`;
+ setOrderId(id);
+ setPlaced(true);
+ clear();
+ }
+
+ if (placed) {
+ return (
+
+ {/* Line items */}
+
+
+
+
+ {/* Summary */}
+
+
+
+ {items.map(({ product, quantity }) => (
+ + Shopping Cart +
+ Price +
+
+
+ ))}
+
+
+
+ {product.title}
+
+
+
+ {product.inStock ? (
+ In Stock
+ ) : (
+ Out of stock
+ )}
+
+ {product.prime && (
+
+
+ prime
+ {" "}
+ FREE delivery
+
+ )}
+
+
+ |
+
+
+
+ {formatPrice(product.price * quantity)}
+
+
+ Subtotal ({count} item{count === 1 ? "" : "s"}):{" "}
+ {formatPrice(subtotal)}
+
+
+
+
+ Subtotal ({count} item{count === 1 ? "" : "s"}):{" "}
+ {formatPrice(subtotal)}
+
+
+
+ Proceed to checkout
+
+
+
+ );
+ }
+
+ if (items.length === 0) {
+ return (
+
+
+
+
+
+ + Order placed, thank you! +
++ Confirmation will be sent to your email. Your order number is{" "} + {orderId}. +
+ + Continue shopping + +
+
+ );
+ }
+
+ return (
+
+
+ Your cart is empty
+ + Continue shopping + +
+
+ );
+}
+
+function Field({
+ label,
+ name,
+ required,
+ placeholder,
+}: {
+ label: string;
+ name: string;
+ required?: boolean;
+ placeholder?: string;
+}) {
+ return (
+
+ );
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+ return (
+ + Checkout +
+
+ {/* Form */}
+
+
+ {/* Order summary */}
+
+
+
+
+ + By placing your order you agree to our demo terms. +
+ ++ Order Summary +
+-
+
- Order total: +
- {formatPrice(total)} +
+
+ -
+ {items.map(({ product, quantity }) => (
+
-
+
+ + {product.title.split(",")[0]} + + ×{quantity} +
+ ))}
+
+ {label}
+ {value}
+
+ );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..483dbc3
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,78 @@
+import Link from "next/link";
+
+const columns = [
+ {
+ title: "Get to Know Us",
+ links: ["About Us", "Careers", "Press Releases", "Our Community"],
+ },
+ {
+ title: "Make Money with Us",
+ links: [
+ "Sell products",
+ "Become an Affiliate",
+ "Advertise Your Products",
+ "Self-Publish",
+ ],
+ },
+ {
+ title: "Payment Products",
+ links: [
+ "Business Card",
+ "Shop with Points",
+ "Reload Your Balance",
+ "Currency Converter",
+ ],
+ },
+ {
+ title: "Let Us Help You",
+ links: [
+ "Your Account",
+ "Your Orders",
+ "Shipping Rates & Policies",
+ "Help",
+ ],
+ },
+];
+
+export function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..bc30ba7
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+import { categories } from "@/lib/products";
+import { useCart } from "@/lib/cart-context";
+
+export function Header() {
+ const router = useRouter();
+ const params = useSearchParams();
+ const { count } = useCart();
+ const [query, setQuery] = useState(params.get("q") ?? "");
+ const [category, setCategory] = useState(params.get("category") ?? "All");
+
+ function submitSearch(e: React.FormEvent) {
+ e.preventDefault();
+ const sp = new URLSearchParams();
+ if (query.trim()) sp.set("q", query.trim());
+ if (category !== "All") sp.set("category", category);
+ router.push(`/search${sp.toString() ? `?${sp}` : ""}`);
+ }
+
+ return (
+
+
+ amazona
+ .
+
+
+
+
+ {/* Secondary nav */}
+
+
+
+
+ {/* Search */}
+
+
+
+
+ Deliver to
+ United States
+
+
+
+
+
+ Hello, sign in
+ Account & Lists
+
+
+
+
+
+
+ Returns
+ & Orders
+
+
+
+ {count}
+
+
+ Cart
+
+
+
+
+ All
+
+ {categories
+ .filter((c) => c !== "All")
+ .map((c) => (
+
+ {c}
+
+ ))}
+
+ Today's Deals
+
+
+
+
+
+ );
+}
diff --git a/src/components/SearchResults.tsx b/src/components/SearchResults.tsx
new file mode 100644
index 0000000..6a4a31a
--- /dev/null
+++ b/src/components/SearchResults.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { categories, searchProducts } from "@/lib/products";
+import { ProductCard } from "@/components/ProductCard";
+import { Stars } from "@/components/Stars";
+
+type SortKey = "featured" | "priceLow" | "priceHigh" | "rating";
+
+export function SearchResults() {
+ const params = useSearchParams();
+ const q = params.get("q") ?? "";
+ const initialCategory = params.get("category") ?? "All";
+
+ const [category, setCategory] = useState(initialCategory);
+ const [sort, setSort] = useState
+
+
+
+ {formatPrice(product.price)}
+
+ {product.listPrice && (
+
+ {formatPrice(product.listPrice)}
+
+ )}
+ {discount > 0 && (
+
+ -{discount}%
+
+ )}
+
+ {product.prime && (
+
+ prime
+ FREE delivery
+
+ )}
+
+ {product.inStock ? (
+ In Stock
+ ) : (
+ Currently unavailable
+ )}
+
+
+
+
+ );
+}
diff --git a/src/components/Stars.tsx b/src/components/Stars.tsx
new file mode 100644
index 0000000..de43f4e
--- /dev/null
+++ b/src/components/Stars.tsx
@@ -0,0 +1,60 @@
+export function Stars({
+ rating,
+ reviews,
+ size = "sm",
+}: {
+ rating: number;
+ reviews?: number;
+ size?: "sm" | "md";
+}) {
+ const full = Math.floor(rating);
+ const hasHalf = rating - full >= 0.25 && rating - full < 0.75;
+ const rounded = rating - full >= 0.75 ? full + 1 : full;
+ const dim = size === "md" ? 18 : 14;
+
+ return (
+
+
+
+ + {results.length} result{results.length === 1 ? "" : "s"} + {q && ( + <> + {" "} + for "{q}" + + )} +
+ +
+ {/* Filters sidebar */}
+
+
+ {/* Results grid */}
+
+
+ {results.length === 0 ? (
+
+
+
+ ) : (
+ No results found
++ Try a different search term or category. +
+
+ {results.map((p) => (
+
+ )}
+
+
+ );
+}
diff --git a/src/lib/cart-context.tsx b/src/lib/cart-context.tsx
new file mode 100644
index 0000000..f922b62
--- /dev/null
+++ b/src/lib/cart-context.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import {
+ createContext,
+ useContext,
+ useEffect,
+ useMemo,
+ useReducer,
+} from "react";
+import type { Product } from "@/lib/products";
+
+export type CartItem = {
+ product: Product;
+ quantity: number;
+};
+
+type CartState = {
+ items: CartItem[];
+};
+
+type CartAction =
+ | { type: "add"; product: Product; quantity?: number }
+ | { type: "remove"; id: string }
+ | { type: "setQuantity"; id: string; quantity: number }
+ | { type: "clear" }
+ | { type: "hydrate"; items: CartItem[] };
+
+const STORAGE_KEY = "amazona-cart";
+
+function reducer(state: CartState, action: CartAction): CartState {
+ switch (action.type) {
+ case "hydrate":
+ return { items: action.items };
+ case "add": {
+ const qty = action.quantity ?? 1;
+ const existing = state.items.find(
+ (i) => i.product.id === action.product.id,
+ );
+ if (existing) {
+ return {
+ items: state.items.map((i) =>
+ i.product.id === action.product.id
+ ? { ...i, quantity: i.quantity + qty }
+ : i,
+ ),
+ };
+ }
+ return {
+ items: [...state.items, { product: action.product, quantity: qty }],
+ };
+ }
+ case "remove":
+ return { items: state.items.filter((i) => i.product.id !== action.id) };
+ case "setQuantity": {
+ if (action.quantity <= 0) {
+ return { items: state.items.filter((i) => i.product.id !== action.id) };
+ }
+ return {
+ items: state.items.map((i) =>
+ i.product.id === action.id
+ ? { ...i, quantity: action.quantity }
+ : i,
+ ),
+ };
+ }
+ case "clear":
+ return { items: [] };
+ default:
+ return state;
+ }
+}
+
+type CartContextValue = {
+ items: CartItem[];
+ count: number;
+ subtotal: number;
+ addItem: (product: Product, quantity?: number) => void;
+ removeItem: (id: string) => void;
+ setQuantity: (id: string, quantity: number) => void;
+ clear: () => void;
+};
+
+const CartContext = createContext
+ {Array.from({ length: 5 }).map((_, i) => {
+ const isFull = i < (hasHalf ? full : rounded);
+ const isHalf = hasHalf && i === full;
+ return (
+
+ );
+ })}
+
+ {reviews !== undefined && (
+
+ {reviews.toLocaleString("en-US")}
+
+ )}
+