Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Emigre.eu | Relocate to Madeira, Portugal</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Use Inter font from Google Fonts */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Hero background image with a dark overlay for text readability */ | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1596422846543-75c6fc197b06?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 100vh; | |
| min-height: 600px; | |
| } | |
| /* Parallax effect for background images */ | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| /* Responsive container for embedded videos */ | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 aspect ratio */ | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Custom styles for the range slider input */ | |
| .calculator-input { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: #e5e7eb; /* gray-200 */ | |
| outline: none; | |
| transition: opacity 0.2s; | |
| } | |
| .calculator-input::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; /* blue-500 */ | |
| cursor: pointer; | |
| } | |
| .calculator-input::-moz-range-thumb { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; /* blue-500 */ | |
| cursor: pointer; | |
| } | |
| /* Hover effect for testimonial cards */ | |
| .testimonial-card { | |
| transition: transform 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| /* Disable parallax on mobile for performance */ | |
| @media (max-width: 768px) { | |
| .parallax { | |
| background-attachment: scroll; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation Bar --> | |
| <header> | |
| <nav class="bg-white shadow-lg fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-umbrella-beach text-blue-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-blue-600">Emigre.eu</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#calculator" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Calculator</a> | |
| <a href="#benefits" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Benefits</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Testimonials</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a> | |
| <a href="https://www.facebook.com/groups/californiatomadeira" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300"> | |
| <i class="fab fa-facebook-f mr-2"></i> Join Group | |
| </a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 focus:outline-none"> | |
| <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="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Home</a> | |
| <a href="#calculator" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Calculator</a> | |
| <a href="#benefits" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Benefits</a> | |
| <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Testimonials</a> | |
| <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Contact</a> | |
| <a href="https://www.facebook.com/groups/californiatomadeira" target="_blank" class="block px-3 py-2 text-base font-medium text-blue-600 hover:bg-blue-50"> | |
| <i class="fab fa-facebook-f mr-2"></i> Join Group | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <main> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-bg flex items-center justify-center text-white pt-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="text-4xl md:text-5xl font-extrabold mb-6 leading-tight">Unlock a Wealthier Retirement</h1> | |
| <h2 class="text-xl md:text-2xl mb-8 font-medium">Compare Your California Life to Madeira's Paradise</h2> | |
| <p class="text-lg mb-8">Discover how relocating could save you thousands annually while elevating your lifestyle. Input your details below for instant insights.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#calculator" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md text-lg font-medium transition duration-300 text-center"> | |
| Start Your Calculation Now | |
| </a> | |
| <a href="#benefits" class="bg-transparent hover:bg-white hover:text-blue-600 text-white border-2 border-white px-6 py-3 rounded-md text-lg font-medium transition duration-300 text-center"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-4"> | |
| <figure> | |
| <div class="video-container rounded-lg overflow-hidden"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/Rje_1dOJd3g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> | |
| </div> | |
| <figcaption class="text-center mt-4 text-sm italic">"Californians save an average of 30-50% on cost of living in Madeira"</figcaption> | |
| </figure> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-blue-600 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-4"> | |
| <div class="text-3xl font-bold mb-2">30-50%</div> | |
| <div class="text-sm uppercase tracking-wider">Lower Cost of Living</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-3xl font-bold mb-2">13.3% → 0%</div> | |
| <div class="text-sm uppercase tracking-wider">Tax Reduction</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-3xl font-bold mb-2">300+</div> | |
| <div class="text-sm uppercase tracking-wider">Sunny Days/Year</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-3xl font-bold mb-2">10</div> | |
| <div class="text-sm uppercase tracking-wider">Years Tax Benefits</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Madeira Section --> | |
| <section id="benefits" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Why Madeira? The Financial & Lifestyle Edge</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Discover the perfect blend of financial advantages and quality of life for Californians.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 mb-16 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Financial Pragmatism</h3> | |
| <p class="text-gray-600 mb-6">Portugal's Non-Habitual Resident (NHR) regime offers a flat 20% tax on eligible Portuguese income and exemptions on foreign-sourced income for up to 10 years, a stark contrast to California's high state taxes.</p> | |
| <p class="text-gray-600 mb-6">Preserve more wealth through NHR's 0% tax on foreign pensions and dividends. Madeira properties also yield higher returns with lower entry costs compared to California real estate.</p> | |
| </div> | |
| <div> | |
| <figure> | |
| <div class="video-container rounded-lg overflow-hidden shadow-lg"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/PTw8-TzE3jA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> | |
| </div> | |
| <figcaption class="text-center mt-4 text-sm italic text-gray-600">Luxury living at a fraction of the California cost.</figcaption> | |
| </figure> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mt-12"> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-sun text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Climate & Nature</h3> | |
| <p class="text-gray-600">Enjoy 300+ sunny days, a subtropical climate, black sand beaches, and lush forests for year-round outdoor activities.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-utensils text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Food & Wine</h3> | |
| <p class="text-gray-600">Indulge in world-class seafood, Madeira wine, and fresh local produce at 40-60% lower costs than in California.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-globe-europe text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">European Gateway</h3> | |
| <p class="text-gray-600">Gain easy access to mainland Europe with short, affordable flights to major cities, perfect for the avid traveler.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Calculator Section --> | |
| <section id="calculator" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Your Personalized Savings Calculator</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">See exactly how much you could save by relocating from California to Madeira</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <!-- Left Column: Calculator Inputs --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-6">Enter Your Monthly California Expenses</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="income" class="block text-sm font-medium text-gray-700 mb-1">Monthly Income ($)</label> | |
| <input type="range" id="income" min="2000" max="50000" step="1000" value="15000" class="calculator-input mb-2"> | |
| <div class="flex justify-between text-sm text-gray-500"><span>$2,000</span><span>$50,000</span></div> | |
| <input type="number" id="income-display" value="15000" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="housing" class="block text-sm font-medium text-gray-700 mb-1">Monthly Housing ($)</label> | |
| <input type="range" id="housing" min="1000" max="10000" step="100" value="4000" class="calculator-input mb-2"> | |
| <div class="flex justify-between text-sm text-gray-500"><span>$1,000</span><span>$10,000</span></div> | |
| <input type="number" id="housing-display" value="4000" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="healthcare" class="block text-sm font-medium text-gray-700 mb-1">Monthly Healthcare ($)</label> | |
| <input type="range" id="healthcare" min="100" max="2000" step="50" value="600" class="calculator-input mb-2"> | |
| <div class="flex justify-between text-sm text-gray-500"><span>$100</span><span>$2,000</span></div> | |
| <input type="number" id="healthcare-display" value="600" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="groceries" class="block text-sm font-medium text-gray-700 mb-1">Monthly Groceries ($)</label> | |
| <input type="range" id="groceries" min="200" max="2000" step="50" value="800" class="calculator-input mb-2"> | |
| <div class="flex justify-between text-sm text-gray-500"><span>$200</span><span>$2,000</span></div> | |
| <input type="number" id="groceries-display" value="800" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="taxes" class="block text-sm font-medium text-gray-700 mb-1">Monthly Taxes ($)</label> | |
| <input type="range" id="taxes" min="500" max="10000" step="100" value="2000" class="calculator-input mb-2"> | |
| <div class="flex justify-between text-sm text-gray-500"><span>$500</span><span>$10,000</span></div> | |
| <input type="number" id="taxes-display" value="2000" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <button id="calculate-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300"> | |
| Calculate My Savings | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right Column: Results and Report Form --> | |
| <div> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-6">Your Projected Madeira Savings</h3> | |
| <div id="results-placeholder" class="text-center py-12"> | |
| <i class="fas fa-calculator text-gray-300 text-5xl mb-4"></i> | |
| <p class="text-gray-500">Enter your information and click "Calculate" to see your results.</p> | |
| </div> | |
| <div id="results-container" class="hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">California</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Madeira</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Savings</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Housing</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-housing"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-housing"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-housing"></span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Healthcare</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-healthcare"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-healthcare"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-healthcare"></span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Groceries</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-groceries"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-groceries"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-groceries"></span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Taxes</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-taxes"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-taxes"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-taxes"></span></td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">Total Monthly</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">$<span id="cal-total"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">$<span id="madeira-total"></span></td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-green-600">$<span id="savings-total"></span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-8 bg-blue-50 p-6 rounded-lg relative"> | |
| <h4 class="text-lg font-bold text-blue-800 mb-3 flex items-center"> | |
| Your Annual Savings Potential | |
| <i id="disclaimer-icon" class="fas fa-info-circle text-blue-400 cursor-pointer ml-2"></i> | |
| </h4> | |
| <div id="disclaimer-popup" class="hidden absolute bottom-full left-0 mb-2 w-full max-w-xs bg-gray-800 text-white text-sm rounded-lg p-3 shadow-lg z-10"> | |
| <strong>Important Note:</strong> Estimates based on averages from sources like Numbeo and Expatistan. Consult professionals for personalized advice. Actual savings may vary based on individual circumstances. | |
| </div> | |
| <div class="text-3xl font-bold text-blue-600 mb-2">$<span id="annual-savings"></span></div> | |
| <p class="text-blue-700">Based on your inputs, you could save this much per year by relocating to Madeira!</p> | |
| </div> | |
| <!-- "Get My Report" Button --> | |
| <div class="mt-6"> | |
| <button id="show-report-form-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300"> | |
| Get My Detailed Report | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Report Request Form --> | |
| <div id="report-form" class="hidden mt-8 bg-gray-50 p-8 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-6">Your Detailed Report</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label> | |
| <input type="text" id="name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> | |
| <input type="email" id="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-1/3 mr-2"> | |
| <label for="country-code" class="block text-sm font-medium text-gray-700">Country</label> | |
| <select id="country-code" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="1" selected>USA (+1)</option> | |
| <option value="44">UK (+44)</option> | |
| <option value="33">France (+33)</option> | |
| <option value="49">Germany (+49)</option> | |
| <option value="351">Portugal (+351)</option> | |
| </select> | |
| </div> | |
| <div class="flex-1"> | |
| <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> | |
| <input type="tel" id="phone" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-md font-medium transition duration-300"> | |
| Send | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-gray-50 parallax" style="background-image: url('https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Join Like-Minded Californians Who Made the Move</h2> | |
| <p class="text-xl text-blue-100 max-w-3xl mx-auto">Hear from real people who have transformed their lives by relocating to Madeira</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm rounded-lg shadow-lg p-6 testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Elena" onerror="this.onerror=null;this.src='https://placehold.co/48x48/EBF4FF/3B82F6?text=E';"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Elena</h4> | |
| <p class="text-sm text-gray-600">Entrepreneur from San Francisco</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"Emigre.eu's calculator and Facebook group connected us—now enjoying Madeira's vineyards tax-free!"</p> | |
| </div> | |
| <div class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm rounded-lg shadow-lg p-6 testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Robert" onerror="this.onerror=null;this.src='https://placehold.co/48x48/EBF4FF/3B82F6?text=R';"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Robert</h4> | |
| <p class="text-sm text-gray-600">Retiree from Los Angeles</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"From CA's high costs to paradise: Healthcare savings alone covered our move."</p> | |
| </div> | |
| <div class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm rounded-lg shadow-lg p-6 testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sophia" onerror="this.onerror=null;this.src='https://placehold.co/48x48/EBF4FF/3B82F6?text=S';"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Sophia</h4> | |
| <p class="text-sm text-gray-600">Tech Executive from Silicon Valley</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"The NHR tax benefits allowed me to retire 5 years earlier than planned. Madeira is magical!"</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <a href="https://www.facebook.com/groups/californiatomadeira" target="_blank" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition duration-300"> | |
| <i class="fab fa-facebook-f mr-3"></i> Join Our Private Facebook Group | |
| </a> | |
| <p class="mt-4 text-blue-100">Connect with 500+ Californians who've already made the move</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer id="contact" class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-umbrella-beach text-blue-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">Emigre.eu</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Your trusted partner for relocating to Madeira, Portugal from California.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-6">Quick Links</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> | |
| <li><a href="#calculator" class="text-gray-400 hover:text-white transition duration-300">Savings Calculator</a></li> | |
| <li><a href="#benefits" class="text-gray-400 hover:text-white transition duration-300">Why Madeira?</a></li> | |
| <li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300">Testimonials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-6">Services</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Golden Visa</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Property Search</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tax Optimization</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Relocation Package</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Consultation</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-6">Contact Us</h3> | |
| <address class="not-italic text-gray-400"> | |
| <div class="mb-4 flex"><i class="fas fa-map-marker-alt mr-2 text-blue-400 mt-1"></i><span>123 Ocean View, Funchal, Madeira, Portugal</span></div> | |
| <div class="mb-4 flex"><i class="fas fa-envelope mr-2 text-blue-400 mt-1"></i><a href="mailto:info@emigre.eu" class="hover:text-white transition duration-300">info@emigre.eu</a></div> | |
| <div class="mb-4 flex"><i class="fas fa-phone-alt mr-2 text-blue-400 mt-1"></i><a href="tel:+351123456789" class="hover:text-white transition duration-300">+351 123 456 789</a></div> | |
| <div class="flex"><i class="fas fa-clock mr-2 text-blue-400 mt-1"></i><span>Mon-Fri: 9AM-6PM (PST)</span></div> | |
| </address> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 Emigre.eu. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- JavaScript for Mobile Menu and Calculator --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // --- Mobile Menu Toggle --- | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // --- Calculator Elements --- | |
| const calculateBtn = document.getElementById('calculate-btn'); | |
| const reportForm = document.getElementById('report-form'); | |
| const resultsPlaceholder = document.getElementById('results-placeholder'); | |
| const resultsContainer = document.getElementById('results-container'); | |
| const disclaimerIcon = document.getElementById('disclaimer-icon'); | |
| const disclaimerPopup = document.getElementById('disclaimer-popup'); | |
| const showReportFormBtn = document.getElementById('show-report-form-btn'); | |
| // --- Calculation Logic --- | |
| const calculateAndDisplaySavings = () => { | |
| const housing = parseFloat(document.getElementById('housing').value); | |
| const healthcare = parseFloat(document.getElementById('healthcare').value); | |
| const groceries = parseFloat(document.getElementById('groceries').value); | |
| const taxes = parseFloat(document.getElementById('taxes').value); | |
| const madeiraHousing = housing * 0.3; | |
| const madeiraHealthcare = healthcare * 0.125; | |
| const madeiraGroceries = groceries * 0.4; | |
| const madeiraTaxes = 0; | |
| const calTotal = housing + healthcare + groceries + taxes; | |
| const madeiraTotal = madeiraHousing + madeiraHealthcare + madeiraGroceries + madeiraTaxes; | |
| const savingsTotal = calTotal - madeiraTotal; | |
| const annualSavings = savingsTotal * 12; | |
| const formatNumber = (num) => num.toLocaleString(undefined, {maximumFractionDigits: 0}); | |
| document.getElementById('cal-housing').textContent = formatNumber(housing); | |
| document.getElementById('madeira-housing').textContent = formatNumber(madeiraHousing); | |
| document.getElementById('savings-housing').textContent = formatNumber(housing - madeiraHousing); | |
| document.getElementById('cal-healthcare').textContent = formatNumber(healthcare); | |
| document.getElementById('madeira-healthcare').textContent = formatNumber(madeiraHealthcare); | |
| document.getElementById('savings-healthcare').textContent = formatNumber(healthcare - madeiraHealthcare); | |
| document.getElementById('cal-groceries').textContent = formatNumber(groceries); | |
| document.getElementById('madeira-groceries').textContent = formatNumber(madeiraGroceries); | |
| document.getElementById('savings-groceries').textContent = formatNumber(groceries - madeiraGroceries); | |
| document.getElementById('cal-taxes').textContent = formatNumber(taxes); | |
| document.getElementById('madeira-taxes').textContent = formatNumber(madeiraTaxes); | |
| document.getElementById('savings-taxes').textContent = formatNumber(taxes - madeiraTaxes); | |
| document.getElementById('cal-total').textContent = formatNumber(calTotal); | |
| document.getElementById('madeira-total').textContent = formatNumber(madeiraTotal); | |
| document.getElementById('savings-total').textContent = formatNumber(savingsTotal); | |
| document.getElementById('annual-savings').textContent = formatNumber(annualSavings); | |
| }; | |
| // --- Event Listeners --- | |
| calculateBtn.addEventListener('click', function() { | |
| calculateAndDisplaySavings(); | |
| resultsPlaceholder.classList.add('hidden'); | |
| resultsContainer.classList.remove('hidden'); | |
| reportForm.classList.add('hidden'); | |
| showReportFormBtn.classList.remove('hidden'); | |
| resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| }); | |
| showReportFormBtn.addEventListener('click', function() { | |
| reportForm.classList.remove('hidden'); | |
| this.classList.add('hidden'); | |
| reportForm.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| }); | |
| const syncInputs = (rangeId, numberId) => { | |
| const rangeInput = document.getElementById(rangeId); | |
| const numberInput = document.getElementById(numberId); | |
| rangeInput.addEventListener('input', () => numberInput.value = rangeInput.value); | |
| numberInput.addEventListener('input', () => { | |
| if (Number(numberInput.value) > Number(rangeInput.max)) numberInput.value = rangeInput.max; | |
| else if (Number(numberInput.value) < Number(rangeInput.min)) numberInput.value = rangeInput.min; | |
| rangeInput.value = numberInput.value; | |
| }); | |
| }; | |
| ['income', 'housing', 'healthcare', 'groceries', 'taxes'].forEach(id => syncInputs(id, `${id}-display`)); | |
| disclaimerIcon.addEventListener('click', (event) => { | |
| event.stopPropagation(); | |
| disclaimerPopup.classList.toggle('hidden'); | |
| }); | |
| document.addEventListener('click', (event) => { | |
| const isClickInside = disclaimerPopup.contains(event.target) || disclaimerIcon.contains(event.target); | |
| if (!disclaimerPopup.classList.contains('hidden') && !isClickInside) { | |
| disclaimerPopup.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </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=dickiethinking/madeira-compile" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |