+ {/* CTA Button */}
diff --git a/components/navigation.tsx b/components/navigation.tsx
index 584baf5aa..44ae36c59 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -1,256 +1,153 @@
-"use client"
+"use client";
-import { useCallback, useEffect, useState } from "react"
-import type { MouseEvent } from "react"
-import Link from "next/link"
-import { usePathname, useRouter } from "next/navigation"
-import { ArrowUpRight, Menu, X } from "lucide-react"
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Menu, X } from "lucide-react";
+import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button"
import {
- NavigationMenu,
- NavigationMenuItem,
- NavigationMenuLink,
- NavigationMenuList,
-} from "@/components/ui/navigation-menu"
-import { cn } from "@/lib/utils"
+ NavigationMenu as ShadNavigationMenu,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
-type NavItem = {
- href: string
- label: string
- id: string
- isButton?: boolean
-}
+const NAV_ITEMS = [
+ { name: "Artists", href: "/artists" },
+ { name: "Your Deposit", href: "/deposit" },
+ { name: "Aftercare", href: "/aftercare" },
+ { name: "Contact", href: "/contact" },
+];
-const navItems: NavItem[] = [
- { href: "#home", label: "Home", id: "home" },
- { href: "#artists", label: "Artists", id: "artists" },
- { href: "#services", label: "Services", id: "services" },
- { href: "#contact", label: "Contact", id: "contact" },
- { href: "/book", label: "Book Now", id: "book", isButton: true },
-]
-
-const scrollTrackedIds = navItems.filter((item) => !item.isButton).map((item) => item.id)
+const CTA_LABEL = "Book";
export function Navigation() {
- const pathname = usePathname()
- const router = useRouter()
- const [isOpen, setIsOpen] = useState(false)
- const [isScrolled, setIsScrolled] = useState(false)
- const [activeSection, setActiveSection] = useState(scrollTrackedIds[0] ?? "")
+ const pathname = usePathname();
+ const [isScrolled, setIsScrolled] = useState(false);
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
- const scrollToSection = useCallback(
- (targetId: string, options?: { href?: string; updateHistory?: boolean }) => {
- const target = document.getElementById(targetId)
- if (!target) {
- return
- }
+ useEffect(() => {
+ const handleScroll = () => setIsScrolled(window.scrollY > 16);
- const offset = target.getBoundingClientRect().top + window.scrollY - 80
- window.scrollTo({ top: offset, behavior: "smooth" })
+ window.addEventListener("scroll", handleScroll, { passive: true });
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
- if (options?.href && options.updateHistory !== false) {
- window.history.replaceState(null, "", options.href)
- }
+ useEffect(() => {
+ setMobileMenuOpen(false);
+ }, [pathname]);
- setActiveSection(targetId)
- },
- [],
- )
+ const navLinkClass = (isActive: boolean) =>
+ cn(
+ "group inline-flex flex-col items-center gap-1 font-semibold text-xs uppercase tracking-very-wide text-charcoal transition-colors duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose focus-visible:ring-offset-4 rounded-sm",
+ isActive ? "opacity-100" : "opacity-80 hover:opacity-100",
+ );
- useEffect(() => {
- const handleScroll = () => {
- setIsScrolled(window.scrollY > 50)
-
- const scrollPosition = window.scrollY + 100
-
- for (const section of scrollTrackedIds) {
- const element = document.getElementById(section)
- if (!element) {
- continue
- }
-
- const { offsetTop, offsetHeight } = element
- if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
- setActiveSection(section)
- return
- }
- }
- }
-
- handleScroll()
- window.addEventListener("scroll", handleScroll)
- return () => window.removeEventListener("scroll", handleScroll)
- }, [scrollTrackedIds])
-
- useEffect(() => {
- if (pathname !== "/") {
- return
- }
-
- const hash = window.location.hash.slice(1)
- if (!hash) {
- return
- }
-
- const frame = window.requestAnimationFrame(() => {
- scrollToSection(hash, { updateHistory: false })
- })
-
- return () => window.cancelAnimationFrame(frame)
- }, [pathname, scrollToSection])
-
- const handleNavClick = (event: MouseEvent
, item: NavItem) => {
- if (item.isButton || !item.href.startsWith("/#")) {
- return
- }
-
- if (pathname === "/") {
- event.preventDefault()
- const targetId = item.href.slice(2)
- scrollToSection(targetId, { href: item.href })
- return
- }
-
- event.preventDefault()
- router.push(item.href)
- }
-
- const handleToggleMenu = () => setIsOpen((previous) => !previous)
- const handleCloseMenu = () => setIsOpen(false)
-
- return (
-
- )
+
+ );
}
diff --git a/custom-components/public/apple-icon.png b/custom-components/public/apple-icon.png
new file mode 100644
index 000000000..f9418b406
Binary files /dev/null and b/custom-components/public/apple-icon.png differ
diff --git a/custom-components/public/artistic-painting-statue-of-liberty-with-warm-colo.jpg b/custom-components/public/artistic-painting-statue-of-liberty-with-warm-colo.jpg
new file mode 100644
index 000000000..4f5b8a4a8
Binary files /dev/null and b/custom-components/public/artistic-painting-statue-of-liberty-with-warm-colo.jpg differ
diff --git a/custom-components/public/artistic-studio-sculpture-with-dove.jpg b/custom-components/public/artistic-studio-sculpture-with-dove.jpg
new file mode 100644
index 000000000..385728943
Binary files /dev/null and b/custom-components/public/artistic-studio-sculpture-with-dove.jpg differ
diff --git a/custom-components/public/artistic-studio-with-paintbrushes-and-statue.jpg b/custom-components/public/artistic-studio-with-paintbrushes-and-statue.jpg
new file mode 100644
index 000000000..914710be2
Binary files /dev/null and b/custom-components/public/artistic-studio-with-paintbrushes-and-statue.jpg differ
diff --git a/custom-components/public/icon-dark-32x32.png b/custom-components/public/icon-dark-32x32.png
new file mode 100644
index 000000000..12c825a10
Binary files /dev/null and b/custom-components/public/icon-dark-32x32.png differ
diff --git a/custom-components/public/icon-light-32x32.png b/custom-components/public/icon-light-32x32.png
new file mode 100644
index 000000000..a3462ccd8
Binary files /dev/null and b/custom-components/public/icon-light-32x32.png differ
diff --git a/custom-components/public/icon.svg b/custom-components/public/icon.svg
new file mode 100644
index 000000000..5c11e6c50
--- /dev/null
+++ b/custom-components/public/icon.svg
@@ -0,0 +1,26 @@
+
\ No newline at end of file
diff --git a/custom-components/public/monument-statue-colorful-artistic-display.jpg b/custom-components/public/monument-statue-colorful-artistic-display.jpg
new file mode 100644
index 000000000..71209c34d
Binary files /dev/null and b/custom-components/public/monument-statue-colorful-artistic-display.jpg differ
diff --git a/custom-components/public/monument-statue-with-colorful-objects-artistic.jpg b/custom-components/public/monument-statue-with-colorful-objects-artistic.jpg
new file mode 100644
index 000000000..6a255a748
Binary files /dev/null and b/custom-components/public/monument-statue-with-colorful-objects-artistic.jpg differ
diff --git a/custom-components/public/placeholder-logo.png b/custom-components/public/placeholder-logo.png
new file mode 100644
index 000000000..8a792ac2d
Binary files /dev/null and b/custom-components/public/placeholder-logo.png differ
diff --git a/custom-components/public/placeholder-logo.svg b/custom-components/public/placeholder-logo.svg
new file mode 100644
index 000000000..b1695aafc
--- /dev/null
+++ b/custom-components/public/placeholder-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/custom-components/public/placeholder-user.jpg b/custom-components/public/placeholder-user.jpg
new file mode 100644
index 000000000..6fa7543d3
Binary files /dev/null and b/custom-components/public/placeholder-user.jpg differ
diff --git a/custom-components/public/placeholder.jpg b/custom-components/public/placeholder.jpg
new file mode 100644
index 000000000..6bfe96336
Binary files /dev/null and b/custom-components/public/placeholder.jpg differ
diff --git a/custom-components/public/placeholder.svg b/custom-components/public/placeholder.svg
new file mode 100644
index 000000000..e763910b2
--- /dev/null
+++ b/custom-components/public/placeholder.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/custom-components/public/statue-of-liberty-watercolor-painting-pastel.jpg b/custom-components/public/statue-of-liberty-watercolor-painting-pastel.jpg
new file mode 100644
index 000000000..a2694f93e
Binary files /dev/null and b/custom-components/public/statue-of-liberty-watercolor-painting-pastel.jpg differ
diff --git a/custom-components/public/watercolor-statue-of-liberty-painting.jpg b/custom-components/public/watercolor-statue-of-liberty-painting.jpg
new file mode 100644
index 000000000..834917d12
Binary files /dev/null and b/custom-components/public/watercolor-statue-of-liberty-painting.jpg differ
diff --git a/custom-components/styles/globals.css b/custom-components/styles/globals.css
new file mode 100644
index 000000000..dc2aea17f
--- /dev/null
+++ b/custom-components/styles/globals.css
@@ -0,0 +1,125 @@
+@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;
+ }
+}
diff --git a/public/UP1_00010_.png b/public/UP1_00010_.png
new file mode 100644
index 000000000..edbce00bf
Binary files /dev/null and b/public/UP1_00010_.png differ
diff --git a/public/UP1_00011_.png b/public/UP1_00011_.png
new file mode 100644
index 000000000..c4bb0c712
Binary files /dev/null and b/public/UP1_00011_.png differ
diff --git a/scripts/verify-changes.ts b/scripts/verify-changes.ts
new file mode 100644
index 000000000..b4d77017a
--- /dev/null
+++ b/scripts/verify-changes.ts
@@ -0,0 +1,46 @@
+import { chromium } from 'playwright';
+
+(async () => {
+ try {
+ console.log('Connecting to browser...');
+ const browser = await chromium.connectOverCDP('http://localhost:9222');
+ const defaultContext = browser.contexts()[0];
+ const page = defaultContext ? defaultContext.pages()[0] : await browser.newPage();
+
+ if (!page) {
+ throw new Error('No page found');
+ }
+
+ console.log('Navigating to home...');
+ await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });
+
+ // Desktop Screenshot
+ console.log('Taking desktop screenshot...');
+ await page.setViewportSize({ width: 1600, height: 1200 });
+ // Wait a sec for resizing
+ await page.waitForTimeout(1000);
+ await page.screenshot({ path: '.playwright-mcp/08-navigation-desktop-refined.png' });
+
+ // Mobile Screenshot
+ console.log('Taking mobile screenshot...');
+ await page.setViewportSize({ width: 390, height: 844 });
+ await page.waitForTimeout(1000);
+
+ // Click Menu
+ const menuButton = page.locator('button[aria-label="Toggle menu"]');
+ if (await menuButton.isVisible()) {
+ await menuButton.click();
+ // Wait for transition
+ await page.waitForTimeout(1000);
+ await page.screenshot({ path: '.playwright-mcp/09-navigation-mobile-refined.png' });
+ } else {
+ console.error('Menu button not found!');
+ }
+
+ console.log('Done.');
+ await browser.close();
+ } catch (error) {
+ console.error('Error:', error);
+ process.exit(1);
+ }
+})();
diff --git a/tailwind.config.ts b/tailwind.config.ts
index bd005efcf..95c0fe4a3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -49,12 +49,93 @@ const config: Config = {
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
- }
+ },
+ // United Tattoo 2026 Brand Colors
+ 'burnt-orange': '#E67E50',
+ terracotta: '#D87850',
+ burnt: '#b0471e',
+ 'sage-concrete': '#7A8B8B',
+ sage: '#a28f79',
+ 'deep-olive': '#4a4034',
+ moss: '#6f5c49',
+ charcoal: '#1c1915',
+ ink: '#241b16',
+ cream: '#fff7ec',
+ sand: '#f2e3d0',
+ rose: '#e59863'
+ },
+ backgroundImage: {
+ 'gradient-radial': 'radial-gradient(circle, var(--tw-gradient-stops))',
+ 'hero-bg': 'linear-gradient(180deg, #7A8B8B 0%, #9CAAA6 45%, #F2E3D0 100%)',
+ 'hero-overlay': 'linear-gradient(135deg, rgba(242, 227, 208, 0.95), rgba(255, 247, 236, 0.9))',
+ 'button-gradient': 'linear-gradient(90deg, #b0471e, #d26a32)',
+ 'burnt-to-rose': 'linear-gradient(90deg, #b0471e, #e59863)',
+ 'card-gradient': 'linear-gradient(135deg, rgba(242, 227, 208, 0.95), rgba(255, 247, 236, 0.9))'
+ },
+ boxShadow: {
+ 'sm': '0 4px 12px rgba(31, 27, 23, 0.08)',
+ 'md': '0 12px 28px rgba(31, 27, 23, 0.1)',
+ 'lg': '0 14px 24px rgba(31, 27, 23, 0.18)',
+ 'xl': '0 20px 35px rgba(31, 27, 23, 0.1)',
+ '2xl': '0 20px 40px rgba(31, 27, 23, 0.2)',
+ '3xl': '0 25px 40px rgba(31, 27, 23, 0.08)',
+ '4xl': '0 32px 60px rgba(31, 27, 23, 0.2)',
+ '5xl': '0 35px 55px rgba(31, 27, 23, 0.18)',
+ '6xl': '0 40px 70px rgba(31, 27, 23, 0.25)',
+ 'filmic': '0 40px 70px rgba(31, 27, 23, 0.25)',
+ 'button-primary': '0 10px 22px rgba(186, 75, 47, 0.25)',
+ 'button-primary-hover': '0 12px 24px rgba(186, 75, 47, 0.3)',
+ 'button-secondary': '0 10px 22px rgba(216, 120, 80, 0.25)',
+ 'button-secondary-hover': '0 8px 16px rgba(216, 120, 80, 0.3)'
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
- sm: 'calc(var(--radius) - 4px)'
+ sm: 'calc(var(--radius) - 4px)',
+ 'xl': '20px',
+ '2xl': '22px',
+ '3xl': '24px',
+ '4xl': '28px',
+ '5xl': '32px'
+ },
+ fontFamily: {
+ playfair: ['var(--font-playfair)', 'serif'],
+ grotesk: ['var(--font-grotesk)', 'sans-serif']
+ },
+ fontSize: {
+ 'xs': '0.7rem',
+ 'sm': '0.75rem',
+ 'base': '0.95rem',
+ 'md': '1rem',
+ 'lg': '1.1rem',
+ 'xl': '1.2rem',
+ '2xl': '1.9rem',
+ '3xl': '2.4rem',
+ '4xl': '2.5rem',
+ '5xl': '3rem',
+ '6xl': '3.8rem'
+ },
+ letterSpacing: {
+ 'tighter': '-0.02em',
+ 'wide': '0.05em',
+ 'wider': '0.2em',
+ 'widest': '0.25em',
+ 'very-wide': '0.3em',
+ 'extra-wide': '0.35em'
+ },
+ lineHeight: {
+ 'tight': '1.1',
+ 'snug': '1.15',
+ 'normal': '1.5',
+ 'relaxed': '1.6',
+ 'loose': '1.65',
+ 'very-loose': '1.7'
+ },
+ backdropBlur: {
+ 'hero': '12px'
+ },
+ backdropSaturate: {
+ 'hero': '110%'
}
}
},