+
+
+
+
Your bag
+
{cartCount ? `${cartCount} item${cartCount > 1 ? 's' : ''}` : 'No items yet'}
+
setActiveTab('red')}
+ className="cart-toggle"
+ onClick={toggleCart}
+ data-testid="cart-toggle"
>
- Red
+ Bag
+
+ {cartCount}
+
-
setActiveTab('green')}
- >
- Green
-
-
setActiveTab('blue')}
- >
- Blue
-
-
-
-
+
+ {isCartOpen && (
+
+
+
+
Shopping bag
+
Ready to ship
+
+ Hide
+
+
+ {freeShippingMessage}
+ {cartItems.length === 0 ? (
+ Your basket is empty – add your favorite finds.
+ ) : (
+
+ {cartItems.map((item) => (
+ updateQuantity(item.product.id, (qty) => qty + 1)}
+ onDecrement={() => updateQuantity(item.product.id, (qty) => qty - 1)}
+ />
+ ))}
+
+ )}
+
+
+ Subtotal
+ {currency.format(subtotal)}
+
+
+ Shipping
+ {shipping === 0 ? 'Complimentary' : currency.format(shipping)}
+
+
+ Total
+ {currency.format(total)}
+
+
+ Proceed to checkout
+
+
+ )}
+
+
+
+
+ {perks.map((perk) => (
+
+ {perk.title}
+ {perk.detail}
+
+ ))}
+
+
+
+
+
Shop by room
+
Spaces with intention
+
Refresh a single corner or rethink your whole home with designer-backed palettes.
+
+ {categorySummaries.map((category) => (
+
+ {category.category}
+ {category.count} curated pieces
+
+ ))}
+
+
+
+
+
Featured pieces
+
Crafted to layer beautifully
+
+ Mix tactile fabrics, natural woods, and sculptural silhouettes for your signature look.
+
+
+ {products.map((product) => (
+
addToCart(product.id)}
+ isHighlighted={highlightedProduct?.id === product.id}
+ />
+ ))}
+
+
+
+
+
+
+
From the studio
+
Layered neutrals, elevated silhouettes
+
+ We partner with small-batch workshops to produce timeless staples. Every stitch, weave,
+ and finishing touch is considered so you can style once and enjoy for years.
+
+
+ Responsibly sourced materials and certified woods
+ Color stories developed with interior stylists
+ Transparent pricing and limited runs per season
+
+
+ Book a design consult
+
+
+
)
}
diff --git a/src/data/products.ts b/src/data/products.ts
new file mode 100644
index 0000000..ee0799d
--- /dev/null
+++ b/src/data/products.ts
@@ -0,0 +1,105 @@
+export type Product = {
+ id: string
+ name: string
+ category: string
+ price: number
+ image: string
+ description: string
+ badge?: string
+ featured?: boolean
+ rating: number
+ colors: string[]
+}
+
+const products: Product[] = [
+ {
+ id: 'aurora-vase',
+ name: 'Aurora Porcelain Vase',
+ category: 'Decor',
+ price: 120,
+ image: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?auto=format&fit=crop&w=900&q=80',
+ description: 'Hand-thrown porcelain with a matte glaze inspired by slow dawns and fresh blooms.',
+ badge: 'New Arrival',
+ featured: true,
+ rating: 4.8,
+ colors: ['Cloud White', 'Soft Blush'],
+ },
+ {
+ id: 'linen-set',
+ name: 'Coastal Linen Sheet Set',
+ category: 'Bedroom',
+ price: 240,
+ image: 'https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=900&q=80',
+ description: 'Stone-washed European flax linen that grows softer with every night.',
+ badge: 'Bestseller',
+ featured: true,
+ rating: 4.9,
+ colors: ['Mist', 'Sage', 'Sand'],
+ },
+ {
+ id: 'atelier-mug',
+ name: 'Atelier Ceramic Mug Set',
+ category: 'Kitchen',
+ price: 64,
+ image: 'https://images.unsplash.com/photo-1488998527040-85054a85150e?auto=format&fit=crop&w=900&q=80',
+ description: 'Set of four wheel-thrown mugs with raw stoneware base and satin glaze.',
+ rating: 4.7,
+ colors: ['Charcoal', 'Oat'],
+ },
+ {
+ id: 'soho-chair',
+ name: 'Soho Lounge Chair',
+ category: 'Furniture',
+ price: 890,
+ image: 'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=900&q=80',
+ description: 'Low-profile lounge chair upholstered in recycled bouclé with walnut legs.',
+ badge: 'Limited',
+ featured: true,
+ rating: 4.6,
+ colors: ['Ivory', 'Ink'],
+ },
+ {
+ id: 'balance-lamp',
+ name: 'Balance Arc Lamp',
+ category: 'Lighting',
+ price: 310,
+ image: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61?auto=format&fit=crop&w=900&q=80',
+ description: 'Sculptural floor lamp with adjustable arc and warm-diffused LED glow.',
+ rating: 4.5,
+ colors: ['Matte Black', 'Brass'],
+ },
+ {
+ id: 'atelier-rug',
+ name: 'Atlas Wool Rug',
+ category: 'Living Room',
+ price: 620,
+ image: 'https://images.unsplash.com/photo-1501045661006-fcebe0257c3f?auto=format&fit=crop&w=900&q=80',
+ description: 'Hand-loomed Moroccan inspired rug in a low-contrast geometric pattern.',
+ rating: 4.8,
+ colors: ['Natural', 'Noir'],
+ },
+ {
+ id: 'glassware-set',
+ name: 'Gradient Glassware Duo',
+ category: 'Kitchen',
+ price: 78,
+ image: 'https://images.unsplash.com/photo-1481349518771-20055b2a7b24?auto=format&fit=crop&w=900&q=80',
+ description: 'Heat-resistant borosilicate glasses with a subtle ombré finish.',
+ badge: 'Editors’ pick',
+ rating: 4.4,
+ colors: ['Amber Fade', 'Rose Fade'],
+ },
+ {
+ id: 'planter-set',
+ name: 'Elevate Planter Trio',
+ category: 'Outdoor',
+ price: 185,
+ image: 'https://images.unsplash.com/photo-1449247709967-d4461a6a6103?auto=format&fit=crop&w=900&q=80',
+ description: 'Powder-coated steel planters with hidden drainage for effortless greenery.',
+ rating: 4.6,
+ colors: ['Eucalyptus', 'Clay'],
+ },
+]
+
+export default products
+
diff --git a/src/index.css b/src/index.css
index 08a3ac9..615ab8a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,68 +1,47 @@
:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
+ font-family: 'Inter', 'Soehne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ line-height: 1.6;
font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
+ color: #0f172a;
+ background-color: #f7f4ef;
+ --text: #0f172a;
+ --muted: #94a3b8;
+ --muted-strong: #475569;
+ --card: #fff;
+ --border: rgba(15, 23, 42, 0.08);
+ --accent: #f15435;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
}
body {
margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
min-height: 100vh;
+ background: #f7f4ef;
}
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 600;
+ margin: 0;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+p {
+ margin: 0;
}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+a {
+ color: inherit;
}
diff --git a/src/main.tsx b/src/main.tsx
index ade9d64..bef5202 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
-
-
+ ,
)