dickiethinking commited on
Commit
df1908e
·
verified ·
1 Parent(s): 4a37da5

# Emigre.eu: Your Gateway to Relocating to Madeira, Portugal - Complete Project Description ## Project Overview Welcome to Emigre.eu, the premier resource for seamless relocation to Madeira, Portugal, with a special focus on Californian High Net Worth Individuals (HNWIs) aged 50-65 seeking wealth preservation, early retirement through the FIRE movement, and strategic life enhancements. Our mission is to empower you with data-driven insights to escape high taxes and costs while embracing a luxurious, tax-efficient paradise. Inspired by our promotional video (embedded below) and centered around our interactive "Smart Move to Madeira" Cost of Living Calculator, this site blends pragmatic financial education with aspirational lifestyle elements. We emphasize authenticity and value—no hard sells, just tools and expertise to support your smart financial moves. Drawing from an earlier draft prototype (hosted as a Hugging Face Space), we've incorporated additional engaging features like strategically placed inset videos (embedded YouTube clips showcasing specific aspects of Madeira life, such as expat testimonials or virtual tours) and direct links to our private Facebook group for community interaction. These elements enhance user immersion, providing visual storytelling and peer connections right within the content flow. ## Technical Specifications & Design The site is optimized for desktop and mobile, with fast load times (<3 seconds), parallax scrolling for engagement, and integrations for YouTube embeds, Facebook group invites, and Instagram links to drive cross-platform traffic. Built on a clean, responsive Bootstrap template with luxury-inspired design (high-resolution Madeira landscapes, modern villas, subtle financial icons), it uses a professional, sophisticated, and empowering tone. SEO targets keywords like "California to Madeira relocation cost calculator," "HNWI expat tax savings Portugal," and "cost of living comparison California vs Madeira." ## Key Performance Goals - Achieve 20-30% conversion on calculator usage to email capture - Track via Google Analytics for bounce rates, completions, and leads - Launch aligned with August 15, 2025 timeline - Budget considerations include widget development ## Site Structure & Content ### Promotional Video Introduction Experience the allure of Madeira firsthand. This video contrasts the stresses of California urban living with the serene, adventurous, and affluent lifestyle awaiting you. ```html <iframe width="560" height="315" src="https://www.youtube.com/embed/ft6eYEj0fII" title="Relocate to Madeira with Emigre.eu" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> ``` ### Home/Landing Page: "Smart Move to Madeira" – The Core Experience The homepage follows a single-scroll, high-conversion structure: Hook → Educate → Interact → Call to Action. It educates on financial benefits while engaging users through the calculator, inset videos, and community links, driving leads via opt-ins for consultations or guides. #### 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 (e.g., infinity pools, vineyards), overlaid with subtle financial icons like tax savings graphs. Teaser stat: "Californians save an average of 30-50% on cost of living in Madeira, with potential tax reductions up to 13.3% on state income." - **Inset Video:** Embedded short clip (e.g., 15-second inset from Enes Yilmazer channel) showing a luxury Madeira villa tour, positioned beside the headline for immediate visual appeal. - **CTA Teaser:** Prominent button: "Start Your Calculation Now" scrolling to the calculator. Embed a short clip from the main video for immediate immersion. #### 2. Educational Content: Build Trust and Context - **Section Title:** "Why Madeira? The Financial and Lifestyle Edge for Californian HNWIs" - **Content Breakdown:** - **Financial Pragmatism:** Highlight tax advantages (e.g., Portugal's Non-Habitual Resident (NHR) regime offering a flat 20% on eligible Portuguese income and exemptions on foreign-sourced income for up to 10 years, vs. California's top state income tax of 13.3% plus federal rates). Discuss real estate ROI (Madeira properties yielding higher returns with lower entry costs) and wealth growth aligned with FIRE principles. Reference expat success stories: "Many Californians preserve more wealth through NHR's 0% tax on foreign pensions and dividends." - **Aspirational Lifestyle:** Describe luxury living (yachting on clear waters, fine dining in vineyards, heritage crafts in lush forests) with embedded YouTube clips from channels like Enes Yilmazer (luxury homes) or Our Rich Journey (FIRE expats). - **Addressing Skepticism:** "We're committed to privacy and data-driven value—empowering your decisions without pressure." - **Bullet Points for Scannability:** - Lower Taxes: Potential 0% on foreign income under NHR vs. California's 13.3% top rate. - Affordable Luxury: Groceries and healthcare 40-60% less (e.g., monthly healthcare €50-€100 in Madeira vs. $400-$800 in California). - Quality of Life: Cleaner air, safer communities, and endless adventures like paragliding and hiking. - **Visuals:** Infographics comparing CA vs. Madeira costs (e.g., housing: $3,000+ monthly rent in San Francisco vs. $1,000-$1,500 in Funchal); testimonial quotes: "Saved $50K/year – John D., Former LA Investor." - **Inset Videos:** Multiple small embedded videos inset within paragraphs, e.g., a 20-second clip of a couple hiking in Madeira forests next to the "Quality of Life" bullet, or a vineyard tour video beside "Affordable Luxury." #### 3. Interactive Calculator Widget: The Core Feature - **Section Title:** "Your Personalized Savings Calculator" - **Description:** An embedded, user-friendly widget tailored for 50-65 year-old Californian HNWIs, allowing inputs of current financials to instantly project Madeira equivalents and savings. This positions Emigre.eu as a valuable resource, encouraging data sharing for lead generation while complying with GDPR (anonymized inputs, no storage without consent). Disclaimer: "Estimates based on averages from sources like Numbeo and Expatistan; consult professionals for advice." **Widget Functionality (Built with React/JavaScript, integrated via API for dynamic data like current indices):** **Inputs (User-Friendly Form Fields with Sliders for Mobile):** - Monthly Income (pre-tax/post-tax options, e.g., $10,000+ for HNWIs) - Monthly Medical/Healthcare Costs (e.g., default California average $500-$800 for 50-65 year-olds) - Monthly Groceries/Food Expenses (e.g., $800 CA vs. $400 Madeira) - Monthly Housing (rent/mortgage, e.g., $4,000 CA vs. $1,500 Madeira) - Monthly Utilities/Transportation (e.g., $300 CA vs. $150 Madeira) - Annual Taxes (estimated bracket, factoring CA's 13.3% top rate vs. NHR's 20% flat/exemptions) - Other Custom Fields: Entertainment, Travel (optional, e.g., $1,000 CA vs. $600 Madeira) **Outputs (Side-by-Side Comparison Table):** | Category | California Costs (Monthly) | Madeira Projections (Monthly) | Savings (Monthly) | |----------|----------------------------|-------------------------------|-------------------| | Healthcare | $600 | $75 (private insurance €50-100) | $525 | | Groceries | $800 | $320 (40% lower) | $480 | | Housing | $4,000 | $1,200 (ocean-view villa) | $2,800 | | Utilities/Transport | $300 | $120 | $180 | | Taxes (Annual, prorated) | $2,000 (13.3% bracket) | $0 (NHR foreign income exemption) | $2,000 | | **Total** | **$7,700** | **$1,715** | **$5,985** | **Key Metrics:** - Total Annual Savings (e.g., $71,820) - Tax Reduction Percentage (up to 100% on foreign income) - Net Worth Growth Projection (simple 5-year forecast assuming 5% ROI on savings) - Visuals: Interactive bar/pie charts (e.g., "Healthcare: 87% savings"). Data sourced from 2025 averages: Portugal healthcare €50-€100/month vs. CA $400-$800; overall 30-50% lower costs. **Engagement Boost:** Post-calculation popup: "Impressed with your $XX,XXX savings? Get your free Expat Relocation Guide" with email opt-in. A/B test fields for optimization. **Inset Video:** Embedded beside the widget: A short demo video (from the prototype draft) walking through calculator usage, with voiceover explaining HNWI-specific benefits. #### 4. Social Proof & Community Tie-In - **Section Title:** "Join Like-Minded Californians Who Made the Move" - **Content:** Embed testimonials (video/text) from expat channels like Track Us Down. Prominently feature a direct link to our private Facebook group: [Join the California-to-Madeira Expat Community](https://www.facebook.com/groups/californiatomadeira) – an exclusive, moderated space for HNWIs to share relocation stories, tax tips, property deals, and FIRE strategies. (Group rules emphasize privacy and value-driven discussions.) - **Visuals:** Carousel of Instagram-style photos from Madeira luxury properties. - **Inset Videos:** Multiple testimonial videos inset here, e.g., 30-second clips of expats discussing their moves, pulled from YouTube or user-submitted content. #### 5. Call to Action & Footer - **Primary CTA:** "Schedule a Free Consultation" form (name, email, timeline) - **Secondary CTAs:** "Download Free Guide," "Watch Our YouTube Series" (linking to embedded video), "Join Private Facebook Group" (direct link repeated for emphasis) - **Footer:** Contact info, privacy policy, social links (YouTube, Facebook, Instagram). Trust badges: "Backed by Real Estate Experts." ### Why Relocate to Madeira? (Expanded Page) Building on the landing page, this page dives deeper into benefits tailored for Californian HNWIs, with inset videos enhancing each section: | Aspect | Key Benefits | How It Enhances Your Life | |--------|--------------|---------------------------| | **Tax Incentives** | NHR: 20% flat on PT income, 0% on foreign (pensions/dividends) for 10 years; vs. CA's 13.3% + solidarity surtax avoidance. | Preserve wealth, accelerate FIRE goals—save thousands vs. high-tax CA. *(Inset Video: Quick explainer on NHR vs. CA taxes.)* | | **Cost of Living** | 30-50% lower; e.g., healthcare $75/month vs. $600. | Indulge in premium experiences (fine wines, ocean-view homes) affordably. *(Inset Video: Market shopping in Madeira.)* | | **Climate & Nature** | 300+ sunny days, subtropical; black sand beaches, forests. | Year-round activities: yoga, cycling, snorkeling for active retirement. *(Inset Video: Paragliding over coastlines.)* | | **Healthcare** | Affordable private plans €50-€100/month; multilingual pros. | Quality care at 80% less than CA's $400-$800 premiums for 50-65 year-olds. *(Inset Video: Consultation in modern clinic.)* | | **Work-Life Balance** | Ocean-view workspaces; remote-friendly. | Productive yet relaxed, with cultural festivals and marinas. *(Inset Video: Working from a balcony.)* | | **Culture & Community** | Vibrant night markets, theaters, grape harvesting. | Enriched social life—romantic dinners, dancing under stars. *(Inset Video: Festival participation.)* | | **Luxury & Leisure** | Yachting, infinity pools, paragliding. | Elevated retirement: freedom in convertibles along coastal roads. *(Inset Video: Yacht relaxation.)* | ### Our Services: Tailored Relocation Assistance Specializing in Madeira for Californian HNWIs: Personalized guidance on Golden Visa, property selection, tax setups. Handle negotiations, legal, and integration. Experts in real estate, offering hassle-free moves. **Inset Videos:** Step-by-step service overviews embedded in descriptions. ### Client Testimonials - "Emigre.eu's calculator and Facebook group connected us—now enjoying Madeira's vineyards tax-free!" – Elena, Entrepreneur from San Francisco. *(Embedded Video Testimonial: Elena's story.)* - "From CA's high costs to paradise: Healthcare savings alone covered our move." – Robert, Retiree from LA. *(Embedded Video: Robert from LA.)* ### Blog & Resources Articles: "Tax Strategies for CA HNWIs in Madeira," "FIRE in Portugal: Community Insights" (with links to Facebook discussions). **Inset Videos:** Relevant clips from expat YouTubers. Subscribe for updates. ### Contact Us Schedule via [Contact Page](contact): info@emigre.eu or +351-123-456-789. Join our private Facebook group for immediate community access. Follow for inspiration. ## Technical Development Specifications **Frontend:** React for widget and videos, Node.js backend, Vercel hosting **Data Sources:** Quarterly data updates from sources like Numbeo and Expatistan **Analytics:** Google Analytics integration for conversion tracking **Prototype Reference:** Hugging Face Space draft informed calculator demo refinements **Footer:** © 2025 Emigre.eu | Privacy Policy | Terms of Service | Sitemap --- This enhanced site integrates ideas from the prototype draft, such as inset videos for dynamic storytelling in every section and prominent private Facebook group links for building an exclusive community. The Hugging Face Space draft's interactive calculator demo informed refinements to widget usability. The calculator serves as the high-value centerpiece, boosting engagement and conversions while maintaining the video's supportive role. If needed, wireframes or additional code specifications can be provided. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +783 -18
index.html CHANGED
@@ -1,20 +1,785 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- </head>
9
- <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
- <div class="w-full">
11
- <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
12
- <h1 class="text-4xl lg:text-6xl font-bold font-sans">
13
- <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
14
- Ask me anything.
15
- </h1>
16
- </div>
17
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
18
- <script></script>
19
- <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>
20
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Emigre.eu | Relocate to Madeira, Portugal</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero-bg {
11
+ 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');
12
+ background-size: cover;
13
+ background-position: center;
14
+ height: 100vh;
15
+ min-height: 600px;
16
+ }
17
+
18
+ .parallax {
19
+ background-attachment: fixed;
20
+ background-position: center;
21
+ background-repeat: no-repeat;
22
+ background-size: cover;
23
+ }
24
+
25
+ .video-container {
26
+ position: relative;
27
+ padding-bottom: 56.25%;
28
+ height: 0;
29
+ overflow: hidden;
30
+ }
31
+
32
+ .video-container iframe {
33
+ position: absolute;
34
+ top: 0;
35
+ left: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ }
39
+
40
+ .calculator-input {
41
+ -webkit-appearance: none;
42
+ width: 100%;
43
+ height: 8px;
44
+ border-radius: 4px;
45
+ background: #e5e7eb;
46
+ outline: none;
47
+ }
48
+
49
+ .calculator-input::-webkit-slider-thumb {
50
+ -webkit-appearance: none;
51
+ appearance: none;
52
+ width: 20px;
53
+ height: 20px;
54
+ border-radius: 50%;
55
+ background: #3b82f6;
56
+ cursor: pointer;
57
+ }
58
+
59
+ .calculator-input::-moz-range-thumb {
60
+ width: 20px;
61
+ height: 20px;
62
+ border-radius: 50%;
63
+ background: #3b82f6;
64
+ cursor: pointer;
65
+ }
66
+
67
+ .testimonial-card {
68
+ transition: transform 0.3s ease;
69
+ }
70
+
71
+ .testimonial-card:hover {
72
+ transform: translateY(-5px);
73
+ }
74
+
75
+ @media (max-width: 768px) {
76
+ .parallax {
77
+ background-attachment: scroll;
78
+ }
79
+ }
80
+ </style>
81
+ </head>
82
+ <body class="font-sans antialiased text-gray-800">
83
+ <!-- Navigation -->
84
+ <nav class="bg-white shadow-lg fixed w-full z-50">
85
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
86
+ <div class="flex justify-between h-16">
87
+ <div class="flex items-center">
88
+ <div class="flex-shrink-0 flex items-center">
89
+ <i class="fas fa-umbrella-beach text-blue-600 text-2xl mr-2"></i>
90
+ <span class="text-xl font-bold text-blue-600">Emigre.eu</span>
91
+ </div>
92
+ </div>
93
+ <div class="hidden md:flex items-center space-x-8">
94
+ <a href="#home" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Home</a>
95
+ <a href="#calculator" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Calculator</a>
96
+ <a href="#benefits" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Benefits</a>
97
+ <a href="#testimonials" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Testimonials</a>
98
+ <a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
99
+ <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">
100
+ <i class="fab fa-facebook-f mr-2"></i> Join Group
101
+ </a>
102
+ </div>
103
+ <div class="md:hidden flex items-center">
104
+ <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 focus:outline-none">
105
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
106
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
107
+ </svg>
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Mobile menu -->
114
+ <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg">
115
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
116
+ <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>
117
+ <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>
118
+ <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>
119
+ <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>
120
+ <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>
121
+ <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">
122
+ <i class="fab fa-facebook-f mr-2"></i> Join Group
123
+ </a>
124
+ </div>
125
+ </div>
126
+ </nav>
127
+
128
+ <!-- Hero Section -->
129
+ <section id="home" class="hero-bg flex items-center justify-center text-white pt-16">
130
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
131
+ <div class="grid md:grid-cols-2 gap-12 items-center">
132
+ <div>
133
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Unlock a Wealthier Retirement</h1>
134
+ <h2 class="text-xl md:text-2xl mb-8 font-medium">Compare Your California Life to Madeira's Paradise</h2>
135
+ <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>
136
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
137
+ <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">
138
+ Start Your Calculation Now
139
+ </a>
140
+ <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">
141
+ Learn More
142
+ </a>
143
+ </div>
144
+ </div>
145
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-4">
146
+ <div class="video-container rounded-lg overflow-hidden">
147
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/ft6eYEj0fII" title="Relocate to Madeira with Emigre.eu" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
148
+ </div>
149
+ <p class="text-center mt-4 text-sm italic">"Californians save an average of 30-50% on cost of living in Madeira"</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Stats Section -->
156
+ <section class="bg-blue-600 text-white py-12">
157
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
158
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
159
+ <div class="p-4">
160
+ <div class="text-3xl font-bold mb-2">30-50%</div>
161
+ <div class="text-sm uppercase tracking-wider">Lower Cost of Living</div>
162
+ </div>
163
+ <div class="p-4">
164
+ <div class="text-3xl font-bold mb-2">13.3% → 0%</div>
165
+ <div class="text-sm uppercase tracking-wider">Tax Reduction</div>
166
+ </div>
167
+ <div class="p-4">
168
+ <div class="text-3xl font-bold mb-2">300+</div>
169
+ <div class="text-sm uppercase tracking-wider">Sunny Days/Year</div>
170
+ </div>
171
+ <div class="p-4">
172
+ <div class="text-3xl font-bold mb-2">10</div>
173
+ <div class="text-sm uppercase tracking-wider">Years Tax Benefits</div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Why Madeira Section -->
180
+ <section id="benefits" class="py-20 bg-gray-50">
181
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
182
+ <div class="text-center mb-16">
183
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Why Madeira? The Financial and Lifestyle Edge for Californian HNWIs</h2>
184
+ <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 high-net-worth individuals from California.</p>
185
+ </div>
186
+
187
+ <div class="grid md:grid-cols-2 gap-12 mb-16">
188
+ <div>
189
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Financial Pragmatism</h3>
190
+ <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, compared to California's top state income tax of 13.3% plus federal rates.</p>
191
+ <p class="text-gray-600 mb-6">Many Californians 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>
192
+
193
+ <div class="bg-white p-6 rounded-lg shadow-md mb-6">
194
+ <div class="flex items-start">
195
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
196
+ <i class="fas fa-home text-blue-600 text-xl"></i>
197
+ </div>
198
+ <div class="ml-4">
199
+ <h4 class="text-lg font-medium text-gray-900">Real Estate Comparison</h4>
200
+ <p class="mt-1 text-gray-600">$3,000+ monthly rent in San Francisco vs. $1,000-$1,500 in Funchal for comparable luxury properties.</p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="bg-white p-6 rounded-lg shadow-md">
206
+ <div class="flex items-start">
207
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
208
+ <i class="fas fa-heartbeat text-blue-600 text-xl"></i>
209
+ </div>
210
+ <div class="ml-4">
211
+ <h4 class="text-lg font-medium text-gray-900">Healthcare Savings</h4>
212
+ <p class="mt-1 text-gray-600">Monthly healthcare €50-€100 in Madeira vs. $400-$800 in California for 50-65 year-olds.</p>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <div>
219
+ <div class="video-container rounded-lg overflow-hidden shadow-lg">
220
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/example1" title="Madeira Luxury Living" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
221
+ </div>
222
+ <p class="text-center mt-4 text-sm italic text-gray-600">Luxury villa tour in Madeira - similar properties at 50-70% of California prices</p>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="grid md:grid-cols-3 gap-8 mt-12">
227
+ <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300">
228
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
229
+ <i class="fas fa-sun text-blue-600 text-2xl"></i>
230
+ </div>
231
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Climate & Nature</h3>
232
+ <p class="text-gray-600">300+ sunny days, subtropical climate with black sand beaches and lush forests for year-round outdoor activities.</p>
233
+ </div>
234
+
235
+ <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300">
236
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
237
+ <i class="fas fa-utensils text-blue-600 text-2xl"></i>
238
+ </div>
239
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Food & Wine</h3>
240
+ <p class="text-gray-600">World-class seafood, Madeira wine, and fresh local produce at 40-60% lower costs than California.</p>
241
+ </div>
242
+
243
+ <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300">
244
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
245
+ <i class="fas fa-globe-europe text-blue-600 text-2xl"></i>
246
+ </div>
247
+ <h3 class="text-xl font-bold text-gray-900 mb-3">European Gateway</h3>
248
+ <p class="text-gray-600">Easy access to mainland Europe with short flights to major cities, perfect for the well-traveled HNWI.</p>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Calculator Section -->
255
+ <section id="calculator" class="py-20 bg-white">
256
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
257
+ <div class="text-center mb-16">
258
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Your Personalized Savings Calculator</h2>
259
+ <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>
260
+ </div>
261
+
262
+ <div class="grid md:grid-cols-2 gap-12">
263
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md">
264
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Enter Your Current California Expenses</h3>
265
+
266
+ <div class="space-y-6">
267
+ <div>
268
+ <label for="income" class="block text-sm font-medium text-gray-700 mb-1">Monthly Income ($)</label>
269
+ <input type="range" id="income" min="5000" max="50000" step="1000" value="15000" class="calculator-input mb-2">
270
+ <div class="flex justify-between">
271
+ <span class="text-sm text-gray-500">$5,000</span>
272
+ <span class="text-sm text-gray-500">$50,000</span>
273
+ </div>
274
+ <div class="mt-1">
275
+ <input type="number" id="income-display" value="15000" class="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">
276
+ </div>
277
+ </div>
278
+
279
+ <div>
280
+ <label for="housing" class="block text-sm font-medium text-gray-700 mb-1">Monthly Housing ($)</label>
281
+ <input type="range" id="housing" min="1000" max="10000" step="100" value="4000" class="calculator-input mb-2">
282
+ <div class="flex justify-between">
283
+ <span class="text-sm text-gray-500">$1,000</span>
284
+ <span class="text-sm text-gray-500">$10,000</span>
285
+ </div>
286
+ <div class="mt-1">
287
+ <input type="number" id="housing-display" value="4000" class="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">
288
+ </div>
289
+ </div>
290
+
291
+ <div>
292
+ <label for="healthcare" class="block text-sm font-medium text-gray-700 mb-1">Monthly Healthcare ($)</label>
293
+ <input type="range" id="healthcare" min="100" max="2000" step="50" value="600" class="calculator-input mb-2">
294
+ <div class="flex justify-between">
295
+ <span class="text-sm text-gray-500">$100</span>
296
+ <span class="text-sm text-gray-500">$2,000</span>
297
+ </div>
298
+ <div class="mt-1">
299
+ <input type="number" id="healthcare-display" value="600" class="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">
300
+ </div>
301
+ </div>
302
+
303
+ <div>
304
+ <label for="groceries" class="block text-sm font-medium text-gray-700 mb-1">Monthly Groceries ($)</label>
305
+ <input type="range" id="groceries" min="200" max="2000" step="50" value="800" class="calculator-input mb-2">
306
+ <div class="flex justify-between">
307
+ <span class="text-sm text-gray-500">$200</span>
308
+ <span class="text-sm text-gray-500">$2,000</span>
309
+ </div>
310
+ <div class="mt-1">
311
+ <input type="number" id="groceries-display" value="800" class="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">
312
+ </div>
313
+ </div>
314
+
315
+ <div>
316
+ <label for="taxes" class="block text-sm font-medium text-gray-700 mb-1">Monthly Taxes ($)</label>
317
+ <input type="range" id="taxes" min="500" max="10000" step="100" value="2000" class="calculator-input mb-2">
318
+ <div class="flex justify-between">
319
+ <span class="text-sm text-gray-500">$500</span>
320
+ <span class="text-sm text-gray-500">$10,000</span>
321
+ </div>
322
+ <div class="mt-1">
323
+ <input type="number" id="taxes-display" value="2000" class="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">
324
+ </div>
325
+ </div>
326
+
327
+ <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">
328
+ Calculate My Savings
329
+ </button>
330
+ </div>
331
+ </div>
332
+
333
+ <div>
334
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md mb-8">
335
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Your Projected Madeira Savings</h3>
336
+
337
+ <div id="results-placeholder" class="text-center py-12">
338
+ <i class="fas fa-calculator text-gray-300 text-5xl mb-4"></i>
339
+ <p class="text-gray-500">Enter your information and click "Calculate My Savings" to see your results</p>
340
+ </div>
341
+
342
+ <div id="results-container" class="hidden">
343
+ <div class="overflow-x-auto">
344
+ <table class="min-w-full divide-y divide-gray-200">
345
+ <thead class="bg-gray-100">
346
+ <tr>
347
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
348
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">California</th>
349
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Madeira</th>
350
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Savings</th>
351
+ </tr>
352
+ </thead>
353
+ <tbody class="bg-white divide-y divide-gray-200">
354
+ <tr>
355
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Housing</td>
356
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-housing">4,000</span></td>
357
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-housing">1,200</span></td>
358
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-housing">2,800</span></td>
359
+ </tr>
360
+ <tr>
361
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Healthcare</td>
362
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-healthcare">600</span></td>
363
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-healthcare">75</span></td>
364
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-healthcare">525</span></td>
365
+ </tr>
366
+ <tr>
367
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Groceries</td>
368
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-groceries">800</span></td>
369
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-groceries">320</span></td>
370
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-groceries">480</span></td>
371
+ </tr>
372
+ <tr>
373
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Taxes</td>
374
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="cal-taxes">2,000</span></td>
375
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">$<span id="madeira-taxes">0</span></td>
376
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">$<span id="savings-taxes">2,000</span></td>
377
+ </tr>
378
+ <tr class="bg-gray-50">
379
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">Total Monthly</td>
380
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">$<span id="cal-total">7,400</span></td>
381
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-gray-900">$<span id="madeira-total">1,595</span></td>
382
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-green-600">$<span id="savings-total">5,805</span></td>
383
+ </tr>
384
+ </tbody>
385
+ </table>
386
+ </div>
387
+
388
+ <div class="mt-8 bg-blue-50 p-6 rounded-lg">
389
+ <h4 class="text-lg font-bold text-blue-800 mb-3">Your Annual Savings Potential</h4>
390
+ <div class="text-3xl font-bold text-blue-600 mb-2">$<span id="annual-savings">69,660</span></div>
391
+ <p class="text-blue-700">Based on your inputs, you could save this much per year by relocating to Madeira!</p>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="bg-white p-6 rounded-lg shadow-md border border-blue-100">
397
+ <div class="flex items-start">
398
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
399
+ <i class="fas fa-info-circle text-blue-600 text-xl"></i>
400
+ </div>
401
+ <div class="ml-4">
402
+ <h4 class="text-lg font-medium text-gray-900">Important Note</h4>
403
+ <p class="mt-1 text-gray-600">Estimates based on averages from sources like Numbeo and Expatistan. Consult professionals for personalized advice. Actual savings may vary based on individual circumstances.</p>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="mt-16 grid md:grid-cols-2 gap-8 items-center">
411
+ <div class="video-container rounded-lg overflow-hidden shadow-lg">
412
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/example2" title="Calculator Demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
413
+ </div>
414
+ <div>
415
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Want More Detailed Information?</h3>
416
+ <p class="text-gray-600 mb-6">Our comprehensive relocation guide covers everything from tax strategies to finding the perfect neighborhood in Madeira.</p>
417
+ <form class="space-y-4">
418
+ <div>
419
+ <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
420
+ <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">
421
+ </div>
422
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
423
+ Get My Free Guide
424
+ </button>
425
+ </form>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <!-- Testimonials Section -->
432
+ <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')">
433
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
434
+ <div class="text-center mb-16">
435
+ <h2 class="text-3xl font-bold text-white mb-4">Join Like-Minded Californians Who Made the Move</h2>
436
+ <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>
437
+ </div>
438
+
439
+ <div class="grid md:grid-cols-3 gap-8">
440
+ <div class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm rounded-lg shadow-lg p-6 testimonial-card">
441
+ <div class="flex items-center mb-4">
442
+ <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Elena">
443
+ <div class="ml-4">
444
+ <h4 class="font-bold text-gray-900">Elena</h4>
445
+ <p class="text-sm text-gray-600">Entrepreneur from San Francisco</p>
446
+ </div>
447
+ </div>
448
+ <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>
449
+ <div class="video-container rounded-lg overflow-hidden">
450
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/example3" title="Elena's Story" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm rounded-lg shadow-lg p-6 testimonial-card">
455
+ <div class="flex items-center mb-4">
456
+ <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Robert">
457
+ <div class="ml-4">
458
+ <h4 class="font-bold text-gray-900">Robert</h4>
459
+ <p class="text-sm text-gray-600">Retiree from Los Angeles</p>
460
+ </div>
461
+ </div>
462
+ <p class="text-gray-700 italic mb-4">"From CA's high costs to paradise: Healthcare savings alone covered our move."</p>
463
+ <div class="video-container rounded-lg overflow-hidden">
464
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/example4" title="Robert's Story" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm rounded-lg shadow-lg p-6 testimonial-card">
469
+ <div class="flex items-center mb-4">
470
+ <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sophia">
471
+ <div class="ml-4">
472
+ <h4 class="font-bold text-gray-900">Sophia</h4>
473
+ <p class="text-sm text-gray-600">Tech Executive from Silicon Valley</p>
474
+ </div>
475
+ </div>
476
+ <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>
477
+ <div class="video-container rounded-lg overflow-hidden">
478
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/example5" title="Sophia's Story" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="mt-16 text-center">
484
+ <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">
485
+ <i class="fab fa-facebook-f mr-3"></i> Join Our Private Facebook Group
486
+ </a>
487
+ <p class="mt-4 text-blue-100">Connect with 500+ Californians who've already made the move</p>
488
+ </div>
489
+ </div>
490
+ </section>
491
+
492
+ <!-- Services Section -->
493
+ <section class="py-20 bg-white">
494
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
495
+ <div class="text-center mb-16">
496
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Tailored Relocation Services</h2>
497
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Specializing in Madeira for Californian HNWIs: We handle every detail of your move</p>
498
+ </div>
499
+
500
+ <div class="grid md:grid-cols-3 gap-8">
501
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300">
502
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
503
+ <i class="fas fa-file-signature text-blue-600 text-2xl"></i>
504
+ </div>
505
+ <h3 class="text-xl font-bold text-gray-900 mb-3 text-center">Golden Visa Assistance</h3>
506
+ <p class="text-gray-600 text-center">Comprehensive guidance through Portugal's Golden Visa program, including investment options and documentation.</p>
507
+ </div>
508
+
509
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300">
510
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
511
+ <i class="fas fa-home text-blue-600 text-2xl"></i>
512
+ </div>
513
+ <h3 class="text-xl font-bold text-gray-900 mb-3 text-center">Property Selection</h3>
514
+ <p class="text-gray-600 text-center">Curated viewings of luxury properties that match your lifestyle and investment criteria.</p>
515
+ </div>
516
+
517
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300">
518
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
519
+ <i class="fas fa-euro-sign text-blue-600 text-2xl"></i>
520
+ </div>
521
+ <h3 class="text-xl font-bold text-gray-900 mb-3 text-center">Tax Optimization</h3>
522
+ <p class="text-gray-600 text-center">Strategic setup to maximize NHR benefits and minimize tax liabilities across jurisdictions.</p>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="mt-12 grid md:grid-cols-2 gap-8 items-center">
527
+ <div>
528
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Complete Relocation Package</h3>
529
+ <p class="text-gray-600 mb-6">Our premium service handles every aspect of your move, from initial consultation to settling into your new Madeira home.</p>
530
+ <ul class="space-y-3 text-gray-600">
531
+ <li class="flex items-start">
532
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
533
+ <span>Personalized relocation strategy session</span>
534
+ </li>
535
+ <li class="flex items-start">
536
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
537
+ <span>Property search and negotiation</span>
538
+ </li>
539
+ <li class="flex items-start">
540
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
541
+ <span>Legal and tax setup with trusted professionals</span>
542
+ </li>
543
+ <li class="flex items-start">
544
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
545
+ <span>School search and family integration services</span>
546
+ </li>
547
+ <li class="flex items-start">
548
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
549
+ <span>Ongoing support for your first year</span>
550
+ </li>
551
+ </ul>
552
+ </div>
553
+ <div class="video-container rounded-lg overflow-hidden shadow-lg">
554
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/example6" title="Our Services" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </section>
559
+
560
+ <!-- CTA Section -->
561
+ <section class="py-20 bg-blue-600 text-white">
562
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
563
+ <h2 class="text-3xl font-bold mb-6">Ready to Start Your Madeira Journey?</h2>
564
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Schedule a free consultation with our relocation experts to discuss your specific needs and goals.</p>
565
+
566
+ <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
567
+ <div class="px-6 py-8">
568
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Book Your Consultation</h3>
569
+ <form class="space-y-4">
570
+ <div>
571
+ <label for="name" class="block text-sm font-medium text-gray-700 text-left">Name</label>
572
+ <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">
573
+ </div>
574
+ <div>
575
+ <label for="consult-email" class="block text-sm font-medium text-gray-700 text-left">Email</label>
576
+ <input type="email" id="consult-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">
577
+ </div>
578
+ <div>
579
+ <label for="timeline" class="block text-sm font-medium text-gray-700 text-left">When are you planning to move?</label>
580
+ <select id="timeline" 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">
581
+ <option>Within 3 months</option>
582
+ <option>3-6 months</option>
583
+ <option>6-12 months</option>
584
+ <option>Just exploring</option>
585
+ </select>
586
+ </div>
587
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
588
+ Schedule Now
589
+ </button>
590
+ </form>
591
+ </div>
592
+ </div>
593
+
594
+ <div class="mt-12 flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-8">
595
+ <a href="https://www.youtube.com/channel/example" target="_blank" class="flex items-center text-white hover:text-blue-100 transition duration-300">
596
+ <i class="fab fa-youtube text-2xl mr-2"></i> Watch Our YouTube Series
597
+ </a>
598
+ <a href="https://www.instagram.com/example" target="_blank" class="flex items-center text-white hover:text-blue-100 transition duration-300">
599
+ <i class="fab fa-instagram text-2xl mr-2"></i> Follow on Instagram
600
+ </a>
601
+ <a href="https://www.facebook.com/groups/californiatomadeira" target="_blank" class="flex items-center text-white hover:text-blue-100 transition duration-300">
602
+ <i class="fab fa-facebook-f text-2xl mr-2"></i> Join Facebook Group
603
+ </a>
604
+ </div>
605
+ </div>
606
+ </section>
607
+
608
+ <!-- Footer -->
609
+ <footer id="contact" class="bg-gray-900 text-white pt-16 pb-8">
610
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
611
+ <div class="grid md:grid-cols-4 gap-12">
612
+ <div>
613
+ <div class="flex items-center mb-6">
614
+ <i class="fas fa-umbrella-beach text-blue-400 text-2xl mr-2"></i>
615
+ <span class="text-xl font-bold text-white">Emigre.eu</span>
616
+ </div>
617
+ <p class="text-gray-400 mb-4">Your trusted partner for relocating to Madeira, Portugal from California.</p>
618
+ <div class="flex space-x-4">
619
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
620
+ <i class="fab fa-facebook-f"></i>
621
+ </a>
622
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
623
+ <i class="fab fa-twitter"></i>
624
+ </a>
625
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
626
+ <i class="fab fa-instagram"></i>
627
+ </a>
628
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
629
+ <i class="fab fa-youtube"></i>
630
+ </a>
631
+ </div>
632
+ </div>
633
+
634
+ <div>
635
+ <h3 class="text-lg font-semibold mb-6">Quick Links</h3>
636
+ <ul class="space-y-3">
637
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
638
+ <li><a href="#calculator" class="text-gray-400 hover:text-white transition duration-300">Savings Calculator</a></li>
639
+ <li><a href="#benefits" class="text-gray-400 hover:text-white transition duration-300">Why Madeira?</a></li>
640
+ <li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300">Testimonials</a></li>
641
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
642
+ </ul>
643
+ </div>
644
+
645
+ <div>
646
+ <h3 class="text-lg font-semibold mb-6">Services</h3>
647
+ <ul class="space-y-3">
648
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Golden Visa</a></li>
649
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Property Search</a></li>
650
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tax Optimization</a></li>
651
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Relocation Package</a></li>
652
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Consultation</a></li>
653
+ </ul>
654
+ </div>
655
+
656
+ <div>
657
+ <h3 class="text-lg font-semibold mb-6">Contact Us</h3>
658
+ <address class="not-italic text-gray-400">
659
+ <div class="mb-4">
660
+ <i class="fas fa-map-marker-alt mr-2 text-blue-400"></i>
661
+ <span>123 Ocean View, Funchal, Madeira, Portugal</span>
662
+ </div>
663
+ <div class="mb-4">
664
+ <i class="fas fa-envelope mr-2 text-blue-400"></i>
665
+ <a href="mailto:info@emigre.eu" class="hover:text-white transition duration-300">info@emigre.eu</a>
666
+ </div>
667
+ <div class="mb-4">
668
+ <i class="fas fa-phone-alt mr-2 text-blue-400"></i>
669
+ <a href="tel:+351123456789" class="hover:text-white transition duration-300">+351 123 456 789</a>
670
+ </div>
671
+ <div>
672
+ <i class="fas fa-clock mr-2 text-blue-400"></i>
673
+ <span>Mon-Fri: 9AM-6PM (PST)</span>
674
+ </div>
675
+ </address>
676
+ </div>
677
+ </div>
678
+
679
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
680
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 Emigre.eu. All rights reserved.</p>
681
+ <div class="flex space-x-6">
682
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a>
683
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Service</a>
684
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Sitemap</a>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </footer>
689
+
690
+ <!-- Mobile menu toggle -->
691
+ <script>
692
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
693
+ const menu = document.getElementById('mobile-menu');
694
+ menu.classList.toggle('hidden');
695
+ });
696
+ </script>
697
+
698
+ <!-- Calculator functionality -->
699
+ <script>
700
+ document.addEventListener('DOMContentLoaded', function() {
701
+ // Sync range inputs with number inputs
702
+ const syncInputs = (rangeId, numberId) => {
703
+ const rangeInput = document.getElementById(rangeId);
704
+ const numberInput = document.getElementById(numberId);
705
+
706
+ rangeInput.addEventListener('input', function() {
707
+ numberInput.value = this.value;
708
+ });
709
+
710
+ numberInput.addEventListener('input', function() {
711
+ if (this.value > rangeInput.max) {
712
+ this.value = rangeInput.max;
713
+ } else if (this.value < rangeInput.min) {
714
+ this.value = rangeInput.min;
715
+ }
716
+ rangeInput.value = this.value;
717
+ });
718
+ };
719
+
720
+ syncInputs('income', 'income-display');
721
+ syncInputs('housing', 'housing-display');
722
+ syncInputs('healthcare', 'healthcare-display');
723
+ syncInputs('groceries', 'groceries-display');
724
+ syncInputs('taxes', 'taxes-display');
725
+
726
+ // Calculate button functionality
727
+ document.getElementById('calculate-btn').addEventListener('click', function() {
728
+ // Get input values
729
+ const housing = parseFloat(document.getElementById('housing').value);
730
+ const healthcare = parseFloat(document.getElementById('healthcare').value);
731
+ const groceries = parseFloat(document.getElementById('groceries').value);
732
+ const taxes = parseFloat(document.getElementById('taxes').value);
733
+
734
+ // Calculate Madeira equivalents (using average savings percentages)
735
+ const madeiraHousing = housing * 0.3; // 70% savings
736
+ const madeiraHealthcare = healthcare * 0.125; // 87.5% savings
737
+ const madeiraGroceries = groceries * 0.4; // 60% savings
738
+ const madeiraTaxes = 0; // Assuming NHR benefits
739
+
740
+ // Calculate savings
741
+ const savingsHousing = housing - madeiraHousing;
742
+ const savingsHealthcare = healthcare - madeiraHealthcare;
743
+ const savingsGroceries = groceries - madeiraGroceries;
744
+ const savingsTaxes = taxes - madeiraTaxes;
745
+
746
+ // Calculate totals
747
+ const calTotal = housing + healthcare + groceries + taxes;
748
+ const madeiraTotal = madeiraHousing + madeiraHealthcare + madeiraGroceries + madeiraTaxes;
749
+ const savingsTotal = calTotal - madeiraTotal;
750
+ const annualSavings = savingsTotal * 12;
751
+
752
+ // Update results display
753
+ document.getElementById('cal-housing').textContent = housing.toLocaleString();
754
+ document.getElementById('madeira-housing').textContent = madeiraHousing.toLocaleString(undefined, {maximumFractionDigits: 0});
755
+ document.getElementById('savings-housing').textContent = savingsHousing.toLocaleString(undefined, {maximumFractionDigits: 0});
756
+
757
+ document.getElementById('cal-healthcare').textContent = healthcare.toLocaleString();
758
+ document.getElementById('madeira-healthcare').textContent = madeiraHealthcare.toLocaleString(undefined, {maximumFractionDigits: 0});
759
+ document.getElementById('savings-healthcare').textContent = savingsHealthcare.toLocaleString(undefined, {maximumFractionDigits: 0});
760
+
761
+ document.getElementById('cal-groceries').textContent = groceries.toLocaleString();
762
+ document.getElementById('madeira-groceries').textContent = madeiraGroceries.toLocaleString(undefined, {maximumFractionDigits: 0});
763
+ document.getElementById('savings-groceries').textContent = savingsGroceries.toLocaleString(undefined, {maximumFractionDigits: 0});
764
+
765
+ document.getElementById('cal-taxes').textContent = taxes.toLocaleString();
766
+ document.getElementById('madeira-taxes').textContent = madeiraTaxes.toLocaleString();
767
+ document.getElementById('savings-taxes').textContent = savingsTaxes.toLocaleString(undefined, {maximumFractionDigits: 0});
768
+
769
+ document.getElementById('cal-total').textContent = calTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
770
+ document.getElementById('madeira-total').textContent = madeiraTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
771
+ document.getElementById('savings-total').textContent = savingsTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
772
+
773
+ document.getElementById('annual-savings').textContent = annualSavings.toLocaleString(undefined, {maximumFractionDigits: 0});
774
+
775
+ // Show results
776
+ document.getElementById('results-placeholder').classList.add('hidden');
777
+ document.getElementById('results-container').classList.remove('hidden');
778
+
779
+ // Scroll to results for better UX
780
+ document.getElementById('results-container').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
781
+ });
782
+ });
783
+ </script>
784
+ <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>
785
+ </html>