[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Warm neutral color palette for Serene Atelier */ --background: oklch(0.97 0.01 85); --foreground: oklch(0.25 0.01 85); --card: oklch(0.98 0.005 85); --card-foreground: oklch(0.25 0.01 85); --popover: oklch(0.98 0.005 85); --popover-foreground: oklch(0.25 0.01 85); --primary: oklch(0.28 0.015 85); --primary-foreground: oklch(0.98 0.005 85); --secondary: oklch(0.88 0.015 75); --secondary-foreground: oklch(0.25 0.01 85); --muted: oklch(0.92 0.01 80); --muted-foreground: oklch(0.5 0.01 85); --accent: oklch(0.65 0.08 45); --accent-foreground: oklch(0.98 0.005 85); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.005 85); --border: oklch(0.88 0.01 80); --input: oklch(0.88 0.01 80); --ring: oklch(0.65 0.08 45); --chart-1: oklch(0.65 0.08 45); --chart-2: oklch(0.6 0.06 75); --chart-3: oklch(0.55 0.05 95); --chart-4: oklch(0.7 0.07 55); --chart-5: oklch(0.5 0.04 85); --radius: 0.125rem; --sidebar: oklch(0.97 0.01 85); --sidebar-foreground: oklch(0.25 0.01 85); --sidebar-primary: oklch(0.28 0.015 85); --sidebar-primary-foreground: oklch(0.98 0.005 85); --sidebar-accent: oklch(0.92 0.01 80); --sidebar-accent-foreground: oklch(0.25 0.01 85); --sidebar-border: oklch(0.88 0.01 80); --sidebar-ring: oklch(0.65 0.08 45); } .dark { --background: oklch(0.2 0.01 85); --foreground: oklch(0.95 0.005 85); --card: oklch(0.22 0.01 85); --card-foreground: oklch(0.95 0.005 85); --popover: oklch(0.22 0.01 85); --popover-foreground: oklch(0.95 0.005 85); --primary: oklch(0.95 0.005 85); --primary-foreground: oklch(0.25 0.01 85); --secondary: oklch(0.3 0.015 85); --secondary-foreground: oklch(0.95 0.005 85); --muted: oklch(0.28 0.01 85); --muted-foreground: oklch(0.65 0.01 85); --accent: oklch(0.65 0.08 45); --accent-foreground: oklch(0.98 0.005 85); --destructive: oklch(0.5 0.2 27); --destructive-foreground: oklch(0.95 0.005 85); --border: oklch(0.3 0.01 85); --input: oklch(0.3 0.01 85); --ring: oklch(0.65 0.08 45); --chart-1: oklch(0.65 0.08 45); --chart-2: oklch(0.6 0.06 75); --chart-3: oklch(0.55 0.05 95); --chart-4: oklch(0.7 0.07 55); --chart-5: oklch(0.5 0.04 85); --sidebar: oklch(0.2 0.01 85); --sidebar-foreground: oklch(0.95 0.005 85); --sidebar-primary: oklch(0.65 0.08 45); --sidebar-primary-foreground: oklch(0.98 0.005 85); --sidebar-accent: oklch(0.28 0.01 85); --sidebar-accent-foreground: oklch(0.95 0.005 85); --sidebar-border: oklch(0.3 0.01 85); --sidebar-ring: oklch(0.65 0.08 45); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Cormorant_Garamond, Inter } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" const cormorant = Cormorant_Garamond({ subsets: ["latin"], weight: ["300", "400", "500", "600"], variable: "--font-cormorant", display: "swap", }) const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) export const metadata: Metadata = { title: "Serene Atelier - Timeless Clothing", description: "Discover mindfully crafted clothing that honors both style and sustainability", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...}> {children} ) } [V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true" "use client" import Link from "next/link" import { ShoppingBag, Heart, Menu, X } from "lucide-react" import { useState } from "react" import { Button } from "@/components/ui/button" export function Navigation() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [cartCount, setCartCount] = useState(0) return (

{/* Logo */} Serene Atelier {/* Desktop Navigation */}

Collections Shop Lookbook About

{/* Right Actions */}

{/* Mobile Menu */} {mobileMenuOpen && (

setMobileMenuOpen(false)} > Collections setMobileMenuOpen(false)} > Shop setMobileMenuOpen(false)} > Lookbook setMobileMenuOpen(false)} > About setMobileMenuOpen(false)} > Wishlist

)}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" import Link from "next/link" export default function HomePage() { return (

