Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AURA | Architecture & Design</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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"> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| :root { | |
| --color-bg: #f4f4f0; | |
| --color-text: #1a1a1a; | |
| --color-accent: #c5a065; | |
| } | |
| body { | |
| background-color: var(--color-bg); | |
| color: var(--color-text); | |
| font-family: 'Inter', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .reveal-text { | |
| clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); | |
| } | |
| .char { | |
| transform: translateY(115%); | |
| transition: transform 0.5s; | |
| } | |
| .image-hover-zoom { | |
| overflow: hidden; | |
| } | |
| .image-hover-zoom img { | |
| transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| .image-hover-zoom:hover img { | |
| transform: scale(1.05); | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #e5e5e5; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .nav-scrolled { | |
| background-color: rgba(244, 244, 240, 0.9); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(0,0,0,0.05); | |
| } | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #1a1a1a; | |
| z-index: 9999; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: #fff; | |
| transition: opacity 0.8s ease-out, visibility 0.8s; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased selection:bg-stone-800 selection:text-white"> | |
| <!-- Loader --> | |
| <div class="loader" id="loader"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-serif tracking-widest mb-4">AURA</h1> | |
| <div class="w-24 h-1 bg-white/20 mx-auto overflow-hidden rounded-full"> | |
| <div class="h-full bg-[#c5a065] w-0 transition-all duration-1000 ease-out" id="loader-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <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"> | |
| <a href="#" class="text-2xl font-serif font-bold tracking-tighter z-50 mix-blend-difference text-stone-900">AURA.</a> | |
| <div class="hidden md:flex space-x-8 text-sm font-medium tracking-wide"> | |
| <a href="#projects" class="hover:text-[#c5a065] transition-colors">PROJECTS</a> | |
| <a href="#philosophy" class="hover:text-[#c5a065] transition-colors">PHILOSOPHY</a> | |
| <a href="#services" class="hover:text-[#c5a065] transition-colors">SERVICES</a> | |
| <a href="#team" class="hover:text-[#c5a065] transition-colors">TEAM</a> | |
| <a href="#contact" class="hover:text-[#c5a065] transition-colors">CONTACT</a> | |
| </div> | |
| <button id="mobile-menu-btn" class="md:hidden z-50 text-stone-900"> | |
| <i data-lucide="menu" class="w-8 h-8"></i> | |
| </button> | |
| <!-- Mobile Menu Overlay --> | |
| <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"> | |
| <a href="#projects" class="mobile-link hover:text-[#c5a065]">Projects</a> | |
| <a href="#philosophy" class="mobile-link hover:text-[#c5a065]">Philosophy</a> | |
| <a href="#services" class="mobile-link hover:text-[#c5a065]">Services</a> | |
| <a href="#team" class="mobile-link hover:text-[#c5a065]">Team</a> | |
| <a href="#contact" class="mobile-link hover:text-[#c5a065]">Contact</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="relative h-screen w-full overflow-hidden flex items-center justify-center"> | |
| <!-- Background Image with Parallax --> | |
| <div class="absolute inset-0 z-0"> | |
| <img src="https://images.unsplash.com/photo-1486718448742-163732cd1544?q=80&w=2560&auto=format&fit=crop" | |
| alt="Modern Architecture" | |
| class="w-full h-full object-cover scale-110" | |
| id="hero-image"> | |
| <div class="absolute inset-0 bg-black/30"></div> | |
| </div> | |
| <div class="relative z-10 text-center text-white px-4 max-w-4xl mx-auto"> | |
| <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> | |
| <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;"> | |
| Form Follows <br/> <span class="italic text-[#c5a065]">Function</span> | |
| </h1> | |
| <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;"> | |
| We craft spaces that inspire, endure, and harmonize with the human experience. | |
| </p> | |
| <div class="opacity-0 animate-fade-in-up" style="animation-delay: 1.1s; animation-fill-mode: forwards;"> | |
| <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"> | |
| View Portfolio | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Scroll Indicator --> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce"> | |
| <i data-lucide="arrow-down" class="w-6 h-6"></i> | |
| </div> | |
| </header> | |
| <!-- Philosophy Section --> | |
| <section id="philosophy" class="py-24 md:py-32 px-6 md:px-12 max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center"> | |
| <div class="order-2 md:order-1"> | |
| <div class="relative"> | |
| <div class="absolute -top-4 -left-4 w-24 h-24 bg-[#c5a065]/10 z-0"></div> | |
| <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=1000&auto=format&fit=crop" | |
| alt="Design Process" | |
| class="relative z-10 w-full h-[500px] object-cover grayscale hover:grayscale-0 transition-all duration-700"> | |
| <div class="absolute -bottom-4 -right-4 w-32 h-32 border border-stone-300 z-0"></div> | |
| </div> | |
| </div> | |
| <div class="order-1 md:order-2 space-y-8"> | |
| <h2 class="text-4xl md:text-5xl font-serif leading-tight gs-reveal"> | |
| Architecture is the thoughtful making of space. | |
| </h2> | |
| <div class="w-16 h-1 bg-[#c5a065] gs-reveal"></div> | |
| <p class="text-stone-600 leading-relaxed text-lg gs-reveal"> | |
| 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. | |
| </p> | |
| <p class="text-stone-600 leading-relaxed text-lg gs-reveal"> | |
| 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. | |
| </p> | |
| <div class="grid grid-cols-2 gap-8 pt-4 gs-reveal"> | |
| <div> | |
| <h4 class="text-3xl font-serif text-stone-900">150+</h4> | |
| <p class="text-sm text-stone-500 uppercase tracking-wider">Projects Completed</p> | |
| </div> | |
| <div> | |
| <h4 class="text-3xl font-serif text-stone-900">24</h4> | |
| <p class="text-sm text-stone-500 uppercase tracking-wider">Design Awards</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects / Portfolio Section --> | |
| <section id="projects" class="py-24 bg-white"> | |
| <div class="px-6 md:px-12 max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-end mb-16"> | |
| <div> | |
| <span class="text-[#c5a065] uppercase tracking-widest text-sm font-bold">Selected Works</span> | |
| <h2 class="text-4xl md:text-5xl font-serif mt-2">Our Portfolio</h2> | |
| </div> | |
| <!-- Filters --> | |
| <div class="flex space-x-6 mt-6 md:mt-0 overflow-x-auto pb-2 md:pb-0"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <!-- Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="portfolio-grid"> | |
| <!-- Project 1 --> | |
| <div class="project-card group cursor-pointer" data-category="residential" onclick="openModal('project1')"> | |
| <div class="image-hover-zoom h-[400px] w-full relative mb-4"> | |
| <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"> | |
| <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div> | |
| <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"> | |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">The Glass House</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">Kyoto, Japan • Residential</p> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card group cursor-pointer" data-category="commercial" onclick="openModal('project2')"> | |
| <div class="image-hover-zoom h-[400px] w-full relative mb-4"> | |
| <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"> | |
| <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div> | |
| <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"> | |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">Horizon Tower</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">New York, USA • Commercial</p> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card group cursor-pointer" data-category="institutional" onclick="openModal('project3')"> | |
| <div class="image-hover-zoom h-[400px] w-full relative mb-4"> | |
| <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"> | |
| <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div> | |
| <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"> | |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">The Athenaeum</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">Berlin, Germany • Institutional</p> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="project-card group cursor-pointer" data-category="residential" onclick="openModal('project4')"> | |
| <div class="image-hover-zoom h-[400px] w-full relative mb-4"> | |
| <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"> | |
| <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div> | |
| <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"> | |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">Coastal Retreat</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">Malibu, USA • Residential</p> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="project-card group cursor-pointer" data-category="commercial" onclick="openModal('project5')"> | |
| <div class="image-hover-zoom h-[400px] w-full relative mb-4"> | |
| <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"> | |
| <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div> | |
| <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"> | |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">Meridian Offices</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">London, UK • Commercial</p> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="project-card group cursor-pointer" data-category="institutional" onclick="openModal('project6')"> | |
| <div class="image-hover-zoom h-[400px] w-full relative mb-4"> | |
| <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"> | |
| <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-300"></div> | |
| <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"> | |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-stone-900"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">Lumina Gallery</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">Tokyo, Japan • Institutional</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-24 bg-stone-900 text-[#f4f4f0]"> | |
| <div class="px-6 md:px-12 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-[#c5a065] uppercase tracking-widest text-sm font-bold">What We Do</span> | |
| <h2 class="text-4xl md:text-5xl font-serif mt-2">Our Expertise</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-12"> | |
| <!-- Service 1 --> | |
| <div class="group p-8 border border-stone-800 hover:border-[#c5a065] transition-colors duration-300"> | |
| <div class="mb-6 text-[#c5a065]"> | |
| <i data-lucide="pencil-ruler" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-serif mb-4">Master Planning</h3> | |
| <p class="text-stone-400 leading-relaxed mb-6"> | |
| Strategic visioning and large-scale planning that integrates urban context, sustainability, and community needs. | |
| </p> | |
| <ul class="text-sm text-stone-500 space-y-2"> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Feasibility Studies</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Urban Design</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Zoning Analysis</li> | |
| </ul> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="group p-8 border border-stone-800 hover:border-[#c5a065] transition-colors duration-300"> | |
| <div class="mb-6 text-[#c5a065]"> | |
| <i data-lucide="home" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-serif mb-4">Architecture</h3> | |
| <p class="text-stone-400 leading-relaxed mb-6"> | |
| Innovative design solutions from concept to completion, balancing aesthetics, functionality, and budget. | |
| </p> | |
| <ul class="text-sm text-stone-500 space-y-2"> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Schematic Design</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Construction Docs</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> 3D Visualization</li> | |
| </ul> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="group p-8 border border-stone-800 hover:border-[#c5a065] transition-colors duration-300"> | |
| <div class="mb-6 text-[#c5a065]"> | |
| <i data-lucide="sofa" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-serif mb-4">Interior Design</h3> | |
| <p class="text-stone-400 leading-relaxed mb-6"> | |
| Curating interior environments that reflect the architecture while enhancing comfort and usability. | |
| </p> | |
| <ul class="text-sm text-stone-500 space-y-2"> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Space Planning</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Material Selection</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 mr-2 text-[#c5a065]"></i> Custom Furniture</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section id="team" class="py-24 px-6 md:px-12 max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-end mb-16"> | |
| <div> | |
| <span class="text-[#c5a065] uppercase tracking-widest text-sm font-bold">The Minds</span> | |
| <h2 class="text-4xl md:text-5xl font-serif mt-2">Leadership</h2> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Member 1 --> | |
| <div class="group"> | |
| <div class="relative overflow-hidden mb-4"> | |
| <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"> | |
| <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"> | |
| <a href="#" class="text-white hover:text-stone-900"><i data-lucide="linkedin" class="w-6 h-6"></i></a> | |
| <a href="#" class="text-white hover:text-stone-900"><i data-lucide="twitter" class="w-6 h-6"></i></a> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">Arthur Sterling</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">Principal Architect</p> | |
| </div> | |
| <!-- Member 2 --> | |
| <div class="group"> | |
| <div class="relative overflow-hidden mb-4"> | |
| <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"> | |
| <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"> | |
| <a href="#" class="text-white hover:text-stone-900"><i data-lucide="linkedin" class="w-6 h-6"></i></a> | |
| <a href="#" class="text-white hover:text-stone-900"><i data-lucide="twitter" class="w-6 h-6"></i></a> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">Elena Vance</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">Design Director</p> | |
| </div> | |
| <!-- Member 3 --> | |
| <div class="group"> | |
| <div class="relative overflow-hidden mb-4"> | |
| <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"> | |
| <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"> | |
| <a href="#" class="text-white hover:text-stone-900"><i data-lucide="linkedin" class="w-6 h-6"></i></a> | |
| <a href="#" class="text-white hover:text-stone-900"><i data-lucide="twitter" class="w-6 h-6"></i></a> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">Marcus Thorne</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">Project Manager</p> | |
| </div> | |
| <!-- Member 4 --> | |
| <div class="group"> | |
| <div class="relative overflow-hidden mb-4"> | |
| <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"> | |
| <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"> | |
| <a href="#" class="text-white hover:text-stone-900"><i data-lucide="linkedin" class="w-6 h-6"></i></a> | |
| <a href="#" class="text-white hover:text-stone-900"><i data-lucide="twitter" class="w-6 h-6"></i></a> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-serif">Sarah Jenkins</h3> | |
| <p class="text-sm text-stone-500 uppercase tracking-wide">Interior Lead</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Awards Section --> | |
| <section class="py-24 bg-stone-100 border-t border-stone-200"> | |
| <div class="px-6 md:px-12 max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-serif mb-12">Recognition & Publications</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center opacity-70 grayscale hover:grayscale-0 transition-all duration-500"> | |
| <!-- Logos placeholders using text for simplicity but styled --> | |
| <div class="flex flex-col items-center justify-center h-20"> | |
| <span class="font-serif font-bold text-xl">ArchDaily</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-center h-20"> | |
| <span class="font-serif font-bold text-xl">Dezeen</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-center h-20"> | |
| <span class="font-serif font-bold text-xl">Wallpaper*</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-center h-20"> | |
| <span class="font-serif font-bold text-xl">A+ Awards</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-24 px-6 md:px-12 max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> | |
| <div> | |
| <span class="text-[#c5a065] uppercase tracking-widest text-sm font-bold">Start a Project</span> | |
| <h2 class="text-4xl md:text-5xl font-serif mt-2 mb-8">Let's Build Together</h2> | |
| <p class="text-stone-600 text-lg mb-8"> | |
| Have a vision for your next space? We'd love to hear about it. Fill out the form or contact us directly. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-stone-200 p-3 rounded-full mr-4"> | |
| <i data-lucide="map-pin" class="w-5 h-5 text-stone-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-lg">New York Studio</h4> | |
| <p class="text-stone-500">123 Design Ave, Manhattan, NY 10012</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-stone-200 p-3 rounded-full mr-4"> | |
| <i data-lucide="mail" class="w-5 h-5 text-stone-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-lg">Email Us</h4> | |
| <p class="text-stone-500">hello@aura-arch.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-stone-200 p-3 rounded-full mr-4"> | |
| <i data-lucide="phone" class="w-5 h-5 text-stone-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-lg">Call Us</h4> | |
| <p class="text-stone-500">+1 (212) 555-0199</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 md:p-12 shadow-xl border border-stone-100"> | |
| <form id="inquiry-form" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-xs font-bold uppercase tracking-wider text-stone-500 mb-2">Name</label> | |
| <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"> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-bold uppercase tracking-wider text-stone-500 mb-2">Email</label> | |
| <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"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-bold uppercase tracking-wider text-stone-500 mb-2">Project Type</label> | |
| <select class="w-full bg-stone-50 border-b-2 border-stone-200 p-3 focus:outline-none focus:border-[#c5a065] transition-colors"> | |
| <option>Residential</option> | |
| <option>Commercial</option> | |
| <option>Institutional</option> | |
| <option>Renovation</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-bold uppercase tracking-wider text-stone-500 mb-2">Message</label> | |
| <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> | |
| </div> | |
| <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"> | |
| Send Inquiry | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-stone-900 text-stone-400 py-12 border-t border-stone-800"> | |
| <div class="px-6 md:px-12 max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <span class="text-2xl font-serif font-bold text-white tracking-tighter">AURA.</span> | |
| <p class="text-xs mt-2 uppercase tracking-widest">Architecture & Design Studio</p> | |
| </div> | |
| <div class="flex space-x-6 text-sm"> | |
| <a href="#" class="hover:text-white transition-colors">Instagram</a> | |
| <a href="#" class="hover:text-white transition-colors">LinkedIn</a> | |
| <a href="#" class="hover:text-white transition-colors">Pinterest</a> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8 text-xs text-stone-600"> | |
| © 2023 Aura Architecture. All rights reserved. | |
| </div> | |
| </footer> | |
| <!-- Project Modal (Hidden by default) --> | |
| <div id="project-modal" class="fixed inset-0 z-[100] hidden"> | |
| <div class="absolute inset-0 bg-black/90 backdrop-blur-sm" onclick="closeModal()"></div> | |
| <div class="absolute inset-0 overflow-y-auto"> | |
| <div class="min-h-full flex items-center justify-center p-4"> | |
| <div class="bg-white w-full max-w-5xl shadow-2xl relative animate-modal-in"> | |
| <button onclick="closeModal()" class="absolute top-4 right-4 z-10 bg-white/80 p-2 rounded-full hover:bg-white transition-colors"> | |
| <i data-lucide="x" class="w-6 h-6"></i> | |
| </button> | |
| <div id="modal-content" class="grid grid-cols-1 md:grid-cols-2"> | |
| <!-- Dynamic Content Injected Here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Project Data | |
| const projects = { | |
| 'project1': { | |
| title: "The Glass House", | |
| location: "Kyoto, Japan", | |
| type: "Residential", | |
| image: "https://images.unsplash.com/photo-1600596542815-27bfefd0237f?q=80&w=1200&auto=format&fit=crop", | |
| 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.", | |
| details: ["Area: 450 sqm", "Year: 2022", "Status: Completed"] | |
| }, | |
| 'project2': { | |
| title: "Horizon Tower", | |
| location: "New York, USA", | |
| type: "Commercial", | |
| image: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1200&auto=format&fit=crop", | |
| 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.", | |
| details: ["Height: 250m", "Year: 2021", "Status: Completed"] | |
| }, | |
| 'project3': { | |
| title: "The Athenaeum", | |
| location: "Berlin, Germany", | |
| type: "Institutional", | |
| image: "https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=1200&auto=format&fit=crop", | |
| description: "A cultural hub designed to foster community engagement. The central atrium serves as a public gathering space, surrounded by galleries and lecture halls.", | |
| details: ["Area: 12,000 sqm", "Year: 2023", "Status: Construction"] | |
| }, | |
| 'project4': { | |
| title: "Coastal Retreat", | |
| location: "Malibu, USA", | |
| type: "Residential", | |
| image: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=1200&auto=format&fit=crop", | |
| 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.", | |
| details: ["Area: 600 sqm", "Year: 2020", "Status: Completed"] | |
| }, | |
| 'project5': { | |
| title: "Meridian Offices", | |
| location: "London, UK", | |
| type: "Commercial", | |
| image: "https://images.unsplash.com/photo-1577495508048-b635879837f1?q=80&w=1200&auto=format&fit=crop", | |
| 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.", | |
| details: ["Floors: 8", "Year: 2022", "Status: Completed"] | |
| }, | |
| 'project6': { | |
| title: "Lumina Gallery", | |
| location: "Tokyo, Japan", | |
| type: "Institutional", | |
| image: "https://images.unsplash.com/photo-1545558014-8692077e9b5c?q=80&w=1200&auto=format&fit=crop", | |
| description: "An art gallery designed specifically for light-based installations. The architecture itself becomes a canvas, with programmable LED facades.", |