| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Our Projects | FloorCraft Kenya</title> |
| |
| </head> |
| <body class="font-sans text-dark bg-white"> |
| |
|
|
| <section class="py-20 hero-clip-path bg-gradient-to-r from-primary to-secondary text-white"> |
| <div class="container mx-auto px-4 py-32"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">Our Portfolio</h1> |
| <p class="text-xl">Explore our premium flooring installations across East Africa</p> |
| </div> |
| </section> |
|
|
| <section class="py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> |
| <button class="px-4 py-2 rounded-full bg-primary text-white">All Projects</button> |
| <button class="px-4 py-2 rounded-full border">Residential</button> |
| <button class="px-4 py-2 rounded-full border">Commercial</button> |
| <button class="px-4 py-2 rounded-full border">Terrazzo</button> |
| <button class="px-4 py-2 rounded-full border">Marble</button> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="group relative overflow-hidden rounded-lg h-96"> |
| <img src="http://static.photos/indoor/1024x576/1" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 flex items-end p-6 transition"> |
| <div class="translate-y-8 group-hover:translate-y-0 transition duration-500"> |
| <h3 class="text-white text-xl font-bold">Karen Residence</h3> |
| <p class="text-gray-200">Terrazzo Flooring | 2023</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| </div> |
|
|
| <div class="text-center mt-12"> |
| <button class="px-6 py-3 border border-primary text-primary rounded-full hover:bg-primary hover:text-white transition"> |
| Load More Projects |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| |
| |
| </body> |
| </html> |
