[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Hair saloon SPA *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/niya90-hotmailcoms-projects/v0-hair-saloon-spa) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/qFvD1xEpo2n) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/niya90-hotmailcoms-projects/v0-hair-saloon-spa](https://vercel.com/niya90-hotmailcoms-projects/v0-hair-saloon-spa)** ## Build your app Continue building your app on: **[https://v0.app/chat/qFvD1xEpo2n](https://v0.app/chat/qFvD1xEpo2n)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Updated colors for luxury salon theme with gold accent */ :root { --background: oklch(0.98 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.45 0 0); /* Gold accent for luxury feel */ --accent: oklch(0.65 0.14 85); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.9 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.65 0.14 85); --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.75rem; --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 { --background: oklch(0.1 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.65 0 0); /* Brighter gold accent for dark mode */ --accent: oklch(0.75 0.15 85); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.22 0 0); --input: oklch(0.22 0 0); --ring: oklch(0.75 0.15 85); --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.12 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.75 0.15 85); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.2 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.22 0 0); --sidebar-ring: oklch(0.75 0.15 85); } @theme inline { --font-sans: "Inter", "Inter Fallback", system-ui, sans-serif; --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; } html { scroll-behavior: smooth; } } /* Added custom animations for salon website */ @layer utilities { .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; } .animation-delay-100 { animation-delay: 0.1s; } .animation-delay-200 { animation-delay: 0.2s; } .animation-delay-300 { animation-delay: 0.3s; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Salong EnglaKarin | Frisör i Bollnäs", description: "Välkommen till Salong EnglaKarin i Bollnäs. Vi erbjuder klippning, färgning, slingor, styling och hårförlängning. 4.9 betyg med över 1140 omdömen.", 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]typescriptreact:file="app/page.tsx" import { ThemeProvider } from "@/components/theme-provider" import Header from "@/components/header" import Hero from "@/components/hero" import Services from "@/components/services" import About from "@/components/about" import Gallery from "@/components/gallery" import Team from "@/components/team" import Contact from "@/components/contact" import Footer from "@/components/footer" export default function Page() { return (

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/about.tsx" "use client" import { useInView } from "@/hooks/use-in-view" import { Award, Users, Clock, Star } from "lucide-react" const stats = [ { icon: Star, value: "4.9", label: "Betyg" }, { icon: Users, value: "1140+", label: "Omdömen" }, { icon: Award, value: "3", label: "Stylister" }, { icon: Clock, value: "Bollnäs", label: "Sedan 2015" }, ] export default function About() { const { ref, isInView } = useInView({ threshold: 0.1 }) return (

Om Oss

Passion för Hårvård

Salong EnglaKarin är en välrenommerad frisörsalong i hjärtat av Bollnäs. Med ett starkt fokus på kvalitet och kundnöjdhet har vi byggt upp ett rykte som en av de bästa salongerna i området.

Vårt team av skickliga frisörer erbjuder allt från klassiska klippningar till moderna färgtekniker som balayage och slingor. Vi är stolta medlemmar i Frisörföretagarna och håller oss alltid uppdaterade med de senaste trenderna och teknikerna.

Varje besök hos oss börjar med en personlig konsultation där vi lyssnar på dina önskemål och ger professionella råd för att uppnå ditt drömresultat. Välkommen till en avslappnad och inspirerande miljö!

{stats.map((stat) => (

{stat.value}

{stat.label}

))}

) } [V0_FILE]typescriptreact:file="components/contact.tsx" "use client" import { useInView } from "@/hooks/use-in-view" import { MapPin, Phone, Mail, Clock } from "lucide-react" const BOOKING_URL = "https://www.bokadirekt.se/places/salong-englakarin-45590" const contactInfo = [ { icon: MapPin, title: "Besök Oss", details: ["Långgatan 19", "821 43 Bollnäs"], }, { icon: Phone, title: "Ring Oss", details: ["076-690 7XXX"], }, { icon: Mail, title: "Följ Oss", details: ["@salongenglakarin", "Instagram"], }, { icon: Clock, title: "Öppettider", details: ["Boka tid via", "Bokadirekt"], }, ] export default function Contact() { const { ref, isInView } = useInView({ threshold: 0.1 }) return (

Kontakt

Hör av Dig

Vi ser fram emot att träffa dig! Boka din tid enkelt via Bokadirekt.

{contactInfo.map((item, index) => ( ))}

Boka Din Tid

) } function ContactCard({ item, index }: { item: (typeof contactInfo)[0]; index: number }) { const { ref, isInView } = useInView({ threshold: 0.1 }) return (

{item.title}

{item.details.map((detail) => (

{detail}

))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" import { Scissors, Instagram } from "lucide-react" const socialLinks = [{ icon: Instagram, href: "https://instagram.com/salongenglakarin", label: "Instagram" }] export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/gallery.tsx" "use client" import { useInView } from "@/hooks/use-in-view" import { Instagram, ExternalLink } from "lucide-react" const galleryImages = [ { src: "/blonde-balayage-hair-styling-salon.jpg", alt: "Balayage" }, { src: "/brunette-bob-haircut-professional.jpg", alt: "Bob Klippning" }, { src: "/creative-hair-color-pink-purple.jpg", alt: "Kreativ Färg" }, { src: "/bridal-updo-elegant-hairstyle.jpg", alt: "Bröllop" }, { src: "/mens-modern-haircut-fade.jpg", alt: "Herrklippning" }, { src: "/long-wavy-hair-styling-blonde.jpg", alt: "Styling" }, ] export default function Gallery() { const { ref, isInView } = useInView({ threshold: 0.1 }) return (

Vårt Arbete

Stil Galleri

Utforska vårt arbete och hitta inspiration för din nästa look.

{galleryImages.map((image, index) => ( ))}

Se mer på Instagram

Följ @salongenglakarin för daglig inspiration

) } function GalleryItem({ image, index }: { image: (typeof galleryImages)[0]; index: number }) { const { ref, isInView } = useInView({ threshold: 0.1 }) return (

{image.alt}

) } [V0_FILE]typescriptreact:file="components/header.tsx" "use client" import { useState, useEffect } from "react" import { useTheme } from "./theme-provider" import { Sun, Moon, Menu, X, Scissors } from "lucide-react" const navLinks = [ { name: "Hem", href: "#home" }, { name: "Tjänster", href: "#services" }, { name: "Om Oss", href: "#about" }, { name: "Galleri", href: "#gallery" }, { name: "Team", href: "#team" }, { name: "Kontakt", href: "#contact" }, ] const BOOKING_URL = "https://www.bokadirekt.se/places/salong-englakarin-45590" export default function Header() { const { theme, setTheme, resolvedTheme } = useTheme() const [isScrolled, setIsScrolled] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) const handleScroll = () => { setIsScrolled(window.scrollY > 50) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const isDark = resolvedTheme === "dark" return (

) } [V0_FILE]typescriptreact:file="components/hero.tsx" import { ChevronDown } from "lucide-react" const BOOKING_URL = "https://www.bokadirekt.se/places/salong-englakarin-45590" export default function Hero() { return (

Frisör i Bollnäs

Välkommen till
Salong EnglaKarin

Med över 1140 nöjda kunder och 4.9 i betyg erbjuder vi professionell hårvård i en avslappnad miljö. Klippning, färgning, slingor och styling – vi hjälper dig att hitta din stil.

Boka Din Tid Se Våra Tjänster

) } [V0_FILE]typescriptreact:file="components/services.tsx" "use client" import { Scissors, Sparkles, Palette, Wind, Crown, Heart } from "lucide-react" import { useInView } from "@/hooks/use-in-view" const services = [ { icon: Scissors, title: "Klippning", description: "Professionell klippning inklusive hårtvätt, scalp massage och styling. Vi anpassar frisyren efter ditt ansikte och livsstil.", price: "Från 690 kr", }, { icon: Palette, title: "Färgning & Slingor", description: "Expert på färgning, slingor och balayage. Vi skapar naturliga eller dramatiska resultat efter dina önskemål.", price: "Från 1 280 kr", }, { icon: Sparkles, title: "Behandlingar", description: "Nyansering och skonsam avfärgning för att underhålla din färg eller förbereda för nya färgförändringar.", price: "Från 980 kr", }, { icon: Wind, title: "Styling & Blowout", description: "Tvätt med scalp massage, volymföning och feststyling för ett fantastiskt resultat.", price: "Från 450 kr", }, { icon: Crown, title: "Bröllop & Fest", description: "Baluppsättning och bröllopsuppsättning för din speciella dag. Kom med nytvättat och fönat hår.", price: "Från 1 500 kr", }, { icon: Heart, title: "Hårförlängning", description: "BHBD/Richy hårförlängning med tejpteknik. Omsättning och konsultation för perfekt resultat.", price: "Från 550 kr", }, ] export default function Services() { const { ref, isInView } = useInView({ threshold: 0.1 }) return (

Våra Tjänster

Skapad för Kvalitet

Upptäck vårt utbud av professionella hårtjänster designade för att framhäva din naturliga skönhet.

{services.map((service, index) => ( ))}

) } function ServiceCard({ service, index }: { service: (typeof services)[0]; index: number }) { const { ref, isInView } = useInView({ threshold: 0.1 }) return (

{service.title}

{service.description}

{service.price}

) } [V0_FILE]typescriptreact:file="components/team.tsx" "use client" import { useInView } from "@/hooks/use-in-view" import { Instagram, Star, User } from "lucide-react" const team = [ { name: "Engla", role: "Frisör & Ägare", rating: 4.9, reviews: 718, instagram: "https://instagram.com/salongenglakarin", }, { name: "Lina", role: "Frisör", rating: 4.9, reviews: 281, instagram: "https://instagram.com/salongenglakarin", }, { name: "Louise Jonsson", role: "Frisör", rating: 4.9, reviews: 141, instagram: "https://instagram.com/salongenglakarin", }, ] export default function Team() { const { ref, isInView } = useInView({ threshold: 0.1 }) return (

Personal

Möt Våra Stylister

Vårt erfarna team är dedikerade till att ge dig den bästa upplevelsen.

{team.map((member, index) => ( ))}

) } function TeamCard({ member, index }: { member: (typeof team)[0]; index: number }) { const { ref, isInView } = useInView({ threshold: 0.1 }) return (

{member.name}

{member.role}

{member.rating} ({member.reviews} betyg)

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, useTheme as useNextTheme } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } export const useTheme = useNextTheme [V0_FILE]typescript:file="hooks/use-in-view.ts" "use client" import { useEffect, useRef, useState } from "react" interface UseInViewOptions { threshold?: number rootMargin?: string triggerOnce?: boolean } export function useInView(options: UseInViewOptions = {}) { const { threshold = 0, rootMargin = "0px", triggerOnce = true } = options const ref = useRef(null) const [isInView, setIsInView] = useState(false) useEffect(() => { const element = ref.current if (!element) return const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsInView(true) if (triggerOnce) { observer.unobserve(element) } } else if (!triggerOnce) { setIsInView(false) } }, { threshold, rootMargin }, ) observer.observe(element) return () => { observer.unobserve(element) } }, [threshold, rootMargin, triggerOnce]) return { ref, isInView } } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "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", "@vitejs/plugin-react": "5.1.2", "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", "jiti": "latest", "less": "latest", "lightningcss": "latest", "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", "sass": "latest", "sass-embedded": "latest", "sonner": "^1.7.4", "stylus": "latest", "sugarss": "latest", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "terser": "latest", "tsx": "latest", "vaul": "^1.1.2", "vite": "7.3.1", "yaml": "latest", "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]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --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 { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --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]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" [V0_FILE]jpg:file="public/blonde-balayage-hair-styling-salon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/4Pjpk78x46OQcHr3PlalSd/public/blonde-balayage-hair-styling-salon.jpg" [V0_FILE]jpg:file="public/bridal-updo-elegant-hairstyle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/KbpA4p8J-rBcIheeLnSNHN/public/bridal-updo-elegant-hairstyle.jpg" [V0_FILE]jpg:file="public/bridal-updo-hairstyle-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/Tr1osvyDqcGPQgeVMVG5aQ/public/bridal-updo-hairstyle-elegant.jpg" [V0_FILE]jpg:file="public/brunette-bob-haircut-professional.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/ar1WiwfKUUsn8zQaHDEaPX/public/brunette-bob-haircut-professional.jpg" [V0_FILE]jpg:file="public/brunette-sleek-bob-haircut.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/TiNfEVvAQkcRmDUbsYZky4/public/brunette-sleek-bob-haircut.jpg" [V0_FILE]jpg:file="public/colorful-creative-hair-color.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/ky-ykVpFdYqQ5ZPC_sN-pk/public/colorful-creative-hair-color.jpg" [V0_FILE]jpg:file="public/creative-hair-color-pink-purple.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/uDtzEGzLqwupCMPGf-yXuu/public/creative-hair-color-pink-purple.jpg" [V0_FILE]jpg:file="public/elegant-blonde-balayage-hairstyle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/BxHPCBS8lV3lXj2cLO1ReG/public/elegant-blonde-balayage-hairstyle.jpg" [V0_FILE]jpg:file="public/elegant-professional-woman.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/l0JPBmyj65MFt_MNrIC27z/public/elegant-professional-woman.jpg" [V0_FILE]png:file="public/elegant-professional-woman.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/opReZGNwe_ICGAomuijSS2/public/elegant-professional-woman.png" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" [V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" [V0_FILE]jpg:file="public/long-wavy-hair-styling-blonde.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/5DVFioosMl-QMokR6Qn9DX/public/long-wavy-hair-styling-blonde.jpg" [V0_FILE]jpg:file="public/long-wavy-red-hair-styling.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/s8DRZk049k8AnrgteUZWW0/public/long-wavy-red-hair-styling.jpg" [V0_FILE]jpg:file="public/luxury-hair-salon-interior-dark-moody-atmosphere.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/-HzdGT-on6e5yHDxf3GVD6/public/luxury-hair-salon-interior-dark-moody-atmosphere.jpg" [V0_FILE]jpg:file="public/luxury-hair-salon-interior-modern-design.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/JGXGC_F_u0i3eG8wrpiYLF/public/luxury-hair-salon-interior-modern-design.jpg" [V0_FILE]jpg:file="public/mens-modern-haircut-fade.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/0MfOkuwJUYrLw_-Ca70Bq7/public/mens-modern-haircut-fade.jpg" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" [V0_FILE]jpg:file="public/professional-female-hairdresser-portrait-brunette.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/_UJUMta7Uh3Uy9m7v91XTM/public/professional-female-hairdresser-portrait-brunette.jpg" [V0_FILE]jpg:file="public/professional-female-hairdresser-portrait-dark-hair.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/SBKf13nfjxeCSdreuJOtzC/public/professional-female-hairdresser-portrait-dark-hair.jpg" [V0_FILE]jpg:file="public/professional-man-portrait-creative.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/NLq_B6ahlQ2cFtnrXi6fG_/public/professional-man-portrait-creative.jpg" [V0_FILE]jpg:file="public/professional-man-portrait-stylish.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/3qANgpkO0I-rVdATdxLSPQ/public/professional-man-portrait-stylish.jpg" [V0_FILE]jpg:file="public/professional-woman-portrait-modern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_YS9ellLhwzzNy5eLvjqIq37QOKsA/7Zw5GysEgFkfV9udSchoec/public/professional-woman-portrait-modern.jpg"