From d925ab75cf8adb10eb0a0b096a0e7e567adcdcd3 Mon Sep 17 00:00:00 2001
From: Nicholai <nicholaivogelfilms@gmail.com>
Date: Wed, 17 Sep 2025 00:30:49 -0600
Subject: [PATCH] feat(mobile): add services carousel, persistent booking bar,
 and improved navigation while preserving desktop layouts

---
 .clinerules/authrules.md                |  24 +++++
 .clinerules/cicdrules.md                |  17 ++++
 .clinerules/dockerrules.md              |   6 ++
 .clinerules/infrarules.md               |  20 ++++
 .clinerules/nextjsrules.md              |  36 +++++++
 .clinerules/observabilityrules.md       |   4 +
 .clinerules/testing.md                  |   7 ++
 .clinerules/ui-rules.md                 |  16 +++
 app/page.tsx                            |   2 +
 components/artists-grid.tsx             |  48 ++++-----
 components/contact-section.tsx          |   6 +-
 components/hero-section.tsx             |   2 +-
 components/mobile-booking-bar.tsx       |  19 ++++
 components/navigation.tsx               |  12 +--
 components/services-mobile-carousel.tsx | 125 ++++++++++++++++++++++++
 components/services-section.tsx         |  51 +---------
 et -e                                   |  72 ++++++++++++++
 implementation_plan.md                  | 125 ++++++++++++++++++++++++
 18 files changed, 509 insertions(+), 83 deletions(-)
 create mode 100644 .clinerules/authrules.md
 create mode 100644 .clinerules/cicdrules.md
 create mode 100644 .clinerules/dockerrules.md
 create mode 100644 .clinerules/infrarules.md
 create mode 100644 .clinerules/nextjsrules.md
 create mode 100644 .clinerules/observabilityrules.md
 create mode 100644 .clinerules/testing.md
 create mode 100644 .clinerules/ui-rules.md
 create mode 100644 components/mobile-booking-bar.tsx
 create mode 100644 components/services-mobile-carousel.tsx
 create mode 100644 et -e
 create mode 100644 implementation_plan.md

