Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>K Render Architect - Premium 3D Visualization Studio</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-white text-gray-900 font-sans"> | |
| <header class="sticky top-0 z-50 backdrop-blur-lg bg-white/80 border-b border-rose-100 shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-rose-500 to-orange-500 flex items-center justify-center font-bold text-white shadow-lg"> | |
| K | |
| </div> | |
| <div> | |
| <div class="text-lg font-bold">K Render Architect</div> | |
| <div class="text-xs text-gray-500">Premium 3D Visualisation</div> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex items-center gap-8"> | |
| <a href="#services" class="text-gray-600 hover:text-rose-500 font-medium transition-colors">Services</a> | |
| <a href="#portfolio" class="text-gray-600 hover:text-rose-500 font-medium transition-colors">Portfolio</a> | |
| <a href="#contact" class="text-gray-600 hover:text-rose-500 font-medium transition-colors">Contact</a> | |
| </nav> | |
| <a href="https://wa.me/918830079952" target="_blank" class="bg-gradient-to-r from-rose-500 to-orange-500 text-white px-5 py-2 rounded-full text-sm font-semibold shadow-md hover:shadow-lg transition-all"> | |
| WhatsApp Enquiry | |
| </a> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4"> | |
| <section class="py-16 md:py-24 grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="order-2 md:order-1"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 bg-green-50 border border-green-200 rounded-full text-sm font-medium text-green-700 mb-6"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> | |
| High-end 3D Visualisation | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight"> | |
| Turning <span class="bg-gradient-to-r from-rose-500 to-orange-500 bg-clip-text text-transparent">blueprints</span> into photoreal | |
| <span class="bg-gradient-to-r from-rose-500 to-orange-500 bg-clip-text text-transparent">visual reality</span> | |
| </h1> | |
| <p class="text-gray-600 text-lg mb-8 max-w-2xl"> | |
| Exterior facades, luxury interiors & walkthrough-ready 3D visuals – | |
| crafted for architects, builders and premium homeowners across India. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-8"> | |
| <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">3D Modeling</span> | |
| <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Exterior & Interior</span> | |
| <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Walkthrough Ready</span> | |
| <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">4K Renders</span> | |
| <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Fast Turnaround</span> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#portfolio" class="bg-gradient-to-r from-rose-500 to-orange-500 text-white px-6 py-3 rounded-full font-semibold shadow-md hover:shadow-lg transition-all"> | |
| View Portfolio | |
| </a> | |
| <a href="https://www.instagram.com/k_renderarchitect" target="_blank" class="border border-gray-300 px-6 py-3 rounded-full font-semibold hover:bg-gray-50 transition-colors"> | |
| Instagram Gallery | |
| </a> | |
| </div> | |
| <p class="mt-6 text-sm text-gray-500 italic"> | |
| *Demo website design – content & visuals customizable per your brand | |
| </p> | |
| </div> | |
| <div class="order-1 md:order-2"> | |
| <div class="bg-gradient-to-br from-gray-50 to-white rounded-3xl p-6 border border-rose-100 shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-sm text-gray-600">Featured Residence – 3D Front Elevation</div> | |
| <div class="px-3 py-1 bg-rose-100 text-rose-700 rounded-full text-xs font-semibold">Sample</div> | |
| </div> | |
| <div class="aspect-video bg-gradient-to-br from-gray-200 to-gray-300 rounded-xl overflow-hidden mb-4 relative"> | |
| <img src="http://static.photos/architecture/640x360/1" alt="Modern villa 3D elevation" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center text-gray-500 font-bold text-sm tracking-widest"> | |
| SAMPLE RENDER | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center pt-4 border-t border-gray-200"> | |
| <div> | |
| <div class="text-xl font-bold bg-gradient-to-r from-rose-500 to-orange-500 bg-clip-text text-transparent">40+</div> | |
| <div class="text-xs text-gray-600">Projects</div> | |
| </div> | |
| <div> | |
| <div class="text-xl font-bold bg-gradient-to-r from-rose-500 to-orange-500 bg-clip-text text-transparent">20+</div> | |
| <div class="text-xs text-gray-600">Interiors</div> | |
| </div> | |
| <div> | |
| <div class="text-xl font-bold bg-gradient-to-r from-rose-500 to-orange-500 bg-clip-text text-transparent">4K</div> | |
| <div class="text-xs text-gray-600">Quality</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="services" class="py-16 md:py-24"> | |
| <div class="text-center max-w-2xl mx-auto mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Services for Architects & Builders</h2> | |
| <p class="text-gray-600"> | |
| From concept to final render – detailed 3D visuals so your clients can see | |
| the project before construction begins. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-all group"> | |
| <div class="text-xs text-rose-500 font-semibold mb-2">01 · Exterior Elevation</div> | |
| <h3 class="text-xl font-bold mb-3">Modern Facade Designs</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Clean, geometric and premium exteriors for villas, bungalows and multi-storey | |
| buildings tailored to your architectural drawings. | |
| </p> | |
| <span class="inline-block px-3 py-1 bg-rose-50 text-rose-700 rounded-full text-xs font-medium">Front & side views</span> | |
| </div> | |
| <div class="bg-white rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-all group"> | |
| <div class="text-xs text-rose-500 font-semibold mb-2">02 · Interior Visualisation</div> | |
| <h3 class="text-xl font-bold mb-3">Luxury Interior Renders</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Living rooms, bedrooms, kitchens & bathrooms with realistic materials, | |
| lighting and atmospheric mood. | |
| </p> | |
| <span class="inline-block px-3 py-1 bg-rose-50 text-rose-700 rounded-full text-xs font-medium">Photo-realistic quality</span> | |
| </div> | |
| <div class="bg-white rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-all group"> | |
| <div class="text-xs text-rose-500 font-semibold mb-2">03 · Walkthrough Support</div> | |
| <h3 class="text-xl font-bold mb-3">Video Tour Concepts</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Camera-ready frames optimized for smooth walkthrough videos and | |
| compelling marketing reels. | |
| </p> | |
| <span class="inline-block px-3 py-1 bg-rose-50 text-rose-700 rounded-full text-xs font-medium">Reel-friendly layouts</span> | |
| </div> | |
| <div class="bg-white rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-all group"> | |
| <div class="text-xs text-rose-500 font-semibold mb-2">04 · Marketing Ready</div> | |
| <h3 class="text-xl font-bold mb-3">Social Media Visuals</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Renders optimized for Instagram, brochures and advertising creatives for | |
| effective real-estate promotion. | |
| </p> | |
| <span class="inline-block px-3 py-1 bg-rose-50 text-rose-700 rounded-full text-xs font-medium">High-res exports</span> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="portfolio" class="py-16 md:py-24"> | |
| <div class="text-center max-w-2xl mx-auto mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured 3D Projects</h2> | |
| <p class="text-gray-600"> | |
| Sample renders showcasing residential facades and interiors. | |
| All projects customizable to your specifications. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="rounded-2xl overflow-hidden border border-gray-200 hover:shadow-xl transition-all group"> | |
| <div class="aspect-[4/3] bg-gradient-to-br from-gray-200 to-gray-300 relative"> | |
| <img src="http://static.photos/architecture/640x360/2" alt="K Render Architect - 3D Elevation Project" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center text-gray-500 font-bold text-xs tracking-widest"> | |
| SAMPLE PROJECT | |
| </div> | |
| </div> | |
| <div class="p-4 bg-white"> | |
| <h4 class="font-bold mb-2">Contemporary 3-Storey Residence</h4> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>Exterior Elevation</span> | |
| <span>K Render Project</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-2xl overflow-hidden border border-gray-200 hover:shadow-xl transition-all group"> | |
| <div class="aspect-[4/3] bg-gradient-to-br from-gray-200 to-gray-300 relative"> | |
| <img src="http://static.photos/interior/640x360/3" alt="K Render Architect - Interior Design" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center text-gray-500 font-bold text-xs tracking-widest"> | |
| SAMPLE PROJECT | |
| </div> | |
| </div> | |
| <div class="p-4 bg-white"> | |
| <h4 class="font-bold mb-2">Luxury Living Space</h4> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>Interior Visualisation</span> | |
| <span>K Render Project</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-2xl overflow-hidden border border-gray-200 hover:shadow-xl transition-all group"> | |
| <div class="aspect-[4/3] bg-gradient-to-br from-gray-200 to-gray-300 relative"> | |
| <img src="http://static.photos/architecture/640x360/4" alt="K Render Architect - 3D Visualization" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center text-gray-500 font-bold text-xs tracking-widest"> | |
| SAMPLE PROJECT | |
| </div> | |
| </div> | |
| <div class="p-4 bg-white"> | |
| <h4 class="font-bold mb-2">Modern Architecture Design</h4> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>3D Visualization</span> | |
| <span>K Render Project</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-2xl overflow-hidden border border-gray-200 hover:shadow-xl transition-all group"> | |
| <div class="aspect-[4/3] bg-gradient-to-br from-gray-200 to-gray-300 relative"> | |
| <img src="http://static.photos/architecture/640x360/5" alt="K Render Architect - Premium Elevation" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center text-gray-500 font-bold text-xs tracking-widest"> | |
| SAMPLE PROJECT | |
| </div> | |
| </div> | |
| <div class="p-4 bg-white"> | |
| <h4 class="font-bold mb-2">Premium Villa Elevation</h4> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>Exterior Design</span> | |
| <span>K Render Project</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="py-16 md:py-24"> | |
| <div class="bg-gradient-to-br from-rose-50 to-orange-50 rounded-3xl p-8 md:p-12 border border-rose-100"> | |
| <div class="max-w-3xl"> | |
| <h3 class="text-3xl font-bold mb-4">Discuss Your Next Project</h3> | |
| <p class="text-gray-700 text-lg mb-8"> | |
| Floor plan ready hai? Bas WhatsApp par send kijiye. Hum aapke liye | |
| facade & interior ka 3D concept bana dete hain – client ko samjhana easy ho jayega. | |
| </p> | |
| <div class="flex flex-wrap gap-4 mb-8"> | |
| <a href="https://wa.me/918830079952" target="_blank" class="bg-gradient-to-r from-rose-500 to-orange-500 text-white px-6 py-3 rounded-full font-semibold shadow-md hover:shadow-lg transition-all"> | |
| WhatsApp Brief | |
| </a> | |
| <a href="tel:+918830079952" class="border border-gray-300 px-6 py-3 rounded-full font-semibold hover:bg-white transition-colors"> | |
| Quick Call | |
| </a> | |
| </div> | |
| <p class="text-sm text-gray-500 italic mb-8"> | |
| *Ye ek demo website layout hai. Text, colors aur renders aapke brand ke hisaab se customize kiye ja sakte hain. | |
| </p> | |
| <div class="pt-8 border-t border-rose-100"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm"> | |
| <div><span class="font-semibold text-rose-600">Studio:</span> K Render Architect</div> | |
| <div><span class="font-semibold text-rose-600">Phone:</span> +91 88300 79952</div> | |
| <div><span class="font-semibold text-rose-600">Instagram:</span> @k_renderarchitect</div> | |
| <div><span class="font-semibold text-rose-600">Services:</span> 3D Elevation · Interior Renders · Walkthrough</div> | |
| <div><span class="font-semibold text-rose-600">Delivery:</span> Fast turnaround with revisions</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="py-8 border-t border-gray-200 text-center text-gray-500 text-sm"> | |
| <div class="container mx-auto px-4"> | |
| © <span id="year"></span> K Render Architect · Premium 3D Visualisation Studio · Demo Website Design | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |