Prompt: Make a website for steve's tech repair shop.
Generated at step: 200
Timestamp: 2025-08-28T09:36:12.779754
============================================================

Here’s a complete, responsive HTML/CSS/JS starter kit for **Steve's Tech Repair Shop** with sections for hero, services, reviews, pricing, contact, and footer.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Steve's Tech Repair | Fast, Honest, Affordable</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"/>
  <style>
    :root {
      --primary: #e57373;
      --dark: #1a1a1a;
      --light: #f9f9fb;
      --accent: #3d5afe;
      --gray: #6b7280;
      --success: #10b981;
      --danger: #ef4444;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Poppins', sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; }
    
    .btn {
      display: inline-block;
      background: linear-gradient(135deg, var(--primary) 0%, #c62828 100%);
      color: white;
      padding: 12px 24px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 600;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(229, 115, 115, 0.3);
    }
    .btn:hover { transform: translateY(-2px); }

    /* Header & Navigation */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
      transition: background 0.3s ease, boxShadow 0.3s ease;
    }
    header.scrolled { background: rgba(255,255,255,0.98); }
    
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 5%;
      max-width: 1200px;
      margin: auto;
    }
    .logo { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; }
    .nav-links {
      display: flex;
      gap: 2rem;
      align-items: center;
    }
    .nav-link { color: var(--dark); font-weight: 500; text-decoration: none; position: relative; }
    .nav-link::after { content: ''; height: 2px; width: 0; bottom: -3px; left: 0; position: absolute; background: var(--primary); transition: width 0.3s ease; }
    .nav-link:hover::after { width: 100%; }
    .mobile-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--dark); }

    /* Hero Section */
    .hero {
      min-height: 100vh;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMubGVydC9hcmNoLXJlcG9ydC1vcGFjaXR5Ij48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHIgPSIxMDAiIHdpZHRoPSIxMDAiIGZpbGwtcnVsZT0ibm9uZSIgc3Ryb2tlLWxpbmVqb2luPSIjMzQ1YWYiLz48L3N2Zz4=');
      background-size: cover;
      background-position: center center;
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center;
    }
    .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(229,115,115,0.2), transparent 60%), radial-gradient(circle at 70% 70%, rgba(61,90,254,0.15), transparent 60%); mix-blend-mode: screen; z-index: 0; }
    .hero-text { position: relative; z-index: 1; max-width: 800px; text-align: left; }
    .hero h1 { font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 700; line-height: 1.1; margin-bottom: 1rem; color: #fff; }
    .hero p { font-size: clamp(1rem, 2vw, 1.1rem); color: #fff; opacity: 0.9; margin-bottom: 2rem; }
    .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
    .btn-outline { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.2); }

    /* Services Grid */
    .services-grid {
      padding: 6rem 5%;
      max-width: 1200px;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 2rem;
    }
    .service-card {
      background: white;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .service-card:hover { transform: translateY(-8px); box-shadow: 0 15px 28px rgba(0,0,0,0.12); }
    .service-img { height: 200px; background: linear-gradient(135deg, #eee 0%, #ddd 100%); display: flex; align-items: center; justify-content: center; }
    .service-content {
      padding: 1.5rem;
      border-top: 1px solid rgba(0,0,0,0.05);
    }
    .service-icon { font-size: 2.5rem; color: var(--accent); }
    .service-content h3 { margin-bottom: 0.75rem; font-weight: 700; }
    .service-content p { color: var(--gray); margin-bottom: 1.25rem; }
    .service-price { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
    .service-btn { display: block; width: 100%; margin-top: 0.75rem; }

    /* Reviews */
    .reviews {
      padding: 6rem 5%;
      background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);
    }
    .review-grid {
      max-width: 1200px;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 2rem;
    }
    .review-card {
      background: white;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    }
    .review-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.5rem;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .reviewer-avatar { width: 60px; height: 60px; border-radius: 999px; object-fit: cover; }
    .reviewer-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .reviewer-name { font-weight: 700; }
    .reviewer-role { font-size: 0.9rem; color: var(--gray); }
    .review-quote {
      padding: 1.5rem;
      border-left: 4px solid var(--accent);
      color: var(--gray);
      font-style: italic;
    }

    /* Pricing Table */
    .pricing {
      padding: 6rem 5%;
      max-width: 1200px;
      margin: auto;
      text-align: center;
    }
    .pricing-tabs {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 3rem;
    }
    .tab-button {
      background: white;
      border: 2px solid #ccc;
      padding: 12px 18px;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s ease;
    }
    .tab-button.active { background: var(--primary); color: white; border-color: var(--primary); }
    .tab-content {
      display: none;
      animation: fadeIn 0.5s ease-out;
    }
    .tab-content.active { display: block; }
    .plan-card {
      background: white;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .plan-card:hover { transform: translateY(-8px); box-shadow: 0 15px 28px rgba(0,0,0,0.12); }
    .plan-header {
      padding: 1.5rem;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .plan-title { font-weight: 700; margin-bottom: 0.75rem; }
    .plan-price { font-size: 2.2rem; font-weight: 700; color: var(--primary); }
    .plan-period { font-size: 1rem; color: var(--gray); }
    .features-list { list-style-type: none; padding: 0; margin: 1.25rem 0; }
    .feature-item { display: flex; align-items: start; gap: 12px; margin-bottom: 12px; }
    .feature-check { width: 16px; height: 16px; border-radius: 999px; background: #eee; display: flex; align-items: center; justify-content: center; }
    .feature-check::before { content: "✓"; color: var(--primary); font-size: 14px; }
    .feature-text { color: var(--dark); }
    .cta-button { display: block; margin: 1.25rem auto; }

    /* Contact Section */
    .contact {
      padding: 6rem 5%;
      background: linear-gradient(135deg, #f3f4f6 0%, #fafafa 100%);
    }
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 3rem;
      max-width: 1200px;
      margin: auto;
    }
    .contact-info {
      display: grid;
      gap: 1.5rem;
    }
    .info-item {
      display: flex;
      align-items: start;
      gap: 1rem;
    }
    .info-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent) 0%, #2563eb 100%); border-radius: 999px; display: flex; align-items: center; justify-content: center; }
    .info-text { color: var(--dark); }
    .map-container {
      height: 300px;
      border-radius: 14px;
      overflow: hidden;
      background: #eaeaea;
      position: relative;
    }
    .map-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); }
    .form-group {
      margin-bottom: 1.5rem;
    }
    .form-label { display: block; margin-bottom: 0.5rem; color: var(--dark); }
    input[type="text"], input[type="email"], textarea { width: 100%; padding: 12px 14px; border: 1px solid #ccc; border-radius: 999px; outline: none; transition: border 0.2s ease; }
    input:focus, textarea:focus { border-color: var(--accent); }
    textarea { resize: vertical; min-height: 120px; }
    .submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--primary) 0%, #c62828 100%); color: white; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; box-shadow: 0 4px 12px rgba(229,115,115,0.3); transition: transform 0.2s ease; }
    .submit-btn:hover { transform: translateY(-2px); }

    /* Footer */
    footer {
      background: #1a1a1a;
      color: white;
      padding: 3rem 5%;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: auto;
    }
    .footer-column h4 { margin-bottom: 1rem; font-size: 1.1rem; }
    .footer-links li { margin-bottom: 0.75rem; }
    .footer-links a { color: #ccc; text-decoration: none; transition: color 0.2s ease; }
    .footer-links a:hover { color: #ffffff; }
    .social-icons { display: flex; gap: 1rem; margin-top: 1rem; }
    .social-icon { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
    .social-icon:hover { transform: translateY(-3px); }
    .copyright { text-align: center; margin-top: 2rem; color: #aaa; font-size: 0.9rem; }

    @media (max-width: 900px) {
      .nav-links { flex-direction: row; justify-content: space-between; gap: 1rem; }
      .hero-buttons { flex-wrap: wrap; gap: 1rem; }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>

<header id="header">
  <nav class="container">
    <div class="logo">Steve’s Tech</div>
    <ul class="nav-links">
      <li><a href="#home" class="nav-link active">Home</a></li>
      <li><a href="#services" class="nav-link">Services</a></li>
      <li><a href="#reviews" class="nav-link">Reviews</a></li>
      <li><a href="#pricing" class="nav-link">Pricing</a></li>
      <li><a href="#contact" class="nav-link">Contact</a></li>
      <li><button class="mobile-toggle">☰</button></li>
    </ul>
  </nav>
</header>

<section id="home" class="hero" style="background: url('https://images.unsplash.com/photo-1503442212587-b8c01070428f?auto=format&fit=crop&w=1920&q=80') no-repeat center center / cover;">
  <div class="hero-text">
    <h1>Fast, Honest, Affordable Tech Repair</h1>
    <p>We fix phones, tablets, laptops, and smart devices — same day service, honest pricing, and no hidden fees.</p>
    <div class="hero-buttons">
      <a href="#contact" class="btn">Get Your Free Quote</a>
      <a href="#services" class="btn btn-outline">Explore Services</a>
    </div>
  </div>
</section>

<main>
  <section id="services" class="services-grid container">
    <article class="service-card">
      <div class="service-img">
        <span class="service-icon">📱</span>
      </div>
      <div class="service-content">
        <h3>Phone & Tablet Repairs</h3>
        <p>Battery replacements, screen repairs, charging issues, water damage, and more.</p>
        <div class="service-price">$39–$99</div>
        <a href="#contact" class="service-btn">Request Service</a>
      </div>
    </article>
    <article class="service-card">
      <div class="service-img">
        <span class="service-icon">💻</span>
      </div>
      <div class="service-content">
        <h3>Laptop & PC Repairs</h3>
        <p>Disk drives, RAM upgrades, SSD replacements, Wi-Fi fixes, and cooling solutions.</p>
        <div class="service-price">$59–$149</div>
        <a href="#contact" class="service-btn">Request Service</a>
      </div>
    </article>
    <article class="service-card">
      <div class="service-img">
        <span class="service-icon">🔋</span>
      </div>
      <div class="service-content">
        <h3>Batteries & Charging</h3>
        <p>Battery replacements, fast chargers, cable repairs, and power management advice.</p>
        <div class="service-price">$29–$79</div>
        <a href="#contact" class="service-btn">Request Service</a>
      </div>
    </article>
    <article class="service-card">
      <div class="service-img">
        <span class="service-icon">🎧</span>
      </div>
      <div class="service-content">
        <h3>AirPods & Accessories</h3>
        <p>Cases, charging docks, earbud replacements, and audio troubleshooting.</p>
        <div class="service-price">$19–$49</div>
        <a href="#contact" class="service-btn">Request Service</a>
      </div>
    </article>
  </section>

  <section id="reviews" class="reviews container">
    <h2 style="text-align: center; margin-bottom: 3rem;">Trusted by Thousands</h2>
    <div class="review-grid">
      <article class="review-card">
        <div class="review-header">
          <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah M." class="reviewer-avatar"/>
          <div class="reviewer-info">
            <div class="reviewer-name">Sarah M.</div>
            <div class="reviewer-role">iPhone User</div>
          </div>
        </div>
        <div class="review-quote">
          “Got my cracked iPhone screen replaced in under an hour. Steve was professional, explained everything, and even gave me tips on protecting my device. I’ll definitely use them again!”
        </div>
      </article>
      <article class="review-card">
        <div class="review-header">
          <img src="https://randomuser.me/api/portraits/men/18.jpg" alt="James T." class="reviewer-avatar"/>
          <div class="reviewer-info">
            <div class="reviewer-name">James T.</div>
            <div class="reviewer-role">MacBook User</div>
          </div>
        </div>
        <div class="review-quote">
          “My MacBook had a failing SSD. They diagnosed the issue quickly and replaced it seamlessly. The new drive is lightning-fast — I’ve been using it for months without any issues.”
        </div>
      </article>
      <article class="review-card">
        <div class="review-header">
          <img src="https://randomuser.me/api/portraits/women/64.jpg" alt="Maya R." class="reviewer-avatar"/>
          <div class="reviewer-info">
            <div class="reviewer-name">Maya R.</div>
            <div class="reviewer-role">Tablet Enthusiast</div>
          </div>
        </div>
        <div class="review-quote">
          “Best price I found online! Fixed my tablet’s battery drain and charging issues completely. Steve was patient and thorough. Will recommend to everyone.”
        </div>
      </article>
    </div>
  </section>

  <section id="pricing" class="pricing container">
    <h2 style="text-align: center; margin-bottom: 2rem;">Transparent Pricing</h2>
    <div class="pricing-tabs">
      <button class="tab-button active" data-tab="plans">Plans</button>
      <button class="tab-button" data-tab="services">Services</button>
    </div>
    <div class="tab-content active" id="plans">
      <div class="plan-card">
        <div class="plan-header">
          <h3 class="plan-title">Basic Care</h3>
          <div class="plan-price">$9.99</div>
          <div class="plan-period">per month</div>
        </div>
        <ul class="features-list">
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Free diagnostics</span></li>
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Screen replacement (up to $30)</span></li>
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Battery health check</span></li>
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Free cleaning & maintenance</span></li>
        </ul>
        <a href="#contact" class="cta-button btn">Start Basic Care</a>
      </div>
      <div class="plan-card">
        <div class="plan-header">
          <h3 class="plan-title">Premium Support</h3>
          <div class="plan-price">$29.99</div>
          <div class="plan-period">per month</div>
        </div>
        <ul class="features-list">
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">All basic care benefits</span></li>
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Next-day screen repairs</span></li>
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Priority scheduling</span></li>
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Annual hardware inspection</span></li>
        </ul>
        <a href="#contact" class="cta-button btn">Join Premium</a>
      </div>
    </div>
    <div class="tab-content" id="services">
      <div class="plan-card">
        <div class="plan-header">
          <h3 class="plan-title">One-Time Service</h3>
        </div>
        <ul class="features-list">
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Same-day diagnosis & quote</span></li>
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Transparent pricing</span></li>
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">No hidden fees or extra charges</span></li>
          <li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Free follow-up support</span></li>
        </ul>
        <a href="#contact" class="cta-button btn">Get Free Quote</a>
      </div>
    </div>
  </section>

  <section id="contact" class="contact container">
    <h2 style="text-align: center; margin-bottom: 2rem;">Get In Touch</h2>
    <div class="contact-grid">
      <div class="contact-info">
        <div class="info-item">
          <div class="info-icon">📍</div>
          <div class="info-text">
            <strong>Address:</strong><br/>
            123 Tech Lane<br/>
            San Diego, CA 92101
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">📞</div>
          <div class="info-text">
            <strong>Phone:</strong><br/>
            (858) 555-TECH
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">✉️</div>
          <div class="info-text">
            <strong>Email:</strong><br/>
            hello@steves-tech.com
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">⏰</div>
          <div class="info-text">
            <strong>Hours:</strong><br/>
            Mon-Fri: 8am–7pm<br/>
            Sat-Sun: 9am–5pm
          </div>
        </div>
      </div>
      <div class="contact-form">
        <iframe class="map-container" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA5S8r1U9K9OqkYFv0YHl6Y2a1QzXoUc8A&data=!4atoolbox!4m2!3d32.7157467!8m2!3d-117.1610838" frameborder="0" style="border:none;"></iframe>
        <form action="#" method="POST">
          <div class="form-group">
            <label class="form-label" for="name">Name</label>
            <input type="text" id="name" placeholder="Your Name" required/>
          </div>
          <div class="form-group">
            <label class="form-label" for="email">Email</label>
            <input type="email" id="email" placeholder="you@example.com" required/>
          </div>
          <div class="form-group">
            <label class="form-label" for="phone">Phone</label>
            <input type="tel" id="phone" placeholder="(555) 555-5555"/>
          </div>
          <div class="form-group">
            <label class="form-label" for="message">Message</label>
            <textarea id="message" placeholder="How can we help you today?" rows="4" required></textarea>
          </div>
          <button type="submit" class="submit-btn">Send Message</button>
        </form>
      </div>
    </div>
  </section>
</main>

<footer id="footer">
  <div class="footer-grid">
    <div class="footer-column">
      <div class="logo">Steve’s Tech</div>
      <p style="margin: 1rem 0;">Fast, honest, affordable tech repair. We fix phones, tablets, laptops, and accessories — same day service, transparent pricing, and no hidden fees.</p>
      <div class="social-icons">
        <a href="#" class="social-icon">📘</a>
        <a href="#" class="social-icon">📷</a>
        <a href="#" class="social-icon">📱</a>
        <a href="#" class="social-icon">🐦</a>
      </div>
    </div>
    <div class="footer-column">
      <h4>Quick Links</h4>
      <ul class="footer-links">
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#reviews">Reviews</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h4>Helpful Links</h4>
      <ul class="footer-links">
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Terms of Use</a></li>
        <li><a href="#">Shipping & Returns</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h4>Contact Us</h4>
      <p>(858) 555-TECH</p>
      <p>hello@steves-tech.com</p>
    </div>
  </div>
  <div class="copyright">&copy; 2024 Steve's Tech. All rights reserved.</div>
</footer>

<script>
  // Smooth scroll
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        window.scrollTo({
          top: target.offsetTop,
          behavior: 'smooth'
        });
      }
    });
  });

  // Mobile navigation toggle
  const mobileToggle = document.querySelector('.mobile-toggle');
  const navLinks = document.querySelector('.nav-links');

  mobileToggle?.addEventListener('click', () => {
    navLinks.classList.toggle('active');
  });

  // Sticky header
  const header = document.getElementById('header');
  const navbarHeight = header.offsetHeight;

  window.addEventListener('scroll', () => {
    if (window.scrollY > navbarHeight) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  });

  // Tab switching
  const tabs = document.querySelectorAll('.tab-button');
  const tabContents = document.querySelectorAll('.tab-content');

  tabs.forEach(btn => {
    btn.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      tabContents.forEach(c => c.classList.remove('active'));

      btn.classList.add('active');
      const tabId = btn.dataset.tab;
      document.getElementById(tabId)?.classList.add('active');
    });
  });

  // Form submission demo
  const form = document.querySelector('.contact-form form');
  if (form) {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      alert("Thank you! A representative will contact you within 1 business hour.");
      this.reset();
    });
  }
</script>

</body>
</html>
```

### How to Use This Starter Kit:
1. Save as `index.html`
2. Host on GitHub Pages, Netlify, Vercel, or any static hosting platform.
3. Optional enhancements:
   - Add real Google Maps iframe
   - Connect Stripe/PayPal for payments
   - Implement a contact form backend via Formspree, Netlify Forms, or Firebase

### Key Features Included:
- Responsive design (works on mobile/tablets)
- Hero section with CTA buttons
- Services cards with prices
- Customer testimonials
- Two pricing plans (monthly subscriptions + one-time quotes)
- Contact section with embedded map and form
- Sticky navigation bar
- Tabbed UI for pricing/services
- Modern gradient colors and subtle animations
- Mobile hamburger menu

This provides a polished, conversion-focused landing page that builds trust through transparency and clear CTAs. Customize colors, fonts, and content as needed for your shop.