BLACKSITE


	: 216.73.216.140
	: 199.188.200.160 / jeddahhousingltd.com
	: Linux server383.web-hosting.com 4.18.0-553.83.1.lve.el8.x86_64 #1 SMP Wed Nov 12 10:04:12 UTC 2025 x86_64
: /home/jeddveug/www/
files >> /home/jeddveug/www/brochure.php
 <?php
$page_title = 'Official Brochure | Jeddah Housing Ltd.';
$meta_description = 'View our official project brochure and explore the modern living standards at Jeddah City.';
require_once 'includes/header.php';
?>

<!-- Page Header -->
<div class="hero-gradient pt-24 pb-16 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-10 right-20 w-72 h-72 bg-gold-400 rounded-full filter blur-3xl animate-pulse"></div>
        <div class="absolute bottom-10 left-20 w-96 h-96 bg-primary-300 rounded-full filter blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <p class="text-gold-400 font-semibold text-sm tracking-widest uppercase mb-3 px-4 py-1.5 bg-white/10 backdrop-blur-md rounded-full inline-block">Downloads</p>
        <h1 class="text-3xl md:text-5xl font-bold text-white mb-4">Our Brochure</h1>
        <p class="text-primary-200 max-w-2xl mx-auto text-lg">Explore our detailed roadmap, project features, and community vision in our official brochure.</p>
    </div>
</div>

<!-- Brochure Content -->
<section class="py-16 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-10">
        <a href="<?= baseUrl('uploads/Boucher.pdf') ?>" download class="inline-flex items-center bg-gold-400 hover:bg-gold-500 text-primary-900 px-8 py-3.5 rounded-full font-semibold transition-all hover:shadow-lg hover:shadow-gold-400/25 text-sm">
            <i class="fas fa-download mr-2"></i> Download PDF Brochure
        </a>
    </div>

    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="relative w-full rounded-2xl overflow-hidden shadow-[0_20px_50px_rgba(8,_112,_184,_0.1)] border border-gray-100 bg-white" id="brochure-slider">
            <div class="flex transition-transform duration-500 ease-in-out" id="brochure-track">
                <?php
                $brochure_images = [
                    'uploads/brochure1.jpg',
                    'uploads/brochure2.jpg',
                    'uploads/brochure3.jpg',
                    'uploads/brochure4.jpg'
                ];
                foreach ($brochure_images as $index => $image):
                ?>
                <div class="w-full flex-shrink-0 flex justify-center items-start bg-white p-2">
                    <img src="<?= baseUrl($image) ?>" 
                         alt="Jeddah Housing Brochure Page <?= $index + 1 ?>" 
                         class="max-w-full h-auto block rounded-lg select-none">
                </div>
                <?php endforeach; ?>
            </div>
            
            <!-- Controls -->
            <button class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-primary-900/10 hover:bg-primary-900/20 rounded-full text-primary-900 flex items-center justify-center transition-all shadow-sm z-10" onclick="prevBrochureSlide()">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-primary-900/10 hover:bg-primary-900/20 rounded-full text-primary-900 flex items-center justify-center transition-all shadow-sm z-10" onclick="nextBrochureSlide()">
                <i class="fas fa-chevron-right"></i>
            </button>

            <!-- Page Indicator -->
            <div class="absolute bottom-6 right-6 bg-primary-900/80 backdrop-blur-md text-white px-4 py-1.5 rounded-full text-xs font-semibold z-10 shadow-lg" id="page-indicator">
                Page 1 / <?= count($brochure_images) ?>
            </div>
        </div>
    </div>
</section>

<script>
    let currentBrochureSlide = 0;
    const brochureTrack = document.getElementById('brochure-track');
    const brochureIndicator = document.getElementById('page-indicator');
    const totalBrochureSlides = <?= count($brochure_images) ?>;
    
    function updateBrochureSlider() {
        brochureTrack.style.transform = `translateX(-${currentBrochureSlide * 100}%)`;
        if (brochureIndicator) {
            brochureIndicator.innerText = `Page ${currentBrochureSlide + 1} / ${totalBrochureSlides}`;
        }
    }
    
    function nextBrochureSlide() {
        currentBrochureSlide = (currentBrochureSlide + 1) % totalBrochureSlides;
        updateBrochureSlider();
    }
    
    function prevBrochureSlide() {
        currentBrochureSlide = (currentBrochureSlide - 1 + totalBrochureSlides) % totalBrochureSlides;
        updateBrochureSlider();
    }

    // Optional: Keyboard navigation
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') prevBrochureSlide();
        if (e.key === 'ArrowRight') nextBrochureSlide();
    });
</script>
 

<?php require_once 'includes/footer.php'; ?>