Spaces:

RusticV
/

perppermint

Running

App Files Files Community

RusticV commited on Sep 13, 2025

Commit

45caba5

verified ·

1 Parent(s): e52175e

PROJECT

Browse files

Build a brand-new, original website for a family-friendly horse-riding school in Raslouw, Centurion, South Africa. Business name: Peppermint Park (use this brand name throughout). All text, images, icons, and styles must be newly generated—do not reuse any third-party content.

SITE TYPE
- Fast, mobile-first, single-page site with smooth-scroll navigation and section anchors.
- Sections (in order): Hero • About • Programs • Timetable & Pricing • Gallery • Testimonials • Location & Contact • Footer.

BRAND & STYLE
- Vibe: warm, welcoming, kids-friendly professionalism.
- Palette: Mint (#75E6B0), Charcoal (#1F2937), Off-white (#F9FAFB), Accent Gold (#F5C76B).
- Typography: clean, friendly sans (system fallback acceptable). Large, readable headings. Rounded buttons, soft shadows, 8–12px radii.
- Subtle motion only; respect prefers-reduced-motion.

GLOBAL UX
- Sticky header with logo text “Peppermint Park” and nav links (About, Programs, Pricing, Gallery, Contact).
- Primary CTAs: “WhatsApp Us”, “Call Now”, “Book a Lesson”.
- Add a sticky WhatsApp button on mobile (bottom-right).
- Clear contrast, big touch targets, keyboard-navigable controls, visible focus states.

HERO
- Background: soft stable/arena imagery (generate original, kid-friendly).
- Headline: “Horse riding lessons in Raslouw, Centurion — ages 4+”
- Subhead (1 sentence): safety-first instructors, gentle horses, confidence-building lessons.
- Buttons: “Book a Lesson” (scroll to Contact), “WhatsApp Us” (link placeholder), “Call Now” (link placeholder).

ABOUT
- Two short paragraphs: safety focus, beginner-friendly approach, gentle introduction for little riders, structured progress for older riders.
- Three icon “pillars”: Safety • Fun • Progress (each with one-line description).

PROGRAMS (cards grid)
Create four program cards with friendly one-liners and “Enquire” buttons:
1) Mini Riders (4–7): playful basics, tiny tack, lots of reassurance.
2) Young Riders (8–12): foundations, balance, trotting skills.
3) Teens & Adults: confident handling, posture, progressive lessons.
4) Horse-Care Workshops: grooming, tacking, stable safety.

TIMETABLE & PRICING
- Simple weekly timetable table (Mon–Fri afternoons; Sat mornings). Make it easy to edit.
- Pricing examples in ZAR (editable):
• Trial Lesson (30 min): R200
• Standard Lesson (45–60 min): R300
• Monthly Pack (4 lessons): R1,050
• Pair Lesson (per rider): R250
- Note: “Prices subject to change — confirm via WhatsApp.”
- Add a slim CTA bar: “Questions? Tap to chat.”

GALLERY
- 9–12 original, friendly images (kids with helmets, instructor guidance, arenas, ponies). Use a lightbox on click and short, helpful alt text (e.g., “Child learning to trot with instructor beside”).

TESTIMONIALS
- Three short quotes (first names only). Keep it natural, 1–2 lines each. Optional star icons.

LOCATION & CONTACT
- Show address (placeholder), phone (placeholder), WhatsApp (placeholder), email (placeholder).
- Embed a map placeholder for Raslouw, Centurion.
- Contact form (client-side validation): name, email, phone, message. Include honeypot spam trap; show success/fail toasts.
- Under the form, list basic safety notes (helmets provided, supervised sessions, what to wear).

FOOTER
- Quick links (About, Programs, Pricing, Gallery, Contact), hours, CTAs, © {current year} Peppermint Park.
- Links to Privacy Policy and Terms (generate simple placeholder pages/sections).

ACCESSIBILITY
- One H1 per page; semantic H2/H3 for sections; aria-labels for icon buttons; alt text for all images; logical tab order.
- Ensure color contrast meets WCAG AA.

PERFORMANCE
- Convert images to WebP/AVIF; set width/height; `loading="lazy"` and `decoding="async"`.
- Inline critical CSS for hero; defer noncritical JS; minify assets; aim for green Core Web Vitals on mobile.

SEO
- Unique <title> and meta description for Home.
- Open Graph + Twitter cards (use hero image).
- JSON-LD LocalBusiness (fill with placeholders I can edit): name=Peppermint Park; address=Raslouw, Centurion, Gauteng; phone=+27 [placeholder]; url=https://peppermintpark.co.za/; openingHours=Mon-Sat sample times; sameAs placeholders for Instagram/Facebook.

