Spaces:
Running
Running
Project Name: Swiss Apogee Slogan: Ultimate Epic Experiences Logo: [Use attached logo featuring Matterhorn-style mountain with elegant serif typography] 🧠 Core Concept Build a luxury AI-native travel concierge platform powered by a neurological-emotional AI organism. Swiss Apogee is more than a travel planner — it is a self-learning orchestration engine designed for High-Net-Worth Individuals (HNWIs), GCC families, luxury B2B partners, and global elite travelers seeking personalized, emotionally aware, and seamlessly intelligent journeys. 🧬 Key Functional Pillars Living AI Organism (Neurological-Emotional Architecture) Adaptive memory (using Vertex AI Memory Bank) Emotionally intelligent responses and upsells Behavior-driven itinerary suggestions Integrated with Google Cloud + OpenAI + Firebase Self-updating and evolving intelligence Unified Booking Platform Airport Transfers Limousine Chauffeur Services (Hourly/Daily) Private Day Tours All bookings dynamically generate and update itineraries Each booking is a potential upsell point (emotionally intelligent suggestions) AI-Enhanced Experience Layer Voice + Chat-based concierge (Gemini + GPT-4o) Smart navigation with predictive journey assistance Seamless multilingual UX for GCC and global travelers 🏗️ Technology Stack Layer Tool/Platform Frontend UI/UX FlutterFlow (AI-Driven, cross-platform UI) Backend Firebase (auth, database, functions) AI Core Vertex AI + OpenAI GPT-4o + Kimi K2 (hybrid model) Memory Layer Vertex AI Memory Bank Server Logic MCP (Model Context Protocol) orchestration Voice/Chat Layer Dialogflow + Gemini + GPT-4o Data/ML Extensions BigQuery, Google Maps, Swiss Open APIs Payments Stripe / SumUp CRM (Admin only) Google Sheets / AppSheet CRM extension (optional) 💼 B2B & Monetization Structure White-Label SaaS Portal for Travel Agencies Custom branding, dynamic pricing, real-time inventory Premium Subscriptions for Frequent Travelers Commission-based B2C Bookings Affiliate Channels: Insurance, Visas, Experiences 📈 AI Features to Prioritize Emotional profiling & retargeting AI itinerary co-creation based on emotional inputs Dynamic itinerary healing & updating Upselling based on emotional tone + trip stage B2B onboarding agent (using Whisper + voice) 🧭 Menu & Navigation Experience AI-animated, minimalist luxury design Adaptive smart navigation with predictive interaction Invite-only experience options, secret offers via AI chat Integrated “My Journey” planner tied to memory layer Real-time AI notifications on weather, mood, luxury tips 🎯 Initial Modules to Build Landing Experience Emotional luxury intro Storytelling with voice/AI agent Booking Engine Modular options: Transfer, Chauffeur, Tour, or Full Package Instant AI itinerary generation post-booking AI Companion Conversational planner (text + voice) Emotional memory & personalized tone Admin Dashboard Internal booking control CRM, dispatch, itinerary creation, invoicing (via Firebase) 🎨 Branding Tone Color Scheme: Midnight Blue, Silver, Off-White Typography: Elegant Serif + Clean Sans Serif (Headlines vs. Body) Brand Feel: Modern Luxury + Emotional Precision + Swiss Craftsmanship Goal: Deliver a seamless, AI-native luxury travel platform that orchestrates hyper-personalized journeys, evolves with user memory and emotions, and outperforms standard trip planners. Swiss Apogee is not just tech—it’s the Tesla of Travel Intelligence. - Follow Up Deployment
241318a verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Swiss Apogee – Luxury AI Travel Organism | Ultimate Epic Experiences</title> | |
| <meta name="description" content="A living AI organism that crafts emotionally intelligent luxury travel experiences in the Swiss Alps"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| deepnavy: '#0a192f', | |
| mattesilver: '#c0c0c0', | |
| offwhite: '#f8f8f8', | |
| accent: '#4a6fa5', | |
| highlight: '#c0a080' | |
| }, | |
| fontFamily: { | |
| serif: ['Playfair Display', 'serif'], | |
| sans: ['Montserrat', 'sans-serif'] | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 6s ease-in-out infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| background-color: #0a192f; | |
| color: #f8f8f8; | |
| overflow-x: hidden; | |
| } | |
| .gradient-bg { | |
| background: radial-gradient(circle at 10% 20%, rgba(10, 25, 47, 0.9) 0%, rgba(4, 12, 24, 0.95) 90%); | |
| } | |
| .section-padding { | |
| padding: 8rem 0; | |
| } | |
| .alpine-card { | |
| background: rgba(10, 25, 47, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(192, 192, 192, 0.1); | |
| border-radius: 16px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .chat-bubble { | |
| border-radius: 24px; | |
| border-top-left-radius: 4px; | |
| } | |
| .user-bubble { | |
| border-radius: 24px; | |
| border-top-right-radius: 4px; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 32px; | |
| left: -20px; | |
| height: 16px; | |
| width: 16px; | |
| border-radius: 50%; | |
| background: #c0a080; | |
| } | |
| .mobile-nav { | |
| height: 70px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .floating-ai { | |
| animation: float 6s ease-in-out infinite; | |
| box-shadow: 0 5px 15px rgba(192, 160, 128, 0.4); | |
| } | |
| .experience-card:hover { | |
| transform: translateY(-10px); | |
| transition: transform 0.3s ease; | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| @media (max-width: 768px) { | |
| .section-padding { | |
| padding: 4rem 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans gradient-bg"> | |
| <!-- Desktop Navigation --> | |
| <nav class="fixed w-full z-50 py-4 px-6 md:px-12 transition-all duration-300"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="logo.svg" alt="Swiss Apogee Logo" class="h-12"> | |
| <span class="text-offwhite font-serif text-xl font-bold">Swiss Apogee <span class="text-highlight text-sm font-normal">| Ultimate Epic Experiences</span></span> | |
| </div> | |
| <div class="hidden md:flex space-x-10"> | |
| <a href="#home" class="text-mattesilver hover:text-highlight font-medium">Home</a> | |
| <a href="#concierge" class="text-mattesilver hover:text-highlight font-medium">Concierge AI</a> | |
| <a href="#itinerary" class="text-mattesilver hover:text-highlight font-medium">Build My Journey</a> | |
| <a href="#" class="text-mattesilver hover:text-highlight font-medium">Book a Service</a> | |
| <a href="#" class="text-mattesilver hover:text-highlight font-medium">Live Itinerary</a> | |
| <a href="#" class="text-mattesilver hover:text-highlight font-medium">Smart Packages</a> | |
| <button class="bg-highlight text-deepnavy px-6 py-2 rounded-full font-bold hover:bg-opacity-90 transition">Login</button> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu" class="text-offwhite"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="menu-overlay" class="fixed inset-0 bg-deepnavy bg-opacity-95 z-50 hidden flex-col items-center justify-center space-y-8"> | |
| <a href="#home" class="text-2xl text-offwhite font-serif">Home</a> | |
| <a href="#concierge" class="text-2xl text-offwhite font-serif">Concierge</a> | |
| <a href="#itinerary" class="text-2xl text-offwhite font-serif">Itinerary</a> | |
| <a href="#profile" class="text-2xl text-offwhite font-serif">Profile</a> | |
| <button class="bg-highlight text-deepnavy px-8 py-3 rounded-full font-bold text-xl">Login</button> | |
| <button id="close-menu" class="absolute top-6 right-6 text-offwhite"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Floating AI Button (Mobile) --> | |
| <div class="fixed bottom-24 right-6 z-40 md:hidden"> | |
| <button class="floating-ai bg-highlight w-16 h-16 rounded-full flex items-center justify-center shadow-xl"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-deepnavy" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center section-padding pt-20"> | |
| <div class="max-w-7xl mx-auto px-6 md:px-12"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="font-serif text-5xl md:text-7xl font-bold mb-6"> | |
| The Tesla of <span class="text-highlight">Travel Intelligence</span> | |
| </h1> | |
| <p class="text-mattesilver text-xl mb-8 max-w-2xl"> | |
| A neurological-emotional AI organism that orchestrates hyper-personalized journeys for the global elite. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-highlight text-deepnavy px-8 py-4 rounded-full font-bold text-lg hover:bg-opacity-90 transition"> | |
| Begin Your Journey | |
| </button> | |
| <button class="border-2 border-highlight text-highlight px-8 py-4 rounded-full font-bold text-lg hover:bg-highlight hover:text-deepnavy transition"> | |
| Watch Introduction | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="alpine-card p-8 max-w-md w-full"> | |
| <div class="text-center mb-6"> | |
| <h2 class="font-serif text-3xl mb-4">Experience the Alps</h2> | |
| <div class="w-24 h-1 bg-highlight mx-auto"></div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="flex justify-between items-center pb-4 border-b border-mattesilver border-opacity-20"> | |
| <div class="flex items-center"> | |
| <div class="bg-accent rounded-full p-3 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Luxury Stays</h3> | |
| <p class="text-sm text-mattesilver">5-star alpine residences</p> | |
| </div> | |
| </div> | |
| <span class="text-highlight font-bold">→</span> | |
| </div> | |
| <div class="flex justify-between items-center pb-4 border-b border-mattesilver border-opacity-20"> | |
| <div class="flex items-center"> | |
| <div class="bg-accent rounded-full p-3 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Unique Destinations</h3> | |
| <p class="text-sm text-mattesilver">Hidden gems & exclusives</p> | |
| </div> | |
| </div> | |
| <span class="text-highlight font-bold">→</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-accent rounded-full p-3 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Emotional Journeys</h3> | |
| <p class="text-sm text-mattesilver">Tailored to your soul</p> | |
| </div> | |
| </div> | |
| <span class="text-highlight font-bold">→</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-16"> | |
| <button class="border-2 border-highlight text-highlight px-8 py-4 rounded-full font-bold text-lg hover:bg-highlight hover:text-deepnavy transition flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> | |
| </svg> | |
| Surprise Me | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Storytelling Section --> | |
| <section class="py-16 parallax" style="background-image: url('https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80')"> | |
| <div class="max-w-7xl mx-auto px-6 md:px-12"> | |
| <div class="alpine-card p-8 md:p-12 max-w-4xl mx-auto"> | |
| <h2 class="font-serif text-3xl md:text-4xl mb-8 text-center">The Living AI Organism</h2> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="text-highlight font-serif text-5xl mr-4">1</div> | |
| <div> | |
| <h3 class="font-serif text-xl mb-2">Neurological-Emotional AI</h3> | |
| <p class="text-mattesilver">Our AI doesn't just process data - it understands human emotion, crafting journeys that resonate with your deepest desires and aspirations.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-highlight font-serif text-5xl mr-4">2</div> | |
| <div> | |
| <h3 class="font-serif text-xl mb-2">Self-Learning Ecosystem</h3> | |
| <p class="text-mattesilver">Powered by Google's Vertex AI and Gemini, our system evolves with every interaction, continuously refining its understanding of luxury and exclusivity.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-highlight font-serif text-5xl mr-4">3</div> | |
| <div> | |
| <h3 class="font-serif text-xl mb-2">MCP-Style Memory</h3> | |
| <p class="text-mattesilver">Your preferences, reactions, and memories are stored in a dynamic neural network, creating a living travel profile that grows with you.</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-10"> | |
| <button class="border-2 border-highlight text-highlight px-8 py-3 rounded-full font-bold hover:bg-highlight hover:text-deepnavy transition font-serif"> | |
| Explore Our Technology | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Concierge Interface --> | |
| <section id="concierge" class="section-padding"> | |
| <div class="max-w-7xl mx-auto px-6 md:px-12"> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-6">Neurological-Emotional AI Concierge</h2> | |
| <p class="text-mattesilver text-xl text-center max-w-3xl mx-auto mb-16"> | |
| Powered by Vertex AI Memory Bank and GPT-4o, our AI organism evolves with every interaction to craft emotionally aware journeys | |
| </p> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Chat Interface --> | |
| <div class="alpine-card p-6 flex-1"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="font-serif text-2xl">AURA - AI Travel Companion</h3> | |
| <div class="flex space-x-2"> | |
| <button class="bg-accent p-2 rounded-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" /> | |
| </svg> | |
| </button> | |
| <button class="bg-highlight p-2 rounded-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-deepnavy" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div class="h-96 overflow-y-auto mb-6 space-y-4 pr-2"> | |
| <div class="flex"> | |
| <div class="bg-accent rounded-full h-10 w-10 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /> | |
| </svg> | |
| </div> | |
| <div class="bg-accent bg-opacity-30 p-4 chat-bubble"> | |
| <p>Hello! I'm AURA, your neurological-emotional travel organism. I analyze 127 data points to craft hyper-personalized Swiss experiences. How may I serve you today?</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="bg-highlight bg-opacity-20 p-4 user-bubble max-w-md"> | |
| <p>I'd like a romantic getaway in Switzerland next month. Something with mountain views and luxury spas.</p> | |
| </div> | |
| <div class="bg-highlight bg-opacity-20 rounded-full h-10 w-10 flex items-center justify-center ml-3 flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-highlight" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="bg-accent rounded-full h-10 w-10 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /> | |
| </svg> | |
| </div> | |
| <div class="bg-accent bg-opacity-30 p-4 chat-bubble"> | |
| <p>Wonderful choice! Based on your preference for romance and relaxation, I recommend our "Alpine Serenity" experience. Featuring a private chalet in Zermatt with panoramic Matterhorn views and a private infinity spa.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="flex"> | |
| <input type="text" placeholder="Describe your dream journey..." class="flex-1 bg-deepnavy border border-mattesilver border-opacity-20 rounded-l-full py-3 px-6 focus:outline-none focus:ring-1 focus:ring-highlight"> | |
| <button class="bg-highlight text-deepnavy px-6 rounded-r-full font-bold"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recommendations --> | |
| <div class="lg:w-1/3"> | |
| <div class="alpine-card p-6 mb-8"> | |
| <h3 class="font-serif text-2xl mb-4">Recommended For You</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-3 hover:bg-accent hover:bg-opacity-20 rounded-lg cursor-pointer"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" /> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Healing Retreats</h4> | |
| <p class="text-sm text-mattesilver">Wellness sanctuaries</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 hover:bg-accent hover:bg-opacity-20 rounded-lg cursor-pointer"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" /> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Adventure Expeditions</h4> | |
| <p class="text-sm text-mattesilver">Thrilling experiences</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 hover:bg-accent hover:bg-opacity-20 rounded-lg cursor-pointer"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" /> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Romantic Escapes</h4> | |
| <p class="text-sm text-mattesilver">Intimate getaways</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="alpine-card p-6"> | |
| <h3 class="font-serif text-2xl mb-4">Top Destinations</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="bg-accent bg-opacity-10 p-3 rounded-lg text-center"> | |
| <h4 class="font-bold">Zermatt</h4> | |
| <div class="text-sm text-mattesilver mt-1">Switzerland</div> | |
| </div> | |
| <div class="bg-accent bg-opacity-10 p-3 rounded-lg text-center"> | |
| <h4 class="font-bold">St. Moritz</h4> | |
| <div class="text-sm text-mattesilver mt-1">Switzerland</div> | |
| </div> | |
| <div class="bg-accent bg-opacity-10 p-3 rounded-lg text-center"> | |
| <h4 class="font-bold">Crans-Montana</h4> | |
| <div class="text-sm text-mattesilver mt-1">Switzerland</div> | |
| </div> | |
| <div class="bg-accent bg-opacity-10 p-3 rounded-lg text-center"> | |
| <h4 class="font-bold">Gstaad</h4> | |
| <div class="text-sm text-mattesilver mt-1">Switzerland</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experiences Showcase --> | |
| <section class="py-16 parallax" style="background-image: url('https://images.unsplash.com/photo-1511735643442-503bb3bd348a?ixlib=rb-4.0.3&auto=format&fit=crop&w=2100&q=80')"> | |
| <div class="max-w-7xl mx-auto px-6 md:px-12"> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-6">Apogee Experiences</h2> | |
| <p class="text-mattesilver text-xl text-center max-w-3xl mx-auto mb-16"> | |
| Curated journeys designed around emotional resonance | |
| </p> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="experience-card alpine-card p-6 h-full transition-all"> | |
| <div class="text-highlight font-serif text-3xl mb-4">Healing</div> | |
| <h3 class="font-serif text-2xl mb-3">Alpine Wellness Retreat</h3> | |
| <p class="text-mattesilver mb-4">Rejuvenate mind and body at our secluded mountain sanctuary with personalized wellness programs.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-highlight">From €5,900</span> | |
| <button class="text-highlight font-bold">Explore →</button> | |
| </div> | |
| </div> | |
| <div class="experience-card alpine-card p-6 h-full transition-all"> | |
| <div class="text-highlight font-serif text-3xl mb-4">Celebration</div> | |
| <h3 class="font-serif text-2xl mb-3">Luxury Anniversary Escape</h3> | |
| <p class="text-mattesilver mb-4">Celebrate your love story with private dinners, helicopter tours, and champagne under the stars.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-highlight">From €8,200</span> | |
| <button class="text-highlight font-bold">Explore →</button> | |
| </div> | |
| </div> | |
| <div class="experience-card alpine-card p-6 h-full transition-all"> | |
| <div class="text-highlight font-serif text-3xl mb-4">Adventure</div> | |
| <h3 class="font-serif text-2xl mb-3">Peak Exploration Challenge</h3> | |
| <p class="text-mattesilver mb-4">Conquer majestic peaks with expert guides, followed by luxury mountain lodges and gourmet feasts.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-bold text-highlight">From €6,500</span> | |
| <button class="text-highlight font-bold">Explore →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Itinerary Builder --> | |
| <section id="itinerary" class="section-padding"> | |
| <div class="max-w-7xl mx-auto px-6 md:px-12"> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-6">AI-Powered Itinerary Builder</h2> | |
| <p class="text-mattesilver text-xl text-center max-w-3xl mx-auto mb-16"> | |
| Craft your perfect journey with intelligent suggestions and personalization | |
| </p> | |
| <div class="alpine-card p-6 md:p-8"> | |
| <div class="flex flex-wrap items-center justify-between mb-8"> | |
| <div> | |
| <h3 class="font-serif text-2xl mb-2">5-Day Luxury Swiss Experience</h3> | |
| <div class="flex space-x-4"> | |
| <span class="text-mattesilver flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| Zurich, Lucerne, Interlaken | |
| </span> | |
| <span class="text-mattesilver flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| Sept 15-19, 2023 | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3 mt-4 md:mt-0"> | |
| <button class="border border-highlight text-highlight px-4 py-2 rounded-lg text-sm font-bold hover:bg-highlight hover:text-deepnavy transition">Save Itinerary</button> | |
| <button class="bg-highlight text-deepnavy px-4 py-2 rounded-lg text-sm font-bold hover:bg-opacity-90 transition">Book Now</button> | |
| </div> | |
| </div> | |
| <!-- Preferences Toggles --> | |
| <div class="bg-accent bg-opacity-10 p-4 rounded-lg mb-8"> | |
| <h4 class="font-bold mb-3">Travel Preferences</h4> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center"> | |
| <span class="mr-2 text-mattesilver">Luxury Level:</span> | |
| <div class="flex"> | |
| <button class="bg-highlight text-deepnavy px-3 py-1 text-sm font-bold">Premium</button> | |
| <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold">Luxury</button> | |
| <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold">Ultimate</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="mr-2 text-mattesilver">Interests:</span> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="bg-highlight text-deepnavy px-3 py-1 text-sm font-bold rounded-full">Culture</button> | |
| <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold rounded-full">Nature</button> | |
| <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold rounded-full">Gastronomy</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="mr-2 text-mattesilver">Mobility:</span> | |
| <div class="flex"> | |
| <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold">Active</button> | |
| <button class="bg-highlight text-deepnavy px-3 py-1 text-sm font-bold">Moderate</button> | |
| <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold">Relaxed</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline --> | |
| <div> | |
| <h4 class="font-serif text-xl mb-6">Your Itinerary</h4> | |
| <div class="space-y-6"> | |
| <!-- Day 1 --> | |
| <div class="relative pl-10 timeline-item"> | |
| <div class="font-serif text-lg text-highlight mb-1">Day 1: Arrival in Zurich</div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="alpine-card p-4"> | |
| <div class="font-bold mb-2">Morning</div> | |
| <p>Private transfer to luxury lakeside hotel</p> | |
| </div> | |
| <div class="alpine-card p-4"> | |
| <div class="font-bold mb-2">Afternoon</div> | |
| <p>Exclusive Old Town walking tour</p> | |
| </div> | |
| <div class="alpine-card p-4 bg-highlight bg-opacity-10"> | |
| <div class="font-bold mb-2">Evening</div> | |
| <p>Michelin-starred dinner with city views</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Day 2 --> | |
| <div class="relative pl-10 timeline-item"> | |
| <div class="font-serif text-lg text-highlight mb-1">Day 2: Journey to Lucerne</div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="alpine-card p-4"> | |
| <div class="font-bold mb-2">Morning</div> | |
| <p>Scenic GoldenPass train experience</p> | |
| </div> | |
| <div class="alpine-card p-4"> | |
| <div class="font-bold mb-2">Afternoon</div> | |
| <p>Private yacht cruise on Lake Lucerne</p> | |
| </div> | |
| <div class="alpine-card p-4 bg-highlight bg-opacity-10"> | |
| <div class="font-bold mb-2">Evening</div> | |
| <p>Mountain fondue at sunset lookout</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Day 3 --> | |
| <div class="relative pl-10 timeline-item"> | |
| <div class="font-serif text-lg text-highlight mb-1">Day 3: Alpine Adventure</div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="alpine-card p-4"> | |
| <div class="font-bold mb-2">Morning</div> | |
| <p>Cable car to Mount Pilatus summit</p> | |
| </div> | |
| <div class="alpine-card p-4"> | |
| <div class="font-bold mb-2">Afternoon</div> | |
| <p>Guided glacier hike with picnic</p> | |
| </div> | |
| <div class="alpine-card p-4 bg-highlight bg-opacity-10"> | |
| <div class="font-bold mb-2">Evening</div> | |
| <p>Relaxation at luxury alpine spa</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Memory Profile --> | |
| <section id="profile" class="section-padding"> | |
| <div class="max-w-7xl mx-auto px-6 md:px-12"> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-6">Your Living Memory Profile</h2> | |
| <p class="text-mattesilver text-xl text-center max-w-3xl mx-auto mb-16"> | |
| An evolving AI-powered profile that grows with every journey | |
| </p> | |
| <div class="alpine-card p-6 md:p-8"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Profile Summary --> | |
| <div class="md:col-span-1"> | |
| <div class="flex flex-col items-center mb-6"> | |
| <div class="bg-highlight rounded-full w-24 h-24 flex items-center justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-deepnavy" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> | |
| </svg> | |
| </div> | |
| <h3 class="font-serif text-2xl">Alexandra K.</h3> | |
| <p class="text-mattesilver">Platinum Member Since 2022</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-bold text-mattesilver mb-2">Travel Preferences</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Luxury Hotels</span> | |
| <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Private Transfers</span> | |
| <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Fine Dining</span> | |
| <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Spa Experiences</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-mattesilver mb-2">Dislikes</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Large Tour Groups</span> | |
| <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Budget Airlines</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-mattesilver mb-2">Special Requirements</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Vegetarian</span> | |
| <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Allergies: Shellfish</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Travel History --> | |
| <div class="md:col-span-2"> | |
| <h3 class="font-serif text-2xl mb-6">Travel Memories</h3> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="alpine-card p-4"> | |
| <div class="font-bold text-highlight mb-2">Swiss Alps Retreat</div> | |
| <p class="text-sm text-mattesilver mb-3">June 2023 | Zermatt, Switzerland</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Spa</span> | |
| <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Mountain Views</span> | |
| <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Luxury</span> | |
| </div> | |
| <div class="text-sm"> | |
| <div class="flex items-center mb-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-highlight mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> | |
| </svg> | |
| Favorite Moment: Private hot tub under the stars | |
| </div> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-highlight mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| Improvement: More vegan dessert options | |
| </div> | |
| </div> | |
| </div> | |
| <div class="alpine-card p-4"> | |
| <div class="font-bold text-highlight mb-2">Italian Lakes Discovery</div> | |
| <p class="text-sm text-mattesilver mb-3">April 2023 | Lake Como, Italy</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Boating</span> | |
| <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Culture</span> | |
| <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Gourmet</span> | |
| </div> | |
| <div class="text-sm"> | |
| <div class="flex items-center mb-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-highlight mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> | |
| </svg> | |
| Favorite Moment: Private villa garden dinner | |
| </div> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-highlight mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| Improvement: Earlier check-in at hotel | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-bold text-mattesilver mb-4">AI-Generated Insights</h4> | |
| <div class="alpine-card p-4"> | |
| <p>"Based on your travel history, we recommend exploring our Healing Retreats in Switzerland. Your preference for spa experiences and mountain views suggests you would enjoy our Alpine Serenity program which features private yoga sessions, forest bathing, and thermal spa treatments."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mobile Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 z-50 mobile-nav bg-deepnavy bg-opacity-80 border-t border-mattesilver border-opacity-20 md:hidden"> | |
| <div class="flex justify-around"> | |
| <a href="#home" class="flex flex-col items-center p-3 text-mattesilver"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> | |
| </svg> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#concierge" class="flex flex-col items-center p-3 text-highlight"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> | |
| </svg> | |
| <span class="text-xs mt-1">AI</span> | |
| </a> | |
| <a href="#itinerary" class="flex flex-col items-center p-3 text-mattesilver"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /> | |
| </svg> | |
| <span class="text-xs mt-1">Journey</span> | |
| </a> | |
| <a href="#profile" class="flex flex-col items-center p-3 text-mattesilver"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> | |
| </svg> | |
| <span class="text-xs mt-1">Profile</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center p-3 text-mattesilver"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" /> | |
| </svg> | |
| <span class="text-xs mt-1">Support</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Footer --> | |
| <footer class="py-16 border-t border-mattesilver border-opacity-20"> | |
| <div class="max-w-7xl mx-auto px-6 md:px-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center"> | |
| <span class="text-offwhite font-serif text-lg font-bold">SA</span> | |
| </div> | |
| <span class="text-offwhite font-serif text-lg font-bold">Swiss Apogee</span> | |
| </div> | |
| <p class="text-mattesilver mb-6"> | |
| Where artificial intelligence meets human emotion to craft unforgettable journeys. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-mattesilver hover:text-highlight"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-mattesilver hover:text-highlight"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-mattesilver hover:text-highlight"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-mattesilver hover:text-highlight"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl mb-6">Navigation</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-mattesilver hover:text-highlight">Home</a></li> | |
| <li><a href="#" class="text-mattesilver hover:text-highlight">About Us</a></li> | |
| <li><a href="#" class="text-mattesilver hover:text-highlight">Experiences</a></li> | |
| <li><a href="#" class="text-mattesilver hover:text-highlight">Testimonials</a></li> | |
| <li><a href="#" class="text-mattesilver hover:text-highlight">Technology</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl mb-6">Legal</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-mattesilver hover:text-highlight">Privacy Policy</a></li> | |
| <li><a href="#" class="text-mattesilver hover:text-highlight">Terms of Service</a></li> | |
| <li><a href="#" class="text-mattesilver hover:text-highlight">Cookie Policy</a></li> | |
| <li><a href="#" class="text-mattesilver hover:text-highlight">B2B Partnership</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl mb-6">Contact</h3> | |
| <ul class="space-y-3"> | |
| <li class="text-mattesilver">Bahnhofstrasse 15, 8001 Zurich</li> | |
| <li class="text-mattesilver">Switzerland</li> | |
| <li class="text-mattesilver">+41 44 123 45 67</li> | |
| <li class="text-mattesilver">contact@swissapogee.com</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-mattesilver border-opacity-20 mt-12 pt-8 text-center text-mattesilver"> | |
| <p>© 2023 Swiss Apogee AG. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const menuOverlay = document.getElementById('menu-overlay'); | |
| const closeMenu = document.getElementById('close-menu'); | |
| mobileMenu.addEventListener('click', () => { | |
| menuOverlay.classList.remove('hidden'); | |
| menuOverlay.classList.add('flex'); | |
| }); | |
| closeMenu.addEventListener('click', () => { | |
| menuOverlay.classList.add('hidden'); | |
| menuOverlay.classList.remove('flex'); | |
| }); | |
| // Experience Card Animation | |
| const experienceCards = document.querySelectorAll('.experience-card'); | |
| experienceCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-10px)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| // Navbar background on scroll | |
| window.addEventListener('scroll', function() { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 50) { | |
| nav.classList.add('bg-deepnavy', 'shadow-lg'); | |
| } else { | |
| nav.classList.remove('bg-deepnavy', 'shadow-lg'); | |
| } | |
| }); | |
| </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=Traveler007/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |