Hugging Face's logo

Spaces:
dickiethinking
/
chitchat
Running

App Files Community
dickiethinking commited on
Commit
42a4084
·
verified ·
1 Parent(s): dbf6eaa

undefined - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +18 -940
index.html CHANGED
@@ -1,942 +1,20 @@
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>Smart Move to Madeira | Cost of Living Calculator</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
- .parallax {
11
- background-attachment: fixed;
12
- background-position: center;
13
- background-repeat: no-repeat;
14
- background-size: cover;
15
- }
16
- .gradient-overlay {
17
- background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
18
- }
19
- .calculator-shadow {
20
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
21
- }
22
- .result-transition {
23
- transition: all 0.5s ease-in-out;
24
- }
25
- .chart-container {
26
- height: 300px;
27
- }
28
- @media (max-width: 768px) {
29
- .parallax {
30
- background-attachment: scroll;
31
- }
32
- }
33
- </style>
34
- </head>
35
- <body class="font-sans antialiased text-gray-800">
36
- <!-- Navigation -->
37
- <nav class="bg-white shadow-lg fixed w-full z-50">
38
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
39
- <div class="flex justify-between h-16">
40
- <div class="flex items-center">
41
- <div class="flex-shrink-0 flex items-center">
42
- <i class="fas fa-umbrella-beach text-blue-600 text-2xl mr-2"></i>
43
- <span class="text-xl font-bold text-blue-600">Smart Move to Madeira</span>
44
- </div>
45
- </div>
46
- <div class="hidden md:flex items-center space-x-8">
47
- <a href="#calculator" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Calculator</a>
48
- <a href="#benefits" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Benefits</a>
49
- <a href="#testimonials" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Testimonials</a>
50
- <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition duration-300">Free Consultation</a>
51
- </div>
52
- <div class="md:hidden flex items-center">
53
- <button id="menu-btn" class="text-gray-700 hover:text-blue-600">
54
- <i class="fas fa-bars text-xl"></i>
55
- </button>
56
- </div>
57
- </div>
58
- </div>
59
- <!-- Mobile menu -->
60
- <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
61
- <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
62
- <a href="#calculator" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Calculator</a>
63
- <a href="#benefits" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Benefits</a>
64
- <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Testimonials</a>
65
- <a href="#contact" class="block px-3 py-2 text-base font-medium text-blue-600">Free Consultation</a>
66
- </div>
67
- </div>
68
- </nav>
69
-
70
- <!-- Hero Section -->
71
- <section class="parallax gradient-overlay" style="background-image: url('https://images.unsplash.com/photo-1596422846543-75c6fc197f07?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80'); min-height: 100vh; display: flex; align-items: center;">
72
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 text-white">
73
- <div class="md:w-2/3 lg:w-1/2">
74
- <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">Unlock a Wealthier Retirement</h1>
75
- <h2 class="text-2xl md:text-3xl font-semibold mb-8">Compare Your California Life to Madeira's Paradise</h2>
76
- <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>
77
- <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-6 mb-8">
78
- <div class="flex items-center">
79
- <div class="bg-blue-600 rounded-full p-3 mr-4">
80
- <i class="fas fa-chart-line text-white text-xl"></i>
81
- </div>
82
- <p class="text-xl font-medium">Californians save an average of <span class="font-bold">30-50%</span> on cost of living in Madeira</p>
83
- </div>
84
- </div>
85
- <a href="#calculator" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-lg text-lg transition duration-300 inline-flex items-center">
86
- Start Your Calculation Now <i class="fas fa-arrow-down ml-3"></i>
87
- </a>
88
- </div>
89
- </div>
90
- </section>
91
-
92
- <!-- Trust Badges -->
93
- <section class="bg-gray-50 py-8">
94
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
95
- <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
96
- <div class="flex items-center">
97
- <i class="fas fa-shield-alt text-blue-600 text-3xl mr-3"></i>
98
- <span class="text-gray-700 font-medium">GDPR Compliant</span>
99
- </div>
100
- <div class="flex items-center">
101
- <i class="fas fa-lock text-blue-600 text-3xl mr-3"></i>
102
- <span class="text-gray-700 font-medium">Data Privacy</span>
103
- </div>
104
- <div class="flex items-center">
105
- <i class="fas fa-user-tie text-blue-600 text-3xl mr-3"></i>
106
- <span class="text-gray-700 font-medium">Expert Verified</span>
107
- </div>
108
- <div class="flex items-center">
109
- <i class="fas fa-star text-blue-600 text-3xl mr-3"></i>
110
- <span class="text-gray-700 font-medium">500+ Successful Relocations</span>
111
- </div>
112
- </div>
113
- </div>
114
- </section>
115
-
116
- <!-- Benefits Section -->
117
- <section id="benefits" class="py-20 bg-white">
118
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
119
- <div class="text-center mb-16">
120
- <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Why Madeira? The Financial and Lifestyle Edge</h2>
121
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">For High Net Worth Individuals seeking wealth preservation and quality of life, Madeira offers unparalleled advantages.</p>
122
- </div>
123
-
124
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-12">
125
- <!-- Benefit 1 -->
126
- <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
127
- <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
128
- <i class="fas fa-percentage text-blue-600 text-2xl"></i>
129
- </div>
130
- <h3 class="text-xl font-bold text-gray-900 mb-3">Tax Advantages</h3>
131
- <p class="text-gray-600 mb-4">Portugal's NHR regime offers potential 0% tax on foreign income for 10 years, compared to California's high tax brackets.</p>
132
- <ul class="space-y-2">
133
- <li class="flex items-start">
134
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
135
- <span>No wealth tax</span>
136
- </li>
137
- <li class="flex items-start">
138
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
139
- <span>Favorable capital gains treatment</span>
140
- </li>
141
- <li class="flex items-start">
142
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
143
- <span>Double taxation avoidance</span>
144
- </li>
145
- </ul>
146
- </div>
147
-
148
- <!-- Benefit 2 -->
149
- <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
150
- <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
151
- <i class="fas fa-home text-blue-600 text-2xl"></i>
152
- </div>
153
- <h3 class="text-xl font-bold text-gray-900 mb-3">Affordable Luxury</h3>
154
- <p class="text-gray-600 mb-4">Experience European luxury at a fraction of California prices, with significant savings across all living expenses.</p>
155
- <div class="grid grid-cols-2 gap-4 mt-4">
156
- <div class="bg-white p-3 rounded-lg shadow-sm">
157
- <div class="text-blue-600 font-bold text-lg">40-60%</div>
158
- <div class="text-gray-600 text-sm">Less on groceries</div>
159
- </div>
160
- <div class="bg-white p-3 rounded-lg shadow-sm">
161
- <div class="text-blue-600 font-bold text-lg">50-70%</div>
162
- <div class="text-gray-600 text-sm">Less on healthcare</div>
163
- </div>
164
- <div class="bg-white p-3 rounded-lg shadow-sm">
165
- <div class="text-blue-600 font-bold text-lg">60%</div>
166
- <div class="text-gray-600 text-sm">Less on utilities</div>
167
- </div>
168
- <div class="bg-white p-3 rounded-lg shadow-sm">
169
- <div class="text-blue-600 font-bold text-lg">3-5%</div>
170
- <div class="text-gray-600 text-sm">Property tax vs 1.2% in CA</div>
171
- </div>
172
- </div>
173
- </div>
174
-
175
- <!-- Benefit 3 -->
176
- <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
177
- <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
178
- <i class="fas fa-heart text-blue-600 text-2xl"></i>
179
- </div>
180
- <h3 class="text-xl font-bold text-gray-900 mb-3">Quality of Life</h3>
181
- <p class="text-gray-600 mb-4">Beyond financial benefits, Madeira offers an exceptional living environment that enhances wellbeing and longevity.</p>
182
- <ul class="space-y-3">
183
- <li class="flex items-start">
184
- <div class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded mr-3">#1</div>
185
- <span>World's best island destination (World Travel Awards)</span>
186
- </li>
187
- <li class="flex items-start">
188
- <div class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded mr-3">Top 5</div>
189
- <span>Safest place in Europe</span>
190
- </li>
191
- <li class="flex items-start">
192
- <div class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded mr-3">365</div>
193
- <span>Days of spring-like weather</span>
194
- </li>
195
- </ul>
196
- </div>
197
- </div>
198
-
199
- <!-- Video Section -->
200
- <div class="mt-20 bg-gray-900 rounded-xl overflow-hidden">
201
- <div class="aspect-w-16 aspect-h-9">
202
- <iframe class="w-full h-96" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
203
- </div>
204
- <div class="p-8">
205
- <h3 class="text-2xl font-bold text-white mb-4">See Why Californians Are Choosing Madeira</h3>
206
- <p class="text-gray-300">Hear from expats who've successfully transitioned and are enjoying the benefits of island living without sacrificing luxury or financial security.</p>
207
- </div>
208
- </div>
209
- </div>
210
- </section>
211
-
212
- <!-- Calculator Section -->
213
- <section id="calculator" class="py-20 bg-gray-50">
214
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
215
- <div class="text-center mb-16">
216
- <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Your Personalized Savings Calculator</h2>
217
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">Enter your current California expenses to see how much you could save by relocating to Madeira.</p>
218
- </div>
219
-
220
- <div class="bg-white rounded-xl calculator-shadow overflow-hidden">
221
- <div class="grid md:grid-cols-2">
222
- <!-- Calculator Form -->
223
- <div class="p-8 md:p-12">
224
- <h3 class="text-2xl font-bold text-gray-900 mb-6">Your California Finances</h3>
225
-
226
- <form id="cost-calculator" class="space-y-6">
227
- <!-- Income -->
228
- <div>
229
- <label for="income" class="block text-sm font-medium text-gray-700 mb-1">Annual Income ($)</label>
230
- <div class="relative rounded-md shadow-sm">
231
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
232
- <span class="text-gray-500 sm:text-sm">$</span>
233
- </div>
234
- <input type="number" id="income" name="income" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 py-3 border-gray-300 rounded-md" placeholder="250,000" required>
235
- <div class="absolute inset-y-0 right-0 flex items-center">
236
- <select id="income-type" name="income-type" class="focus:ring-blue-500 focus:border-blue-500 h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md">
237
- <option value="pretax">Pre-tax</option>
238
- <option value="posttax">Post-tax</option>
239
- </select>
240
- </div>
241
- </div>
242
- </div>
243
-
244
- <!-- Housing -->
245
- <div>
246
- <label for="housing" class="block text-sm font-medium text-gray-700 mb-1">Monthly Housing Cost ($)</label>
247
- <div class="relative rounded-md shadow-sm">
248
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
249
- <span class="text-gray-500 sm:text-sm">$</span>
250
- </div>
251
- <input type="number" id="housing" name="housing" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 py-3 border-gray-300 rounded-md" placeholder="4,500" required>
252
- </div>
253
- <div class="mt-2 flex items-center">
254
- <input type="checkbox" id="own-property" name="own-property" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
255
- <label for="own-property" class="ml-2 block text-sm text-gray-700">I own property in California</label>
256
- </div>
257
- </div>
258
-
259
- <!-- Healthcare -->
260
- <div>
261
- <label for="healthcare" class="block text-sm font-medium text-gray-700 mb-1">Monthly Healthcare Cost ($)</label>
262
- <div class="relative rounded-md shadow-sm">
263
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
264
- <span class="text-gray-500 sm:text-sm">$</span>
265
- </div>
266
- <input type="number" id="healthcare" name="healthcare" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 py-3 border-gray-300 rounded-md" placeholder="1,200" required>
267
- </div>
268
- </div>
269
-
270
- <!-- Food -->
271
- <div>
272
- <label for="food" class="block text-sm font-medium text-gray-700 mb-1">Monthly Food/Groceries ($)</label>
273
- <div class="relative rounded-md shadow-sm">
274
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
275
- <span class="text-gray-500 sm:text-sm">$</span>
276
- </div>
277
- <input type="number" id="food" name="food" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 py-3 border-gray-300 rounded-md" placeholder="1,500" required>
278
- </div>
279
- </div>
280
-
281
- <!-- Transportation -->
282
- <div>
283
- <label for="transportation" class="block text-sm font-medium text-gray-700 mb-1">Monthly Transportation ($)</label>
284
- <div class="relative rounded-md shadow-sm">
285
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
286
- <span class="text-gray-500 sm:text-sm">$</span>
287
- </div>
288
- <input type="number" id="transportation" name="transportation" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 py-3 border-gray-300 rounded-md" placeholder="800" required>
289
- </div>
290
- </div>
291
-
292
- <!-- Entertainment -->
293
- <div>
294
- <label for="entertainment" class="block text-sm font-medium text-gray-700 mb-1">Monthly Entertainment/Dining ($)</label>
295
- <div class="relative rounded-md shadow-sm">
296
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
297
- <span class="text-gray-500 sm:text-sm">$</span>
298
- </div>
299
- <input type="number" id="entertainment" name="entertainment" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 py-3 border-gray-300 rounded-md" placeholder="1,000">
300
- </div>
301
- </div>
302
-
303
- <!-- Other Expenses -->
304
- <div>
305
- <label for="other" class="block text-sm font-medium text-gray-700 mb-1">Other Monthly Expenses ($)</label>
306
- <div class="relative rounded-md shadow-sm">
307
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
308
- <span class="text-gray-500 sm:text-sm">$</span>
309
- </div>
310
- <input type="number" id="other" name="other" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 py-3 border-gray-300 rounded-md" placeholder="500">
311
- </div>
312
- </div>
313
-
314
- <div class="pt-4">
315
- <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300 flex items-center justify-center">
316
- Calculate My Savings <i class="fas fa-calculator ml-2"></i>
317
- </button>
318
- </div>
319
- </form>
320
- </div>
321
-
322
- <!-- Results Panel (Initially Hidden) -->
323
- <div id="results-panel" class="bg-blue-600 text-white p-8 md:p-12 hidden result-transition">
324
- <div class="flex justify-between items-start mb-8">
325
- <h3 class="text-2xl font-bold">Your Potential Savings</h3>
326
- <button id="reset-calculator" class="text-white hover:text-blue-100 text-sm font-medium flex items-center">
327
- <i class="fas fa-redo mr-1"></i> Reset
328
- </button>
329
- </div>
330
-
331
- <!-- Summary Card -->
332
- <div class="bg-white bg-opacity-10 rounded-xl p-6 mb-8">
333
- <div class="grid grid-cols-2 gap-4">
334
- <div>
335
- <div class="text-sm text-blue-100">Annual Savings</div>
336
- <div id="annual-savings" class="text-2xl font-bold">$0</div>
337
- </div>
338
- <div>
339
- <div class="text-sm text-blue-100">Monthly Savings</div>
340
- <div id="monthly-savings" class="text-2xl font-bold">$0</div>
341
- </div>
342
- <div>
343
- <div class="text-sm text-blue-100">5-Year Wealth Impact</div>
344
- <div id="five-year-impact" class="text-2xl font-bold">$0</div>
345
- </div>
346
- <div>
347
- <div class="text-sm text-blue-100">Tax Savings</div>
348
- <div id="tax-savings" class="text-2xl font-bold">$0</div>
349
- </div>
350
- </div>
351
- </div>
352
-
353
- <!-- Comparison Table -->
354
- <div class="mb-8">
355
- <h4 class="text-lg font-semibold mb-4">Cost Comparison</h4>
356
- <div class="overflow-x-auto">
357
- <table class="min-w-full bg-white bg-opacity-10 rounded-lg overflow-hidden">
358
- <thead>
359
- <tr class="text-left text-sm font-semibold text-blue-100">
360
- <th class="px-4 py-3">Category</th>
361
- <th class="px-4 py-3">California</th>
362
- <th class="px-4 py-3">Madeira</th>
363
- <th class="px-4 py-3">Savings</th>
364
- </tr>
365
- </thead>
366
- <tbody id="comparison-table" class="divide-y divide-blue-700">
367
- <!-- Rows will be added by JavaScript -->
368
- </tbody>
369
- </table>
370
- </div>
371
- </div>
372
-
373
- <!-- Chart -->
374
- <div class="mb-8">
375
- <h4 class="text-lg font-semibold mb-4">Monthly Cost Breakdown</h4>
376
- <div class="chart-container bg-white bg-opacity-10 rounded-lg p-4">
377
- <canvas id="cost-chart"></canvas>
378
- </div>
379
- </div>
380
-
381
- <!-- CTA -->
382
- <div class="bg-white text-blue-600 rounded-lg p-6">
383
- <h4 class="text-xl font-bold mb-3">Ready to Make Your Smart Move?</h4>
384
- <p class="mb-4">Get your free personalized relocation guide and consultation to explore your options.</p>
385
- <form id="lead-form" class="space-y-4">
386
- <div>
387
- <input type="text" id="name" name="name" placeholder="Your Name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
388
- </div>
389
- <div>
390
- <input type="email" id="email" name="email" placeholder="Email Address" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
391
- </div>
392
- <div>
393
- <select id="timeline" name="timeline" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
394
- <option value="">When are you considering moving?</option>
395
- <option value="3mo">Within 3 months</option>
396
- <option value="6mo">3-6 months</option>
397
- <option value="1yr">6-12 months</option>
398
- <option value="1yr+">1+ years</option>
399
- <option value="exploring">Just exploring</option>
400
- </select>
401
- </div>
402
- <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">
403
- Get My Free Guide & Consultation
404
- </button>
405
- <p class="text-xs text-blue-100 text-center">We respect your privacy. No spam, ever.</p>
406
- </form>
407
- </div>
408
- </div>
409
-
410
- <!-- Initial State Placeholder -->
411
- <div id="calculator-placeholder" class="bg-blue-600 text-white p-8 md:p-12 flex items-center justify-center result-transition">
412
- <div class="text-center">
413
- <div class="bg-white bg-opacity-20 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
414
- <i class="fas fa-calculator text-3xl"></i>
415
- </div>
416
- <h3 class="text-xl font-bold mb-2">Calculate Your Savings</h3>
417
- <p class="text-blue-100 mb-6">Enter your California expenses to see your personalized Madeira comparison.</p>
418
- <div class="animate-bounce">
419
- <i class="fas fa-arrow-left text-2xl md:hidden"></i>
420
- <i class="fas fa-arrow-up hidden md:inline-block text-2xl"></i>
421
- </div>
422
- </div>
423
- </div>
424
- </div>
425
- </div>
426
-
427
- <!-- Disclaimer -->
428
- <div class="mt-8 text-center text-sm text-gray-500 max-w-3xl mx-auto">
429
- <p><i class="fas fa-info-circle mr-1"></i> Estimates based on averages from Numbeo, Expatistan, and our proprietary HNWI cost database. Actual savings may vary. Consult a professional for personalized advice.</p>
430
- </div>
431
- </div>
432
- </section>
433
-
434
- <!-- Testimonials Section -->
435
- <section id="testimonials" class="py-20 bg-white">
436
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
437
- <div class="text-center mb-16">
438
- <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Join Like-Minded Californians Who Made the Move</h2>
439
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from successful expats who've transformed their financial future and quality of life.</p>
440
- </div>
441
-
442
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
443
- <!-- Testimonial 1 -->
444
- <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
445
- <div class="flex items-center mb-6">
446
- <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
447
- <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah J." class="w-full h-full object-cover">
448
- </div>
449
- <div>
450
- <h4 class="font-bold text-gray-900">Sarah J.</h4>
451
- <p class="text-blue-600">Former Tech Executive, Palo Alto</p>
452
- </div>
453
- </div>
454
- <div class="flex items-center mb-4">
455
- <div class="flex text-yellow-400">
456
- <i class="fas fa-star"></i>
457
- <i class="fas fa-star"></i>
458
- <i class="fas fa-star"></i>
459
- <i class="fas fa-star"></i>
460
- <i class="fas fa-star"></i>
461
- </div>
462
- <span class="ml-2 text-sm text-gray-600">2 years in Madeira</span>
463
- </div>
464
- <p class="text-gray-700 mb-4">"Moving to Madeira was the best financial decision we've made. Our cost of living dropped by 45%, and the NHR tax regime saved us over $120k in taxes last year alone."</p>
465
- <div class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full inline-flex items-center">
466
- <i class="fas fa-home mr-1"></i>
467
- <span>Funchal, Madeira</span>
468
- </div>
469
- </div>
470
-
471
- <!-- Testimonial 2 -->
472
- <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
473
- <div class="flex items-center mb-6">
474
- <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
475
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-full h-full object-cover">
476
- </div>
477
- <div>
478
- <h4 class="font-bold text-gray-900">Michael T.</h4>
479
- <p class="text-blue-600">Retired Attorney, San Francisco</p>
480
- </div>
481
- </div>
482
- <div class="flex items-center mb-4">
483
- <div class="flex text-yellow-400">
484
- <i class="fas fa-star"></i>
485
- <i class="fas fa-star"></i>
486
- <i class="fas fa-star"></i>
487
- <i class="fas fa-star"></i>
488
- <i class="fas fa-star"></i>
489
- </div>
490
- <span class="ml-2 text-sm text-gray-600">3 years in Madeira</span>
491
- </div>
492
- <p class="text-gray-700 mb-4">"The healthcare here is excellent and costs 60% less than our California plan. We live in a luxury oceanfront villa that would cost 3x in Malibu. The FIRE community here is thriving."</p>
493
- <div class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full inline-flex items-center">
494
- <i class="fas fa-home mr-1"></i>
495
- <span>Calheta, Madeira</span>
496
- </div>
497
- </div>
498
-
499
- <!-- Testimonial 3 -->
500
- <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition duration-300">
501
- <div class="flex items-center mb-6">
502
- <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
503
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Lisa & David R." class="w-full h-full object-cover">
504
- </div>
505
- <div>
506
- <h4 class="font-bold text-gray-900">Lisa & David R.</h4>
507
- <p class="text-blue-600">Entrepreneurs, Santa Monica</p>
508
- </div>
509
- </div>
510
- <div class="flex items-center mb-4">
511
- <div class="flex text-yellow-400">
512
- <i class="fas fa-star"></i>
513
- <i class="fas fa-star"></i>
514
- <i class="fas fa-star"></i>
515
- <i class="fas fa-star"></i>
516
- <i class="fas fa-star"></i>
517
- </div>
518
- <span class="ml-2 text-sm text-gray-600">1 year in Madeira</span>
519
- </div>
520
- <p class="text-gray-700 mb-4">"We were skeptical at first, but the numbers don't lie. Our quality of life has improved dramatically while our expenses dropped. The digital nomad community here is incredible."</p>
521
- <div class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full inline-flex items-center">
522
- <i class="fas fa-home mr-1"></i>
523
- <span>Ponta do Sol, Madeira</span>
524
- </div>
525
- </div>
526
- </div>
527
-
528
- <!-- Community CTA -->
529
- <div class="bg-blue-600 rounded-xl overflow-hidden">
530
- <div class="grid md:grid-cols-2">
531
- <div class="p-8 md:p-12 text-white">
532
- <h3 class="text-2xl font-bold mb-4">Join Our Exclusive Community</h3>
533
- <p class="mb-6">Connect with other Californians exploring or already living in Madeira. Get insider tips, ask questions, and learn from those who've made the move.</p>
534
- <div class="space-y-4">
535
- <a href="#" class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg inline-flex items-center transition duration-300">
536
- <i class="fab fa-facebook mr-3"></i> Facebook Group
537
- </a>
538
- <a href="#" class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-lg inline-flex items-center transition duration-300">
539
- <i class="fab fa-youtube mr-3"></i> YouTube Channel
540
- </a>
541
- </div>
542
- </div>
543
- <div class="bg-blue-700 p-8 md:p-12 flex items-center justify-center">
544
- <div class="relative">
545
- <div class="absolute -top-6 -left-6 bg-yellow-400 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center">
546
- <i class="fas fa-users text-xl"></i>
547
- </div>
548
- <div class="bg-white rounded-lg p-6 shadow-lg">
549
- <div class="flex items-center mb-4">
550
- <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
551
- <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Member" class="w-full h-full object-cover">
552
- </div>
553
- <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
554
- <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Member" class="w-full h-full object-cover">
555
- </div>
556
- <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
557
- <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Member" class="w-full h-full object-cover">
558
- </div>
559
- <div class="w-10 h-10 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
560
- <span class="text-blue-600 font-bold">250+</span>
561
- </div>
562
- </div>
563
- <p class="text-gray-700 mb-4">"This community helped us navigate the relocation process and find our perfect home. The monthly meetups in Funchal are fantastic!"</p>
564
- <div class="text-sm text-gray-500">— Recent member from Newport Beach</div>
565
- </div>
566
- </div>
567
- </div>
568
- </div>
569
- </div>
570
- </div>
571
- </section>
572
-
573
- <!-- Final CTA Section -->
574
- <section id="contact" class="py-20 bg-gray-900 text-white">
575
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
576
- <div class="text-center mb-12">
577
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Explore Your Madeira Opportunity?</h2>
578
- <p class="text-xl text-gray-300 max-w-3xl mx-auto">Take the first step toward financial freedom and an elevated lifestyle.</p>
579
- </div>
580
-
581
- <div class="grid md:grid-cols-2 gap-12">
582
- <div class="bg-gray-800 rounded-xl p-8">
583
- <h3 class="text-2xl font-bold mb-6">Free Consultation</h3>
584
- <p class="text-gray-300 mb-6">Schedule a 30-minute call with our relocation experts to discuss your specific situation and get personalized advice.</p>
585
- <form class="space-y-4">
586
- <div>
587
- <input type="text" placeholder="Your Name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 text-white">
588
- </div>
589
- <div>
590
- <input type="email" placeholder="Email Address" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 text-white" required>
591
- </div>
592
- <div>
593
- <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 text-white">
594
- </div>
595
- <div>
596
- <select class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 text-white">
597
- <option value="">Preferred Consultation Time</option>
598
- <option value="morning">Morning (9am-12pm PT)</option>
599
- <option value="afternoon">Afternoon (12pm-4pm PT)</option>
600
- <option value="evening">Evening (4pm-7pm PT)</option>
601
- </select>
602
- </div>
603
- <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">
604
- Schedule My Free Consultation
605
- </button>
606
- </form>
607
- </div>
608
-
609
- <div class="bg-gray-800 rounded-xl p-8">
610
- <h3 class="text-2xl font-bold mb-6">Download Our Free Guide</h3>
611
- <p class="text-gray-300 mb-6">Get our comprehensive 50-page guide "The Smart Californian's Guide to Madeira" covering everything from tax strategies to finding luxury properties.</p>
612
- <div class="flex items-center mb-6">
613
- <div class="bg-blue-600 rounded-lg p-3 mr-4">
614
- <i class="fas fa-file-pdf text-2xl"></i>
615
- </div>
616
- <div>
617
- <h4 class="font-bold">What's Included:</h4>
618
- <ul class="text-sm text-gray-300 space-y-1 mt-1">
619
- <li class="flex items-start">
620
- <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
621
- <span>Step-by-step NHR tax optimization</span>
622
- </li>
623
- <li class="flex items-start">
624
- <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
625
- <span>Best neighborhoods for HNWIs</span>
626
- </li>
627
- <li class="flex items-start">
628
- <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
629
- <span>Healthcare system deep dive</span>
630
- </li>
631
- <li class="flex items-start">
632
- <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
633
- <span>Investment property opportunities</span>
634
- </li>
635
- </ul>
636
- </div>
637
- </div>
638
- <form class="space-y-4">
639
- <div>
640
- <input type="text" placeholder="Your Name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 text-white">
641
- </div>
642
- <div>
643
- <input type="email" placeholder="Email Address" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 text-white" required>
644
- </div>
645
- <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">
646
- Get My Free Guide <i class="fas fa-download ml-2"></i>
647
- </button>
648
- </form>
649
- </div>
650
- </div>
651
- </div>
652
- </section>
653
-
654
- <!-- Footer -->
655
- <footer class="bg-gray-900 text-gray-400 border-t border-gray-800">
656
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
657
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
658
- <div>
659
- <h3 class="text-white text-sm font-semibold mb-4">Smart Move to Madeira</h3>
660
- <p class="text-sm mb-4">Helping Californian HNWIs achieve financial freedom through strategic relocation.</p>
661
- <div class="flex space-x-4">
662
- <a href="#" class="text-gray-400 hover:text-white">
663
- <i class="fab fa-facebook-f"></i>
664
- </a>
665
- <a href="#" class="text-gray-400 hover:text-white">
666
- <i class="fab fa-youtube"></i>
667
- </a>
668
- <a href="#" class="text-gray-400 hover:text-white">
669
- <i class="fab fa-instagram"></i>
670
- </a>
671
- <a href="#" class="text-gray-400 hover:text-white">
672
- <i class="fab fa-linkedin-in"></i>
673
- </a>
674
- </div>
675
- </div>
676
- <div>
677
- <h3 class="text-white text-sm font-semibold mb-4">Resources</h3>
678
- <ul class="space-y-2">
679
- <li><a href="#" class="text-sm hover:text-white">Blog</a></li>
680
- <li><a href="#" class="text-sm hover:text-white">Cost Comparisons</a></li>
681
- <li><a href="#" class="text-sm hover:text-white">Tax Guides</a></li>
682
- <li><a href="#" class="text-sm hover:text-white">Relocation Checklist</a></li>
683
- <li><a href="#" class="text-sm hover:text-white">FAQ</a></li>
684
- </ul>
685
- </div>
686
- <div>
687
- <h3 class="text-white text-sm font-semibold mb-4">Legal</h3>
688
- <ul class="space-y-2">
689
- <li><a href="#" class="text-sm hover:text-white">Privacy Policy</a></li>
690
- <li><a href="#" class="text-sm hover:text-white">Terms of Service</a></li>
691
- <li><a href="#" class="text-sm hover:text-white">GDPR Compliance</a></li>
692
- <li><a href="#" class="text-sm hover:text-white">Disclosures</a></li>
693
- </ul>
694
- </div>
695
- <div>
696
- <h3 class="text-white text-sm font-semibold mb-4">Contact</h3>
697
- <ul class="space-y-2">
698
- <li class="flex items-start">
699
- <i class="fas fa-map-marker-alt mt-1 mr-2 text-blue-400"></i>
700
- <span class="text-sm">Av. do Mar, Funchal, Madeira</span>
701
- </li>
702
- <li class="flex items-start">
703
- <i class="fas fa-phone-alt mt-1 mr-2 text-blue-400"></i>
704
- <span class="text-sm">+351 291 123 456</span>
705
- </li>
706
- <li class="flex items-start">
707
- <i class="fas fa-envelope mt-1 mr-2 text-blue-400"></i>
708
- <span class="text-sm">info@smartmovetomadeira.com</span>
709
- </li>
710
- </ul>
711
- </div>
712
- </div>
713
- <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
714
- <p class="text-sm">© 2025 Smart Move to Madeira. All rights reserved.</p>
715
- <div class="mt-4 md:mt-0 flex space-x-6">
716
- <a href="#" class="text-sm hover:text-white">Sitemap</a>
717
- <a href="#" class="text-sm hover:text-white">Privacy Policy</a>
718
- <a href="#" class="text-sm hover:text-white">Terms</a>
719
- </div>
720
- </div>
721
- </div>
722
- </footer>
723
-
724
- <!-- Scripts -->
725
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
726
- <script>
727
- // Mobile menu toggle
728
- document.getElementById('menu-btn').addEventListener('click', function() {
729
- document.getElementById('mobile-menu').classList.toggle('hidden');
730
- });
731
-
732
- // Smooth scrolling for anchor links
733
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
734
- anchor.addEventListener('click', function (e) {
735
- e.preventDefault();
736
- document.querySelector(this.getAttribute('href')).scrollIntoView({
737
- behavior: 'smooth'
738
- });
739
- });
740
- });
741
-
742
- // Calculator functionality
743
- const calculatorForm = document.getElementById('cost-calculator');
744
- const resultsPanel = document.getElementById('results-panel');
745
- const calculatorPlaceholder = document.getElementById('calculator-placeholder');
746
- const resetCalculator = document.getElementById('reset-calculator');
747
- let costChart;
748
-
749
- calculatorForm.addEventListener('submit', function(e) {
750
- e.preventDefault();
751
-
752
- // Get form values
753
- const income = parseFloat(document.getElementById('income').value) || 0;
754
- const incomeType = document.getElementById('income-type').value;
755
- const housing = parseFloat(document.getElementById('housing').value) || 0;
756
- const healthcare = parseFloat(document.getElementById('healthcare').value) || 0;
757
- const food = parseFloat(document.getElementById('food').value) || 0;
758
- const transportation = parseFloat(document.getElementById('transportation').value) || 0;
759
- const entertainment = parseFloat(document.getElementById('entertainment').value) || 0;
760
- const other = parseFloat(document.getElementById('other').value) || 0;
761
- const ownsProperty = document.getElementById('own-property').checked;
762
-
763
- // Calculate Madeira equivalents (using average savings percentages)
764
- const madeiraHousing = housing * 0.45; // 55% savings
765
- const madeiraHealthcare = healthcare * 0.35; // 65% savings
766
- const madeiraFood = food * 0.6; // 40% savings
767
- const madeiraTransportation = transportation * 0.4; // 60% savings
768
- const madeiraEntertainment = entertainment * 0.7; // 30% savings
769
- const madeiraOther = other * 0.8; // 20% savings
770
-
771
- // Calculate tax savings (simplified for demo)
772
- let taxSavings = 0;
773
- if (incomeType === 'pretax') {
774
- // Assuming California tax rate of 9.3% state + 24% federal (total 33.3%) for this bracket
775
- // Madeira NHR would be 0% on foreign income
776
- taxSavings = income * 0.333;
777
- } else {
778
- // For post-tax income, we'll assume 20% savings on capital gains/dividends
779
- taxSavings = income * 0.2;
780
- }
781
-
782
- // Calculate totals
783
- const californiaMonthly = housing + healthcare + food + transportation + entertainment + other;
784
- const madeiraMonthly = madeiraHousing + madeiraHealthcare + madeiraFood + madeiraTransportation + madeiraEntertainment + madeiraOther;
785
- const monthlySavings = californiaMonthly - madeiraMonthly;
786
- const annualSavings = (monthlySavings * 12) + taxSavings;
787
- const fiveYearImpact = annualSavings * 5;
788
-
789
- // Update results display
790
- document.getElementById('annual-savings').textContent = formatCurrency(annualSavings);
791
- document.getElementById('monthly-savings').textContent = formatCurrency(monthlySavings);
792
- document.getElementById('five-year-impact').textContent = formatCurrency(fiveYearImpact);
793
- document.getElementById('tax-savings').textContent = formatCurrency(taxSavings);
794
-
795
- // Update comparison table
796
- const comparisonTable = document.getElementById('comparison-table');
797
- comparisonTable.innerHTML = `
798
- <tr class="hover:bg-blue-700">
799
- <td class="px-4 py-3 font-medium">Housing</td>
800
- <td class="px-4 py-3">${formatCurrency(housing)}</td>
801
- <td class="px-4 py-3">${formatCurrency(madeiraHousing)}</td>
802
- <td class="px-4 py-3 text-green-400 font-medium">${formatCurrency(housing - madeiraHousing)}</td>
803
- </tr>
804
- <tr class="hover:bg-blue-700">
805
- <td class="px-4 py-3 font-medium">Healthcare</td>
806
- <td class="px-4 py-3">${formatCurrency(healthcare)}</td>
807
- <td class="px-4 py-3">${formatCurrency(madeiraHealthcare)}</td>
808
- <td class="px-4 py-3 text-green-400 font-medium">${formatCurrency(healthcare - madeiraHealthcare)}</td>
809
- </tr>
810
- <tr class="hover:bg-blue-700">
811
- <td class="px-4 py-3 font-medium">Food</td>
812
- <td class="px-4 py-3">${formatCurrency(food)}</td>
813
- <td class="px-4 py-3">${formatCurrency(madeiraFood)}</td>
814
- <td class="px-4 py-3 text-green-400 font-medium">${formatCurrency(food - madeiraFood)}</td>
815
- </tr>
816
- <tr class="hover:bg-blue-700">
817
- <td class="px-4 py-3 font-medium">Transportation</td>
818
- <td class="px-4 py-3">${formatCurrency(transportation)}</td>
819
- <td class="px-4 py-3">${formatCurrency(madeiraTransportation)}</td>
820
- <td class="px-4 py-3 text-green-400 font-medium">${formatCurrency(transportation - madeiraTransportation)}</td>
821
- </tr>
822
- <tr class="hover:bg-blue-700">
823
- <td class="px-4 py-3 font-medium">Entertainment</td>
824
- <td class="px-4 py-3">${formatCurrency(entertainment)}</td>
825
- <td class="px-4 py-3">${formatCurrency(madeiraEntertainment)}</td>
826
- <td class="px-4 py-3 text-green-400 font-medium">${formatCurrency(entertainment - madeiraEntertainment)}</td>
827
- </tr>
828
- <tr class="hover:bg-blue-700">
829
- <td class="px-4 py-3 font-medium">Other</td>
830
- <td class="px-4 py-3">${formatCurrency(other)}</td>
831
- <td class="px-4 py-3">${formatCurrency(madeiraOther)}</td>
832
- <td class="px-4 py-3 text-green-400 font-medium">${formatCurrency(other - madeiraOther)}</td>
833
- </tr>
834
- <tr class="hover:bg-blue-700 border-t border-blue-700">
835
- <td class="px-4 py-3 font-bold">Total Monthly</td>
836
- <td class="px-4 py-3 font-bold">${formatCurrency(californiaMonthly)}</td>
837
- <td class="px-4 py-3 font-bold">${formatCurrency(madeiraMonthly)}</td>
838
- <td class="px-4 py-3 font-bold text-green-400">${formatCurrency(monthlySavings)}</td>
839
- </tr>
840
- `;
841
-
842
- // Create/update chart
843
- const ctx = document.getElementById('cost-chart').getContext('2d');
844
-
845
- if (costChart) {
846
- costChart.destroy();
847
- }
848
-
849
- costChart = new Chart(ctx, {
850
- type: 'bar',
851
- data: {
852
- labels: ['Housing', 'Healthcare', 'Food', 'Transportation', 'Entertainment', 'Other'],
853
- datasets: [
854
- {
855
- label: 'California',
856
- data: [housing, healthcare, food, transportation, entertainment, other],
857
- backgroundColor: 'rgba(255, 99, 132, 0.7)',
858
- borderColor: 'rgba(255, 99, 132, 1)',
859
- borderWidth: 1
860
- },
861
- {
862
- label: 'Madeira',
863
- data: [madeiraHousing, madeiraHealthcare, madeiraFood, madeiraTransportation, madeiraEntertainment, madeiraOther],
864
- backgroundColor: 'rgba(54, 162, 235, 0.7)',
865
- borderColor: 'rgba(54, 162, 235, 1)',
866
- borderWidth: 1
867
- }
868
- ]
869
- },
870
- options: {
871
- responsive: true,
872
- maintainAspectRatio: false,
873
- scales: {
874
- y: {
875
- beginAtZero: true,
876
- ticks: {
877
- callback: function(value) {
878
- return '$' + value.toLocaleString();
879
- }
880
- }
881
- }
882
- },
883
- plugins: {
884
- legend: {
885
- labels: {
886
- color: 'white'
887
- }
888
- },
889
- tooltip: {
890
- callbacks: {
891
- label: function(context) {
892
- let label = context.dataset.label || '';
893
- if (label) {
894
- label += ': ';
895
- }
896
- label += '$' + context.raw.toLocaleString();
897
- return label;
898
- }
899
- }
900
- }
901
- }
902
- }
903
- });
904
-
905
- // Show results
906
- calculatorPlaceholder.classList.add('hidden');
907
- resultsPanel.classList.remove('hidden');
908
- resultsPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
909
- });
910
-
911
- // Reset calculator
912
- resetCalculator.addEventListener('click', function() {
913
- calculatorForm.reset();
914
- resultsPanel.classList.add('hidden');
915
- calculatorPlaceholder.classList.remove('hidden');
916
- calculatorPlaceholder.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
917
- });
918
-
919
- // Lead form submission
920
- document.getElementById('lead-form').addEventListener('submit', function(e) {
921
- e.preventDefault();
922
- alert('Thank you for your interest! Our team will contact you shortly with your personalized relocation guide.');
923
- this.reset();
924
- });
925
-
926
- // Helper function to format currency
927
- function formatCurrency(amount) {
928
- return '$' + amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
929
- }
930
-
931
- // Parallax effect on scroll
932
- window.addEventListener('scroll', function() {
933
- const scrollPosition = window.pageYOffset;
934
- const parallaxElements = document.querySelectorAll('.parallax');
935
-
936
- parallaxElements.forEach(function(element) {
937
- element.style.backgroundPositionY = (scrollPosition * 0.5) + 'px';
938
- });
939
- });
940
- </script>
941
- <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/chitchat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
942
- </html>
 
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/chitchat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
20
+ </html>