Hugging Face's logo

Spaces:
dickiethinking
/
madeira-compile
Running

App Files Community
dickiethinking commited on
Commit
2bf8819
·
verified ·
1 Parent(s): 75c9a84

undefined - Follow Up Deployment

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