Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PowerHouse GC | 1010 Quebec St, Allentown PA</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> | |
| <style> | |
| :root { | |
| --cinnabar: #e24642; | |
| --apple-blossom: #ac413d; | |
| --mercury: #e2e1e0; | |
| --monza: #d90015; | |
| --sunglo: #e86b67; | |
| --boulder: #767676; | |
| --crown-of-thorns: #82211f; | |
| --martini: #aba09e; | |
| --buccaneer: #6c3a38; | |
| --light-bg: #e2e1e0; | |
| --dark-bg: #3a3a3a; | |
| --gradient-grey: #7a7a7a; | |
| } | |
| body { | |
| transition: background-color 0.5s ease, color 0.5s ease; | |
| } | |
| body.light-mode { | |
| background-color: var(--light-bg); | |
| color: #2d3748; | |
| } | |
| body.dark-mode { | |
| background-color: var(--dark-bg); | |
| color: var(--mercury); | |
| } | |
| .neu-morphism { | |
| border-radius: 20px; | |
| background: linear-gradient(145deg, var(--gradient-grey), #6a6a6a); | |
| box-shadow: 10px 10px 20px #5a5a5a, | |
| -10px -10px 20px #8a8a8a; | |
| } | |
| .neu-morphism-light { | |
| border-radius: 20px; | |
| background: #e2e1e0; | |
| box-shadow: 10px 10px 20px #c5c4c3, | |
| -10px -10px 20px #fff; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| .neon-glow { | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--cinnabar), 0 0 20px var(--cinnabar), 0 0 25px var(--cinnabar), 0 0 30px var(--cinnabar), 0 0 35px var(--cinnabar); | |
| } | |
| .particles-bg { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .rounded-corners { | |
| border-radius: 16px; | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .foreground-lighting { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .foreground-lighting::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(226, 70, 66, 0.2), transparent 30%); | |
| pointer-events: none; | |
| z-index: 1; | |
| transition: opacity 0.3s; | |
| } | |
| </style> | |
| </head> | |
| <body class="dark-mode"> | |
| <!-- Particles Background --> | |
| <div id="particles-js" class="particles-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="glass-effect fixed w-full z-50 py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="text-xl font-bold neon-glow" data-aos="fade-right"> | |
| <span class="text-white">PowerHouse</span><span class="text-red-500">GC</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-white hover:text-red-400 transition-colors">Home</a> | |
| <a href="#services" class="text-white hover:text-red-400 transition-colors">Services</a> | |
| <a href="#projects" class="text-white hover:text-red-400 transition-colors">Projects</a> | |
| <a href="#about" class="text-white hover:text-red-400 transition-colors">About</a> | |
| <a href="#contact" class="text-white hover:text-red-400 transition-colors">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full glass-effect"> | |
| <i data-feather="moon" class="text-white"></i> | |
| </button> | |
| <button class="md:hidden glass-effect p-2 rounded"> | |
| <i data-feather="menu" class="text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center foreground-lighting" data-aos="fade-in"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 neon-glow" data-aos="zoom-in"> | |
| POWERHOUSE <span class="text-red-500">GC</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto glass-effect p-6 rounded-corners" data-aos="fade-up" data-aos-delay="300"> | |
| Excellence in construction at 1010 Quebec St, Allentown PA | |
| </p> | |
| <div class="flex justify-center space-x-6" data-aos="fade-up" data-aos-delay="500"> | |
| <button class="neu-morphism px-8 py-3 rounded-corners text-white font-semibold hover:bg-red-500 transition-colors"> | |
| Our Services | |
| </button> | |
| <button class="glass-effect px-8 py-3 rounded-corners text-white font-semibold border border-red-500 hover:bg-red-500 transition-colors"> | |
| Contact Us | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 foreground-lighting"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-16 neon-glow" data-aos="fade-up">Our Services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="neu-morphism p-8 rounded-corners" data-aos="flip-left"> | |
| <div class="text-center mb-6"> | |
| <i data-feather="home" class="w-16 h-16 text-red-500 mx-auto"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4 text-center">Residential Construction</h3> | |
| <p class="text-center">Custom home building and renovations with attention to detail and quality craftsmanship.</p> | |
| </div> | |
| <div class="neu-morphism p-8 rounded-corners" data-aos="flip-left" data-aos-delay="200"> | |
| <div class="text-center mb-6"> | |
| <i data-feather="building" class="w-16 h-16 text-red-500 mx-auto"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4 text-center">Commercial Projects</h3> | |
| <p class="text-center">Office buildings, retail spaces, and commercial renovations completed on time and budget.</p> | |
| </div> | |
| <div class="neu-morphism p-8 rounded-corners" data-aos="flip-left" data-aos-delay="400"> | |
| <div class="text-center mb-6"> | |
| <i data-feather="tool" class="w-16 h-16 text-red-500 mx-auto"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4 text-center">Remodeling</h3> | |
| <p class="text-center">Transform your existing space with our expert remodeling services and design consultation.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Parallax Section --> | |
| <section id="projects" class="py-32 parallax" style="background-image: url('http://static.photos/construction/1200x630/5');"> | |
| <div class="container mx-auto px-6 text-center foreground-lighting"> | |
| <h2 class="text-4xl font-bold mb-8 neon-glow" data-aos="fade-down">Featured Projects</h2> | |
| <p class="text-xl mb-12 max-w-3xl mx-auto glass-effect p-6 rounded-corners" data-aos="fade-up"> | |
| Discover our portfolio of exceptional construction projects that showcase our commitment to quality and innovation. | |
| </p> | |
| <button class="neu-morphism px-8 py-3 rounded-corners text-white font-semibold hover:bg-red-500 transition-colors" data-aos="zoom-in"> | |
| View Portfolio | |
| </button> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 foreground-lighting"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <h2 class="text-4xl font-bold mb-6 neon-glow">About PowerHouse GC</h2> | |
| <p class="text-lg mb-6"> | |
| Located at 1010 Quebec St in Allentown PA, PowerHouse GC has been delivering exceptional construction services for over 15 years. | |
| </p> | |
| <p class="text-lg mb-8"> | |
| Our team of skilled professionals is committed to excellence, innovation, and customer satisfaction in every project we undertake. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-red-500">15+</div> | |
| <div>Years Experience</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-red-500">200+</div> | |
| <div>Projects Completed</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-red-500">100%</div> | |
| <div>Client Satisfaction</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left" class="neu-morphism rounded-corners overflow-hidden"> | |
| <img src="http://static.photos/construction/640x360/10" alt="PowerHouse GC Team" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 foreground-lighting"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-16 neon-glow" data-aos="fade-up">Get In Touch</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div data-aos="fade-right"> | |
| <div class="neu-morphism p-8 rounded-corners mb-8"> | |
| <h3 class="text-2xl font-semibold mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i data-feather="map-pin" class="w-5 h-5 mt-1 mr-3 text-red-500"></i> | |
| <span>1010 Quebec St, Allentown PA</span> | |
| </div> | |
| <div class="flex items | |
| </body> | |
| </html> |