Lets start over and build the landing page.

title of the webiste is Safari Destinations, 

Header should include the following Menu: The Experts | Feel Good Factor | #WeLiveIt | Agent's Corner | Get In Touch

Section Home
Landing page should have a full hero image covering the whole page, with visible text on top of the page. it should be a Bold Title text that says “Passionate about sharing our experience”. 

About Section
from there one should be able to scroll down to a section that has a white background and text “At Safari Destinations we live and breathe African safaris We can change a wheel; drive aboat; tow a stranded 4x4 from thick sand whilst planning a romantic getaway and making a butterfly costume for the school play. We can plan your safarisin our sleep because it's what we know and love. We live here, we play here- this is our home.”

Destinations Section
This section should be a scrolling tabs showing 3 camps in the Okavango delta with the option of scrolling through the different camps. So only 3 are visible but you can scroll to see the rest of them, the section should have a darker background (earthy brown). It should allow one to click on each destination to see a gallery of the specific camp. 

Why Choose us Section
This Section should highlight why client should choose Safari Destinations as their Destination Management Company of choice, highlighting advantages of using Safari Destinations. (White background)

Team Section
This section should highlight a few team member, showing their pictures and titles, when clicked they should bring up a pop up with the full Bio of each team member. This section should have at least 3 team members with options of scrolling to see more. (Darker background)

Next is a Gallery of images that show safari experiences in the Okavango delta. 

Please make this page as well animated and interactive as possible, make it very modern and well designed, anything else I missed you can be creative but I just want a really good looking website

components/footer.js

