Landing Page Prompt Template

I want to build a single-page landing page for a local barbershop.

Tech stack: HTML, CSS, and JavaScript only. No frameworks, no dependencies.

File structure: Single index.html, style.css, and script.js.

Design direction:
- Classy, premium feel. Dark charcoal, gold accents, off-white backgrounds
- Google Fonts: serif for headings, clean sans-serif for body
- Come up with a business name and tagline that fits the vibe

Images: I've got images in an assets/ folder. Use those instead of placeholders. Match filenames to the sections they belong to.

Page sections (in this exact order):
Navigation, Hero, Testimonials, Services, About, How It Works, CTA, Contact, Footer. Keep this order.

Now here's what each section needs:

1. Navigation
    Logo on left, menu links (Home, Testimonials, Services, About, Contact),
    phone number, social icons (Instagram, Facebook, X) with inline SVGs,
    dark/light mode toggle. Mobile: hamburger menu that slides in from right.

2. Hero Section
    Headline, subtitle (2 lines about the shop), CTA button on the left.
    Image on the right. Side by side on desktop, stacked on mobile.
    Image: assets/hero.jpg

3. Testimonials
    6 client review cards (3x2 desktop, 3 on mobile single column).
    Each card: quote, client name, star rating, avatar.

4. Services
    6 service cards in a 3x2 grid (stacked on mobile).
    Services: Classic Cut $35, Hot Towel Shave $30, Beard Trim & Shape $25,
    The Full Throne $75, Kids Cut $20, Skin Fade $40.
    Each card: image, title, price, short description.
    Images: assets/services-classic-cut.jpg, services-hot-towel.jpg,
    services-beard-trim.jpg, services-full-throne.jpg,
    services-kids-cut.jpg, services-skin-fade.jpg

5. About Section
    Photo on left, text on right. Owner name, short bio,
    years of experience highlight. Image: assets/about.jpg

6. Process Section
    "How It Works", 3 steps in a row (stacked on mobile).
    Each step: number, image, title, description.
    Images: assets/how-it-works-1.jpg, how-it-works-2.jpg, how-it-works-3.jpg

7. CTA Section


8. Contact Form
    Name, email, phone, message fields. On submit: show success message
    for 5 seconds, clear form. No backend, purely frontend.

9. Footer


Requirements:
- Mobile responsive (320px, 768px, 1024px breakpoints)
- Dark/light mode toggle with localStorage persistence
- Smooth scroll for nav links
- Scroll-triggered fade-in animations
- Hover effects on cards and buttons
- CSS variables for theming
- Semantic HTML, accessible

Don't build anything yet. Don't explore any files or folders.
Just use exactly what I've told you. Enter plan mode first.
Present the full implementation plan including the business name,
tagline, exact color hex values, font choices, and section-by-section
breakdown. I'll review and approve before you write any code.