# United Tattoo — Official Website (Next.js + ShadCN UI)

Hi, I’m Nicholai. I built this site for my friend Christy (aka Ink Mama) and the United Tattoo crew in Fountain, CO. The goal was simple: give the studio a site that actually reflects the art, the people, and the experience — not the stiff, generic stuff you usually see. This is also a thank you for everything Christy has done for Amari (my girlfriend and soulmate), who was her apprentice. So yeah, this is personal — and it shows.

This repo powers the official United Tattoo website, built with:
- Next.js App Router
- TypeScript
- Tailwind CSS
- ShadCN UI components (used across all pages)
- Lenis (smooth scroll)
- Lucide (icons)

Live dev server: http://localhost:3000


## Project Structure

- app/
  - page.tsx — homepage (Hero, Artists, Services, Contact sections)
  - aftercare/page.tsx — aftercare instructions (ShadCN-driven)
  - deposit/page.tsx — deposit policy + payment options (Afterpay, Stripe)
  - terms/page.tsx — terms of service
  - privacy/page.tsx — privacy policy
  - artists/ — artists listing + dynamic routes for profiles (coming from data)
  - book/page.tsx — booking flow
  - specials/page.tsx — promotions (monthly specials, VIP list)
  - contact/page.tsx — contact
  - gift-cards/page.tsx — gift card info

- components/
  - hero-section.tsx, artists-section.tsx, services-section.tsx, contact-section.tsx
  - aftercare-page.tsx, deposit-page.tsx, terms-page.tsx, privacy-page.tsx
  - booking-form.tsx — multi-step form using ShadCN components
  - footer.tsx — contains direct links to Aftercare, Deposit Policy, Terms, and Privacy
  - ui/ — ShadCN UI primitives

- data/
  - artists.ts — single source of truth for artist metadata and images used across pages

- public/
  - united-logo-*.png/jpg, artists/, and other stable assets


## Content & Assets

- All the “real” content, bios, and images are now wired in (not seed placeholders).
- Artist portraits and tattoo samples live under public/artists/.
- Pages like Aftercare, Deposit, Terms, and Privacy use consistent styling patterned after the homepage and portfolio pages — powered by ShadCN components.

If you need to re-copy images from the temp folder into public (on your machine), there’s a helper script:
- ./copy-artist-images.sh
Note: This script expects the temp directory structure to exist locally; it silently skips if a source is missing.


## Getting Started (Local Dev)

- Install deps:
  - npm install

- Run dev server:
  - npm run dev
  - Open http://localhost:3000

- Lint (optional):
  - npm run lint

Build:
- npm run build
- npm start


## Continuous Integration (CI)

This repo includes a CI workflow that enforces linting, type safety, unit tests, build/preview, and bundle size budgets.

- Workflow file: `.gitea/workflows/ci.yaml`
- Triggers: Push and PR against `main`/`master`
- Node: 20.x with `npm ci`

Stages
- Lint: `npm run ci:lint` (ESLint)
- Typecheck: `npm run ci:typecheck` (TypeScript noEmit)
- Unit tests: `npm run ci:test` (Vitest with coverage)
- Build: `npm run ci:build` (OpenNext build to `.vercel/output/static`)
- Preview smoke: start OpenNext preview briefly to ensure no immediate crash
- Budgets: `npm run ci:budgets` (analyzes `.vercel/output/static`)

Bundle Size Budgets
- Defaults are defined in `package.json` under the `budgets` key:
  - `TOTAL_STATIC_MAX_BYTES`: 3,000,000 (≈3 MB)
  - `MAX_ASSET_BYTES`: 1,500,000 (≈1.5 MB)
- Override via environment variables in CI:
  - `TOTAL_STATIC_MAX_BYTES`
  - `MAX_ASSET_BYTES`

Artifacts
- A budgets report is written to `.vercel/output/static-budgets-report.txt` and uploaded as a CI artifact.

Migration Dry-Run (D1)
- The workflow attempts a best‑effort local dry‑run: `wrangler d1 execute united-tattoo --local --file=./sql/schema.sql`.
- If local bindings are unavailable in CI, the step is skipped with a note; wire it up later when CI bindings are configured.

Rollback Strategy
- This story does not deploy. To disable CI temporarily, remove or rename the workflow file or adjust failing stages. For full rollback strategy see `docs/prd/rollback-strategy.md`.

## Docker

This repo is docker-ready. We build a standalone Next.js app for a smaller runtime image.

Build image:
- docker build -t united-tattoo:latest .

Run container (port 3000):
- docker run --rm -p 3000:3000 -e PORT=3000 united-tattoo:latest
- Open http://localhost:3000

Notes:
- next.config.mjs sets output: "standalone"
- The Dockerfile copies .next/standalone + .next/static and runs the server with HOSTNAME=0.0.0.0


## Pages Overview

- Home — Bold, high-contrast, split imagery, parallax accents. This sets the identity.
- Artists — Grid and profile surfaces wired to data/artists.ts. Each artist shows image, specialties, and sample work.
- Aftercare — Two flows: General Aftercare and Transparent Bandage Aftercare (accurate, readable, ShadCN cards + alerts).
- Deposit — Clear policy, payment options, and compliance notes (LW2 Investments, LLC oversight).
- Terms & Privacy — Straightforward, legally sound, human-readable. Both accessible from the footer.
- Booking — Multi-step form with ShadCN components and validation-friendly structure.
- Specials — Marketing surface for time-bound promotions and membership-like advantages.


## Design Language

- ShadCN components everywhere possible
- Monochrome foundation with high contrast and cinematic image splits
- Type scales + spacing match the homepage/portfolio feeling
- Lucide icons for affordances


## Tech Notes

- TypeScript errors are ignored during build in CI to allow non-blocking content/design iteration (next.config.mjs).
- Images are unoptimized (no Next image loader), served statically; change if you plan to put this behind a CDN with transforms.
- Smooth scroll and parallax-style offsets are kept subtle to let the work shine.


## Deployment

- Standard Next.js deploys work (Vercel, Node server, Docker)
- For self-hosting or VPS, use the Dockerfile in the repo
- The site runs on port 3000 by default


## Why This Exists

Because Christy deserved a proper site — and because the previous one was, bluntly, not it. United Tattoo is more than a shop. It’s a community with real people and real art. This site tries to honor that.

— Nicholai