# Top to Toe Beauty - Website Documentation ## Project Overview Top to Toe Beauty is a professional hair and beauty salon website located in Christchurch, New Zealand. The website is built with Next.js 15 and uses Sanity CMS for content management. **Website URL:** https://www.toptotoebeauty.co.nz/ **Business Email:** info@toptotoe.co.nz **Owner Email:** info@toptotoe.co.nz ## Tech Stack ### Core Framework - **Next.js:** 15.5.9 (App Router) - **React:** 19.1.0 - **TypeScript:** 5.x - **Node.js:** 20.x ### Content Management - **Sanity CMS:** 4.15.0 - **Sanity Client:** 7.12.1 - **GROQ:** Query language for Sanity ### Styling - **Tailwind CSS:** 4.x - **Styled Components:** 6.1.19 - **Custom Fonts:** Geist Sans, Geist Mono, Tangerine, Newsreader ### Email Service - **Resend:** 6.6.0 - **From Email:** noreply@toptotoebeauty.co.nz (verified domain) - **Reply-To:** info@toptotoe.co.nz ### Additional Libraries - **Framer Motion:** 12.23.22 (animations) - **Portable Text:** 6.0.2 (rich text rendering) - **React Fast Marquee:** 1.6.5 ## Project Structure ``` top-to-toe/ ├── app/ # Next.js App Router │ ├── (main)/ # Main routes │ │ ├── about/ │ │ ├── contact/ │ │ ├── pricing/ │ │ └── services/[slug]/ │ ├── (studio)/ # Sanity Studio routes │ │ └── studio/[[...index]]/ │ ├── api/ # API routes │ │ ├── offers/ │ │ └── send-thank-you-email/ │ ├── book/ │ ├── cancellation/ │ ├── contact/ │ ├── faq/ │ ├── pricing/ │ ├── privacy/ │ ├── services/ │ ├── terms/ │ ├── thank-you/ │ ├── layout.tsx # Root layout │ ├── page.tsx # Homepage │ └── globals.css # Global styles ├── components/ # React components │ ├── core/ # Core components (Navbar, Footer, etc.) │ ├── homepage/ # Homepage sections │ ├── services/ # Service page components │ ├── contact/ # Contact form │ ├── about/ │ ├── pricing/ │ ├── faq/ │ ├── privacy/ │ └── terms/ ├── lib/ # Utility functions │ ├── sanity.ts # Sanity client configuration │ └── queries.ts # GROQ queries ├── sanity/ # Sanity CMS configuration │ └── schemaTypes/ # Sanity schema definitions ├── types/ # TypeScript type definitions ├── public/ # Static assets └── data/ # JSON data files (legacy) ## Key Features ### Content Management - **Sanity CMS Integration:** All content is managed through Sanity Studio - **Singleton Documents:** Page sections use singleton document pattern - **SEO Management:** Per-page SEO settings in Sanity - **Image Optimization:** Sanity CDN for optimized images ### Pages - **Homepage:** Hero, About, Services Grid, Why Us, Featured Services, Gallery, Testimonials, Offers, FAQ, Contact Form, CTA - **Services:** Dynamic service pages with detailed information - **Static Pages:** About, Contact, Pricing, FAQ, Terms, Privacy, Cancellation Policy - **Sanity Studio:** Available at `/studio` ### Email Functionality - **Contact Form:** Sends notification to owner and thank you email to customer - **Resend Integration:** Uses verified domain (toptotoebeauty.co.nz) - **Email Templates:** HTML email templates with responsive design - **Reply-To Configuration:** Replies go to business email (info@toptotoe.co.nz) ### SEO Implementation - **Per-Page SEO:** Each page has dedicated SEO schema in Sanity - **Structured Data:** JSON-LD structured data support - **Meta Tags:** Open Graph, Twitter Cards, canonical URLs - **Site-Wide SEO:** Global SEO settings in Sanity ## Sanity Configuration ### Project Details - **Project ID:** Set via `NEXT_PUBLIC_SANITY_PROJECT_ID` environment variable - **Dataset:** `production` (default) - **Studio Path:** `/studio` - **API Version:** 2024-01-01 ### Schema Types (36+) - Service documents - Homepage sections (Hero, About, WhyUs, Gallery, Testimonials, FAQ, Contact, CTA) - Page schemas (About, Contact, Pricing, FAQ, Terms, Privacy, Cancellation, Services) - SEO schemas for each page - Site settings (Header, Footer, SEO Settings) - Special Offers - Services Grid - Featured Services ### Query Pattern - Uses GROQ query language - Server-side data fetching with `sanityFetch` helper - CDN disabled for fresh data updates - Cache-busting in development mode ## Environment Variables Required environment variables: - `NEXT_PUBLIC_SANITY_PROJECT_ID` - Sanity project ID - `NEXT_PUBLIC_SANITY_DATASET` - Sanity dataset (default: production) - `RESEND_API` - Resend API key - `RESEND_FROM_EMAIL` - Verified domain email (e.g., "Top to Toe ") ## Styling & Design ### Color Palette - **Pink:** #F5BABB - **Green:** #568F87 - **Dark Green:** #064232 - **Background:** #FFF5F2 ### Typography - **Headings:** Tangerine font - **Body:** Newsreader font - **Code/Mono:** Geist Mono - **Sans:** Geist Sans ### Responsive Design - Mobile-first approach - Breakpoints: sm, md, lg, xl - Mobile CTA component for sticky booking/call buttons ## API Routes ### `/api/send-thank-you-email` - **Method:** POST - **Purpose:** Handles contact form submissions - **Functionality:** - Sends thank you email to customer - Sends notification email to owner - Uses Resend API with verified domain - Fetches contact info from Sanity ### `/api/offers` - **Method:** GET - **Purpose:** Returns special offers data ## Component Architecture ### Server Components - Most components are server components - Data fetching happens at the component level - Parallel data fetching with `Promise.all` ### Client Components - Form components (Contact Form) - Interactive components (Navbar Client, Mobile CTA) - Animation components (Framer Motion) ## Data Flow 1. Content created/updated in Sanity Studio 2. GROQ queries fetch data from Sanity 3. Server components render pages with data 4. Images optimized via Sanity CDN 5. Forms submit to API routes 6. API routes send emails via Resend ## Key Files - `app/layout.tsx` - Root layout with fonts and SEO - `app/page.tsx` - Homepage with all sections - `lib/sanity.ts` - Sanity client configuration - `lib/queries.ts` - All GROQ queries - `sanity.config.ts` - Sanity Studio configuration - `components/core/conditional-layout.tsx` - Layout wrapper - `app/api/send-thank-you-email/route.ts` - Email API route ## Development ### Commands - `npm run dev` - Start development server - `npm run build` - Build for production - `npm run start` - Start production server - `npm run lint` - Run ESLint ### Development Notes - CDN disabled for immediate content updates - Cache-busting in development mode - Force-dynamic rendering for fresh data - Debug logging in development environment ## Deployment - **Platform:** Vercel (recommended) - **Build Command:** `npm run build` - **Output Directory:** `.next` - **Environment Variables:** Must be set in deployment platform ## Contact Information - **Business Email:** info@toptotoe.co.nz - **Phone:** Fetched from Sanity CMS - **Address:** 43 Shortland Street, Christchurch, New Zealand - **Business Hours:** Mon-Fri: 9:00 AM - 7:00 PM, Sat: 9:00 AM - 5:00 PM ## Services Offered - Threading - Waxing - Facial Treatments - Semi-Permanent Makeup - Face Bleach ## Notes - All content is managed through Sanity CMS - Email functionality requires verified domain in Resend - Images are served through Sanity CDN - SEO settings are per-page in Sanity - Forms redirect to thank-you page on success