{/* Hero Section - Full Screen Seasonal Showcase */}

Spring Summer 2024

Discover our latest collection of timeless pieces crafted with intention and care

{/* Featured Categories */}

Curated for You

Each piece is thoughtfully designed to complement your lifestyle

Essentials

Timeless basics

Outerwear

Refined layers

Dresses

Effortless elegance

{/* Philosophy Section */}

Crafted with Intention

At Serene Atelier, we believe in creating clothing that transcends trends. Each piece is thoughtfully designed using sustainable materials and ethical practices, ensuring that beauty and responsibility go hand in hand.

) } [V0_FILE]jpg:file="public/elegant-minimalist-fashion-model-wearing-neutral-t.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/elegant-minimalist-fashion-model-wearing-neutral-t-sYI4V78IO20lOGnyAIEqIlX8jEkeLM.jpg" isMerged="true" [V0_FILE]jpg:file="public/minimalist-wardrobe-essentials-neutral-clothing.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimalist-wardrobe-essentials-neutral-clothing-4J7n2P1wkDKLy1g0SXDodhWwtaKrUu.jpg" isMerged="true" [V0_FILE]jpg:file="public/elegant-outerwear-coat-neutral-tones.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/elegant-outerwear-coat-neutral-tones-8GjdZkF9QXmyspAvg1DxAasDOylVdo.jpg" isMerged="true" [V0_FILE]jpg:file="public/flowing-dress-minimalist-fashion-natural-fabric.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/flowing-dress-minimalist-fashion-natural-fabric-A8knI5u16mJpaQKCY2b9EGefIneX7n.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/shop/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { ProductGrid } from "@/components/product-grid" import { ProductFilters } from "@/components/product-filters" export default function ShopPage() { return (

{/* Header */}

Shop All

Discover our complete collection of mindfully crafted pieces

{/* Filters */} {/* Product Grid */}

) } [V0_FILE]typescriptreact:file="components/product-filters.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { SlidersHorizontal } from "lucide-react" export function ProductFilters() { const [selectedCategory, setSelectedCategory] = useState("all") const [sortBy, setSortBy] = useState("featured") const categories = [ { id: "all", label: "All" }, { id: "essentials", label: "Essentials" }, { id: "outerwear", label: "Outerwear" }, { id: "dresses", label: "Dresses" }, { id: "tops", label: "Tops" }, { id: "bottoms", label: "Bottoms" }, ] return (

{/* Category Filters */}

{categories.map((category) => ( ))}

{/* Sort Options */}

48 Products

) } [V0_FILE]typescriptreact:file="components/product-grid.tsx" isMerged="true" "use client" import { ProductCard } from "@/components/product-card" const products = [ { id: 1, name: "Linen Relaxed Shirt", price: 128, image: "/linen-shirt-natural-beige.jpg", fabric: "100% Organic Linen", colors: ["Natural", "Ivory", "Stone"], }, { id: 2, name: "Wide Leg Trousers", price: 165, image: "/wide-leg-trousers-neutral.jpg", fabric: "Organic Cotton Twill", colors: ["Sand", "Charcoal", "Olive"], }, { id: 3, name: "Silk Slip Dress", price: 245, image: "/silk-slip-dress-minimal.jpg", fabric: "Peace Silk", colors: ["Champagne", "Terracotta", "Sage"], }, { id: 4, name: "Cashmere Sweater", price: 298, image: "/cashmere-sweater-neutral.jpg", fabric: "Recycled Cashmere", colors: ["Oat", "Camel", "Charcoal"], }, { id: 5, name: "Tailored Blazer", price: 385, image: "/tailored-blazer-minimal.jpg", fabric: "Wool Blend", colors: ["Sand", "Navy", "Black"], }, { id: 6, name: "Cotton Midi Skirt", price: 145, image: "/cotton-midi-skirt-flowing.jpg", fabric: "Organic Cotton", colors: ["Cream", "Rust", "Forest"], }, { id: 7, name: "Ribbed Tank Top", price: 68, image: "/ribbed-tank-top-minimal.jpg", fabric: "Organic Cotton Rib", colors: ["White", "Black", "Taupe"], }, { id: 8, name: "Wool Coat", price: 485, image: "/wool-coat-elegant-neutral.jpg", fabric: "Merino Wool", colors: ["Camel", "Charcoal", "Ivory"], }, { id: 9, name: "Linen Dress", price: 195, image: "/linen-dress-flowing-natural.jpg", fabric: "European Linen", colors: ["Natural", "Terracotta", "Sage"], }, ] export function ProductGrid() { return (

{products.map((product) => ( ))}

) } [V0_FILE]typescriptreact:file="components/product-card.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Heart } from "lucide-react" import { Button } from "@/components/ui/button" interface Product { id: number name: string price: number image: string fabric: string colors: string[] } export function ProductCard({ product }: { product: Product }) { const [isWishlisted, setIsWishlisted] = useState(false) const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>

