Spaces:
Running
Running
Download index.html from subratchauhan/subrat: direct link, hf CLI and curl.
- Browser
- Download file 43.5 kB
-
https://huggingface.co/spaces/subratchauhan/subrat/resolve/main/index.html
- Command line
-
hf download hf://spaces/subratchauhan/subrat/index.html
-
curl -L -o index.html https://huggingface.co/spaces/subratchauhan/subrat/resolve/main/index.html
43.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Spaciaz - Real Estate & Construction Group</title> | |
| <meta name="description" content="Spaciaz - Premium Real Estate & Construction Group specializing in modern architecture and sustainable building solutions"> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | |
| <!-- Fonts --> | |
| <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=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <!-- CSS & JS --> | |
| <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> | |
| <!-- Tailwind Config --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0a2463', | |
| secondary: '#FFD700', | |
| accent: '#3e92cc', | |
| dark: '#1e1e24', | |
| light: '#f8f9fa' | |
| }, | |
| fontFamily: { | |
| sans: ['Poppins', 'sans-serif'], | |
| serif: ['Playfair Display', 'serif'] | |
| }, | |
| container: { | |
| center: true, | |
| padding: { | |
| DEFAULT: '1rem', | |
| sm: '2rem', | |
| lg: '4rem', | |
| xl: '5rem', | |
| '2xl': '6rem', | |
| }, | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| z-index: -1; | |
| } | |
| @media (max-width: 768px) { | |
| .hero-video { | |
| height: 100vh; | |
| } | |
| } | |
| .hero-overlay { | |
| background: linear-gradient(90deg, rgba(10, 36, 99, 0.85) 0%, rgba(10, 36, 99, 0.7) 50%, rgba(10, 36, 99, 0.85) 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .project-card:hover .project-overlay { | |
| opacity: 1; | |
| } | |
| .project-overlay { | |
| background: rgba(10, 36, 99, 0.85); | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-slider .slick-slide { | |
| padding: 0 15px; | |
| } | |
| .testimonial-slider .slick-list { | |
| margin: 0 -15px; | |
| } | |
| .header-sticky { | |
| transition: all 0.3s ease; | |
| } | |
| .header-scrolled { | |
| background: rgba(10, 36, 99, 0.95); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .hamburger-line { | |
| transition: all 0.3s ease; | |
| } | |
| .hamburger-active .hamburger-line:nth-child(1) { | |
| transform: rotate(45deg) translate(5px, 5px); | |
| } | |
| .hamburger-active .hamburger-line:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .hamburger-active .hamburger-line:nth-child(3) { | |
| transform: rotate(-45deg) translate(5px, -5px); | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease; | |
| } | |
| .mobile-menu-open { | |
| max-height: 1000px; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans text-dark bg-light"> | |
| <!-- Header --> | |
| <header class="fixed w-full z-50 header-sticky" id="header"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="text-2xl font-bold text-primary"> | |
| <span class="text-secondary">SPACIAZ</span> | |
| </a> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden lg:flex items-center space-x-8"> | |
| <a href="index.html" class="text-primary font-medium hover:text-secondary transition">Home</a> | |
| <a href="#services" class="text-primary font-medium hover:text-secondary transition">Services</a> | |
| <a href="#projects" class="text-primary font-medium hover:text-secondary transition">Projects</a> | |
| <a href="#about" class="text-primary font-medium hover:text-secondary transition">About</a> | |
| <a href="#testimonials" class="text-primary font-medium hover:text-secondary transition">Testimonials</a> | |
| <a href="#contact" class="text-primary font-medium hover:text-secondary transition">Contact</a> | |
| <a href="#" class="bg-secondary text-primary px-6 py-2 rounded font-medium hover:bg-opacity-90 transition">Get a Quote</a> | |
| </nav> | |
| <!-- Mobile Menu Button --> | |
| <div class="lg:hidden"> | |
| <button id="mobile-menu-button" class="flex flex-col space-y-1.5"> | |
| <span class="hamburger-line w-6 h-0.5 bg-primary"></span> | |
| <span class="hamburger-line w-6 h-0.5 bg-primary"></span> | |
| <span class="hamburger-line w-6 h-0.5 bg-primary"></span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div id="mobile-menu" class="mobile-menu lg:hidden"> | |
| <div class="flex flex-col space-y-4 py-4"> | |
| <a href="index.html" class="text-primary font-medium hover:text-secondary transition">Home</a> | |
| <a href="#services" class="text-primary font-medium hover:text-secondary transition">Services</a> | |
| <a href="#projects" class="text-primary font-medium hover:text-secondary transition">Projects</a> | |
| <a href="#about" class="text-primary font-medium hover:text-secondary transition">About</a> | |
| <a href="#testimonials" class="text-primary font-medium hover:text-secondary transition">Testimonials</a> | |
| <a href="#contact" class="text-primary font-medium hover:text-secondary transition">Contact</a> | |
| <a href="#" class="bg-secondary text-primary px-6 py-2 rounded font-medium hover:bg-opacity-90 transition text-center">Get a Quote</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="hero-overlay absolute inset-0"></div> | |
| <video autoplay muted loop class="hero-video"> | |
| <source src="http://static.photos/construction/1920x1080/1" type="video/mp4"> | |
| </video> | |
| <div class="container mx-auto px-4 z-10 text-center" data-aos="fade-up"> | |
| <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-7xl font-serif font-bold text-white mb-6"> | |
| Building Dreams <span class="text-secondary">Into Reality</span> | |
| </h1> | |
| <p class="text-lg sm:text-xl md:text-2xl text-white max-w-3xl mx-auto mb-8 px-4 sm:px-0 leading-relaxed"> | |
| We transform visions into exceptional living and working spaces through innovative design and precision craftsmanship. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#contact" class="bg-secondary text-primary px-8 py-3 rounded font-medium hover:bg-opacity-90 transition"> | |
| Contact Us | |
| </a> | |
| <a href="#projects" class="border-2 border-white text-white px-8 py-3 rounded font-medium hover:bg-white hover:text-primary transition"> | |
| Explore Projects | |
| </a> | |
| </div> | |
| </div> | |
| <a href="#services" class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i data-feather="chevron-down" class="text-white w-10 h-10"></i> | |
| </a> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <span class="text-secondary font-medium uppercase tracking-wider text-sm">Our Services</span> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-primary mt-3 mb-5">What We Offer</h2> | |
| <div class="w-24 h-1 bg-secondary mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 px-4 sm:px-0"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-light p-8 rounded-lg transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="home" class="text-primary w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Residential Construction</h3> | |
| <p class="text-gray-600"> | |
| Custom home building and remodeling services tailored to your unique lifestyle and preferences. | |
| </p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-light p-8 rounded-lg transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="briefcase" class="text-primary w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Commercial Projects</h3> | |
| <p class="text-gray-600"> | |
| Office buildings, retail spaces, and commercial complexes designed for functionality and aesthetics. | |
| </p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-light p-8 rounded-lg transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="layers" class="text-primary w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Architecture Design</h3> | |
| <p class="text-gray-600"> | |
| Innovative architectural solutions that blend form, function, and sustainability. | |
| </p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-light p-8 rounded-lg transition duration-300" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="dollar-sign" class="text-primary w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Real Estate</h3> | |
| <p class="text-gray-600"> | |
| Comprehensive real estate services including property development, sales, and investment consulting. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <span class="text-secondary font-medium uppercase tracking-wider text-sm">Our Portfolio</span> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-primary mt-3 mb-5">Featured Projects</h2> | |
| <div class="w-24 h-1 bg-secondary mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project 1 --> | |
| <div class="relative overflow-hidden rounded-lg group" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="http://static.photos/construction/640x360/1" alt="Modern Residence" class="w-full h-80 object-cover"> | |
| <div class="project-overlay absolute inset-0 flex flex-col justify-end p-6 opacity-0"> | |
| <h3 class="text-white text-xl font-bold mb-2">Modern Residence</h3> | |
| <p class="text-gray-300 mb-4">Contemporary home design with sustainable materials</p> | |
| <a href="#" class="text-secondary font-medium flex items-center"> | |
| View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="relative overflow-hidden rounded-lg group" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="http://static.photos/construction/640x360/2" alt="Office Complex" class="w-full h-80 object-cover"> | |
| <div class="project-overlay absolute inset-0 flex flex-col justify-end p-6 opacity-0"> | |
| <h3 class="text-white text-xl font-bold mb-2">Office Complex</h3> | |
| <p class="text-gray-300 mb-4">Innovative workspace for creative professionals</p> | |
| <a href="#" class="text-secondary font-medium flex items-center"> | |
| View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="relative overflow-hidden rounded-lg group" data-aos="fade-up" data-aos-delay="300"> | |
| <img src="http://static.photos/construction/640x360/3" alt="Urban Renovation" class="w-full h-80 object-cover"> | |
| <div class="project-overlay absolute inset-0 flex flex-col justify-end p-6 opacity-0"> | |
| <h3 class="text-white text-xl font-bold mb-2">Urban Renovation</h3> | |
| <p class="text-gray-300 mb-4">Historic building restoration with modern amenities</p> | |
| <a href="#" class="text-secondary font-medium flex items-center"> | |
| View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="relative overflow-hidden rounded-lg group" data-aos="fade-up" data-aos-delay="400"> | |
| <img src="http://static.photos/construction/640x360/4" alt="Luxury Villa" class="w-full h-80 object-cover"> | |
| <div class="project-overlay absolute inset-0 flex flex-col justify-end p-6 opacity-0"> | |
| <h3 class="text-white text-xl font-bold mb-2">Luxury Villa</h3> | |
| <p class="text-gray-300 mb-4">Exclusive waterfront property with premium finishes</p> | |
| <a href="#" class="text-secondary font-medium flex items-center"> | |
| View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="relative overflow-hidden rounded-lg group" data-aos="fade-up" data-aos-delay="500"> | |
| <img src="http://static.photos/construction/640x360/5" alt="Retail Center" class="w-full h-80 object-cover"> | |
| <div class="project-overlay absolute inset-0 flex flex-col justify-end p-6 opacity-0"> | |
| <h3 class="text-white text-xl font-bold mb-2">Retail Center</h3> | |
| <p class="text-gray-300 mb-4">Mixed-use development with shopping and dining</p> | |
| <a href="#" class="text-secondary font-medium flex items-center"> | |
| View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="relative overflow-hidden rounded-lg group" data-aos="fade-up" data-aos-delay="600"> | |
| <img src="http://static.photos/construction/640x360/6" alt="Hospitality Project" class="w-full h-80 object-cover"> | |
| <div class="project-overlay absolute inset-0 flex flex-col justify-end p-6 opacity-0"> | |
| <h3 class="text-white text-xl font-bold mb-2">Hospitality Project</h3> | |
| <p class="text-gray-300 mb-4">Boutique hotel with unique architectural features</p> | |
| <a href="#" class="text-secondary font-medium flex items-center"> | |
| View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12" data-aos="fade-up"> | |
| <a href="#" class="inline-flex items-center px-8 py-3 border border-primary text-primary font-medium rounded hover:bg-primary hover:text-white transition"> | |
| View All Projects <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12" data-aos="fade-right"> | |
| <img src="http://static.photos/construction/640x360/7" alt="About Us" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="lg:w-1/2" data-aos="fade-left"> | |
| <span class="text-secondary font-medium">ABOUT US</span> | |
| <h2 class="text-3xl md:text-4xl font-serif font-bold text-primary mt-2 mb-6">Building Excellence Since 2005</h2> | |
| <p class="text-gray-600 mb-6"> | |
| Spaciaz is a premier construction and real estate development company dedicated to delivering exceptional quality and innovative design. With over 15 years of experience, we've built a reputation for excellence in both residential and commercial projects. | |
| </p> | |
| <div class="mb-8"> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="check-circle" class="text-secondary w-5 h-5"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-lg font-medium text-primary">Our Mission</h4> | |
| <p class="text-gray-600"> | |
| To transform visions into reality through innovative design, quality craftsmanship, and exceptional service. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="check-circle" class="text-secondary w-5 h-5"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-lg font-medium text-primary">Our Vision</h4> | |
| <p class="text-gray-600"> | |
| To be the most trusted name in construction and real estate development, known for quality, integrity, and innovation. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="check-circle" class="text-secondary w-5 h-5"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-lg font-medium text-primary">Our Values</h4> | |
| <p class="text-gray-600"> | |
| Integrity, quality, innovation, sustainability, and client satisfaction are at the core of everything we do. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="bg-primary text-white px-6 py-3 rounded"> | |
| <span class="block text-2xl font-bold">15+</span> | |
| <span class="text-sm">Years Experience</span> | |
| </div> | |
| <div class="bg-primary text-white px-6 py-3 rounded"> | |
| <span class="block text-2xl font-bold">250+</span> | |
| <span class="text-sm">Projects Completed</span> | |
| </div> | |
| <div class="bg-primary text-white px-6 py-3 rounded"> | |
| <span class="block text-2xl font-bold">50+</span> | |
| <span class="text-sm">Expert Team Members</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <span class="text-secondary font-medium uppercase tracking-wider text-sm">Testimonials</span> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-primary mt-3 mb-5">What Our Clients Say</h2> | |
| <div class="w-24 h-1 bg-secondary mx-auto"></div> | |
| </div> | |
| <div class="max-w-4xl mx-auto testimonial-slider" data-aos="fade-up"> | |
| <!-- Testimonial 1 --> | |
| <div class="px-4"> | |
| <div class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/100x100/1" alt="Client" class="w-16 h-16 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-primary">Michael Johnson</h4> | |
| <p class="text-gray-600">CEO, TechCorp</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6"> | |
| "Spaciaz transformed our outdated office into a modern, functional workspace that perfectly reflects our brand. Their attention to detail and commitment to quality was evident throughout the entire process." | |
| </p> | |
| <div class="flex text-secondary"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="px-4"> | |
| <div class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/100x100/2" alt="Client" class="w-16 h-16 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-primary">Sarah Williams</h4> | |
| <p class="text-gray-600">Homeowner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6"> | |
| "Building our dream home with Spaciaz was an incredible experience. They listened to our needs, offered creative solutions, and delivered beyond our expectations. We couldn't be happier with the result." | |
| </p> | |
| <div class="flex text-secondary"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="px-4"> | |
| <div class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/100x100/3" alt="Client" class="w-16 h-16 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-primary">David Chen</h4> | |
| <p class="text-gray-600">Property Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6"> | |
| "We've worked with Spaciaz on multiple development projects and they consistently deliver on time and on budget. Their expertise in both construction and real estate makes them an invaluable partner." | |
| </p> | |
| <div class="flex text-secondary"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-primary text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <span class="text-secondary font-medium uppercase tracking-wider text-sm">Contact Us</span> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-white mt-3 mb-5">Get In Touch</h2> | |
| <div class="w-24 h-1 bg-secondary mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-8 lg:gap-12 px-4 sm:px-0"> | |
| <div class="lg:w-1/2" data-aos="fade-right"> | |
| <h3 class="text-2xl font-serif font-bold mb-6">Contact Information</h3> | |
| <p class="mb-8 text-gray-300"> | |
| Have a project in mind or questions about our services? Reach out to us using the form or contact details below. Our team is ready to assist you. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="map-pin" class="text-secondary w-5 h-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Address</h4> | |
| <p class="text-gray-300">123 Construction Ave, Building 5<br>New York, NY 10001</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="mail" class="text-secondary w-5 h-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Email</h4> | |
| <p class="text-gray-300">info@spaciaz.com<br>support@spaciaz.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="phone" class="text-secondary w-5 h-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Phone</h4> | |
| <p class="text-gray-300">+1 (555) 123-4567<br>+1 (555) 765-4321</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="clock" class="text-secondary w-5 h-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Hours</h4> | |
| <p class="text-gray-300">Monday - Friday: 9am - 6pm<br>Saturday: 10am - 2pm</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary-dark flex items-center justify-center hover:bg-secondary transition"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary-dark flex items-center justify-center hover:bg-secondary transition"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary-dark flex items-center justify-center hover:bg-secondary transition"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary-dark flex items-center justify-center hover:bg-secondary transition"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2" data-aos="fade-left"> | |
| <div class="bg-white rounded-lg shadow-xl p-8 text-dark"> | |
| <h3 class="text-2xl font-serif font-bold text-primary mb-6">Send Us a Message</h3> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="bg-secondary text-primary px-8 py-3 rounded font-medium hover:bg-opacity-90 transition w-full md:w-auto"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <div class="h-96 w-full"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215373510321!2d-73.98784492416498!3d40.74844097138995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1712345678901!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- About Widget --> | |
| <div> | |
| <h3 class="text-xl font-serif font-bold mb-6">About Spaciaz</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Spaciaz is a premier construction and real estate development company dedicated to delivering exceptional quality and innovative design. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <div> | |
| <h3 class="text-xl font-serif font-bold mb-6">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-secondary transition">Home</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-secondary transition">Services</a></li> | |
| <li><a href="#projects" class="text-gray-400 hover:text-secondary transition">Projects</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-secondary transition">About Us</a></li> | |
| <li><a href="#testimonials" class="text-gray-400 hover:text-secondary transition">Testimonials</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-secondary transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact Info --> | |
| <div> | |
| <h3 class="text-xl font-serif font-bold mb-6">Contact Info</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i data-feather="map-pin" class="text-secondary w-5 h-5 mt-1 flex-shrink-0"></i> | |
| <span class="ml-3 text-gray-400">123 Construction Ave, Building 5<br>New York, NY 10001</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="mail" class="text-secondary w-5 h-5 mt-1 flex-shrink-0"></i> | |
| <span class="ml-3 text-gray-400">info@spaciaz.com<br>support@spaciaz.com</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="phone" class="text-secondary w-5 h-5 mt-1 flex-shrink-0"></i> | |
| <span class="ml-3 text-gray-400">+1 (555) 123-4567<br>+1 (555) 765-4321</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Newsletter --> | |
| <div> | |
| <h3 class="text-xl font-serif font-bold mb-6">Newsletter</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Subscribe to our newsletter to get updates on our latest projects and offers. | |
| </p> | |
| <form class="flex flex-col sm:flex-row"> | |
| <input type="email" placeholder="Your Email" class="px-4 py-2 rounded-l focus:outline-none text-dark w-full"> | |
| <button type="submit" class="bg-secondary text-primary px-4 py-2 rounded-r"> | |
| <i data-feather="send" class="w-5 h-5"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0"> | |
| © 2023 Spaciaz. All Rights Reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenuButton.classList.toggle('hamburger-active'); | |
| mobileMenu.classList.toggle('mobile-menu-open'); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenuButton.classList.remove('hamburger-active'); | |
| mobileMenu.classList.remove('mobile-menu-open'); | |
| }); | |
| }); | |
| // Header scroll effect | |
| window.addEventListener('scroll', () => { | |
| const header = document.getElementById('header'); | |
| if (window.scrollY > 100) { | |
| header.classList.add('header-scrolled'); | |
| } else { | |
| header.classList.remove('header-scrolled'); | |
| } | |
| }); | |
| // Initialize Testimonial Slider | |
| $(document).ready(function(){ | |
| $('.testimonial-slider').slick({ | |
| dots: true, | |
| arrows: false, | |
| infinite: true, | |
| speed: 300, | |
| slidesToShow: 1, | |
| adaptiveHeight: true, | |
| autoplay: true, | |
| autoplaySpeed: 5000, | |
| responsive: [ | |
| { | |
| breakpoint: 768, | |
| settings: { | |
| dots: false | |
| } | |
| } | |
| ] | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |