Hugging Face's logo

Spaces:
0xLaszlo
/
vr
Running

App Files Community
0xLaszlo commited on
Commit
bc55269
·
verified ·
1 Parent(s): 1945691

ch habe mehrere Apartments, die ich regelmäßig an RBN-Kunden vermiete. Ich möchte eine moderne, ansprechende Website, auf der meine Apartments professionell präsentiert werden. Wichtige Anforderungen: Präsentation aller Apartments mit Fotos, Grundrissen und ausführlichen Beschreibungen Integration von hochwertigen 360-Grad-Rundgängen für jedes Apartment Moderne, schnelle und responsive Website (z.B. mit React, Next.js oder vergleichbarer Technologie) Einfache Möglichkeit, neue Apartments und Rundgänge selbst einzupflegen Optional: Buchungsanfrage- oder Kontaktformular, Kalender für Verfügbarkeiten Die Seite soll auf allen Geräten (Desktop, Tablet, Smartphone) optimal funktionieren Suchmaschinenoptimierung (SEO) für relevante Keywords im RBN-Bereich Zielgruppe: Vor allem Kunden aus dem RBN-Bereich, die Wert auf Qualität und eine unkomplizierte Buchung legen. Bitte machen Sie mir Vorschläge für das Design und die technische Umsetzung! English: I have several apartments for rent, mainly for RBN customers. I need a modern website to professionally showcase all apartments, with high-quality 360-degree walkthroughs for each unit. Requirements: Modern, fast, and responsive website (React, Next.js, etc.) Easy upload of new apartments and 360 tours Apartment details: photos, floor plans, descriptions Booking inquiry/contact form and availability calendar Mobile-friendly and SEO optimized Target group: Mainly RBN customers who value quality and a straightforward booking process. Please suggest a design and the best technical solution! - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +928 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vr
3
- emoji: 🚀
4
- colorFrom: green
5
- colorTo: gray
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: vr
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,928 @@
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>Premium RBN Apartments | Luxury Stays for Business Professionals</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
+ <meta name="description" content="Premium apartments for RBN professionals. High-quality, fully equipped accommodations with 360° virtual tours available.">
10
+ <style>
11
+ /* Custom styles that can't be done with Tailwind */
12
+ .hero-bg {
13
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1554469384-e58fac16e23a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80') no-repeat center center;
14
+ background-size: cover;
15
+ }
16
+ .tour-container {
17
+ position: relative;
18
+ padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
19
+ height: 0;
20
+ overflow: hidden;
21
+ }
22
+ .tour-container iframe {
23
+ position: absolute;
24
+ top: 0;
25
+ left: 0;
26
+ width: 100%;
27
+ height: 100%;
28
+ border: none;
29
+ }
30
+ .apartment-card:hover .apartment-image {
31
+ transform: scale(1.03);
32
+ transition: transform 0.3s ease;
33
+ }
34
+ .apartment-card:hover {
35
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
36
+ }
37
+ .active-filter {
38
+ color: white;
39
+ background-color: #3b82f6;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="font-sans bg-gray-50">
44
+ <!-- Navigation -->
45
+ <nav class="bg-white shadow-lg">
46
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
47
+ <div class="flex justify-between h-16">
48
+ <div class="flex items-center">
49
+ <a href="#" class="flex-shrink-0 flex items-center">
50
+ <i class="fas fa-building text-blue-500 text-2xl mr-2"></i>
51
+ <span class="text-xl font-bold text-gray-800">RBN Stays</span>
52
+ </a>
53
+ </div>
54
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
55
+ <a href="#apartments" class="text-gray-900 hover:text-blue-500 px-3 py-2 text-sm font-medium">Apartments</a>
56
+ <a href="#features" class="text-gray-900 hover:text-blue-500 px-3 py-2 text-sm font-medium">Features</a>
57
+ <a href="#location" class="text-gray-900 hover:text-blue-500 px-3 py-2 text-sm font-medium">Location</a>
58
+ <a href="#contact" class="text-gray-900 hover:text-blue-500 px-3 py-2 text-sm font-medium">Contact</a>
59
+ <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Book Now</a>
60
+ </div>
61
+ <div class="-mr-2 flex items-center md:hidden">
62
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
63
+ <span class="sr-only">Open main menu</span>
64
+ <i class="fas fa-bars text-xl"></i>
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ <!-- Mobile menu, show/hide based on menu state. -->
70
+ <div class="hidden md:hidden" id="mobile-menu">
71
+ <div class="pt-2 pb-3 space-y-1">
72
+ <a href="#apartments" class="bg-blue-50 border-blue-500 text-blue-500 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Apartments</a>
73
+ <a href="#features" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a>
74
+ <a href="#location" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Location</a>
75
+ <a href="#contact" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a>
76
+ <a href="#" class="block w-full text-center bg-blue-500 text-white px-4 py-2 rounded-md text-base font-medium mt-2">Book Now</a>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Hero Section -->
82
+ <section class="hero-bg text-white py-20 md:py-32">
83
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
84
+ <div class="md:w-1/2">
85
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Premium Apartments for RBN Professionals</h1>
86
+ <p class="text-xl mb-8">Experience comfortable, fully-equipped accommodations designed for your business needs.</p>
87
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
88
+ <a href="#apartments" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium text-center transition duration-300">
89
+ View Apartments
90
+ </a>
91
+ <a href="#contact" class="bg-white hover:bg-gray-100 text-blue-500 px-6 py-3 rounded-md text-lg font-medium text-center transition duration-300">
92
+ Contact Us
93
+ </a>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- Quick Features -->
100
+ <section class="py-12 bg-white">
101
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
102
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
103
+ <div class="flex flex-col items-center text-center p-4">
104
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
105
+ <i class="fas fa-wifi text-blue-500 text-2xl"></i>
106
+ </div>
107
+ <h3 class="font-bold text-lg mb-2">High-Speed WiFi</h3>
108
+ <p class="text-gray-600">Secure, reliable internet connection for all your business needs.</p>
109
+ </div>
110
+ <div class="flex flex-col items-center text-center p-4">
111
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
112
+ <i class="fas fa-laptop text-blue-500 text-2xl"></i>
113
+ </div>
114
+ <h3 class="font-bold text-lg mb-2">Workspace Ready</h3>
115
+ <p class="text-gray-600">Ergonomic workstations in every apartment.</p>
116
+ </div>
117
+ <div class="flex flex-col items-center text-center p-4">
118
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
119
+ <i class="fas fa-map-marked-alt text-blue-500 text-2xl"></i>
120
+ </div>
121
+ <h3 class="font-bold text-lg mb-2">Prime Locations</h3>
122
+ <p class="text-gray-600">Centrally located near business districts and transport.</p>
123
+ </div>
124
+ <div class="flex flex-col items-center text-center p-4">
125
+ <div class="bg-blue-100 p-4 rounded-full mb-3">
126
+ <i class="fas fa-shield-alt text-blue-500 text-2xl"></i>
127
+ </div>
128
+ <h3 class="font-bold text-lg mb-2">RBN Approved</h3>
129
+ <p class="text-gray-600">Trusted by RBN professionals and corporations.</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </section>
134
+
135
+ <!-- Apartments Section -->
136
+ <section id="apartments" class="py-12 bg-gray-50">
137
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
138
+ <div class="text-center mb-12">
139
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Apartments</h2>
140
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Browse our selection of premium apartments designed for comfort and productivity.</p>
141
+ </div>
142
+
143
+ <!-- Filter Buttons -->
144
+ <div class="flex flex-wrap justify-center gap-2 mb-8">
145
+ <button class="filter-btn active-filter px-4 py-2 rounded-full text-sm font-medium" data-filter="all">All</button>
146
+ <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium border border-gray-300 hover:bg-blue-50" data-filter="studio">Studio</button>
147
+ <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium border border-gray-300 hover:bg-blue-50" data-filter="1-bed">1 Bedroom</button>
148
+ <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium border border-gray-300 hover:bg-blue-50" data-filter="2-bed">2 Bedrooms</button>
149
+ <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium border border-gray-300 hover:bg-blue-50" data-filter="executive">Executive</button>
150
+ </div>
151
+
152
+ <!-- Apartments Grid -->
153
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 apartment-list">
154
+ <!-- Apartment 1 -->
155
+ <div class="apartment-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="executive">
156
+ <div class="relative">
157
+ <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
158
+ alt="Executive Apartment" class="apartment-image w-full h-64 object-cover transition duration-300">
159
+ <div class="absolute top-2 left-2 bg-blue-500 text-white px-2 py-1 rounded text-xs font-bold">Executive</div>
160
+ <div class="absolute top-2 right-2 bg-white text-blue-500 px-2 py-1 rounded-full text-xs font-bold">
161
+ <i class="fas fa-expand"></i> 360° Tour
162
+ </div>
163
+ </div>
164
+ <div class="p-6">
165
+ <h3 class="text-xl font-bold mb-2">Downtown Executive Suite</h3>
166
+ <div class="flex items-center text-gray-600 mb-3">
167
+ <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
168
+ <span>Central Business District</span>
169
+ </div>
170
+ <div class="flex items-center mb-4">
171
+ <div class="flex mr-4">
172
+ <i class="fas fa-bed mr-1 text-blue-500"></i>
173
+ <span class="text-sm">1 Bed</span>
174
+ </div>
175
+ <div class="flex mr-4">
176
+ <i class="fas fa-bath mr-1 text-blue-500"></i>
177
+ <span class="text-sm">1 Bath</span>
178
+ </div>
179
+ <div class="flex">
180
+ <i class="fas fa-ruler-combined mr-1 text-blue-500"></i>
181
+ <span class="text-sm">650 sqft</span>
182
+ </div>
183
+ </div>
184
+ <p class="text-gray-600 mb-4">Spacious executive apartment with panoramic city views, premium furnishings, and dedicated workspace.</p>
185
+
186
+ <div class="flex justify-between items-center">
187
+ <div>
188
+ <span class="text-lg font-bold text-blue-500">$175/night</span>
189
+ <span class="text-sm text-gray-600">+ fees</span>
190
+ </div>
191
+ <button class="view-details-btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium transition duration-300"
192
+ data-apartment="executive-suite">
193
+ View Details
194
+ </button>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Apartment 2 -->
200
+ <div class="apartment-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="1-bed">
201
+ <div class="relative">
202
+ <img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
203
+ alt="1 Bedroom Apartment" class="apartment-image w-full h-64 object-cover transition duration-300">
204
+ <div class="absolute top-2 left-2 bg-green-500 text-white px-2 py-1 rounded text-xs font-bold">1 Bedroom</div>
205
+ <div class="absolute top-2 right-2 bg-white text-blue-500 px-2 py-1 rounded-full text-xs font-bold">
206
+ <i class="fas fa-expand"></i> 360° Tour
207
+ </div>
208
+ </div>
209
+ <div class="p-6">
210
+ <h3 class="text-xl font-bold mb-2">Modern City View</h3>
211
+ <div class="flex items-center text-gray-600 mb-3">
212
+ <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
213
+ <span>Riverside District</span>
214
+ </div>
215
+ <div class="flex items-center mb-4">
216
+ <div class="flex mr-4">
217
+ <i class="fas fa-bed mr-1 text-blue-500"></i>
218
+ <span class="text-sm">1 Bed</span>
219
+ </div>
220
+ <div class="flex mr-4">
221
+ <i class="fas fa-bath mr-1 text-blue-500"></i>
222
+ <span class="text-sm">1 Bath</span>
223
+ </div>
224
+ <div class="flex">
225
+ <i class="fas fa-ruler-combined mr-1 text-blue-500"></i>
226
+ <span class="text-sm">550 sqft</span>
227
+ </div>
228
+ </div>
229
+ <p class="text-gray-600 mb-4">Bright and airy one-bedroom apartment with modern amenities and a view of the city skyline.</p>
230
+
231
+ <div class="flex justify-between items-center">
232
+ <div>
233
+ <span class="text-lg font-bold text-blue-500">$135/night</span>
234
+ <span class="text-sm text-gray-600">+ fees</span>
235
+ </div>
236
+ <button class="view-details-btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium transition duration-300"
237
+ data-apartment="city-view">
238
+ View Details
239
+ </button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Apartment 3 -->
245
+ <div class="apartment-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-category="studio">
246
+ <div class="relative">
247
+ <img src="https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
248
+ alt="Studio Apartment" class="apartment-image w-full h-64 object-cover transition duration-300">
249
+ <div class="absolute top-2 left-2 bg-purple-500 text-white px-2 py-1 rounded text-xs font-bold">Studio</div>
250
+ <div class="absolute top-2 right-2 bg-white text-blue-500 px-2 py-1 rounded-full text-xs font-bold">
251
+ <i class="fas fa-expand"></i> 360° Tour
252
+ </div>
253
+ </div>
254
+ <div class="p-6">
255
+ <h3 class="text-xl font-bold mb-2">Compact Business Studio</h3>
256
+ <div class="flex items-center text-gray-600 mb-3">
257
+ <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
258
+ <span>Financial District</span>
259
+ </div>
260
+ <div class="flex items-center mb-4">
261
+ <div class="flex mr-4">
262
+ <i class="fas fa-bed mr-1 text-blue-500"></i>
263
+ <span class="text-sm">Studio</span>
264
+ </div>
265
+ <div class="flex mr-4">
266
+ <i class="fas fa-bath mr-1 text-blue-500"></i>
267
+ <span class="text-sm">1 Bath</span>
268
+ </div>
269
+ <div class="flex">
270
+ <i class="fas fa-ruler-combined mr-1 text-blue-500"></i>
271
+ <span class="text-sm">450 sqft</span>
272
+ </div>
273
+ </div>
274
+ <p class="text-gray-600 mb-4">Efficient studio layout perfect for solo professionals who value location over space.</p>
275
+
276
+ <div class="flex justify-between items-center">
277
+ <div>
278
+ <span class="text-lg font-bold text-blue-500">$110/night</span>
279
+ <span class="text-sm text-gray-600">+ fees</span>
280
+ </div>
281
+ <button class="view-details-btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium transition duration-300"
282
+ data-apartment="business-studio">
283
+ View Details
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="text-center mt-8">
291
+ <a href="#" class="inline-flex items-center text-blue-500 font-medium hover:text-blue-700">
292
+ View all 12 apartments
293
+ <i class="fas fa-chevron-right ml-2"></i>
294
+ </a>
295
+ </div>
296
+ </div>
297
+ </section>
298
+
299
+ <!-- Virtual Tours Section -->
300
+ <section class="py-12 bg-white">
301
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
302
+ <div class="text-center mb-12">
303
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">360° Virtual Tours</h2>
304
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Explore our apartments from the comfort of your office or home.</p>
305
+ </div>
306
+
307
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
308
+ <div>
309
+ <div class="tour-container mb-6 rounded-lg overflow-hidden shadow-lg">
310
+ <!-- This would be replaced with actual 360° tour embed code -->
311
+ <iframe src="https://www.youtube.com/embed/6pxRHBw-k8M" allowfullscreen></iframe>
312
+ </div>
313
+ <h3 class="text-xl font-bold mb-2 text-center">Downtown Executive Suite</h3>
314
+ </div>
315
+ <div>
316
+ <div class="tour-container mb-6 rounded-lg overflow-hidden shadow-lg">
317
+ <!-- This would be replaced with actual 360° tour embed code -->
318
+ <iframe src="https://www.youtube.com/embed/6pxRHBw-k8M" allowfullscreen></iframe>
319
+ </div>
320
+ <h3 class="text-xl font-bold mb-2 text-center">Modern City View Apartment</h3>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="text-center mt-8">
325
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium transition duration-300">
326
+ View All Virtual Tours
327
+ </button>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Features Section -->
333
+ <section id="features" class="py-12 bg-blue-50">
334
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
335
+ <div class="lg:text-center mb-12">
336
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Features</h2>
337
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">Everything You Need for a Productive Stay</p>
338
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">Our apartments are designed with business professionals in mind.</p>
339
+ </div>
340
+
341
+ <div class="mt-10">
342
+ <div class="grid grid-cols-1 gap-y-10 gap-x-8 md:grid-cols-2 lg:grid-cols-3">
343
+ <div class="bg-white p-6 rounded-lg shadow-sm">
344
+ <div class="flex items-center">
345
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
346
+ <i class="fas fa-key text-blue-500 text-xl"></i>
347
+ </div>
348
+ <div class="ml-4">
349
+ <h3 class="text-lg font-medium text-gray-900">Keyless Entry</h3>
350
+ <p class="mt-1 text-gray-500">Secure, contactless check-in with digital key codes.</p>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <div class="bg-white p-6 rounded-lg shadow-sm">
355
+ <div class="flex items-center">
356
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
357
+ <i class="fas fa-desktop text-blue-500 text-xl"></i>
358
+ </div>
359
+ <div class="ml-4">
360
+ <h3 class="text-lg font-medium text-gray-900">Dedicated Workspace</h3>
361
+ <p class="mt-1 text-gray-500">Ergonomic chairs and spacious desks in every unit.</p>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ <div class="bg-white p-6 rounded-lg shadow-sm">
366
+ <div class="flex items-center">
367
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
368
+ <i class="fas fa-print text-blue-500 text-xl"></i>
369
+ </div>
370
+ <div class="ml-4">
371
+ <h3 class="text-lg font-medium text-gray-900">Office Equipment</h3>
372
+ <p class="mt-1 text-gray-500">Printers, scanners, and office supplies available upon request.</p>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ <div class="bg-white p-6 rounded-lg shadow-sm">
377
+ <div class="flex items-center">
378
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
379
+ <i class="fas fa-utensils text-blue-500 text-xl"></i>
380
+ </div>
381
+ <div class="ml-4">
382
+ <h3 class="text-lg font-medium text-gray-900">Fully Equipped Kitchen</h3>
383
+ <p class="mt-1 text-gray-500">Cookware, dishes, and high-end appliances included.</p>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ <div class="bg-white p-6 rounded-lg shadow-sm">
388
+ <div class="flex items-center">
389
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
390
+ <i class="fas fa-tv text-blue-500 text-xl"></i>
391
+ </div>
392
+ <div class="ml-4">
393
+ <h3 class="text-lg font-medium text-gray-900">Smart TVs</h3>
394
+ <p class="mt-1 text-gray-500">Streaming services pre-loaded for your convenience.</p>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ <div class="bg-white p-6 rounded-lg shadow-sm">
399
+ <div class="flex items-center">
400
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
401
+ <i class="fas fa-concierge-bell text-blue-500 text-xl"></i>
402
+ </div>
403
+ <div class="ml-4">
404
+ <h3 class="text-lg font-medium text-gray-900">24/7 Support</h3>
405
+ <p class="mt-1 text-gray-500">Dedicated support team available anytime you need assistance.</p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </section>
413
+
414
+ <!-- Testimonials -->
415
+ <section class="py-12 bg-white">
416
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
417
+ <div class="text-center mb-12">
418
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Clients Say</h2>
419
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Trusted by RBN professionals and corporate partners</p>
420
+ </div>
421
+
422
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
423
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
424
+ <div class="flex items-center mb-4">
425
+ <div class="flex-shrink-0">
426
+ <i class="fas fa-quote-left text-blue-500 text-2xl"></i>
427
+ </div>
428
+ <div class="ml-4">
429
+ <p class="text-gray-600 italic">"Perfect for my month-long business trip. The workspace setup allowed me to be just as productive as in my office back home."</p>
430
+ <div class="mt-4 flex items-center">
431
+ <div class="flex-shrink-0">
432
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client testimonial">
433
+ </div>
434
+ <div class="ml-3">
435
+ <p class="text-sm font-medium text-gray-900">Sarah K.</p>
436
+ <p class="text-sm text-gray-500">RBN Consultant</p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
443
+ <div class="flex items-center mb-4">
444
+ <div class="flex-shrink-0">
445
+ <i class="fas fa-quote-left text-blue-500 text-2xl"></i>
446
+ </div>
447
+ <div class="ml-4">
448
+ <p class="text-gray-600 italic">"The virtual tour helped me choose the perfect apartment before arriving. Exactly as advertised - highly recommend for RBN assignments."</p>
449
+ <div class="mt-4 flex items-center">
450
+ <div class="flex-shrink-0">
451
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client testimonial">
452
+ </div>
453
+ <div class="ml-3">
454
+ <p class="text-sm font-medium text-gray-900">Michael T.</p>
455
+ <p class="text-sm text-gray-500">Project Manager</p>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
462
+ <div class="flex items-center mb-4">
463
+ <div class="flex-shrink-0">
464
+ <i class="fas fa-quote-left text-blue-500 text-2xl"></i>
465
+ </div>
466
+ <div class="ml-4">
467
+ <p class="text-gray-600 italic">"We regularly book 5-6 apartments monthly for our RBN employees. The management is professional and the properties are consistently high quality."</p>
468
+ <div class="mt-4 flex items-center">
469
+ <div class="flex-shrink-0">
470
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client testimonial">
471
+ </div>
472
+ <div class="ml-3">
473
+ <p class="text-sm font-medium text-gray-900">Jennifer L.</p>
474
+ <p class="text-sm text-gray-500">HR Director</p>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </section>
483
+
484
+ <!-- Location Section -->
485
+ <section id="location" class="py-12 bg-gray-50">
486
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
487
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
488
+ <div class="mb-8 lg:mb-0">
489
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Prime Locations</h2>
490
+ <p class="text-gray-600 mb-6 text-lg">Our apartments are strategically located near major business districts, transportation hubs, and amenities.</p>
491
+
492
+ <div class="space-y-4">
493
+ <div class="flex items-start">
494
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
495
+ <i class="fas fa-subway text-blue-500 text-xl"></i>
496
+ </div>
497
+ <div class="ml-4">
498
+ <h3 class="text-lg font-medium text-gray-900">Public Transportation</h3>
499
+ <p class="mt-1 text-gray-600">All locations within 5-10 minute walk to subway/bus stations.</p>
500
+ </div>
501
+ </div>
502
+ <div class="flex items-start">
503
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
504
+ <i class="fas fa-coffee text-blue-500 text-xl"></i>
505
+ </div>
506
+ <div class="ml-4">
507
+ <h3 class="text-lg font-medium text-gray-900">Dining & Shopping</h3>
508
+ <p class="mt-1 text-gray-600">Nearby restaurants, cafes, and grocery stores for your convenience.</p>
509
+ </div>
510
+ </div>
511
+ <div class="flex items-start">
512
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
513
+ <i class="fas fa-briefcase text-blue-500 text-xl"></i>
514
+ </div>
515
+ <div class="ml-4">
516
+ <h3 class="text-lg font-medium text-gray-900">Business Centers</h3>
517
+ <p class="mt-1 text-gray-600">Close to major office buildings and business service providers.</p>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ <div class="rounded-lg overflow-hidden shadow-lg h-96">
523
+ <!-- This would be replaced with an actual Google Maps embed -->
524
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9663095343008!2d-74.00425872453727!3d40.74076987932881!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259bf5c1654f3%3A0xc80f9cfce5383d5d!2sGoogle!5e0!3m2!1sen!2sus!4v1626290387707!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </section>
529
+
530
+ <!-- CTA Section -->
531
+ <section class="py-12 bg-blue-600 text-white">
532
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
533
+ <h2 class="text-3xl font-bold mb-6">Ready for Your Next Business Stay?</h2>
534
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Book your apartment today and experience the perfect blend of comfort and productivity.</p>
535
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
536
+ <a href="#" class="bg-white hover:bg-gray-100 text-blue-600 px-8 py-3 rounded-md text-lg font-medium transition duration-300">
537
+ Check Availability
538
+ </a>
539
+ <a href="#contact" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 rounded-md text-lg font-medium transition duration-300">
540
+ Contact Us
541
+ </a>
542
+ </div>
543
+ </div>
544
+ </section>
545
+
546
+ <!-- Contact Section -->
547
+ <section id="contact" class="py-12 bg-white">
548
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
549
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
550
+ <div class="mb-8 lg:mb-0">
551
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Contact Us</h2>
552
+ <p class="text-gray-600 mb-6 text-lg">Have questions about availability, amenities, or corporate rates? Our team is ready to assist you.</p>
553
+
554
+ <div class="space-y-4">
555
+ <div class="flex items-start">
556
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
557
+ <i class="fas fa-envelope text-blue-500 text-xl"></i>
558
+ </div>
559
+ <div class="ml-4">
560
+ <h3 class="text-lg font-medium text-gray-900">Email</h3>
561
+ <p class="mt-1 text-gray-600">bookings@rbnstays.com</p>
562
+ </div>
563
+ </div>
564
+ <div class="flex items-start">
565
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
566
+ <i class="fas fa-phone-alt text-blue-500 text-xl"></i>
567
+ </div>
568
+ <div class="ml-4">
569
+ <h3 class="text-lg font-medium text-gray-900">Phone</h3>
570
+ <p class="mt-1 text-gray-600">+1 (555) 123-4567</p>
571
+ </div>
572
+ </div>
573
+ <div class="flex items-start">
574
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
575
+ <i class="fas fa-clock text-blue-500 text-xl"></i>
576
+ </div>
577
+ <div class="ml-4">
578
+ <h3 class="text-lg font-medium text-gray-900">Hours</h3>
579
+ <p class="mt-1 text-gray-600">24/7 support for all RBN customers</p>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
585
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Send Us a Message</h3>
586
+ <form>
587
+ <div class="grid grid-cols-1 gap-6">
588
+ <div>
589
+ <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
590
+ <input type="text" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
591
+ </div>
592
+ <div>
593
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
594
+ <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
595
+ </div>
596
+ <div>
597
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone</label>
598
+ <input type="tel" id="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
599
+ </div>
600
+ <div>
601
+ <label for="apartment" class="block text-sm font-medium text-gray-700">Apartment Interest</label>
602
+ <select id="apartment" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
603
+ <option>Not specified</option>
604
+ <option>Downtown Executive Suite</option>
605
+ <option>Modern City View</option>
606
+ <option>Compact Business Studio</option>
607
+ <option>Corporate Housing (multiple units)</option>
608
+ </select>
609
+ </div>
610
+ <div>
611
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
612
+ <textarea id="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
613
+ </div>
614
+ <div>
615
+ <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium transition duration-300">
616
+ Send Message
617
+ </button>
618
+ </div>
619
+ </div>
620
+ </form>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ </section>
625
+
626
+ <!-- Footer -->
627
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
628
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
629
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
630
+ <div>
631
+ <h3 class="text-lg font-bold mb-4">
632
+ <a href="#" class="flex items-center">
633
+ <i class="fas fa-building text-blue-400 text-2xl mr-2"></i>
634
+ <span>RBN Stays</span>
635
+ </a>
636
+ </h3>
637
+ <p class="text-gray-400">Premium accommodations for RBN professionals and corporate clients.</p>
638
+ </div>
639
+ <div>
640
+ <h3 class="text-lg font-bold mb-4">Apartments</h3>
641
+ <ul class="space-y-2">
642
+ <li><a href="#" class="text-gray-400 hover:text-white">All Apartments</a></li>
643
+ <li><a href="#" class="text-gray-400 hover:text-white">Studio</a></li>
644
+ <li><a href="#" class="text-gray-400 hover:text-white">1-Bedroom</a></li>
645
+ <li><a href="#" class="text-gray-400 hover:text-white">2-Bedroom</a></li>
646
+ <li><a href="#" class="text-gray-400 hover:text-white">Executive</a></li>
647
+ </ul>
648
+ </div>
649
+ <div>
650
+ <h3 class="text-lg font-bold mb-4">Company</h3>
651
+ <ul class="space-y-2">
652
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
653
+ <li><a href="#" class="text-gray-400 hover:text-white">Locations</a></li>
654
+ <li><a href="#" class="text-gray-400 hover:text-white">Corporate Housing</a></li>
655
+ <li><a href="#" class="text-gray-400 hover:text-white">Testimonials</a></li>
656
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
657
+ </ul>
658
+ </div>
659
+ <div>
660
+ <h3 class="text-lg font-bold mb-4">Connect</h3>
661
+ <div class="flex space-x-4 mb-4">
662
+ <a href="#" class="text-gray-400 hover:text-white">
663
+ <i class="fab fa-facebook-f text-xl"></i>
664
+ </a>
665
+ <a href="#" class="text-gray-400 hover:text-white">
666
+ <i class="fab fa-twitter text-xl"></i>
667
+ </a>
668
+ <a href="#" class="text-gray-400 hover:text-white">
669
+ <i class="fab fa-instagram text-xl"></i>
670
+ </a>
671
+ <a href="#" class="text-gray-400 hover:text-white">
672
+ <i class="fab fa-linkedin-in text-xl"></i>
673
+ </a>
674
+ </div>
675
+ <p class="text-gray-400">Subscribe to our newsletter for special offers:</p>
676
+ <div class="mt-2 flex">
677
+ <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
678
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-md">
679
+ <i class="fas fa-paper-plane"></i>
680
+ </button>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ <div class="border-t border-gray-700 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
685
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">&copy; 2023 RBN Stays. All rights reserved.</p>
686
+ <div class="flex space-x-6">
687
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
688
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
689
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Sitemap</a>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </footer>
694
+
695
+ <!-- Apartment Detail Modal -->
696
+ <div id="apartment-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
697
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
698
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
699
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
700
+ </div>
701
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
702
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
703
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
704
+ <div class="sm:flex sm:items-start">
705
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
706
+ <div class="flex justify-between items-center mb-4">
707
+ <h3 class="text-2xl font-bold text-gray-900" id="modal-apartment-title">Apartment Title</h3>
708
+ <button type="button" class="close-modal bg-gray-100 hover:bg-gray-200 rounded-full p-2">
709
+ <i class="fas fa-times text-gray-600"></i>
710
+ </button>
711
+ </div>
712
+
713
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
714
+ <div>
715
+ <!-- Image Gallery -->
716
+ <div class="mb-4 rounded-lg overflow-hidden">
717
+ <img id="modal-main-image" src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
718
+ alt="Apartment" class="w-full h-64 object-cover rounded-lg">
719
+ </div>
720
+ <div class="grid grid-cols-3 gap-2">
721
+ <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
722
+ alt="Thumbnail" class="h-24 w-full object-cover rounded cursor-pointer hover:opacity-75 border-2 border-blue-500">
723
+ <img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
724
+ alt="Thumbnail" class="h-24 w-full object-cover rounded cursor-pointer hover:opacity-75">
725
+ <img src="https://images.unsplash.com/photo-1554469384-e58fac16e23a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
726
+ alt="Thumbnail" class="h-24 w-full object-cover rounded cursor-pointer hover:opacity-75">
727
+ </div>
728
+ </div>
729
+ <div>
730
+ <div class="flex items-center text-gray-600 mb-4">
731
+ <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
732
+ <span id="modal-location">Location details</span>
733
+ </div>
734
+
735
+ <div class="mb-4">
736
+ <div class="flex items-center mb-2">
737
+ <div class="flex mr-6">
738
+ <i class="fas fa-bed mr-2 text-blue-500"></i>
739
+ <span class="text-sm" id="modal-beds">1 Bed</span>
740
+ </div>
741
+ <div class="flex mr-6">
742
+ <i class="fas fa-bath mr-2 text-blue-500"></i>
743
+ <span class="text-sm" id="modal-baths">1 Bath</span>
744
+ </div>
745
+ <div class="flex">
746
+ <i class="fas fa-ruler-combined mr-2 text-blue-500"></i>
747
+ <span class="text-sm" id="modal-size">650 sqft</span>
748
+ </div>
749
+ </div>
750
+ </div>
751
+
752
+ <div class="mb-4">
753
+ <h4 class="font-bold text-lg mb-2">Description</h4>
754
+ <p class="text-gray-600" id="modal-description">
755
+ Spacious executive apartment with panoramic city views, premium furnishings, and dedicated workspace.
756
+ Perfect for business professionals who appreciate comfort and style.
757
+ </p>
758
+ </div>
759
+
760
+ <div class="mb-6">
761
+ <h4 class="font-bold text-lg mb-2">Amenities</h4>
762
+ <div class="grid grid-cols-2 gap-2">
763
+ <div class="flex items-center">
764
+ <i class="fas fa-wifi text-blue-500 mr-2"></i>
765
+ <span class="text-sm">High-Speed WiFi</span>
766
+ </div>
767
+ <div class="flex items-center">
768
+ <i class="fas fa-utensils text-blue-500 mr-2"></i>
769
+ <span class="text-sm">Fully Equipped Kitchen</span>
770
+ </div>
771
+ <div class="flex items-center">
772
+ <i class="fas fa-tv text-blue-500 mr-2"></i>
773
+ <span class="text-sm">Smart TV</span>
774
+ </div>
775
+ <div class="flex items-center">
776
+ <i class="fas fa-parking text-blue-500 mr-2"></i>
777
+ <span class="text-sm">Parking Available</span>
778
+ </div>
779
+ <div class="flex items-center">
780
+ <i class="fas fa-snowflake text-blue-500 mr-2"></i>
781
+ <span class="text-sm">Air Conditioning</span>
782
+ </div>
783
+ <div class="flex items-center">
784
+ <i class="fas fa-lock text-blue-500 mr-2"></i>
785
+ <span class="text-sm">Secure Entry</span>
786
+ </div>
787
+ </div>
788
+ </div>
789
+
790
+ <div class="flex justify-between items-center bg-blue-50 p-4 rounded-lg">
791
+ <div>
792
+ <span class="text-xl font-bold text-blue-500" id="modal-price">$175</span>
793
+ <span class="text-sm text-gray-600">/ night + fees</span>
794
+ </div>
795
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium transition duration-300">
796
+ Check Availability
797
+ </button>
798
+ </div>
799
+ </div>
800
+ </div>
801
+
802
+ <!-- Virtual Tour Section -->
803
+ <div class="mt-8">
804
+ <h4 class="font-bold text-lg mb-4">360° Virtual Tour</h4>
805
+ <div class="tour-container rounded-lg overflow-hidden shadow-lg">
806
+ <iframe src="https://www.youtube.com/embed/6pxRHBw-k8M" allowfullscreen></iframe>
807
+ </div>
808
+ </div>
809
+
810
+ <!-- Floor Plan Section -->
811
+ <div class="mt-8">
812
+ <h4 class="font-bold text-lg mb-4">Floor Plan</h4>
813
+ <img src="https://images.unsplash.com/photo-1554469384-e58fac16e23a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
814
+ alt="Floor Plan" class="w-full rounded-lg border border-gray-200">
815
+ </div>
816
+ </div>
817
+ </div>
818
+ </div>
819
+ </div>
820
+ </div>
821
+ </div>
822
+
823
+ <script>
824
+ // Mobile menu toggle
825
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
826
+ const menu = document.getElementById('mobile-menu');
827
+ menu.classList.toggle('hidden');
828
+ });
829
+
830
+ // Close modal
831
+ document.querySelectorAll('.close-modal, .modal-overlay').forEach(el => {
832
+ el.addEventListener('click', function() {
833
+ document.getElementById('apartment-modal').classList.add('hidden');
834
+ });
835
+ });
836
+
837
+ // View apartment details buttons
838
+ const viewDetailsButtons = document.querySelectorAll('.view-details-btn');
839
+ viewDetailsButtons.forEach(button => {
840
+ button.addEventListener('click', function() {
841
+ const apartment = this.getAttribute('data-apartment');
842
+
843
+ // In a real implementation, you would fetch the apartment details from a database
844
+ // Here we're just showing the modal with some dummy data
845
+ const modal = document.getElementById('apartment-modal');
846
+ modal.classList.remove('hidden');
847
+
848
+ // Prevent scrolling when modal is open
849
+ document.body.style.overflow = 'hidden';
850
+ });
851
+ });
852
+
853
+ // Prevent scrolling when modal is open
854
+ document.getElementById('apartment-modal').addEventListener('click', function(e) {
855
+ if (e.target === this) {
856
+ document.body.style.overflow = 'auto';
857
+ }
858
+ });
859
+
860
+ // Image click in modal gallery
861
+ const thumbnails = document.querySelectorAll('#apartment-modal .grid.grid-cols-3 img');
862
+ const mainImage = document.getElementById('modal-main-image');
863
+
864
+ thumbnails.forEach(img => {
865
+ img.addEventListener('click', function() {
866
+ const src = this.getAttribute('src');
867
+ mainImage.setAttribute('src', src);
868
+
869
+ // Update active thumbnail
870
+ thumbnails.forEach(t => t.classList.remove('border-2', 'border-blue-500'));
871
+ this.classList.add('border-2', 'border-blue-500');
872
+ });
873
+ });
874
+
875
+ // Filter apartments
876
+ const filterButtons = document.querySelectorAll('.filter-btn');
877
+ const apartmentCards = document.querySelectorAll('.apartment-card');
878
+
879
+ filterButtons.forEach(button => {
880
+ button.addEventListener('click', function() {
881
+ const filter = this.getAttribute('data-filter');
882
+
883
+ // Update active filter button
884
+ filterButtons.forEach(btn => {
885
+ btn.classList.remove('active-filter');
886
+ btn.classList.add('border', 'border-gray-300', 'hover:bg-blue-50');
887
+ });
888
+
889
+ this.classList.add('active-filter');
890
+ this.classList.remove('border', 'border-gray-300', 'hover:bg-blue-50');
891
+
892
+ // Filter apartments
893
+ apartmentCards.forEach(card => {
894
+ if (filter === 'all' || card.getAttribute('data-category') === filter) {
895
+ card.style.display = 'block';
896
+ } else {
897
+ card.style.display = 'none';
898
+ }
899
+ });
900
+ });
901
+ });
902
+
903
+ // Smooth scrolling for navigation links
904
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
905
+ anchor.addEventListener('click', function(e) {
906
+ e.preventDefault();
907
+
908
+ const targetId = this.getAttribute('href');
909
+ const targetElement = document.querySelector(targetId);
910
+
911
+ if (targetElement) {
912
+ window.scrollTo({
913
+ top: targetElement.offsetTop - 80,
914
+ behavior: 'smooth'
915
+ });
916
+ }
917
+ });
918
+ });
919
+
920
+ // In a real implementation, you would have:
921
+ // 1. API calls to fetch apartment data
922
+ // 2. Dynamic rendering of apartment cards based on fetched data
923
+ // 3. Proper 360° tour integration (Matterport or similar)
924
+ // 4. Booking system integration
925
+ // 5. Admin backend for apartment management
926
+ </script>
927
+ <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=0xLaszlo/vr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
928
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ch habe mehrere Apartments, die ich regelmäßig an RBN-Kunden vermiete. Ich möchte eine moderne, ansprechende Website, auf der meine Apartments professionell präsentiert werden. Wichtige Anforderungen: Präsentation aller Apartments mit Fotos, Grundrissen und ausführlichen Beschreibungen Integration von hochwertigen 360-Grad-Rundgängen für jedes Apartment Moderne, schnelle und responsive Website (z.B. mit React, Next.js oder vergleichbarer Technologie) Einfache Möglichkeit, neue Apartments und Rundgänge selbst einzupflegen Optional: Buchungsanfrage- oder Kontaktformular, Kalender für Verfügbarkeiten Die Seite soll auf allen Geräten (Desktop, Tablet, Smartphone) optimal funktionieren Suchmaschinenoptimierung (SEO) für relevante Keywords im RBN-Bereich Zielgruppe: Vor allem Kunden aus dem RBN-Bereich, die Wert auf Qualität und eine unkomplizierte Buchung legen. Bitte machen Sie mir Vorschläge für das Design und die technische Umsetzung! English: I have several apartments for rent, mainly for RBN customers. I need a modern website to professionally showcase all apartments, with high-quality 360-degree walkthroughs for each unit. Requirements: Modern, fast, and responsive website (React, Next.js, etc.) Easy upload of new apartments and 360 tours Apartment details: photos, floor plans, descriptions Booking inquiry/contact form and availability calendar Mobile-friendly and SEO optimized Target group: Mainly RBN customers who value quality and a straightforward booking process. Please suggest a design and the best technical solution!