[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["var(--font-inter)", "system-ui", "sans-serif"], }, colors: { 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) - 0.25rem)", sm: "calc(var(--radius) - 0.5rem)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Moon, Sun } from "lucide-react" import { Button } from "@/components/ui/button" export function ThemeToggle() { const [isDarkMode, setIsDarkMode] = useState(false) useEffect(() => { // Check if user has a theme preference in localStorage const savedTheme = localStorage.getItem("theme") const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches if (savedTheme === "dark" || (!savedTheme && prefersDark)) { setIsDarkMode(true) document.documentElement.classList.add("dark") } }, []) const toggleTheme = () => { if (isDarkMode) { document.documentElement.classList.remove("dark") localStorage.setItem("theme", "light") } else { document.documentElement.classList.add("dark") localStorage.setItem("theme", "dark") } setIsDarkMode(!isDarkMode) } return ( ) } [V0_FILE]typescriptreact:file="components/tilt-card.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import Image from "next/image" interface TiltCardProps { imageUrl: string alt: string gradientColors?: { from: string via?: string to: string } } export default function TiltCard({ imageUrl, alt, gradientColors = { from: "blue-300/20", via: "purple-300/10", to: "pink-300/20" }, }: TiltCardProps) { const [isHovering, setIsHovering] = useState(false) const [position, setPosition] = useState({ x: 0, y: 0 }) const cardRef = useRef(null) const handleMouseMove = (e: React.MouseEvent) => { if (!cardRef.current) return const rect = cardRef.current.getBoundingClientRect() // Calculate mouse position relative to the card (0-1) const x = (e.clientX - rect.left) / rect.width const y = (e.clientY - rect.top) / rect.height // Update position state setPosition({ x, y }) } const handleMouseEnter = () => { setIsHovering(true) } const handleMouseLeave = () => { setIsHovering(false) // Reset position with a slight delay for smooth transition setTimeout(() => setPosition({ x: 0.5, y: 0.5 }), 100) } // Calculate the tilt and shadow based on mouse position const tiltX = isHovering ? (position.y - 0.5) * 20 : 0 // Tilt up to 20 degrees const tiltY = isHovering ? (position.x - 0.5) * -20 : 0 // Negative for correct direction const shadowX = isHovering ? (position.x - 0.5) * 20 : 0 const shadowY = isHovering ? (position.y - 0.5) * 20 : 0 const glareX = position.x * 100 const glareY = position.y * 100 // Construct gradient string const gradientString = gradientColors.via ? `from-${gradientColors.from} via-${gradientColors.via} to-${gradientColors.to}` : `from-${gradientColors.from} to-${gradientColors.to}` return (

{/* Gradient overlay that moves with tilt */}

{/* Glare effect */}

{/* Image */} {alt}

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="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: 1rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .perspective-1000 { perspective: 1000px; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ChevronRight } from "lucide-react" import TiltCard from "@/components/tilt-card" import { ProductCard } from "@/components/product-card" export default function ParfumsLanding() { return ( <> {/* Hero Section */}

New Collection

Discover your
signature scent

Exquisite fragrances crafted with the finest ingredients, designed to evoke emotion and memory.

{/* Featured Products */}

Featured Fragrances

View All

{/* Collection Highlight */}

The Essence Collection

A harmonious blend of rare florals and precious woods, creating a scent that's both timeless and contemporary.

{[ { name: "Essence I", desc: "Floral & Fresh" }, { name: "Essence II", desc: "Woody & Warm" }, { name: "Essence III", desc: "Citrus & Spice" }, ].map((item, index) => (

{index + 1}

{item.name}

{item.desc}

))}

{/* Newsletter */}

Join Our Community

Subscribe to receive updates on new collections and exclusive offers.

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/product-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { Heart } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" interface ProductCardProps { id: string name: string type: string price: string image: string available?: boolean isNew?: boolean } export function ProductCard({ id, name, type, price, image, available = true, isNew = false }: ProductCardProps) { const [isHovered, setIsHovered] = useState(false) return (

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

{/* Availability badge */} {!available && (

Coming Soon

)} {/* New badge */} {isNew && ( New )}

{name}

{type}

{price}

) } [V0_FILE]typescriptreact:file="app/product/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useParams } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { ChevronLeft, ShoppingBag } from "lucide-react" import TiltCard from "@/components/tilt-card" import { Badge } from "@/components/ui/badge" // Sample product data const products = [ { id: "serene", name: "Serene", type: "Eau de Parfum", price: "$120", image: "https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=450&h=600&auto=format&fit=crop", description: "A delicate blend of jasmine, lily of the valley, and soft musk that evokes a sense of calm and tranquility.", notes: ["Jasmine", "Lily of the Valley", "Musk", "Bergamot"], gender: "women", isNew: true, available: true, gradientColors: { from: "blue-300/20", via: "purple-300/10", to: "pink-300/20" }, }, { id: "lumiere", name: "Lumière", type: "Eau de Toilette", price: "$95", image: "https://images.unsplash.com/photo-1547887538-e3a2f32cb1cc?q=80&w=450&h=600&auto=format&fit=crop", description: "A bright, sparkling fragrance with notes of citrus, white flowers, and amber that captures the essence of sunlight.", notes: ["Bergamot", "Orange Blossom", "Amber", "Vanilla"], gender: "women", isNew: false, available: true, gradientColors: { from: "yellow-300/20", via: "orange-300/10", to: "amber-300/20" }, }, { id: "etoile", name: "Étoile", type: "Parfum", price: "$150", image: "https://images.unsplash.com/photo-1563170351-be82bc888aa4?q=80&w=450&h=600&auto=format&fit=crop", description: "An elegant, sophisticated fragrance with rich florals, warm spices, and deep woods that evokes the mystery of a starlit night.", notes: ["Rose", "Saffron", "Oud", "Patchouli"], gender: "women", isNew: false, available: false, gradientColors: { from: "purple-300/20", via: "indigo-300/10", to: "blue-300/20" }, }, { id: "noir", name: "Noir", type: "Eau de Parfum", price: "$135", image: "https://images.unsplash.com/photo-1594035910387-fea47794261f?q=80&w=450&h=600&auto=format&fit=crop", description: "A bold, intense fragrance with notes of leather, spices, and dark woods that embodies sophistication and mystery.", notes: ["Leather", "Black Pepper", "Cedarwood", "Vetiver"], gender: "men", isNew: true, available: true, gradientColors: { from: "gray-300/20", via: "slate-300/10", to: "zinc-300/20" }, }, { id: "azure", name: "Azure", type: "Eau de Toilette", price: "$110", image: "https://images.unsplash.com/photo-1523293182086-7651a899d37f?q=80&w=450&h=600&auto=format&fit=crop", description: "A fresh, aquatic fragrance with notes of sea salt, citrus, and aromatic herbs that captures the essence of the ocean.", notes: ["Sea Salt", "Bergamot", "Rosemary", "Amberwood"], gender: "men", isNew: false, available: true, gradientColors: { from: "cyan-300/20", via: "blue-300/10", to: "teal-300/20" }, }, { id: "ember", name: "Ember", type: "Cologne", price: "$90", image: "https://images.unsplash.com/photo-1605651531144-51381895e23d?q=80&w=450&h=600&auto=format&fit=crop", description: "A warm, spicy fragrance with notes of cinnamon, amber, and tonka bean that evokes the comfort of a crackling fire.", notes: ["Cinnamon", "Amber", "Tonka Bean", "Sandalwood"], gender: "men", isNew: false, available: false, gradientColors: { from: "red-300/20", via: "amber-300/10", to: "orange-300/20" }, }, ] export default function ProductPage() { const { id } = useParams() const [product, setProduct] = useState(null) useEffect(() => { // Find the product with the matching ID const foundProduct = products.find((p) => p.id === id) setProduct(foundProduct) }, [id]) if (!product) { return (

Product not found

) } return (

Back to Collections

{product.type} {product.isNew && New}

{product.name}

{product.price}

Description

{product.description}

Notes

{product.notes.map((note: string, index: number) => ( {note} ))}

{product.available ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="app/collections/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { ProductCard } from "@/components/product-card" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" // Sample product data const products = [ { id: "serene", name: "Serene", type: "Eau de Parfum", price: "$120", image: "https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=450&h=600&auto=format&fit=crop", gender: "women", isNew: true, available: true, }, { id: "lumiere", name: "Lumière", type: "Eau de Toilette", price: "$95", image: "https://images.unsplash.com/photo-1547887538-e3a2f32cb1cc?q=80&w=450&h=600&auto=format&fit=crop", gender: "women", isNew: false, available: true, }, { id: "etoile", name: "Étoile", type: "Parfum", price: "$150", image: "https://images.unsplash.com/photo-1563170351-be82bc888aa4?q=80&w=450&h=600&auto=format&fit=crop", gender: "women", isNew: false, available: false, }, { id: "noir", name: "Noir", type: "Eau de Parfum", price: "$135", image: "https://images.unsplash.com/photo-1594035910387-fea47794261f?q=80&w=450&h=600&auto=format&fit=crop", gender: "men", isNew: true, available: true, }, { id: "azure", name: "Azure", type: "Eau de Toilette", price: "$110", image: "https://images.unsplash.com/photo-1523293182086-7651a899d37f?q=80&w=450&h=600&auto=format&fit=crop", gender: "men", isNew: false, available: true, }, { id: "ember", name: "Ember", type: "Cologne", price: "$90", image: "https://images.unsplash.com/photo-1605651531144-51381895e23d?q=80&w=450&h=600&auto=format&fit=crop", gender: "men", isNew: false, available: false, }, ] export default function CollectionsPage() { const [activeTab, setActiveTab] = useState("all") const [showUnavailable, setShowUnavailable] = useState(true) // Filter products based on active tab and availability const filteredProducts = products.filter((product) => { if (!showUnavailable && !product.available) return false if (activeTab === "all") return true return product.gender === activeTab }) return (

Our Collections

Discover our range of exquisite fragrances crafted for every occasion and personality.

All Women Men

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

{filteredProducts.length === 0 && (

No products match your current filters.

)}

) } [V0_FILE]typescriptreact:file="components/site-header.tsx" import Link from "next/link" import { Search, ShoppingBag } from "lucide-react" import { Button } from "@/components/ui/button" import { ThemeToggle } from "@/components/theme-toggle" export function SiteHeader() { return (

Esencia Imperial

) } [V0_FILE]typescriptreact:file="components/site-footer.tsx" import Link from "next/link" export function SiteFooter() { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import { Inter } from "next/font/google" import { SiteHeader } from "@/components/site-header" import { SiteFooter } from "@/components/site-footer" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }) export const metadata = { title: "Esencia Imperial | Luxury Fragrances", description: "Discover exquisite fragrances crafted with the finest ingredients", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" import Image from "next/image" import { Button } from "@/components/ui/button" export default function AboutPage() { return (

Our Story

Crafting exceptional fragrances that capture moments, memories, and emotions.

Artistry in Every Bottle

Founded in 2010, Esencia Imperial has been dedicated to the art of perfumery, creating scents that tell stories and evoke emotions.

Our Philosophy

At Esencia Imperial, we believe that fragrance is more than just a scent—it's an expression of individuality, a memory captured in a bottle, a signature that becomes part of your identity.

Our master perfumers travel the world to source the finest ingredients, from delicate florals to rich woods and exotic spices. Each fragrance is carefully crafted to create a harmonious blend that evolves beautifully on the skin.

Sustainability Commitment

We are committed to sustainable practices throughout our production process. From responsibly sourced ingredients to eco-friendly packaging, we strive to minimize our environmental footprint while creating luxury fragrances.

Our bottles are designed to be both beautiful and recyclable, and we work closely with suppliers who share our values of ethical sourcing and fair labor practices.

) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.9", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.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": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } }

Discover your signature scent