[V0_FILE]typescriptreact:file="components/Header.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { ShoppingBag, Menu } from "lucide-react" import { Button } from "@/components/ui/button" export default function Header() { return (

{/* Logo */} Flowers & Saints {/* Navigation */} {/* Actions */}

) } [V0_FILE]typescriptreact:file="app/product/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" import { Star, Heart, ArrowRight, Truck, RefreshCw, Minus, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel" import Header from "@/components/Header" export default function ProductPage() { return (

{/* Product Images */}

{[1, 2, 3, 4].map((i) => (

))}

{[1, 2, 3, 4].map((i) => (

))}

{/* Product Details */}

Essential Cotton T-Shirt

Comfort meets style

{[1, 2, 3, 4, 5].map((star) => ( ))}

(125 reviews)

$49.99

Our Essential Cotton T-Shirt is the perfect blend of comfort and style. Made from 100% organic cotton, it's soft, breathable, and designed to last. An everyday staple that elevates your casual wardrobe.

{/* Color Selection */}

Color

{["white", "black", "gray", "blue"].map((color) => ( ))}

{/* Size Selection */}

Size

{/* Quantity */}

Quantity

{/* Add to Cart and Wishlist */}

{/* Shipping and Returns */}

Free Shipping

Free Returns

{/* Additional Information */} Product Details

100% organic cotton
Regular fit
Crew neck
Short sleeves
Pre-shrunk fabric

Care Instructions

Machine wash cold
Tumble dry low
Do not bleach
Iron on low heat if needed

Shipping & Returns

Free standard shipping on orders over $75. Express shipping available at checkout. Returns accepted within 30 days of delivery.

{/* Product Recommendations */}

Explore the Collection

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.75rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Hide scrollbar for Chrome, Safari and Opera */ ::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ * { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } html, body { height: 100%; } #__next { display: flex; flex-direction: column; min-height: 100%; } [V0_FILE]typescript:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { blue: "#4A4FE4", gray: { 100: "#F5F5F5", 200: "#EAEAEA", 300: "#DDDDDD", 500: "#888888", 600: "#666666", 900: "#111111", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import Image from "next/image" import { ChevronLeft, ChevronRight, Heart, Star, Minus, Plus, Facebook, Twitter, Instagram } from "lucide-react" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import Header from "@/components/Header" const sizes = ["500ml", "750ml", "1L"] const colors = [ { name: "Matte Black", value: "black" }, { name: "Pearl White", value: "white" }, { name: "Brushed Silver", value: "silver" }, { name: "Rose Gold", value: "gold" }, ] const productVariants = Array.from({ length: 11 }, (_, i) => ({ id: i + 1, color: colors[i % colors.length].name, image: `/placeholder.svg?height=600&width=600&text=Bottle${i + 1}`, })) const relatedProducts = [ { id: 1, name: "Sport Water Bottle", price: 39.99, image: "/placeholder.svg?height=300&width=300&text=Sport+Bottle" }, { id: 2, name: "Insulated Tumbler", price: 44.99, image: "/placeholder.svg?height=300&width=300&text=Tumbler" }, { id: 3, name: "Collapsible Water Bottle", price: 34.99, image: "/placeholder.svg?height=300&width=300&text=Collapsible", }, { id: 4, name: "Glass Water Bottle", price: 29.99, image: "/placeholder.svg?height=300&width=300&text=Glass+Bottle" }, ] export default function ProductPage() { const [selectedSize, setSelectedSize] = useState("750ml") const [selectedColor, setSelectedColor] = useState(colors[0].value) const [selectedVariant, setSelectedVariant] = useState(1) const [currentIndex, setCurrentIndex] = useState(0) const [isFavorite, setIsFavorite] = useState(false) const [quantity, setQuantity] = useState(1) const nextImage = () => { setCurrentIndex((prev) => (prev + 1) % productVariants.length) } const previousImage = () => { setCurrentIndex((prev) => (prev - 1 + productVariants.length) % productVariants.length) } const toggleFavorite = () => { setIsFavorite(!isFavorite) } const incrementQuantity = () => { setQuantity((prev) => prev + 1) } const decrementQuantity = () => { setQuantity((prev) => (prev > 1 ? prev - 1 : 1)) } return (

{/* Product Image */}

{productVariants.slice(0, 5).map((variant) => ( ))}

{/* Product Info */}

Premium Drink Bottle

{[1, 2, 3, 4, 5].map((star) => ( ))}

(4.5 / 120 reviews)

$ 49.99

Elevate your hydration game with our Premium Drink Bottle. Crafted for the discerning individual who demands both style and functionality. This bottle keeps your beverages at the perfect temperature, whether you're hitting the gym or the streets. A must-have accessory for the fashion-forward and environmentally conscious.

Size

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

Color

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

{quantity}

{/* Product Details Tabs */}

Product Details Specifications Reviews

Our Premium Drink Bottle is designed with both style and functionality in mind. The double-wall vacuum insulation keeps your drinks cold for up to 24 hours or hot for up to 12 hours. The sleek, modern design fits comfortably in your hand and looks great on your desk or in your gym bag.

Made from high-quality, BPA-free stainless steel
Leak-proof lid with convenient carry loop
Wide mouth for easy filling and cleaning
Fits most car cup holders
Condensation-free exterior

Capacity	500ml, 750ml, 1L
Material	18/8 Stainless Steel
Insulation	Double-wall vacuum
Lid Type	Screw-top with carry loop
Cold Retention	Up to 24 hours
Hot Retention	Up to 12 hours

John Doe

{[1, 2, 3, 4, 5].map((star) => ( ))}

Great bottle! Keeps my drinks cold all day.

Jane Smith

{[1, 2, 3, 4].map((star) => ( ))} {[5].map((star) => ( ))}

Stylish design, but a bit heavy when full.

{/* Related Products */}

Essential Cotton T-Shirt

Color

Size

Quantity

You May Also Like

Essential Product {product}

Explore the Collection

Premium Drink Bottle

Size

Color

John Doe

Jane Smith

You May Also Like

{product.name}