mac / index.html
storiesclips's picture
make the nav bar black - Follow Up Deployment
7a50ee5 verified
Raw History Blame Contribute Delete
39.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protea Ridge | Nature. Comfort. Events. Reimagined.</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* Custom CSS for elements that need more specific styling */
body {
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.hero-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: #D4AF37;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.hamburger span {
display: block;
width: 25px;
height: 2px;
background: white;
margin: 5px 0;
transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.section-title {
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 3px;
background: #D4AF37;
margin: 1rem auto 2rem;
}
.testimonial-slide {
display: none;
animation: fade 1s ease;
}
.testimonial-slide.active {
display: block;
}
@keyframes fade {
from { opacity: 0.4; }
to { opacity: 1; }
}
.gallery-item {
position: relative;
overflow: hidden;
cursor: pointer;
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(34, 139, 34, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 2000;
padding: 2rem;
text-align: center;
}
.lightbox.active {
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;
border: 5px solid white;
border-radius: 5px;
}
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
font-family: 'Montserrat', sans-serif;
transition: all 0.2s ease;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-group label {
position: absolute;
top: 1rem;
left: 1rem;
color: #999;
transition: all 0.2s ease;
pointer-events: none;
}
.form-group input:focus, .form-group textarea:focus {
outline: none;
border-color: #228B22;
box-shadow: 0 0 0 2px rgba(34, 139, 34, 0.2);
}
.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label {
top: -0.5rem;
left: 0.8rem;
font-size: 0.8rem;
background: white;
padding: 0 0.3rem;
color: #228B22;
}
</style>
</head>
<body class="text-gray-800">
<!-- Header/Navigation -->
<header class="fixed top-0 left-0 w-full z-50 py-6 transition-all duration-300 bg-black" id="header">
<div class="container mx-auto px-6 flex justify-between items-center">
<a href="/" class="text-3xl font-bold text-white">
<span class="text-yellow-600">Protea</span>Ridge
</a>
<nav class="hidden md:flex space-x-8" id="main-nav">
<a href="#home" class="nav-link text-white font-medium hover:text-yellow-400">Home</a>
<a href="#about" class="nav-link text-white font-medium hover:text-yellow-400">About</a>
<a href="#accommodation" class="nav-link text-white font-medium hover:text-yellow-400">Accommodation</a>
<a href="#events" class="nav-link text-white font-medium hover:text-yellow-400">Events</a>
<a href="#gallery" class="nav-link text-white font-medium hover:text-yellow-400">Gallery</a>
<a href="#contact" class="nav-link text-white font-medium hover:text-yellow-400">Contact</a>
</nav>
<button class="md:hidden focus:outline-none z-50" id="hamburger" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<!-- Mobile Menu -->
<div class="fixed top-0 right-0 w-4/5 max-w-xs h-full bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-40 pt-20 px-6" id="mobile-menu">
<nav class="flex flex-col space-y-6">
<a href="#home" class="text-gray-800 font-medium hover:text-yellow-600">Home</a>
<a href="#about" class="text-gray-800 font-medium hover:text-yellow-600">About</a>
<a href="#accommodation" class="text-gray-800 font-medium hover:text-yellow-600">Accommodation</a>
<a href="#events" class="text-gray-800 font-medium hover:text-yellow-600">Events</a>
<a href="#gallery" class="text-gray-800 font-medium hover:text-yellow-600">Gallery</a>
<a href="#contact" class="text-gray-800 font-medium hover:text-yellow-600">Contact</a>
</nav>
</div>
<!-- Hero Section -->
<section id="home" class="relative h-screen min-h-[600px] flex items-center justify-center text-center text-white overflow-hidden">
<div class="hero-video">
<video autoplay muted loop playsinline>
<source src="assets/video/protea-ridge.mp4" type="video/mp4">
<!-- Fallback image if video doesn't load -->
<img src="assets/images/hero-fallback.jpg" alt="Protea Ridge Lodge">
</video>
<div class="video-overlay"></div>
</div>
<div class="relative z-10 max-w-4xl px-6">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-shadow">Relax. Rejuvenate. Reconnect at Protea Ridge.</h1>
<p class="text-xl md:text-2xl mb-8 font-light text-shadow">Nature. Comfort. Events. Reimagined.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4 mt-8">
<a href="#accommodation" class="inline-block px-8 py-3 bg-yellow-600 text-gray-900 font-medium rounded-full hover:bg-yellow-500 transition-all shadow-lg hover:shadow-xl hover:-translate-y-1">Book a Stay</a>
<a href="#events" class="inline-block px-8 py-3 bg-green-700 text-white font-medium rounded-full hover:bg-green-600 transition-all shadow-lg hover:shadow-xl hover:-translate-y-1">Plan Your Event</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="rounded-xl overflow-hidden shadow-xl">
<img src="assets/images/about-cottages.jpg" alt="Protea Ridge Cottages" class="w-full h-auto transition-transform duration-500 hover:scale-105" loading="lazy">
</div>
<div>
<h2 class="text-3xl font-bold text-green-800 mb-6">Discover Protea Ridge</h2>
<p class="text-lg mb-8 text-gray-700">Located in tranquil Randburg, Protea Ridge offers luxury cottages & event spaces designed for rest and productivity. Our serene environment provides the perfect escape from the hustle and bustle of city life while still being conveniently located.</p>
<a href="/about" class="inline-block px-6 py-2 border-2 border-yellow-600 text-yellow-600 font-medium rounded-full hover:bg-yellow-600 hover:text-gray-900 transition-all">Read More About Our Story</a>
</div>
</div>
</div>
</section>
<!-- Accommodation Section -->
<section id="accommodation" class="py-20">
<div class="container mx-auto px-6">
<h2 class="section-title text-3xl font-bold text-center text-green-800 mb-4">Our Accommodation</h2>
<p class="text-xl text-center text-gray-600 mb-12">Experience luxury in nature's embrace</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Cottage Suites -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
<div class="h-64 overflow-hidden">
<img src="assets/images/cottage-suites.jpg" alt="Cottage Suites" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" loading="lazy">
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-green-800 mb-2">Cottage Suites</h3>
<p class="text-gray-600 mb-6">Self-catering with modern comforts in a serene natural setting. Perfect for couples or small families looking for a peaceful retreat.</p>
<a href="/book/cottage" class="inline-block px-6 py-2 bg-yellow-600 text-gray-900 font-medium rounded-full hover:bg-yellow-500 transition-all">Book Now</a>
</div>
</div>
<!-- Executive Rooms -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
<div class="h-64 overflow-hidden">
<img src="assets/images/executive-rooms.jpg" alt="Executive Rooms" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" loading="lazy">
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-green-800 mb-2">Executive Rooms</h3>
<p class="text-gray-600 mb-6">Designed for professionals seeking comfort and productivity. Includes workspace and high-speed internet for business travelers.</p>
<a href="/book/executive" class="inline-block px-6 py-2 bg-yellow-600 text-gray-900 font-medium rounded-full hover:bg-yellow-500 transition-all">Book Now</a>
</div>
</div>
<!-- Nature Views -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
<div class="h-64 overflow-hidden">
<img src="assets/images/nature-views.jpg" alt="Nature Views" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" loading="lazy">
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-green-800 mb-2">Nature Views</h3>
<p class="text-gray-600 mb-6">Private patios & gardens with breathtaking natural scenery. Wake up to the sounds of birds and enjoy stunning sunsets.</p>
<a href="/book/nature" class="inline-block px-6 py-2 bg-yellow-600 text-gray-900 font-medium rounded-full hover:bg-yellow-500 transition-all">Book Now</a>
</div>
</div>
</div>
</div>
</section>
<!-- Events Section -->
<section id="events" class="py-20 bg-gray-900 text-white">
<div class="container mx-auto px-6">
<h2 class="section-title text-3xl font-bold text-center text-white mb-4">Conference & Event Venues</h2>
<p class="text-xl text-center text-gray-300 mb-12">Create unforgettable moments in our premium spaces</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Weddings -->
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700 transition-all duration-300 hover:-translate-y-2 hover:shadow-lg hover:bg-opacity-70">
<div class="text-4xl text-yellow-500 mb-6">
<i class="fas fa-heart"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Weddings</h3>
<p class="text-gray-300 mb-6">Celebrate your special day in our picturesque venue with customizable packages. Our dedicated team will ensure every detail is perfect.</p>
<a href="/events/weddings" class="inline-block px-6 py-2 border-2 border-white text-white font-medium rounded-full hover:bg-white hover:text-gray-900 transition-all">Request a Quote</a>
</div>
<!-- Corporate Retreats -->
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700 transition-all duration-300 hover:-translate-y-2 hover:shadow-lg hover:bg-opacity-70">
<div class="text-4xl text-yellow-500 mb-6">
<i class="fas fa-briefcase"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Corporate Retreats</h3>
<p class="text-gray-300 mb-6">Inspire your team with productive meetings in a tranquil environment. Our facilities include state-of-the-art conference technology.</p>
<a href="/events/corporate" class="inline-block px-6 py-2 border-2 border-white text-white font-medium rounded-full hover:bg-white hover:text-gray-900 transition-all">Request a Quote</a>
</div>
<!-- Private Events -->
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 border border-gray-700 transition-all duration-300 hover:-translate-y-2 hover:shadow-lg hover:bg-opacity-70">
<div class="text-4xl text-yellow-500 mb-6">
<i class="fas fa-glass-cheers"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Private Events</h3>
<p class="text-gray-300 mb-6">Host birthdays, anniversaries or special gatherings with our bespoke service. We'll customize the experience to your needs.</p>
<a href="/events/private" class="inline-block px-6 py-2 border-2 border-white text-white font-medium rounded-full hover:bg-white hover:text-gray-900 transition-all">Request a Quote</a>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 bg-yellow-50">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold text-green-800 mb-12">Guest Experiences</h2>
<div class="max-w-4xl mx-auto">
<!-- Testimonial 1 -->
<div class="testimonial-slide active">
<div class="text-yellow-500 text-2xl mb-6">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="text-xl italic mb-8">"The staff was beyond helpful. The venue? Stunning. We couldn't have asked for a better wedding experience."</p>
<p class="font-semibold text-green-800">— Sarah & James M.</p>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-slide">
<div class="text-yellow-500 text-2xl mb-6">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="text-xl italic mb-8">"We booked our wedding here and it was magical. Every detail was perfect and our guests are still talking about it."</p>
<p class="font-semibold text-green-800">— The Ndlovu Family</p>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-slide">
<div class="text-yellow-500 text-2xl mb-6">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="text-xl italic mb-8">"The perfect blend of luxury and nature. Our corporate retreat was productive and rejuvenating."</p>
<p class="font-semibold text-green-800">— TechSolutions Inc.</p>
</div>
</div>
<div class="mt-12">
<a href="https://www.tripadvisor.com" target="_blank" class="inline-flex items-center px-6 py-2 border-2 border-yellow-600 text-yellow-600 font-medium rounded-full hover:bg-yellow-600 hover:text-gray-900 transition-all">
<i class="fab fa-tripadvisor mr-2"></i> Read More Reviews
</a>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-20">
<div class="container mx-auto px-6">
<h2 class="section-title text-3xl font-bold text-center text-green-800 mb-4">Gallery</h2>
<p class="text-xl text-center text-gray-600 mb-12">Explore the beauty of Protea Ridge</p>
<div class="flex flex-wrap justify-center gap-4 mb-8">
<button class="filter-btn active px-4 py-2 border-2 border-green-700 text-green-700 font-medium rounded-full hover:bg-green-700 hover:text-white transition-all" data-filter="all">All</button>
<button class="filter-btn px-4 py-2 border-2 border-green-700 text-green-700 font-medium rounded-full hover:bg-green-700 hover:text-white transition-all" data-filter="cottages">Cottages</button>
<button class="filter-btn px-4 py-2 border-2 border-green-700 text-green-700 font-medium rounded-full hover:bg-green-700 hover:text-white transition-all" data-filter="weddings">Weddings</button>
<button class="filter-btn px-4 py-2 border-2 border-green-700 text-green-700 font-medium rounded-full hover:bg-green-700 hover:text-white transition-all" data-filter="events">Events</button>
<button class="filter-btn px-4 py-2 border-2 border-green-700 text-green-700 font-medium rounded-full hover:bg-green-700 hover:text-white transition-all" data-filter="nature">Nature</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Cottage 1 -->
<div class="gallery-item cottages rounded-lg overflow-hidden shadow-md h-64">
<img src="assets/images/gallery/cottage-1.jpg" alt="Luxury Cottage" class="w-full h-full object-cover" loading="lazy">
<div class="gallery-overlay">
<i class="fas fa-search-plus text-white text-4xl"></i>
</div>
</div>
<!-- Wedding 1 -->
<div class="gallery-item weddings rounded-lg overflow-hidden shadow-md h-64">
<img src="assets/images/gallery/wedding-1.jpg" alt="Wedding Ceremony" class="w-full h-full object-cover" loading="lazy">
<div class="gallery-overlay">
<i class="fas fa-search-plus text-white text-4xl"></i>
</div>
</div>
<!-- Nature 1 -->
<div class="gallery-item nature rounded-lg overflow-hidden shadow-md h-64">
<img src="assets/images/gallery/nature-1.jpg" alt="Scenic Views" class="w-full h-full object-cover" loading="lazy">
<div class="gallery-overlay">
<i class="fas fa-search-plus text-white text-4xl"></i>
</div>
</div>
<!-- Event 1 -->
<div class="gallery-item events rounded-lg overflow-hidden shadow-md h-64">
<img src="assets/images/gallery/event-1.jpg" alt="Corporate Event" class="w-full h-full object-cover" loading="lazy">
<div class="gallery-overlay">
<i class="fas fa-search-plus text-white text-4xl"></i>
</div>
</div>
<!-- Cottage 2 -->
<div class="gallery-item cottages rounded-lg overflow-hidden shadow-md h-64">
<img src="assets/images/gallery/cottage-2.jpg" alt="Cottage Interior" class="w-full h-full object-cover" loading="lazy">
<div class="gallery-overlay">
<i class="fas fa-search-plus text-white text-4xl"></i>
</div>
</div>
<!-- Wedding 2 -->
<div class="gallery-item weddings rounded-lg overflow-hidden shadow-md h-64">
<img src="assets/images/gallery/wedding-2.jpg" alt="Wedding Reception" class="w-full h-full object-cover" loading="lazy">
<div class="gallery-overlay">
<i class="fas fa-search-plus text-white text-4xl"></i>
</div>
</div>
</div>
</div>
<!-- Lightbox Modal -->
<div class="lightbox">
<span class="close-btn text-white text-4xl cursor-pointer absolute top-8 right-8 hover:text-yellow-500">&times;</span>
<img class="lightbox-content" id="lightbox-img">
<div class="caption text-white text-xl mt-4"></div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="section-title text-3xl font-bold text-center text-green-800 mb-12">Contact & Location</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Map -->
<div class="lg:col-span-2 h-96 rounded-xl overflow-hidden shadow-lg">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3581.23456789!2d28.0123456!3d-26.1234567!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjbCsDA3JzI0LjQiUyAyOMKwMDAnNDQuNCJF!5e0!3m2!1sen!2sza!4v1234567890123!5m2!1sen!2sza"
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" class="w-full h-full"></iframe>
</div>
<!-- Contact Info -->
<div class="bg-green-800 text-white rounded-xl p-8 shadow-lg">
<h3 class="text-2xl font-bold mb-6 text-yellow-500">Get In Touch</h3>
<ul class="space-y-4">
<li class="flex items-start">
<i class="fas fa-phone mt-1 mr-4 text-yellow-500"></i>
<span>+27 11 123 4567</span>
</li>
<li class="flex items-start">
<i class="fas fa-envelope mt-1 mr-4 text-yellow-500"></i>
<span>bookings@protea-ridge.com</span>
</li>
<li class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 mr-4 text-yellow-500"></i>
<span>123 Ridge Road, Randburg, South Africa</span>
</li>
</ul>
<div class="mt-8">
<h4 class="text-lg font-semibold mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-opacity-20 transition-all" aria-label="Instagram">
<i class="fab fa-instagram text-white"></i>
</a>
<a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-opacity-20 transition-all" aria-label="Facebook">
<i class="fab fa-facebook-f text-white"></i>
</a>
</div>
</div>
</div>
<!-- Contact Form -->
<div class="lg:col-span-2 bg-white rounded-xl p-8 shadow-lg">
<form id="contactForm" class="space-y-6">
<div class="form-group">
<input type="text" id="name" name="name" placeholder=" " required>
<label for="name">Name</label>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder=" " required>
<label for="email">Email</label>
</div>
<div class="form-group">
<textarea id="message" name="message" rows="4" placeholder=" " required></textarea>
<label for="message">Message</label>
</div>
<button type="submit" class="w-full px-6 py-3 bg-yellow-600 text-gray-900 font-medium rounded-full hover:bg-yellow-500 transition-all">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<!-- Logo -->
<div>
<a href="/" class="text-3xl font-bold mb-4 block">
<span class="text-yellow-600">Protea</span>Ridge
</a>
<p class="text-gray-400">Nature. Comfort. Events. Reimagined.</p>
</div>
<!-- Quick Links -->
<div>
<h4 class="text-lg font-semibold mb-4 text-yellow-500">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition-colors">Home</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition-colors">About</a></li>
<li><a href="#accommodation" class="text-gray-400 hover:text-white transition-colors">Accommodation</a></li>
<li><a href="#events" class="text-gray-400 hover:text-white transition-colors">Events</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<!-- Legal -->
<div>
<h4 class="text-lg font-semibold mb-4 text-yellow-500">Legal</h4>
<ul class="space-y-2">
<li><a href="/privacy" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="/terms" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a></li>
</ul>
</div>
<!-- Newsletter -->
<div>
<h4 class="text-lg font-semibold mb-4 text-yellow-500">Stay Updated</h4>
<form id="newsletterForm" class="space-y-4">
<input type="email" placeholder="Your email address" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" required>
<button type="submit" class="w-full px-4 py-2 border-2 border-white text-white font-medium rounded-full hover:bg-white hover:text-gray-900 transition-all">Subscribe</button>
</form>
</div>
</div>
<div class="pt-8 border-t border-gray-800 text-center text-gray-500">
<p>&copy; <span id="year"></span> Protea Ridge. All rights reserved.</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Mobile Navigation
const hamburger = document.getElementById('hamburger');
const mobileMenu = document.getElementById('mobile-menu');
const mainNav = document.getElementById('main-nav');
hamburger.addEventListener('click', function() {
this.classList.toggle('active');
mobileMenu.classList.toggle('translate-x-full');
mobileMenu.classList.toggle('translate-x-0');
});
// Close mobile menu when clicking a link
const navLinks = document.querySelectorAll('#mobile-menu a');
navLinks.forEach(link => {
link.addEventListener('click', function() {
hamburger.classList.remove('active');
mobileMenu.classList.add('translate-x-full');
mobileMenu.classList.remove('translate-x-0');
});
});
// Header scroll effect
const header = document.getElementById('header');
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
header.classList.add('bg-black', 'bg-opacity-95', 'shadow-md', 'py-4');
header.classList.remove('py-6');
// Change logo and nav link colors
document.querySelector('.logo span').classList.add('text-yellow-600');
document.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('text-white');
link.classList.add('text-gray-800');
});
} else {
header.classList.remove('bg-white', 'bg-opacity-95', 'shadow-md', 'py-4');
header.classList.add('py-6');
// Revert logo and nav link colors
document.querySelector('.logo span').classList.remove('text-yellow-600');
document.querySelectorAll('.nav-link').forEach(link => {
link.classList.add('text-white');
link.classList.remove('text-gray-800');
});
}
});
// Testimonial Carousel
let currentTestimonial = 0;
const testimonials = document.querySelectorAll('.testimonial-slide');
function showTestimonial(n) {
testimonials.forEach(testimonial => {
testimonial.classList.remove('active');
});
currentTestimonial = (n + testimonials.length) % testimonials.length;
testimonials[currentTestimonial].classList.add('active');
}
// Auto-rotate testimonials
let testimonialInterval = setInterval(() => {
showTestimonial(currentTestimonial + 1);
}, 5000);
// Pause on hover
const testimonialContainer = document.querySelector('.testimonial-carousel');
if (testimonialContainer) {
testimonialContainer.addEventListener('mouseenter', () => {
clearInterval(testimonialInterval);
});
testimonialContainer.addEventListener('mouseleave', () => {
testimonialInterval = setInterval(() => {
showTestimonial(currentTestimonial + 1);
}, 5000);
});
}
// Gallery Filter
const filterButtons = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
this.classList.add('active');
const filterValue = this.getAttribute('data-filter');
galleryItems.forEach(item => {
if (filterValue === 'all' || item.classList.contains(filterValue)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
// Lightbox Gallery
const lightbox = document.querySelector('.lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxCaption = document.querySelector('.caption');
const closeBtn = document.querySelector('.close-btn');
const galleryImages = document.querySelectorAll('.gallery-item img');
galleryImages.forEach(image => {
image.addEventListener('click', function() {
lightbox.classList.add('active');
lightboxImg.src = this.src;
lightboxCaption.textContent = this.alt;
});
});
closeBtn.addEventListener('click', function() {
lightbox.classList.remove('active');
});
lightbox.addEventListener('click', function(e) {
if (e.target === lightbox) {
lightbox.classList.remove('active');
}
});
// Form submission
const contactForm = document.getElementById('contactForm');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Here you would typically send the form data to a server
// For demo purposes, we'll just show an alert
alert('Thank you for your message! We will get back to you soon.');
this.reset();
});
}
const newsletterForm = document.getElementById('newsletterForm');
if (newsletterForm) {
newsletterForm.addEventListener('submit', function(e) {
e.preventDefault();
alert('Thank you for subscribing to our newsletter!');
this.reset();
});
}
// Set current year in footer
document.getElementById('year').textContent = new Date().getFullYear();
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=storiesclips/mac" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>