[V0_FILE]typescriptreact:file="components/newsletter.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export default function Newsletter() { const [email, setEmail] = useState("") const [submitted, setSubmitted] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (email) { setSubmitted(true) } } return (

Join Our Exclusive Circle

Subscribe to receive updates on new collections, exclusive events, and personalized recommendations.

{submitted ? (

Thank you for subscribing

You'll be the first to know about our latest collections and exclusive offers.

) : ( )}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" 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: { serif: ["Playfair Display", "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) - 2px)", sm: "calc(var(--radius) - 4px)", }, 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]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } } [V0_FILE]typescriptreact:file="components/featured-products.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import Link from "next/link" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" const products = [ { id: 1, name: "Diamond Eternity Ring", price: "$4,850", image: "https://images.unsplash.com/photo-1605100804763-247f67b3557e?q=80&w=2070&auto=format&fit=crop", category: "Jewelry", }, { id: 2, name: "Sapphire Pendant Necklace", price: "$3,200", image: "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?q=80&w=1974&auto=format&fit=crop", category: "Jewelry", }, { id: 3, name: "Chronograph Watch", price: "$8,750", image: "https://images.unsplash.com/photo-1587836374828-4dbafa94cf0e?q=80&w=2070&auto=format&fit=crop", category: "Watches", }, { id: 4, name: "Pearl Drop Earrings", price: "$2,400", image: "https://images.unsplash.com/photo-1633810542706-90e5ff7557be?q=80&w=1974&auto=format&fit=crop", category: "Jewelry", }, { id: 5, name: "Leather Card Holder", price: "$450", image: "https://images.unsplash.com/photo-1606503825008-909a67e63c3d?q=80&w=1974&auto=format&fit=crop", category: "Accessories", }, { id: 6, name: "Gold Bangle Bracelet", price: "$3,600", image: "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?q=80&w=1974&auto=format&fit=crop", category: "Jewelry", }, ] export default function FeaturedProducts() { const [currentIndex, setCurrentIndex] = useState(0) const productsPerPage = 3 const totalPages = Math.ceil(products.length / productsPerPage) const nextSlide = () => { setCurrentIndex((prevIndex) => (prevIndex + productsPerPage >= products.length ? 0 : prevIndex + productsPerPage)) } const prevSlide = () => { setCurrentIndex((prevIndex) => prevIndex - productsPerPage < 0 ? products.length - productsPerPage : prevIndex - productsPerPage, ) } const visibleProducts = products.slice(currentIndex, currentIndex + productsPerPage) return (

{visibleProducts.map((product) => (

{product.category}

{product.name}

{product.price}

))}

) } [V0_FILE]typescriptreact:file="components/category-showcase.tsx" isEdit="true" isQuickEdit="true" import Link from "next/link" const categories = [ { id: 1, name: "Jewelry", image: "https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?q=80&w=1974&auto=format&fit=crop", description: "Timeless pieces crafted with precision", }, { id: 2, name: "Watches", image: "https://images.unsplash.com/photo-1614164185128-e4ec99c436d7?q=80&w=1974&auto=format&fit=crop", description: "Masterpieces of horological excellence", }, { id: 3, name: "Accessories", image: "https://images.unsplash.com/photo-1601924921557-45e6dea0a157?q=80&w=1974&auto=format&fit=crop", description: "Refined details for the discerning individual", }, ] export default function CategoryShowcase() { return (

{categories.map((category) => (

{category.name}

{category.description}

))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import "./globals.css" export const metadata: Metadata = { title: "LUXE | Timeless Luxury", description: "Discover our curated collection of luxury pieces crafted with exceptional artistry", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/brand-story.tsx" import { Button } from "@/components/ui/button" export default function BrandStory() { return (

Craftsmanship & Heritage

For over a century, we have been dedicated to the pursuit of excellence, crafting timeless pieces that transcend generations. Each creation embodies our commitment to exceptional craftsmanship and uncompromising quality.

Our artisans combine traditional techniques with innovative approaches, ensuring that every piece tells a unique story of artistry and passion. We source only the finest materials from around the world, adhering to the highest ethical standards.

) } [V0_FILE]typescriptreact:file="components/testimonial.tsx" import { Quote } from "lucide-react" export default function Testimonial() { return (

"The craftsmanship and attention to detail in every piece is extraordinary. My LUXE watch has become a cherished heirloom that I will pass down to future generations."

Sophia Laurent

Loyal Customer Since 2015

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import Link from "next/link" import { ChevronRight, ShoppingBag } from "lucide-react" import { Button } from "@/components/ui/button" import FeaturedProducts from "@/components/featured-products" import Newsletter from "@/components/newsletter" import CategoryShowcase from "@/components/category-showcase" import BrandStory from "@/components/brand-story" import Testimonial from "@/components/testimonial" export default function Home() { return (

LUXE

Account

Timeless Elegance

Discover our curated collection of luxury pieces crafted with exceptional artistry

Featured Collections

Discover our most coveted pieces

View All Collections

Explore Categories

Browse our exclusive selection of luxury items

) }

About

Tags

Share

More from donvito

More Templates Like This

About

Tags

Share

About

Tags

Share

More from donvito

More Templates Like This