Spaces:

Shaiknoor
/

k-render-architect

Running

App Files Files Community

Shaiknoor commited on Dec 3, 2025

Commit

6010350

verified ·

1 Parent(s): 6ec45b4

<!DOCTYPE html>

Browse files

<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" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: #05070b;
color: #f7f7f7;
line-height: 1.6;
overflow-x: hidden;
}

/* Smooth scrolling */
html {
scroll-behavior: smooth;
}

a { text-decoration: none; color: inherit; }

/* Animated background gradient */
body::before {
content: '';
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 20% 50%, rgba(245,193,92,0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(247,155,52,0.04) 0%, transparent 50%);
animation: gradientShift 15s ease infinite;
pointer-events: none;
z-index: 0;
}

@keyframes gradientShift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-5%, -5%); }
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}

/* Enhanced Header */
header {
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(20px) saturate(180%);
background: rgba(5,7,11,0.85);
border-bottom: 1px solid rgba(245,193,92,0.1);
box-shadow: 0 4px 30px rgba(0,0,0,0.3);
animation: slideDown 0.5s ease;
}

@keyframes slideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}

.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
}

.logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
letter-spacing: 0.08em;
transition: transform 0.3s ease;
cursor: pointer;
}

.logo:hover {
transform: scale(1.05);
}

.logo-mark {
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #f5c15c 0%, #f79b34 100%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 20px;
color: #1a1305;
box-shadow: 0 0 25px rgba(247,155,52,0.6), 0 4px 15px rgba(0,0,0,0.3);
animation: pulse 3s ease infinite;
}

@keyframes pulse {
0%, 100% { box-shadow: 0 0 25px rgba(247,155,52,0.6), 0 4px 15px rgba(0,0,0,0.3); }
50% { box-shadow: 0 0 35px rgba(247,155,52,0.8), 0 4px 20px rgba(0,0,0,0.4); }
}

nav ul {
display: flex;
gap: 28px;
list-style: none;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.05em;
}

nav li a {
opacity: 0.85;
transition: all 0.3s ease;
position: relative;
}

nav li a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #f5c15c, #f79b34);
transition: width 0.3s ease;
}

nav li a:hover {
opacity: 1;
color: #f5c15c;
}

nav li a:hover::after {
width: 100%;
}

.nav-cta {
padding: 10px 24px;
border-radius: 999px;
background: linear-gradient(135deg, #f5c15c 0%, #f79b34 100%);
color: #1a1305;
font-size: 13px;
font-weight: 600;
box-shadow: 0 4px 15px rgba(247,155,52,0.3);
transition: all 0.3s ease;
}

.nav-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(247,155,52,0.5);
}

/* Enhanced Hero */
.hero {
padding: 80px 0 60px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 60px;
align-items: center;
}

.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(51,255,153,0.08);
border: 1px solid rgba(51,255,153,0.3);
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.1em;
margin-bottom: 20px;
animation: fadeInUp 0.6s ease 0.2s both;
}

@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.hero-badge span {
width: 8px;
height: 8px;
border-radius: 999px;
background: #33ff99;
box-shadow: 0 0 15px rgba(51,255,153,0.9);
animation: blink 2s ease infinite;
}

@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

.hero h1 {
font-size: 48px;
line-height: 1.15;
margin-bottom: 16px;
font-weight: 800;
background: linear-gradient(135deg, #ffffff 0%, #f5c15c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fadeInUp 0.6s ease 0.3s both;
}

.hero h1 span {
display: inline-block;
background: linear-gradient(135deg, #f5c15c 0%, #f79b34 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero-sub {
font-size: 16px;
opacity: 0.9;
margin-bottom: 28px;
max-width: 520px;
line-height: 1.7;
animation: fadeInUp 0.6s ease 0.4s both;
}

.hero-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
animation: fadeInUp 0.6s ease 0.5s both;
}

.tag {
padding: 6px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.15);
font-size: 12px;
font-weight: 500;
opacity: 0.9;
transition: all 0.3s ease;
cursor: default;
}

.tag:hover {
background: rgba(245,193,92,0.1);
border-color: rgba(245,193,92,0.4);
transform: translateY(-2px);
}

.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
animation: fadeInUp 0.6s ease 0.6s both;
}