diff --git a/.clinerules/authrules.md b/.clinerules/authrules.md
new file mode 100644
index 000000000..c93a25a6e
--- /dev/null
+++ b/.clinerules/authrules.md
@@ -0,0 +1,24 @@
+# Security, Auth, Headers, Validation, Rate‑Limiting, Secrets
+
+## Authentication & RBAC
+- **NextAuth (Auth.js)** mandatory
+- Sessions: pick JWT or DB, document choice
+- Route/Server Action guards via middleware; role model documented
+
+## Security Headers
+- CSP (nonce/hash) + `Referrer-Policy: strict-origin-when-cross-origin`
+- `X-Frame-Options: DENY`; `Permissions-Policy` scoped
+- COOP/COEP where SharedArrayBuffer needed
+- Cookies: HttpOnly, Secure, SameSite=Strict
+
+## Validation
+- **Zod everywhere** (server actions, routes, forms)
+- `react-hook-form` + zod resolver
+
+## Rate Limiting
+- Redis (Upstash/self-hosted)
+- Enforce on auth, forms, APIs (middleware/handlers)
+
+## Secrets Policy
+- `.env.example` is canonical list; validate at boot (`lib/env.ts` with Zod)
+- Use SOPS/Age, 1Password, or Docker secrets; never commit secrets
\ No newline at end of file
diff --git a/.clinerules/cicdrules.md b/.clinerules/cicdrules.md
new file mode 100644
index 000000000..620268983
--- /dev/null
+++ b/.clinerules/cicdrules.md
@@ -0,0 +1,17 @@
+# CI/CD, Budgets, Required Workflow
+
+## Pipeline (Gitea)
+1) Lint, Typecheck, Biome/Prettier
+2) Unit tests (Vitest) + Component (RTL)
+3) Build
+4) Migration dry‑run
+5) E2E (Playwright) on preview env
+6) Bundle size budgets enforced (fail on overage)
+7) Release tagging (semver) + notes
+
+## Required Workflow
+- Run Context7 checks for new deps, upgrades, DS changes
+- Check shadcn registry before custom components
+- Use Supabase MCP for all DB ops (incl. migrations)
+- Plan & Act for complex features; reference existing patterns
+- Clarify ambiguous requirements early; provide confidence rating
\ No newline at end of file
diff --git a/.clinerules/dockerrules.md b/.clinerules/dockerrules.md
new file mode 100644
index 000000000..f641de9fc
--- /dev/null
+++ b/.clinerules/dockerrules.md
@@ -0,0 +1,6 @@
+# Docker & Deployment
+- Multi‑stage builds; `next build` with `output: standalone`
+- Non‑root user; healthcheck endpoint (`/health`)
+- Volumes for persistence (DB/cache)
+- Pin base images to minor; scan for vulns
+- Node vs Edge runtime documented per route; default Node
\ No newline at end of file
diff --git a/.clinerules/infrarules.md b/.clinerules/infrarules.md
new file mode 100644
index 000000000..ed7ee4858
--- /dev/null
+++ b/.clinerules/infrarules.md
@@ -0,0 +1,20 @@
+# Data, MCP, Codegen, Migrations, File Uploads
+
+## MCP Requirements
+- All DB access (dev/prod/migrations/scripts) via **Supabase MCP**
+- Context7 MCP required for: new deps, framework upgrades, DS changes
+- Cache/pin Context7 outputs; PRs require justification to override
+
+## Data Layer & Codegen (choose one)
+- **Prisma**: schema as SSoT; generated client/types committed
+- **or Kysely**: typed SQL builder; generate DB types; commit outputs
+- PRs fail on type/codegen drift
+
+## Migrations
+- Source of truth in `sql/`
+- Executed via MCP; CI does migration dry‑run on ephemeral DB
+
+## File Uploads
+- S3‑compatible storage with signed URLs (no direct multipart to app)
+- MCP writes file metadata (size/mime/checksum) to DB
+- Resumable uploads (TUS) allowed when needed
\ No newline at end of file
diff --git a/.clinerules/nextjsrules.md b/.clinerules/nextjsrules.md
new file mode 100644
index 000000000..6462e9e7e
--- /dev/null
+++ b/.clinerules/nextjsrules.md
@@ -0,0 +1,36 @@
+# Cline Next.js Development Rules
+
+## Core Technology Stack
+- Next.js 14+ App Router (no Pages Router)
+- Tailwind + shadcn/ui (mandatory)
+- TypeScript only (.ts/.tsx)
+- State: Zustand (local UI) + React Query (server state)
+- DB: Postgres (Docker) **via Supabase MCP only**
+- VCS: Gitea
+- MCP: Supabase MCP (DB), Context7 MCP (patterns/updates)
+
+## Project Structure (no `src/`)
+app/  | components/ (ui/, custom/) | lib/ | hooks/ | types/ | constants/ | docker/ | sql/
+
+## Next.js Rules
+- App Router only; organize with `(group)`
+- Implement `loading.tsx` and `error.tsx` in segments
+- **Server Actions** for authenticated same‑origin mutations
+- **Route Handlers** for webhooks, cross‑origin, streaming, public APIs
+- Image component required; dynamic import heavy modules
+- Tag‑based caching + `revalidateTag` policy
+
+## Cross‑refs
+- UI & shadcn → `UI_RULES.md`
+- Security, Auth, Headers, Rate‑limit, Secrets → `SECURITY_AUTH.md`
+- Data, Migrations, File Uploads, MCP usage → `DATA_INFRA.md`
+- CI/CD, Budgets, Workflow → `CI_CD.md`
+- Testing → `TESTING.md`
+- Observability → `OBSERVABILITY.md`
+- Docker & Deployment → `DOCKER_DEPLOY.md`
+
+## Forbidden
+- Direct DB access (MCP only)
+- Bypass Context7 for upgrades/pattern changes
+- Override shadcn internals or use inline styles
+- Custom tokens outside DS; committing secrets
\ No newline at end of file
diff --git a/.clinerules/observabilityrules.md b/.clinerules/observabilityrules.md
new file mode 100644
index 000000000..642ef8be3
--- /dev/null
+++ b/.clinerules/observabilityrules.md
@@ -0,0 +1,4 @@
+# Observability
+- **OpenTelemetry**: traces/metrics/logs for Next.js, server actions, MCP DB calls
+- **Sentry**: exceptions + release tracking
+- Log redaction: PII/secrets never leave process
\ No newline at end of file
diff --git a/.clinerules/testing.md b/.clinerules/testing.md
new file mode 100644
index 000000000..f15608cc1
--- /dev/null
+++ b/.clinerules/testing.md
@@ -0,0 +1,7 @@
+# Testing Strategy
+- **Vitest + RTL** for unit/component
+- **Playwright** for e2e
+- **Testcontainers** for DB integration
+- Contract tests for MCP responses (shape/status)
+- a11y checks (eslint-plugin-jsx-a11y + automated tooling)
+- Responsive checks across breakpoints
\ No newline at end of file
diff --git a/.clinerules/ui-rules.md b/.clinerules/ui-rules.md
new file mode 100644
index 000000000..00458c15b
--- /dev/null
+++ b/.clinerules/ui-rules.md
@@ -0,0 +1,16 @@
+# UI & shadcn/ui Rules
+
+## Usage Order
+1) Check shadcn registry (verify via Context7)  
+2) Compose/extend with variants  
+3) Custom only if primitives can’t express it
+
+## Constraints
+- Do not hack internal classes or override CSS
+- Use `cva()` and `cn()` utilities
+- Follow shadcn prop/naming conventions
+
+## Variants & Composition
+```tsx
+<Button variant="destructive" size="lg" className="w-full">Delete</Button>
+<Card><CardHeader>Title</CardHeader><CardContent><Button>Go</Button></CardContent></Card>
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index dc7b9be2e..09b9d3835 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,6 +6,7 @@ import { ArtistsSection } from "@/components/artists-section"
 import { ServicesSection } from "@/components/services-section"
 import { ContactSection } from "@/components/contact-section"
 import { Footer } from "@/components/footer"
+import { MobileBookingBar } from "@/components/mobile-booking-bar"
 
 export default function HomePage() {
   return (
@@ -26,6 +27,7 @@ export default function HomePage() {
         <ContactSection />
       </div>
       <Footer />
+      <MobileBookingBar />
     </main>
   )
 }
diff --git a/components/artists-grid.tsx b/components/artists-grid.tsx
index a85f114ff..9c45f9946 100644
--- a/components/artists-grid.tsx
+++ b/components/artists-grid.tsx
@@ -124,18 +124,18 @@ export function ArtistsGrid() {
         </div>
 
         {/* Artists Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
           {filteredArtists.map((artist) => (
             <Card key={artist.id} className="group hover:shadow-xl transition-all duration-300 overflow-hidden">
-              <div className="md:flex">
+              <div className="flex flex-col h-full">
                 {/* Artist Image */}
-                <div className="relative md:w-1/3 h-64 md:h-auto overflow-hidden">
+                <div className="relative w-full h-48 sm:h-56 overflow-hidden">
                   <img
                     src={artist.image || "/placeholder.svg"}
                     alt={artist.name}
                     className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                   />
-                  <div className="absolute top-4 left-4">
+                  <div className="absolute top-3 left-3">
                     <Badge variant={artist.availability === "Available" ? "default" : "secondary"}>
                       {artist.availability}
                     </Badge>
@@ -143,43 +143,43 @@ export function ArtistsGrid() {
                 </div>
 
                 {/* Artist Info */}
-                <CardContent className="md:w-2/3 p-6">
-                  <div className="flex items-start justify-between mb-4">
+                <CardContent className="p-4 flex-grow flex flex-col">
+                  <div className="flex items-start justify-between mb-3">
                     <div>
-                      <h3 className="font-playfair text-2xl font-bold mb-1">{artist.name}</h3>
-                      <p className="text-primary font-medium">{artist.specialty}</p>
+                      <h3 className="font-playfair text-xl font-bold mb-1">{artist.name}</h3>
+                      <p className="text-primary font-medium text-sm">{artist.specialty}</p>
                     </div>
-                    <div className="flex items-center space-x-1 text-sm">
-                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                    <div className="flex items-center space-x-1 text-xs">
+                      <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                       <span className="font-medium">{artist.rating}</span>
                       <span className="text-muted-foreground">({artist.reviews})</span>
                     </div>
                   </div>
 
-                  <p className="text-muted-foreground mb-4 text-sm leading-relaxed">{artist.bio}</p>
+                  <p className="text-muted-foreground mb-3 text-xs leading-relaxed line-clamp-3">{artist.bio}</p>
 
-                  <div className="space-y-3 mb-6">
-                    <div className="flex items-center space-x-2 text-sm">
-                      <Calendar className="w-4 h-4 text-muted-foreground" />
+                  <div className="space-y-2 mb-4">
+                    <div className="flex items-center space-x-1 text-xs">
+                      <Calendar className="w-3 h-3 text-muted-foreground" />
                       <span>{artist.experience} experience</span>
                     </div>
-                    <div className="flex items-center space-x-2 text-sm">
-                      <MapPin className="w-4 h-4 text-muted-foreground" />
+                    <div className="flex items-center space-x-1 text-xs">
+                      <MapPin className="w-3 h-3 text-muted-foreground" />
                       <span>{artist.location}</span>
                     </div>
                   </div>
 
                   {/* Styles */}
-                  <div className="mb-6">
-                    <p className="text-sm font-medium mb-2">Specializes in:</p>
-                    <div className="flex flex-wrap gap-2">
+                  <div className="mb-4">
+                    <p className="text-xs font-medium mb-1">Specializes in:</p>
+                    <div className="flex flex-wrap gap-1">
                       {artist.styles.slice(0, 3).map((style) => (
-                        <Badge key={style} variant="outline" className="text-xs">
+                        <Badge key={style} variant="outline" className="text-xs px-2 py-1">
                           {style}
                         </Badge>
                       ))}
                       {artist.styles.length > 3 && (
-                        <Badge variant="outline" className="text-xs">
+                        <Badge variant="outline" className="text-xs px-2 py-1">
                           +{artist.styles.length - 3} more
                         </Badge>
                       )}
@@ -187,14 +187,14 @@ export function ArtistsGrid() {
                   </div>
 
                   {/* Action Buttons */}
-                  <div className="flex space-x-3">
-                    <Button asChild className="flex-1">
+                  <div className="flex space-x-2 mt-auto">
+                    <Button asChild className="flex-1 text-xs py-2">
                       <Link href={`/artists/${artist.id}`}>View Portfolio</Link>
                     </Button>
                     <Button
                       asChild
                       variant="outline"
-                      className="flex-1 bg-white text-black !text-black border-gray-300 hover:bg-gray-50 hover:!text-black"
+                      className="flex-1 bg-white text-black !text-black border-gray-300 hover:bg-gray-50 hover:!text-black text-xs py-2"
                     >
                       <Link href={`/artists/${artist.id}/book`}>Book Now</Link>
                     </Button>
diff --git a/components/contact-section.tsx b/components/contact-section.tsx
index a4d8da158..47d8f30e2 100644
--- a/components/contact-section.tsx
+++ b/components/contact-section.tsx
@@ -44,8 +44,8 @@ export function ContactSection() {
         }}
       />
 
-      <div className="flex min-h-screen relative z-10">
-        <div className="w-1/2 bg-black flex items-center justify-center p-12">
+      <div className="flex flex-col lg:flex-row min-h-screen relative z-10">
+        <div className="w-full lg:w-1/2 bg-black flex items-center justify-center p-8 lg:p-12">
           <div className="w-full max-w-md">
             <div className="mb-8">
               <h2 className="text-4xl font-bold text-white mb-2">Let's Talk</h2>
@@ -126,7 +126,7 @@ export function ContactSection() {
           </div>
         </div>
 
-        <div className="w-1/2 bg-gray-50 relative flex items-center justify-center">
+        <div className="w-full lg:w-1/2 bg-gray-50 relative flex items-center justify-center">
           {/* Brand asset as decorative element */}
           <div
             className="absolute inset-0 opacity-20 bg-cover bg-center bg-no-repeat"
diff --git a/components/hero-section.tsx b/components/hero-section.tsx
index 5f04a7592..e7864d955 100644
--- a/components/hero-section.tsx
+++ b/components/hero-section.tsx
@@ -59,7 +59,7 @@ export function HeroSection() {
         >
           <Button
             size="lg"
-            className="bg-gray-50 text-gray-900 hover:bg-gray-100 px-12 py-6 text-lg font-medium rounded-lg"
+            className="bg-gray-50 text-gray-900 hover:bg-gray-100 px-8 py-4 text-lg font-medium rounded-lg w-full sm:w-auto"
           >
             Book Consultation
           </Button>
diff --git a/components/mobile-booking-bar.tsx b/components/mobile-booking-bar.tsx
new file mode 100644
index 000000000..7dc273d20
--- /dev/null
+++ b/components/mobile-booking-bar.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+
+export function MobileBookingBar() {
+  return (
+    <div className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-black/95 backdrop-blur-md border-t border-white/10 pb-safe">
+      <div className="px-4 py-3">
+        <Button
+          asChild
+          className="w-full bg-white text-black hover:bg-gray-100 !text-black py-4 text-lg font-semibold tracking-[0.05em] uppercase shadow-xl"
+        >
+          <Link href="/book">Book Now</Link>
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/navigation.tsx b/components/navigation.tsx
index e80fff51a..b83bf1026 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -45,7 +45,7 @@ export function Navigation() {
       className={`fixed top-0 left-0 right-0 z-50 transition-all duration-700 ease-out ${
         isScrolled
           ? "bg-black/95 backdrop-blur-md shadow-lg border-b border-white/10 opacity-100"
-          : "bg-transparent opacity-0 pointer-events-none"
+          : "bg-transparent lg:opacity-0 lg:pointer-events-none opacity-100 bg-black/80 backdrop-blur-md"
       }`}
     >
       <div className="max-w-screen-2xl mx-auto px-6 lg:px-12">
@@ -83,7 +83,7 @@ export function Navigation() {
           </div>
 
           <button
-            className="lg:hidden p-3 rounded-lg transition-all duration-300 text-white hover:bg-white/10"
+            className="lg:hidden p-4 rounded-lg transition-all duration-300 text-white hover:bg-white/10"
             onClick={() => setIsOpen(!isOpen)}
             aria-label="Toggle menu"
           >
@@ -93,12 +93,12 @@ export function Navigation() {
 
         {isOpen && (
           <div className="lg:hidden bg-black/98 backdrop-blur-md border-t border-white/10">
-            <div className="px-6 py-8 space-y-6">
+            <div className="px-6 py-8 space-y-5">
               {navItems.map((item) => (
-                <Link
+                  <Link
                   key={item.href}
                   href={item.href}
-                  className={`block text-lg font-semibold tracking-[0.1em] uppercase transition-all duration-300 ${
+                  className={`px-4 py-4 block text-lg font-semibold tracking-[0.1em] uppercase transition-all duration-300 ${
                     activeSection === item.id
                       ? "text-white border-l-4 border-white pl-4"
                       : "text-white/70 hover:text-white hover:pl-2"
@@ -110,7 +110,7 @@ export function Navigation() {
               ))}
               <Button
                 asChild
-                className="w-full bg-white hover:bg-gray-100 text-black !text-black py-4 text-lg font-semibold tracking-[0.05em] uppercase shadow-xl mt-8"
+                className="w-full bg-white hover:bg-gray-100 text-black !text-black py-5 text-lg font-semibold tracking-[0.05em] uppercase shadow-xl mt-8"
               >
                 <Link href="/book" onClick={() => setIsOpen(false)}>
                   Book Now
diff --git a/components/services-mobile-carousel.tsx b/components/services-mobile-carousel.tsx
new file mode 100644
index 000000000..f70aa6d58
--- /dev/null
+++ b/components/services-mobile-carousel.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
+import Link from "next/link"
+
+const services = [
+  {
+    title: "Black & Grey Realism",
+    description: "Photorealistic tattoos with incredible depth and detail using black and grey shading techniques.",
+    features: ["Lifelike portraits", "Detailed shading", "3D effects"],
+    price: "Starting at $250",
+    bgColor: "bg-gray-100",
+  },
+  {
+    title: "Cover-ups & Blackout",
+    description: "Transform old tattoos into stunning new pieces with expert cover-up techniques or bold blackout designs.",
+    features: ["Free consultation", "Creative solutions", "Complete coverage"],
+    price: "Starting at $300",
+    bgColor: "bg-black",
+  },
+  {
+    title: "Fine Line & Micro Realism",
+    description: "Delicate, precise linework and tiny realistic designs that showcase incredible detail.",
+    features: ["Single needle work", "Intricate details", "Minimalist aesthetic"],
+    price: "Starting at $150",
+    bgColor: "bg-purple-100",
+  },
+  {
+    title: "Traditional & Neo-Traditional",
+    description: "Bold American traditional and neo-traditional styles with vibrant colors and strong lines.",
+    features: ["Classic designs", "Bold color palettes", "Timeless appeal"],
+    price: "Starting at $200",
+    bgColor: "bg-red-100",
+  },
+  {
+    title: "Anime & Watercolor",
+    description: "Vibrant anime characters and painterly watercolor effects that bring art to life on skin.",
+    features: ["Character designs", "Soft color blends", "Artistic techniques"],
+    price: "Starting at $250",
+    bgColor: "bg-blue-100",
+  },
+]
+
+export function ServicesMobileCarousel() {
+  return (
+    <div className="lg:hidden bg-black text-white py-12">
+      <div className="px-4 mb-8">
+        <div className="mb-6">
+          <span className="text-sm font-medium tracking-widest text-white/60 uppercase">Our Services</span>
+        </div>
+        <h3 className="text-4xl font-bold tracking-tight text-balance">Choose Your Style</h3>
+      </div>
+
+      <Carousel
+        opts={{
+          align: "start",
+          loop: true,
+        }}
+        className="w-full"
+      >
+        <CarouselContent className="-ml-2 md:-ml-4">
+          {services.map((service, index) => (
+            <CarouselItem key={index} className="pl-2 md:pl-4 basis-[85%] sm:basis-[75%]">
+              <div className="min-h-[70vh] flex items-center justify-center p-6 relative">
+                <div className="max-w-sm relative">
+                  <div className="mb-6">
+                    <span className="text-sm font-medium tracking-widest text-white/60 uppercase">
+                      Service {String(index + 1).padStart(2, "0")}
+                    </span>
+                  </div>
+
+                  <h3 className="text-3xl font-bold tracking-tight mb-6 text-balance">
+                    {service.title.split(" ").map((word, i) => (
+                      <span key={i} className="block">
+                        {word}
+                      </span>
+                    ))}
+                  </h3>
+
+                  <div className="space-y-6 mb-8">
+                    <p className="text-lg text-white/80 leading-relaxed">{service.description}</p>
+
+                    <div className="space-y-2">
+                      {service.features.map((feature, idx) => (
+                        <p key={idx} className="text-white/70 flex items-center">
+                          <span className="w-1 h-1 bg-white/40 rounded-full mr-3"></span>
+                          {feature}
+                        </p>
+                      ))}
+                    </div>
+
+                    <p className="text-2xl font-bold text-white">{service.price}</p>
+                  </div>
+
+                  <Button
+                    asChild
+                    className="bg-white text-black hover:bg-white/90 !text-black px-8 py-4 text-lg font-medium tracking-wide transition-all duration-300 hover:scale-105"
+                  >
+                    <Link href="/book">BOOK NOW</Link>
+                  </Button>
+
+                  <div className="mt-8">
+                    <div className="relative">
+                      <img
+                        src={`/abstract-geometric-shapes.png?height=250&width=300&query=${service.title.toLowerCase()} tattoo example`}
+                        alt={service.title}
+                        className="w-full max-w-xs h-auto object-cover rounded-lg shadow-2xl"
+                      />
+                      <div className="absolute -bottom-2 -right-2 w-12 h-12 bg-white/5 rounded-lg"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <div className="flex justify-center mt-8 space-x-4">
+          <CarouselPrevious className="relative translate-y-0 left-0 bg-white/10 border-white/20 text-white hover:bg-white/20" />
+          <CarouselNext className="relative translate-y-0 right-0 bg-white/10 border-white/20 text-white hover:bg-white/20" />
+        </div>
+      </Carousel>
+    </div>
+  )
+}
diff --git a/components/services-section.tsx b/components/services-section.tsx
index bbfbdfca8..10e07ef51 100644
--- a/components/services-section.tsx
+++ b/components/services-section.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react"
 import { Button } from "@/components/ui/button"
 import Link from "next/link"
+import { ServicesMobileCarousel } from "@/components/services-mobile-carousel"
 
 const services = [
   {
@@ -200,55 +201,7 @@ export function ServicesSection() {
           </div>
         </div>
 
-        <div className="lg:hidden">
-          {services.map((service, index) => (
-            <div
-              key={index}
-              data-index={index}
-              className={`min-h-screen flex items-center justify-center p-8 transition-all duration-1000 ${
-                visibleItems.includes(index) ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
-              }`}
-              style={{ transitionDelay: `${index * 200}ms` }}
-            >
-              <div className="max-w-lg">
-                <div className="mb-6">
-                  <span className="text-sm font-medium tracking-widest text-white/60 uppercase">
-                    Service {String(index + 1).padStart(2, "0")}
-                  </span>
-                </div>
-
-                <h3 className="text-4xl lg:text-6xl font-bold tracking-tight mb-6 text-balance">
-                  {service.title.split(" ").map((word, i) => (
-                    <span key={i} className="block">
-                      {word}
-                    </span>
-                  ))}
-                </h3>
-
-                <div className="space-y-6 mb-8">
-                  <p className="text-lg text-white/80 leading-relaxed">{service.description}</p>
-
-                  <div className="space-y-2">
-                    {service.features.map((feature, idx) => (
-                      <p key={idx} className="text-white/70">
-                        • {feature}
-                      </p>
-                    ))}
-                  </div>
-
-                  <p className="text-2xl font-bold text-white">{service.price}</p>
-                </div>
-
-                <Button
-                  asChild
-                  className="bg-white text-black hover:bg-white/90 !text-black px-8 py-4 text-lg font-medium tracking-wide"
-                >
-                  <Link href="/book">BOOK NOW</Link>
-                </Button>
-              </div>
-            </div>
-          ))}
-        </div>
+        <ServicesMobileCarousel />
       </div>
     </section>
   )
diff --git a/et -e b/et -e
new file mode 100644
index 000000000..4f5ed29be
--- /dev/null
+++ b/et -e	
@@ -0,0 +1,72 @@
+───────┬─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+       │ STDIN
+───────┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+   1   │ --- FILE: app/page.tsx ---
+   2   │ import { Navigation } from "@/components/navigation"
+   3   │ import { ScrollProgress } from "@/components/scroll-progress"
+   4   │ import { ScrollToSection } from "@/components/scroll-to-section"
+   5   │ import { HeroSection } from "@/components/hero-section"
+   6   │ import { ArtistsSection } from "@/components/artists-section"
+   7   │ import { ServicesSection } from "@/components/services-section"
+   8   │ import { ContactSection } from "@/components/contact-section"
+   9   │ import { Footer } from "@/components/footer"
+  10   │ 
+  11   │ export default function HomePage() {
+  12   │   return (
+  13   │     <main className="min-h-screen">
+  14   │       <ScrollProgress />
+  15   │       <ScrollToSection />
+  16   │       <Navigation />
+  17   │       <div id="home">
+  18   │         <HeroSection />
+  19   │       </div>
+  20   │       <div id="artists">
+  21   │         <ArtistsSection />
+  22   │       </div>
+  23   │       <div id="services">
+  24   │         <ServicesSection />
+  25   │       </div>
+  26   │       <div id="contact">
+  27   │         <ContactSection />
+  28   │       </div>
+  29   │       <Footer />
+  30   │     </main>
+  31   │   )
+  32   │ }
+  33   │ 
+  34   │ --- FILE: app/layout.tsx ---
+  35   │ import type React from "react"
+  36   │ import type { Metadata } from "next"
+  37   │ import { Playfair_Display, Source_Sans_3 } from "next/font/google"
+  38   │ import "./globals.css"
+  39   │ import ClientLayout from "./ClientLayout"
+  40   │ 
+  41   │ const playfairDisplay = Playfair_Display({
+  42   │   subsets: ["latin"],
+  43   │   variable: "--font-playfair",
+  44   │   display: "swap",
+  45   │ })
+  46   │ 
+  47   │ const sourceSans = Source_Sans_3({
+  48   │   subsets: ["latin"],
+  49   │   variable: "--font-source-sans",
+  50   │   display: "swap",
+  51   │ })
+  52   │ 
+  53   │ export const metadata: Metadata = {
+  54   │   title: "United Tattoo - Professional Tattoo Studio",
+  55   │   description: "Book appointments with our talented artists and explore stunning tattoo portfolios at United Tattoo.",
+  56   │   generator: "v0.app",
+  57   │ }
+  58   │ 
+  59   │ export default function RootLayout({
+  60   │   children,
+  61   │ }: Readonly<{
+  62   │   children: React.ReactNode
+  63   │ }>) {
+  64   │   return (
+  65   │     <html lang="en" className={`${playfairDisplay.variable} ${sourceSans.variable}`}>
+  66   │       <body className="font-sans antialiased">
+  67   │         <ClientLayout>{children}</ClientLayout>
+  68   │       </body>
+  69   
\ No newline at end of file
diff --git a/implementation_plan.md b/implementation_plan.md
new file mode 100644
index 000000000..fc9a6b996
--- /dev/null
+++ b/implementation_plan.md
@@ -0,0 +1,125 @@
+# Implementation Plan
+
+[Overview]
+Improve the mobile experience of the homepage while preserving the current desktop appearance, focusing on easier navigation and a beautiful, performant presentation.
+
+The current homepage uses large full-screen sections, a parallax hero, and multi-column artist/service layouts that look strong on desktop. On small screens, some patterns (e.g., full-screen stacked service sections, two-column contact layout, and a top nav that hides until scrolling) reduce wayfinding and increase friction. This plan adds a mobile-first layer: a persistent bottom “Book Now” bar, a swipeable carousel for Services, stacked Contact content, and mobile visibility improvements to the top navigation—all gated behind responsive Tailwind classes (lg: variants) to ensure desktop remains unchanged.
+
+We will leverage existing shadcn/ui primitives, the shipped Embla Carousel, and Tailwind responsive utilities. No new dependencies are required. Changes are scoped to the homepage and components it renders. All animations and transforms are limited on mobile to maintain performance and reduce jank.
+
+[Types]  
+Introduce lightweight UI types to improve clarity for mobile-only components.
+
+- export type SectionId = "home" | "artists" | "services" | "contact"
+- export interface Service {
+  title: string
+  description: string
+  features: string[]
+  price: string
+  bgColor?: string
+  image?: string
+}
+- export interface MobileBookingBarProps {
+  label?: string
+  href: string
+  show?: boolean
+}
+
+Notes:
+- The `services` data already lives inline in components/services-section.tsx; we’ll co-locate the `Service` interface in the new mobile carousel component or in that file to keep cohesion.
+- SectionId is useful for navigation/active state logic if needed in future refactors.
+- Props are optional and defaulted to keep components ergonomic.
+
+[Files]
+Add mobile-only components and apply responsive modifications to existing files. No deletions; all desktop code paths remain intact.
+
+New files:
+- components/mobile-booking-bar.tsx
+  - Purpose: Persistent bottom CTA bar (only on small screens) linking to /book. Uses safe-area insets and elevated z-index. Hidden on lg and up.
+- components/services-mobile-carousel.tsx
+  - Purpose: Mobile-only swipeable carousel rendering the same services content in a compact, card-first format using shadcn/ui Carousel (Embla).
+  - Accepts `services: Service[]` or imports from the same module if kept inline for a single source of truth.
+
+Existing files to modify:
+- app/page.tsx
+  - Add `<MobileBookingBar />` just after `<Navigation />` so it’s globally available on the homepage. Guard with `lg:hidden`.
+- components/navigation.tsx
+  - Ensure the top nav is visible and interactive at the top of the page on mobile (currently hidden until scroll due to `opacity-0 pointer-events-none`).
+  - Add small-screen behavior: always visible container on mobile with subtle transparent backdrop; keep existing behavior on desktop.
+- components/services-section.tsx
+  - Replace current mobile `lg:hidden` full-screen stack with the new mobile carousel.
+  - Keep desktop split composition and scrolling experience unchanged (guard with `lg:`).
+- components/contact-section.tsx
+  - Convert the fixed `w-1/2` two-column layout into a stacked mobile layout (`flex-col`, `w-full lg:w-1/2`) while preserving the current desktop (`lg:flex-row`).
+  - Keep brand background and parallax but dampen/limit on mobile to reduce jank.
+- styles/globals.css (no structural changes required)
+  - Optional: add CSS note for safe-area usage reference; final implementation will rely on inline styles/Tailwind utilities.
+
+Files to delete or move:
+- None.
+
+Configuration updates:
+- None required. Tailwind and shadcn/ui already configured. `embla-carousel-react` is present.
+
+[Functions]
+Add mobile-only components and adjust existing components with mobile-guarded branches. All changes are responsive-only to avoid altering desktop.
+
+New functions/components:
+- components/mobile-booking-bar.tsx
+  - export function MobileBookingBar(props: MobileBookingBarProps): JSX.Element
+  - Renders fixed bottom bar (safe-area aware) with a prominent “Book Now” button linking to /book. `className` uses `lg:hidden` to ensure desktop is unaffected.
+- components/services-mobile-carousel.tsx
+  - export function ServicesMobileCarousel({ services }: { services: Service[] }): JSX.Element
+  - Uses shadcn/ui Carousel primitives: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselNext`, `CarouselPrevious`.
+  - Card layout: service title, short copy, features, price, and a “Book Now” button. Optimized tap targets.
+
+Modified functions/components:
+- app/page.tsx (default export HomePage)
+  - Insert `<MobileBookingBar />` after `<Navigation />`.
+- components/navigation.tsx (export function Navigation)
+  - Add `isMobile` calculation (e.g., via matchMedia or an existing `use-mobile` hook) and adjust the className logic:
+    - On mobile: show nav at top by default with interactive controls (remove `pointer-events-none`/`opacity-0` at top of page).
+    - On desktop: preserve current behavior and styles.
+- components/services-section.tsx (export function ServicesSection)
+  - Import and render `<ServicesMobileCarousel />` in a `lg:hidden` block.
+  - Keep existing left menu + right scroller solely in `lg:` scope.
+- components/contact-section.tsx (export function ContactSection)
+  - Wrap main two columns with `flex-col lg:flex-row`; change each child to `w-full lg:w-1/2`.
+  - Ensure spacing/padding on mobile is comfortable; no changes to desktop classes.
+
+Removed functions/components:
+- None. We only replace the mobile branch of Services with a carousel but keep the desktop branch untouched.
+
+[Classes]
+No class-based components. All are function components.
+- New components use React function components with TypeScript props.
+- No inheritance changes.
+
+[Dependencies]
+No new dependencies.
+- `embla-carousel-react` already present and shadcn/ui `components/ui/carousel.tsx` is in the repo.
+- No package.json updates required.
+
+[Testing]
+Targeted mobile validation across breakpoints without impacting desktop.
+- Manual QA on common device widths (e.g., 360, 390, 414, 768).
+- Verify:
+  - Navigation is visible at top on mobile and toggles the drawer correctly.
+  - Persistent bottom “Book Now” bar is present on the homepage and does not overlap footer content (safe-area works on iOS).
+  - Services are swipeable; arrows and swipe gestures function; CTAs navigate to /book.
+  - Contact section stacks vertically and fields remain accessible.
+  - Desktop (≥ lg) remains pixel-identical to current implementation.
+- Optional: lightweight React Testing Library tests for rendering/mobile-only presence toggles.
+- Optional: Playwright e2e smoke for scroll, nav toggle, carousel swipe on a preview environment.
+
+[Implementation Order]
+Implement mobile-only components first, then integrate into the homepage and adjust existing sections, verifying desktop remains unchanged after each step.
+
+1) Create components/mobile-booking-bar.tsx (persistent bottom CTA; `lg:hidden`; safe-area support).
+2) Create components/services-mobile-carousel.tsx (Embla-based; card layout; `lg:hidden` wrapper usage).
+3) Integrate MobileBookingBar into app/page.tsx (just after Navigation).
+4) Modify components/services-section.tsx to use the new mobile carousel and keep the existing desktop implementation behind `lg:` guards. Remove/replace the current mobile `lg:hidden` full-screen stack.
+5) Adjust components/contact-section.tsx to stack on mobile (`flex-col`, `w-full lg:w-1/2`) and retain current desktop layout.
+6) Update components/navigation.tsx to ensure the nav is visible and interactive at top on mobile (leave desktop behavior intact).
+7) QA: Verify mobile behaviors across breakpoints, then confirm desktop visual/behavioral parity.
+8) Polish: Confirm safe-area, hit-target sizes, and accessible labels; check scroll-to-section offsets still correct on mobile.