Hugging Face's logo

Spaces:
nkjoy
/
anycoder-abfebf17
Running

App Files Community
nkjoy commited on
Commit
85c0cd6
·
verified ·
1 Parent(s): 4fd8e0a

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +599 -19
index.html CHANGED
@@ -1,19 +1,599 @@
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" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AURA | Architecture & Design</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
13
+ <script src="https://unpkg.com/lucide@latest"></script>
14
+ <style>
15
+ :root {
16
+ --color-bg: #f4f4f0;
17
+ --color-text: #1a1a1a;
18
+ --color-accent: #c5a065;
19
+ }
20
+ body {
21
+ background-color: var(--color-bg);
22
+ color: var(--color-text);
23
+ font-family: 'Inter', sans-serif;
24
+ overflow-x: hidden;
25
+ }
26
+ h1, h2, h3, h4, h5, h6 {
27
+ font-family: 'Playfair Display', serif;
28
+ }
29
+ .reveal-text {
30
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
31
+ }
32
+ .char {
33
+ transform: translateY(115%);
34
+ transition: transform 0.5s;
35
+ }
36
+ .image-hover-zoom {
37
+ overflow: hidden;
38
+ }
39
+ .image-hover-zoom img {
40
+ transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
41
+ }
42
+ .image-hover-zoom:hover img {
43
+ transform: scale(1.05);
44
+ }
45
+ /* Custom Scrollbar */
46
+ ::-webkit-scrollbar {
47
+ width: 8px;
48
+ }
49
+ ::-webkit-scrollbar-track {
50
+ background: #e5e5e5;
51
+ }
52
+ ::-webkit-scrollbar-thumb {
53
+ background: #888;
54
+ }
55
+ ::-webkit-scrollbar-thumb:hover {
56
+ background: #555;
57
+ }
58
+ .nav-scrolled {
59
+ background-color: rgba(244, 244, 240, 0.9);
60
+ backdrop-filter: blur(10px);
61
+ border-bottom: 1px solid rgba(0,0,0,0.05);
62
+ }
63
+ .loader {
64
+ position: fixed;
65
+ top: 0;
66
+ left: 0;
67
+ width: 100%;
68
+ height: 100%;
69
+ background: #1a1a1a;
70
+ z-index: 9999;
71
+ display: flex;
72
+ justify-content: center;
73
+ align-items: center;
74
+ color: #fff;
75
+ transition: opacity 0.8s ease-out, visibility 0.8s;
76
+ }
77
+ .loader.hidden {
78
+ opacity: 0;
79
+ visibility: hidden;
80
+ pointer-events: none;
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="antialiased selection:bg-stone-800 selection:text-white">
85
+
86
+ <!-- Loader -->
87
+ <div class="loader" id="loader">
88
+ <div class="text-center">
89
+ <h1 class="text-4xl md:text-6xl font-serif tracking-widest mb-4">AURA</h1>
90
+ <div class="w-24 h-1 bg-white/20 mx-auto overflow-hidden rounded-full">
91
+ <div class="h-full bg-[#c5a065] w-0 transition-all duration-1000 ease-out" id="loader-bar"></div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Navigation -->
97
+ <nav id="navbar" class="fixed w-full z-50 transition-all duration-300 py-6 px-6 md:px-12 flex justify-between items-center">
98
+ <a href="#" class="text-2xl font-serif font-bold tracking-tighter z-50 mix-blend-difference text-stone-900">AURA.</a>
99
+
100
+ <div class="hidden md:flex space-x-8 text-sm font-medium tracking-wide">
101
+ <a href="#projects" class="hover:text-[#c5a065] transition-colors">PROJECTS</a>
102
+ <a href="#philosophy" class="hover:text-[#c5a065] transition-colors">PHILOSOPHY</a>
103
+ <a href="#services" class="hover:text-[#c5a065] transition-colors">SERVICES</a>
104
+ <a href="#team" class="hover:text-[#c5a065] transition-colors">TEAM</a>
105
+ <a href="#contact" class="hover:text-[#c5a065] transition-colors">CONTACT</a>
106
+ </div>
107
+
108
+ <button id="mobile-menu-btn" class="md:hidden z-50 text-stone-900">
109
+ <i data-lucide="menu" class="w-8 h-8"></i>
110
+ </button>
111
+
112
+ <!-- Mobile Menu Overlay -->
113
+ <div id="mobile-menu" class="fixed inset-0 bg-[#f4f4f0] z-40 transform translate-x-full transition-transform duration-300 flex flex-col justify-center items-center space-y-8 text-2xl font-serif">
114
+ <a href="#projects" class="mobile-link hover:text-[#c5a065]">Projects</a>
115
+ <a href="#philosophy" class="mobile-link hover:text-[#c5a065]">Philosophy</a>
116
+ <a href="#services" class="mobile-link hover:text-[#c5a065]">Services</a>
117
+ <a href="#team" class="mobile-link hover:text-[#c5a065]">Team</a>
118
+ <a href="#contact" class="mobile-link hover:text-[#c5a065]">Contact</a>
119
+ </div>
120
+ </nav>
121
+
122
+ <!-- Hero Section -->
123
+ <header class="relative h-screen w-full overflow-hidden flex items-center justify-center">
124
+ <!-- Background Image with Parallax -->
125
+ <div class="absolute inset-0 z-0">
126
+ <img src="https://images.unsplash.com/photo-1486718448742-163732cd1544?q=80&w=2560&auto=format&fit=crop"
127
+ alt="Modern Architecture"
128
+ class="w-full h-full object-cover scale-110"
129
+ id="hero-image">
130
+ <div class="absolute inset-0 bg-black/30"></div>
131
+ </div>
132
+
133
+ <div class="relative z-10 text-center text-white px-4 max-w-4xl mx-auto">
134
+ <p class="text-sm md:text-base tracking-[0.3em] uppercase mb-6 opacity-0 animate-fade-in-up" style="animation-delay: 0.5s; animation-fill-mode: forwards;">Est. 1998 — New York / London</p>
135
+ <h1 class="text-5xl md:text-7xl lg:text-8xl font-serif leading-tight mb-8 opacity-0 animate-fade-in-up" style="animation-delay: 0.7s; animation-fill-mode: forwards;">
136
+ Form Follows <br/> <span class="italic text-[#c5a065]">Function</span>
137
+ </h1>
138
+ <p class="text-lg md:text-xl font-light text-gray-200 max-w-2xl mx-auto mb-10 opacity-0 animate-fade-in-up" style="animation-delay: 0.9s; animation-fill-mode: forwards;">
139
+ We craft spaces that inspire, endure, and harmonize with the human experience.
140
+ </p>
141
+ <div class="opacity-0 animate-fade-in-up" style="animation-delay: 1.1s; animation-fill-mode: forwards;">
142
+ <a href="#projects" class="inline-block border border-white/40 px-8 py-3 hover:bg-white hover:text-black transition-all duration-300 uppercase tracking-widest text-sm">
143
+ View Portfolio
144
+ </a>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Scroll Indicator -->
149
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
150
+ <i data-lucide="arrow-down" class="w-6 h-6"></i>
151
+ </div>
152
+ </header>
153
+
154
+ <!-- Philosophy Section -->
155
+ <section id="philosophy" class="py-24 md:py-32 px-6 md:px-12 max-w-7xl mx-auto">
156
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
157
+ <div class="order-2 md:order-1">
158
+ <div class="relative">
159
+ <div class="absolute -top-4 -left-4 w-24 h-24 bg-[#c5a065]/10 z-0"></div>
160
+ <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=1000&auto=format&fit=crop"
161
+ alt="Design Process"
162
+ class="relative z-10 w-full h-[500px] object-cover grayscale hover:grayscale-0 transition-all duration-700">
163
+ <div class="absolute -bottom-4 -right-4 w-32 h-32 border border-stone-300 z-0"></div>
164
+ </div>
165
+ </div>
166
+ <div class="order-1 md:order-2 space-y-8">
167
+ <h2 class="text-4xl md:text-5xl font-serif leading-tight gs-reveal">
168
+ Architecture is the thoughtful making of space.
169
+ </h2>
170
+ <div class="w-16 h-1 bg-[#c5a065] gs-reveal"></div>
171
+ <p class="text-stone-600 leading-relaxed text-lg gs-reveal">
172
+ At Aura, we believe that the built environment should not only serve a purpose but also elevate the spirit. Our approach combines rigorous technical precision with a deep sensitivity to light, material, and context.
173
+ </p>
174
+ <p class="text-stone-600 leading-relaxed text-lg gs-reveal">
175
+ From the initial sketch to the final brick, we are committed to creating structures that stand the test of time, both physically and aesthetically. We don't just design buildings; we curate experiences.
176
+ </p>
177
+ <div class="grid grid-cols-2 gap-8 pt-4 gs-reveal">
178
+ <div>
179
+ <h4 class="text-3xl font-serif text-stone-900">150+</h4>
180
+ <p class="text-sm text-stone-500 uppercase tracking-wider">Projects Completed</p>
181
+ </div>
182
+ <div>
183
+ <h4 class="text-3xl font-serif text-stone-900">24</h4>
184
+ <p class="text-sm text-stone-500 uppercase tracking-wider">Design Awards</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Projects / Portfolio Section -->
192
+ <section id="projects" class="py-24 bg-white">
193
+ <div class="px-6 md:px-12 max-w-7xl mx-auto">
194
+ <div class="flex flex-col md:flex-row justify-between items-end mb-16">
195
+ <div>
196
+ <span class="text-[#c5a065] uppercase tracking-widest text-sm font-bold">Selected Works</span>
197
+ <h2 class="text-4xl md:text-5xl font-serif mt-2">Our Portfolio</h2>
198
+ </div>
199
+
200
+ <!-- Filters -->
201
+ <div class="flex space-x-6 mt-6 md:mt-0 overflow-x-auto pb-2 md:pb-0">
202
+ <button class="filter-btn active text-sm font-medium uppercase tracking-wider hover:text-[#c5a065] transition-colors border-b-2 border-stone-900 pb-1" data-filter="all">All</button>
203
+ <button class="filter-btn text-stone-500 text-sm font-medium uppercase tracking-wider hover:text-[#c5a065] transition-colors border-b-2 border-transparent hover:border-stone-300 pb-1" data-filter="residential">Residential</button>
204
+ <button class="filter-btn text-stone-500 text-sm font-medium uppercase tracking-wider hover:text-[#c5a065] transition-colors border-b-2 border-transparent hover:border-stone-300 pb-1" data-filter="commercial">Commercial</button>
205
+ <button class="filter-btn text-stone-500 text-sm font-medium uppercase tracking-wider hover:text-[#c5a065] transition-colors border-b-2 border-transparent hover:border-stone-300 pb-1" data-filter="institutional">Institutional</button>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Grid -->
210
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="portfolio-grid">
211
+ <!-- Project 1 -->
212
+ <div class="project-card group cursor-pointer" data-category="residential" onclick="openModal('project1')">
213
+ <div class="image-hover-zoom h-[400px] w-full relative mb-4">
214
+ <img src="https://images.unsplash.com/photo-1600596542815-27bfefd0237f?q=80&w=1000&auto=format&fit=crop" class="w-full h-full object-cover" alt="The Glass House">
215
+ <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div>
216
+ <div class="absolute bottom-4 right-4 bg-white/90 backdrop-blur p-3 rounded-full opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
217
+ <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i>
218
+ </div>
219
+ </div>
220
+ <h3 class="text-xl font-serif">The Glass House</h3>
221
+ <p class="text-sm text-stone-500 uppercase tracking-wide">Kyoto, Japan • Residential</p>
222
+ </div>
223
+
224
+ <!-- Project 2 -->
225
+ <div class="project-card group cursor-pointer" data-category="commercial" onclick="openModal('project2')">
226
+ <div class="image-hover-zoom h-[400px] w-full relative mb-4">
227
+ <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1000&auto=format&fit=crop" class="w-full h-full object-cover" alt="Horizon Tower">
228
+ <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div>
229
+ <div class="absolute bottom-4 right-4 bg-white/90 backdrop-blur p-3 rounded-full opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
230
+ <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i>
231
+ </div>
232
+ </div>
233
+ <h3 class="text-xl font-serif">Horizon Tower</h3>
234
+ <p class="text-sm text-stone-500 uppercase tracking-wide">New York, USA • Commercial</p>
235
+ </div>
236
+
237
+ <!-- Project 3 -->
238
+ <div class="project-card group cursor-pointer" data-category="institutional" onclick="openModal('project3')">
239
+ <div class="image-hover-zoom h-[400px] w-full relative mb-4">
240
+ <img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=1000&auto=format&fit=crop" class="w-full h-full object-cover" alt="The Athenaeum">
241
+ <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div>
242
+ <div class="absolute bottom-4 right-4 bg-white/90 backdrop-blur p-3 rounded-full opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
243
+ <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i>
244
+ </div>
245
+ </div>
246
+ <h3 class="text-xl font-serif">The Athenaeum</h3>
247
+ <p class="text-sm text-stone-500 uppercase tracking-wide">Berlin, Germany • Institutional</p>
248
+ </div>
249
+
250
+ <!-- Project 4 -->
251
+ <div class="project-card group cursor-pointer" data-category="residential" onclick="openModal('project4')">
252
+ <div class="image-hover-zoom h-[400px] w-full relative mb-4">
253
+ <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=1000&auto=format&fit=crop" class="w-full h-full object-cover" alt="Coastal Retreat">
254
+ <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div>
255
+ <div class="absolute bottom-4 right-4 bg-white/90 backdrop-blur p-3 rounded-full opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
256
+ <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i>
257
+ </div>
258
+ </div>
259
+ <h3 class="text-xl font-serif">Coastal Retreat</h3>
260
+ <p class="text-sm text-stone-500 uppercase tracking-wide">Malibu, USA • Residential</p>
261
+ </div>
262
+
263
+ <!-- Project 5 -->
264
+ <div class="project-card group cursor-pointer" data-category="commercial" onclick="openModal('project5')">
265
+ <div class="image-hover-zoom h-[400px] w-full relative mb-4">
266
+ <img src="https://images.unsplash.com/photo-1577495508048-b635879837f1?q=80&w=1000&auto=format&fit=crop" class="w-full h-full object-cover" alt="Urban Loft">
267
+ <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div>
268
+ <div class="absolute bottom-4 right-4 bg-white/90 backdrop-blur p-3 rounded-full opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
269
+ <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i>
270
+ </div>
271
+ </div>
272
+ <h3 class="text-xl font-serif">Meridian Offices</h3>
273
+ <p class="text-sm text-stone-500 uppercase tracking-wide">London, UK • Commercial</p>
274
+ </div>
275
+
276
+ <!-- Project 6 -->
277
+ <div class="project-card group cursor-pointer" data-category="institutional" onclick="openModal('project6')">
278
+ <div class="image-hover-zoom h-[400px] w-full relative mb-4">
279
+ <img src="https://images.unsplash.com/photo-1545558014-8692077e9b5c?q=80&w=1000&auto=format&fit=crop" class="w-full h-full object-cover" alt="Light Museum">
280
+ <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div>
281
+ <div class="absolute bottom-4 right-4 bg-white/90 backdrop-blur p-3 rounded-full opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
282
+ <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i>
283
+ </div>
284
+ </div>
285
+ <h3 class="text-xl font-serif">Lumina Gallery</h3>
286
+ <p class="text-sm text-stone-500 uppercase tracking-wide">Tokyo, Japan • Institutional</p>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </section>
291
+
292
+ <!-- Services Section -->
293
+ <section id="services" class="py-24 bg-stone-900 text-[#f4f4f0]">
294
+ <div class="px-6 md:px-12 max-w-7xl mx-auto">
295
+ <div class="text-center mb-16">
296
+ <span class="text-[#c5a065] uppercase tracking-widest text-sm font-bold">What We Do</span>
297
+ <h2 class="text-4xl md:text-5xl font-serif mt-2">Our Expertise</h2>
298
+ </div>
299
+
300
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
301
+ <!-- Service 1 -->
302
+ <div class="group p-8 border border-stone-800 hover:border-[#c5a065] transition-colors duration-300">
303
+ <div class="mb-6 text-[#c5a065]">
304
+ <i data-lucide="pencil-ruler" class="w-10 h-10"></i>
305
+ </div>
306
+ <h3 class="text-2xl font-serif mb-4">Master Planning</h3>
307
+ <p class="text-stone-400 leading-relaxed mb-6">
308
+ Strategic visioning and large-scale planning that integrates urban context, sustainability, and community needs.
309
+ </p>
310
+ <ul class="text-sm text-stone-500 space-y-2">
311
+ <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Feasibility Studies</li>
312
+ <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Urban Design</li>
313
+ <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Zoning Analysis</li>
314
+ </ul>
315
+ </div>
316
+
317
+ <!-- Service 2 -->
318
+ <div class="group p-8 border border-stone-800 hover:border-[#c5a065] transition-colors duration-300">
319
+ <div class="mb-6 text-[#c5a065]">
320
+ <i data-lucide="home" class="w-10 h-10"></i>
321
+ </div>
322
+ <h3 class="text-2xl font-serif mb-4">Architecture</h3>
323
+ <p class="text-stone-400 leading-relaxed mb-6">
324
+ Innovative design solutions from concept to completion, balancing aesthetics, functionality, and budget.
325
+ </p>
326
+ <ul class="text-sm text-stone-500 space-y-2">
327
+ <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Schematic Design</li>
328
+ <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Construction Docs</li>
329
+ <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> 3D Visualization</li>
330
+ </ul>
331
+ </div>
332
+
333
+ <!-- Service 3 -->
334
+ <div class="group p-8 border border-stone-800 hover:border-[#c5a065] transition-colors duration-300">
335
+ <div class="mb-6 text-[#c5a065]">
336
+ <i data-lucide="sofa" class="w-10 h-10"></i>
337
+ </div>
338
+ <h3 class="text-2xl font-serif mb-4">Interior Design</h3>
339
+ <p class="text-stone-400 leading-relaxed mb-6">
340
+ Curating interior environments that reflect the architecture while enhancing comfort and usability.
341
+ </p>
342
+ <ul class="text-sm text-stone-500 space-y-2">
343
+ <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Space Planning</li>
344
+ <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Material Selection</li>
345
+ <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Custom Furniture</li>
346
+ </ul>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </section>
351
+
352
+ <!-- Team Section -->
353
+ <section id="team" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
354
+ <div class="flex flex-col md:flex-row justify-between items-end mb-16">
355
+ <div>
356
+ <span class="text-[#c5a065] uppercase tracking-widest text-sm font-bold">The Minds</span>
357
+ <h2 class="text-4xl md:text-5xl font-serif mt-2">Leadership</h2>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
362
+ <!-- Member 1 -->
363
+ <div class="group">
364
+ <div class="relative overflow-hidden mb-4">
365
+ <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=800&auto=format&fit=crop" alt="Director" class="w-full h-[400px] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
366
+ <div class="absolute inset-0 bg-[#c5a065]/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-4">
367
+ <a href="#" class="text-white hover:text-stone-900"><i data-lucide="linkedin" class="w-6 h-6"></i></a>
368
+ <a href="#" class="text-white hover:text-stone-900"><i data-lucide="twitter" class="w-6 h-6"></i></a>
369
+ </div>
370
+ </div>
371
+ <h3 class="text-xl font-serif">Arthur Sterling</h3>
372
+ <p class="text-sm text-stone-500 uppercase tracking-wide">Principal Architect</p>
373
+ </div>
374
+
375
+ <!-- Member 2 -->
376
+ <div class="group">
377
+ <div class="relative overflow-hidden mb-4">
378
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800&auto=format&fit=crop" alt="Director" class="w-full h-[400px] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
379
+ <div class="absolute inset-0 bg-[#c5a065]/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-4">
380
+ <a href="#" class="text-white hover:text-stone-900"><i data-lucide="linkedin" class="w-6 h-6"></i></a>
381
+ <a href="#" class="text-white hover:text-stone-900"><i data-lucide="twitter" class="w-6 h-6"></i></a>
382
+ </div>
383
+ </div>
384
+ <h3 class="text-xl font-serif">Elena Vance</h3>
385
+ <p class="text-sm text-stone-500 uppercase tracking-wide">Design Director</p>
386
+ </div>
387
+
388
+ <!-- Member 3 -->
389
+ <div class="group">
390
+ <div class="relative overflow-hidden mb-4">
391
+ <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=800&auto=format&fit=crop" alt="Director" class="w-full h-[400px] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
392
+ <div class="absolute inset-0 bg-[#c5a065]/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-4">
393
+ <a href="#" class="text-white hover:text-stone-900"><i data-lucide="linkedin" class="w-6 h-6"></i></a>
394
+ <a href="#" class="text-white hover:text-stone-900"><i data-lucide="twitter" class="w-6 h-6"></i></a>
395
+ </div>
396
+ </div>
397
+ <h3 class="text-xl font-serif">Marcus Thorne</h3>
398
+ <p class="text-sm text-stone-500 uppercase tracking-wide">Project Manager</p>
399
+ </div>
400
+
401
+ <!-- Member 4 -->
402
+ <div class="group">
403
+ <div class="relative overflow-hidden mb-4">
404
+ <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=800&auto=format&fit=crop" alt="Director" class="w-full h-[400px] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
405
+ <div class="absolute inset-0 bg-[#c5a065]/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-4">
406
+ <a href="#" class="text-white hover:text-stone-900"><i data-lucide="linkedin" class="w-6 h-6"></i></a>
407
+ <a href="#" class="text-white hover:text-stone-900"><i data-lucide="twitter" class="w-6 h-6"></i></a>
408
+ </div>
409
+ </div>
410
+ <h3 class="text-xl font-serif">Sarah Jenkins</h3>
411
+ <p class="text-sm text-stone-500 uppercase tracking-wide">Interior Lead</p>
412
+ </div>
413
+ </div>
414
+ </section>
415
+
416
+ <!-- Awards Section -->
417
+ <section class="py-24 bg-stone-100 border-t border-stone-200">
418
+ <div class="px-6 md:px-12 max-w-4xl mx-auto text-center">
419
+ <h2 class="text-3xl font-serif mb-12">Recognition & Publications</h2>
420
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center opacity-70 grayscale hover:grayscale-0 transition-all duration-500">
421
+ <!-- Logos placeholders using text for simplicity but styled -->
422
+ <div class="flex flex-col items-center justify-center h-20">
423
+ <span class="font-serif font-bold text-xl">ArchDaily</span>
424
+ </div>
425
+ <div class="flex flex-col items-center justify-center h-20">
426
+ <span class="font-serif font-bold text-xl">Dezeen</span>
427
+ </div>
428
+ <div class="flex flex-col items-center justify-center h-20">
429
+ <span class="font-serif font-bold text-xl">Wallpaper*</span>
430
+ </div>
431
+ <div class="flex flex-col items-center justify-center h-20">
432
+ <span class="font-serif font-bold text-xl">A+ Awards</span>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </section>
437
+
438
+ <!-- Contact Section -->
439
+ <section id="contact" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
440
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
441
+ <div>
442
+ <span class="text-[#c5a065] uppercase tracking-widest text-sm font-bold">Start a Project</span>
443
+ <h2 class="text-4xl md:text-5xl font-serif mt-2 mb-8">Let's Build Together</h2>
444
+ <p class="text-stone-600 text-lg mb-8">
445
+ Have a vision for your next space? We'd love to hear about it. Fill out the form or contact us directly.
446
+ </p>
447
+
448
+ <div class="space-y-6">
449
+ <div class="flex items-start">
450
+ <div class="bg-stone-200 p-3 rounded-full mr-4">
451
+ <i data-lucide="map-pin" class="w-5 h-5 text-stone-800"></i>
452
+ </div>
453
+ <div>
454
+ <h4 class="font-serif text-lg">New York Studio</h4>
455
+ <p class="text-stone-500">123 Design Ave, Manhattan, NY 10012</p>
456
+ </div>
457
+ </div>
458
+ <div class="flex items-start">
459
+ <div class="bg-stone-200 p-3 rounded-full mr-4">
460
+ <i data-lucide="mail" class="w-5 h-5 text-stone-800"></i>
461
+ </div>
462
+ <div>
463
+ <h4 class="font-serif text-lg">Email Us</h4>
464
+ <p class="text-stone-500">hello@aura-arch.com</p>
465
+ </div>
466
+ </div>
467
+ <div class="flex items-start">
468
+ <div class="bg-stone-200 p-3 rounded-full mr-4">
469
+ <i data-lucide="phone" class="w-5 h-5 text-stone-800"></i>
470
+ </div>
471
+ <div>
472
+ <h4 class="font-serif text-lg">Call Us</h4>
473
+ <p class="text-stone-500">+1 (212) 555-0199</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <div class="bg-white p-8 md:p-12 shadow-xl border border-stone-100">
480
+ <form id="inquiry-form" class="space-y-6">
481
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
482
+ <div>
483
+ <label class="block text-xs font-bold uppercase tracking-wider text-stone-500 mb-2">Name</label>
484
+ <input type="text" required class="w-full bg-stone-50 border-b-2 border-stone-200 p-3 focus:outline-none focus:border-[#c5a065] transition-colors" placeholder="John Doe">
485
+ </div>
486
+ <div>
487
+ <label class="block text-xs font-bold uppercase tracking-wider text-stone-500 mb-2">Email</label>
488
+ <input type="email" required class="w-full bg-stone-50 border-b-2 border-stone-200 p-3 focus:outline-none focus:border-[#c5a065] transition-colors" placeholder="john@example.com">
489
+ </div>
490
+ </div>
491
+ <div>
492
+ <label class="block text-xs font-bold uppercase tracking-wider text-stone-500 mb-2">Project Type</label>
493
+ <select class="w-full bg-stone-50 border-b-2 border-stone-200 p-3 focus:outline-none focus:border-[#c5a065] transition-colors">
494
+ <option>Residential</option>
495
+ <option>Commercial</option>
496
+ <option>Institutional</option>
497
+ <option>Renovation</option>
498
+ </select>
499
+ </div>
500
+ <div>
501
+ <label class="block text-xs font-bold uppercase tracking-wider text-stone-500 mb-2">Message</label>
502
+ <textarea rows="4" required class="w-full bg-stone-50 border-b-2 border-stone-200 p-3 focus:outline-none focus:border-[#c5a065] transition-colors" placeholder="Tell us about your project..."></textarea>
503
+ </div>
504
+ <button type="submit" class="w-full bg-stone-900 text-white py-4 uppercase tracking-widest text-sm font-bold hover:bg-[#c5a065] transition-colors duration-300">
505
+ Send Inquiry
506
+ </button>
507
+ </form>
508
+ </div>
509
+ </div>
510
+ </section>
511
+
512
+ <!-- Footer -->
513
+ <footer class="bg-stone-900 text-stone-400 py-12 border-t border-stone-800">
514
+ <div class="px-6 md:px-12 max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
515
+ <div class="mb-4 md:mb-0">
516
+ <span class="text-2xl font-serif font-bold text-white tracking-tighter">AURA.</span>
517
+ <p class="text-xs mt-2 uppercase tracking-widest">Architecture & Design Studio</p>
518
+ </div>
519
+ <div class="flex space-x-6 text-sm">
520
+ <a href="#" class="hover:text-white transition-colors">Instagram</a>
521
+ <a href="#" class="hover:text-white transition-colors">LinkedIn</a>
522
+ <a href="#" class="hover:text-white transition-colors">Pinterest</a>
523
+ </div>
524
+ </div>
525
+ <div class="text-center mt-8 text-xs text-stone-600">
526
+ &copy; 2023 Aura Architecture. All rights reserved.
527
+ </div>
528
+ </footer>
529
+
530
+ <!-- Project Modal (Hidden by default) -->
531
+ <div id="project-modal" class="fixed inset-0 z-[100] hidden">
532
+ <div class="absolute inset-0 bg-black/90 backdrop-blur-sm" onclick="closeModal()"></div>
533
+ <div class="absolute inset-0 overflow-y-auto">
534
+ <div class="min-h-full flex items-center justify-center p-4">
535
+ <div class="bg-white w-full max-w-5xl shadow-2xl relative animate-modal-in">
536
+ <button onclick="closeModal()" class="absolute top-4 right-4 z-10 bg-white/80 p-2 rounded-full hover:bg-white transition-colors">
537
+ <i data-lucide="x" class="w-6 h-6"></i>
538
+ </button>
539
+
540
+ <div id="modal-content" class="grid grid-cols-1 md:grid-cols-2">
541
+ <!-- Dynamic Content Injected Here -->
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <script>
549
+ // Initialize Lucide Icons
550
+ lucide.createIcons();
551
+
552
+ // Project Data
553
+ const projects = {
554
+ 'project1': {
555
+ title: "The Glass House",
556
+ location: "Kyoto, Japan",
557
+ type: "Residential",
558
+ image: "https://images.unsplash.com/photo-1600596542815-27bfefd0237f?q=80&w=1200&auto=format&fit=crop",
559
+ description: "A minimalist sanctuary nestled in the hills of Kyoto. This project explores the relationship between transparency and privacy, using floor-to-ceiling glass panels that reflect the surrounding bamboo forest.",
560
+ details: ["Area: 450 sqm", "Year: 2022", "Status: Completed"]
561
+ },
562
+ 'project2': {
563
+ title: "Horizon Tower",
564
+ location: "New York, USA",
565
+ type: "Commercial",
566
+ image: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1200&auto=format&fit=crop",
567
+ description: "Redefining the skyline of Lower Manhattan, Horizon Tower combines sustainable engineering with luxury office spaces. The facade features a dynamic shading system that responds to sunlight.",
568
+ details: ["Height: 250m", "Year: 2021", "Status: Completed"]
569
+ },
570
+ 'project3': {
571
+ title: "The Athenaeum",
572
+ location: "Berlin, Germany",
573
+ type: "Institutional",
574
+ image: "https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=1200&auto=format&fit=crop",
575
+ description: "A cultural hub designed to foster community engagement. The central atrium serves as a public gathering space, surrounded by galleries and lecture halls.",
576
+ details: ["Area: 12,000 sqm", "Year: 2023", "Status: Construction"]
577
+ },
578
+ 'project4': {
579
+ title: "Coastal Retreat",
580
+ location: "Malibu, USA",
581
+ type: "Residential",
582
+ image: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=1200&auto=format&fit=crop",
583
+ description: "Blurring the lines between indoor and outdoor living, this beachfront property utilizes natural materials like reclaimed teak and local stone to withstand the coastal elements.",
584
+ details: ["Area: 600 sqm", "Year: 2020", "Status: Completed"]
585
+ },
586
+ 'project5': {
587
+ title: "Meridian Offices",
588
+ location: "London, UK",
589
+ type: "Commercial",
590
+ image: "https://images.unsplash.com/photo-1577495508048-b635879837f1?q=80&w=1200&auto=format&fit=crop",
591
+ description: "A biophilic office design aimed at improving employee wellbeing. Living walls and natural ventilation systems create a healthy working environment in the heart of the city.",
592
+ details: ["Floors: 8", "Year: 2022", "Status: Completed"]
593
+ },
594
+ 'project6': {
595
+ title: "Lumina Gallery",
596
+ location: "Tokyo, Japan",
597
+ type: "Institutional",
598
+ image: "https://images.unsplash.com/photo-1545558014-8692077e9b5c?q=80&w=1200&auto=format&fit=crop",
599
+ description: "An art gallery designed specifically for light-based installations. The architecture itself becomes a canvas, with programmable LED facades.",