{/* Wishlist Button */} {/* Fabric Details - Shown on Hover */}

Fabric

{product.fabric}

{product.colors.map((color) => ( {color} ))}

{/* Product Info */}

{product.name}

${product.price}

) } [V0_FILE]jpg:file="public/linen-shirt-natural-beige.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/linen-shirt-natural-beige-RDUz9lr2Ho8IpYQiwvbX2yIXu3Ym84.jpg" isMerged="true" [V0_FILE]jpg:file="public/wide-leg-trousers-neutral.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wide-leg-trousers-neutral-eOhNC3oD7CxgqRvMlNN0tvYWKmXIEt.jpg" isMerged="true" [V0_FILE]jpg:file="public/silk-slip-dress-minimal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/silk-slip-dress-minimal-KCZpHN3hltgEh4F1mzCiwBwxn1kjpv.jpg" isMerged="true" [V0_FILE]jpg:file="public/cashmere-sweater-neutral.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cashmere-sweater-neutral-8bD12rmNeayVmQt0bCcY2XekUZH9lV.jpg" isMerged="true" [V0_FILE]jpg:file="public/tailored-blazer-minimal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tailored-blazer-minimal-QnAr8vCAKVjjUa3bFGriaGt91mqIQq.jpg" isMerged="true" [V0_FILE]jpg:file="public/cotton-midi-skirt-flowing.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cotton-midi-skirt-flowing-CuQa4tsyMIcwUN5pCp0iK2ZkIJZ2gv.jpg" isMerged="true" [V0_FILE]jpg:file="public/ribbed-tank-top-minimal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ribbed-tank-top-minimal-TqmlqPlpiiZ9BmMewZpPRQYZgqc1yq.jpg" isMerged="true" [V0_FILE]jpg:file="public/wool-coat-elegant-neutral.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wool-coat-elegant-neutral-DlZTlxG90LZi7F9YrNiK0WR2uMZ7q0.jpg" isMerged="true" [V0_FILE]jpg:file="public/linen-dress-flowing-natural.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/linen-dress-flowing-natural-THPn9Ahi4DUa9iXeLwSX4mwR96j9lC.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/product/[id]/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { ProductDetail } from "@/components/product-detail" import { RelatedProducts } from "@/components/related-products" export default function ProductPage({ params }: { params: { id: string } }) { return (

) } [V0_FILE]typescriptreact:file="components/product-detail.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Heart, ShoppingBag } from "lucide-react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" const productData = { name: "Linen Relaxed Shirt", price: 128, images: ["/linen-shirt-natural-beige.jpg", "/linen-shirt-detail-texture.jpg", "/linen-shirt-styled-look.jpg"], description: "A timeless essential crafted from 100% organic linen. This relaxed-fit shirt features a classic collar, button-front closure, and a gently curved hem. Perfect for layering or wearing on its own.", fabric: "100% Organic Linen", fabricDetails: "Sourced from European flax farms, our linen is grown without pesticides and processed using eco-friendly methods. Naturally breathable and temperature-regulating.", colors: [ { name: "Natural", hex: "#E8DCC8" }, { name: "Ivory", hex: "#F5F3ED" }, { name: "Stone", hex: "#C4B5A0" }, ], sizes: ["XS", "S", "M", "L", "XL"], care: "Machine wash cold with like colors. Tumble dry low or line dry. Iron on medium heat if needed.", sustainability: "Made in Portugal in a family-owned workshop that prioritizes fair wages and safe working conditions. Carbon-neutral shipping.", } export function ProductDetail({ productId }: { productId: string }) { const [selectedImage, setSelectedImage] = useState(0) const [selectedColor, setSelectedColor] = useState(productData.colors[0]) const [selectedSize, setSelectedSize] = useState("") const [isWishlisted, setIsWishlisted] = useState(false) return (

