[V0_FILE]typescriptreact:file="components/gallery-section.tsx" isMerged="true" import { Card } from "@/components/ui/card" const galleryImages = [ { url: "/modern-fade-haircut-mens-hairstyle.jpg", title: "Modern Fade" }, { url: "/classic-pompadour-hairstyle-styled.jpg", title: "Classic Pompadour" }, { url: "/textured-quiff-mens-haircut.jpg", title: "Textured Quiff" }, { url: "/styled-beard-grooming-professional.jpg", title: "Beard Grooming" }, { url: "/undercut-hairstyle-mens-modern.jpg", title: "Modern Undercut" }, { url: "/slicked-back-hair-gentleman-style.jpg", title: "Slicked Back" }, { url: "/crew-cut-military-style-haircut.jpg", title: "Crew Cut" }, { url: "/messy-fringe-hairstyle-modern.jpg", title: "Messy Fringe" }, ] export function GallerySection() { return (

Style Gallery

Browse our portfolio of stunning transformations and find inspiration for your next look

{galleryImages.map((image, idx) => (

{image.title}

))}

Want to see more? Follow us on social media

) } [V0_FILE]jpg:file="public/luxury-barbershop-interior-with-elegant-styling-ch.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-barbershop-interior-with-elegant-styling-ch-MwORjSEob0ItzModTMMAqyocyJbd5c.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-mens-haircut-styling-professional.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-mens-haircut-styling-professional-2rMHtG8Fo4uoqCO1PAsjWgPTxNcDJt.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-beard-trimming-grooming-barbershop.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-beard-trimming-grooming-barbershop-NWujEhvp2ShwZ5g9JXfpvM8E8TX6si.jpg" isMerged="true" [V0_FILE]jpg:file="public/luxury-mens-facial-treatment-spa.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-mens-facial-treatment-spa-dFRmYf8yVntPLH2V421agWULW6LseA.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-fade-haircut-mens-hairstyle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-fade-haircut-mens-hairstyle-gA8UEZ6L32Kl7Sw0iewxYmdzirmBGv.jpg" isMerged="true" [V0_FILE]jpg:file="public/classic-pompadour-hairstyle-styled.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-pompadour-hairstyle-styled-Kyt839YGT372Xx7BYOA6T7RMRpFybX.jpg" isMerged="true" [V0_FILE]jpg:file="public/textured-quiff-mens-haircut.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/textured-quiff-mens-haircut-UyxUqVQUxQ4Jeq0y5z4siBOWe662ZW.jpg" isMerged="true" [V0_FILE]jpg:file="public/styled-beard-grooming-professional.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/styled-beard-grooming-professional-rsgv0auT6ShYtTYUjVzXvFDRzY5sZT.jpg" isMerged="true" [V0_FILE]jpg:file="public/undercut-hairstyle-mens-modern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/undercut-hairstyle-mens-modern-V6zkoh2sat1NdmjOGchfdy49zLq2mQ.jpg" isMerged="true" [V0_FILE]jpg:file="public/slicked-back-hair-gentleman-style.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/slicked-back-hair-gentleman-style-11vqaOmzmPARn83BVsERV6PJVf8udz.jpg" isMerged="true" [V0_FILE]jpg:file="public/crew-cut-military-style-haircut.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/crew-cut-military-style-haircut-wKsklnMxK0YQVv8Laa8PCgMH3WjkrC.jpg" isMerged="true" [V0_FILE]jpg:file="public/messy-fringe-hairstyle-modern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/messy-fringe-hairstyle-modern-5al16DSuGTzYMdFaxLQamXkRgIOJ5r.jpg" isMerged="true" [V0_FILE]jpg:file="public/google-maps-location-pin-kayalpatinam.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/google-maps-location-pin-kayalpatinam-11PV5xqkfZouuytuKBFiWkOl9bKv0i.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "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": "16.0.10", "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": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated to luxury salon color scheme with gold accents */ --background: oklch(0.98 0.005 90); --foreground: oklch(0.15 0.01 90); --card: oklch(0.99 0.003 90); --card-foreground: oklch(0.15 0.01 90); --popover: oklch(0.99 0.003 90); --popover-foreground: oklch(0.15 0.01 90); --primary: oklch(0.55 0.15 70); --primary-foreground: oklch(0.98 0.005 90); --secondary: oklch(0.95 0.01 90); --secondary-foreground: oklch(0.15 0.01 90); --muted: oklch(0.94 0.01 90); --muted-foreground: oklch(0.5 0.01 90); --accent: oklch(0.55 0.15 70); --accent-foreground: oklch(0.98 0.005 90); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.88 0.01 90); --input: oklch(0.88 0.01 90); --ring: oklch(0.55 0.15 70); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { /* Dark mode with luxury black and gold theme */ --background: oklch(0.12 0.01 90); --foreground: oklch(0.95 0.01 90); --card: oklch(0.15 0.01 90); --card-foreground: oklch(0.95 0.01 90); --popover: oklch(0.15 0.01 90); --popover-foreground: oklch(0.95 0.01 90); --primary: oklch(0.7 0.15 70); --primary-foreground: oklch(0.12 0.01 90); --secondary: oklch(0.2 0.01 90); --secondary-foreground: oklch(0.95 0.01 90); --muted: oklch(0.22 0.01 90); --muted-foreground: oklch(0.65 0.01 90); --accent: oklch(0.7 0.15 70); --accent-foreground: oklch(0.12 0.01 90); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.95 0.01 90); --border: oklch(0.25 0.01 90); --input: oklch(0.25 0.01 90); --ring: oklch(0.7 0.15 70); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Dinesh Hair Styles - Premium Salon in Kayalpatinam", description: "Experience premium grooming services including hair styling, beard trimming, and facial treatments at Dinesh Hair Styles in Kayalpatinam. Book your appointment today.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]jpg:file="public/short-pompadour-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/short-pompadour-hairstyle-men-Ij4BY39rumlEq3eocSd9xlPR50F8bq.jpg" isMerged="true" [V0_FILE]jpg:file="public/french-crop-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/french-crop-hairstyle-men-LQIAt9jx4YF6b4baIZQTCNspSfYupz.jpg" isMerged="true" [V0_FILE]jpg:file="public/classic-quiff-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-quiff-hairstyle-men-1AmXJxYKV8sGrvlpFQ9gJazuCPD75s.jpg" isMerged="true" [V0_FILE]jpg:file="public/textured-crop-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/textured-crop-hairstyle-men-nfxiN7GRVssTEalfbnC4oXGBdFmIvG.jpg" isMerged="true" [V0_FILE]jpg:file="public/buzz-cut-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/buzz-cut-hairstyle-men-Z3kTsETPivJ1HLKG4oOnV05fiZPnFJ.jpg" isMerged="true" [V0_FILE]jpg:file="public/slick-fade-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/slick-fade-hairstyle-men-EsKwrP9M1TGlAGnugnqhP3F0FfiSn6.jpg" isMerged="true" [V0_FILE]jpg:file="public/high-and-tight-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/high-and-tight-hairstyle-men-4XHMfr93pp5ds1gqnspeOHXncjxtZH.jpg" isMerged="true" [V0_FILE]jpg:file="public/natural-fade-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/natural-fade-hairstyle-men-9puHkbzxbBiffMNykk7VS4p3zInqQN.jpg" isMerged="true" [V0_FILE]jpg:file="public/curly-taper-fade-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/curly-taper-fade-hairstyle-men-eWYeUtLEefFidEv2XWC9GpoEpvjyGq.jpg" isMerged="true" [V0_FILE]jpg:file="public/curly-fringe-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/curly-fringe-hairstyle-men-2aP3Z063ZH7Wb2HX6nhFQ8njV7k5xN.jpg" isMerged="true" [V0_FILE]jpg:file="public/classic-comb-over-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-comb-over-hairstyle-men-mRiCdNfDNdvG35qFw5BXssfvZRUXis.jpg" isMerged="true" [V0_FILE]jpg:file="public/crew-cut-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/crew-cut-hairstyle-men-WTy5X59ygLfjH62jsA1NqUHE11DYmV.jpg" isMerged="true" [V0_FILE]jpg:file="public/ear-tucked-part-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ear-tucked-part-hairstyle-men-EpCV2uKwoUYnSSp8OgGuFYLnX9AOQR.jpg" isMerged="true" [V0_FILE]jpg:file="public/slicked-back-undercut-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/slicked-back-undercut-hairstyle-men-jz939IJFfsHbgGyQjYsC5ZJwMhVBro.jpg" isMerged="true" [V0_FILE]jpg:file="public/bro-flow-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bro-flow-hairstyle-men-ArtWcQl00OqTxde4qgzWD1A3hlIuv1.jpg" isMerged="true" [V0_FILE]jpg:file="public/faux-hawk-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/faux-hawk-hairstyle-men-VTelkOK90w8siYhoscAcmnWxvCm7PZ.jpg" isMerged="true" [V0_FILE]jpg:file="public/hard-part-haircut-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hard-part-haircut-hairstyle-men-GWpEPy4AzToubCytc4slrxT4QX1x03.jpg" isMerged="true" [V0_FILE]jpg:file="public/short-spiky-hair-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/short-spiky-hair-hairstyle-men-lb1Z5aKhOilBjcp8oFvEFImEtBwrpn.jpg" isMerged="true" [V0_FILE]jpg:file="public/caesar-cut-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/caesar-cut-hairstyle-men-IXl7CkSqat3FWXOJgGAVrJz0LMDPjz.jpg" isMerged="true" [V0_FILE]jpg:file="public/brushed-back-undercut-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/brushed-back-undercut-hairstyle-men-ICuHgGZbYpi2X0nxavi4xPATkD7R7n.jpg" isMerged="true" [V0_FILE]jpg:file="public/layered-comb-over-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/layered-comb-over-hairstyle-men-E9hU9lFEKGbRpi8bvrAEVXUPuOCl3N.jpg" isMerged="true" [V0_FILE]jpg:file="public/korean-mullet-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/korean-mullet-hairstyle-men-ZW1rjDBgUj9wOhxyOiQ3FlaI3m5NuJ.jpg" isMerged="true" [V0_FILE]jpg:file="public/center-part-mullet-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/center-part-mullet-hairstyle-men-ahm4HaOVjzjl6r3IXdGtTv9ftcCnjH.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/hairstyles-gallery.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Scissors } from "lucide-react" const hairstyles = [ { name: "Short Pompadour", image: "/short-pompadour-hairstyle-men.jpg", }, { name: "French Crop", image: "/french-crop-hairstyle-men.jpg", }, { name: "Classic Quiff", image: "/classic-quiff-hairstyle-men.jpg", }, { name: "Textured Crop", image: "/textured-crop-hairstyle-men.jpg", }, { name: "Buzz Cut", image: "/buzz-cut-hairstyle-men.jpg", }, { name: "Slick Fade", image: "/slick-fade-hairstyle-men.jpg", }, { name: "High and Tight", image: "/high-and-tight-hairstyle-men.jpg", }, { name: "Natural Fade", image: "/natural-fade-hairstyle-men.jpg", }, { name: "Curly Taper Fade", image: "/curly-taper-fade-hairstyle-men.jpg", }, { name: "Curly Fringe", image: "/curly-fringe-hairstyle-men.jpg", }, { name: "Classic Comb Over", image: "/classic-comb-over-hairstyle-men.jpg", }, { name: "Crew Cut", image: "/crew-cut-hairstyle-men.jpg", }, { name: "Ear Tucked Part", image: "/ear-tucked-part-hairstyle-men.jpg", }, { name: "Slicked-Back Undercut", image: "/slicked-back-undercut-hairstyle-men.jpg", }, { name: "The Bro Flow", image: "/bro-flow-hairstyle-men.jpg", }, { name: "Faux Hawk", image: "/faux-hawk-hairstyle-men.jpg", }, { name: "Hard Part Haircut", image: "/hard-part-haircut-hairstyle-men.jpg", }, { name: "Short Spiky Hair", image: "/short-spiky-hair-hairstyle-men.jpg", }, { name: "Caesar Cut", image: "/caesar-cut-hairstyle-men.jpg", }, { name: "Brushed Back Undercut", image: "/brushed-back-undercut-hairstyle-men.jpg", }, { name: "Layered Comb-Over", image: "/layered-comb-over-hairstyle-men.jpg", }, { name: "Korean Mullet", image: "/korean-mullet-hairstyle-men.jpg", }, { name: "Center Part Mullet", image: "/center-part-mullet-hairstyle-men.jpg", }, { name: "Textured Quiff", image: "/textured-quiff-hairstyle-men.jpg", }, { name: "Messy Quiff", image: "/messy-quiff-hairstyle-men.jpg", }, { name: "Short Quiff", image: "/short-quiff-hairstyle-men.jpg", }, { name: "Modern Quiff", image: "/modern-quiff-hairstyle-men.jpg", }, { name: "Quiff Undercut", image: "/quiff-undercut-hairstyle-men.jpg", }, { name: "Curly Quiff", image: "/curly-quiff-hairstyle-men.jpg", }, { name: "Quiff Fade", image: "/quiff-fade-hairstyle-men.jpg", }, { name: "Quiff Mid Fade", image: "/quiff-mid-fade-hairstyle-men.jpg", }, { name: "Quiff Mullet", image: "/quiff-mullet-hairstyle-men.jpg", }, { name: "Pompadour Quiff", image: "/pompadour-quiff-hairstyle-men.jpg", }, { name: "Side Swept Quiff", image: "/side-swept-quiff-hairstyle-men.jpg", }, { name: "Loose Quiff", image: "/loose-quiff-hairstyle-men.jpg", }, ] export function HairstylesGallery() { const [open, setOpen] = useState(false) return ( ) } [V0_FILE]jpg:file="public/textured-quiff-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/textured-quiff-hairstyle-men-ZROUGWPo9MtykYU0icDAGPFgsvwqSd.jpg" isMerged="true" [V0_FILE]jpg:file="public/messy-quiff-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/messy-quiff-hairstyle-men-r2PWSddWJcAUBygCjTcfIJjAczPHRj.jpg" isMerged="true" [V0_FILE]jpg:file="public/short-quiff-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/short-quiff-hairstyle-men-YLidjAAQD4raULi09ljduuPtX3DfPf.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-quiff-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/quiff-hairstyle-for-men-mb8pzyl6T1lt50p5TxzNsWxH1wyI9X.jpg" isMerged="true" [V0_FILE]jpg:file="public/quiff-undercut-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/quiff-undercut-hairstyle-men-8CG1B4RkSZTLs9qAaOpBKInaqdkU9B.jpg" isMerged="true" [V0_FILE]jpg:file="public/curly-quiff-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/curly-quiff-hairstyle-men-8TCgy69rkIMGfHlavOaCXzhiRjCzdu.jpg" isMerged="true" [V0_FILE]jpg:file="public/quiff-fade-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/quiff-fade-hairstyle-men-JtKiOcyRw0RyRMN6mdrorgnAXgHxIt.jpg" isMerged="true" [V0_FILE]jpg:file="public/quiff-mid-fade-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/quiff-mid-fade-hairstyle-men-HKSi0DE03o0JqibIZhGYIDXhDERb2d.jpg" isMerged="true" [V0_FILE]jpg:file="public/quiff-mullet-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/quiff-mullet-hairstyle-men-MUfusDw0skWxioLfAMZe0mFwnAcFyd.jpg" isMerged="true" [V0_FILE]jpg:file="public/pompadour-quiff-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pompadour-quiff-hairstyle-men-JkiLU82hrvReD5GSlRCoheyhu6cnr7.jpg" isMerged="true" [V0_FILE]jpg:file="public/side-swept-quiff-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/side-swept-quiff-hairstyle-men-jtH1avIeoBVV6004Ay4wgWRutu44Wu.jpg" isMerged="true" [V0_FILE]jpg:file="public/loose-quiff-hairstyle-men.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/loose-quiff-hairstyle-men-9ho8B1MkCqnMAmnv6OfgKVJvkoTpsj.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { MapPin, Phone, Clock, Mail } from "lucide-react" export function ContactSection() { return (