EDITABILITY
- Centralize contact details (phone, WhatsApp, email, address, hours) in a small config block so I can update once.
- Keep timetable and pricing in a simple JSON object for quick edits.

DELIVERABLE
- Ship as a clean, production-ready static site (HTML/CSS/vanilla JS).
- Provide short in-file comments explaining where to edit contact details, timetable, pricing, and WhatsApp/tel links.
- Initial Deployment

Files changed (3) hide show

README.md +7 -5
index.html +775 -18
prompts.txt +82 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Perppermint
-emoji: 👀
-colorFrom: red
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: perppermint
+emoji: 🐳
+colorFrom: gray
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,776 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Peppermint Park - Horse Riding School in Raslouw, Centurion</title>
+    <meta name="description" content="Family-friendly horse riding lessons in Raslouw, Centurion for ages 4+. Safety-first instructors, gentle horses, and confidence-building lessons.">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://peppermintpark.co.za/">
+    <meta property="og:title" content="Peppermint Park - Horse Riding School in Raslouw, Centurion">
+    <meta property="og:description" content="Family-friendly horse riding lessons in Raslouw, Centurion for ages 4+. Safety-first instructors, gentle horses, and confidence-building lessons.">
+    <meta property="og:image" content="http://static.photos/nature/1200x630/42">
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:url" content="https://peppermintpark.co.za/">
+    <meta name="twitter:title" content="Peppermint Park - Horse Riding School in Raslouw, Centurion">
+    <meta name="twitter:description" content="Family-friendly horse riding lessons in Raslouw, Centurion for ages 4+. Safety-first instructors, gentle horses, and confidence-building lessons.">
+    <meta name="twitter:image" content="http://static.photos/nature/1200x630/42">
+    <!-- Favicon -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐴</text></svg>">
+    <!-- Styles & Scripts -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        mint: '#75E6B0',
+                        charcoal: '#1F2937',
+                        gold: '#F5C76B',
+                        offwhite: '#F9FAFB'
+                    },
+                    fontFamily: {
+                        sans: ['Inter var', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        html {
+            scroll-behavior: smooth;
+        }
+        @media (prefers-reduced-motion: reduce) {
+            html {
+                scroll-behavior: auto;
+            }
+        }
+        .whatsapp-float {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            z-index: 100;
+        }
+        .lightbox {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.8);
+            z-index: 1000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        .lightbox.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .lightbox-content {
+            max-width: 90%;
+            max-height: 90%;
+        }
+        .lightbox-content img {
+            max-width: 100%;
+            max-height: 90vh;
+            border-radius: 8px;
+        }
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 1rem 2rem;
+            border-radius: 8px;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .toast.show {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body class="bg-offwhite text-charcoal font-sans">
+    <!-- Sticky Header -->
+    <header class="sticky top-0 z-50 bg-white shadow-md">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <a href="#" class="text-2xl font-bold text-mint">Peppermint Park</a>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#about" class="hover:text-mint transition">About</a>
+                <a href="#programs" class="hover:text-mint transition">Programs</a>
+                <a href="#pricing" class="hover:text-mint transition">Pricing</a>
+                <a href="#gallery" class="hover:text-mint transition">Gallery</a>
+                <a href="#contact" class="hover:text-mint transition">Contact</a>
+            </nav>
+            <button class="md:hidden" id="mobile-menu-button">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+        <!-- Mobile Menu -->
+        <div class="md:hidden hidden bg-white w-full py-2 px-4 shadow-md" id="mobile-menu">
+            <div class="flex flex-col space-y-3">
+                <a href="#about" class="hover:text-mint transition py-2">About</a>
+                <a href="#programs" class="hover:text-mint transition py-2">Programs</a>
+                <a href="#pricing" class="hover:text-mint transition py-2">Pricing</a>
+                <a href="#gallery" class="hover:text-mint transition py-2">Gallery</a>
+                <a href="#contact" class="hover:text-mint transition py-2">Contact</a>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="relative h-screen flex items-center justify-center bg-cover bg-center" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('http://static.photos/nature/1200x630/42');">
+        <div class="container mx-auto px-4 text-center text-white" data-aos="fade-up">
+            <h1 class="text-4xl md:text-6xl font-bold mb-4">Horse riding lessons in Raslouw, Centurion — ages 4+</h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Safety-first instructors, gentle horses, and confidence-building lessons in a welcoming environment.</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#contact" class="bg-mint hover:bg-opacity-90 text-charcoal font-bold py-3 px-6 rounded-full shadow-lg transition">Book a Lesson</a>
+                <a href="#" class="bg-white hover:bg-opacity-90 text-charcoal font-bold py-3 px-6 rounded-full shadow-lg transition flex items-center justify-center gap-2">
+                    <i data-feather="message-circle"></i> WhatsApp Us
+                </a>
+                <a href="#" class="bg-gold hover:bg-opacity-90 text-charcoal font-bold py-3 px-6 rounded-full shadow-lg transition flex items-center justify-center gap-2">
+                    <i data-feather="phone"></i> Call Now
+                </a>
+            </div>
+        </div>
+        <div class="absolute bottom-10 left-0 right-0 flex justify-center">
+            <a href="#about" class="animate-bounce">
+                <i data-feather="chevron-down" class="text-white w-10 h-10"></i>
+            </a>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12" data-aos="fade-up">Welcome to Peppermint Park</h2>
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div data-aos="fade-right">
+                    <p class="text-lg mb-4">At Peppermint Park, we believe horse riding should be accessible, safe, and enjoyable for everyone. Our family-friendly stable in Raslouw, Centurion offers a welcoming environment where children as young as 4 can begin their equestrian journey.</p>
+                    <p class="text-lg mb-8">Our experienced instructors specialize in gentle introductions for young riders while providing structured progress for older students. With well-trained horses and a focus on safety, we create positive experiences that build confidence and skills.</p>
+                </div>
+                <div data-aos="fade-left">
+                    <img src="http://static.photos/nature/640x360/43" alt="Children learning horse riding at Peppermint Park" class="rounded-lg shadow-xl w-full">
+                </div>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8 mt-16">
+                <div class="bg-offwhite p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="100">
+                    <div class="bg-mint text-charcoal w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="shield" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Safety First</h3>
+                    <p>Certified helmets, supervised sessions, and gentle horses selected for temperament.</p>
+                </div>
+                <div class="bg-offwhite p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="200">
+                    <div class="bg-mint text-charcoal w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="smile" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Fun Learning</h3>
+                    <p>Age-appropriate lessons that build confidence through engaging activities.</p>
+                </div>
+                <div class="bg-offwhite p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="300">
+                    <div class="bg-mint text-charcoal w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="trending-up" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Structured Progress</h3>
+                    <p>Clear milestones and positive reinforcement to track development.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Programs Section -->
+    <section id="programs" class="py-20 bg-offwhite">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12" data-aos="fade-up">Our Riding Programs</h2>
+            <p class="text-xl text-center max-w-3xl mx-auto mb-16" data-aos="fade-up" data-aos-delay="100">We offer tailored programs for different age groups and skill levels, all designed to create positive experiences with horses.</p>
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Mini Riders -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="100">
+                    <img src="http://static.photos/people/640x360/101" alt="Young child riding a pony with instructor" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Mini Riders (4-7)</h3>
+                        <p class="mb-4">Playful basics with tiny tack and lots of reassurance for our youngest equestrians.</p>
+                        <a href="#contact" class="inline-block bg-mint hover:bg-opacity-90 text-charcoal font-bold py-2 px-4 rounded-full transition">Enquire</a>
+                    </div>
+                </div>
+                <!-- Young Riders -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="200">
+                    <img src="http://static.photos/people/640x360/102" alt="Child learning to trot" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Young Riders (8-12)</h3>
+                        <p class="mb-4">Foundational skills focusing on balance, steering, and introductory trotting.</p>
+                        <a href="#contact" class="inline-block bg-mint hover:bg-opacity-90 text-charcoal font-bold py-2 px-4 rounded-full transition">Enquire</a>
+                    </div>
+                </div>
+                <!-- Teens & Adults -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="300">
+                    <img src="http://static.photos/people/640x360/103" alt="Teenager riding a horse" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Teens & Adults</h3>
+                        <p class="mb-4">Confident handling, proper posture, and progressive riding techniques.</p>
+                        <a href="#contact" class="inline-block bg-mint hover:bg-opacity-90 text-charcoal font-bold py-2 px-4 rounded-full transition">Enquire</a>
+                    </div>
+                </div>
+                <!-- Horse-Care Workshops -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="400">
+                    <img src="http://static.photos/people/640x360/104" alt="Children grooming a horse" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Horse-Care Workshops</h3>
+                        <p class="mb-4">Learn grooming, tacking, and stable safety in hands-on sessions.</p>
+                        <a href="#contact" class="inline-block bg-mint hover:bg-opacity-90 text-charcoal font-bold py-2 px-4 rounded-full transition">Enquire</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Timetable & Pricing Section -->
+    <section id="pricing" class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12" data-aos="fade-up">Timetable & Pricing</h2>
+            <div class="grid md:grid-cols-2 gap-12">
+                <div data-aos="fade-right">
+                    <h3 class="text-2xl font-bold mb-6">Weekly Schedule</h3>
+                    <div class="bg-offwhite rounded-xl shadow-md overflow-hidden">
+                        <table class="w-full">
+                            <thead class="bg-mint text-charcoal">
+                                <tr>
+                                    <th class="py-3 px-4 text-left">Day</th>
+                                    <th class="py-3 px-4 text-left">Times</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="border-b border-gray-200">
+                                    <td class="py-3 px-4 font-medium">Monday</td>
+                                    <td class="py-3 px-4">15:00 - 17:00</td>
+                                </tr>
+                                <tr class="border-b border-gray-200">
+                                    <td class="py-3 px-4 font-medium">Tuesday</td>
+                                    <td class="py-3 px-4">15:00 - 17:00</td>
+                                </tr>
+                                <tr class="border-b border-gray-200">
+                                    <td class="py-3 px-4 font-medium">Wednesday</td>
+                                    <td class="py-3 px-4">15:00 - 17:00</td>
+                                </tr>
+                                <tr class="border-b border-gray-200">
+                                    <td class="py-3 px-4 font-medium">Thursday</td>
+                                    <td class="py-3 px-4">15:00 - 17:00</td>
+                                </tr>
+                                <tr class="border-b border-gray-200">
+                                    <td class="py-3 px-4 font-medium">Friday</td>
+                                    <td class="py-3 px-4">15:00 - 17:00</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-3 px-4 font-medium">Saturday</td>
+                                    <td class="py-3 px-4">08:00 - 12:00</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <p class="mt-4 text-sm text-gray-600">*Schedule may vary during school holidays. Closed on Sundays and public holidays.</p>
+                </div>
+                <div data-aos="fade-left">
+                    <h3 class="text-2xl font-bold mb-6">Lesson Pricing (ZAR)</h3>
+                    <div class="bg-offwhite rounded-xl shadow-md overflow-hidden">
+                        <table class="w-full">
+                            <thead class="bg-mint text-charcoal">
+                                <tr>
+                                    <th class="py-3 px-4 text-left">Lesson Type</th>
+                                    <th class="py-3 px-4 text-left">Price</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="border-b border-gray-200">
+                                    <td class="py-3 px-4 font-medium">Trial Lesson (30 min)</td>
+                                    <td class="py-3 px-4">R200</td>
+                                </tr>
+                                <tr class="border-b border-gray-200">
+                                    <td class="py-3 px-4 font-medium">Standard Lesson (45-60 min)</td>
+                                    <td class="py-3 px-4">R300</td>
+                                </tr>
+                                <tr class="border-b border-gray-200">
+                                    <td class="py-3 px-4 font-medium">Monthly Pack (4 lessons)</td>
+                                    <td class="py-3 px-4">R1,050</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-3 px-4 font-medium">Pair Lesson (per rider)</td>
+                                    <td class="py-3 px-4">R250</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <p class="mt-4 text-sm text-gray-600">*Prices subject to change — please confirm via WhatsApp before booking.</p>
+                    <div class="mt-8 bg-gold bg-opacity-20 p-6 rounded-xl border border-gold" data-aos="fade-up">
+                        <h4 class="text-xl font-bold mb-2">Questions?</h4>
+                        <p class="mb-4">We're happy to discuss our programs and help you find the right fit.</p>
+                        <a href="#" class="inline-block bg-gold hover:bg-opacity-90 text-charcoal font-bold py-2 px-6 rounded-full transition flex items-center gap-2">
+                            <i data-feather="message-circle"></i> Tap to Chat
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Gallery Section -->
+    <section id="gallery" class="py-20 bg-offwhite">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12" data-aos="fade-up">Our Riding School</h2>
+            <p class="text-xl text-center max-w-3xl mx-auto mb-16" data-aos="fade-up" data-aos-delay="100">Take a look at our facilities, gentle horses, and happy riders.</p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="gallery-item" data-aos="zoom-in" data-aos-delay="100">
+                    <img src="http://static.photos/people/640x360/105" alt="Child with helmet smiling on a pony" class="w-full h-64 object-cover rounded-lg cursor-pointer hover:opacity-90 transition">
+                </div>
+                <div class="gallery-item" data-aos="zoom-in" data-aos-delay="200">
+                    <img src="http://static.photos/people/640x360/106" alt="Instructor helping young rider" class="w-full h-64 object-cover rounded-lg cursor-pointer hover:opacity-90 transition">
+                </div>
+                <div class="gallery-item" data-aos="zoom-in" data-aos-delay="300">
+                    <img src="http://static.photos/people/640x360/107" alt="Group of children with horses" class="w-full h-64 object-cover rounded-lg cursor-pointer hover:opacity-90 transition">
+                </div>
+                <div class="gallery-item" data-aos="zoom-in" data-aos-delay="100">
+                    <img src="http://static.photos/people/640x360/108" alt="Teenager riding in arena" class="w-full h-64 object-cover rounded-lg cursor-pointer hover:opacity-90 transition">
+                </div>
+                <div class="gallery-item" data-aos="zoom-in" data-aos-delay="200">
+                    <img src="http://static.photos/people/640x360/109" alt="Children grooming a horse" class="w-full h-64 object-cover rounded-lg cursor-pointer hover:opacity-90 transition">
+                </div>
+                <div class="gallery-item" data-aos="zoom-in" data-aos-delay="300">
+                    <img src="http://static.photos/people/640x360/110" alt="Family watching riding lesson" class="w-full h-64 object-cover rounded-lg cursor-pointer hover:opacity-90 transition">
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="#contact" class="inline-block bg-mint hover:bg-opacity-90 text-charcoal font-bold py-3 px-8 rounded-full shadow-lg transition" data-aos="fade-up">
+                    Book Your Lesson Today
+                </a>
+            </div>
+        </div>
+        <!-- Lightbox -->
+        <div class="lightbox" id="lightbox">
+            <button class="absolute top-4 right-4 text-white text-4xl" id="close-lightbox">&times;</button>
+            <div class="lightbox-content">
+                <img id="lightbox-image" src="" alt="">
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials Section -->
+    <section class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12" data-aos="fade-up">What Families Say</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-offwhite p-8 rounded-xl" data-aos="fade-up" data-aos-delay="100">
+                    <div class="flex mb-4 text-gold">
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                    </div>
+                    <p class="text-lg italic mb-4">"My 5-year-old was nervous at first, but the instructors were so patient. Now she asks every day if it's 'horse day'!"</p>
+                    <p class="font-medium">— Sarah, mom of Emma</p>
+                </div>
+                <div class="bg-offwhite p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200">
+                    <div class="flex mb-4 text-gold">
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                    </div>
+                    <p class="text-lg italic mb-4">"We've seen such growth in our son's confidence since starting lessons. The structured yet fun approach is perfect."</p>
+                    <p class="font-medium">— James, dad of Noah</p>
+                </div>
+                <div class="bg-offwhite p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300">
+                    <div class="flex mb-4 text-gold">
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                    </div>
+                    <p class="text-lg italic mb-4">"As an adult beginner, I was intimidated at first, but the instructors made me feel comfortable immediately."</p>
+                    <p class="font-medium">— Thandi, new rider</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Location & Contact Section -->
+    <section id="contact" class="py-20 bg-mint bg-opacity-10">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12" data-aos="fade-up">Visit Us</h2>
+            <div class="grid md:grid-cols-2 gap-12">
+                <div data-aos="fade-right">
+                    <h3 class="text-2xl font-bold mb-6">Contact Details</h3>
+                    <div class="space-y-4">
+                        <div class="flex items-start gap-4">
+                            <div class="bg-mint text-charcoal rounded-full p-3">
+                                <i data-feather="map-pin" class="w-5 h-5"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Address</h4>
+                                <p>123 Equestrian Lane, Raslouw<br>Centurion, Gauteng</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start gap-4">
+                            <div class="bg-mint text-charcoal rounded-full p-3">
+                                <i data-feather="phone" class="w-5 h-5"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Phone</h4>
+                                <a href="tel:+27123456789" class="hover:underline">+27 12 345 6789</a>
+                            </div>
+                        </div>
+                        <div class="flex items-start gap-4">
+                            <div class="bg-mint text-charcoal rounded-full p-3">
+                                <i data-feather="message-circle" class="w-5 h-5"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">WhatsApp</h4>
+                                <a href="https://wa.me/27123456789" class="hover:underline">+27 12 345 6789</a>
+                            </div>
+                        </div>
+                        <div class="flex items-start gap-4">
+                            <div class="bg-mint text-charcoal rounded-full p-3">
+                                <i data-feather="mail" class="w-5 h-5"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Email</h4>
+                                <a href="mailto:info@peppermintpark.co.za" class="hover:underline">info@peppermintpark.co.za</a>
+                            </div>
+                        </div>
+                        <div class="flex items-start gap-4">
+                            <div class="bg-mint text-charcoal rounded-full p-3">
+                                <i data-feather="clock" class="w-5 h-5"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Hours</h4>
+                                <p>Monday-Friday: 15:00-17:00<br>Saturday: 08:00-12:00<br>Closed Sundays</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-8 bg-white p-6 rounded-xl shadow-md" data-aos="zoom-in">
+                        <h4 class="text-xl font-bold mb-4">Safety Notes</h4>
+                        <ul class="space-y-2">
+                            <li class="flex items-start gap-2">
+                                <i data-feather="check" class="w-5 h-5 text-mint mt-1"></i>
+                                <span>Certified helmets provided for all riders</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <i data-feather="check" class="w-5 h-5 text-mint mt-1"></i>
+                                <span>Constant supervision by qualified instructors</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <i data-feather="check" class="w-5 h-5 text-mint mt-1"></i>
+                                <span>Comfortable clothing and closed-toe shoes required</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <i data-feather="check" class="w-5 h-5 text-mint mt-1"></i>
+                                <span>Horses selected for gentle temperament</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div data-aos="fade-left">
+                    <h3 class="text-2xl font-bold mb-6">Contact Form</h3>
+                    <form id="contact-form" class="bg-white p-8 rounded-xl shadow-md">
+                        <div class="mb-4">
+                            <label for="name" class="block font-medium mb-2">Name</label>
+                            <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-mint focus:border-transparent">
+                        </div>
+                        <div class="mb-4">
+                            <label for="email" class="block font-medium mb-2">Email</label>
+                            <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-mint focus:border-transparent">
+                        </div>
+                        <div class="mb-4">
+                            <label for="phone" class="block font-medium mb-2">Phone</label>
+                            <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-mint focus:border-transparent">
+                        </div>
+                        <div class="mb-4">
+                            <label for="interest" class="block font-medium mb-2">Interested In</label>
+                            <select id="interest" name="interest" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-mint focus:border-transparent">
+                                <option value="">Select a program</option>
+                                <option value="mini">Mini Riders (4-7)</option>
+                                <option value="young">Young Riders (8-12)</option>
+                                <option value="teens">Teens & Adults</option>
+                                <option value="workshop">Horse-Care Workshop</option>
+                            </select>
+                        </div>
+                        <div class="mb-4">
+                            <label for="message" class="block font-medium mb-2">Message</label>
+                            <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-mint focus:border-transparent"></textarea>
+                        </div>
+                        <!-- Honeypot field -->
+                        <input type="text" name="honeypot" style="display: none;">
+                        <button type="submit" class="w-full bg-mint hover:bg-opacity-90 text-charcoal font-bold py-3 px-6 rounded-lg shadow-md transition">
+                            Send Message
+                        </button>
+                    </form>
+                    <div class="mt-8 bg-white p-6 rounded-xl shadow-md overflow-hidden" data-aos="zoom-in">
+                        <h4 class="text-xl font-bold mb-4">Location</h4>
+                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden">
+                            <!-- Map placeholder - replace with actual map embed -->
+                            <img src="http://static.photos/minimal/640x360/111" alt="Map of Raslouw, Centurion location" class="w-full h-full object-cover">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-charcoal text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Peppermint Park</h3>
+                    <p>Family-friendly horse riding school in Raslouw, Centurion. Ages 4+ welcome.</p>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#about" class="hover:text-mint transition">About Us</a></li>
+                        <li><a href="#programs" class="hover:text-mint transition">Programs</a></li>
+                        <li><a href="#pricing" class="hover:text-mint transition">Pricing</a></li>
+                        <li><a href="#gallery" class="hover:text-mint transition">Gallery</a></li>
+                        <li><a href="#contact" class="hover:text-mint transition">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Hours</h4>
+                    <ul class="space-y-2">
+                        <li>Mon-Fri: 15:00-17:00</li>
+                        <li>Sat: 08:00-12:00</li>
+                        <li>Sun: Closed</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Get In Touch</h4>
+                    <div class="space-y-2">
+                        <a href="tel:+27123456789" class="flex items-center gap-2 hover:text-mint transition">
+                            <i data-feather="phone" class="w-4 h-4"></i> +27 12 345 6789
+                        </a>
+                        <a href="https://wa.me/27123456789" class="flex items-center gap-2 hover:text-mint transition">
+                            <i data-feather="message-circle" class="w-4 h-4"></i> WhatsApp
+                        </a>
+                        <a href="mailto:info@peppermintpark.co.za" class="flex items-center gap-2 hover:text-mint transition">
+                            <i data-feather="mail" class="w-4 h-4"></i> Email Us
+                        </a>
+                    </div>
+                    <div class="flex space-x-4 mt-4">
+                        <a href="#" aria-label="Facebook" class="hover:text-mint transition">
+                            <i data-feather="facebook" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" aria-label="Instagram" class="hover:text-mint transition">
+                            <i data-feather="instagram" class="w-5 h-5"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p>© <span id="current-year"></span> Peppermint Park. All rights reserved.</p>
+                <div class="flex space-x-4 mt-4 md:mt-0">
+                    <a href="#" class="hover:text-mint transition">Privacy Policy</a>
+                    <a href="#" class="hover:text-mint transition">Terms of Service</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- WhatsApp Float Button (Mobile Only) -->
+    <a href="#" class="whatsapp-float md:hidden bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition">
+        <i data-feather="message-circle" class="w-6 h-6"></i>
+    </a>
+    <!-- Toast Notification -->
+    <div id="toast" class="toast bg-mint text-charcoal font-bold"></div>
+    <!-- Scripts -->
+    <script>
+        // Initialize AOS animation library
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        // Initialize Feather Icons
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            // Set current year in footer
+            document.getElementById('current-year').textContent = new Date().getFullYear();
+            // Mobile menu toggle
+            const mobileMenuButton = document.getElementById('mobile-menu-button');
+            const mobileMenu = document.getElementById('mobile-menu');
+            mobileMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.toggle('hidden');
+            });
+            // Lightbox functionality for gallery
+            const galleryItems = document.querySelectorAll('.gallery-item img');
+            const lightbox = document.getElementById('lightbox');
+            const lightboxImg = document.getElementById('lightbox-image');
+            const closeLightbox = document.getElementById('close-lightbox');
+            galleryItems.forEach(item => {
+                item.addEventListener('click', function() {
+                    lightboxImg.src = this.src;
+                    lightboxImg.alt = this.alt;
+                    lightbox.classList.add('active');
+                });
+            });
+            closeLightbox.addEventListener('click', function() {
+                lightbox.classList.remove('active');
+            });
+            lightbox.addEventListener('click', function(e) {
+                if (e.target === lightbox) {
+                    lightbox.classList.remove('active');
+                }
+            });
+            // Contact form handling
+            const contactForm = document.getElementById('contact-form');
+            const toast = document.getElementById('toast');
+            contactForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                // Simple validation
+                const name = document.getElementById('name').value;
+                const email = document.getElementById('email').value;
+                const honeypot = document.getElementsByName('honeypot')[0].value;
+                // Check honeypot field for bots
+                if (honeypot) {
+                    return;
+                }
+                if (!name || !email) {
+                    showToast('Please fill in required fields', 'error');
+                    return;
+                }
+                // In a real implementation, you would send the form data to a server here
+                // For this example, we'll just show a success message
+                showToast('Message sent successfully! We\'ll contact you soon.', 'success');
+                contactForm.reset();
+            });
+            function showToast(message, type) {
+                toast.textContent = message;
+                toast.classList.remove('bg-red-500', 'bg-mint');
+                if (type === 'error') {
+                    toast.classList.add('bg-red-500');
+                } else {
+                    toast.classList.add('bg-mint');
+                }
+                toast.classList.add('show');
+                setTimeout(() => {
+                    toast.classList.remove('show');
+                }, 5000);
+            }
+        });
+    </script>
+    <!-- JSON-LD for LocalBusiness schema -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "HorseRidingSchool",
+        "name": "Peppermint Park",
+        "image": "http://static.photos/nature/1200x630/42",
+        "@id": "https://peppermintpark.co.za",
+        "url": "https://peppermintpark.co.za",
+        "telephone": "+27123456789",
+        "address": {
+            "@type": "PostalAddress",
+            "streetAddress": "123 Equestrian Lane",
+            "addressLocality": "Raslouw",
+            "addressRegion": "Gauteng",
+            "postalCode": "0157",
+            "addressCountry": "ZA"
+        },
+        "geo": {
+            "@type": "GeoCoordinates",
+            "latitude": "-25.8646",
+            "longitude": "28.1629"
+        },
+        "openingHoursSpecification": {
+            "@type": "OpeningHoursSpecification",
+            "dayOfWeek": [
+                "Monday",
+                "Tuesday",
+                "Wednesday",
+                "Thursday",
+                "Friday"
+            ],
+            "opens": "15:00",
+            "closes": "17:00"
+        },
+        "sameAs": [
+            "https://www.facebook.com/peppermintpark",
+            "https://www.instagram.com/peppermintpark"
+        ]
+    }
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,82 @@