{/* Images */}

{/* Main Image */}

{/* Thumbnail Images */}

{productData.images.map((image, index) => ( ))}

{/* Product Info */}

{productData.name}

${productData.price}

{productData.description}

{/* Fabric Info */}

Fabric

{productData.fabric}

{/* Color Selection */}

Color {selectedColor.name}

{productData.colors.map((color) => (

{/* Size Selection */}

Size

{productData.sizes.map((size) => ( ))}

{/* Actions */}

{/* Accordion Details */} Fabric Details {productData.fabricDetails} Care Instructions {productData.care} Sustainability {productData.sustainability}

) } [V0_FILE]typescriptreact:file="components/related-products.tsx" isMerged="true" import { ProductCard } from "@/components/product-card" const relatedProducts = [ { id: 2, name: "Wide Leg Trousers", price: 165, image: "/wide-leg-trousers-neutral.jpg", fabric: "Organic Cotton Twill", colors: ["Sand", "Charcoal", "Olive"], }, { id: 7, name: "Ribbed Tank Top", price: 68, image: "/ribbed-tank-top-minimal.jpg", fabric: "Organic Cotton Rib", colors: ["White", "Black", "Taupe"], }, { id: 5, name: "Tailored Blazer", price: 385, image: "/tailored-blazer-minimal.jpg", fabric: "Wool Blend", colors: ["Sand", "Navy", "Black"], }, ] export function RelatedProducts() { return (

Complete the Look

{relatedProducts.map((product) => ( ))}

) } [V0_FILE]jpg:file="public/linen-shirt-detail-texture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/linen-shirt-detail-texture-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" isMerged="true" [V0_FILE]jpg:file="public/linen-shirt-styled-look.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/linen-shirt-styled-look-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/lookbook/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { LookbookGallery } from "@/components/lookbook-gallery" export default function LookbookPage() { return (

{/* Header */}

Spring Summer 2024

Discover how to style our latest collection for effortless everyday elegance

) } [V0_FILE]typescriptreact:file="components/lookbook-gallery.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { X, ShoppingBag } from "lucide-react" import Link from "next/link" const lookbookItems = [ { id: 1, image: "/lookbook-outfit-1-linen-neutrals.jpg", title: "Coastal Ease", description: "Relaxed linen pieces perfect for warm weather", products: [ { id: 1, name: "Linen Relaxed Shirt", price: 128 }, { id: 2, name: "Wide Leg Trousers", price: 165 }, ], }, { id: 2, image: "/lookbook-outfit-2-layered-minimal.jpg", title: "Urban Layers", description: "Sophisticated layering for city living", products: [ { id: 4, name: "Cashmere Sweater", price: 298 }, { id: 5, name: "Tailored Blazer", price: 385 }, ], }, { id: 3, image: "/lookbook-outfit-3-dress-elegant.jpg", title: "Effortless Evening", description: "Timeless pieces that transition seamlessly", products: [ { id: 3, name: "Silk Slip Dress", price: 245 }, { id: 8, name: "Wool Coat", price: 485 }, ], }, { id: 4, image: "/lookbook-outfit-4-casual-chic.jpg", title: "Weekend Comfort", description: "Elevated basics for relaxed days", products: [ { id: 7, name: "Ribbed Tank Top", price: 68 }, { id: 6, name: "Cotton Midi Skirt", price: 145 }, ], }, { id: 5, image: "/lookbook-outfit-5-monochrome.jpg", title: "Monochrome Moment", description: "The power of tonal dressing", products: [ { id: 9, name: "Linen Dress", price: 195 }, { id: 5, name: "Tailored Blazer", price: 385 }, ], }, { id: 6, image: "/lookbook-outfit-6-textured-layers.jpg", title: "Textured Harmony", description: "Mixing fabrics for visual interest", products: [ { id: 4, name: "Cashmere Sweater", price: 298 }, { id: 2, name: "Wide Leg Trousers", price: 165 }, ], }, ] export function LookbookGallery() { const [selectedLook, setSelectedLook] = useState<(typeof lookbookItems)[0] | null>(null) return ( <>