Visit Our Salon

Located in the heart of Kayalpatinam, we're ready to serve you

Location

Dinesh Hair Styles
128 A/2, Singathurai Road
Kayalpatinam
Tamil Nadu, India

Phone

+91 80563 95244

thineash226@gmail.com

For booking inquiries

Hours

Mon - Sat: 9 AM - 9 PM

Sunday: 10 AM - 8 PM

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Scissors, Sparkles, User } from "lucide-react" import { ServicesSection } from "@/components/services-section" import { BookingSection } from "@/components/booking-section" import { ContactSection } from "@/components/contact-section" import { HairstylesGallery } from "@/components/hairstyles-gallery" export default function Home() { return (

{/* Header */}

Dinesh Hair Styles

{/* Hero Section */}

Premium Grooming Experience

Crafting Style,
Defining Elegance

Experience the art of sophisticated grooming at Kayalpatinam's premier salon. Where tradition meets modern style.

{/* Scroll Indicator */}

{/* Features */}

Expert Stylists Trained professionals with years of experience in modern and traditional styles Premium Products Only the finest grooming products and equipment for superior results Personalized Service Tailored consultations to match your unique style and preferences

{/* Services Section */} {/* Booking Section */} {/* Contact Section */}

) } [V0_FILE]typescriptreact:file="components/booking-section.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Calendar, Clock, User, Phone, Mail, CheckCircle } from "lucide-react" const services = [ "Classic Haircut", "Premium Styling", "Hair Coloring", "Hair Spa Treatment", "Basic Beard Trim", "Royal Beard Grooming", "Complete Shave", "Basic Facial", "Gold Facial", "Diamond Facial", "Anti-Acne Treatment", ] const timeSlots = [ "9:00 AM", "10:00 AM", "11:00 AM", "12:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM", "6:00 PM", "7:00 PM", "8:00 PM", ] export function BookingSection() { const [formData, setFormData] = useState({ name: "", phone: "", email: "", service: "", date: "", time: "", }) const [isSubmitted, setIsSubmitted] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitted(true) setTimeout(() => { setIsSubmitted(false) setFormData({ name: "", phone: "", email: "", service: "", date: "", time: "" }) }, 5000) } const handleChange = (e: React.ChangeEvent) => { setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })) } const formatDate = (dateStr: string) => { if (!dateStr) return "" const [year, month, day] = dateStr.split("-") return `${day}/${month}/${year}` } if (isSubmitted) { return (