@@ -0,0 +1,115 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = `
+            <footer>
+                <div class="container">
+                    <div class="footer-content">
+                        <div class="footer-brand">
+                            <h3>Safari Destinations</h3>
+                            <p>Creating unforgettable African safari experiences since 2010.</p>
+                        </div>
+                        <div class="footer-links">
+                            <h4>Quick Links</h4>
+                            <ul>
+                                <li><a href="#">Home</a></li>
+                                <li><a href="#">About</a></li>
+                                <li><a href="#">Destinations</a></li>
+                                <li><a href="#">Contact</a></li>
+                            </ul>
+                        </div>
+                        <div class="footer-contact">
+                            <h4>Contact Us</h4>
+                            <p><i class="fas fa-phone"></i> +267 123 4567</p>
+                            <p><i class="fas fa-envelope"></i> info@safaridestinations.com</p>
+                        </div>
+                        <div class="footer-social">
+                            <h4>Follow Us</h4>
+                            <div class="social-icons">
+                                <a href="#"><i class="fab fa-facebook"></i></a>
+                                <a href="#"><i class="fab fa-instagram"></i></a>
+                                <a href="#"><i class="fab fa-twitter"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="footer-bottom">
+                        <p>&copy; ${new Date().getFullYear()} Safari Destinations. All rights reserved.</p>
+                    </div>
+                </div>
+            </footer>
+            <style>
+                footer {
+                    background: var(--bg-dark);
+                    color: white;
+                    padding: 4rem 0 2rem;
+                }
+                
+                .footer-content {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    gap: 3rem;
+                    margin-bottom: 3rem;
+                }
+                
+                .footer-brand h3 {
+                    color: var(--primary);
+                    font-size: 1.5rem;
+                    margin-bottom: 1rem;
+                }
+                
+                .footer-links h4, .footer-contact h4, .footer-social h4 {
+                    font-size: 1.2rem;
+                    margin-bottom: 1.5rem;
+                    color: var(--light);
+                }
+                
+                .footer-links ul {
+                    list-style: none;
+                    padding: 0;
+                }
+                
+                .footer-links li {
+                    margin-bottom: 0.8rem;
+                }
+                
+                .footer-links a {
+                    color: var(--light);
+                    transition: color 0.3s;
+                }
+                
+                .footer-links a:hover {
+                    color: var(--primary);
+                }
+                
+                .footer-contact p {
+                    margin-bottom: 1rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                
+                .social-icons {
+                    display: flex;
+                    gap: 1rem;
+                }
+                
+                .social-icons a {
+                    color: white;
+                    font-size: 1.2rem;
+                    transition: color 0.3s;
+                }
+                
+                .social-icons a:hover {
+                    color: var(--primary);
+                }
+                
+                .footer-bottom {
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                    padding-top: 2rem;
+                    text-align: center;
+                }
+            </style>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,86 @@
+class CustomHeader extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = `
+            <header>
+                <div class="container">
+                    <nav>
+                        <div class="logo">Safari Destinations</div>
+                        <ul class="nav-links">
+                            <li><a href="#experts">The Experts</a></li>
+                            <li><a href="#feelgood">Feel Good Factor</a></li>
+                            <li><a href="#weliveit">#WeLiveIt</a></li>
+                            <li><a href="#agents">Agent's Corner</a></li>
+                            <li><a href="#contact" class="cta-button">Get In Touch</a></li>
+                        </ul>
+                        <div class="hamburger">
+                            <i class="fas fa-bars"></i>
+                        </div>
+                    </nav>
+                </div>
+            </header>
+            <style>
+                header {
+                    padding: 1.5rem 0;
+                }
+                
+                nav {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: var(--primary);
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                }
+                
+                .nav-links a {
+                    color: var(--dark);
+                    font-weight: 500;
+                    transition: color 0.3s;
+                }
+                
+                .nav-links a:hover {
+                    color: var(--primary);
+                }
+                
+                .cta-button {
+                    background: var(--primary);
+                    color: white;
+                    padding: 0.5rem 1.5rem;
+                    border-radius: 50px;
+                    transition: all 0.3s;
+                }
+                
+                .cta-button:hover {
+                    background: var(--accent);
+                    transform: translateY(-2px);
+                }
+                
+                .hamburger {
+                    display: none;
+                    font-size: 1.5rem;
+                    cursor: pointer;
+                }
+                
+                @media (max-width: 992px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    
+                    .hamburger {
+                        display: block;
+                    }
+                }
+            </style>
+        `;
+    }
+}
+
+customElements.define('custom-header', CustomHeader);

index.html

@@ -3,300 +3,86 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dune Drifters Expedition | Desert Safari Tours</title>
+    <title>Safari Destinations | African Safari Experts</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
     <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        desert: {
-                            100: '#f5e6d0',
-                            200: '#e8d5b5',
-                            300: '#d9c09a',
-                            400: '#c9a87f',
-                            500: '#b89164',
-                            600: '#a07a4d',
-                            700: '#886438',
-                            800: '#704f26',
-                            900: '#583b17',
-                        },
-                        accent: {
-                            500: '#e67e22',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
+    <script src="https://unpkg.com/scrollreveal"></script>
 </head>
-<body class="bg-desert-100 font-sans">
-    <!-- Navigation -->
-    <nav class="fixed w-full z-50 bg-white shadow-md">
-        <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
-            <div class="flex items-center">
-                <span class="text-2xl font-bold text-desert-800">DUNE DRIFTERS</span>
-            </div>
-            <div class="hidden md:flex space-x-8">
-                <a href="#" class="text-desert-700 hover:text-accent-500 font-medium transition duration-300">Home</a>
-                <a href="#" class="text-desert-700 hover:text-accent-500 font-medium transition duration-300">Tours</a>
-                <a href="#" class="text-desert-700 hover:text-accent-500 font-medium transition duration-300">Destinations</a>
-                <a href="#" class="text-desert-700 hover:text-accent-500 font-medium transition duration-300">About</a>
-                <a href="#" class="text-desert-700 hover:text-accent-500 font-medium transition duration-300">Contact</a>
-            </div>
-            <button class="md:hidden">
-                <i data-feather="menu" class="text-desert-700 w-6 h-6"></i>
-            </button>
+<body>
+    <custom-header></custom-header>
+    
+    <section class="hero">
+        <div class="hero-content">
+            <h1>Passionate about sharing our experience</h1>
+            <a href="#about" class="scroll-down">
+                <i class="fas fa-chevron-down"></i>
+            </a>
         </div>
-    </nav>
+    </section>
 
-    <!-- Hero Section -->
-    <section class="relative pt-24 h-screen bg-[url('https://images.unsplash.com/photo-1517825738774-7de9363ef735?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80')] bg-cover bg-center">
-<div class="absolute inset-0 bg-black bg-opacity-40"></div>
-        <div class="relative z-10 h-full flex flex-col justify-center px-6 md:px-16 text-white">
-            <h1 class="text-4xl md:text-6xl font-bold mb-4">DESERT SAFARI TOURS</h1>
-            <h2 class="text-xl md:text-2xl mb-6">Embark on your desert safari quest</h2>
-            <p class="max-w-2xl text-lg mb-8">Discover breathtaking landscapes, inviting adventures, and unforgettable moments. Let us take you on a journey of a lifetime through the heart of the desert.</p>
-            <div class="flex flex-wrap gap-4 mb-12">
-                <button class="bg-accent-500 hover:bg-accent-600 text-white px-6 py-3 rounded-full font-medium transition duration-300">Plan Trip</button>
-                <button class="bg-transparent hover:bg-white hover:text-desert-800 border-2 border-white text-white px-6 py-3 rounded-full font-medium transition duration-300">Explore More</button>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl">
-                <div class="bg-white bg-opacity-90 text-desert-800 p-6 rounded-lg">
-                    <i data-feather="truck" class="text-accent-500 w-8 h-8 mb-4"></i>
-                    <h3 class="text-xl font-bold mb-2">Comfortable Ride</h3>
-                    <p class="mb-4">Our modern fleet ensures a smooth journey across the dunes.</p>
-                    <a href="#" class="text-accent-500 font-medium flex items-center">Learn More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
-                </div>
-                <div class="bg-white bg-opacity-90 text-desert-800 p-6 rounded-lg">
-                    <i data-feather="compass" class="text-accent-500 w-8 h-8 mb-4"></i>
-                    <h3 class="text-xl font-bold mb-2">Expert Guide</h3>
-                    <p class="mb-4">Local guides with decades of desert experience.</p>
-                    <a href="#" class="text-accent-500 font-medium flex items-center">Learn More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
-                </div>
-                <div class="bg-white bg-opacity-90 text-desert-800 p-6 rounded-lg">
-                    <i data-feather="shield" class="text-accent-500 w-8 h-8 mb-4"></i>
-                    <h3 class="text-xl font-bold mb-2">Trusted Tours</h3>
-                    <p class="mb-4">5-star rated experiences with thousands of happy travelers.</p>
-                    <a href="#" class="text-accent-500 font-medium flex items-center">Learn More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
-                </div>
-            </div>
+    <section id="about" class="about-section">
+        <div class="container">
+            <h2>At Safari Destinations</h2>
+            <p>We live and breathe African safaris. We can change a wheel; drive a boat; tow a stranded 4x4 from thick sand whilst planning a romantic getaway and making a butterfly costume for the school play. We can plan your safaris in our sleep because it's what we know and love. We live here, we play here - this is our home.</p>
         </div>
     </section>
 
-    <!-- Quality Tours Section -->
-    <section class="py-24 px-6 md:px-16 bg-white">
-<div class="max-w-6xl mx-auto">
-            <h2 class="text-3xl font-bold text-center mb-12 text-desert-800">Quality desert tours</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
-                <div>
-                    <p class="text-lg mb-6 text-desert-700">Our desert safaris are crafted with meticulous attention to detail, combining adventure with comfort. We've spent years perfecting our routes and experiences to bring you the most authentic desert encounters.</p>
-                    <p class="text-lg mb-8 text-desert-700">From sunrise camel treks to thrilling dune bashing, our tours are designed to create memories that last a lifetime while respecting the delicate desert ecosystem.</p>
-                    <div class="grid grid-cols-2 gap-4 max-w-md">
-                        <div class="bg-desert-100 p-4 rounded-lg text-center">
-                            <p class="text-3xl font-bold text-accent-500 counter" data-target="99">0</p>
-                            <p class="text-desert-700">Happy Travellers</p>
-                        </div>
-                        <div class="bg-desert-100 p-4 rounded-lg text-center">
-                            <p class="text-3xl font-bold text-accent-500 counter" data-target="21">0</p>
-                            <p class="text-desert-700">Top Destinations</p>
-                        </div>
-                        <div class="bg-desert-100 p-4 rounded-lg text-center">
-                            <p class="text-3xl font-bold text-accent-500 counter" data-target="35">0</p>
-                            <p class="text-desert-700">Expert Guides</p>
-                        </div>
-                        <div class="bg-desert-100 p-4 rounded-lg text-center">
-                            <p class="text-3xl font-bold text-accent-500 counter" data-target="87">0</p>
-                            <p class="text-desert-700">Repeat Bookings</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-desert-200 p-8 rounded-lg">
-                    <h3 class="text-2xl font-bold mb-4 text-desert-800">Get in Touch</h3>
-                    <p class="mb-6 text-desert-700">Ready to start your desert adventure? Our team is available 24/7 to answer your questions and help plan your perfect safari.</p>
-                    <div class="flex items-center mb-6">
-                        <i data-feather="phone" class="text-accent-500 mr-4"></i>
-                        <p class="text-xl font-medium text-desert-800">474-937-9270</p>
-                    </div>
-                    <button class="bg-accent-500 hover:bg-accent-600 text-white px-6 py-3 rounded-full font-medium transition duration-300 w-full">Contact Us</button>
+    <section class="destinations-section">
+        <div class="container">
+            <h2>Our Camps in Okavango Delta</h2>
+            <div class="swiper camps-swiper">
+                <div class="swiper-wrapper">
+                    <!-- Camps will be loaded via JavaScript -->
                 </div>
+                <div class="swiper-pagination"></div>
             </div>
         </div>
     </section>
 
-    <!-- Top Destinations Section -->
-    <section class="py-24 px-6 md:px-16 bg-desert-100">
-<div class="max-w-6xl mx-auto">
-            <h2 class="text-3xl font-bold text-center mb-4 text-desert-800">TOP DESTINATIONS</h2>
-            <h3 class="text-xl text-center mb-8 text-desert-600">Quest for top spots</h3>
-            <p class="text-center max-w-2xl mx-auto mb-12 text-desert-700">Explore our most sought-after desert destinations, each offering unique landscapes and cultural experiences that will leave you in awe.</p>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <!-- UAE Card -->
-                <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
-                    <div class="h-48 bg-[url('http://static.photos/desert/640x360/2')] bg-cover bg-center"></div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold text-desert-800">UAE</h3>
-                            <span class="bg-accent-500 text-white text-xs px-2 py-1 rounded-full">12 Tours</span>
-                        </div>
-                        <p class="text-desert-600 mb-4">Experience the golden dunes of Dubai and Abu Dhabi with luxury camping under the stars.</p>
-                        <button class="bg-desert-200 hover:bg-desert-300 text-desert-800 px-4 py-2 rounded-full text-sm font-medium transition duration-300">View Details</button>
-                    </div>
-                </div>
-                
-                <!-- Egypt Card -->
-                <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
-                    <div class="h-48 bg-[url('http://static.photos/desert/640x360/3')] bg-cover bg-center"></div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold text-desert-800">Egypt</h3>
-                            <span class="bg-accent-500 text-white text-xs px-2 py-1 rounded-full">8 Tours</span>
-                        </div>
-                        <p class="text-desert-600 mb-4">Discover the vast Sahara and ancient wonders beyond the pyramids.</p>
-                        <button class="bg-desert-200 hover:bg-desert-300 text-desert-800 px-4 py-2 rounded-full text-sm font-medium transition duration-300">View Details</button>
-                    </div>
-                </div>
-                
-                <!-- Morocco Card -->
-                <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
-                    <div class="h-48 bg-[url('http://static.photos/desert/640x360/4')] bg-cover bg-center"></div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold text-desert-800">Morocco</h3>
-                            <span class="bg-accent-500 text-white text-xs px-2 py-1 rounded-full">15 Tours</span>
-                        </div>
-                        <p class="text-desert-600 mb-4">Journey through the majestic Erg Chebbi dunes and Berber villages.</p>
-                        <button class="bg-desert-200 hover:bg-desert-300 text-desert-800 px-4 py-2 rounded-full text-sm font-medium transition duration-300">View Details</button>
-                    </div>
-                </div>
-                
-                <!-- Africa Card -->
-                <div class="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
-                    <div class="h-48 bg-[url('http://static.photos/desert/640x360/5')] bg-cover bg-center"></div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold text-desert-800">Africa</h3>
-                            <span class="bg-accent-500 text-white text-xs px-2 py-1 rounded-full">6 Tours</span>
-                        </div>
-                        <p class="text-desert-600 mb-4">Explore the diverse landscapes from the Kalahari to the Namib desert.</p>
-                        <button class="bg-desert-200 hover:bg-desert-300 text-desert-800 px-4 py-2 rounded-full text-sm font-medium transition duration-300">View Details</button>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="text-center mt-12">
-                <a href="#" class="inline-flex items-center text-accent-500 font-medium">
-                    More Destinations <i data-feather="chevron-down" class="ml-2 w-5 h-5"></i>
-                </a>
+    <section class="why-choose-us">
+        <div class="container">
+            <h2>Why Choose Safari Destinations</h2>
+            <div class="benefits-grid">
+                <!-- Benefits loaded via JavaScript -->
             </div>
         </div>
     </section>
 
-    <!-- Why We're Different Section -->
-    <section class="py-24 px-6 md:px-16 bg-white">
-<div class="max-w-6xl mx-auto">
-            <h2 class="text-3xl font-bold text-center mb-12 text-desert-800">Why we're different</h2>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-                <div class="text-center p-6 rounded-lg bg-desert-50 hover:bg-desert-100 transition duration-300">
-                    <div class="w-16 h-16 bg-accent-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="users" class="text-white w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3 text-desert-800">Expert Guides</h3>
-                    <p class="text-desert-700">Our guides are local experts with years of experience navigating the desert terrain.</p>
-                </div>
-                
-                <div class="text-center p-6 rounded-lg bg-desert-50 hover:bg-desert-100 transition duration-300">
-                    <div class="w-16 h-16 bg-accent-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="star" class="text-white w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3 text-desert-800">Luxury Amenities</h3>
-                    <p class="text-desert-700">Enjoy premium comforts even in the heart of the desert with our luxury camps.</p>
-                </div>
-                
-                <div class="text-center p-6 rounded-lg bg-desert-50 hover:bg-desert-100 transition duration-300">
-                    <div class="w-16 h-16 bg-accent-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="package" class="text-white w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3 text-desert-800">Custom Packages</h3>
-                    <p class="text-desert-700">Tailor your adventure with customizable itineraries to suit your preferences.</p>
-                </div>
-                
-                <div class="text-center p-6 rounded-lg bg-desert-50 hover:bg-desert-100 transition duration-300">
-                    <div class="w-16 h-16 bg-accent-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="compass" class="text-white w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3 text-desert-800">Authentic Experiences</h3>
-                    <p class="text-desert-700">We connect you with genuine cultural interactions beyond typical tourist routes.</p>
+    <section class="team-section">
+        <div class="container">
+            <h2>Meet Our Experts</h2>
+            <div class="swiper team-swiper">
+                <div class="swiper-wrapper">
+                    <!-- Team members loaded via JavaScript -->
                 </div>
+                <div class="swiper-pagination"></div>
             </div>
         </div>
     </section>
 
-    <!-- Top-Rated Trips Section -->
-    <section class="py-24 px-6 md:px-16 bg-desert-100">
-<div class="max-w-6xl mx-auto">
-            <h2 class="text-3xl font-bold text-center mb-12 text-desert-800">TOP-rated desert safari trips</h2>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Dubai Tour -->
-                <div class="bg-white rounded-lg overflow-hidden shadow-lg relative">
-                    <div class="absolute top-4 right-4 bg-yellow-400 text-desert-800 text-xs font-bold px-2 py-1 rounded-full">TOP TOUR</div>
-                    <div class="h-48 bg-[url('http://static.photos/desert/640x360/6')] bg-cover bg-center"></div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 text-desert-800">Dubai Dune Bashing Safari</h3>
-                        <div class="flex flex-wrap gap-4 mb-4 text-sm">
-                            <span class="flex items-center text-desert-600"><i data-feather="calendar" class="mr-1 w-4 h-4"></i> Year-round</span>
-                            <span class="flex items-center text-desert-600"><i data-feather="clock" class="mr-1 w-4 h-4"></i> 6 hours</span>
-                            <span class="flex items-center text-desert-600"><i data-feather="users" class="mr-1 w-4 h-4"></i> Small group</span>
-                        </div>
-                        <div class="flex justify-between items-center mb-4">
-                            <div class="flex text-yellow-400">
-                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
-                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
-    <!-- Footer -->
-    <footer class="bg-desert-800 text-white py-12 px-6">
-        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
-            <div>
-                <h3 class="text-xl font-bold mb-4">Dune Drifters</h3>
-                <p class="text-desert-300">Premium desert safari experiences across the globe. Creating unforgettable journeys since 2010.</p>
-            </div>
-            <div>
-                <h4 class="font-bold mb-4">Quick Links</h4>
-                <ul class="space-y-2">
-                    <li><a href="#" class="text-desert-300 hover:text-white transition duration-300">Home</a></li>
-                    <li><a href="#" class="text-desert-300 hover:text-white transition duration-300">Tours</a></li>
-                    <li><a href="#" class="text-desert-300 hover:text-white transition duration-300">Destinations</a></li>
-                    <li><a href="#" class="text-desert-300 hover:text-white transition duration-300">About Us</a></li>
-                </ul>
-            </div>
-            <div>
-                <h4 class="font-bold mb-4">Contact</h4>
-                <ul class="space-y-2">
-                    <li class="flex items-center"><i data-feather="mail" class="mr-2 w-4 h-4"></i> <a href="mailto:info@dunedrifters.com" class="text-desert-300 hover:text-white transition duration-300">info@dunedrifters.com</a></li>
-                    <li class="flex items-center"><i data-feather="phone" class="mr-2 w-4 h-4"></i> <a href="tel:+1234567890" class="text-desert-300 hover:text-white transition duration-300">+1 234 567 890</a></li>
-                </ul>
-            </div>
-            <div>
-                <h4 class="font-bold mb-4">Follow Us</h4>
-                <div class="flex space-x-4">
-                    <a href="#" class="text-desert-300 hover:text-white transition duration-300"><i data-feather="facebook" class="w-5 h-5"></i></a>
-                    <a href="#" class="text-desert-300 hover:text-white transition duration-300"><i data-feather="instagram" class="w-5 h-5"></i></a>
-                    <a href="#" class="text-desert-300 hover:text-white transition duration-300"><i data-feather="twitter" class="w-5 h-5"></i></a>
-                </div>
+    <section class="gallery-section">
+        <div class="container">
+            <h2>Safari Experiences</h2>
+            <div class="gallery-grid">
+                <!-- Gallery images loaded via JavaScript -->
             </div>
         </div>
-        <div class="max-w-7xl mx-auto mt-12 pt-6 border-t border-desert-700 text-center text-desert-400 text-sm">
-            <p>© 2023 Dune Drifters Expedition. All rights reserved.</p>
+    </section>
+
+    <custom-footer></custom-footer>
+
+    <!-- Team Member Modal -->
+    <div id="teamModal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <div class="modal-body"></div>
         </div>
-    </footer>
+    </div>
 
-    <script>
-        feather.replace()
-    </script>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -0,0 +1,78 @@
+```javascript
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Swipers
+    const campsSwiper = new Swiper('.camps-swiper', {
+        slidesPerView: 1,
+        spaceBetween: 30,
+        pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+        },
+        breakpoints: {
+            768: {
+                slidesPerView: 2,
+            },
+            992: {
+                slidesPerView: 3,
+            }
+        }
+    });
+
+    const teamSwiper = new Swiper('.team-swiper', {
+        slidesPerView: 1,
+        spaceBetween: 30,
+        pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+        },
+        breakpoints: {
+            768: {
+                slidesPerView: 2,
+            },
+            992: {
+                slidesPerView: 3,
+            }
+        }
+    });
+
+    // Load Camps Data
+    const camps = [
+        {
+            name: "Mombo Camp",
+            location: "Chief's Island, Okavango Delta",
+            description: "Luxury camp with exceptional wildlife viewing",
+            image: "http://static.photos/safari/640x360/2"
+        },
+        {
+            name: "Vumbura Plains",
+            location: "Northern Okavango Delta",
+            description: "Water and land activities in a pristine wilderness",
+            image: "http://static.photos/safari/640x360/3"
+        },
+        {
+            name: "Sandibe Safari Lodge",
+            location: "Okavango Delta",
+            description: "Contemporary design meets wilderness luxury",
+            image: "http://static.photos/safari/640x360/4"
+        },
+        {
+            name: "Xigera Safari Lodge",
+            location: "Moremi Game Reserve",
+            description: "Artful luxury in the heart of the delta",
+            image: "http://static.photos/safari/640x360/5"
+        }
+    ];
+
+    const campsWrapper = document.querySelector('.camps-swiper .swiper-wrapper');
+    camps.forEach(camp => {
+        campsWrapper.innerHTML += `
+            <div class="swiper-slide">
+                <div class="camp-card">
+                    <div class="camp-image" style="background-image: url('${camp.image}')"></div>
+                    <div class="camp-info">
+                        <h3>${camp.name}</h3>
+                        <p class="location">${camp.location}</p>
+                        <p class="description">${camp.description}</p>
+                        <button class="view-gallery">View Gallery</button>
+                    </div>
+                </div>

style.css

@@ -1,64 +1,222 @@
+:root {
+    --primary: #e67e22;
+    --secondary: #2c3e50;
+    --accent: #16a085;
+    --light: #ecf0f1;
+    --dark: #2c3e50;
+    --text: #333;
+    --bg-dark: #1a252f;
+}
 
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family: 'Montserrat', sans-serif;
     line-height: 1.6;
-    color: #333;
+    color: var(--text);
+    overflow-x: hidden;
+}
+
+/* Header Styles */
+custom-header {
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
-/* Smooth scrolling */
-html {
-    scroll-behavior: smooth;
+/* Hero Section */
+.hero {
+    height: 100vh;
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
+                url('http://static.photos/safari/1920x1080/1') center/cover no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: white;
+    position: relative;
 }
 
-/* Typography */
-h1, h2, h3, h4 {
+.hero h1 {
+    font-size: 4rem;
     font-weight: 700;
-    line-height: 1.2;
+    margin-bottom: 2rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
-/* Button styles */
-.btn-primary {
-    transition: all 0.3s ease;
+.scroll-down {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: white;
+    font-size: 2rem;
+    animation: bounce 2s infinite;
 }
 
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+/* About Section */
+.about-section {
+    padding: 8rem 0;
+    background: white;
 }
 
-/* Card hover effects */
-.card-hover:hover {
+.about-section h2 {
+    font-size: 2.5rem;
+    color: var(--primary);
+    margin-bottom: 2rem;
+}
+
+.about-section p {
+    font-size: 1.2rem;
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+/* Destinations Section */
+.destinations-section {
+    padding: 8rem 0;
+    background: var(--bg-dark);
+    color: white;
+}
+
+.swiper {
+    width: 100%;
+    padding: 3rem 0;
+}
+
+.camp-card {
+    background: white;
+    border-radius: 10px;
+    overflow: hidden;
+    color: var(--text);
+    transition: transform 0.3s ease;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.camp-card:hover {
+    transform: translateY(-10px);
+}
+
+/* Why Choose Us */
+.why-choose-us {
+    padding: 8rem 0;
+    background: white;
+}
+
+.benefits-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.benefit-card {
+    padding: 2rem;
+    border-radius: 10px;
+    background: var(--light);
+    transition: all 0.3s ease;
+}
+
+.benefit-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* Team Section */
+.team-section {
+    padding: 8rem 0;
+    background: var(--bg-dark);
+    color: white;
+}
+
+.team-card {
+    text-align: center;
+    padding: 2rem;
+    cursor: pointer;
     transition: all 0.3s ease;
 }
 
-/* Section spacing */
-section {
-    padding-top: 6rem;
-    padding-bottom: 6rem;
+.team-card:hover {
+    transform: scale(1.05);
 }
 
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    section {
-        padding-top: 4rem;
-        padding-bottom: 4rem;
-    }
+/* Gallery Section */
+.gallery-section {
+    padding: 8rem 0;
+    background: white;
 }
 
-/* Animation for counter numbers */
-@keyframes countUp {
-    from {
-        transform: translateY(20px);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
+.gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+.gallery-item {
+    height: 250px;
+    overflow: hidden;
+    border-radius: 10px;
+    position: relative;
+}
+
+.gallery-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.gallery-item:hover img {
+    transform: scale(1.1);
+}
+
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 2000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+}
+
+.modal-content {
+    background: white;
+    margin: 5% auto;
+    padding: 2rem;
+    width: 80%;
+    max-width: 800px;
+    border-radius: 10px;
+    position: relative;
+}
+
+.close {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    font-size: 2rem;
+    cursor: pointer;
 }
 
-.counter-animate {
-    animation: countUp 1s ease forwards;
+/* Animations */
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
+    40% {transform: translateY(-20px) translateX(-50%);}
+    60% {transform: translateY(-10px) translateX(-50%);}
 }
+
+/* Responsive */
+@media (max-width: 768px) {
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+    
+    section {
+        padding: 4rem 0;
+    }
+}