test / index.html
Qaspa's picture
- Initial Deployment
3d783b5 verified
Raw History Blame Contribute Delete
39.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Art Qatar | Interior Design & Architecture Company in Doha</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.hero-slider {
height: 90vh;
min-height: 500px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.project-card:hover .project-overlay {
opacity: 1;
}
.client-logo {
filter: grayscale(100%);
transition: all 0.3s ease;
}
.client-logo:hover {
filter: grayscale(0%);
transform: scale(1.05);
}
.mobile-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.mobile-menu.open {
max-height: 1000px;
}
@media (max-width: 768px) {
.hero-slider {
height: 70vh;
}
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Top Bar -->
<div class="bg-gray-900 text-white py-2 px-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex space-x-4">
<a href="tel:+97444883020" class="flex items-center hover:text-yellow-400">
<i class="fas fa-phone-alt mr-2"></i> +974 4488 3020
</a>
<a href="mailto:art@spacegroup.com.qa" class="flex items-center hover:text-yellow-400">
<i class="fas fa-envelope mr-2"></i> art@spacegroup.com.qa
</a>
</div>
<div class="flex space-x-4">
<a href="https://www.facebook.com/space.art.qa2" class="hover:text-yellow-400"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.instagram.com/space.art.qa" class="hover:text-yellow-400"><i class="fab fa-instagram"></i></a>
<a href="https://wa.me/97477410473?text=hi%20spaceart%20i%20want%20to%20design%20and%20build%20my%20villa" class="hover:text-yellow-400"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
<!-- Header -->
<header class="bg-white shadow-md sticky top-0 z-50">
<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.php" class="flex items-center">
<img src="https://www.spacegroup.com.qa/uploads/logo/logo_eb11f4c22ff6bf812742392b6349c76e.png" alt="Space Art Qatar" class="h-12">
</a>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center space-x-8">
<div class="dropdown relative">
<button class="flex items-center hover:text-yellow-600 font-medium">
Departments <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-64">
<a href="index.php?w=page&id=1" class="block px-4 py-2 hover:bg-gray-100">Space Art Architecture and Interior Design</a>
<a href="index.php?w=page&id=2" class="block px-4 py-2 hover:bg-gray-100">Space ALUM Design & Build (ALUMINUM-GLASS)</a>
<a href="index.php?w=page&id=3" class="block px-4 py-2 hover:bg-gray-100">SPACE WOOD (CARPENTRY)</a>
<a href="index.php?w=page&id=4" class="block px-4 py-2 hover:bg-gray-100">SPACE BUILD (MEP)</a>
<a href="index.php?w=page&id=5" class="block px-4 py-2 hover:bg-gray-100">GREEN SPACE (LANDSCAPE)</a>
</div>
</div>
<div class="dropdown relative">
<button class="flex items-center hover:text-yellow-600 font-medium">
Menu <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-48">
<a href="index.php?w=about" class="block px-4 py-2 hover:bg-gray-100">About us</a>
<a href="index.php?w=cprofile_requests" class="block px-4 py-2 hover:bg-gray-100">Profile</a>
<a href="index.php?w=index_project" class="block px-4 py-2 hover:bg-gray-100">Project</a>
<a href="index.php?w=galerie" class="block px-4 py-2 hover:bg-gray-100">Galerie</a>
<a href="index.php?w=contact" class="block px-4 py-2 hover:bg-gray-100">Contact us</a>
<a href="index.php?w=team" class="block px-4 py-2 hover:bg-gray-100">Staff</a>
</div>
</div>
<a href="index.php?w=cv" class="hover:text-yellow-600 font-medium">CV</a>
<div class="dropdown relative">
<button class="flex items-center hover:text-yellow-600 font-medium">
Store <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-48">
<a href="store.php" class="block px-4 py-2 hover:bg-gray-100">Store</a>
<a href="cart.php" class="block px-4 py-2 hover:bg-gray-100">Cart</a>
<a href="checkout.php" class="block px-4 py-2 hover:bg-gray-100">Checkout</a>
</div>
</div>
<div class="flex space-x-4">
<a href="login.php" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-medium">Sign In</a>
<a href="register.php" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded font-medium">Sign Up</a>
</div>
</nav>
<!-- Mobile Menu Button -->
<button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="mobile-menu md:hidden bg-white">
<div class="px-2 pt-2 pb-4 space-y-1">
<div class="mb-4">
<button class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 rounded">
<span>Departments</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="mt-1 pl-4">
<a href="index.php?w=page&id=1" class="block px-3 py-2 hover:bg-gray-100">Space Art Architecture</a>
<a href="index.php?w=page&id=2" class="block px-3 py-2 hover:bg-gray-100">Space ALUM Design</a>
<a href="index.php?w=page&id=3" class="block px-3 py-2 hover:bg-gray-100">SPACE WOOD</a>
<a href="index.php?w=page&id=4" class="block px-3 py-2 hover:bg-gray-100">SPACE BUILD</a>
<a href="index.php?w=page&id=5" class="block px-3 py-2 hover:bg-gray-100">GREEN SPACE</a>
</div>
</div>
<div class="mb-4">
<button class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 rounded">
<span>Menu</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="mt-1 pl-4">
<a href="index.php?w=about" class="block px-3 py-2 hover:bg-gray-100">About us</a>
<a href="index.php?w=cprofile_requests" class="block px-3 py-2 hover:bg-gray-100">Profile</a>
<a href="index.php?w=index_project" class="block px-3 py-2 hover:bg-gray-100">Project</a>
<a href="index.php?w=galerie" class="block px-3 py-2 hover:bg-gray-100">Galerie</a>
<a href="index.php?w=contact" class="block px-3 py-2 hover:bg-gray-100">Contact us</a>
<a href="index.php?w=team" class="block px-3 py-2 hover:bg-gray-100">Staff</a>
</div>
</div>
<a href="index.php?w=cv" class="block px-3 py-2 hover:bg-gray-100">CV</a>
<div class="mb-4">
<button class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 rounded">
<span>Store</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="mt-1 pl-4">
<a href="store.php" class="block px-3 py-2 hover:bg-gray-100">Store</a>
<a href="cart.php" class="block px-3 py-2 hover:bg-gray-100">Cart</a>
<a href="checkout.php" class="block px-3 py-2 hover:bg-gray-100">Checkout</a>
</div>
</div>
<div class="flex space-x-2 mt-4">
<a href="login.php" class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded text-center">Sign In</a>
<a href="register.php" class="flex-1 bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded text-center">Sign Up</a>
</div>
</div>
</div>
</div>
</header>
<!-- Hero Slider -->
<div class="hero-slider relative bg-gray-900 overflow-hidden">
<!-- Slider Images -->
<div class="absolute inset-0 flex transition-transform duration-1000 ease-in-out" id="slider">
<div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_288cb3f2956f8bdb89a47f8edee58840.jpg')"></div>
<div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_7ec2b9e95bcdaf775056e649987f9022.jpg')"></div>
<div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_a2208611fa99330add14e62a28c97dcb.jpg')"></div>
<div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_9aef94db7ae2c94744924f5730ef52a7.jpg')"></div>
<div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_af6acb898c15fb7e6a29b41d81c59387.jpg')"></div>
<div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_bca466bd02c25cd50b11885d9a60e6d2.jpg')"></div>
</div>
<!-- Overlay -->
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
<!-- Hero Content -->
<div class="relative h-full flex items-center">
<div class="container mx-auto px-4 text-white">
<h1 class="text-4xl md:text-6xl font-bold mb-4">Transform Your Space</h1>
<p class="text-xl md:text-2xl mb-8 max-w-2xl">Let Us Design Your Dream Home.</p>
<a href="tel:+97455859831" class="bg-yellow-500 hover:bg-yellow-600 text-white px-8 py-3 rounded-lg font-medium inline-flex items-center">
<i class="fas fa-phone-alt mr-2"></i> Contact Us +974 5585 9831
</a>
</div>
</div>
<!-- Slider Controls -->
<button id="prev" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 hover:bg-opacity-50 text-white p-2 rounded-full">
<i class="fas fa-chevron-left"></i>
</button>
<button id="next" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 hover:bg-opacity-50 text-white p-2 rounded-full">
<i class="fas fa-chevron-right"></i>
</button>
<!-- Slider Indicators -->
<div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-2">
<button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="0"></button>
<button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="1"></button>
<button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="2"></button>
<button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="3"></button>
<button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="4"></button>
<button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="5"></button>
</div>
</div>
<!-- Featured Projects -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Our Featured Projects</h2>
<div class="w-20 h-1 bg-yellow-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 -->
<div class="project-card relative overflow-hidden rounded-lg shadow-lg">
<img src="https://www.spacegroup.com.qa/uploads/sliding/slide_288cb3f2956f8bdb89a47f8edee58840.jpg" alt="Modern Luxury Private Villa -2020" class="w-full h-64 object-cover">
<div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6">
<h3 class="text-white text-xl font-bold mb-2">Modern Luxury Private Villa -2020</h3>
<p class="text-gray-300 text-center mb-4">Contemporary design with luxurious finishes</p>
<a href="index.php?w=project&album_id=26" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a>
</div>
</div>
<!-- Project 2 -->
<div class="project-card relative overflow-hidden rounded-lg shadow-lg">
<img src="https://www.spacegroup.com.qa/uploads/sliding/slide_7ec2b9e95bcdaf775056e649987f9022.jpg" alt="Modern Villa Where Minimalism Meets Luxury" class="w-full h-64 object-cover">
<div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6">
<h3 class="text-white text-xl font-bold mb-2">Modern Villa Where Minimalism Meets Luxury</h3>
<p class="text-gray-300 text-center mb-4">Clean lines with premium materials</p>
<a href="index.php?w=project&album_id=25" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a>
</div>
</div>
<!-- Project 3 -->
<div class="project-card relative overflow-hidden rounded-lg shadow-lg">
<img src="https://www.spacegroup.com.qa/uploads/sliding/slide_a2208611fa99330add14e62a28c97dcb.jpg" alt="Contemporary Dual Luxury Villas" class="w-full h-64 object-cover">
<div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6">
<h3 class="text-white text-xl font-bold mb-2">Contemporary Dual Luxury Villas</h3>
<p class="text-gray-300 text-center mb-4">A Minimalist Architectural Statement</p>
<a href="index.php?w=project&album_id=23" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a>
</div>
</div>
<!-- Project 4 -->
<div class="project-card relative overflow-hidden rounded-lg shadow-lg">
<img src="https://www.spacegroup.com.qa/uploads/sliding/slide_9aef94db7ae2c94744924f5730ef52a7.jpg" alt="CLASSIC VILLA -QATAR" class="w-full h-64 object-cover">
<div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6">
<h3 class="text-white text-xl font-bold mb-2">CLASSIC VILLA -QATAR</h3>
<p class="text-gray-300 text-center mb-4">Timeless elegance with modern comforts</p>
<a href="index.php?w=project&album_id=21" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a>
</div>
</div>
<!-- Project 5 -->
<div class="project-card relative overflow-hidden rounded-lg shadow-lg">
<img src="https://www.spacegroup.com.qa/uploads/sliding/slide_af6acb898c15fb7e6a29b41d81c59387.jpg" alt="Modern Sleek Villa" class="w-full h-64 object-cover">
<div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6">
<h3 class="text-white text-xl font-bold mb-2">Modern Sleek Villa</h3>
<p class="text-gray-300 text-center mb-4">Sleek design with functional spaces</p>
<a href="index.php?w=project&album_id=17" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a>
</div>
</div>
<!-- Project 6 -->
<div class="project-card relative overflow-hidden rounded-lg shadow-lg">
<img src="https://www.spacegroup.com.qa/uploads/sliding/slide_bca466bd02c25cd50b11885d9a60e6d2.jpg" alt="Design that defines you" class="w-full h-64 object-cover">
<div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6">
<h3 class="text-white text-xl font-bold mb-2">Design that defines you</h3>
<p class="text-gray-300 text-center mb-4">Personalized spaces reflecting your style</p>
<a href="#" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="index.php?w=index_project" class="inline-block bg-gray-800 hover:bg-gray-900 text-white px-8 py-3 rounded-lg font-medium">
View All Projects
</a>
</div>
</div>
</section>
<!-- Video Showcase -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Project Showcase</h2>
<div class="w-20 h-1 bg-yellow-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Video 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative pb-[56.25%]"> <!-- 16:9 Aspect Ratio -->
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/aeZYR_hrAFY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold mb-2">ICONIC MODERN VILLA 002 Gewan Island QATAR</h3>
</div>
</div>
<!-- Video 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative pb-[56.25%]">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/u_Xi-AbplX0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold mb-2">Modern Villa</h3>
</div>
</div>
<!-- Video 3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative pb-[56.25%]">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/ew5qbrg2XBg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold mb-2">MODERN VILLA 001</h3>
</div>
</div>
</div>
</div>
</section>
<!-- Our Clients -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Our Clients</h2>
<div class="w-20 h-1 bg-yellow-500 mx-auto"></div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8">
<div class="flex justify-center">
<img src="https://www.spacegroup.com.qa/uploads/clients/client_a34c129bf8001b13fd541270cd327d11.jpg" alt="nabina group" class="client-logo h-20 object-contain">
</div>
<div class="flex justify-center">
<img src="https://www.spacegroup.com.qa/uploads/clients/client_ba4360eef1f41c05adeea883c197cf7a.jpg" alt="Qatar international law firm" class="client-logo h-20 object-contain">
</div>
<div class="flex justify-center">
<img src="https://www.spacegroup.com.qa/uploads/clients/client_ce420e26b582ef6bc8be359dcf915a75.jpg" alt="Doha Bank" class="client-logo h-20 object-contain">
</div>
<div class="flex justify-center">
<img src="https://www.spacegroup.com.qa/uploads/clients/client_8f8aa7aa0fceb6b9fe288d0c7da6a7c0.jpg" alt="Ladies salon Ten20 diner" class="client-logo h-20 object-contain">
</div>
<div class="flex justify-center">
<img src="https://www.spacegroup.com.qa/uploads/clients/client_211c8b5cca75da5000ecbd5f8591abe9.jpg" alt="office Al Attiya & Partners" class="client-logo h-20 object-contain">
</div>
<div class="flex justify-center">
<img src="https://www.spacegroup.com.qa/uploads/clients/client_6f75d7abcaa679f97245183e7f827be2.jpg" alt="Falafel Land" class="client-logo h-20 object-contain">
</div>
<div class="flex justify-center">
<img src="https://www.spacegroup.com.qa/uploads/clients/client_1f35c74eb4e88119616e16b374dfcf84.jpg" alt="tylos pharmacy" class="client-logo h-20 object-contain">
</div>
<div class="flex justify-center">
<img src="https://www.spacegroup.com.qa/uploads/clients/client_affa6762da547a2b1d059ff413e24a74.jpg" alt="MOCOZY Showroom" class="client-logo h-20 object-contain">
</div>
<div class="flex justify-center">
<img src="https://www.spacegroup.com.qa/uploads/clients/client_5f853e0256be00042e07e2768d3a7e32.jpg" alt="ACTA" class="client-logo h-20 object-contain">
</div>
</div>
</div>
</section>
<!-- Our Departments -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Our Departments</h2>
<div class="w-20 h-1 bg-yellow-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center">
<img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541058.png" alt="Space Art Architecture and Interior Design" class="h-16 mx-auto mb-4">
<h3 class="text-lg font-semibold mb-2">Space Art Architecture and Interior Design</h3>
<a href="index.php?w=page&id=1" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center">
<img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541168.png" alt="Space ALUM Design & Build" class="h-16 mx-auto mb-4">
<h3 class="text-lg font-semibold mb-2">Space ALUM Design & Build (ALUMINUM-GLASS)</h3>
<a href="index.php?w=page&id=2" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center">
<img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541241.png" alt="SPACE WOOD" class="h-16 mx-auto mb-4">
<h3 class="text-lg font-semibold mb-2">SPACE WOOD (CARPENTRY)</h3>
<a href="index.php?w=page&id=3" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center">
<img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541388.png" alt="SPACE BUILD" class="h-16 mx-auto mb-4">
<h3 class="text-lg font-semibold mb-2">SPACE BUILD (MEP)</h3>
<a href="index.php?w=page&id=4" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center">
<img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541602.png" alt="GREEN SPACE" class="h-16 mx-auto mb-4">
<h3 class="text-lg font-semibold mb-2">GREEN SPACE (LANDSCAPE)</h3>
<a href="index.php?w=page&id=5" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a>
</div>
</div>
</div>
</section>
<!-- About Us -->
<section class="py-16 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-8 lg:mb-0 lg:pr-12">
<h2 class="text-3xl font-bold text-gray-800 mb-6">About Space Art Qatar</h2>
<p class="text-gray-600 mb-6">SPACE <strong>ART</strong> is a premier design and build company specializing in architecture, interior design, and construction services in Qatar. We combine creativity with technical expertise to deliver exceptional spaces that inspire.</p>
<p class="text-gray-600 mb-6">We <strong>Design</strong> and <strong>Build</strong> projects across various sectors including:</p>
<ul class="grid grid-cols-2 gap-4 mb-8">
<li class="flex items-center"><i class="fas fa-check text-yellow-500 mr-2"></i> Architecture</li>
<li class="flex items-center"><i class="fas fa-check text-yellow-500 mr-2"></i> Interior Design</li>
<li class="flex items-center"><i class="fas fa-check text-yellow-500 mr-2"></i> Landscape</li>
<li class="flex items-center"><i class="fas fa-check text-yellow-500 mr-2"></i> M.E.P Services</li>
</ul>
<a href="index.php?w=about" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-3 rounded-lg font-medium">
Learn More About Us
</a>
</div>
<div class="lg:w-1/2">
<div class="relative rounded-lg overflow-hidden shadow-xl">
<img src="https://www.spacegroup.com.qa/uploads/sliding/slide_288cb3f2956f8bdb89a47f8edee58840.jpg" alt="Our Team" class="w-full h-auto">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
<div class="absolute bottom-0 left-0 p-6 text-white">
<h3 class="text-xl font-bold mb-2">Our Professional Team</h3>
<p class="mb-4">Dedicated experts delivering excellence in every project</p>
<a href="index.php?w=team" class="inline-block bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded font-medium">
Meet Our Team
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="py-16 bg-gray-900 text-white">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row">
<div class="lg:w-1/3 mb-8 lg:mb-0 lg:pr-12">
<img src="https://www.spacegroup.com.qa/uploads/logo/logo_eb11f4c22ff6bf812742392b6349c76e.png" alt="Space Art Qatar" class="h-16 mb-6">
<p class="mb-6">SPACE <strong class="text-yellow-400">ART</strong> is a premier design and build company specializing in architecture, interior design, and construction services in Qatar.</p>
<div class="flex space-x-4">
<a href="https://www.facebook.com/space.art.qa2" class="text-white hover:text-yellow-400"><i class="fab fa-facebook-f text-xl"></i></a>
<a href="https://www.instagram.com/space.art.qa" class="text-white hover:text-yellow-400"><i class="fab fa-instagram text-xl"></i></a>
<a href="https://wa.me/97477410473?text=hi%20spaceart%20i%20want%20to%20design%20and%20build%20my%20villa" class="text-white hover:text-yellow-400"><i class="fab fa-whatsapp text-xl"></i></a>
</div>
</div>
<div class="lg:w-1/3 mb-8 lg:mb-0 lg:px-6">
<h3 class="text-xl font-bold mb-6 border-b border-yellow-400 pb-2">Contact Info</h3>
<ul class="space-y-4">
<li class="flex items-start">
<i class="fas fa-map-marker-alt text-yellow-400 mt-1 mr-3"></i>
<div>
<p>P.O. Box 20102, Ahmed Bin Ali Street,</p>
<p>Al-Ajlan Building (2nd floor), Bin Omran,</p>
<p>Doha, Qatar</p>
<a href="https://www.google.com/maps/embed/v1/place?key=AIzaSyCNveGQ9bfpKFwWzQLLftrR9hNiHwdqQG8&q=Space%20Art%20Interior%20Design%20qatar%20doha" class="text-yellow-400 hover:underline">View on Map</a>
</div>
</li>
<li class="flex items-center">
<i class="fas fa-envelope text-yellow-400 mr-3"></i>
<a href="mailto:art@spacegroup.com.qa" class="hover:text-yellow-400">art@spacegroup.com.qa</a>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt text-yellow-400 mr-3"></i>
<div>
<p>+974 5585 9831</p>
<p>+974 4488 3020</p>
<p>+974 4488 3070</p>
</div>
</li>
<li class="flex items-center">
<i class="fas fa-clock text-yellow-400 mr-3"></i>
<div>
<p>Sat–Wed: 8:00 am – 5:00 pm</p>
<p>Thursday: 8:00 am – 1:00 pm</p>
<p>Friday: Closed</p>
</div>
</li>
</ul>
</div>
<div class="lg:w-1/3 lg:pl-6">
<h3 class="text-xl font-bold mb-6 border-b border-yellow-400 pb-2">Quick Links</h3>
<div class="grid grid-cols-2 gap-4">
<a href="index.php?w=contact" class="hover:text-yellow-400">Contact Us</a>
<a href="index.php" class="hover:text-yellow-400">Home</a>
<a href="index.php?w=about" class="hover:text-yellow-400">About</a>
<a href="index.php?w=team" class="hover:text-yellow-400">Staff</a>
<a href="index.php?w=cv" class="hover:text-yellow-400">Career</a>
<a href="index.php?w=galerie" class="hover:text-yellow-400">Gallery</a>
<a href="index.php?w=index_project" class="hover:text-yellow-400">Projects</a>
<a href="store.php" class="hover:text-yellow-400">Store</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-6">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p>© 2025 Space Art Qatar | Interior Design & Architecture Company in Doha. All rights reserved.</p>
</div>
<div>
<a href="#top" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded inline-flex items-center">
<i class="fas fa-arrow-up mr-2"></i> Back to Top
</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile Menu Toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('open');
});
// Image Slider
let currentSlide = 0;
const slides = document.querySelectorAll('#slider > div');
const totalSlides = slides.length;
const slider = document.getElementById('slider');
const indicators = document.querySelectorAll('.slider-indicator');
function showSlide(index) {
if (index >= totalSlides) {
currentSlide = 0;
} else if (index < 0) {
currentSlide = totalSlides - 1;
} else {
currentSlide = index;
}
const offset = -currentSlide * 100;
slider.style.transform = `translateX(${offset}%)`;
// Update indicators
indicators.forEach((indicator, i) => {
if (i === currentSlide) {
indicator.classList.add('bg-opacity-100');
indicator.classList.remove('bg-opacity-50');
} else {
indicator.classList.remove('bg-opacity-100');
indicator.classList.add('bg-opacity-50');
}
});
}
// Next/previous controls
document.getElementById('next').addEventListener('click', () => {
showSlide(currentSlide + 1);
});
document.getElementById('prev').addEventListener('click', () => {
showSlide(currentSlide - 1);
});
// Indicator controls
indicators.forEach((indicator, i) => {
indicator.addEventListener('click', () => {
showSlide(i);
});
});
// Auto slide
setInterval(() => {
showSlide(currentSlide + 1);
}, 5000);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Qaspa/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>