Hugging Face's logo

Spaces:
LukasBe
/
dc-template
Running

App Files Community
LukasBe commited on
Commit
a8e36f7
·
verified ·
1 Parent(s): 3b5b5ec

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +929 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dc Template
3
- emoji: 🐨
4
- colorFrom: pink
5
- colorTo: blue
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: dc-template
3
+ emoji: 🐳
4
+ colorFrom: gray
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,929 @@
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>DesignCraft | Custom Kitchen & Bathroom Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .design-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .configurator-container {
18
+ height: 500px;
19
+ background-color: #f0f4f8;
20
+ border-radius: 1rem;
21
+ position: relative;
22
+ overflow: hidden;
23
+ }
24
+ .progress-step {
25
+ width: 2.5rem;
26
+ height: 2.5rem;
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ border-radius: 9999px;
31
+ font-weight: 600;
32
+ }
33
+ .progress-step.active {
34
+ background-color: #3b82f6;
35
+ color: white;
36
+ }
37
+ .progress-step.completed {
38
+ background-color: #10b981;
39
+ color: white;
40
+ }
41
+ .progress-line {
42
+ height: 0.25rem;
43
+ flex: 1;
44
+ background-color: #e5e7eb;
45
+ }
46
+ .progress-line.active {
47
+ background-color: #3b82f6;
48
+ }
49
+ .progress-line.completed {
50
+ background-color: #10b981;
51
+ }
52
+ .chat-bubble {
53
+ max-width: 70%;
54
+ border-radius: 1rem;
55
+ padding: 1rem;
56
+ margin-bottom: 0.5rem;
57
+ }
58
+ .user-bubble {
59
+ background-color: #3b82f6;
60
+ color: white;
61
+ margin-left: auto;
62
+ border-bottom-right-radius: 0.25rem;
63
+ }
64
+ .designer-bubble {
65
+ background-color: #e5e7eb;
66
+ margin-right: auto;
67
+ border-bottom-left-radius: 0.25rem;
68
+ }
69
+ .tooltip {
70
+ position: relative;
71
+ display: inline-block;
72
+ }
73
+ .tooltip .tooltip-text {
74
+ visibility: hidden;
75
+ width: 200px;
76
+ background-color: #333;
77
+ color: #fff;
78
+ text-align: center;
79
+ border-radius: 6px;
80
+ padding: 5px;
81
+ position: absolute;
82
+ z-index: 1;
83
+ bottom: 125%;
84
+ left: 50%;
85
+ transform: translateX(-50%);
86
+ opacity: 0;
87
+ transition: opacity 0.3s;
88
+ }
89
+ .tooltip:hover .tooltip-text {
90
+ visibility: visible;
91
+ opacity: 1;
92
+ }
93
+ @keyframes pulse {
94
+ 0%, 100% {
95
+ opacity: 1;
96
+ }
97
+ 50% {
98
+ opacity: 0.5;
99
+ }
100
+ }
101
+ .animate-pulse {
102
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
103
+ }
104
+ </style>
105
+ </head>
106
+ <body class="font-sans antialiased text-gray-800">
107
+ <!-- Navigation -->
108
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
109
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
110
+ <div class="flex justify-between h-16">
111
+ <div class="flex items-center">
112
+ <div class="flex-shrink-0 flex items-center">
113
+ <i class="fas fa-ruler-combined text-blue-500 text-2xl mr-2"></i>
114
+ <span class="text-xl font-bold text-gray-900">DesignCraft</span>
115
+ </div>
116
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
117
+ <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
118
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Kitchens</a>
119
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Bathrooms</a>
120
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Designers</a>
121
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
122
+ </div>
123
+ </div>
124
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
125
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Start Your Project</button>
126
+ </div>
127
+ <div class="-mr-2 flex items-center sm:hidden">
128
+ <button type="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" aria-controls="mobile-menu" aria-expanded="false">
129
+ <span class="sr-only">Open main menu</span>
130
+ <i class="fas fa-bars"></i>
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Mobile menu -->
137
+ <div class="sm:hidden hidden" id="mobile-menu">
138
+ <div class="pt-2 pb-3 space-y-1">
139
+ <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
140
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Kitchens</a>
141
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Bathrooms</a>
142
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Designers</a>
143
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
144
+ <div class="mt-4 pl-3 pr-4">
145
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Start Your Project</button>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </nav>
150
+
151
+ <!-- Hero Section -->
152
+ <div class="gradient-bg">
153
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
154
+ <div class="text-center">
155
+ <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
156
+ <span class="block">Design Your Dream</span>
157
+ <span class="block text-blue-600">Kitchen or Bathroom</span>
158
+ </h1>
159
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
160
+ Collaborate with expert designers, visualize in 3D, and bring your vision to life with our seamless design-to-production platform.
161
+ </p>
162
+ <div class="mt-8 flex justify-center">
163
+ <div class="inline-flex rounded-md shadow">
164
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
165
+ Get Started
166
+ <i class="fas fa-arrow-right ml-2"></i>
167
+ </a>
168
+ </div>
169
+ <div class="ml-3 inline-flex">
170
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200">
171
+ <i class="fas fa-play-circle mr-2"></i>
172
+ Watch Demo
173
+ </a>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- How It Works Section -->
181
+ <div class="py-12 bg-white">
182
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
183
+ <div class="lg:text-center">
184
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Process</h2>
185
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
186
+ From Concept to Completion
187
+ </p>
188
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
189
+ Our streamlined process makes custom design accessible to everyone.
190
+ </p>
191
+ </div>
192
+
193
+ <div class="mt-20">
194
+ <div class="flex items-center justify-between mb-8">
195
+ <div class="flex items-center">
196
+ <div class="progress-step active">1</div>
197
+ <div class="ml-4">
198
+ <h3 class="text-lg font-medium text-gray-900">Discovery & Planning</h3>
199
+ <p class="mt-1 text-gray-500">Tell us about your space and style preferences.</p>
200
+ </div>
201
+ </div>
202
+ <div class="progress-line active"></div>
203
+
204
+ <div class="flex items-center">
205
+ <div class="progress-step">2</div>
206
+ <div class="ml-4">
207
+ <h3 class="text-lg font-medium text-gray-900">Design Collaboration</h3>
208
+ <p class="mt-1 text-gray-500">Work with our experts to refine your vision.</p>
209
+ </div>
210
+ </div>
211
+ <div class="progress-line"></div>
212
+
213
+ <div class="flex items-center">
214
+ <div class="progress-step">3</div>
215
+ <div class="ml-4">
216
+ <h3 class="text-lg font-medium text-gray-900">Final Approval</h3>
217
+ <p class="mt-1 text-gray-500">Review and approve your custom design.</p>
218
+ </div>
219
+ </div>
220
+ <div class="progress-line"></div>
221
+
222
+ <div class="flex items-center">
223
+ <div class="progress-step">4</div>
224
+ <div class="ml-4">
225
+ <h3 class="text-lg font-medium text-gray-900">Production & Installation</h3>
226
+ <p class="mt-1 text-gray-500">We build and install your dream space.</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Design Configurator Section -->
235
+ <div class="py-12 bg-gray-50">
236
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
237
+ <div class="lg:text-center mb-12">
238
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Try It Now</h2>
239
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
240
+ Interactive Design Configurator
241
+ </p>
242
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
243
+ Start designing your perfect kitchen or bathroom with our easy-to-use tools.
244
+ </p>
245
+ </div>
246
+
247
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
248
+ <div class="lg:col-span-2">
249
+ <div class="configurator-container flex items-center justify-center">
250
+ <div class="text-center p-8">
251
+ <i class="fas fa-cube text-5xl text-gray-400 mb-4"></i>
252
+ <h3 class="text-xl font-medium text-gray-700">3D Design Preview</h3>
253
+ <p class="mt-2 text-gray-500">Your interactive design will appear here as you make selections.</p>
254
+ <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
255
+ Start Designing
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div>
261
+ <div class="bg-white p-6 rounded-lg shadow-sm h-full">
262
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Design Options</h3>
263
+
264
+ <div class="space-y-4">
265
+ <div>
266
+ <label class="block text-sm font-medium text-gray-700 mb-1">Room Type</label>
267
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
268
+ <option>Kitchen</option>
269
+ <option>Bathroom</option>
270
+ <option>Laundry Room</option>
271
+ <option>Walk-in Closet</option>
272
+ </select>
273
+ </div>
274
+
275
+ <div>
276
+ <label class="block text-sm font-medium text-gray-700 mb-1">Style</label>
277
+ <div class="grid grid-cols-3 gap-2">
278
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
279
+ <i class="fas fa-home text-gray-600"></i>
280
+ <span class="block text-xs mt-1">Modern</span>
281
+ </button>
282
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
283
+ <i class="fas fa-archway text-gray-600"></i>
284
+ <span class="block text-xs mt-1">Traditional</span>
285
+ </button>
286
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
287
+ <i class="fas fa-industry text-gray-600"></i>
288
+ <span class="block text-xs mt-1">Industrial</span>
289
+ </button>
290
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
291
+ <i class="fas fa-leaf text-gray-600"></i>
292
+ <span class="block text-xs mt-1">Scandinavian</span>
293
+ </button>
294
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
295
+ <i class="fas fa-umbrella-beach text-gray-600"></i>
296
+ <span class="block text-xs mt-1">Coastal</span>
297
+ </button>
298
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
299
+ <i class="fas fa-paint-roller text-gray-600"></i>
300
+ <span class="block text-xs mt-1">Custom</span>
301
+ </button>
302
+ </div>
303
+ </div>
304
+
305
+ <div>
306
+ <label class="block text-sm font-medium text-gray-700 mb-1">Color Scheme</label>
307
+ <div class="flex space-x-2">
308
+ <div class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
309
+ <div class="w-8 h-8 rounded-full bg-gray-800 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
310
+ <div class="w-8 h-8 rounded-full bg-white border-2 border-gray-200 shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
311
+ <div class="w-8 h-8 rounded-full bg-blue-500 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
312
+ <div class="w-8 h-8 rounded-full bg-green-500 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
313
+ <div class="w-8 h-8 rounded-full bg-yellow-500 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
314
+ </div>
315
+ </div>
316
+
317
+ <div>
318
+ <label class="block text-sm font-medium text-gray-700 mb-1">Upload Your Floor Plan (Optional)</label>
319
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
320
+ <div class="space-y-1 text-center">
321
+ <div class="flex text-sm text-gray-600">
322
+ <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
323
+ <span>Upload a file</span>
324
+ <input type="file" class="sr-only">
325
+ </label>
326
+ <p class="pl-1">or drag and drop</p>
327
+ </div>
328
+ <p class="text-xs text-gray-500">PNG, JPG, PDF up to 10MB</p>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Design Collaboration Demo -->
340
+ <div class="py-12 bg-white">
341
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
342
+ <div class="lg:text-center mb-12">
343
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Collaboration</h2>
344
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
345
+ Work With Expert Designers
346
+ </p>
347
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
348
+ Our platform connects you with professionals who will help refine your vision.
349
+ </p>
350
+ </div>
351
+
352
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
353
+ <div>
354
+ <div class="bg-gray-50 p-6 rounded-lg h-full">
355
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Designer Collaboration Tools</h3>
356
+
357
+ <div class="space-y-6">
358
+ <div>
359
+ <div class="flex items-start">
360
+ <div class="flex-shrink-0">
361
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white">
362
+ <i class="fas fa-comments"></i>
363
+ </div>
364
+ </div>
365
+ <div class="ml-4">
366
+ <h4 class="text-sm font-medium text-gray-900">Real-time Messaging</h4>
367
+ <p class="mt-1 text-sm text-gray-500">Chat directly with your designer to discuss ideas and changes.</p>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <div>
373
+ <div class="flex items-start">
374
+ <div class="flex-shrink-0">
375
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-green-500 text-white">
376
+ <i class="fas fa-drafting-compass"></i>
377
+ </div>
378
+ </div>
379
+ <div class="ml-4">
380
+ <h4 class="text-sm font-medium text-gray-900">Design Annotations</h4>
381
+ <p class="mt-1 text-sm text-gray-500">Mark up designs with notes and sketches for precise feedback.</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <div>
387
+ <div class="flex items-start">
388
+ <div class="flex-shrink-0">
389
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-purple-500 text-white">
390
+ <i class="fas fa-history"></i>
391
+ </div>
392
+ </div>
393
+ <div class="ml-4">
394
+ <h4 class="text-sm font-medium text-gray-900">Version History</h4>
395
+ <p class="mt-1 text-sm text-gray-500">Track all changes and revert to previous versions if needed.</p>
396
+ </div>
397
+ </div>
398
+ </div>
399
+
400
+ <div>
401
+ <div class="flex items-start">
402
+ <div class="flex-shrink-0">
403
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-yellow-500 text-white">
404
+ <i class="fas fa-file-invoice-dollar"></i>
405
+ </div>
406
+ </div>
407
+ <div class="ml-4">
408
+ <h4 class="text-sm font-medium text-gray-900">Instant Quotes</h4>
409
+ <p class="mt-1 text-sm text-gray-500">Get real-time pricing updates as you make design changes.</p>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <div>
418
+ <div class="border rounded-lg overflow-hidden h-full">
419
+ <div class="bg-gray-800 text-white px-4 py-3 flex items-center">
420
+ <div class="flex-shrink-0 h-3 w-3 rounded-full bg-red-500 mr-2"></div>
421
+ <div class="flex-shrink-0 h-3 w-3 rounded-full bg-yellow-500 mr-2"></div>
422
+ <div class="flex-shrink-0 h-3 w-3 rounded-full bg-green-500 mr-2"></div>
423
+ <div class="ml-2 text-sm font-medium">Design Collaboration</div>
424
+ </div>
425
+ <div class="bg-white p-4 h-96 overflow-y-auto">
426
+ <div class="space-y-4">
427
+ <div class="chat-bubble designer-bubble">
428
+ <div class="flex items-start">
429
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
430
+ <i class="fas fa-user-tie text-gray-600"></i>
431
+ </div>
432
+ <div class="ml-3">
433
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
434
+ <div class="mt-1 text-sm text-gray-700">
435
+ <p>Hi there! I'm your assigned designer. I've reviewed your initial kitchen layout and have some suggestions to optimize the workflow.</p>
436
+ </div>
437
+ <div class="mt-1 text-xs text-gray-500">10:24 AM</div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="chat-bubble user-bubble">
443
+ <div class="flex items-start">
444
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
445
+ <i class="fas fa-user"></i>
446
+ </div>
447
+ <div class="ml-3">
448
+ <div class="text-sm font-medium text-white">You</div>
449
+ <div class="mt-1 text-sm text-white">
450
+ <p>Hi Sarah! Thanks for looking at my design. What changes would you recommend?</p>
451
+ </div>
452
+ <div class="mt-1 text-xs text-blue-100">10:26 AM</div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="chat-bubble designer-bubble">
458
+ <div class="flex items-start">
459
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
460
+ <i class="fas fa-user-tie text-gray-600"></i>
461
+ </div>
462
+ <div class="ml-3">
463
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
464
+ <div class="mt-1 text-sm text-gray-700">
465
+ <p>I've marked up your design with some suggestions. The main changes are:</p>
466
+ <ul class="list-disc pl-5 mt-2">
467
+ <li>Moving the refrigerator closer to the prep area</li>
468
+ <li>Adding more counter space near the stove</li>
469
+ <li>Suggesting a different cabinet configuration for better storage</li>
470
+ </ul>
471
+ <div class="mt-2 p-2 bg-gray-100 rounded">
472
+ <div class="flex items-center">
473
+ <i class="fas fa-paperclip text-gray-500 mr-2"></i>
474
+ <span class="text-sm font-medium text-blue-600 hover:text-blue-500 cursor-pointer">Revised_Kitchen_Design_v2.pdf</span>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ <div class="mt-1 text-xs text-gray-500">10:28 AM</div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="chat-bubble designer-bubble">
484
+ <div class="flex items-start">
485
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
486
+ <i class="fas fa-user-tie text-gray-600"></i>
487
+ </div>
488
+ <div class="ml-3">
489
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
490
+ <div class="mt-1 text-sm text-gray-700">
491
+ <p>I've also updated the 3D model so you can visualize these changes. Click the link below to view it:</p>
492
+ <button class="mt-2 inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700">
493
+ View 3D Model
494
+ </button>
495
+ </div>
496
+ <div class="mt-1 text-xs text-gray-500">10:29 AM</div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ <div class="bg-gray-50 px-4 py-3 border-t">
503
+ <div class="flex">
504
+ <input type="text" placeholder="Type your message..." class="flex-1 border rounded-l-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
505
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-md">
506
+ <i class="fas fa-paper-plane"></i>
507
+ </button>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+
516
+ <!-- Production & Fulfillment -->
517
+ <div class="py-12 bg-gray-50">
518
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
519
+ <div class="lg:text-center mb-12">
520
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Manufacturing</h2>
521
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
522
+ Seamless Production Process
523
+ </p>
524
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
525
+ From approved design to installation, we handle everything with precision.
526
+ </p>
527
+ </div>
528
+
529
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
530
+ <div class="bg-white p-6 rounded-lg shadow-sm">
531
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
532
+ <i class="fas fa-file-signature"></i>
533
+ </div>
534
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Design Approval</h3>
535
+ <p class="text-gray-500">Your final design is converted into production-ready specifications with detailed measurements and material requirements.</p>
536
+ </div>
537
+
538
+ <div class="bg-white p-6 rounded-lg shadow-sm">
539
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mb-4">
540
+ <i class="fas fa-cogs"></i>
541
+ </div>
542
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Precision Manufacturing</h3>
543
+ <p class="text-gray-500">Our state-of-the-art facilities use CNC machines and skilled craftsmen to build your custom components.</p>
544
+ </div>
545
+
546
+ <div class="bg-white p-6 rounded-lg shadow-sm">
547
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white mb-4">
548
+ <i class="fas fa-truck"></i>
549
+ </div>
550
+ <h3 class="text-lg font-medium text-gray-900 mb-2">White Glove Delivery</h3>
551
+ <p class="text-gray-500">All components are carefully packaged and delivered to your home with protective coverings for your existing spaces.</p>
552
+ </div>
553
+
554
+ <div class="bg-white p-6 rounded-lg shadow-sm">
555
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white mb-4">
556
+ <i class="fas fa-tools"></i>
557
+ </div>
558
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Professional Installation</h3>
559
+ <p class="text-gray-500">Our certified installers ensure perfect placement and finishing touches for a flawless result.</p>
560
+ </div>
561
+ </div>
562
+
563
+ <div class="mt-12 bg-white rounded-lg shadow-sm overflow-hidden">
564
+ <div class="grid grid-cols-1 lg:grid-cols-2">
565
+ <div class="p-8">
566
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Project Tracking Dashboard</h3>
567
+ <p class="text-gray-500 mb-6">Monitor every stage of your project's journey from design to installation with real-time updates.</p>
568
+
569
+ <div class="space-y-4">
570
+ <div>
571
+ <div class="flex justify-between mb-1">
572
+ <span class="text-sm font-medium text-gray-700">Design Phase</span>
573
+ <span class="text-sm text-gray-500">Completed</span>
574
+ </div>
575
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
576
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
577
+ </div>
578
+ </div>
579
+
580
+ <div>
581
+ <div class="flex justify-between mb-1">
582
+ <span class="text-sm font-medium text-gray-700">Material Procurement</span>
583
+ <span class="text-sm text-gray-500">In Progress</span>
584
+ </div>
585
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
586
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 75%"></div>
587
+ </div>
588
+ </div>
589
+
590
+ <div>
591
+ <div class="flex justify-between mb-1">
592
+ <span class="text-sm font-medium text-gray-700">Manufacturing</span>
593
+ <span class="text-sm text-gray-500">Scheduled</span>
594
+ </div>
595
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
596
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 10%"></div>
597
+ </div>
598
+ </div>
599
+
600
+ <div>
601
+ <div class="flex justify-between mb-1">
602
+ <span class="text-sm font-medium text-gray-700">Installation</span>
603
+ <span class="text-sm text-gray-500">Pending</span>
604
+ </div>
605
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
606
+ <div class="bg-gray-300 h-2.5 rounded-full" style="width: 0%"></div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="mt-6">
612
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
613
+ View Full Project Details
614
+ </button>
615
+ </div>
616
+ </div>
617
+ <div class="bg-gray-50 p-8 flex items-center justify-center">
618
+ <div class="text-center">
619
+ <i class="fas fa-mobile-alt text-5xl text-gray-400 mb-4"></i>
620
+ <h4 class="text-lg font-medium text-gray-900">Mobile Friendly</h4>
621
+ <p class="mt-2 text-gray-500">Track your project on the go with our mobile-optimized dashboard.</p>
622
+ <div class="mt-4 flex justify-center space-x-3">
623
+ <button class="flex items-center px-3 py-1 bg-gray-800 text-white rounded-md text-sm">
624
+ <i class="fab fa-apple mr-1"></i> App Store
625
+ </button>
626
+ <button class="flex items-center px-3 py-1 bg-green-600 text-white rounded-md text-sm">
627
+ <i class="fab fa-google-play mr-1"></i> Play Store
628
+ </button>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <!-- Testimonials -->
638
+ <div class="py-12 bg-white">
639
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
640
+ <div class="lg:text-center mb-12">
641
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2>
642
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
643
+ What Our Customers Say
644
+ </p>
645
+ </div>
646
+
647
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
648
+ <div class="bg-gray-50 p-6 rounded-lg">
649
+ <div class="flex items-center mb-4">
650
+ <div class="flex-shrink-0">
651
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
652
+ </div>
653
+ <div class="ml-3">
654
+ <p class="text-sm font-medium text-gray-900">Emily Johnson</p>
655
+ <div class="flex space-x-1">
656
+ <i class="fas fa-star text-yellow-400"></i>
657
+ <i class="fas fa-star text-yellow-400"></i>
658
+ <i class="fas fa-star text-yellow-400"></i>
659
+ <i class="fas fa-star text-yellow-400"></i>
660
+ <i class="fas fa-star text-yellow-400"></i>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ <p class="text-gray-600 italic">"The design process was so intuitive and working with the designer was a pleasure. Our kitchen turned out even better than we imagined!"</p>
665
+ </div>
666
+
667
+ <div class="bg-gray-50 p-6 rounded-lg">
668
+ <div class="flex items-center mb-4">
669
+ <div class="flex-shrink-0">
670
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
671
+ </div>
672
+ <div class="ml-3">
673
+ <p class="text-sm font-medium text-gray-900">Michael Rodriguez</p>
674
+ <div class="flex space-x-1">
675
+ <i class="fas fa-star text-yellow-400"></i>
676
+ <i class="fas fa-star text-yellow-400"></i>
677
+ <i class="fas fa-star text-yellow-400"></i>
678
+ <i class="fas fa-star text-yellow-400"></i>
679
+ <i class="fas fa-star text-yellow-400"></i>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ <p class="text-gray-600 italic">"As a contractor, I use DesignCraft for all my client projects. The seamless design-to-production workflow saves me time and my clients love the results."</p>
684
+ </div>
685
+
686
+ <div class="bg-gray-50 p-6 rounded-lg">
687
+ <div class="flex items-center mb-4">
688
+ <div class="flex-shrink-0">
689
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
690
+ </div>
691
+ <div class="ml-3">
692
+ <p class="text-sm font-medium text-gray-900">David Thompson</p>
693
+ <div class="flex space-x-1">
694
+ <i class="fas fa-star text-yellow-400"></i>
695
+ <i class="fas fa-star text-yellow-400"></i>
696
+ <i class="fas fa-star text-yellow-400"></i>
697
+ <i class="fas fa-star text-yellow-400"></i>
698
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ <p class="text-gray-600 italic">"The 3D visualization helped us make decisions with confidence. The installation team was professional and meticulous."</p>
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <!-- CTA Section -->
709
+ <div class="bg-blue-700">
710
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
711
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
712
+ <div>
713
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
714
+ Ready to create your dream space?
715
+ </h2>
716
+ <p class="mt-3 max-w-3xl text-lg leading-6 text-blue-200">
717
+ Start your design journey today with our easy-to-use platform and expert guidance.
718
+ </p>
719
+ </div>
720
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0 justify-end">
721
+ <div class="inline-flex rounded-md shadow">
722
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50">
723
+ Begin Designing
724
+ <i class="fas fa-arrow-right ml-2"></i>
725
+ </a>
726
+ </div>
727
+ <div class="ml-3 inline-flex">
728
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-700">
729
+ <i class="fas fa-phone-alt mr-2"></i>
730
+ Speak to a Designer
731
+ </a>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+
738
+ <!-- Footer -->
739
+ <footer class="bg-gray-800">
740
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
741
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
742
+ <div>
743
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Products</h3>
744
+ <ul class="mt-4 space-y-4">
745
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Kitchens</a></li>
746
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Bathrooms</a></li>
747
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Closets</a></li>
748
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Laundry Rooms</a></li>
749
+ </ul>
750
+ </div>
751
+ <div>
752
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Services</h3>
753
+ <ul class="mt-4 space-y-4">
754
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Design Services</a></li>
755
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Installation</a></li>
756
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Renovation Planning</a></li>
757
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Maintenance</a></li>
758
+ </ul>
759
+ </div>
760
+ <div>
761
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3>
762
+ <ul class="mt-4 space-y-4">
763
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">About</a></li>
764
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li>
765
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li>
766
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Partners</a></li>
767
+ </ul>
768
+ </div>
769
+ <div>
770
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3>
771
+ <ul class="mt-4 space-y-4">
772
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a></li>
773
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li>
774
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a></li>
775
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact</a></li>
776
+ </ul>
777
+ </div>
778
+ </div>
779
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
780
+ <div class="flex space-x-6 md:order-2">
781
+ <a href="#" class="text-gray-400 hover:text-gray-300">
782
+ <span class="sr-only">Facebook</span>
783
+ <i class="fab fa-facebook-f"></i>
784
+ </a>
785
+ <a href="#" class="text-gray-400 hover:text-gray-300">
786
+ <span class="sr-only">Instagram</span>
787
+ <i class="fab fa-instagram"></i>
788
+ </a>
789
+ <a href="#" class="text-gray-400 hover:text-gray-300">
790
+ <span class="sr-only">Twitter</span>
791
+ <i class="fab fa-twitter"></i>
792
+ </a>
793
+ <a href="#" class="text-gray-400 hover:text-gray-300">
794
+ <span class="sr-only">YouTube</span>
795
+ <i class="fab fa-youtube"></i>
796
+ </a>
797
+ <a href="#" class="text-gray-400 hover:text-gray-300">
798
+ <span class="sr-only">Pinterest</span>
799
+ <i class="fab fa-pinterest"></i>
800
+ </a>
801
+ </div>
802
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
803
+ &copy; 2023 DesignCraft. All rights reserved.
804
+ </p>
805
+ </div>
806
+ </div>
807
+ </footer>
808
+
809
+ <script>
810
+ // Mobile menu toggle
811
+ document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
812
+ const menu = document.getElementById('mobile-menu');
813
+ menu.classList.toggle('hidden');
814
+ });
815
+
816
+ // Simple animation for design cards
817
+ const designCards = document.querySelectorAll('.design-card');
818
+ designCards.forEach(card => {
819
+ card.addEventListener('mouseenter', function() {
820
+ this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
821
+ });
822
+ });
823
+
824
+ // Tooltip functionality
825
+ const tooltips = document.querySelectorAll('.tooltip');
826
+ tooltips.forEach(tooltip => {
827
+ tooltip.addEventListener('mouseenter', function() {
828
+ this.querySelector('.tooltip-text').style.opacity = '1';
829
+ this.querySelector('.tooltip-text').style.visibility = 'visible';
830
+ });
831
+ tooltip.addEventListener('mouseleave', function() {
832
+ this.querySelector('.tooltip-text').style.opacity = '0';
833
+ this.querySelector('.tooltip-text').style.visibility = 'hidden';
834
+ });
835
+ });
836
+
837
+ // Simulate loading for the configurator
838
+ document.querySelector('.configurator-container button').addEventListener('click', function() {
839
+ const container = this.closest('.configurator-container');
840
+ container.innerHTML = `
841
+ <div class="absolute inset-0 flex items-center justify-center">
842
+ <div class="text-center p-8">
843
+ <div class="animate-pulse flex space-x-4 mb-4 justify-center">
844
+ <div class="rounded-full bg-gray-300 h-12 w-12"></div>
845
+ </div>
846
+ <h3 class="text-xl font-medium text-gray-700 mb-2">Loading 3D Configurator</h3>
847
+ <p class="text-gray-500">This may take a few moments...</p>
848
+ </div>
849
+ </div>
850
+ `;
851
+
852
+ setTimeout(() => {
853
+ container.innerHTML = `
854
+ <div class="absolute inset-0 flex flex-col">
855
+ <div class="bg-gray-800 text-white px-4 py-2 flex justify-between items-center">
856
+ <div class="flex items-center">
857
+ <button class="mr-2 text-gray-300 hover:text-white">
858
+ <i class="fas fa-arrow-left"></i>
859
+ </button>
860
+ <span class="text-sm">Kitchen Configurator</span>
861
+ </div>
862
+ <div class="flex items-center space-x-2">
863
+ <button class="text-gray-300 hover:text-white">
864
+ <i class="fas fa-expand"></i>
865
+ </button>
866
+ <button class="text-gray-300 hover:text-white">
867
+ <i class="fas fa-question-circle"></i>
868
+ </button>
869
+ </div>
870
+ </div>
871
+ <div class="flex-1 grid grid-cols-4">
872
+ <div class="col-span-3 bg-gray-100 flex items-center justify-center">
873
+ <div class="text-center">
874
+ <i class="fas fa-cube text-5xl text-gray-400 mb-4"></i>
875
+ <h3 class="text-xl font-medium text-gray-700">3D Design View</h3>
876
+ <p class="mt-2 text-gray-500">Interactive 3D visualization would appear here</p>
877
+ </div>
878
+ </div>
879
+ <div class="bg-white p-4 overflow-y-auto">
880
+ <h3 class="text-lg font-medium mb-3">Design Options</h3>
881
+ <div class="space-y-4">
882
+ <div>
883
+ <label class="block text-sm font-medium text-gray-700 mb-1">Layout</label>
884
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
885
+ <option>L-Shaped</option>
886
+ <option>U-Shaped</option>
887
+ <option>Galley</option>
888
+ <option>Island</option>
889
+ </select>
890
+ </div>
891
+ <div>
892
+ <label class="block text-sm font-medium text-gray-700 mb-1">Cabinet Style</label>
893
+ <div class="grid grid-cols-2 gap-2">
894
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
895
+ <span class="block text-xs">Shaker</span>
896
+ </button>
897
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
898
+ <span class="block text-xs">Flat Panel</span>
899
+ </button>
900
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
901
+ <span class="block text-xs">Raised Panel</span>
902
+ </button>
903
+ <button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
904
+ <span class="block text-xs">Beadboard</span>
905
+ </button>
906
+ </div>
907
+ </div>
908
+ <div>
909
+ <label class="block text-sm font-medium text-gray-700 mb-1">Countertop</label>
910
+ <div class="flex space-x-2">
911
+ <div class="w-8 h-8 bg-gray-200 rounded-sm cursor-pointer border-2 border-white hover:ring-2 hover:ring-blue-500"></div>
912
+ <div class="w-8 h-8 bg-gray-800 rounded-sm cursor-pointer border-2 border-white hover:ring-2 hover:ring-blue-500"></div>
913
+ <div class="w-8 h-8 bg-blue-100 rounded-sm cursor-pointer border-2 border-white hover:ring-2 hover:ring-blue-500"></div>
914
+ <div class="w-8 h-8 bg-green-100 rounded-sm cursor-pointer border-2 border-white hover:ring-2 hover:ring-blue-500"></div>
915
+ </div>
916
+ </div>
917
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">
918
+ Save Design
919
+ </button>
920
+ </div>
921
+ </div>
922
+ </div>
923
+ </div>
924
+ `;
925
+ }, 1500);
926
+ });
927
+ </script>
928
+ <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=LukasBe/dc-template" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
929
+ </html>