+PROJECT
+Build a brand-new, original website for a family-friendly horse-riding school in Raslouw, Centurion, South Africa. Business name: Peppermint Park (use this brand name throughout). All text, images, icons, and styles must be newly generated—do not reuse any third-party content.
+SITE TYPE
+- Fast, mobile-first, single-page site with smooth-scroll navigation and section anchors.
+- Sections (in order): Hero • About • Programs • Timetable & Pricing • Gallery • Testimonials • Location & Contact • Footer.
+BRAND & STYLE
+- Vibe: warm, welcoming, kids-friendly professionalism.
+- Palette: Mint (#75E6B0), Charcoal (#1F2937), Off-white (#F9FAFB), Accent Gold (#F5C76B).
+- Typography: clean, friendly sans (system fallback acceptable). Large, readable headings. Rounded buttons, soft shadows, 8–12px radii.
+- Subtle motion only; respect prefers-reduced-motion.
+GLOBAL UX
+- Sticky header with logo text “Peppermint Park” and nav links (About, Programs, Pricing, Gallery, Contact).
+- Primary CTAs: “WhatsApp Us”, “Call Now”, “Book a Lesson”.
+- Add a sticky WhatsApp button on mobile (bottom-right).
+- Clear contrast, big touch targets, keyboard-navigable controls, visible focus states.
+HERO
+- Background: soft stable/arena imagery (generate original, kid-friendly).
+- Headline: “Horse riding lessons in Raslouw, Centurion — ages 4+”
+- Subhead (1 sentence): safety-first instructors, gentle horses, confidence-building lessons.
+- Buttons: “Book a Lesson” (scroll to Contact), “WhatsApp Us” (link placeholder), “Call Now” (link placeholder).
+ABOUT
+- Two short paragraphs: safety focus, beginner-friendly approach, gentle introduction for little riders, structured progress for older riders.
+- Three icon “pillars”: Safety • Fun • Progress (each with one-line description).
+PROGRAMS (cards grid)
+Create four program cards with friendly one-liners and “Enquire” buttons:
+1) Mini Riders (4–7): playful basics, tiny tack, lots of reassurance.
+2) Young Riders (8–12): foundations, balance, trotting skills.
+3) Teens & Adults: confident handling, posture, progressive lessons.
+4) Horse-Care Workshops: grooming, tacking, stable safety.
+TIMETABLE & PRICING
+- Simple weekly timetable table (Mon–Fri afternoons; Sat mornings). Make it easy to edit.
+- Pricing examples in ZAR (editable):
+  • Trial Lesson (30 min): R200
+  • Standard Lesson (45–60 min): R300
+  • Monthly Pack (4 lessons): R1,050
+  • Pair Lesson (per rider): R250
+- Note: “Prices subject to change — confirm via WhatsApp.”
+- Add a slim CTA bar: “Questions? Tap to chat.”
+GALLERY
+- 9–12 original, friendly images (kids with helmets, instructor guidance, arenas, ponies). Use a lightbox on click and short, helpful alt text (e.g., “Child learning to trot with instructor beside”).
+TESTIMONIALS
+- Three short quotes (first names only). Keep it natural, 1–2 lines each. Optional star icons.
+LOCATION & CONTACT
+- Show address (placeholder), phone (placeholder), WhatsApp (placeholder), email (placeholder).
+- Embed a map placeholder for Raslouw, Centurion.
+- Contact form (client-side validation): name, email, phone, message. Include honeypot spam trap; show success/fail toasts.
+- Under the form, list basic safety notes (helmets provided, supervised sessions, what to wear).
+FOOTER
+- Quick links (About, Programs, Pricing, Gallery, Contact), hours, CTAs, © {current year} Peppermint Park.
+- Links to Privacy Policy and Terms (generate simple placeholder pages/sections).
+ACCESSIBILITY
+- One H1 per page; semantic H2/H3 for sections; aria-labels for icon buttons; alt text for all images; logical tab order.
+- Ensure color contrast meets WCAG AA.
+PERFORMANCE
+- Convert images to WebP/AVIF; set width/height; `loading="lazy"` and `decoding="async"`.
+- Inline critical CSS for hero; defer noncritical JS; minify assets; aim for green Core Web Vitals on mobile.
+SEO
+- Unique <title> and meta description for Home.
+- Open Graph + Twitter cards (use hero image).
+- JSON-LD LocalBusiness (fill with placeholders I can edit): name=Peppermint Park; address=Raslouw, Centurion, Gauteng; phone=+27 [placeholder]; url=https://peppermintpark.co.za/; openingHours=Mon-Sat sample times; sameAs placeholders for Instagram/Facebook.
+EDITABILITY
+- Centralize contact details (phone, WhatsApp, email, address, hours) in a small config block so I can update once.
+- Keep timetable and pricing in a simple JSON object for quick edits.
+DELIVERABLE
+- Ship as a clean, production-ready static site (HTML/CSS/vanilla JS).
+- Provide short in-file comments explaining where to edit contact details, timetable, pricing, and WhatsApp/tel links.