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>Aurius Tech | Luxury Low-Voltage Integration</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></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=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| gold: { | |
| 100: '#F9F1D8', | |
| 200: '#F0E2B6', | |
| 300: '#E6D394', | |
| 400: '#DDC472', | |
| 500: '#D4AF37', | |
| 600: '#B8962F', | |
| 700: '#9C7D28', | |
| 800: '#806420', | |
| 900: '#644B18', | |
| }, | |
| noir: { | |
| 50: '#F6F6F6', | |
| 100: '#E7E7E7', | |
| 200: '#D1D1D1', | |
| 300: '#B0B0B0', | |
| 400: '#888888', | |
| 500: '#6D6D6D', | |
| 600: '#5D5D5D', | |
| 700: '#4F4F4F', | |
| 800: '#454545', | |
| 900: '#0A0A0A', | |
| 950: '#030303', | |
| } | |
| }, | |
| fontFamily: { | |
| serif: ['Playfair Display', 'serif'], | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'fade-in-up': 'fadeInUp 0.8s ease-out', | |
| 'shimmer': 'shimmer 2s linear infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| }, | |
| keyframes: { | |
| fadeInUp: { | |
| '0%': { opacity: '0', transform: 'translateY(30px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' }, | |
| }, | |
| shimmer: { | |
| '0%': { backgroundPosition: '-1000px 0' }, | |
| '100%': { backgroundPosition: '1000px 0' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gold-gradient-text { | |
| background: linear-gradient(135deg, #D4AF37 0%, #F0E2B6 50%, #D4AF37 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .gold-border-gradient { | |
| border-image: linear-gradient(135deg, #D4AF37, #B8962F, #D4AF37) 1; | |
| } | |
| .glass-panel { | |
| background: rgba(10, 10, 10, 0.7); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(212, 175, 55, 0.2); | |
| } | |
| .hero-bg { | |
| background: radial-gradient(ellipse at top, #1a1a1a 0%, #030303 70%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15); | |
| } | |
| .luxury-button { | |
| background: linear-gradient(135deg, #D4AF37 0%, #B8962F 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .luxury-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4); | |
| } | |
| .scroll-reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease-out; | |
| } | |
| .scroll-reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .image-mask { | |
| mask-image: linear-gradient(to bottom, black 60%, transparent 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-noir-950 text-noir-100 font-sans antialiased selection:bg-gold-500 selection:text-noir-950"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 transition-all duration-300" id="navbar"> | |
| <div class="glass-panel border-b border-gold-500/20"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-20"> | |
| <!-- Logo --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-gold-400 to-gold-600 rounded-sm flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-6 h-6 text-noir-950"></i> | |
| </div> | |
| <div> | |
| <span class="font-serif text-2xl font-bold gold-gradient-text tracking-wide">AURIUS</span> | |
| <span class="font-sans text-xs text-gold-400 tracking-[0.3em] block">TECH</span> | |
| </div> | |
| </div> | |
| <!-- Desktop Menu --> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#services" class="text-sm tracking-widest hover:text-gold-400 transition-colors uppercase">Services</a> | |
| <a href="#experience" class="text-sm tracking-widest hover:text-gold-400 transition-colors uppercase">Experience</a> | |
| <a href="#portfolio" class="text-sm tracking-widest hover:text-gold-400 transition-colors uppercase">Portfolio</a> | |
| <a href="#contact" class="luxury-button px-8 py-3 text-noir-950 font-semibold text-sm tracking-wider uppercase rounded-sm"> | |
| Consultation | |
| </a> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button class="md:hidden text-gold-400" onclick="toggleMobileMenu()"> | |
| <i data-lucide="menu" class="w-8 h-8"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden md:hidden glass-panel border-t border-gold-500/20"> | |
| <div class="px-6 py-8 space-y-6 text-center"> | |
| <a href="#services" class="block text-lg tracking-widest hover:text-gold-400 transition-colors uppercase" onclick="toggleMobileMenu()">Services</a> | |
| <a href="#experience" class="block text-lg tracking-widest hover:text-gold-400 transition-colors uppercase" onclick="toggleMobileMenu()">Experience</a> | |
| <a href="#portfolio" class="block text-lg tracking-widest hover:text-gold-400 transition-colors uppercase" onclick="toggleMobileMenu()">Portfolio</a> | |
| <a href="#contact" class="block luxury-button px-8 py-3 text-noir-950 font-semibold text-sm tracking-wider uppercase rounded-sm mx-auto w-fit" onclick="toggleMobileMenu()"> | |
| Consultation | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center hero-bg overflow-hidden pt-20"> | |
| <div class="absolute inset-0 opacity-30"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_rgba(212,175,55,0.1)_0%,_transparent_50%)]"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto px-6 lg:px-8 py-20 grid lg:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8 animate-fade-in-up"> | |
| <div class="inline-flex items-center space-x-2 px-4 py-2 border border-gold-500/30 rounded-full"> | |
| <span class="w-2 h-2 bg-gold-500 rounded-full animate-pulse"></span> | |
| <span class="text-xs tracking-[0.2em] text-gold-300 uppercase">White Glove Integration</span> | |
| </div> | |
| <h1 class="font-serif text-5xl md:text-7xl font-bold leading-tight"> | |
| Technology <br> | |
| <span class="gold-gradient-text italic">Redefined</span> | |
| </h1> | |
| <p class="text-noir-300 text-lg md:text-xl leading-relaxed max-w-xl font-light"> | |
| Experience seamless luxury with bespoke low-voltage solutions. From concert-hall audio to intelligent security, we craft turnkey technology experiences for the discerning homeowner. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 pt-4"> | |
| <a href="#contact" class="luxury-button px-8 py-4 text-noir-950 font-semibold tracking-wider uppercase text-sm rounded-sm text-center"> | |
| Begin Your Project | |
| </a> | |
| <a href="#portfolio" class="px-8 py-4 border border-gold-500/50 text-gold-400 font-semibold tracking-wider uppercase text-sm rounded-sm hover:bg-gold-500/10 transition-all text-center"> | |
| View Our Work | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-8 pt-8 border-t border-gold-500/20"> | |
| <div> | |
| <div class="font-serif text-3xl text-gold-400">15+</div> | |
| <div class="text-xs tracking-widest text-noir-400 uppercase mt-1">Years Experience</div> | |
| </div> | |
| <div class="w-px h-12 bg-gold-500/20"></div> | |
| <div> | |
| <div class="font-serif text-3xl text-gold-400">500+</div> | |
| <div class="text-xs tracking-widest text-noir-400 uppercase mt-1">Luxury Homes</div> | |
| </div> | |
| <div class="w-px h-12 bg-gold-500/20"></div> | |
| <div> | |
| <div class="font-serif text-3xl text-gold-400">24/7</div> | |
| <div class="text-xs tracking-widest text-noir-400 uppercase mt-1">White Glove Support</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative hidden lg:block"> | |
| <div class="relative z-10 rounded-sm overflow-hidden shadow-2xl shadow-gold-500/20"> | |
| <img src="http://static.photos/luxury/1024x576/42" alt="Luxury Home Theater" class="w-full h-auto object-cover image-mask"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-noir-950/80 to-transparent"></div> | |
| </div> | |
| <div class="absolute -bottom-6 -left-6 w-48 h-48 border border-gold-500/30 rounded-sm -z-10"></div> | |
| <div class="absolute -top-6 -right-6 w-48 h-48 bg-gold-500/5 rounded-sm -z-10"></div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i data-lucide="chevron-down" class="w-6 h-6 text-gold-500/50"></i> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-24 bg-noir-950 relative"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8"> | |
| <div class="text-center mb-16 scroll-reveal"> | |
| <span class="text-gold-500 tracking-[0.3em] text-xs uppercase mb-4 block">Our Expertise</span> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold mb-6">Bespoke <span class="gold-gradient-text">Systems</span></h2> | |
| <p class="text-noir-400 max-w-2xl mx-auto">Every installation is a masterpiece of engineering and design, tailored to your lifestyle.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card glass-panel p-8 rounded-sm scroll-reveal group cursor-pointer"> | |
| <div class="w-14 h-14 bg-gold-500/10 rounded-sm flex items-center justify-center mb-6 group-hover:bg-gold-500/20 transition-colors"> | |
| <i data-lucide="speaker" class="w-7 h-7 text-gold-400"></i> | |
| </div> | |
| <h3 class="font-serif text-2xl mb-4 text-gold-100">Audiophile Sound</h3> | |
| <p class="text-noir-400 text-sm leading-relaxed mb-6"> | |
| Invisible architectural speakers, dedicated listening rooms, and whole-home audio that delivers concert-hall fidelity in every space. | |
| </p> | |
| <div class="flex items-center text-gold-500 text-sm tracking-wider uppercase group-hover:translate-x-2 transition-transform"> | |
| <span>Explore Audio</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card glass-panel p-8 rounded-sm scroll-reveal group cursor-pointer" style="transition-delay: 100ms;"> | |
| <div class="w-14 h-14 bg-gold-500/10 rounded-sm flex items-center justify-center mb-6 group-hover:bg-gold-500/20 transition-colors"> | |
| <i data-lucide="video" class="w-7 h-7 text-gold-400"></i> | |
| </div> | |
| <h3 class="font-serif text-2xl mb-4 text-gold-100">Private Cinemas</h3> | |
| <p class="text-noir-400 text-sm leading-relaxed mb-6"> | |
| Dolby Atmos theaters with 4K projection, acoustic treatments, and luxury seating. Your personal premiere destination. | |
| </p> | |
| <div class="flex items-center text-gold-500 text-sm tracking-wider uppercase group-hover:translate-x-2 transition-transform"> | |
| <span>View Theaters</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card glass-panel p-8 rounded-sm scroll-reveal group cursor-pointer" style="transition-delay: 200ms;"> | |
| <div class="w-14 h-14 bg-gold-500/10 rounded-sm flex items-center justify-center mb-6 group-hover:bg-gold-500/20 transition-colors"> | |
| <i data-lucide="shield-check" class="w-7 h-7 text-gold-400"></i> | |
| </div> | |
| <h3 class="font-serif text-2xl mb-4 text-gold-100">Elite Security</h3> | |
| <p class="text-noir-400 text-sm leading-relaxed mb-6"> | |
| Discrete 4K surveillance, biometric access control, and intelligent monitoring that protects without compromising aesthetics. | |
| </p> | |
| <div class="flex items-center text-gold-500 text-sm tracking-wider uppercase group-hover:translate-x-2 transition-transform"> | |
| <span>Security Solutions</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card glass-panel p-8 rounded-sm scroll-reveal group cursor-pointer"> | |
| <div class="w-14 h-14 bg-gold-500/10 rounded-sm flex items-center justify-center mb-6 group-hover:bg-gold-500/20 transition-colors"> | |
| <i data-lucide="smartphone" class="w-7 h-7 text-gold-400"></i> | |
| </div> | |
| <h3 class="font-serif text-2xl mb-4 text-gold-100">Smart Control</h3> | |
| <p class="text-noir-400 text-sm leading-relaxed mb-6"> | |
| Intuitive interfaces that unify lighting, climate, shades, and entertainment. One touch orchestrates your entire environment. | |
| </p> | |
| <div class="flex items-center text-gold-500 text-sm tracking-wider uppercase group-hover:translate-x-2 transition-transform"> | |
| <span>Automation</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card glass-panel p-8 rounded-sm scroll-reveal group cursor-pointer" style="transition-delay: 100ms;"> | |
| <div class="w-14 h-14 bg-gold-500/10 rounded-sm flex items-center justify-center mb-6 group-hover:bg-gold-500/20 transition-colors"> | |
| <i data-lucide="lightbulb" class="w-7 h-7 text-gold-400"></i> | |
| </div> | |
| <h3 class="font-serif text-2xl mb-4 text-gold-100">Lighting Design</h3> | |
| <p class="text-noir-400 text-sm leading-relaxed mb-6"> | |
| Architectural lighting scenes that transform spaces. Circadian rhythm programming and tunable whites for wellness. | |
| </p> | |
| <div class="flex items-center text-gold-500 text-sm tracking-wider uppercase group-hover:translate-x-2 transition-transform"> | |
| <span>Illumination</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card glass-panel p-8 rounded-sm scroll-reveal group cursor-pointer" style="transition-delay: 200ms;"> | |
| <div class="w-14 h-14 bg-gold-500/10 rounded-sm flex items-center justify-center mb-6 group-hover:bg-gold-500/20 transition-colors"> | |
| <i data-lucide="network" class="w-7 h-7 text-gold-400"></i> | |
| </div> | |
| <h3 class="font-serif text-2xl mb-4 text-gold-100">Enterprise Networks</h3> | |
| <p class="text-noir-400 text-sm leading-relaxed mb-6"> | |
| Commercial-grade infrastructure with mesh WiFi 6E, fiber optics, and rack-mounted solutions for flawless connectivity. | |
| </p> | |
| <div class="flex items-center text-gold-500 text-sm tracking-wider uppercase group-hover:translate-x-2 transition-transform"> | |
| <span>Connectivity</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-24 bg-noir-900 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_30%_50%,_rgba(212,175,55,0.15)_0%,_transparent_50%)]"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10"> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> | |
| <div class="order-2 lg:order-1 scroll-reveal"> | |
| <div class="relative"> | |
| <img src="http://static.photos/minimal/1024x576/133" alt="Smart Home Control" class="rounded-sm shadow-2xl shadow-gold-500/10 w-full"> | |
| <div class="absolute -bottom-8 -right-8 w-64 glass-panel p-6 rounded-sm hidden md:block"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> | |
| <span class="text-xs tracking-widest text-gold-400 uppercase">System Online</span> | |
| </div> | |
| <p class="text-sm text-noir-300">"The interface is so intuitive, my entire family uses it without training."</p> | |
| <p class="text-xs text-gold-500 mt-3 italic">— Client, Beverly Hills</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="order-1 lg:order-2 scroll-reveal"> | |
| <span class="text-gold-500 tracking-[0.3em] text-xs uppercase mb-4 block">The Aurius Difference</span> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold mb-8 leading-tight"> | |
| Effortless <span class="gold-gradient-text italic">Elegance</span> | |
| </h2> | |
| <div class="space-y-6"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-8 h-8 rounded-full bg-gold-500/20 flex items-center justify-center flex-shrink-0 mt-1"> | |
| <i data-lucide="check" class="w-4 h-4 text-gold-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-xl text-gold-100 mb-2">Invisible Integration</h4> | |
| <p class="text-noir-400 text-sm leading-relaxed">Technology that disappears into architecture. No visible wires, no bulky equipment—just pure design integrity.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-8 h-8 rounded-full bg-gold-500/20 flex items-center justify-center flex-shrink-0 mt-1"> | |
| <i data-lucide="check" class="w-4 h-4 text-gold-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-xl text-gold-100 mb-2">Concierge Programming</h4> | |
| <p class="text-noir-400 text-sm leading-relaxed">We learn your routines and program scenes accordingly. "Good Morning" opens shades, starts music, and sets the perfect temperature.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-8 h-8 rounded-full bg-gold-500/20 flex items-center justify-center flex-shrink-0 mt-1"> | |
| <i data-lucide="check" class="w-4 h-4 text-gold-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-xl text-gold-100 mb-2">Lifetime Relationship</h4> | |
| <p class="text-noir-400 text-sm leading-relaxed">White-glove doesn't end at installation. Our team provides ongoing support, updates, and optimization for years to come.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 pt-10 border-t border-gold-500/20"> | |
| <blockquote class="font-serif text-2xl italic text-gold-200 leading-relaxed"> | |
| "They transformed our house into a sanctuary of sound and light. It's not just smart—it's magical." | |
| </blockquote> | |
| <div class="mt-4 flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-gold-500/20 flex items-center justify-center"> | |
| <span class="text-gold-400 font-serif font-bold">JD</span> | |
| </div> | |
| <div> | |
| <p class="text-sm font-semibold text-gold-100">James Davidson</p> | |
| <p class="text-xs text-noir-500">Estate Owner, Malibu</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Gallery --> | |
| <section id="portfolio" class="py-24 bg-noir-950"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8"> | |
| <div class="text-center mb-16 scroll-reveal"> | |
| <span class="text-gold-500 tracking-[0.3em] text-xs uppercase mb-4 block">Selected Works</span> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold mb-6">Signature <span class="gold-gradient-text">Projects</span></h2> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project 1 --> | |
| <div class="group relative overflow-hidden rounded-sm scroll-reveal cursor-pointer"> | |
| <img src="http://static.photos/luxury/640x360/201" alt="Home Theater" class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-noir-950 via-noir-950/50 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"> | |
| <span class="text-gold-400 text-xs tracking-widest uppercase mb-2 block">Beverly Hills Estate</span> | |
| <h3 class="font-serif text-2xl text-white mb-2">Theater & Wine Cellar</h3> | |
| <p class="text-noir-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">12-seat Dolby Atmos cinema with integrated climate-controlled wine display.</p> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="group relative overflow-hidden rounded-sm scroll-reveal cursor-pointer" style="transition-delay: 100ms;"> | |
| <img src="http://static.photos/minimal/640x360/88" alt="Smart Home" class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-noir-950 via-noir-950/50 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"> | |
| <span class="text-gold-400 text-xs tracking-widest uppercase mb-2 block">Manhattan Penthouse</span> | |
| <h3 class="font-serif text-2xl text-white mb-2">Whole-Home Automation</h3> | |
| <p class="text-noir-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">Seamless Lutron lighting and Savant control across 8,000 sq ft.</p> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="group relative overflow-hidden rounded-sm scroll-reveal cursor-pointer" style="transition-delay: 200ms;"> | |
| <img src="http://static.photos/outdoor/640x360/55" alt="Outdoor Audio" class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-noir-950 via-noir-950/50 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"> | |
| <span class="text-gold-400 text-xs tracking-widest uppercase mb-2 block">Aspen Retreat</span> | |
| <h3 class="font-serif text-2xl text-white mb-2">Landscape Audio</h3> | |
| <p class="text-noir-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">Rock-integrated James Loudspeaker system across 5 acres.</p> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="group relative overflow-hidden rounded-sm scroll-reveal cursor-pointer"> | |
| <img src="http://static.photos/workspace/640x360/77" alt="Security Center" class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-noir-950 via-noir-950/50 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"> | |
| <span class="text-gold-400 text-xs tracking-widest uppercase mb-2 block">Miami Compound</span> | |
| <h3 class="font-serif text-2xl text-white mb-2">Security Command</h3> | |
| <p class="text-noir-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">Biometric access with facial recognition and perimeter analytics.</p> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="group relative overflow-hidden rounded-sm scroll-reveal cursor-pointer" style="transition-delay: 100ms;"> | |
| <img src="http://static.photos/indoor/640x360/44" alt="Listening Room" class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-noir-950 via-noir-950/50 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"> | |
| <span class="text-gold-400 text-xs tracking-widest uppercase mb-2 block">Greenwich Estate</span> | |
| <h3 class="font-serif text-2xl text-white mb-2">Audiophile Lounge</h3> | |
| <p class="text-noir-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">Dedicated 2-channel room with acoustic treatments and tube amplification.</p> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="group relative overflow-hidden rounded-sm scroll-reveal cursor-pointer" style="transition-delay: 200ms;"> | |
| <img src="http://static.photos/luxury/640x360/99" alt="Yacht Integration" class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-noir-950 via-noir-950/50 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"> | |
| <span class="text-gold-400 text-xs tracking-widest uppercase mb-2 block">Superyacht</span> | |
| <h3 class="font-serif text-2xl text-white mb-2">Marine Integration</h3> | |
| <p class="text-noir-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">Stabilized satellite, Kaleidescape server, and Crestron marine control.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="px-8 py-4 border border-gold-500/50 text-gold-400 font-semibold tracking-wider uppercase text-sm rounded-sm hover:bg-gold-500/10 transition-all"> | |
| View Complete Portfolio | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Section --> | |
| <section class="py-24 bg-noir-900"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8"> | |
| <div class="text-center mb-16 scroll-reveal"> | |
| <span class="text-gold-500 tracking-[0.3em] text-xs uppercase mb-4 block">Our Process</span> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold mb-6">From Vision to <span class="gold-gradient-text">Reality</span></h2> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="text-center scroll-reveal"> | |
| <div class="w-16 h-16 mx-auto mb-6 border border-gold-500/30 rounded-full flex items-center justify-center relative"> | |
| <span class="font-serif text-2xl text-gold-400">01</span> | |
| <div class="hidden md:block absolute top-1/2 left-full w-full h-px bg-gold-500/20"></div> | |
| </div> | |
| <h3 class="font-serif text-xl text-gold-100 mb-3">Consultation</h3> | |
| <p class="text-noir-400 text-sm">We visit your property, understand your lifestyle, and architect a bespoke solution.</p> | |
| </div> | |
| <div class="text-center scroll-reveal" style="transition-delay: 100ms;"> | |
| <div class="w-16 h-16 mx-auto mb-6 border border-gold-500/30 rounded-full flex items-center justify-center relative"> | |
| <span class="font-serif text-2xl text-gold-400">02</span> | |
| <div class="hidden md:block absolute top-1/2 left-full w-full h-px bg-gold-500/20"></div> | |
| </div> | |
| <h3 class="font-serif text-xl text-gold-100 mb-3">Design</h3> | |
| <p class="text-noir-400 text-sm">Engineering schematics, 3D renders, and equipment selection tailored to your aesthetic.</p> | |
| </div> | |
| <div class="text-center scroll-reveal" style="transition-delay: 200ms;"> | |
| <div class="w-16 h-16 mx-auto mb-6 border border-gold-500/30 rounded-full flex items-center justify-center relative"> | |
| <span class="font-serif text-2xl text-gold-400">03</span> | |
| <div class="hidden md:block absolute top-1/2 left-full w-full h-px bg-gold-500/20"></div> | |
| </div> | |
| <h3 class="font-serif text-xl text-gold-100 mb-3">Integration</h3> | |
| <p class="text-noir-400 text-sm">White-glove installation by certified technicians with architectural precision.</p> | |
| </div> | |
| <div class="text-center scroll-reveal" style="transition-delay: 300ms;"> | |
| <div class="w-16 h-16 mx-auto mb-6 border border-gold-500/30 rounded-full flex items-center justify-center"> | |
| <span class="font-serif text-2xl text-gold-400">04</span> | |
| </div> | |
| <h3 class="font-serif text-xl text-gold-100 mb-3">Service</h3> | |
| <p class="text-noir-400 text-sm">Ongoing support, remote monitoring, and seasonal optimization for life.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-24 bg-noir-950 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,_rgba(212,175,55,0.1)_0%,_transparent_50%)]"></div> | |
| </div> | |
| <div class="max-w-4xl mx-auto px-6 lg:px-8 relative z-10"> | |
| <div class="glass-panel p-8 md:p-12 rounded-sm scroll-reveal"> | |
| <div class="text-center mb-12"> | |
| <span class="text-gold-500 tracking-[0.3em] text-xs uppercase mb-4 block">Begin Your Journey</span> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold mb-6">Request a <span class="gold-gradient-text">Consultation</span></h2> | |
| <p class="text-noir-400">Private consultations available for estates and architectural projects.</p> | |
| </div> | |
| <form class="space-y-6" onsubmit="handleSubmit(event)"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-xs tracking-widest uppercase text-gold-400 mb-2">Full Name</label> | |
| <input type="text" class="w-full bg-noir-900/50 border border-gold-500/30 rounded-sm px-4 py-3 text-gold-100 focus:outline-none focus:border-gold-500 transition-colors" placeholder="Your name"> | |
| </div> | |
| <div> | |
| <label class="block text-xs tracking-widest uppercase text-gold-400 mb-2">Email</label> | |
| <input type="email" class="w-full bg-noir-900/50 border border-gold-500/30 rounded-sm px-4 py-3 text-gold-100 focus:outline-none focus:border-gold-500 transition-colors" placeholder="your@email.com"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-xs tracking-widest uppercase text-gold-400 mb-2">Phone</label> | |
| <input type="tel" class="w-full bg-noir-900/50 border border-gold-500/30 rounded-sm px-4 py-3 text-gold-100 focus:outline-none focus:border-gold-500 transition-colors" placeholder="(555) 000-0000"> | |
| </div> | |
| <div> | |
| <label class="block text-xs tracking-widest uppercase text-gold-400 mb-2">Project Type</label> | |
| <select class="w-full bg-noir-900/50 border border-gold-500/30 rounded-sm px-4 py-3 text-gold-100 focus:outline-none focus:border-gold-500 transition-colors"> | |
| <option value="">Select a service</option> | |
| <option value="theater">Private Theater</option> | |
| <option value="audio">Whole-Home Audio</option> | |
| <option value="smart">Smart Home</option> | |
| <option value="security">Security System</option> | |
| <option value="multi">Multiple Systems</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs tracking-widest uppercase text-gold-400 mb-2">Project Details</label> | |
| <textarea rows="4" class="w-full bg-noir-900/50 border border-gold-500/30 rounded-sm px-4 py-3 text-gold-100 focus:outline-none focus:border-gold-500 transition-colors" placeholder="Tell us about your vision, timeline, and property..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full luxury-button py-4 text-noir-950 font-semibold tracking-wider uppercase text-sm rounded-sm"> | |
| Submit Request | |
| </button> | |
| <p class="text-center text-xs text-noir-500 mt-4"> | |
| All consultations are confidential. We respect your privacy. | |
| </p> | |
| </form> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mt-12 text-center"> | |
| <div class="scroll-reveal"> | |
| <i data-lucide="map-pin" class="w-6 h-6 text-gold-400 mx-auto mb-3"></i> | |
| <p class="text-sm text-noir-300">Los Angeles • New York • Miami</p> | |
| </div> | |
| <div class="scroll-reveal" style="transition-delay: 100ms;"> | |
| <i data-lucide="phone" class="w-6 h-6 text-gold-400 mx-auto mb-3"></i> | |
| <p class="text-sm text-noir-300">+1 (310) 555-AURI</p> | |
| </div> | |
| <div class="scroll-reveal" style="transition-delay: 200ms;"> | |
| <i data-lucide="mail" class="w-6 h-6 text-gold-400 mx-auto mb-3"></i> | |
| <p class="text-sm text-noir-300">concierge@auriustech.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-noir-950 border-t border-gold-500/20 pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-12 mb-12"> | |
| <div class="md:col-span-2"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-gold-400 to-gold-600 rounded-sm flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-5 h-5 text-noir-950"></i> | |
| </div> | |
| <span class="font-serif text-xl font-bold gold-gradient-text">AURIUS TECH</span> | |
| </div> | |
| <p class="text-noir-400 text-sm leading-relaxed max-w-md mb-6"> | |
| Defining the standard for luxury low-voltage integration. We transform residential and yacht environments into intelligent, immersive sanctuaries. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 border border-gold-500/30 rounded-sm flex items-center justify-center hover:bg-gold-500/10 transition-colors"> | |
| <i data-lucide="instagram" class="w-5 h-5 text-gold-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 border border-gold-500/30 rounded-sm flex items-center justify-center hover:bg-gold-500/10 transition-colors"> | |
| <i data-lucide="linkedin" class="w-5 h-5 text-gold-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 border border-gold-500/30 rounded-sm flex items-center justify-center hover:bg-gold-500/10 transition-colors"> | |
| <i data-lucide="youtube" class="w-5 h-5 text-gold-400"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-lg text-gold-100 mb-6">Services</h4> | |
| <ul class="space-y-3 text-sm text-noir-400"> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">Home Theaters</a></li> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">Smart Automation</a></li> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">Security Systems</a></li> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">Lighting Design</a></li> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">Networks</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-serif text-lg text-gold-100 mb-6">Company</h4> | |
| <ul class="space-y-3 text-sm text-noir-400"> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">About Us</a></li> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">Careers</a></li> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">Partners</a></li> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">Press</a></li> | |
| <li><a href="#" class="hover:text-gold-400 transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gold-500/20 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-xs text-noir-500">© 2024 Aurius Tech. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-xs text-noir-500 hover:text-gold-400 transition-colors">Privacy Policy</a> | |
| <a href="#" class="text-xs text-noir-500 hover:text-gold-400 transition-colors">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Mobile Menu Toggle | |
| function toggleMobileMenu() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('hidden'); | |
| } | |
| // Scroll Reveal Animation | |
| const observerOptions = { | |
| root: null, | |
| rootMargin: '0px', | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('active'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.scroll-reveal').forEach((el) => observer.observe(el)); | |
| // Navbar Background on Scroll | |
| window.addEventListener('scroll', () => { | |
| const navbar = document.getElementById('navbar'); | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('shadow-lg'); | |
| navbar.classList.add('shadow-gold-500/5'); | |
| } else { | |
| navbar.classList.remove('shadow-lg'); | |
| navbar.classList.remove('shadow-gold-500/5'); | |
| } | |
| }); | |
| // Form Submission Handler | |
| function handleSubmit(e) { | |
| e.preventDefault(); | |
| alert('Thank you for your inquiry. Our concierge team will contact you within 24 hours.'); | |
| e.target.reset(); | |
| } | |
| // Smooth Scroll for Anchor Links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |