From c4763857186ca36ffca3432266563a6b76896131 Mon Sep 17 00:00:00 2001
From: Nicholai <nicholaivogelfilms@gmail.com>
Date: Sat, 27 Dec 2025 11:31:43 -0700
Subject: [PATCH] feat: add 404, privacy, and terms pages

- 404 page with custom design and navigation links
- privacy policy page
- terms of service page
---
 src/pages/404.astro     | 211 ++++++++++++++++++++
 src/pages/privacy.astro | 415 ++++++++++++++++++++++++++++++++++++++++
 src/pages/terms.astro   | 319 ++++++++++++++++++++++++++++++
 3 files changed, 945 insertions(+)
 create mode 100644 src/pages/404.astro
 create mode 100644 src/pages/privacy.astro
 create mode 100644 src/pages/terms.astro

diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..7bc17e7
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,211 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Nav from "../components/site/Nav.astro";
+import Footer from "../components/site/Footer.astro";
+import { Home, Paintbrush, Phone, MapPin, ArrowRight } from "lucide-react";
+---
+
+<Layout title="Page Not Found | Summit Painting & Handyman Services">
+    <Nav />
+
+    <main class="w-full overflow-hidden bg-brand-cream">
+        <!-- Hero Section -->
+        <section class="relative min-h-[70vh] flex items-center justify-center py-20 sm:py-32 md:py-40 bg-brand-green overflow-hidden">
+            <!-- Brush Texture Background -->
+            <div class="absolute inset-0 z-0 opacity-[0.08] pointer-events-none" style="background-image: url('/media/tileablepattern.png'); background-size: 400px;"></div>
+
+            <!-- Decorative Paint Drip Effect (CSS) -->
+            <div class="absolute top-0 left-1/4 w-2 h-32 bg-brand-cream/20 rounded-b-full blur-sm"></div>
+            <div class="absolute top-0 right-1/3 w-3 h-40 bg-brand-cream/15 rounded-b-full blur-sm"></div>
+
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
+                <!-- 404 Display -->
+                <div class="mb-8">
+                    <p class="text-9xl sm:text-[12rem] md:text-[14rem] font-serif font-bold text-white/10 leading-none select-none">
+                        404
+                    </p>
+                    <div class="relative -mt-20 sm:-mt-32 md:-mt-40">
+                        <div class="inline-flex items-center gap-4 px-6 py-3 rounded-full bg-white/10 backdrop-blur-md border border-white/20">
+                            <div class="w-3 h-3 rounded-full bg-brand-cream animate-pulse"></div>
+                            <span class="text-white/80 text-xs sm:text-sm font-bold uppercase tracking-[0.3em]">Page Not Found</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Playful Headline -->
+                <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-serif font-medium text-white mb-6 leading-tight">
+                    This Page Needs
+                    <span class="block italic text-brand-cream mt-2">A Touch-Up!</span>
+                </h1>
+
+                <p class="text-lg sm:text-xl md:text-2xl text-white/70 font-light italic max-w-2xl mx-auto mb-4">
+                    Looks like this page got painted over or moved to a new location.
+                </p>
+
+                <p class="text-base sm:text-lg text-white/60 max-w-xl mx-auto mb-12">
+                    Don't worry — we're experts at fixing things! Let us help you find what you're looking for.
+                </p>
+
+                <!-- Primary CTA Buttons -->
+                <div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-16">
+                    <a
+                        href="/"
+                        class="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-10 py-5 bg-brand-cream text-brand-green rounded-full text-xs font-bold uppercase tracking-[0.3em] hover:bg-white transition-all shadow-2xl hover:-translate-y-1"
+                    >
+                        <Home size={18} />
+                        Return Home
+                    </a>
+                    <a
+                        href="/contact"
+                        class="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-10 py-5 bg-white/10 text-white border border-white/20 backdrop-blur-sm hover:bg-white/20 rounded-full text-xs font-bold uppercase tracking-[0.3em] transition-all"
+                    >
+                        <Phone size={18} />
+                        Get a Free Estimate
+                    </a>
+                </div>
+
+                <!-- Fun Paint-Related Message -->
+                <div class="inline-flex items-center gap-3 px-6 py-3 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm">
+                    <Paintbrush size={20} className="text-brand-cream" />
+                    <span class="text-white/60 text-sm italic">
+                        Even the best projects need a little direction!
+                    </span>
+                </div>
+            </div>
+        </section>
+
+        <!-- Quick Navigation Cards -->
+        <section class="py-16 sm:py-24 md:py-32">
+            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl sm:text-4xl md:text-5xl font-serif font-medium text-brand-dark mb-4">
+                        Popular Pages
+                    </h2>
+                    <p class="text-lg text-brand-dark/60 font-light italic">
+                        Here are some places you might be looking for
+                    </p>
+                </div>
+
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <!-- Home -->
+                    <a
+                        href="/"
+                        class="group bg-white rounded-3xl p-8 text-center hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-stone-100"
+                    >
+                        <div class="w-16 h-16 mx-auto mb-6 rounded-2xl bg-brand-cream flex items-center justify-center group-hover:bg-brand-green group-hover:scale-110 transition-all duration-300">
+                            <Home size={28} className="text-brand-dark group-hover:text-white transition-colors" />
+                        </div>
+                        <h3 class="text-xl font-serif font-medium text-brand-dark mb-2">
+                            Home
+                        </h3>
+                        <p class="text-sm text-stone-600 mb-4">
+                            Back to our homepage
+                        </p>
+                        <div class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-brand-green opacity-0 group-hover:opacity-100 transition-opacity">
+                            Visit <ArrowRight size={14} />
+                        </div>
+                    </a>
+
+                    <!-- Services -->
+                    <a
+                        href="/#services"
+                        class="group bg-white rounded-3xl p-8 text-center hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-stone-100"
+                    >
+                        <div class="w-16 h-16 mx-auto mb-6 rounded-2xl bg-brand-cream flex items-center justify-center group-hover:bg-brand-green group-hover:scale-110 transition-all duration-300">
+                            <Paintbrush size={28} className="text-brand-dark group-hover:text-white transition-colors" />
+                        </div>
+                        <h3 class="text-xl font-serif font-medium text-brand-dark mb-2">
+                            Our Services
+                        </h3>
+                        <p class="text-sm text-stone-600 mb-4">
+                            Painting & handyman work
+                        </p>
+                        <div class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-brand-green opacity-0 group-hover:opacity-100 transition-opacity">
+                            Explore <ArrowRight size={14} />
+                        </div>
+                    </a>
+
+                    <!-- Contact -->
+                    <a
+                        href="/contact"
+                        class="group bg-white rounded-3xl p-8 text-center hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-stone-100"
+                    >
+                        <div class="w-16 h-16 mx-auto mb-6 rounded-2xl bg-brand-cream flex items-center justify-center group-hover:bg-brand-green group-hover:scale-110 transition-all duration-300">
+                            <Phone size={28} className="text-brand-dark group-hover:text-white transition-colors" />
+                        </div>
+                        <h3 class="text-xl font-serif font-medium text-brand-dark mb-2">
+                            Contact Us
+                        </h3>
+                        <p class="text-sm text-stone-600 mb-4">
+                            Get your free estimate
+                        </p>
+                        <div class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-brand-green opacity-0 group-hover:opacity-100 transition-opacity">
+                            Connect <ArrowRight size={14} />
+                        </div>
+                    </a>
+
+                    <!-- Service Areas -->
+                    <a
+                        href="/#areas"
+                        class="group bg-white rounded-3xl p-8 text-center hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-stone-100"
+                    >
+                        <div class="w-16 h-16 mx-auto mb-6 rounded-2xl bg-brand-cream flex items-center justify-center group-hover:bg-brand-green group-hover:scale-110 transition-all duration-300">
+                            <MapPin size={28} className="text-brand-dark group-hover:text-white transition-colors" />
+                        </div>
+                        <h3 class="text-xl font-serif font-medium text-brand-dark mb-2">
+                            Service Areas
+                        </h3>
+                        <p class="text-sm text-stone-600 mb-4">
+                            Colorado Springs & beyond
+                        </p>
+                        <div class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-brand-green opacity-0 group-hover:opacity-100 transition-opacity">
+                            View <ArrowRight size={14} />
+                        </div>
+                    </a>
+                </div>
+
+                <!-- Additional Help Section -->
+                <div class="mt-16 text-center">
+                    <div class="bg-brand-green/5 rounded-3xl p-8 sm:p-12 max-w-2xl mx-auto border border-brand-green/10">
+                        <Paintbrush size={48} className="text-brand-green mx-auto mb-6" />
+                        <h3 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-4">
+                            Still Can't Find What You're Looking For?
+                        </h3>
+                        <p class="text-base sm:text-lg text-brand-dark/70 mb-6 font-light italic">
+                            We're here to help! Give us a call or send us a message, and we'll point you in the right direction.
+                        </p>
+                        <a
+                            href="/contact"
+                            class="inline-flex items-center gap-3 px-8 py-4 bg-brand-dark text-white rounded-full text-xs font-bold uppercase tracking-[0.3em] hover:bg-brand-green transition-all shadow-xl hover:-translate-y-1"
+                        >
+                            Contact Our Team
+                            <ArrowRight size={16} />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <Footer />
+</Layout>
+
+<style>
+    /* Subtle paint drip animation */
+    @keyframes drip {
+        0%, 100% {
+            transform: scaleY(1);
+        }
+        50% {
+            transform: scaleY(1.1);
+        }
+    }
+
+    .absolute.top-0 {
+        animation: drip 3s ease-in-out infinite;
+    }
+
+    .absolute.top-0:nth-child(2) {
+        animation-delay: 0.5s;
+    }
+</style>
diff --git a/src/pages/privacy.astro b/src/pages/privacy.astro
new file mode 100644
index 0000000..267b5ae
--- /dev/null
+++ b/src/pages/privacy.astro
@@ -0,0 +1,415 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Nav from "../components/site/Nav.astro";
+import Footer from "../components/site/Footer.astro";
+import { Lock, Eye, Shield, Cookie, Database, Mail, UserCheck } from "lucide-react";
+---
+
+<Layout title="Privacy Policy | Summit Painting & Handyman Services">
+    <Nav />
+
+    <main class="w-full overflow-hidden bg-brand-cream">
+        <!-- Hero Section -->
+        <section class="relative py-20 sm:py-32 md:py-40 bg-brand-dark overflow-hidden">
+            <!-- Pattern Overlay -->
+            <div class="absolute inset-0 z-0 opacity-[0.06] pointer-events-none" style="background-image: url('/media/tileablepattern.png'); background-size: 400px;"></div>
+
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
+                <div class="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white/10 border border-white/20 text-white/60 text-[10px] sm:text-[11px] font-bold uppercase tracking-[0.3em] mb-8">
+                    <Lock size={14} />
+                    Your Privacy Matters
+                </div>
+
+                <h1 class="text-4xl sm:text-5xl md:text-6xl font-serif font-medium text-white mb-6 leading-tight">
+                    Privacy Policy
+                </h1>
+
+                <p class="text-lg sm:text-xl text-white/70 font-light italic max-w-2xl mx-auto">
+                    How we collect, use, and protect your personal information
+                </p>
+            </div>
+        </section>
+
+        <!-- Content Section -->
+        <section class="py-16 sm:py-24 md:py-32">
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="bg-white rounded-[2rem] sm:rounded-[2.5rem] p-8 sm:p-12 md:p-16 shadow-sm border border-stone-100">
+
+                    <!-- Last Updated -->
+                    <div class="mb-12 pb-8 border-b border-stone-100">
+                        <p class="text-sm text-stone-500">
+                            <strong>Last Updated:</strong> December 2024
+                        </p>
+                    </div>
+
+                    <!-- Introduction -->
+                    <div class="mb-12">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            Introduction
+                        </h2>
+                        <p class="text-base sm:text-lg text-brand-dark/80 leading-relaxed mb-4">
+                            Summit Painting & Handyman Services ("Summit," "we," "us," or "our") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website or use our services.
+                        </p>
+                        <p class="text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            By engaging our services or using our website, you consent to the data practices described in this policy.
+                        </p>
+                    </div>
+
+                    <!-- Information We Collect -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-green/10 flex items-center justify-center">
+                                <Database size={20} className="text-brand-green" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                1. Information We Collect
+                            </h2>
+                        </div>
+
+                        <div class="space-y-6 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <div>
+                                <h3 class="font-bold text-lg text-brand-dark mb-3">1.1 Personal Information</h3>
+                                <p class="mb-3">When you request an estimate or contact us, we may collect:</p>
+                                <ul class="space-y-2 ml-6">
+                                    <li>• <strong>Name</strong> - To address you properly and identify your project</li>
+                                    <li>• <strong>Email Address</strong> - To send estimates, confirmations, and updates</li>
+                                    <li>• <strong>Phone Number</strong> - To schedule appointments and discuss project details</li>
+                                    <li>• <strong>Property Address</strong> - To provide accurate estimates and schedule services</li>
+                                    <li>• <strong>Service Details</strong> - Information about your painting or handyman needs</li>
+                                </ul>
+                            </div>
+
+                            <div>
+                                <h3 class="font-bold text-lg text-brand-dark mb-3">1.2 Payment Information</h3>
+                                <p>
+                                    When you make a payment, we may collect billing information including credit card details. Payment processing is handled securely through third-party payment processors. We do not store complete credit card information on our servers.
+                                </p>
+                            </div>
+
+                            <div>
+                                <h3 class="font-bold text-lg text-brand-dark mb-3">1.3 Property Information</h3>
+                                <p>
+                                    During consultations and estimates, we may photograph your property to document the scope of work. These photos are used for project planning, estimates, and quality control.
+                                </p>
+                            </div>
+
+                            <div>
+                                <h3 class="font-bold text-lg text-brand-dark mb-3">1.4 Automatically Collected Information</h3>
+                                <p class="mb-3">When you visit our website, we may automatically collect:</p>
+                                <ul class="space-y-2 ml-6">
+                                    <li>• IP address and location data</li>
+                                    <li>• Browser type and version</li>
+                                    <li>• Pages visited and time spent on site</li>
+                                    <li>• Referring website or source</li>
+                                    <li>• Device information (mobile, desktop, operating system)</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- How We Use Your Information -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-sage/10 flex items-center justify-center">
+                                <Eye size={20} className="text-brand-sage" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                2. How We Use Your Information
+                            </h2>
+                        </div>
+
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>We use the information we collect to:</p>
+                            <ul class="space-y-3 ml-6">
+                                <li>
+                                    <strong>Provide Services</strong> - Process estimates, schedule appointments, complete painting and handyman projects
+                                </li>
+                                <li>
+                                    <strong>Communication</strong> - Respond to inquiries, send project updates, confirm appointments
+                                </li>
+                                <li>
+                                    <strong>Payment Processing</strong> - Handle invoices, deposits, and final payments
+                                </li>
+                                <li>
+                                    <strong>Quality Control</strong> - Document work, maintain project records, address warranty claims
+                                </li>
+                                <li>
+                                    <strong>Marketing</strong> - Send promotional offers, seasonal reminders, and service updates (with your consent)
+                                </li>
+                                <li>
+                                    <strong>Website Improvement</strong> - Analyze usage patterns, improve user experience, optimize content
+                                </li>
+                                <li>
+                                    <strong>Legal Compliance</strong> - Maintain records as required by law, respond to legal requests
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- Cookies & Tracking -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-green/10 flex items-center justify-center">
+                                <Cookie size={20} className="text-brand-green" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                3. Cookies & Tracking Technologies
+                            </h2>
+                        </div>
+
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <h3 class="font-bold text-lg text-brand-dark mb-3">3.1 What Are Cookies?</h3>
+                            <p>
+                                Cookies are small text files stored on your device that help us remember your preferences and understand how you use our website.
+                            </p>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">3.2 Types of Cookies We Use</h3>
+                            <ul class="space-y-3 ml-6">
+                                <li>
+                                    <strong>Essential Cookies</strong> - Required for the website to function properly (e.g., form submissions)
+                                </li>
+                                <li>
+                                    <strong>Analytics Cookies</strong> - Help us understand visitor behavior and improve our site (e.g., Google Analytics)
+                                </li>
+                                <li>
+                                    <strong>Preference Cookies</strong> - Remember your settings and choices
+                                </li>
+                            </ul>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">3.3 Managing Cookies</h3>
+                            <p>
+                                You can control cookies through your browser settings. Note that disabling cookies may affect website functionality. Most browsers allow you to refuse or delete cookies.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Third-Party Services -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-sage/10 flex items-center justify-center">
+                                <Shield size={20} className="text-brand-sage" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                4. Third-Party Services
+                            </h2>
+                        </div>
+
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                We may use third-party service providers to help us operate our business:
+                            </p>
+                            <ul class="space-y-3 ml-6">
+                                <li>
+                                    <strong>Payment Processors</strong> - Secure handling of credit card and payment information
+                                </li>
+                                <li>
+                                    <strong>Analytics Services</strong> - Google Analytics and similar tools to understand website traffic
+                                </li>
+                                <li>
+                                    <strong>Email Services</strong> - Marketing and transactional email platforms
+                                </li>
+                                <li>
+                                    <strong>Cloud Storage</strong> - Secure storage of project photos and documents
+                                </li>
+                            </ul>
+                            <p class="mt-4">
+                                These third parties have access to your information only to perform tasks on our behalf and are obligated to protect and secure your data.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Data Security -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-green/10 flex items-center justify-center">
+                                <Lock size={20} className="text-brand-green" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                5. Data Security
+                            </h2>
+                        </div>
+
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                We implement appropriate technical and organizational security measures to protect your personal information:
+                            </p>
+                            <ul class="space-y-3 ml-6">
+                                <li>• <strong>Encryption</strong> - SSL/TLS encryption for data transmitted over the internet</li>
+                                <li>• <strong>Secure Storage</strong> - Password-protected systems and encrypted databases</li>
+                                <li>• <strong>Access Controls</strong> - Limited employee access to personal information on a need-to-know basis</li>
+                                <li>• <strong>Regular Updates</strong> - Software and security patches kept current</li>
+                            </ul>
+                            <p class="mt-4 text-stone-600 text-base">
+                                <em>Please note:</em> No method of transmission over the internet or electronic storage is 100% secure. While we strive to protect your information, we cannot guarantee absolute security.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Your Privacy Rights -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-sage/10 flex items-center justify-center">
+                                <UserCheck size={20} className="text-brand-sage" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                6. Your Privacy Rights
+                            </h2>
+                        </div>
+
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                Depending on your location, you may have the following rights regarding your personal information:
+                            </p>
+                            <ul class="space-y-3 ml-6">
+                                <li>
+                                    <strong>Access</strong> - Request a copy of the personal information we hold about you
+                                </li>
+                                <li>
+                                    <strong>Correction</strong> - Request correction of inaccurate or incomplete information
+                                </li>
+                                <li>
+                                    <strong>Deletion</strong> - Request deletion of your personal information (subject to legal retention requirements)
+                                </li>
+                                <li>
+                                    <strong>Opt-Out</strong> - Unsubscribe from marketing communications at any time
+                                </li>
+                                <li>
+                                    <strong>Data Portability</strong> - Request your data in a structured, commonly used format
+                                </li>
+                            </ul>
+                            <p class="mt-6">
+                                To exercise these rights, please contact us using the information provided at the end of this policy.
+                            </p>
+
+                            <div class="bg-brand-cream rounded-2xl p-6 mt-6">
+                                <p class="font-bold text-brand-dark mb-2">Colorado Privacy Rights</p>
+                                <p class="text-sm text-stone-600">
+                                    Colorado residents may have additional rights under the Colorado Privacy Act (CPA). We respect your privacy choices and will respond to rights requests within the required timeframe.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Marketing Communications -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            7. Marketing Communications
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                We may send you promotional emails about our services, special offers, and painting tips. You can opt out at any time by:
+                            </p>
+                            <ul class="space-y-2 ml-6">
+                                <li>• Clicking the "unsubscribe" link in any marketing email</li>
+                                <li>• Contacting us directly with your opt-out request</li>
+                                <li>• Updating your preferences in your account settings (if applicable)</li>
+                            </ul>
+                            <p class="mt-4">
+                                Note: Even if you opt out of marketing emails, we may still send you transactional messages related to your service appointments, estimates, and invoices.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Children's Privacy -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            8. Children's Privacy
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                Our services are not directed to individuals under the age of 18. We do not knowingly collect personal information from children. If you believe we have inadvertently collected information from a child, please contact us immediately.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Data Retention -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            9. Data Retention
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                We retain your personal information for as long as necessary to:
+                            </p>
+                            <ul class="space-y-2 ml-6">
+                                <li>• Fulfill the purposes outlined in this privacy policy</li>
+                                <li>• Honor our warranty obligations (minimum 1 year from project completion)</li>
+                                <li>• Comply with legal, accounting, or reporting requirements</li>
+                                <li>• Resolve disputes and enforce our agreements</li>
+                            </ul>
+                            <p class="mt-4">
+                                When information is no longer needed, we securely delete or anonymize it.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Changes to This Policy -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            10. Changes to This Privacy Policy
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                We may update this Privacy Policy from time to time to reflect changes in our practices or legal requirements. We will notify you of significant changes by:
+                            </p>
+                            <ul class="space-y-2 ml-6">
+                                <li>• Updating the "Last Updated" date at the top of this page</li>
+                                <li>• Posting a notice on our website</li>
+                                <li>• Sending an email notification for material changes (if you've provided your email)</li>
+                            </ul>
+                            <p class="mt-4">
+                                We encourage you to review this policy periodically to stay informed about how we protect your information.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Contact -->
+                    <div class="pt-8 border-t border-stone-100">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-green/10 flex items-center justify-center">
+                                <Mail size={20} className="text-brand-green" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                11. Contact Us
+                            </h2>
+                        </div>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                If you have questions, concerns, or requests regarding this Privacy Policy or our data practices, please contact us:
+                            </p>
+                            <div class="bg-brand-cream rounded-2xl p-6 sm:p-8 mt-6">
+                                <p class="font-bold text-brand-dark mb-3">Privacy Contact Information</p>
+                                <p class="text-stone-700 mb-2">
+                                    <strong>Summit Painting & Handyman Services</strong>
+                                </p>
+                                <p class="text-stone-600 mb-1">Colorado Springs, CO</p>
+                                <p class="text-stone-600 mb-1">
+                                    Email: <span class="font-medium text-brand-green">[EMAIL]</span>
+                                </p>
+                                <p class="text-stone-600">
+                                    Phone: <span class="font-medium text-brand-green">[PHONE]</span>
+                                </p>
+                                <p class="text-sm text-stone-500 mt-4">
+                                    We will respond to your inquiry within 30 days.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- Back to Home -->
+                <div class="text-center mt-12">
+                    <a
+                        href="/"
+                        class="inline-flex items-center gap-3 px-8 py-4 bg-brand-dark text-white rounded-full text-xs font-bold uppercase tracking-[0.3em] hover:bg-brand-green transition-all shadow-xl hover:-translate-y-1"
+                    >
+                        ← Back to Home
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <Footer />
+</Layout>
diff --git a/src/pages/terms.astro b/src/pages/terms.astro
new file mode 100644
index 0000000..367508b
--- /dev/null
+++ b/src/pages/terms.astro
@@ -0,0 +1,319 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Nav from "../components/site/Nav.astro";
+import Footer from "../components/site/Footer.astro";
+import { FileText, Shield, DollarSign, CheckCircle, AlertCircle } from "lucide-react";
+---
+
+<Layout title="Terms of Use | Summit Painting & Handyman Services">
+    <Nav />
+
+    <main class="w-full overflow-hidden bg-brand-cream">
+        <!-- Hero Section -->
+        <section class="relative py-20 sm:py-32 md:py-40 bg-brand-green overflow-hidden">
+            <!-- Pattern Overlay -->
+            <div class="absolute inset-0 z-0 opacity-[0.06] pointer-events-none" style="background-image: url('/media/tileablepattern.png'); background-size: 400px;"></div>
+
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
+                <div class="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white/10 border border-white/20 text-white/60 text-[10px] sm:text-[11px] font-bold uppercase tracking-[0.3em] mb-8">
+                    <FileText size={14} />
+                    Legal Information
+                </div>
+
+                <h1 class="text-4xl sm:text-5xl md:text-6xl font-serif font-medium text-white mb-6 leading-tight">
+                    Terms of Use
+                </h1>
+
+                <p class="text-lg sm:text-xl text-white/70 font-light italic max-w-2xl mx-auto">
+                    Please review these terms carefully before using our services
+                </p>
+            </div>
+        </section>
+
+        <!-- Content Section -->
+        <section class="py-16 sm:py-24 md:py-32">
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="bg-white rounded-[2rem] sm:rounded-[2.5rem] p-8 sm:p-12 md:p-16 shadow-sm border border-stone-100">
+
+                    <!-- Last Updated -->
+                    <div class="mb-12 pb-8 border-b border-stone-100">
+                        <p class="text-sm text-stone-500">
+                            <strong>Last Updated:</strong> December 2024
+                        </p>
+                    </div>
+
+                    <!-- Introduction -->
+                    <div class="mb-12">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            1. Acceptance of Terms
+                        </h2>
+                        <p class="text-base sm:text-lg text-brand-dark/80 leading-relaxed mb-4">
+                            By engaging Summit Painting & Handyman Services ("Summit," "we," "us," or "our") for painting, wood restoration, or handyman services in the Colorado Springs area, you ("Client," "you," or "your") agree to be bound by these Terms of Use. If you do not agree to these terms, please do not use our services.
+                        </p>
+                    </div>
+
+                    <!-- Service Warranties -->
+                    <div class="mb-12">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-green/10 flex items-center justify-center">
+                                <Shield size={20} className="text-brand-green" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                2. Service Warranties
+                            </h2>
+                        </div>
+
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">2.1 Workmanship Warranty</h3>
+                            <p>
+                                Summit Painting & Handyman Services guarantees all work for a period of one (1) year from the date of completion. This warranty covers defects in workmanship, including but not limited to:
+                            </p>
+                            <ul class="space-y-2 ml-6">
+                                <li class="flex items-start gap-3">
+                                    <CheckCircle size={20} className="text-brand-green flex-shrink-0 mt-1" />
+                                    <span>Paint peeling or bubbling due to improper application</span>
+                                </li>
+                                <li class="flex items-start gap-3">
+                                    <CheckCircle size={20} className="text-brand-green flex-shrink-0 mt-1" />
+                                    <span>Uneven finish or visible brush marks</span>
+                                </li>
+                                <li class="flex items-start gap-3">
+                                    <CheckCircle size={20} className="text-brand-green flex-shrink-0 mt-1" />
+                                    <span>Improper wood staining or sealing</span>
+                                </li>
+                            </ul>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">2.2 Warranty Exclusions</h3>
+                            <p>
+                                Our warranty does not cover damage caused by:
+                            </p>
+                            <ul class="space-y-2 ml-6 text-stone-600">
+                                <li class="flex items-start gap-3">
+                                    <AlertCircle size={18} className="text-stone-400 flex-shrink-0 mt-1" />
+                                    <span>Normal wear and tear</span>
+                                </li>
+                                <li class="flex items-start gap-3">
+                                    <AlertCircle size={18} className="text-stone-400 flex-shrink-0 mt-1" />
+                                    <span>Acts of nature (hail, extreme weather, flooding)</span>
+                                </li>
+                                <li class="flex items-start gap-3">
+                                    <AlertCircle size={18} className="text-stone-400 flex-shrink-0 mt-1" />
+                                    <span>Client negligence or improper maintenance</span>
+                                </li>
+                                <li class="flex items-start gap-3">
+                                    <AlertCircle size={18} className="text-stone-400 flex-shrink-0 mt-1" />
+                                    <span>Structural defects or water damage</span>
+                                </li>
+                                <li class="flex items-start gap-3">
+                                    <AlertCircle size={18} className="text-stone-400 flex-shrink-0 mt-1" />
+                                    <span>Modifications made by third parties</span>
+                                </li>
+                            </ul>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">2.3 Material Warranties</h3>
+                            <p>
+                                Paint and material warranties are provided by the respective manufacturers. We use premium materials and will assist in processing any manufacturer warranty claims when applicable.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Insurance & Licensing -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-sage/10 flex items-center justify-center">
+                                <Shield size={20} className="text-brand-sage" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                3. Insurance & Licensing
+                            </h2>
+                        </div>
+
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <h3 class="font-bold text-lg text-brand-dark mb-3">3.1 Licensed & Insured</h3>
+                            <p>
+                                Summit Painting & Handyman Services is fully licensed and insured to operate in Colorado Springs and surrounding areas. We maintain:
+                            </p>
+                            <ul class="space-y-2 ml-6">
+                                <li class="flex items-start gap-3">
+                                    <CheckCircle size={20} className="text-brand-sage flex-shrink-0 mt-1" />
+                                    <span><strong>General Liability Insurance</strong> - Protecting your property against accidental damage during our work</span>
+                                </li>
+                                <li class="flex items-start gap-3">
+                                    <CheckCircle size={20} className="text-brand-sage flex-shrink-0 mt-1" />
+                                    <span><strong>Workers' Compensation Insurance</strong> - Covering our employees in case of workplace injury</span>
+                                </li>
+                                <li class="flex items-start gap-3">
+                                    <CheckCircle size={20} className="text-brand-sage flex-shrink-0 mt-1" />
+                                    <span><strong>Colorado Business License</strong> - Valid and current licensing for painting and handyman services</span>
+                                </li>
+                            </ul>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">3.2 Proof of Insurance</h3>
+                            <p>
+                                Certificates of insurance are available upon request. Clients may request proof of insurance before work begins.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Payment Terms -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <div class="flex items-center gap-3 mb-6">
+                            <div class="w-10 h-10 rounded-full bg-brand-green/10 flex items-center justify-center">
+                                <DollarSign size={20} className="text-brand-green" />
+                            </div>
+                            <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark">
+                                4. Payment Terms
+                            </h2>
+                        </div>
+
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <h3 class="font-bold text-lg text-brand-dark mb-3">4.1 Estimates & Quotes</h3>
+                            <p>
+                                All estimates are provided free of charge and are valid for 30 days from the date of issue. Final quotes are binding once signed by both parties.
+                            </p>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">4.2 Deposit Requirements</h3>
+                            <p>
+                                For projects exceeding $1,000, a deposit of 25% to 50% may be required to secure your schedule and cover initial material costs. Deposits are non-refundable once materials have been purchased.
+                            </p>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">4.3 Payment Schedule</h3>
+                            <ul class="space-y-2 ml-6">
+                                <li><strong>Small Projects (Under $1,000):</strong> Payment due upon completion</li>
+                                <li><strong>Medium Projects ($1,000 - $5,000):</strong> 50% deposit, 50% upon completion</li>
+                                <li><strong>Large Projects (Over $5,000):</strong> Custom payment schedule agreed upon in writing</li>
+                            </ul>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">4.4 Accepted Payment Methods</h3>
+                            <p>
+                                We accept cash, checks, credit cards, and digital payment methods. A processing fee may apply for credit card payments.
+                            </p>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">4.5 Late Payment</h3>
+                            <p>
+                                Invoices are due within 15 days of completion unless otherwise agreed. Late payments may be subject to a 1.5% monthly finance charge. We reserve the right to suspend warranty coverage for accounts with outstanding balances.
+                            </p>
+
+                            <h3 class="font-bold text-lg text-brand-dark mt-6 mb-3">4.6 Cancellation Policy</h3>
+                            <p>
+                                Clients may cancel services with 48 hours notice without penalty. Cancellations with less than 48 hours notice may forfeit the deposit. If work has already begun, the client will be charged for labor and materials used up to the cancellation point.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Liability Limitations -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            5. Liability Limitations
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                While we take every precaution to protect your property, Summit Painting & Handyman Services shall not be held liable for:
+                            </p>
+                            <ul class="space-y-2 ml-6 text-stone-600">
+                                <li>• Pre-existing damage not disclosed during the initial inspection</li>
+                                <li>• Damage to personal property not moved or covered as agreed</li>
+                                <li>• Hidden structural issues discovered during work (we will notify you immediately)</li>
+                                <li>• Color variations due to lighting, surface texture, or manufacturer differences</li>
+                                <li>• Delays caused by weather, material shortages, or unforeseen circumstances</li>
+                            </ul>
+                            <p class="mt-4">
+                                Our maximum liability for any claim shall not exceed the total contract price for the specific service in question.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Service Areas -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            6. Service Areas
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                We proudly serve Colorado Springs and the following surrounding areas:
+                            </p>
+                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 my-6">
+                                <div class="px-4 py-3 bg-brand-cream rounded-xl text-sm font-medium">Colorado Springs</div>
+                                <div class="px-4 py-3 bg-brand-cream rounded-xl text-sm font-medium">Monument</div>
+                                <div class="px-4 py-3 bg-brand-cream rounded-xl text-sm font-medium">Black Forest</div>
+                                <div class="px-4 py-3 bg-brand-cream rounded-xl text-sm font-medium">Woodland Park</div>
+                                <div class="px-4 py-3 bg-brand-cream rounded-xl text-sm font-medium">Manitou Springs</div>
+                                <div class="px-4 py-3 bg-brand-cream rounded-xl text-sm font-medium">Falcon</div>
+                            </div>
+                            <p>
+                                Travel fees may apply for locations outside our standard service area. Please inquire when requesting an estimate.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Intellectual Property -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            7. Intellectual Property
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                All content on this website, including but not limited to text, graphics, logos, and images, is the property of Summit Painting & Handyman Services and is protected by copyright laws. We may use photos of completed projects for marketing purposes unless the client opts out in writing.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Dispute Resolution -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            8. Dispute Resolution
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                In the event of a dispute, both parties agree to attempt to resolve the matter through good-faith negotiation. If a resolution cannot be reached, disputes shall be resolved through binding arbitration in El Paso County, Colorado, in accordance with Colorado law.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Changes to Terms -->
+                    <div class="mb-12 pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            9. Changes to Terms
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                Summit Painting & Handyman Services reserves the right to modify these terms at any time. Changes will be posted on this page with an updated "Last Updated" date. Continued use of our services after changes constitutes acceptance of the revised terms.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Contact -->
+                    <div class="pt-8 border-t border-stone-100">
+                        <h2 class="text-2xl sm:text-3xl font-serif font-medium text-brand-dark mb-6">
+                            10. Contact Information
+                        </h2>
+                        <div class="space-y-4 text-base sm:text-lg text-brand-dark/80 leading-relaxed">
+                            <p>
+                                If you have any questions about these Terms of Use, please contact us:
+                            </p>
+                            <div class="bg-brand-cream rounded-2xl p-6 sm:p-8 mt-6">
+                                <p class="font-bold text-brand-dark mb-2">Summit Painting & Handyman Services</p>
+                                <p class="text-stone-600 mb-1">Colorado Springs, CO</p>
+                                <p class="text-stone-600">Email: <span class="font-medium text-brand-green">[EMAIL]</span></p>
+                                <p class="text-stone-600">Phone: <span class="font-medium text-brand-green">[PHONE]</span></p>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- Back to Home -->
+                <div class="text-center mt-12">
+                    <a
+                        href="/"
+                        class="inline-flex items-center gap-3 px-8 py-4 bg-brand-dark text-white rounded-full text-xs font-bold uppercase tracking-[0.3em] hover:bg-brand-green transition-all shadow-xl hover:-translate-y-1"
+                    >
+                        ← Back to Home
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <Footer />
+</Layout>