.btn-primary {
padding: 14px 32px;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #f5c15c 0%, #f79b34 100%);
color: #1a1305;
font-weight: 700;
font-size: 14px;
cursor: pointer;
box-shadow: 0 8px 30px rgba(247,155,52,0.4);
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(247,155,52,0.6);
}

.btn-ghost {
padding: 13px 28px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.25);
font-size: 14px;
font-weight: 600;
cursor: pointer;
background: rgba(255,255,255,0.03);
color: #f7f7f7;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}

.btn-ghost:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(245,193,92,0.5);
transform: translateY(-2px);
}

.hero-note {
font-size: 12px;
opacity: 0.6;
margin-top: 12px;
font-style: italic;
}

.hero-right {
position: relative;
animation: fadeInRight 0.8s ease 0.4s both;
}

@keyframes fadeInRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}

.hero-card {
border-radius: 30px;
padding: 18px;
background: radial-gradient(circle at top left, rgba(50,55,68,0.6), rgba(9,12,18,0.9) 60%);
border: 1px solid rgba(245,193,92,0.15);
box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 40px rgba(245,193,92,0.1);
transition: all 0.5s ease;
}

.hero-card:hover {
transform: translateY(-5px);
box-shadow: 0 35px 90px rgba(0,0,0,0.9), 0 0 50px rgba(245,193,92,0.15);
}

.hero-main-image {
width: 100%;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.12);
position: relative;
background: linear-gradient(135deg, #1a1d26, #0a0c11);
aspect-ratio: 16/10;
}

.hero-main-image::before {
content: 'SAMPLE RENDER';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
font-weight: 700;
color: rgba(245,193,92,0.3);
letter-spacing: 0.2em;
z-index: 1;
}

.hero-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}

.hero-card:hover .hero-main-image img {
transform: scale(1.05);
}

.hero-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 12px;
opacity: 0.9;
font-weight: 500;
}

.hero-chip {
padding: 5px 12px;
border-radius: 99px;
background: rgba(245,193,92,0.15);
border: 1px solid rgba(245,193,92,0.3);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
color: #f5c15c;
}

.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 11px;
text-align: center;
}

.hero-stats div span {
display: block;
font-size: 20px;
font-weight: 700;
background: linear-gradient(135deg, #f5c15c, #f79b34);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 4px;
}

/* Enhanced Section */
.section {
padding: 60px 0;
position: relative;
}

Files changed (4) hide show

README.md +8 -5
index.html +283 -19
script.js +36 -0
style.css +43 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: K Render Architect
-emoji: 🚀
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: K Render Architect 🎨
+colorFrom: purple
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,283 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>

script.js ADDED Viewed

	@@ -0,0 +1,36 @@

+// Set current year in footer
+document.getElementById('year').textContent = new Date().getFullYear();
+// Smooth scroll with offset for fixed header
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  anchor.addEventListener('click', function (e) {
+    e.preventDefault();
+    const target = document.querySelector(this.getAttribute('href'));
+    if (target) {
+      const offset = 80;
+      const targetPosition = target.offsetTop - offset;
+      window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth'
+      });
+    }
+  });
+});
+// Add scroll animation to elements
+const observerOptions = {
+  threshold: 0.1,
+  rootMargin: '0px 0px -50px 0px'
+};
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add('visible');
+    }
+  });
+}, observerOptions);
+document.querySelectorAll('.service-card, .portfolio-card').forEach(el => {
+  observer.observe(el);
+});

style.css CHANGED Viewed

@@ -1,28 +1,53 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  scroll-behavior: smooth;
+}
+.container {
+  max-width: 1200px;
 }
+/* Smooth animations */
+.service-card, .portfolio-card {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.6s ease;
 }
+.service-card.visible, .portfolio-card.visible {
+  opacity: 1;
+  transform: translateY(0);
 }
+/* Gradient backgrounds */
+.bg-gradient-primary {
+  background: linear-gradient(135deg, #f43f5e, #f97316);
 }
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .hero {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  .hero-right {
+    order: -1;
+  }
+  .section-title {
+    font-size: 2rem;
+  }
 }
+/* Loading animation */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+body {
+  animation: fadeIn 0.5s ease;
+}