{lookbookItems.map((item) => ( ))}

{/* Modal */} {selectedLook && (

{/* Image */}

{/* Details */}

{selectedLook.title}

{selectedLook.description}

Featured Products

{selectedLook.products.map((product) => (

{product.name}

${product.price}

))}

)} ) } [V0_FILE]jpg:file="public/lookbook-outfit-1-linen-neutrals.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lookbook-outfit-1-linen-neutrals-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" isMerged="true" [V0_FILE]jpg:file="public/lookbook-outfit-2-layered-minimal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lookbook-outfit-2-layered-minimal-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" isMerged="true" [V0_FILE]jpg:file="public/lookbook-outfit-3-dress-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lookbook-outfit-3-dress-elegant-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" isMerged="true" [V0_FILE]jpg:file="public/lookbook-outfit-4-casual-chic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lookbook-outfit-4-casual-chic-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" isMerged="true" [V0_FILE]jpg:file="public/lookbook-outfit-5-monochrome.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lookbook-outfit-5-monochrome-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" isMerged="true" [V0_FILE]jpg:file="public/lookbook-outfit-6-textured-layers.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lookbook-outfit-6-textured-layers-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { Leaf, Heart, Users, Package } from "lucide-react" export default function AboutPage() { return (

{/* Hero Section */}

Our Philosophy

Creating timeless clothing that honors both people and planet

{/* Story Section */}

Our Story

Serene Atelier was born from a simple belief: that clothing should be as kind to the earth as it is beautiful to wear. Founded in 2018, we set out to create a different kind of fashion brand—one that values quality over quantity, craftsmanship over trends, and sustainability over speed.

Every piece in our collection is thoughtfully designed to transcend seasons and trends. We work exclusively with natural, organic, and recycled materials, partnering with artisans and workshops that share our commitment to ethical production and fair labor practices.

Our atelier is more than a brand—it's a movement toward conscious consumption and mindful living. We believe that true luxury lies in pieces that are made to last, that tell a story, and that respect the hands that crafted them.

{/* Values Grid */}

Our Commitments

The principles that guide everything we create

{/* Sustainable Materials */}

Sustainable Materials

We use only organic, recycled, or responsibly sourced materials. From European linen to peace silk, every fabric is chosen for its minimal environmental impact.

• 100% organic cotton and linen
• Recycled cashmere and wool
• Peace silk (cruelty-free)
• Natural, non-toxic dyes

{/* Ethical Production */}

Ethical Production

Every piece is made in small, family-owned workshops in Portugal and Italy where artisans receive fair wages and work in safe, dignified conditions.

• Fair wages and benefits
• Safe working conditions
• Small-batch production
• Long-term partnerships

{/* Timeless Design */}

Timeless Design

We design pieces that transcend trends and seasons. Each garment is created to be worn, loved, and cherished for years to come.

• Classic, versatile silhouettes
• High-quality construction
• Designed to last
• Seasonless collections

{/* Circular Practices */}

Circular Practices

From packaging to end-of-life, we consider the full lifecycle of every product. We're committed to reducing waste and closing the loop.

• Plastic-free packaging
• Carbon-neutral shipping
• Repair and care guides
• Take-back program

{/* Impact Section */}

Our Impact

Transparency is at the heart of what we do. Here's how we're making a difference.

1,200+

Artisans supported

100%

Carbon-neutral shipping

85%

Waste reduction since 2020

{/* Certifications */}

Certifications

GOTS Certified

Fair Trade

B Corp Pending

Climate Neutral

) } [V0_FILE]jpg:file="public/about-hero-sustainable-fashion-atelier.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/about-hero-sustainable-fashion-atelier-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/cart/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { CartContent } from "@/components/cart-content" export default function CartPage() { return (

