<title>Radisson Hotel Tunis, City Center</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script> <style> body { font-family: 'Inter', sans-serif; background-color: #FAFAFA; /* Slate 50 equivalent */ } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } /* Custom Checkbox */ .custom-checkbox input:checked + div { background-color: #0f172a; border-color: #0f172a; } .custom-checkbox input:checked + div svg { display: block; } /* Smooth Scroll */ html { scroll-behavior: smooth; } </style>

<!-- Navigation -->
<nav class="fixed w-full z-50 top-0 start-0 border-b border-slate-200/60 bg-white/80 backdrop-blur-md">
    <div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between px-6 py-4">
        <a href="#" class="flex items-center space-x-2 rtl:space-x-reverse">
            <span class="self-center text-lg font-medium tracking-tight text-slate-900 uppercase">Radisson Tunis</span>
        </a>
        <div class="flex md:order-2 space-x-3 md:space-x-4 rtl:space-x-reverse items-center">
            <button type="button" class="text-slate-900 hover:text-slate-600 font-medium text-sm px-4 py-2 text-center inline-flex items-center gap-2">
                <iconify-icon icon="solar:user-circle-linear" width="20" stroke-width="1.5"></iconify-icon>
                Log In
            </button>
            <button type="button" class="text-white bg-slate-900 hover:bg-slate-800 focus:ring-4 focus:outline-none focus:ring-slate-300 font-medium rounded-full text-sm px-5 py-2.5 text-center transition-all duration-200 shadow-lg shadow-slate-900/10">
                Book Now
            </button>
        </div>
        <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1">
            <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-slate-100 rounded-lg md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0">
                <li>
                    <a href="#rooms" class="block py-2 px-3 text-slate-500 hover:text-slate-900 rounded md:bg-transparent md:p-0 transition-colors">Rooms</a>
                </li>
                <li>
                    <a href="#location" class="block py-2 px-3 text-slate-500 hover:text-slate-900 rounded md:bg-transparent md:p-0 transition-colors">Location</a>
                </li>
                <li>
                    <a href="#amenities" class="block py-2 px-3 text-slate-500 hover:text-slate-900 rounded md:bg-transparent md:p-0 transition-colors">Experience</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<section class="relative h-[85vh] flex items-center justify-center overflow-hidden">
    <!-- Background Image -->
    <div class="absolute inset-0 z-0">
        <img src="https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?q=80&amp;w=2070&amp;auto=format&amp;fit=crop" alt="Tunis City Center Hotel" class="w-full h-full object-cover brightness-[0.85]">
    </div>
    
    <div class="relative z-10 text-center max-w-4xl px-6">
        <span class="inline-block py-1 px-3 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white text-xs font-medium tracking-wide mb-6">
            CITY CENTER COLLECTION
        </span>
        <h1 class="mb-4 text-4xl md:text-6xl font-medium tracking-tight text-white leading-tight">
            Experience the Heart<br> of Tunis
        </h1>
        <p class="mb-8 text-lg font-normal text-slate-200 sm:px-16 lg:px-48 max-w-3xl mx-auto">
            Luxury accommodation where modern elegance meets Tunisian heritage. Located centrally for business and leisure.
        </p>
        
        <!-- Booking Widget -->
        <div class="bg-white p-2 rounded-2xl shadow-xl max-w-3xl mx-auto flex flex-col md:flex-row gap-2">
            <div class="flex-1 flex items-center px-4 py-3 bg-slate-50 rounded-xl border border-transparent hover:border-slate-200 transition-colors cursor-pointer group">
                <iconify-icon icon="solar:calendar-date-linear" class="text-slate-400 group-hover:text-slate-600" width="20" stroke-width="1.5"></iconify-icon>
                <div class="ml-3 text-left">
                    <p class="text-xs text-slate-500 font-medium">Check-in</p>
                    <p class="text-sm text-slate-900 font-medium">Oct 24, 2023</p>
                </div>
            </div>
            <div class="flex-1 flex items-center px-4 py-3 bg-slate-50 rounded-xl border border-transparent hover:border-slate-200 transition-colors cursor-pointer group">
                <iconify-icon icon="solar:calendar-date-linear" class="text-slate-400 group-hover:text-slate-600" width="20" stroke-width="1.5"></iconify-icon>
                <div class="ml-3 text-left">
                    <p class="text-xs text-slate-500 font-medium">Check-out</p>
                    <p class="text-sm text-slate-900 font-medium">Oct 28, 2023</p>
                </div>
            </div>
            <div class="flex-1 flex items-center px-4 py-3 bg-slate-50 rounded-xl border border-transparent hover:border-slate-200 transition-colors cursor-pointer group">
                <iconify-icon icon="solar:users-group-rounded-linear" class="text-slate-400 group-hover:text-slate-600" width="20" stroke-width="1.5"></iconify-icon>
                <div class="ml-3 text-left">
                    <p class="text-xs text-slate-500 font-medium">Guests</p>
                    <p class="text-sm text-slate-900 font-medium">2 Adults</p>
                </div>
            </div>
            <button class="bg-slate-900 hover:bg-slate-800 text-white rounded-xl px-8 py-3 font-medium text-sm transition-all">
                Search
            </button>
        </div>
    </div>
</section>

<!-- Content Grid (Amenities & Info) -->
<section id="amenities" class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Item 1 -->
            <div class="group p-6 rounded-2xl bg-slate-50 hover:bg-slate-100 transition-colors duration-300">
                <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center border border-slate-200 shadow-sm mb-6 text-slate-900">
                    <iconify-icon icon="solar:bed-linear" width="24" stroke-width="1.5"></iconify-icon>
                </div>
                <h3 class="text-lg font-medium text-slate-900 mb-2 tracking-tight">Luxury Rooms</h3>
                <p class="text-sm text-slate-500 leading-relaxed">Spacious suites with panoramic views of the Tunis skyline and premium bedding.</p>
            </div>
            <!-- Item 2 -->
            <div class="group p-6 rounded-2xl bg-slate-50 hover:bg-slate-100 transition-colors duration-300">
                <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center border border-slate-200 shadow-sm mb-6 text-slate-900">
                    <iconify-icon icon="solar:chef-hat-linear" width="24" stroke-width="1.5"></iconify-icon>
                </div>
                <h3 class="text-lg font-medium text-slate-900 mb-2 tracking-tight">Fine Dining</h3>
                <p class="text-sm text-slate-500 leading-relaxed">Authentic Tunisian cuisine and international dishes prepared by top chefs.</p>
            </div>
            <!-- Item 3 -->
            <div class="group p-6 rounded-2xl bg-slate-50 hover:bg-slate-100 transition-colors duration-300">
                <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center border border-slate-200 shadow-sm mb-6 text-slate-900">
                    <iconify-icon icon="solar:spa-candle-linear" width="24" stroke-width="1.5"></iconify-icon>
                </div>
                <h3 class="text-lg font-medium text-slate-900 mb-2 tracking-tight">Wellness Spa</h3>
                <p class="text-sm text-slate-500 leading-relaxed">Rejuvenate your senses with our exclusive spa treatments and indoor pool.</p>
            </div>
            <!-- Item 4 -->
            <div class="group p-6 rounded-2xl bg-slate-50 hover:bg-slate-100 transition-colors duration-300">
                <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center border border-slate-200 shadow-sm mb-6 text-slate-900">
                    <iconify-icon icon="solar:briefcase-linear" width="24" stroke-width="1.5"></iconify-icon>
                </div>
                <h3 class="text-lg font-medium text-slate-900 mb-2 tracking-tight">Business Hub</h3>
                <p class="text-sm text-slate-500 leading-relaxed">State-of-the-art conference rooms and high-speed fiber internet access.</p>
            </div>
        </div>
    </div>
</section>

<!-- Rooms Preview -->
<section id="rooms" class="py-20 bg-slate-50 border-t border-slate-200">
    <div class="max-w-7xl mx-auto px-6">
        <div class="flex justify-between items-end mb-12">
            <div>
                <h2 class="text-3xl font-medium tracking-tight text-slate-900">Accommodations</h2>
                <p class="mt-2 text-slate-500 text-sm">Design-led spaces for rest and inspiration.</p>
            </div>
            <a href="#" class="hidden md:flex items-center text-sm font-medium text-slate-900 hover:text-slate-600 transition-colors">
                View all rooms
                <iconify-icon icon="solar:arrow-right-linear" class="ml-2" width="16" stroke-width="1.5"></iconify-icon>
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Room Card 1 -->
            <div class="bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-lg transition-shadow duration-300">
                <div class="h-64 overflow-hidden relative">
                    <img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&amp;w=2070&amp;auto=format&amp;fit=crop" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" alt="Standard Room">
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-medium text-slate-900">$180 / night</div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-medium text-slate-900 mb-2 tracking-tight">Superior City View</h3>
                    <p class="text-sm text-slate-500 mb-6">28m² • King Bed • City View</p>
                    <button class="w-full py-2.5 rounded-lg border border-slate-200 text-slate-900 text-sm font-medium hover:bg-slate-50 transition-colors">Details</button>
                </div>
            </div>
            <!-- Room Card 2 -->
            <div class="bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-lg transition-shadow duration-300">
                <div class="h-64 overflow-hidden relative">
                    <img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?q=80&amp;w=1974&amp;auto=format&amp;fit=crop" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" alt="Suite">
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-medium text-slate-900">$320 / night</div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-medium text-slate-900 mb-2 tracking-tight">Executive Suite</h3>
                    <p class="text-sm text-slate-500 mb-6">45m² • King Bed • Lounge Access</p>
                    <button class="w-full py-2.5 rounded-lg border border-slate-200 text-slate-900 text-sm font-medium hover:bg-slate-50 transition-colors">Details</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Location Section -->
<section id="location" class="py-24 bg-white border-t border-slate-200">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <span class="text-xs font-medium text-slate-500 uppercase tracking-widest mb-2 block">Location</span>
                <h2 class="text-3xl font-medium tracking-tight text-slate-900 mb-6">In the Heart of City Center</h2>
                <p class="text-slate-500 leading-relaxed mb-8">
                    Radisson Hotel Tunis is perfectly positioned for exploring the capital. 
                    Walking distance to Habib Bourguiba Avenue, the Medina, and major business districts.
                </p>
                
                <ul class="space-y-4 mb-8">
                    <li class="flex items-start">
                        <iconify-icon icon="solar:map-point-linear" class="text-slate-900 mt-1 mr-3 flex-shrink-0" width="18" stroke-width="1.5"></iconify-icon>
                        <span class="text-sm text-slate-600">47 Avenue Habib Bourguiba, Tunis, 1001, Tunisia</span>
                    </li>
                    <li class="flex items-start">
                        <iconify-icon icon="solar:phone-calling-linear" class="text-slate-900 mt-1 mr-3 flex-shrink-0" width="18" stroke-width="1.5"></iconify-icon>
                        <span class="text-sm text-slate-600">+216 71 123 456</span>
                    </li>
                    <li class="flex items-start">
                        <iconify-icon icon="solar:mailbox-linear" class="text-slate-900 mt-1 mr-3 flex-shrink-0" width="18" stroke-width="1.5"></iconify-icon>
                        <span class="text-sm text-slate-600">reservations.tunis@radisson.com</span>
                    </li>
                </ul>

                <button class="text-slate-900 border-b border-slate-900 pb-0.5 text-sm font-medium hover:opacity-70 transition-opacity">
                    Get Directions
                </button>
            </div>
            <!-- Abstract Map Graphic -->
            <div class="relative bg-slate-100 rounded-2xl h-80 w-full overflow-hidden border border-slate-200">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3194.026477016254!2d10.1815!3d36.8008!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12fd347f7b3a7b5d%3A0x6b4f7b3a7b5d!2sTunis!5e0!3m2!1sen!2stn!4v1620000000000" width="100%" height="100%" style="border:0; filter: grayscale(100%) contrast(1.1) opacity(0.8);" allowfullscreen="" loading="lazy">
                </iframe>
                <div class="absolute bottom-4 left-4 bg-white p-3 rounded-lg shadow-lg flex items-center gap-3">
                     <div class="bg-slate-900 text-white p-1.5 rounded">
                        <iconify-icon icon="solar:map-point-bold" width="16"></iconify-icon>
                     </div>
                     <div>
                         <p class="text-xs font-semibold text-slate-900">Radisson Hotel</p>
                         <p class="text-[10px] text-slate-500">City Center, Tunis</p>
                     </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Payment / Checkout / Login Section -->
<section class="py-24 bg-slate-50 border-t border-slate-200">
    <div class="max-w-6xl mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
            
            <!-- Login Column -->
            <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 h-full">
                <div class="flex items-center gap-3 mb-6">
                    <div class="p-2 bg-slate-50 rounded-lg text-slate-900">
                        <iconify-icon icon="solar:user-id-linear" width="24" stroke-width="1.5"></iconify-icon>
                    </div>
                    <h3 class="text-xl font-medium tracking-tight text-slate-900">Member Sign In</h3>
                </div>
                <p class="text-sm text-slate-500 mb-8">Access your booking history and exclusive member rates.</p>
                
                <form onsubmit="event.preventDefault();" class="space-y-5">
                    <div>
                        <label class="block text-xs font-medium text-slate-700 mb-2">Email Address</label>
                        <input type="email" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:border-slate-900 focus:ring-1 focus:ring-slate-900 transition-all placeholder:text-slate-400" placeholder="name@example.com">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-700 mb-2">Password</label>
                        <input type="password" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:border-slate-900 focus:ring-1 focus:ring-slate-900 transition-all placeholder:text-slate-400" placeholder="••••••••">
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <label class="flex items-center gap-2 cursor-pointer custom-checkbox">
                            <input type="checkbox" class="hidden">
                            <div class="w-4 h-4 border border-slate-300 rounded flex items-center justify-center transition-colors">
                                <svg class="w-2.5 h-2.5 text-white hidden pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                            </div>
                            <span class="text-xs text-slate-600">Remember me</span>
                        </label>
                        <a href="#" class="text-xs text-slate-900 font-medium hover:underline">Forgot password?</a>
                    </div>

                    <button class="w-full bg-slate-900 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors">Sign In</button>
                </form>
            </div>

            <!-- Payment Simulator -->
            <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 h-full relative overflow-hidden">
                <div class="absolute top-0 right-0 p-4 opacity-5">
                    <iconify-icon icon="solar:card-send-linear" width="120"></iconify-icon>
                </div>
                <div class="flex items-center gap-3 mb-6 relative z-10">
                    <div class="p-2 bg-slate-50 rounded-lg text-slate-900">
                        <iconify-icon icon="solar:card-linear" width="24" stroke-width="1.5"></iconify-icon>
                    </div>
                    <h3 class="text-xl font-medium tracking-tight text-slate-900">Secure Payment</h3>
                </div>
                
                <div class="border-b border-slate-100 pb-6 mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm text-slate-600">Superior City View</span>
                        <span class="text-sm font-medium text-slate-900">$180.00</span>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm text-slate-600">Taxes &amp; Fees</span>
                        <span class="text-sm font-medium text-slate-900">$24.00</span>
                    </div>
                    <div class="flex justify-between items-center mt-4 pt-4 border-t border-dashed border-slate-200">
                        <span class="text-base font-medium text-slate-900">Total</span>
                        <span class="text-base font-medium text-slate-900">$204.00</span>
                    </div>
                </div>

                <form onsubmit="event.preventDefault();" class="space-y-5 relative z-10">
                     <div>
                        <label class="block text-xs font-medium text-slate-700 mb-2">Card Number</label>
                        <div class="relative">
                            <iconify-icon icon="solar:card-linear" class="absolute left-3 top-2.5 text-slate-400" width="18"></iconify-icon>
                            <input type="text" class="w-full bg-slate-50 border border-slate-200 rounded-lg pl-10 pr-4 py-2.5 text-sm outline-none focus:border-slate-900 focus:ring-1 focus:ring-slate-900 transition-all placeholder:text-slate-400" placeholder="0000 0000 0000 0000">
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-slate-700 mb-2">Expiry</label>
                            <input type="text" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:border-slate-900 focus:ring-1 focus:ring-slate-900 transition-all placeholder:text-slate-400" placeholder="MM/YY">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-slate-700 mb-2">CVC</label>
                            <input type="text" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:border-slate-900 focus:ring-1 focus:ring-slate-900 transition-all placeholder:text-slate-400" placeholder="123">
                        </div>
                    </div>
                    <button class="w-full bg-slate-900 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors flex items-center justify-center gap-2">
                        Pay Now 
                        <iconify-icon icon="solar:arrow-right-linear" width="16"></iconify-icon>
                    </button>
                </form>
            </div>

        </div>
    </div>
</section>

<!-- Footer -->
<footer class="bg-white border-t border-slate-200 pt-16 pb-8">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
            <div>
                <h4 class="text-sm font-medium text-slate-900 mb-4">Hotel</h4>
                <ul class="space-y-2 text-xs text-slate-500">
                    <li><a href="#" class="hover:text-slate-900 transition-colors">About Us</a></li>
                    <li><a href="#" class="hover:text-slate-900 transition-colors">Careers</a></li>
                    <li><a href="#" class="hover:text-slate-900 transition-colors">Press</a></li>
                    <li><a href="#" class="hover:text-slate-900 transition-colors">Sustainability</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-sm font-medium text-slate-900 mb-4">Support</h4>
                <ul class="space-y-2 text-xs text-slate-500">
                    <li><a href="#" class="hover:text-slate-900 transition-colors">Contact</a></li>
                    <li><a href="#" class="hover:text-slate-900 transition-colors">FAQs</a></li>
                    <li><a href="#" class="hover:text-slate-900 transition-colors">Sitemap</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-sm font-medium text-slate-900 mb-4">Legal</h4>
                <ul class="space-y-2 text-xs text-slate-500">
                    <li><a href="#" class="hover:text-slate-900 transition-colors">Terms of Service</a></li>
                    <li><a href="#" class="hover:text-slate-900 transition-colors">Privacy Policy</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-sm font-medium text-slate-900 mb-4">Social</h4>
                <div class="flex gap-4">
                    <a href="#" class="text-slate-400 hover:text-slate-900 transition-colors">
                        <iconify-icon icon="solar:camera-linear" width="20"></iconify-icon>
                    </a>
                    <a href="#" class="text-slate-400 hover:text-slate-900 transition-colors">
                        <iconify-icon icon="solar:global-linear" width="20"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        
        <div class="border-t border-slate-100 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
            <p class="text-xs text-slate-400">© 2023 Radisson Hotel Tunis. All rights reserved.</p>
            <div class="flex items-center gap-2 text-xs text-slate-400">
                <span>Designed by</span>
                <span class="text-slate-900 font-medium bg-slate-100 px-2 py-0.5 rounded">Lio</span>
            </div>
        </div>
    </div>
</footer>