[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Artistry Gallery", description: "A modern art gallery showcasing contemporary masterpieces", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" 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%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/gallery/page.tsx" isMerged="true" import { ArtworkGrid } from "@/components/artwork-grid" export default function GalleryPage() { return (

Gallery Collection

Browse our complete collection of contemporary artwork

) } [V0_FILE]typescriptreact:file="app/artwork/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useParams } from "next/navigation" import Image from "next/image" import Link from "next/link" import { ArrowLeft } from "lucide-react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { artworks } from "@/data/artworks" export default function ArtworkPage() { const params = useParams() const id = typeof params.id === "string" ? params.id : params.id[0] const artwork = artworks.find((art) => art.id === id) || artworks[0] return (

window.open(artwork.image, "_blank")} >

{artwork.title}

{artwork.artist}

{artwork.year}

{artwork.medium}

{artwork.dimensions}

{artwork.description}

Price

{artwork.price}

) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Menu } from "lucide-react" import { motion } from "framer-motion" import { useState } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { ThemeToggle } from "@/components/theme-toggle" const navigation = [ { name: "Home", href: "/" }, { name: "Gallery", href: "/gallery" }, { name: "Exhibitions", href: "/exhibitions" }, { name: "Artists", href: "/artists" }, { name: "About", href: "/about" }, { name: "Contact", href: "/contact" }, ] export function Header() { const pathname = usePathname() const [hoveredPath, setHoveredPath] = useState(pathname) return (

ARTISTRY

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Instagram, Twitter } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/featured-artwork.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { motion } from "framer-motion" import { artworks } from "@/data/artworks" export default function FeaturedArtwork() { const [currentIndex, setCurrentIndex] = useState(0) const featuredArtworks = artworks.slice(0, 3) const currentArtwork = featuredArtworks[currentIndex] return (

{currentArtwork.title}

{currentArtwork.artist}

{currentArtwork.description}

{currentArtwork.year}

{currentArtwork.medium}

View Artwork Details

) } [V0_FILE]typescriptreact:file="components/gallery-preview.tsx" isEdit="true" isMerged="true" "use client" import { useRef } from "react" import Image from "next/image" import Link from "next/link" import { motion, useInView } from "framer-motion" import { artworks } from "@/data/artworks" export function GalleryPreview() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) const previewArtworks = artworks.slice(0, 6) const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.5 } }, } return ( {previewArtworks.map((artwork) => (

{artwork.title}

{artwork.artist}

))} ) } [V0_FILE]typescriptreact:file="components/artwork-grid.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef } from "react" import Image from "next/image" import Link from "next/link" import { motion, useInView } from "framer-motion" import { artworks } from "@/data/artworks" export function ArtworkGrid() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.1 }) const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.05, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.5 } }, } return ( {artworks.map((artwork) => (

{artwork.title}

{artwork.artist}