Shopping Cart

) } [V0_FILE]typescriptreact:file="components/cart-content.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Minus, Plus, X } from "lucide-react" import Link from "next/link" interface CartItem { id: number name: string price: number image: string color: string size: string quantity: number } const initialCartItems: CartItem[] = [ { id: 1, name: "Linen Relaxed Shirt", price: 128, image: "/linen-shirt-natural-beige.jpg", color: "Natural", size: "M", quantity: 1, }, { id: 3, name: "Silk Slip Dress", price: 245, image: "/silk-slip-dress-minimal.jpg", color: "Champagne", size: "S", quantity: 1, }, ] export function CartContent() { const [cartItems, setCartItems] = useState(initialCartItems) const updateQuantity = (id: number, newQuantity: number) => { if (newQuantity < 1) return setCartItems(cartItems.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item))) } const removeItem = (id: number) => { setCartItems(cartItems.filter((item) => item.id !== id)) } const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0) const shipping = subtotal > 200 ? 0 : 15 const total = subtotal + shipping if (cartItems.length === 0) { return (

Your cart is empty

) } return (

{/* Cart Items */}

{cartItems.map((item) => (

{item.name}

{item.color} / {item.size}

${item.price}

{item.quantity}

))}

{/* Order Summary */}

Order Summary

Subtotal ${subtotal}

Shipping {shipping === 0 ? "Free" : `$${shipping}`}

{subtotal < 200 &&

Free shipping on orders over $200

}

Total ${total}

) } [V0_FILE]typescriptreact:file="app/wishlist/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { WishlistContent } from "@/components/wishlist-content" export default function WishlistPage() { return (

Wishlist

) } [V0_FILE]typescriptreact:file="components/wishlist-content.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { X, ShoppingBag } from "lucide-react" import Link from "next/link" interface WishlistItem { id: number name: string price: number image: string fabric: string colors: string[] } const initialWishlistItems: WishlistItem[] = [ { id: 4, name: "Cashmere Sweater", price: 298, image: "/cashmere-sweater-neutral.jpg", fabric: "Recycled Cashmere", colors: ["Oat", "Camel", "Charcoal"], }, { id: 8, name: "Wool Coat", price: 485, image: "/wool-coat-elegant-neutral.jpg", fabric: "Merino Wool", colors: ["Camel", "Charcoal", "Ivory"], }, { id: 6, name: "Cotton Midi Skirt", price: 145, image: "/cotton-midi-skirt-flowing.jpg", fabric: "Organic Cotton", colors: ["Cream", "Rust", "Forest"], }, ] export function WishlistContent() { const [wishlistItems, setWishlistItems] = useState(initialWishlistItems) const removeItem = (id: number) => { setWishlistItems(wishlistItems.filter((item) => item.id !== id)) } if (wishlistItems.length === 0) { return (

Your wishlist is empty

) } return (

{wishlistItems.map((item) => (

{item.name}

${item.price}

{item.fabric}

))}

) } [V0_FILE]typescriptreact:file="app/collections/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" const collections = [ { id: "spring-summer-2024", title: "Spring Summer 2024", description: "Light, breathable pieces for warm weather", image: "/collection-spring-summer-2024.jpg", itemCount: 24, }, { id: "essentials", title: "Essentials", description: "Timeless basics for every wardrobe", image: "/collection-essentials.jpg", itemCount: 18, }, { id: "autumn-winter-2023", title: "Autumn Winter 2023", description: "Cozy layers for cooler days", image: "/collection-autumn-winter-2023.jpg", itemCount: 32, }, ] export default function CollectionsPage() { return (

Collections

Curated selections of our most beloved pieces

{collections.map((collection) => (

{collection.title}

{collection.description}

{collection.itemCount} pieces

))}

) } [V0_FILE]jpg:file="public/collection-spring-summer-2024.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/collection-spring-summer-2024-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" [V0_FILE]jpg:file="public/collection-essentials.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/collection-essentials-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg" [V0_FILE]jpg:file="public/collection-autumn-winter-2023.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/collection-autumn-winter-2023-Ql0Ov0Hy0Hy0Hy0Hy0Hy0Hy0Hy0Hy0H.jpg"

Spring Summer 2024

Curated for You

Essentials

Outerwear

Dresses

Crafted with Intention

Shop All

{product.name}

{productData.name}

Complete the Look

Spring Summer 2024

{item.title}

{selectedLook.title}

Featured Products

Our Philosophy

Our Story

Our Commitments

Sustainable Materials

Ethical Production

Timeless Design

Circular Practices

Our Impact

Certifications

Shopping Cart

{item.name}

Order Summary

Wishlist

{item.name}

Collections

{collection.title}

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This