From e28671e90f49347969061c2fdbff0c5fe25c90fb Mon Sep 17 00:00:00 2001
From: Nicholai <nicholaivogelfilms@gmail.com>
Date: Mon, 20 Oct 2025 13:23:14 -0600
Subject: [PATCH] feat: Add construction banner with dismissible functionality

- Add ConstructionBanner component with warning icon and phone number
- Integrate banner into ClientLayout above all content
- Add CSS to automatically adjust navigation position when banner is visible
- Banner is dismissible with localStorage persistence
- Phone number: (719) 698-9004 for bookings
- Yellow/amber theme matching dark design
---
 app/ClientLayout.tsx               |  2 +
 app/globals.css                    |  5 +++
 components/construction-banner.tsx | 69 ++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 components/construction-banner.tsx

diff --git a/app/ClientLayout.tsx b/app/ClientLayout.tsx
index 5a1b2f6f2..cfcfad983 100644
--- a/app/ClientLayout.tsx
+++ b/app/ClientLayout.tsx
@@ -10,6 +10,7 @@ import { FeatureFlagsProvider } from "@/components/feature-flags-provider"
 import { LenisProvider } from "@/components/smooth-scroll-provider"
 import { Toaster } from "@/components/ui/sonner"
 import { ThemeProvider } from "@/components/theme-provider"
+import { ConstructionBanner } from "@/components/construction-banner"
 import type { FlagsSnapshot } from "@/lib/flags"
 
 import "./globals.css"
@@ -50,6 +51,7 @@ export default function ClientLayout({
       <QueryClientProvider client={queryClient}>
         <FeatureFlagsProvider value={initialFlags}>
           <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
+            <ConstructionBanner />
             <Suspense fallback={<div>Loading...</div>}>
               <LenisProvider>
                 {children}
diff --git a/app/globals.css b/app/globals.css
index 096ff6aff..19bf42cbd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,6 +3,11 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Construction banner spacing */
+body:has(.construction-banner) nav {
+  top: 60px !important;
+}
+
 :root {
   /* Updated color tokens to match United Tattoo design brief */
   --background: oklch(1 0 0); /* White */
diff --git a/components/construction-banner.tsx b/components/construction-banner.tsx
new file mode 100644
index 000000000..05d0a0e8c
--- /dev/null
+++ b/components/construction-banner.tsx
@@ -0,0 +1,69 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { AlertTriangle, X, Phone } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export function ConstructionBanner() {
+  const [isVisible, setIsVisible] = useState(false)
+  const [isHydrated, setIsHydrated] = useState(false)
+
+  useEffect(() => {
+    // Check if banner was previously dismissed
+    const isDismissed = localStorage.getItem("construction-banner-dismissed")
+    setIsVisible(!isDismissed)
+    setIsHydrated(true)
+  }, [])
+
+  const handleDismiss = () => {
+    setIsVisible(false)
+    localStorage.setItem("construction-banner-dismissed", "true")
+  }
+
+  // Don't render anything until hydrated to avoid mismatch
+  if (!isHydrated) {
+    return null
+  }
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <div className="construction-banner fixed top-0 left-0 right-0 bg-amber-500/10 border-b border-amber-500/20 backdrop-blur-sm z-[60]">
+      <div className="container mx-auto px-4 py-3">
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 text-amber-200/90">
+          <div className="flex items-center gap-2 text-center sm:text-left">
+            <AlertTriangle className="h-5 w-5 text-amber-400 flex-shrink-0" />
+            <p className="text-sm font-medium">
+              Website Under Construction
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-amber-300/70">•</span>
+            <p className="text-sm">
+              For bookings, please call:
+            </p>
+            <a
+              href="tel:7196989004"
+              className="flex items-center gap-1.5 text-sm font-semibold text-amber-300 hover:text-amber-200 transition-colors underline decoration-amber-400/30 hover:decoration-amber-300/50 underline-offset-2"
+            >
+              <Phone className="h-4 w-4" />
+              (719) 698-9004
+            </a>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDismiss}
+            className="absolute right-2 top-1/2 -translate-y-1/2 sm:relative sm:right-auto sm:top-auto sm:translate-y-0 h-8 w-8 p-0 text-amber-400/70 hover:text-amber-300 hover:bg-amber-500/10"
+            aria-label="Dismiss banner"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+