[V0_FILE]typescriptreact:file="components/site-header.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Search, Bell, ShoppingBag, Instagram, Twitter, Facebook } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { MainNav } from "@/components/main-nav" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export function SiteHeader() { return (

URBAN WEAR

Instagram Twitter Facebook

) } [V0_FILE]typescriptreact:file="components/main-nav.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { cn } from "@/lib/utils" const items = [ { title: "Home", href: "/", }, { title: "New Arrivals", href: "/new", }, { title: "Collections", href: "/collections", }, { title: "Men", href: "/men", }, { title: "Women", href: "/women", }, ] export function MainNav({ className }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { 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: { "text-shimmer": { from: { backgroundPosition: "0 0" }, to: { backgroundPosition: "-200% 0" }, }, }, animation: { "text-shimmer": "text-shimmer 2.5s ease-out infinite", }, }, }, } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import Image from "next/image" import { ArrowRight, ShoppingBag, Mail } from "lucide-react" import { Button } from "@/components/ui/button" import { SiteHeader } from "@/components/site-header" export default function Page() { return (

{/* Hero Section */}

{/* Background Image */}

{/* Content */}

Urban Style beyond the ordinary

Discover premium streetwear that transforms your everyday style into extraordinary statements.

{/* Featured Categories */}

{/* Background Image */}

Explore Our Collections

{categories.map((category) => (

{category.name}

{category.tags.map((tag) => ( {tag} ))}

{category.description}

))}

{/* Featured Products */}

{/* Background Image */}

New Arrivals

{products.map((product) => (

{product.name}

{product.price}

))}

{/* Newsletter Section */}

{/* Background Image */}

Join Our Community

Subscribe to our newsletter and get 10% off your first purchase plus exclusive access to new arrivals and special offers.

) } const categories = [ { name: "Street Style", image: "/placeholder.svg?height=400&width=300", tags: ["Urban", "Casual", "Trending"], description: "Contemporary urban fashion that makes a statement. Featuring hoodies, graphic tees, and statement pieces for the bold and fashion-forward.", }, { name: "Casual Wear", image: "/placeholder.svg?height=400&width=300", tags: ["Comfort", "Essential", "Daily"], description: "Effortlessly stylish everyday wear. Premium basics and versatile pieces that combine comfort with modern design.", }, { name: "Accessories", image: "/placeholder.svg?height=400&width=300", tags: ["Style", "Premium", "Details"], description: "Complete your look with our curated selection of accessories. From minimalist jewelry to statement bags and more.", }, ] const products = [ { name: "Urban Comfort Hoodie", price: "$89.99", image: "/placeholder.svg?height=500&width=500", }, { name: "Street Smart Jacket", price: "$129.99", image: "/placeholder.svg?height=500&width=500", }, { name: "City Dweller Pants", price: "$79.99", image: "/placeholder.svg?height=500&width=500", }, { name: "Metro Chic Sneakers", price: "$99.99", image: "/placeholder.svg?height=500&width=500", }, ]

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This