Dwidar92/luxecasa-interiors
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Our Projects | LuxeCasa Interiors</title>7 <meta name="description" content="Explore our portfolio of exquisite interior design projects across New Cairo including Rehab City, Madinaty, and more.">8 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12 <script src="https://cdn.jsdelivr.net/npm/isotope-layout@3/dist/isotope.pkgd.min.js"></script>13 <style>14 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');15 .font-playfair { font-family: 'Playfair Display', serif; }16 .font-montserrat { font-family: 'Montserrat', sans-serif; }17 .gold-gradient {18 background: linear-gradient(90deg, #D4AF37 0%, #F4E5C2 50%, #D4AF37 100%);19 }20 .project-item {21 transition: transform 0.3s ease, box-shadow 0.3s ease;22 }23 .project-item:hover {24 transform: translateY(-5px);25 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);26 }27 </style>28</head>29<body class="bg-beige-50 font-montserrat">30 <!-- Navigation -->31 <nav class="bg-black text-white py-4 px-6 shadow-lg sticky top-0 z-50">32 <div class="container mx-auto flex justify-between items-center">33 <div class="flex items-center space-x-2">34 <img src="https://huggingface.co/spaces/Dwidar92/luxecasa-interiors/resolve/main/images/WhatsApp Image 2025-10-09 at 17.40.28_b2738a0d.jpg" alt="LuxeCasa Interiors Logo" class="h-12">35<span class="font-playfair text-xl hidden md:block">EL KENANA DESIGNS</span>36 </div>37 <div class="hidden md:flex space-x-8">38 <a href="index.html" class="text-white hover:text-gold-400 transition">Home</a>39 <a href="about.html" class="text-white hover:text-gold-400 transition">About</a>40 <a href="services.html" class="text-white hover:text-gold-400 transition">Services</a>41 <a href="projects.html" class="text-gold-400">Projects</a>42 <a href="contact.html" class="text-white hover:text-gold-400 transition">Contact</a>43 </div>44 <button class="md:hidden text-white">45 <i data-feather="menu"></i>46 </button>47 </div>48 </nav>49 50 <!-- Projects Hero -->51 <section class="py-20 bg-black text-white relative overflow-hidden">52 <img src="http://static.photos/interior/1200x630/1" alt="Projects Banner" class="absolute inset-0 w-full h-full object-cover opacity-50">53 <div class="container mx-auto px-6 relative z-10">54 <div class="max-w-3xl mx-auto text-center">55 <h1 class="font-playfair text-4xl md:text-5xl mb-6">Our Portfolio</h1>56 <div class="w-24 h-1 gold-gradient mx-auto mb-8"></div>57 <p class="font-montserrat text-xl">Explore our curated collection of completed projects showcasing our design expertise across New Cairo.</p>58 </div>59 </div>60 </section>61 62 <!-- Project Filter -->63 <section class="py-12 bg-white">64 <div class="container mx-auto px-6">65 <div class="flex flex-wrap justify-center gap-4 mb-8">66 <button class="filter-btn px-4 py-2 rounded-full border border-black text-black hover:bg-black hover:text-white transition" data-filter="*">All Projects</button>67 <button class="filter-btn px-4 py-2 rounded-full border border-black text-black hover:bg-black hover:text-white transition" data-filter=".residential">Residential</button>68 <button class="filter-btn px-4 py-2 rounded-full border border-black text-black hover:bg-black hover:text-white transition" data-filter=".commercial">Commercial</button>69 <button class="filter-btn px-4 py-2 rounded-full border border-black text-black hover:bg-black hover:text-white transition" data-filter=".new-cairo">New Cairo</button>70 <button class="filter-btn px-4 py-2 rounded-full border border-black text-black hover:bg-black hover:text-white transition" data-filter=".rehab">Rehab City</button>71 <button class="filter-btn px-4 py-2 rounded-full border border-black text-black hover:bg-black hover:text-white transition" data-filter=".madinaty">Madinaty</button>72 </div>73 </div>74 </section>75 76 <!-- Projects Grid -->77 <section class="py-12 bg-beige-100">78 <div class="container mx-auto px-6">79 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="projects-container">80 <!-- Project 1 -->81 <div class="project-item residential new-cairo rounded-lg overflow-hidden bg-white shadow-md">82 <img src="http://static.photos/interior/1024x576/1" alt="Rehab City Villa" class="w-full h-64 object-cover">83 <div class="p-6">84 <div class="flex justify-between items-start mb-2">85 <h3 class="font-playfair text-xl">Rehab City Villa</h3>86 <span class="bg-black text-white text-xs px-2 py-1 rounded">Residential</span>87 </div>88 <p class="font-montserrat text-gray-600 mb-4">A modern luxury villa with Egyptian cultural elements woven throughout the design.</p>89 <div class="flex justify-between items-center">90 <span class="text-sm text-gray-500">Completed: 2022</span>91 <a href="#" class="text-black hover:text-gold-400 transition flex items-center">92 View More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>93 </a>94 </div>95 </div>96 </div>97 98 <!-- Project 2 -->99 <div class="project-item commercial new-cairo rounded-lg overflow-hidden bg-white shadow-md">100 <img src="http://static.photos/interior/1024x576/2" alt="Dental Clinic" class="w-full h-64 object-cover">101 <div class="p-6">102 <div class="flex justify-between items-start mb-2">103 <h3 class="font-playfair text-xl">Masr El Gededa Clinic</h3>104 <span class="bg-black text-white text-xs px-2 py-1 rounded">Commercial</span>105 </div>106 <p class="font-montserrat text-gray-600 mb-4">A calming yet professional dental clinic design combining functionality with elegance.</p>107 <div class="flex justify-between items-center">108 <span class="text-sm text-gray-500">Completed: 2021</span>109 <a href="#" class="text-black hover:text-gold-400 transition flex items-center">110 View More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>111 </a>112 </div>113 </div>114 </div>115 116 <!-- Project 3 -->117 <div class="project-item residential madinaty rounded-lg overflow-hidden bg-white shadow-md">118 <img src="http://static.photos/interior/1024x576/3" alt="Madinaty Apartment" class="w-full h-64 object-cover">119 <div class="p-6">120 <div class="flex justify-between items-start mb-2">121 <h3 class="font-playfair text-xl">Madinaty Apartment</h3>122 <span class="bg-black text-white text-xs px-2 py-1 rounded">Residential</span>123 </div>124 <p class="font-montserrat text-gray-600 mb-4">Contemporary apartment design with smart storage solutions and warm accents.</p>125 <div class="flex justify-between items-center">126 <span class="text-sm text-gray-500">Completed: 2023</span>127 <a href="#" class="text-black hover:text-gold-400 transition flex items-center">128 View More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>129 </a>130 </div>131 </div>132 </div>133 134 <!-- Project 4 -->135 <div class="project-item residential rehab rounded-lg overflow-hidden bg-white shadow-md">136 <img src="http://static.photos/interior/1024x576/4" alt="Rehab City Penthouse" class="w-full h-64 object-cover">137 <div class="p-6">138 <div class="flex justify-between items-start mb-2">139 <h3 class="font-playfair text-xl">Rehab City Penthouse</h3>140 <span class="bg-black text-white text-xs px-2 py-1 rounded">Residential</span>141 </div>142 <p class="font-montserrat text-gray-600 mb-4">Luxurious penthouse with panoramic views and custom-designed furniture pieces.</p>143 <div class="flex justify-between items-center">144 <span class="text-sm text-gray-500">Completed: 2020</span>145 <a href="#" class="text-black hover:text-gold-400 transition flex items-center">146 View More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>147 </a>148 </div>149 </div>150 </div>151 152 <!-- Project 5 -->153 <div class="project-item commercial new-cairo rounded-lg overflow-hidden bg-white shadow-md">154 <img src="http://static.photos/interior/1024x576/5" alt="Lotus Office" class="w-full h-64 object-cover">155 <div class="p-6">156 <div class="flex justify-between items-start mb-2">157 <h3 class="font-playfair text-xl">Lotus Corporate Office</h3>158 <span class="bg-black text-white text-xs px-2 py-1 rounded">Commercial</span>159 </div>160 <p class="font-montserrat text-gray-600 mb-4">Modern workspace designed to foster creativity and collaboration among employees.</p>161 <div class="flex justify-between items-center">162 <span class="text-sm text-gray-500">Completed: 2022</span>163 <a href="#" class="text-black hover:text-gold-400 transition flex items-center">164 View More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>165 </a>166 </div>167 </div>168 </div>169 170 <!-- Project 6 -->171 <div class="project-item residential rehab rounded-lg overflow-hidden bg-white shadow-md">172 <img src="http://static.photos/interior/1024x576/6" alt="Beit El Watan Villa" class="w-full h-64 object-cover">173 <div class="p-6">174 <div class="flex justify-between items-start mb-2">175 <h3 class="font-playfair text-xl">Beit El Watan Villa</h3>176 <span class="bg-black text-white text-xs px-2 py-1 rounded">Residential</span>177 </div>178 <p class="font-montserrat text-gray-600 mb-4">Traditional Egyptian elements reinterpreted in a modern family home design.</p>179 <div class="flex justify-between items-center">180 <span class="text-sm text-gray-500">Completed: 2021</span>181 <a href="#" class="text-black hover:text-gold-400 transition flex items-center">182 View More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>183 </a>184 </div>185 </div>186 </div>187 </div>188 189 <div class="text-center mt-12">190 <button class="border-2 border-black text-black px-8 py-3 rounded-full font-medium hover:bg-black hover:text-white transition">Load More Projects</button>191 </div>192 </div>193 </section>194 195 <!-- Project Locations -->196 <section class="py-20 bg-white">197 <div class="container mx-auto px-6">198 <div class="text-center mb-16">199 <h2 class="font-playfair text-3xl md:text-4xl text-black mb-4">Areas We Serve</h2>200 <div class="w-24 h-1 gold-gradient mx-auto"></div>201 <p class="font-montserrat text-gray-600 max-w-2xl mx-auto mt-4">Our projects span across New Cairo's most prestigious communities</p>202 </div>203 204 <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">205 <div class="text-center">206 <div class="bg-beige-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">207 <i data-feather="map-pin" class="w-8 h-8 text-gold-400"></i>208 </div>209 <h3 class="font-playfair">Rehab City</h3>210 </div>211 <div class="text-center">212 <div class="bg-beige-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">213 <i data-feather="map-pin" class="w-8 h-8 text-gold-400"></i>214 </div>215 <h3 class="font-playfair">Madinaty</h3>216 </div>217 <div class="text-center">218 <div class="bg-beige-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">219 <i data-feather="map-pin" class="w-8 h-8 text-gold-400"></i>220 </div>221 <h3 class="font-playfair">Lotus</h3>222 </div>223 <div class="text-center">224 <div class="bg-beige-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">225 <i data-feather="map-pin" class="w-8 h-8 text-gold-400"></i>226 </div>227 <h3 class="font-playfair">Andalus</h3>228 </div>229 </div>230 </div>231 </section>232 233 <!-- CTA Section -->234 <section class="py-16 bg-black text-white text-center">235 <div class="container mx-auto px-6">236 <h2 class="font-playfair text-3xl mb-6">Inspired By Our Work?</h2>237 <p class="font-montserrat text-xl mb-8 max-w-2xl mx-auto">Let's discuss how we can bring your vision to life</p>238 <a href="contact.html" class="inline-block gold-gradient text-black px-8 py-3 rounded-full font-medium hover:opacity-90 transition">Schedule a Consultation</a>239 </div>240 </section>241 242 <!-- Footer -->243 <footer class="bg-black text-white py-12">244 <div class="container mx-auto px-6">245 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">246 <div>247 <img src="https://huggingface.co/spaces/Dwidar92/luxecasa-interiors/resolve/main/images/WhatsApp Image 2025-10-09 at 17.40.28_b2738a0d.jpg" alt="LuxeCasa Interiors Logo" class="h-12 mb-4">248<p class="font-montserrat text-gray-400">Crafting exceptional interiors in Egypt since 2015.</p>249 </div>250 <div>251 <h4 class="font-playfair text-lg mb-4">Quick Links</h4>252 <ul class="space-y-2">253 <li><a href="index.html" class="font-montserrat text-gray-400 hover:text-white transition">Home</a></li>254 <li><a href="about.html" class="font-montserrat text-gray-400 hover:text-white transition">About Us</a></li>255 <li><a href="services.html" class="font-montserrat text-gray-400 hover:text-white transition">Services</a></li>256 <li><a href="projects.html" class="font-montserrat text-gray-400 hover:text-white transition">Projects</a></li>257 <li><a href="contact.html" class="font-montserrat text-gray-400 hover:text-white transition">Contact</a></li>258 </ul>259 </div>260 <div>261 <h4 class="font-playfair text-lg mb-4">Contact Info</h4>262 <ul class="space-y-2">263 <li class="flex items-start">264 <i data-feather="phone" class="w-4 h-4 mr-2 mt-1 text-gold-400"></i>265 <span class="font-montserrat text-gray-400">+20 123 456 7890</span>266 </li>267 <li class="flex items-start">268 <i data-feather="mail" class="w-4 h-4 mr-2 mt-1 text-gold-400"></i>269 <span class="font-montserrat text-gray-400">info@elkenana.com</span>270 </li>271 <li class="flex items-start">272 <i data-feather="map-pin" class="w-4 h-4 mr-2 mt-1 text-gold-400"></i>273 <span class="font-montserrat text-gray-400">New Cairo, Egypt</span>274 </li>275 </ul>276 </div>277 <div>278 <h4 class="font-playfair text-lg mb-4">Follow Us</h4>279 <div class="flex space-x-4">280 <a href="#" class="text-gray-400 hover:text-white transition">281 <i data-feather="facebook" class="w-5 h-5"></i>282 </a>283 <a href="#" class="text-gray-400 hover:text-white transition">284 <i data-feather="instagram" class="w-5 h-5"></i>285 </a>286 <a href="#" class="text-gray-400 hover:text-white transition">287 <i data-feather="linkedin" class="w-5 h-5"></i>288 </a>289 <a href="#" class="text-gray-400 hover:text-white transition">290 <i data-feather="youtube" class="w-5 h-5"></i>291 </a>292 </div>293 <div class="mt-6">294 <button class="border border-gray-600 text-sm px-3 py-1 rounded flex items-center">295 <span>English</span>296 <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>297 </button>298 </div>299 </div>300 </div>301 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 font-montserrat text-sm">302 <p>© 2023 El Kenana Designs. All rights reserved.</p>303 </div>304 </div>305 </footer>306 307 <script>308 // Initialize Isotope for project filtering309 document.addEventListener('DOMContentLoaded', function() {310 const iso = new Isotope('#projects-container', {311 itemSelector: '.project-item',312 layoutMode: 'fitRows'313 });314 315 // Filter buttons316 const filterButtons = document.querySelectorAll('.filter-btn');317 filterButtons.forEach(button => {318 button.addEventListener('click', function() {319 filterButtons.forEach(btn => btn.classList.remove('bg-black', 'text-white'));320 this.classList.add('bg-black', 'text-white');321 const filterValue = this.getAttribute('data-filter');322 iso.arrange({ filter: filterValue });323 });324 });325 326 // Initialize Feather Icons327 feather.replace();328 });329 </script>330</body>331</html>332