Spaces:
Running
Running
| <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">×</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> | |