{artwork.price}

))} ) } [V0_FILE]typescriptreact:file="data/artworks.ts" isEdit="true" isQuickEdit="true" isMerged="true" export const artworks = [ { id: "1", title: "Ethereal Landscape", artist: "Elena Moreno", year: "2023", medium: "Oil on Canvas", dimensions: "36 × 48 in", description: "A dreamlike landscape that blends abstract elements with recognizable natural forms. Moreno's signature use of vibrant colors creates an emotional response that transcends traditional landscape painting.", price: "$4,800", image: "https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?q=80&w=800&auto=format&fit=crop", }, { id: "2", title: "Urban Fragments", artist: "Marcus Chen", year: "2022", medium: "Mixed Media", dimensions: "40 × 30 in", description: "Chen's work explores the intersection of urban architecture and human experience. This piece incorporates found objects from city environments, creating a textured commentary on modern life.", price: "$3,200", image: "https://images.unsplash.com/photo-1549887534-1541e9326642?q=80&w=800&auto=format&fit=crop", }, { id: "3", title: "Reflections in Blue", artist: "Sophia Williams", year: "2023", medium: "Acrylic on Canvas", dimensions: "48 × 36 in", description: "Williams' abstract exploration of water and light creates a meditative space for the viewer. The layered blue tones evoke both depth and tranquility.", price: "$5,500", image: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=800&auto=format&fit=crop", }, { id: "4", title: "Geometric Harmony", artist: "David Park", year: "2021", medium: "Digital Print", dimensions: "24 × 24 in", description: "Park's precise geometric compositions create a sense of order and balance while playing with perception and dimension. Limited edition of 25 prints.", price: "$950", image: "https://images.unsplash.com/photo-1605106702734-205df224ecce?q=80&w=800&auto=format&fit=crop", }, { id: "5", title: "Fragmented Memory", artist: "Amara Johnson", year: "2022", medium: "Oil and Collage", dimensions: "30 × 40 in", description: "Johnson's work explores personal and collective memory through layered imagery and abstracted forms. This piece incorporates family photographs and found ephemera.", price: "$3,800", image: "https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?q=80&w=800&auto=format&fit=crop", }, { id: "6", title: "Celestial Bodies", artist: "Hiroshi Tanaka", year: "2023", medium: "Watercolor", dimensions: "22 × 30 in", description: "Tanaka's delicate watercolor technique creates luminous representations of cosmic phenomena, blending scientific observation with artistic interpretation.", price: "$2,400", image: "https://images.unsplash.com/photo-1541512416146-3cf58d6b27cc?q=80&w=800&auto=format&fit=crop", }, { id: "7", title: "Structural Tension", artist: "Alexandra Reed", year: "2022", medium: "Steel and Glass", dimensions: "24 × 18 × 12 in", description: "Reed's sculptural work explores the relationship between industrial materials and organic forms, creating a dynamic tension between strength and fragility.", price: "$6,200", image: "https://images.unsplash.com/photo-1554188248-986adbb73be4?q=80&w=800&auto=format&fit=crop", }, { id: "8", title: "Chromatic Rhythm", artist: "Julian Vega", year: "2023", medium: "Acrylic on Panel", dimensions: "36 × 36 in", description: "Vega's exploration of color relationships creates visual rhythms that seem to pulse with energy. His precise technique highlights the interaction between adjacent hues.", price: "$3,900", image: "https://images.unsplash.com/photo-1536924940846-227afb31e2a5?q=80&w=800&auto=format&fit=crop", }, { id: "9", title: "Ephemeral Moment", artist: "Nadia Ibrahim", year: "2021", medium: "Photography", dimensions: "30 × 40 in", description: "Ibrahim's photographic work captures fleeting moments of light and shadow in urban environments. This limited edition print is one of only 15.", price: "$1,800", image: "https://images.unsplash.com/photo-1581343109297-b0723170dc33?q=80&w=800&auto=format&fit=crop", }, { id: "10", title: "Textural Study #7", artist: "Thomas Wright", year: "2022", medium: "Mixed Media on Paper", dimensions: "22 × 30 in", description: "Wright's ongoing series explores the tactile qualities of various materials applied to paper. This piece incorporates sand, fabric, and metallic elements.", price: "$2,100", image: "https://images.unsplash.com/photo-1547891654-e66ed7ebb968?q=80&w=800&auto=format&fit=crop", }, { id: "11", title: "Botanical Abstraction", artist: "Mei Lin", year: "2023", medium: "Ink on Rice Paper", dimensions: "40 × 28 in", description: "Lin's work bridges traditional East Asian ink techniques with contemporary abstract approaches, creating delicate yet powerful botanical forms.", price: "$3,400", image: "https://images.unsplash.com/photo-1574182245530-967d9b3831af?q=80&w=800&auto=format&fit=crop", }, { id: "12", title: "Quantum Field", artist: "Gabriel Santos", year: "2022", medium: "Oil on Canvas", dimensions: "48 × 60 in", description: "Santos' large-scale painting explores concepts from quantum physics through abstract visual language, suggesting energy fields and particle interactions.", price: "$7,500", image: "https://images.unsplash.com/photo-1515405295579-ba7b45403062?q=80&w=800&auto=format&fit=crop", }, ] [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: { 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]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Sheet = SheetPrimitive.Root const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva( "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", { variants: { side: { top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", }, }, defaultVariants: { side: "right", }, }, ) interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const SheetContent = React.forwardRef, SheetContentProps>( ({ side = "right", className, children, ...props }, ref) => ( {children} Close ), ) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

) SheetHeader.displayName = "SheetHeader" const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (

) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } [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="components/ui/separator.tsx" isMerged="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( )) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from "react" import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" const Breadcrumb = React.forwardRef>(({ className, ...props }, ref) => (

Gallery Collection

{artwork.title}

Price

{currentArtwork.title}

{artwork.title}

{artwork.title}

Welcome to Artistry Gallery

Where Art Meets Innovation

Featured Artwork

Upcoming Exhibitions

Gallery Preview

What Collectors Say

Stay Connected with Artistry

{exhibitions[currentIndex].title}

About

Tags

Share

More from donvito

More Templates Like This

About

Tags

Share

About

Tags

Share

More from donvito

More Templates Like This