Hugging Face's logo

Spaces:
Traveler007
/
test
Running

App Files Community
Traveler007 commited on
Commit
d7fa38c
·
verified ·
1 Parent(s): 392b607

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +839 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,839 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Swiss Apogee - Ultimate Epic Experiences</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
9
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ deepnavy: '#0a192f',
16
+ mattesilver: '#c0c0c0',
17
+ offwhite: '#f8f8f8',
18
+ accent: '#4a6fa5',
19
+ highlight: '#c0a080'
20
+ },
21
+ fontFamily: {
22
+ serif: ['Playfair Display', 'serif'],
23
+ sans: ['Montserrat', 'sans-serif']
24
+ },
25
+ animation: {
26
+ 'pulse-slow': 'pulse 6s ease-in-out infinite',
27
+ 'float': 'float 6s ease-in-out infinite',
28
+ },
29
+ keyframes: {
30
+ float: {
31
+ '0%, 100%': { transform: 'translateY(0)' },
32
+ '50%': { transform: 'translateY(-10px)' },
33
+ }
34
+ }
35
+ }
36
+ }
37
+ }
38
+ </script>
39
+ <style>
40
+ html {
41
+ scroll-behavior: smooth;
42
+ }
43
+ body {
44
+ background-color: #0a192f;
45
+ color: #f8f8f8;
46
+ overflow-x: hidden;
47
+ }
48
+ .gradient-bg {
49
+ background: radial-gradient(circle at 10% 20%, rgba(10, 25, 47, 0.9) 0%, rgba(4, 12, 24, 0.95) 90%);
50
+ }
51
+ .section-padding {
52
+ padding: 8rem 0;
53
+ }
54
+ .alpine-card {
55
+ background: rgba(10, 25, 47, 0.7);
56
+ backdrop-filter: blur(10px);
57
+ border: 1px solid rgba(192, 192, 192, 0.1);
58
+ border-radius: 16px;
59
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
60
+ }
61
+ .chat-bubble {
62
+ border-radius: 24px;
63
+ border-top-left-radius: 4px;
64
+ }
65
+ .user-bubble {
66
+ border-radius: 24px;
67
+ border-top-right-radius: 4px;
68
+ }
69
+ .timeline-item::before {
70
+ content: '';
71
+ position: absolute;
72
+ top: 32px;
73
+ left: -20px;
74
+ height: 16px;
75
+ width: 16px;
76
+ border-radius: 50%;
77
+ background: #c0a080;
78
+ }
79
+ .mobile-nav {
80
+ height: 70px;
81
+ backdrop-filter: blur(10px);
82
+ }
83
+ .floating-ai {
84
+ animation: float 6s ease-in-out infinite;
85
+ box-shadow: 0 5px 15px rgba(192, 160, 128, 0.4);
86
+ }
87
+ .experience-card:hover {
88
+ transform: translateY(-10px);
89
+ transition: transform 0.3s ease;
90
+ }
91
+ .parallax {
92
+ background-attachment: fixed;
93
+ background-position: center;
94
+ background-repeat: no-repeat;
95
+ background-size: cover;
96
+ }
97
+ @media (max-width: 768px) {
98
+ .section-padding {
99
+ padding: 4rem 0;
100
+ }
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="font-sans gradient-bg">
105
+ <!-- Desktop Navigation -->
106
+ <nav class="fixed w-full z-50 py-4 px-6 md:px-12 transition-all duration-300">
107
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
108
+ <div class="flex items-center space-x-3">
109
+ <div class="w-12 h-12 rounded-full bg-accent flex items-center justify-center">
110
+ <span class="text-offwhite font-serif text-xl font-bold">SA</span>
111
+ </div>
112
+ <span class="text-offwhite font-serif text-xl font-bold">Swiss Apogee</span>
113
+ </div>
114
+ <div class="hidden md:flex space-x-10">
115
+ <a href="#home" class="text-mattesilver hover:text-highlight font-medium">Home</a>
116
+ <a href="#concierge" class="text-mattesilver hover:text-highlight font-medium">Concierge</a>
117
+ <a href="#itinerary" class="text-mattesilver hover:text-highlight font-medium">Itinerary</a>
118
+ <a href="#profile" class="text-mattesilver hover:text-highlight font-medium">Profile</a>
119
+ <button class="bg-highlight text-deepnavy px-6 py-2 rounded-full font-bold hover:bg-opacity-90 transition">Login</button>
120
+ </div>
121
+ <div class="md:hidden">
122
+ <button id="mobile-menu" class="text-offwhite">
123
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
124
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
125
+ </svg>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </nav>
130
+
131
+ <!-- Mobile Menu -->
132
+ <div id="menu-overlay" class="fixed inset-0 bg-deepnavy bg-opacity-95 z-50 hidden flex-col items-center justify-center space-y-8">
133
+ <a href="#home" class="text-2xl text-offwhite font-serif">Home</a>
134
+ <a href="#concierge" class="text-2xl text-offwhite font-serif">Concierge</a>
135
+ <a href="#itinerary" class="text-2xl text-offwhite font-serif">Itinerary</a>
136
+ <a href="#profile" class="text-2xl text-offwhite font-serif">Profile</a>
137
+ <button class="bg-highlight text-deepnavy px-8 py-3 rounded-full font-bold text-xl">Login</button>
138
+ <button id="close-menu" class="absolute top-6 right-6 text-offwhite">
139
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
140
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
141
+ </svg>
142
+ </button>
143
+ </div>
144
+
145
+ <!-- Floating AI Button (Mobile) -->
146
+ <div class="fixed bottom-24 right-6 z-40 md:hidden">
147
+ <button class="floating-ai bg-highlight w-16 h-16 rounded-full flex items-center justify-center shadow-xl">
148
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-deepnavy" viewBox="0 0 20 20" fill="currentColor">
149
+ <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
150
+ </svg>
151
+ </button>
152
+ </div>
153
+
154
+ <!-- Hero Section -->
155
+ <section id="home" class="min-h-screen flex items-center section-padding pt-20">
156
+ <div class="max-w-7xl mx-auto px-6 md:px-12">
157
+ <div class="flex flex-col md:flex-row items-center">
158
+ <div class="md:w-1/2 mb-12 md:mb-0">
159
+ <h1 class="font-serif text-5xl md:text-7xl font-bold mb-6">
160
+ Ultimate <span class="text-highlight">Epic</span> Experiences
161
+ </h1>
162
+ <p class="text-mattesilver text-xl mb-8 max-w-2xl">
163
+ Where artificial intelligence meets human emotion to craft unforgettable journeys tailored to your deepest desires.
164
+ </p>
165
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
166
+ <button class="bg-highlight text-deepnavy px-8 py-4 rounded-full font-bold text-lg hover:bg-opacity-90 transition">
167
+ Begin Your Journey
168
+ </button>
169
+ <button class="border-2 border-highlight text-highlight px-8 py-4 rounded-full font-bold text-lg hover:bg-highlight hover:text-deepnavy transition">
170
+ Watch Introduction
171
+ </button>
172
+ </div>
173
+ </div>
174
+ <div class="md:w-1/2 flex justify-center">
175
+ <div class="alpine-card p-8 max-w-md w-full">
176
+ <div class="text-center mb-6">
177
+ <h2 class="font-serif text-3xl mb-4">Experience the Alps</h2>
178
+ <div class="w-24 h-1 bg-highlight mx-auto"></div>
179
+ </div>
180
+ <div class="space-y-6">
181
+ <div class="flex justify-between items-center pb-4 border-b border-mattesilver border-opacity-20">
182
+ <div class="flex items-center">
183
+ <div class="bg-accent rounded-full p-3 mr-4">
184
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
185
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
186
+ </svg>
187
+ </div>
188
+ <div>
189
+ <h3 class="font-bold">Luxury Stays</h3>
190
+ <p class="text-sm text-mattesilver">5-star alpine residences</p>
191
+ </div>
192
+ </div>
193
+ <span class="text-highlight font-bold">→</span>
194
+ </div>
195
+
196
+ <div class="flex justify-between items-center pb-4 border-b border-mattesilver border-opacity-20">
197
+ <div class="flex items-center">
198
+ <div class="bg-accent rounded-full p-3 mr-4">
199
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
200
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
201
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
202
+ </svg>
203
+ </div>
204
+ <div>
205
+ <h3 class="font-bold">Unique Destinations</h3>
206
+ <p class="text-sm text-mattesilver">Hidden gems & exclusives</p>
207
+ </div>
208
+ </div>
209
+ <span class="text-highlight font-bold">→</span>
210
+ </div>
211
+
212
+ <div class="flex justify-between items-center">
213
+ <div class="flex items-center">
214
+ <div class="bg-accent rounded-full p-3 mr-4">
215
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
216
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
217
+ </svg>
218
+ </div>
219
+ <div>
220
+ <h3 class="font-bold">Emotional Journeys</h3>
221
+ <p class="text-sm text-mattesilver">Tailored to your soul</p>
222
+ </div>
223
+ </div>
224
+ <span class="text-highlight font-bold">→</span>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </section>
232
+
233
+ <!-- Storytelling Section -->
234
+ <section class="py-16 parallax" style="background-image: url('https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80')">
235
+ <div class="max-w-7xl mx-auto px-6 md:px-12">
236
+ <div class="alpine-card p-8 md:p-12 max-w-4xl mx-auto">
237
+ <h2 class="font-serif text-3xl md:text-4xl mb-8 text-center">The Living AI Organism</h2>
238
+ <div class="space-y-6">
239
+ <div class="flex">
240
+ <div class="text-highlight font-serif text-5xl mr-4">1</div>
241
+ <div>
242
+ <h3 class="font-serif text-xl mb-2">Neurological-Emotional AI</h3>
243
+ <p class="text-mattesilver">Our AI doesn't just process data - it understands human emotion, crafting journeys that resonate with your deepest desires and aspirations.</p>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="flex">
248
+ <div class="text-highlight font-serif text-5xl mr-4">2</div>
249
+ <div>
250
+ <h3 class="font-serif text-xl mb-2">Self-Learning Ecosystem</h3>
251
+ <p class="text-mattesilver">Powered by Google's Vertex AI and Gemini, our system evolves with every interaction, continuously refining its understanding of luxury and exclusivity.</p>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="flex">
256
+ <div class="text-highlight font-serif text-5xl mr-4">3</div>
257
+ <div>
258
+ <h3 class="font-serif text-xl mb-2">MCP-Style Memory</h3>
259
+ <p class="text-mattesilver">Your preferences, reactions, and memories are stored in a dynamic neural network, creating a living travel profile that grows with you.</p>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="flex justify-center mt-10">
264
+ <button class="border-2 border-highlight text-highlight px-8 py-3 rounded-full font-bold hover:bg-highlight hover:text-deepnavy transition font-serif">
265
+ Explore Our Technology
266
+ </button>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </section>
272
+
273
+ <!-- Concierge Interface -->
274
+ <section id="concierge" class="section-padding">
275
+ <div class="max-w-7xl mx-auto px-6 md:px-12">
276
+ <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-6">Your Personal AI Concierge</h2>
277
+ <p class="text-mattesilver text-xl text-center max-w-3xl mx-auto mb-16">
278
+ Connect emotionally with our living AI organism to design your perfect journey
279
+ </p>
280
+
281
+ <div class="flex flex-col lg:flex-row gap-8">
282
+ <!-- Chat Interface -->
283
+ <div class="alpine-card p-6 flex-1">
284
+ <div class="flex items-center justify-between mb-6">
285
+ <h3 class="font-serif text-2xl">AURA - AI Travel Companion</h3>
286
+ <div class="flex space-x-2">
287
+ <button class="bg-accent p-2 rounded-full">
288
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
289
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
290
+ </svg>
291
+ </button>
292
+ <button class="bg-highlight p-2 rounded-full">
293
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-deepnavy" fill="none" viewBox="0 0 24 24" stroke="currentColor">
294
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
295
+ </svg>
296
+ </button>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Chat Messages -->
301
+ <div class="h-96 overflow-y-auto mb-6 space-y-4 pr-2">
302
+ <div class="flex">
303
+ <div class="bg-accent rounded-full h-10 w-10 flex items-center justify-center mr-3 flex-shrink-0">
304
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
305
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
306
+ </svg>
307
+ </div>
308
+ <div class="bg-accent bg-opacity-30 p-4 chat-bubble">
309
+ <p>Hello! I'm AURA, your AI travel companion. How may I create an unforgettable experience for you today?</p>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="flex justify-end">
314
+ <div class="bg-highlight bg-opacity-20 p-4 user-bubble max-w-md">
315
+ <p>I'd like a romantic getaway in Switzerland next month. Something with mountain views and luxury spas.</p>
316
+ </div>
317
+ <div class="bg-highlight bg-opacity-20 rounded-full h-10 w-10 flex items-center justify-center ml-3 flex-shrink-0">
318
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-highlight" fill="none" viewBox="0 0 24 24" stroke="currentColor">
319
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
320
+ </svg>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="flex">
325
+ <div class="bg-accent rounded-full h-10 w-10 flex items-center justify-center mr-3 flex-shrink-0">
326
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
327
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
328
+ </svg>
329
+ </div>
330
+ <div class="bg-accent bg-opacity-30 p-4 chat-bubble">
331
+ <p>Wonderful choice! Based on your preference for romance and relaxation, I recommend our "Alpine Serenity" experience. Featuring a private chalet in Zermatt with panoramic Matterhorn views and a private infinity spa.</p>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Input Area -->
337
+ <div class="flex">
338
+ <input type="text" placeholder="Describe your dream journey..." class="flex-1 bg-deepnavy border border-mattesilver border-opacity-20 rounded-l-full py-3 px-6 focus:outline-none focus:ring-1 focus:ring-highlight">
339
+ <button class="bg-highlight text-deepnavy px-6 rounded-r-full font-bold">
340
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
341
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
342
+ </svg>
343
+ </button>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Recommendations -->
348
+ <div class="lg:w-1/3">
349
+ <div class="alpine-card p-6 mb-8">
350
+ <h3 class="font-serif text-2xl mb-4">Recommended For You</h3>
351
+ <div class="space-y-4">
352
+ <div class="flex items-center p-3 hover:bg-accent hover:bg-opacity-20 rounded-lg cursor-pointer">
353
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
354
+ <div class="ml-4">
355
+ <h4 class="font-bold">Healing Retreats</h4>
356
+ <p class="text-sm text-mattesilver">Wellness sanctuaries</p>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="flex items-center p-3 hover:bg-accent hover:bg-opacity-20 rounded-lg cursor-pointer">
361
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
362
+ <div class="ml-4">
363
+ <h4 class="font-bold">Adventure Expeditions</h4>
364
+ <p class="text-sm text-mattesilver">Thrilling experiences</p>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="flex items-center p-3 hover:bg-accent hover:bg-opacity-20 rounded-lg cursor-pointer">
369
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
370
+ <div class="ml-4">
371
+ <h4 class="font-bold">Romantic Escapes</h4>
372
+ <p class="text-sm text-mattesilver">Intimate getaways</p>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="alpine-card p-6">
379
+ <h3 class="font-serif text-2xl mb-4">Top Destinations</h3>
380
+ <div class="grid grid-cols-2 gap-3">
381
+ <div class="bg-accent bg-opacity-10 p-3 rounded-lg text-center">
382
+ <h4 class="font-bold">Zermatt</h4>
383
+ <div class="text-sm text-mattesilver mt-1">Switzerland</div>
384
+ </div>
385
+ <div class="bg-accent bg-opacity-10 p-3 rounded-lg text-center">
386
+ <h4 class="font-bold">St. Moritz</h4>
387
+ <div class="text-sm text-mattesilver mt-1">Switzerland</div>
388
+ </div>
389
+ <div class="bg-accent bg-opacity-10 p-3 rounded-lg text-center">
390
+ <h4 class="font-bold">Crans-Montana</h4>
391
+ <div class="text-sm text-mattesilver mt-1">Switzerland</div>
392
+ </div>
393
+ <div class="bg-accent bg-opacity-10 p-3 rounded-lg text-center">
394
+ <h4 class="font-bold">Gstaad</h4>
395
+ <div class="text-sm text-mattesilver mt-1">Switzerland</div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </section>
403
+
404
+ <!-- Experiences Showcase -->
405
+ <section class="py-16 parallax" style="background-image: url('https://images.unsplash.com/photo-1511735643442-503bb3bd348a?ixlib=rb-4.0.3&auto=format&fit=crop&w=2100&q=80')">
406
+ <div class="max-w-7xl mx-auto px-6 md:px-12">
407
+ <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-6">Apogee Experiences</h2>
408
+ <p class="text-mattesilver text-xl text-center max-w-3xl mx-auto mb-16">
409
+ Curated journeys designed around emotional resonance
410
+ </p>
411
+
412
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
413
+ <div class="experience-card alpine-card p-6 h-full transition-all">
414
+ <div class="text-highlight font-serif text-3xl mb-4">Healing</div>
415
+ <h3 class="font-serif text-2xl mb-3">Alpine Wellness Retreat</h3>
416
+ <p class="text-mattesilver mb-4">Rejuvenate mind and body at our secluded mountain sanctuary with personalized wellness programs.</p>
417
+ <div class="flex items-center justify-between">
418
+ <span class="font-bold text-highlight">From €5,900</span>
419
+ <button class="text-highlight font-bold">Explore →</button>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="experience-card alpine-card p-6 h-full transition-all">
424
+ <div class="text-highlight font-serif text-3xl mb-4">Celebration</div>
425
+ <h3 class="font-serif text-2xl mb-3">Luxury Anniversary Escape</h3>
426
+ <p class="text-mattesilver mb-4">Celebrate your love story with private dinners, helicopter tours, and champagne under the stars.</p>
427
+ <div class="flex items-center justify-between">
428
+ <span class="font-bold text-highlight">From €8,200</span>
429
+ <button class="text-highlight font-bold">Explore →</button>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="experience-card alpine-card p-6 h-full transition-all">
434
+ <div class="text-highlight font-serif text-3xl mb-4">Adventure</div>
435
+ <h3 class="font-serif text-2xl mb-3">Peak Exploration Challenge</h3>
436
+ <p class="text-mattesilver mb-4">Conquer majestic peaks with expert guides, followed by luxury mountain lodges and gourmet feasts.</p>
437
+ <div class="flex items-center justify-between">
438
+ <span class="font-bold text-highlight">From €6,500</span>
439
+ <button class="text-highlight font-bold">Explore →</button>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </section>
445
+
446
+ <!-- Itinerary Builder -->
447
+ <section id="itinerary" class="section-padding">
448
+ <div class="max-w-7xl mx-auto px-6 md:px-12">
449
+ <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-6">AI-Powered Itinerary Builder</h2>
450
+ <p class="text-mattesilver text-xl text-center max-w-3xl mx-auto mb-16">
451
+ Craft your perfect journey with intelligent suggestions and personalization
452
+ </p>
453
+
454
+ <div class="alpine-card p-6 md:p-8">
455
+ <div class="flex flex-wrap items-center justify-between mb-8">
456
+ <div>
457
+ <h3 class="font-serif text-2xl mb-2">5-Day Luxury Swiss Experience</h3>
458
+ <div class="flex space-x-4">
459
+ <span class="text-mattesilver flex items-center">
460
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
461
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
462
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
463
+ </svg>
464
+ Zurich, Lucerne, Interlaken
465
+ </span>
466
+ <span class="text-mattesilver flex items-center">
467
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
468
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
469
+ </svg>
470
+ Sept 15-19, 2023
471
+ </span>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="flex space-x-3 mt-4 md:mt-0">
476
+ <button class="border border-highlight text-highlight px-4 py-2 rounded-lg text-sm font-bold hover:bg-highlight hover:text-deepnavy transition">Save Itinerary</button>
477
+ <button class="bg-highlight text-deepnavy px-4 py-2 rounded-lg text-sm font-bold hover:bg-opacity-90 transition">Book Now</button>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Preferences Toggles -->
482
+ <div class="bg-accent bg-opacity-10 p-4 rounded-lg mb-8">
483
+ <h4 class="font-bold mb-3">Travel Preferences</h4>
484
+ <div class="flex flex-wrap gap-4">
485
+ <div class="flex items-center">
486
+ <span class="mr-2 text-mattesilver">Luxury Level:</span>
487
+ <div class="flex">
488
+ <button class="bg-highlight text-deepnavy px-3 py-1 text-sm font-bold">Premium</button>
489
+ <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold">Luxury</button>
490
+ <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold">Ultimate</button>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="flex items-center">
495
+ <span class="mr-2 text-mattesilver">Interests:</span>
496
+ <div class="flex flex-wrap gap-2">
497
+ <button class="bg-highlight text-deepnavy px-3 py-1 text-sm font-bold rounded-full">Culture</button>
498
+ <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold rounded-full">Nature</button>
499
+ <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold rounded-full">Gastronomy</button>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="flex items-center">
504
+ <span class="mr-2 text-mattesilver">Mobility:</span>
505
+ <div class="flex">
506
+ <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold">Active</button>
507
+ <button class="bg-highlight text-deepnavy px-3 py-1 text-sm font-bold">Moderate</button>
508
+ <button class="bg-deepnavy border border-highlight text-highlight px-3 py-1 text-sm font-bold">Relaxed</button>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Timeline -->
515
+ <div>
516
+ <h4 class="font-serif text-xl mb-6">Your Itinerary</h4>
517
+ <div class="space-y-6">
518
+ <!-- Day 1 -->
519
+ <div class="relative pl-10 timeline-item">
520
+ <div class="font-serif text-lg text-highlight mb-1">Day 1: Arrival in Zurich</div>
521
+ <div class="grid md:grid-cols-3 gap-6">
522
+ <div class="alpine-card p-4">
523
+ <div class="font-bold mb-2">Morning</div>
524
+ <p>Private transfer to luxury lakeside hotel</p>
525
+ </div>
526
+ <div class="alpine-card p-4">
527
+ <div class="font-bold mb-2">Afternoon</div>
528
+ <p>Exclusive Old Town walking tour</p>
529
+ </div>
530
+ <div class="alpine-card p-4 bg-highlight bg-opacity-10">
531
+ <div class="font-bold mb-2">Evening</div>
532
+ <p>Michelin-starred dinner with city views</p>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <!-- Day 2 -->
538
+ <div class="relative pl-10 timeline-item">
539
+ <div class="font-serif text-lg text-highlight mb-1">Day 2: Journey to Lucerne</div>
540
+ <div class="grid md:grid-cols-3 gap-6">
541
+ <div class="alpine-card p-4">
542
+ <div class="font-bold mb-2">Morning</div>
543
+ <p>Scenic GoldenPass train experience</p>
544
+ </div>
545
+ <div class="alpine-card p-4">
546
+ <div class="font-bold mb-2">Afternoon</div>
547
+ <p>Private yacht cruise on Lake Lucerne</p>
548
+ </div>
549
+ <div class="alpine-card p-4 bg-highlight bg-opacity-10">
550
+ <div class="font-bold mb-2">Evening</div>
551
+ <p>Mountain fondue at sunset lookout</p>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <!-- Day 3 -->
557
+ <div class="relative pl-10 timeline-item">
558
+ <div class="font-serif text-lg text-highlight mb-1">Day 3: Alpine Adventure</div>
559
+ <div class="grid md:grid-cols-3 gap-6">
560
+ <div class="alpine-card p-4">
561
+ <div class="font-bold mb-2">Morning</div>
562
+ <p>Cable car to Mount Pilatus summit</p>
563
+ </div>
564
+ <div class="alpine-card p-4">
565
+ <div class="font-bold mb-2">Afternoon</div>
566
+ <p>Guided glacier hike with picnic</p>
567
+ </div>
568
+ <div class="alpine-card p-4 bg-highlight bg-opacity-10">
569
+ <div class="font-bold mb-2">Evening</div>
570
+ <p>Relaxation at luxury alpine spa</p>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </section>
579
+
580
+ <!-- Memory Profile -->
581
+ <section id="profile" class="section-padding">
582
+ <div class="max-w-7xl mx-auto px-6 md:px-12">
583
+ <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-6">Your Living Memory Profile</h2>
584
+ <p class="text-mattesilver text-xl text-center max-w-3xl mx-auto mb-16">
585
+ An evolving AI-powered profile that grows with every journey
586
+ </p>
587
+
588
+ <div class="alpine-card p-6 md:p-8">
589
+ <div class="grid md:grid-cols-3 gap-8">
590
+ <!-- Profile Summary -->
591
+ <div class="md:col-span-1">
592
+ <div class="flex flex-col items-center mb-6">
593
+ <div class="bg-highlight rounded-full w-24 h-24 flex items-center justify-center mb-4">
594
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-deepnavy" fill="none" viewBox="0 0 24 24" stroke="currentColor">
595
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
596
+ </svg>
597
+ </div>
598
+ <h3 class="font-serif text-2xl">Alexandra K.</h3>
599
+ <p class="text-mattesilver">Platinum Member Since 2022</p>
600
+ </div>
601
+
602
+ <div class="space-y-4">
603
+ <div>
604
+ <h4 class="font-bold text-mattesilver mb-2">Travel Preferences</h4>
605
+ <div class="flex flex-wrap gap-2">
606
+ <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Luxury Hotels</span>
607
+ <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Private Transfers</span>
608
+ <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Fine Dining</span>
609
+ <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Spa Experiences</span>
610
+ </div>
611
+ </div>
612
+
613
+ <div>
614
+ <h4 class="font-bold text-mattesilver mb-2">Dislikes</h4>
615
+ <div class="flex flex-wrap gap-2">
616
+ <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Large Tour Groups</span>
617
+ <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Budget Airlines</span>
618
+ </div>
619
+ </div>
620
+
621
+ <div>
622
+ <h4 class="font-bold text-mattesilver mb-2">Special Requirements</h4>
623
+ <div class="flex flex-wrap gap-2">
624
+ <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Vegetarian</span>
625
+ <span class="bg-accent bg-opacity-20 px-3 py-1 rounded-full text-sm">Allergies: Shellfish</span>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ </div>
630
+
631
+ <!-- Travel History -->
632
+ <div class="md:col-span-2">
633
+ <h3 class="font-serif text-2xl mb-6">Travel Memories</h3>
634
+
635
+ <div class="grid md:grid-cols-2 gap-6">
636
+ <div class="alpine-card p-4">
637
+ <div class="font-bold text-highlight mb-2">Swiss Alps Retreat</div>
638
+ <p class="text-sm text-mattesilver mb-3">June 2023 | Zermatt, Switzerland</p>
639
+ <div class="flex flex-wrap gap-2 mb-4">
640
+ <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Spa</span>
641
+ <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Mountain Views</span>
642
+ <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Luxury</span>
643
+ </div>
644
+ <div class="text-sm">
645
+ <div class="flex items-center mb-1">
646
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-highlight mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
647
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
648
+ </svg>
649
+ Favorite Moment: Private hot tub under the stars
650
+ </div>
651
+ <div class="flex items-center">
652
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-highlight mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
653
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
654
+ </svg>
655
+ Improvement: More vegan dessert options
656
+ </div>
657
+ </div>
658
+ </div>
659
+
660
+ <div class="alpine-card p-4">
661
+ <div class="font-bold text-highlight mb-2">Italian Lakes Discovery</div>
662
+ <p class="text-sm text-mattesilver mb-3">April 2023 | Lake Como, Italy</p>
663
+ <div class="flex flex-wrap gap-2 mb-4">
664
+ <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Boating</span>
665
+ <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Culture</span>
666
+ <span class="bg-accent bg-opacity-10 px-2 py-1 rounded text-xs">Gourmet</span>
667
+ </div>
668
+ <div class="text-sm">
669
+ <div class="flex items-center mb-1">
670
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-highlight mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
671
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
672
+ </svg>
673
+ Favorite Moment: Private villa garden dinner
674
+ </div>
675
+ <div class="flex items-center">
676
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-highlight mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
677
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
678
+ </svg>
679
+ Improvement: Earlier check-in at hotel
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </div>
684
+
685
+ <div class="mt-6">
686
+ <h4 class="font-bold text-mattesilver mb-4">AI-Generated Insights</h4>
687
+ <div class="alpine-card p-4">
688
+ <p>"Based on your travel history, we recommend exploring our Healing Retreats in Switzerland. Your preference for spa experiences and mountain views suggests you would enjoy our Alpine Serenity program which features private yoga sessions, forest bathing, and thermal spa treatments."</p>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ </section>
696
+
697
+ <!-- Mobile Navigation -->
698
+ <nav class="fixed bottom-0 left-0 right-0 z-50 mobile-nav bg-deepnavy bg-opacity-80 border-t border-mattesilver border-opacity-20 md:hidden">
699
+ <div class="flex justify-around">
700
+ <a href="#home" class="flex flex-col items-center p-3 text-mattesilver">
701
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
702
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
703
+ </svg>
704
+ <span class="text-xs mt-1">Home</span>
705
+ </a>
706
+ <a href="#concierge" class="flex flex-col items-center p-3 text-highlight">
707
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
708
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
709
+ </svg>
710
+ <span class="text-xs mt-1">Concierge</span>
711
+ </a>
712
+ <a href="#itinerary" class="flex flex-col items-center p-3 text-mattesilver">
713
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
714
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
715
+ </svg>
716
+ <span class="text-xs mt-1">Itinerary</span>
717
+ </a>
718
+ <a href="#profile" class="flex flex-col items-center p-3 text-mattesilver">
719
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
720
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
721
+ </svg>
722
+ <span class="text-xs mt-1">Profile</span>
723
+ </a>
724
+ <a href="#" class="flex flex-col items-center p-3 text-mattesilver">
725
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
726
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
727
+ </svg>
728
+ <span class="text-xs mt-1">Support</span>
729
+ </a>
730
+ </div>
731
+ </nav>
732
+
733
+ <!-- Footer -->
734
+ <footer class="py-16 border-t border-mattesilver border-opacity-20">
735
+ <div class="max-w-7xl mx-auto px-6 md:px-12">
736
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
737
+ <div>
738
+ <div class="flex items-center space-x-3 mb-6">
739
+ <div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center">
740
+ <span class="text-offwhite font-serif text-lg font-bold">SA</span>
741
+ </div>
742
+ <span class="text-offwhite font-serif text-lg font-bold">Swiss Apogee</span>
743
+ </div>
744
+ <p class="text-mattesilver mb-6">
745
+ Where artificial intelligence meets human emotion to craft unforgettable journeys.
746
+ </p>
747
+ <div class="flex space-x-4">
748
+ <a href="#" class="text-mattesilver hover:text-highlight">
749
+ <i class="fab fa-facebook-f"></i>
750
+ </a>
751
+ <a href="#" class="text-mattesilver hover:text-highlight">
752
+ <i class="fab fa-instagram"></i>
753
+ </a>
754
+ <a href="#" class="text-mattesilver hover:text-highlight">
755
+ <i class="fab fa-twitter"></i>
756
+ </a>
757
+ <a href="#" class="text-mattesilver hover:text-highlight">
758
+ <i class="fab fa-linkedin-in"></i>
759
+ </a>
760
+ </div>
761
+ </div>
762
+
763
+ <div>
764
+ <h3 class="font-bold text-xl mb-6">Navigation</h3>
765
+ <ul class="space-y-3">
766
+ <li><a href="#" class="text-mattesilver hover:text-highlight">Home</a></li>
767
+ <li><a href="#" class="text-mattesilver hover:text-highlight">About Us</a></li>
768
+ <li><a href="#" class="text-mattesilver hover:text-highlight">Experiences</a></li>
769
+ <li><a href="#" class="text-mattesilver hover:text-highlight">Testimonials</a></li>
770
+ <li><a href="#" class="text-mattesilver hover:text-highlight">Technology</a></li>
771
+ </ul>
772
+ </div>
773
+
774
+ <div>
775
+ <h3 class="font-bold text-xl mb-6">Legal</h3>
776
+ <ul class="space-y-3">
777
+ <li><a href="#" class="text-mattesilver hover:text-highlight">Privacy Policy</a></li>
778
+ <li><a href="#" class="text-mattesilver hover:text-highlight">Terms of Service</a></li>
779
+ <li><a href="#" class="text-mattesilver hover:text-highlight">Cookie Policy</a></li>
780
+ <li><a href="#" class="text-mattesilver hover:text-highlight">B2B Partnership</a></li>
781
+ </ul>
782
+ </div>
783
+
784
+ <div>
785
+ <h3 class="font-bold text-xl mb-6">Contact</h3>
786
+ <ul class="space-y-3">
787
+ <li class="text-mattesilver">Bahnhofstrasse 15, 8001 Zurich</li>
788
+ <li class="text-mattesilver">Switzerland</li>
789
+ <li class="text-mattesilver">+41 44 123 45 67</li>
790
+ <li class="text-mattesilver">contact@swissapogee.com</li>
791
+ </ul>
792
+ </div>
793
+ </div>
794
+
795
+ <div class="border-t border-mattesilver border-opacity-20 mt-12 pt-8 text-center text-mattesilver">
796
+ <p>© 2023 Swiss Apogee AG. All rights reserved.</p>
797
+ </div>
798
+ </div>
799
+ </footer>
800
+
801
+ <script>
802
+ // Mobile menu toggle
803
+ const mobileMenu = document.getElementById('mobile-menu');
804
+ const menuOverlay = document.getElementById('menu-overlay');
805
+ const closeMenu = document.getElementById('close-menu');
806
+
807
+ mobileMenu.addEventListener('click', () => {
808
+ menuOverlay.classList.remove('hidden');
809
+ menuOverlay.classList.add('flex');
810
+ });
811
+
812
+ closeMenu.addEventListener('click', () => {
813
+ menuOverlay.classList.add('hidden');
814
+ menuOverlay.classList.remove('flex');
815
+ });
816
+
817
+ // Experience Card Animation
818
+ const experienceCards = document.querySelectorAll('.experience-card');
819
+ experienceCards.forEach(card => {
820
+ card.addEventListener('mouseenter', function() {
821
+ this.style.transform = 'translateY(-10px)';
822
+ });
823
+ card.addEventListener('mouseleave', function() {
824
+ this.style.transform = 'translateY(0)';
825
+ });
826
+ });
827
+
828
+ // Navbar background on scroll
829
+ window.addEventListener('scroll', function() {
830
+ const nav = document.querySelector('nav');
831
+ if (window.scrollY > 50) {
832
+ nav.classList.add('bg-deepnavy', 'shadow-lg');
833
+ } else {
834
+ nav.classList.remove('bg-deepnavy', 'shadow-lg');
835
+ }
836
+ });
837
+ </script>
838
+ <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=Traveler007/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
839
+ </html>