# Landing Page Brief: "Smart Move to Madeira" – Cost of Living Calculator for Californian HNWIs ## Overview **Project Title:** Smart Move to Madeira Landing Page **Objective:** Create a high-conversion landing page that educates and engages 50-something Californian High Net Worth Individuals (HNWIs) on the financial benefits of relocating to Madeira, Portugal. The page will center around an interactive Cost of Living Calculator widget to demonstrate personalized savings, blending pragmatic financial insights with aspirational lifestyle elements. This aligns with the audience's preference for value-driven, trust-based content over overt sales pitches. **Target Audience:** Californian HNWIs aged 50-65 with net worth >$1M, focused on wealth preservation, early retirement (FIRE movement), and strategic life changes. They are skeptical of ads, value authenticity, and respond to data-backed financial education. **Key Goal:** Drive leads by encouraging users to input financial data into the calculator, view customized results, and opt-in for a free consultation or exclusive relocation guide. Aim for a 20-30% conversion rate on calculator usage to email capture. **Tone & Style:** Professional, sophisticated, and empowering. Use clean, luxury-inspired design with high-quality visuals (e.g., Madeira landscapes, modern villas). Language should be informative and aspirational, emphasizing "smart financial moves" rather than "escape California." **Platform Integration:** Optimize for desktop and mobile; integrate with YouTube embeds, Facebook group invites, and Instagram links for cross-platform traffic. **Timeline:** Design and development: 4 weeks; Launch: August 15, 2025. **Budget Estimate:** $15,000-$25,000 (including widget development, copywriting, visuals, and A/B testing). ## Page Structure & Key Elements The landing page should follow a logical flow: Hook → Educate → Interact → Call to Action. Use a single-scroll design with parallax effects for engagement, ensuring fast load times (<3 seconds). 1. **Hero Section: The Hook (Above the Fold)** - **Headline:** "Unlock a Wealthier Retirement: Compare Your California Life to Madeira's Paradise" - **Subheadline:** "Discover how relocating could save you thousands annually while elevating your lifestyle. Input your details below for instant insights." - **Visuals:** High-resolution hero image or short video loop of Madeira's luxury coastline, overlaid with subtle financial icons (e.g., tax savings graph). Include a teaser stat: "Californians save an average of 30-50% on cost of living in Madeira." - **CTA Teaser:** Prominent button: "Start Your Calculation Now" linking to the calculator section. 2. **Educational Content: Build Trust and Context** - **Section Title:** "Why Madeira? The Financial and Lifestyle Edge" - **Content Breakdown:** - Brief paragraphs blending insights from market research: - Financial Pragmatism: Highlight tax advantages (e.g., Portugal's NHR regime vs. California's high taxes), real estate ROI, and wealth growth opportunities. Reference FIRE principles and expat success stories. - Aspirational Lifestyle: Describe luxury living (yachting, fine dining, heritage crafts) with embedded YouTube clips from channels like Enes Yilmazer or Our Rich Journey. - Skepticism Address: Emphasize privacy, no hard sells: "We're here to provide data-driven value, not pressure." - Bullet points for scannability: - "Lower Taxes: Potential 0% on foreign income under NHR." - "Affordable Luxury: Groceries and healthcare at 40-60% less than California." - "Quality of Life: Cleaner air, safer communities, and endless adventure." - **Visuals:** Infographics comparing CA vs. Madeira costs; testimonial quotes from fictional or anonymized expats (e.g., "Saved $50K/year – John D., Former LA Investor"). 3. **Interactive Calculator Widget: The Core Feature** - **Section Title:** "Your Personalized Savings Calculator" - **Description:** An embedded, user-friendly widget that allows visitors to input their current California financials and instantly see projected Madeira equivalents, highlighting annual savings. This tool positions the page as a valuable resource, encouraging data sharing for lead gen. - **Widget Functionality:** - **Inputs (User-Friendly Form Fields):** - Monthly Income (pre-tax/post-tax options). - Monthly Medical/Healthcare Costs. - Monthly Groceries/Food Expenses. - Monthly Housing (rent/mortgage). - Monthly Utilities/Transportation. - Annual Taxes (estimated bracket). - Other Custom Fields: e.g., Entertainment, Travel (optional). - **Outputs:** - Side-by-side comparison table: "Your California Costs" vs. "Projected Madeira Costs" (using averaged data from reliable sources like Numbeo or Expatistan, adjusted for HNWI lifestyle). - Key Metrics: Total Monthly/Annual Savings, Tax Reduction Percentage, Net Worth Growth Projection (simple 5-year forecast). - Visuals: Interactive bar charts or pie graphs showing breakdowns (e.g., "Healthcare: $800 CA vs. $300 Madeira"). - **Data Handling:** Ensure GDPR compliance; no data storage without consent. Use anonymized inputs for calculations. Include disclaimer: "Estimates based on averages; consult a professional for personalized advice." - **Tech Specs:** Built with JavaScript (e.g., React widget) or embedded tools like Typeform/Calculator.js. Integrate with backend for dynamic data (e.g., API pulls for current cost indices). Mobile-responsive with sliders for easy input. - **Engagement Boost:** Post-calculation popup: "Impressed? Get your free Expat Relocation Guide" with email opt-in. 4. **Social Proof & Community Tie-In** - **Section Title:** "Join Like-Minded Californians Who Made the Move" - **Content:** Embed authentic testimonials (video or text) from expat channels like Track Us Down. Link to exclusive Facebook group: "Join our private California-to-Portugal Investors Community for more insights." - **Visuals:** Carousel of Instagram-style photos from Madeira luxury properties. 5. **Call to Action & Footer** - **Primary CTA:** "Schedule a Free Consultation" button, leading to a form for name, email, and relocation timeline. - **Secondary CTAs:** "Download Free Guide," "Watch Our YouTube Series." - **Footer:** Contact info, privacy policy, social links (YouTube, Facebook, Instagram). Include trust badges (e.g., "Backed by Real Estate Experts"). ## Performance Metrics & Optimization - **Tracking:** Use Google Analytics for bounce rate, calculator completion rate, and conversions. A/B test headlines, CTA colors, and widget fields. - **SEO:** Optimize for keywords like "California to Madeira relocation cost calculator," "HNWI expat tax savings Portugal." - **Potential Challenges:** Address ad-blocker usage by focusing on organic traffic from YouTube/Facebook. Ensure widget accuracy with quarterly data updates. - **Success Indicators:** 50%+ calculator engagement; 15%+ lead conversion; positive feedback on authenticity. This brief provides a clear blueprint for a landing page that not only informs but converts by leveraging the calculator as a high-value, interactive tool tailored to the audience's financial mindset. - Follow Up Deployment
ad93897
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Smart Move to Madeira - Cost of Living Calculator</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"> | |
| <style> | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1620121692029-d088224ddc74?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| min-height: 90vh; | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .cost-comparison-bar { | |
| height: 40px; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| } | |
| .california-bar { | |
| background: linear-gradient(90deg, #f59e0b, #ef4444); | |
| } | |
| .madeira-bar { | |
| background: linear-gradient(90deg, #10b981, #3b82f6); | |
| } | |
| .calculator-input { | |
| transition: all 0.3s ease; | |
| } | |
| .calculator-input:focus { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .result-card { | |
| transition: all 0.5s ease; | |
| opacity: 0; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .result-card.show { | |
| opacity: 1; | |
| height: auto; | |
| } | |
| @media (max-width: 768px) { | |
| .hero-bg { | |
| min-height: 70vh; | |
| } | |
| .parallax { | |
| background-attachment: scroll; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 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-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800">Smart Move to Madeira</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <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> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white shadow-lg"> | |
| <a href="#calculator" class="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium">Calculator</a> | |
| <a href="#benefits" class="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium">Benefits</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium">Testimonials</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg flex items-center justify-center text-white parallax"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center py-20"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 animate-fade-in"> | |
| Unlock a Wealthier Retirement | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-8"> | |
| Compare Your California Life to Madeira's Paradise | |
| </h2> | |
| <p class="text-lg md:text-xl mb-10 max-w-3xl mx-auto"> | |
| Discover how relocating could save you thousands annually while elevating your lifestyle. | |
| <span class="block mt-2 text-yellow-300 font-medium">Californians save an average of 30-50% on cost of living in Madeira.</span> | |
| </p> | |
| <a href="#calculator" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg"> | |
| Start Your Calculation Now | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> | |
| <div class="p-6 rounded-xl bg-gradient-to-br from-blue-50 to-green-50 shadow-md"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">30-50%</div> | |
| <div class="text-gray-700">Average Cost of Living Savings</div> | |
| </div> | |
| <div class="p-6 rounded-xl bg-gradient-to-br from-yellow-50 to-orange-50 shadow-md"> | |
| <div class="text-4xl font-bold text-yellow-600 mb-2">0%</div> | |
| <div class="text-gray-700">Tax on Foreign Income (NHR Program)</div> | |
| </div> | |
| <div class="p-6 rounded-xl bg-gradient-to-br from-green-50 to-teal-50 shadow-md"> | |
| <div class="text-4xl font-bold text-green-600 mb-2">#1</div> | |
| <div class="text-gray-700">Europe's Leading Island Destination</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits 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 md:text-4xl font-bold text-gray-900 mb-4">Why Madeira? The Financial and Lifestyle Edge</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Discover how Madeira offers the perfect blend of financial advantages and quality of life for discerning Californians. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4 flex items-center"> | |
| <i class="fas fa-chart-line text-blue-500 mr-3"></i> Financial Pragmatism | |
| </h3> | |
| <p class="text-gray-700 mb-4"> | |
| Madeira offers significant tax advantages through Portugal's Non-Habitual Resident (NHR) regime, allowing qualified individuals to potentially pay 0% tax on foreign income for 10 years. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Lower property taxes and no wealth tax compared to California</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Affordable luxury real estate with 40-60% lower prices than comparable California properties</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Golden Visa program offering EU residency through real estate investment</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4 flex items-center"> | |
| <i class="fas fa-home text-blue-500 mr-3"></i> Quality of Life | |
| </h3> | |
| <p class="text-gray-700 mb-4"> | |
| Beyond financial benefits, Madeira offers an exceptional quality of life that's increasingly hard to find in California. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Year-round spring-like climate (15-25°C / 59-77°F)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Clean air and pristine natural environment</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Safe communities with low crime rates</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>World-class healthcare at a fraction of U.S. costs</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-white p-6 rounded-xl shadow-xl border border-gray-200"> | |
| <div class="aspect-w-16 aspect-h-9 mb-6"> | |
| <iframe class="w-full h-96 rounded-lg" src="https://www.youtube.com/embed/9tBjgQ9k6X0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-3">Madeira: Europe's Best Kept Secret</h4> | |
| <p class="text-gray-600">See why more high-net-worth individuals are choosing Madeira for their European base.</p> | |
| </div> | |
| <div class="absolute -bottom-6 -left-6 -z-10"> | |
| <div class="bg-blue-100 w-32 h-32 rounded-full opacity-50"></div> | |
| </div> | |
| <div class="absolute -top-6 -right-6 -z-10"> | |
| <div class="bg-green-100 w-24 h-24 rounded-full opacity-50"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Calculator Section --> | |
| <section id="calculator" class="py-20 bg-gradient-to-br from-blue-50 to-green-50"> | |
| <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Your Personalized Savings Calculator</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Input your current California expenses to see how much you could save by moving to Madeira. | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-2xl overflow-hidden"> | |
| <div class="p-8"> | |
| <form id="costCalculator"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-dollar-sign text-yellow-500 mr-2"></i> Your California Costs | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="income" class="block text-sm font-medium text-gray-700 mb-1">Monthly Income (after tax)</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500">$</span> | |
| </div> | |
| <input type="number" id="income" class="calculator-input pl-8 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3" placeholder="10,000"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="housing" class="block text-sm font-medium text-gray-700 mb-1">Housing (Rent/Mortgage)</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500">$</span> | |
| </div> | |
| <input type="number" id="housing" class="calculator-input pl-8 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3" placeholder="3,500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="healthcare" class="block text-sm font-medium text-gray-700 mb-1">Healthcare Costs</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500">$</span> | |
| </div> | |
| <input type="number" id="healthcare" class="calculator-input pl-8 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3" placeholder="800"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="groceries" class="block text-sm font-medium text-gray-700 mb-1">Groceries & Dining</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500">$</span> | |
| </div> | |
| <input type="number" id="groceries" class="calculator-input pl-8 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3" placeholder="1,200"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-chart-pie text-blue-500 mr-2"></i> Additional Expenses | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="utilities" class="block text-sm font-medium text-gray-700 mb-1">Utilities & Transportation</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500">$</span> | |
| </div> | |
| <input type="number" id="utilities" class="calculator-input pl-8 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3" placeholder="600"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="taxes" class="block text-sm font-medium text-gray-700 mb-1">Annual State Taxes</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500">$</span> | |
| </div> | |
| <input type="number" id="taxes" class="calculator-input pl-8 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3" placeholder="15,000"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="entertainment" class="block text-sm font-medium text-gray-700 mb-1">Entertainment & Leisure</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500">$</span> | |
| </div> | |
| <input type="number" id="entertainment" class="calculator-input pl-8 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3" placeholder="1,000"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="other" class="block text-sm font-medium text-gray-700 mb-1">Other Expenses</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500">$</span> | |
| </div> | |
| <input type="number" id="other" class="calculator-input pl-8 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3" placeholder="500"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button type="button" id="calculateBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-12 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg"> | |
| Calculate My Savings | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Results Section (Initially Hidden) --> | |
| <div id="resultsSection" class="result-card bg-gray-50 border-t border-gray-200 p-8"> | |
| <h3 class="text-2xl font-bold text-center mb-8 text-gray-800">Your Potential Savings in Madeira</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200"> | |
| <h4 class="text-lg font-semibold mb-4 text-gray-700 flex items-center"> | |
| <i class="fas fa-sun text-yellow-500 mr-2"></i> California Monthly Costs | |
| </h4> | |
| <div id="californiaResults" class="space-y-3"> | |
| <!-- Filled by JavaScript --> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>Total Monthly:</span> | |
| <span id="californiaTotal">$0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200"> | |
| <h4 class="text-lg font-semibold mb-4 text-gray-700 flex items-center"> | |
| <i class="fas fa-umbrella-beach text-blue-500 mr-2"></i> Madeira Monthly Costs | |
| </h4> | |
| <div id="madeiraResults" class="space-y-3"> | |
| <!-- Filled by JavaScript --> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>Total Monthly:</span> | |
| <span id="madeiraTotal">$0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-r from-blue-600 to-green-600 text-white p-6 rounded-xl shadow-lg"> | |
| <h4 class="text-xl font-bold mb-4">Your Potential Savings</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold mb-2" id="monthlySavings">$0</div> | |
| <div class="text-blue-100">Monthly Savings</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold mb-2" id="annualSavings">$0</div> | |
| <div class="text-blue-100">Annual Savings</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold mb-2" id="taxSavings">$0</div> | |
| <div class="text-blue-100">Annual Tax Savings</div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h5 class="font-semibold mb-3">Cost Comparison</h5> | |
| <div id="costComparisonBars" class="space-y-4"> | |
| <!-- Filled by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <p class="text-gray-700 mb-6">Impressed by these numbers? Get your free Madeira Relocation Guide to learn more.</p> | |
| <button id="getGuideBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg"> | |
| Get Free Guide | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" 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 md:text-4xl font-bold text-gray-900 mb-4">Join Like-Minded Californians Who Made the Move</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Hear from others who have successfully transitioned to a better life in Madeira. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-4">JD</div> | |
| <div> | |
| <h4 class="font-semibold">John D.</h4> | |
| <p class="text-sm text-gray-500">Former LA Investor</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"After moving to Madeira, we're saving over $50K annually while enjoying a better quality of life. The NHR tax program was a game-changer for our retirement."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold mr-4">SM</div> | |
| <div> | |
| <h4 class="font-semibold">Sarah M.</h4> | |
| <p class="text-sm text-gray-500">Tech Entrepreneur</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"We were able to retire 5 years earlier than planned thanks to Madeira's lower costs. The healthcare is excellent and costs 70% less than our California plan."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">RK</div> | |
| <div> | |
| <h4 class="font-semibold">Robert K.</h4> | |
| <p class="text-sm text-gray-500">Retired Attorney</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"The sense of community here is incredible. We've found a wonderful group of expats and locals. Our grandkids love visiting - it's like a permanent vacation!"</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-gradient-to-r from-blue-600 to-green-600 text-white rounded-xl shadow-xl overflow-hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2"> | |
| <div class="p-8 md:p-12"> | |
| <h3 class="text-2xl font-bold mb-4">Join Our Private Community</h3> | |
| <p class="mb-6">Connect with other Californians considering or already living in Madeira. Get exclusive insights and advice.</p> | |
| <a href="#" class="inline-block bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-full transition duration-300"> | |
| <i class="fab fa-facebook mr-2"></i> Join Facebook Group | |
| </a> | |
| </div> | |
| <div class="hidden md:block bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1551524559-8af4e6624178?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1926&q=80');"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section id="contact" class="py-20 bg-gray-900 text-white parallax" style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1590523278191-995cbcda646b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Explore Your Madeira Opportunity?</h2> | |
| <p class="text-xl mb-10 max-w-3xl mx-auto"> | |
| Schedule a free consultation with our relocation experts to discuss your specific situation. | |
| </p> | |
| <div class="bg-white rounded-lg shadow-xl p-8 max-w-2xl mx-auto"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Book Your Free Consultation</h3> | |
| <form class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> | |
| <input type="text" id="name" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4" placeholder="Your name"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4" placeholder="your@email.com"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="timeline" class="block text-sm font-medium text-gray-700 mb-1">Relocation Timeline</label> | |
| <select id="timeline" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4"> | |
| <option value="">Select your timeline</option> | |
| <option value="3-6 months">3-6 months</option> | |
| <option value="6-12 months">6-12 months</option> | |
| <option value="1-2 years">1-2 years</option> | |
| <option value="just exploring">Just exploring options</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="questions" class="block text-sm font-medium text-gray-700 mb-1">Specific Questions</label> | |
| <textarea id="questions" rows="3" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4" placeholder="What would you like to discuss?"></textarea> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-300 shadow-lg"> | |
| Schedule My Free Consultation | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-umbrella-beach text-blue-400 mr-2"></i> Smart Move to Madeira | |
| </h3> | |
| <p class="text-gray-400 text-sm"> | |
| Helping Californians discover the financial and lifestyle benefits of relocating to Madeira, Portugal. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#calculator" class="text-gray-400 hover:text-white transition">Calculator</a></li> | |
| <li><a href="#benefits" class="text-gray-400 hover:text-white transition">Benefits</a></li> | |
| <li><a href="#testimonials" class="text-gray-400 hover:text-white transition">Testimonials</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Relocation Guide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tax Benefits</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Real Estate</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in text-xl"></i></a> | |
| </div> | |
| <p class="text-gray-400 text-sm"> | |
| Email: info@smartmovetomadeira.com<br> | |
| Phone: +1 (555) 123-4567 | |
| </p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 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 Smart Move to Madeira. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Disclaimer</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Guide Modal --> | |
| <div id="guideModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-900">Get Your Free Relocation Guide</h3> | |
| <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-700 mb-6"> | |
| Enter your email to receive our comprehensive Madeira Relocation Guide, including: | |
| <ul class="list-disc list-inside text-gray-700 mb-6 space-y-2"> | |
| <li>Step-by-step relocation checklist</li> | |
| <li>Detailed cost of living breakdown</li> | |
| <li>Tax optimization strategies</li> | |
| <li>Best neighborhoods for expats</li> | |
| </ul> | |
| </p> | |
| <form id="guideForm" class="space-y-4"> | |
| <div> | |
| <label for="guideEmail" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> | |
| <input type="email" id="guideEmail" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4" placeholder="your@email.com" required> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 shadow-lg"> | |
| Send Me the Guide | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Calculator functionality | |
| document.getElementById('calculateBtn').addEventListener('click', function() { | |
| // Get input values | |
| const income = parseFloat(document.getElementById('income').value) || 0; | |
| const housing = parseFloat(document.getElementById('housing').value) || 0; | |
| const healthcare = parseFloat(document.getElementById('healthcare').value) || 0; | |
| const groceries = parseFloat(document.getElementById('groceries').value) || 0; | |
| const utilities = parseFloat(document.getElementById('utilities').value) || 0; | |
| const taxes = parseFloat(document.getElementById('taxes').value) || 0; | |
| const entertainment = parseFloat(document.getElementById('entertainment').value) || 0; | |
| const other = parseFloat(document.getElementById('other').value) || 0; | |
| // Calculate Madeira equivalents (using average savings percentages) | |
| const madeiraHousing = housing * 0.6; // 40% savings | |
| const madeiraHealthcare = healthcare * 0.3; // 70% savings | |
| const madeiraGroceries = groceries * 0.6; // 40% savings | |
| const madeiraUtilities = utilities * 0.7; // 30% savings | |
| const madeiraTaxes = taxes * 0.1; // 90% savings (NHR program) | |
| const madeiraEntertainment = entertainment * 0.7; // 30% savings | |
| const madeiraOther = other * 0.7; // 30% savings | |
| // Calculate totals | |
| const californiaTotal = housing + healthcare + groceries + utilities + (taxes/12) + entertainment + other; | |
| const madeiraTotal = madeiraHousing + madeiraHealthcare + madeiraGroceries + madeiraUtilities + (madeiraTaxes/12) + madeiraEntertainment + madeiraOther; | |
| // Calculate savings | |
| const monthlySavings = californiaTotal - madeiraTotal; | |
| const annualSavings = monthlySavings * 12; | |
| const taxSavings = taxes - madeiraTaxes; | |
| // Update California results | |
| document.getElementById('californiaResults').innerHTML = ` | |
| <div class="flex justify-between"> | |
| <span>Housing:</span> | |
| <span>$${housing.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Healthcare:</span> | |
| <span>$${healthcare.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Groceries:</span> | |
| <span>$${groceries.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Utilities:</span> | |
| <span>$${utilities.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Taxes (monthly):</span> | |
| <span>$${(taxes/12).toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Entertainment:</span> | |
| <span>$${entertainment.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Other:</span> | |
| <span>$${other.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| `; | |
| document.getElementById('californiaTotal').textContent = `$${californiaTotal.toLocaleString('en-US', {maximumFractionDigits: 0})}`; | |
| // Update Madeira results | |
| document.getElementById('madeiraResults').innerHTML = ` | |
| <div class="flex justify-between"> | |
| <span>Housing:</span> | |
| <span>$${madeiraHousing.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Healthcare:</span> | |
| <span>$${madeiraHealthcare.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Groceries:</span> | |
| <span>$${madeiraGroceries.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Utilities:</span> | |
| <span>$${madeiraUtilities.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Taxes (monthly):</span> | |
| <span>$${(madeiraTaxes/12).toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Entertainment:</span> | |
| <span>$${madeiraEntertainment.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Other:</span> | |
| <span>$${madeiraOther.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| `; | |
| document.getElementById('madeiraTotal').textContent = `$${madeiraTotal.toLocaleString('en-US', {maximumFractionDigits: 0})}`; | |
| // Update savings | |
| document.getElementById('monthlySavings').textContent = `$${monthlySavings.toLocaleString('en-US', {maximumFractionDigits: 0})}`; | |
| document.getElementById('annualSavings').textContent = `$${annualSavings.toLocaleString('en-US', {maximumFractionDigits: 0})}`; | |
| document.getElementById('taxSavings').textContent = `$${taxSavings.toLocaleString('en-US', {maximumFractionDigits: 0})}`; | |
| // Update comparison bars | |
| const categories = [ | |
| { name: 'Housing', ca: housing, madeira: madeiraHousing }, | |
| { name: 'Healthcare', ca: healthcare, madeira: madeiraHealthcare }, | |
| { name: 'Groceries', ca: groceries, madeira: madeiraGroceries }, | |
| { name: 'Taxes', ca: taxes/12, madeira: madeiraTaxes/12 } | |
| ]; | |
| let barsHTML = ''; | |
| categories.forEach(cat => { | |
| const caPercent = Math.min(100, (cat.ca / (cat.ca + cat.madeira)) * 100); | |
| const madeiraPercent = 100 - caPercent; | |
| barsHTML += ` | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>${cat.name}</span> | |
| <span>$${cat.ca.toLocaleString('en-US', {maximumFractionDigits: 0})} vs $${cat.madeira.toLocaleString('en-US', {maximumFractionDigits: 0})}</span> | |
| </div> | |
| <div class="cost-comparison-bar flex"> | |
| <div class="california-bar" style="width: ${caPercent}%"></div> | |
| <div class="madeira-bar" style="width: ${madeiraPercent}%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs mt-1"> | |
| <span class="text-blue-100">California</span> | |
| <span class="text-blue-100">Madeira</span> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| document.getElementById('costComparisonBars').innerHTML = barsHTML; | |
| // Show results section | |
| document.getElementById('resultsSection').classList.add('show'); | |
| // Scroll to results | |
| document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| }); | |
| // Guide modal | |
| document.getElementById('getGuideBtn').addEventListener('click', function() { | |
| document.getElementById('guideModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('closeModalBtn').addEventListener('click', function() { | |
| document.getElementById('guideModal').classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| document.getElementById('guideModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| this.classList.add('hidden'); | |
| } | |
| }); | |
| // Form submission | |
| document.getElementById('guideForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const email = document.getElementById('guideEmail').value; | |
| alert(`Thank you! Your Madeira Relocation Guide has been sent to ${email}.`); | |
| document.getElementById('guideModal').classList.add('hidden'); | |
| this.reset(); | |
| }); | |
| </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/madeiracalculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |