subrat / index.html
subratchauhan's picture
give me link where i can see this as demo - Initial Deployment
b40f9f9 verified
Raw History Blame Contribute Delete
43.5 kB
<!DOCTYPE html>
<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">
&copy; 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>