Thank You for Your Appointment!

Dear {formData.name},

Your appointment for {formData.service} has been successfully received.

Date: {formatDate(formData.date)}

Time: {formData.time}

Contact: {formData.phone}

A confirmation email has been sent to {formData.email}

We'll call you shortly to confirm your booking. Looking forward to serving you at Dinesh Hair Styles!

) } return (

Book Your Appointment

Reserve your spot and experience the finest grooming services in Kayalpatinam

Schedule Your Visit Fill in your details and we'll confirm your appointment

Full Name

Phone Number

Email Address

Select Service

Preferred Date (DD/MM/YYYY)

Preferred Time

By booking, you agree to our terms and conditions. We'll contact you to confirm your appointment.

) } [V0_FILE]typescriptreact:file="components/services-section.tsx" isEdit="true" isQuickEdit="true" import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Check } from "lucide-react" const services = [ { category: "Hair Chores", quote: "Style is a way to say who you are without having to speak", description: "Transform your look with our expert cutting and styling", image: "/modern-mens-haircut-styling-professional.jpg", services: [ { name: "Classic Haircut", price: "₹99", features: ["Wash", "Cut", "Style"] }, { name: "Hair Colouring", price: "₹70", features: ["Color Application", "Wash", "Style"] }, ], }, { category: "Beard Chores", quote: "A well-groomed beard is a gentleman's signature", description: "Perfect your facial hair with precision grooming", image: "/professional-beard-trimming-grooming-barbershop.jpg", services: [ { name: "Basic Beard Trim", price: "₹49", features: ["Trim", "Shape", "Aftershave"] }, { name: "Complete Shave", price: "₹49", features: ["Hot Towel", "Shave", "Aftershave"] }, { name: "Beard Styling", price: "₹60", features: ["Design", "Trim", "Style", "Finish"] }, ], }, { category: "Facial Chores", quote: "Invest in your skin, it's going to represent you for a very long time", description: "Rejuvenate and refresh with our facial treatments", image: "/luxury-mens-facial-treatment-spa.jpg", services: [ { name: "Basic Facial", price: "₹349", features: ["Cleansing", "Scrub", "Mask", "Moisturizer"] }, { name: "Gold Facial", price: "₹649", features: ["Gold Treatment", "Deep Cleansing", "Massage", "Mask"] }, { name: "Diamond Facial", price: "₹999", features: ["Diamond Polish", "Anti-Aging", "Deep Hydration", "Massage"], }, ], }, ] export function ServicesSection() { return (

Our Premium Services

Discover our comprehensive range of grooming services, each designed to elevate your style and confidence

{services.map((serviceCategory, idx) => (

"{serviceCategory.quote}"

{serviceCategory.category}

{serviceCategory.description}

{serviceCategory.services.map((service, serviceIdx) => (

{service.name} {service.features.map((feature, featureIdx) => ( {feature} ))}

{service.price}

))}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This