Spaces:

Samik1994
/

demo-site

Running

App Files Files Community

Samik1994 commited on May 14

Commit

1a78f2c

verified ·

1 Parent(s): 2c1b033

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +666 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Demo Site
-emoji: 🐢
-colorFrom: pink
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: demo-site
+emoji: 🐳
+colorFrom: gray
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,666 @@
-<!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">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sam Planning | Modern Planning Services</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>
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap');
+        body {
+            font-family: 'Montserrat', sans-serif;
+            scroll-behavior: smooth;
+        }
+        .title-font {
+            font-family: 'Playfair Display', serif;
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, rgba(0, 100, 0, 0.8) 0%, rgba(34, 139, 34, 0.9) 100%);
+        }
+        .green-glow:hover {
+            box-shadow: 0 0 15px rgba(50, 205, 50, 0.6);
+        }
+        .service-card:hover {
+            transform: translateY(-10px);
+            transition: all 0.3s ease;
+        }
+        .parallax {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link:after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background-color: #2ecc71;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover:after {
+            width: 100%;
+        }
+        input:focus, textarea:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.5);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="fixed w-full bg-white shadow-md z-50 transition-all duration-300">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <div class="w-12 h-12 bg-emerald-600 rounded-full flex items-center justify-center">
+                        <i class="fas fa-drafting-compass text-white text-2xl"></i>
+                    </div>
+                    <a href="#" class="title-font text-2xl font-bold ml-3 text-emerald-600">Sam Planning
+                </div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="#home" class="nav-link text-gray-700 hover:text-emerald-600">Home</a>
+                    <a href="#services" class="nav-link text-gray-700 hover:text-emerald-600">Services</a>
+                    <a href="#projects" class="nav-link text-gray-700 hover:text-emerald-600">Projects</a>
+                    <a href="#about" class="nav-link text-gray-700 hover:text-emerald-600">About</a>
+                    <a href="#contact" class="nav-link text-gray-700 hover:text-emerald-600">Contact</a>
+                </div>
+                <button class="md:hidden focus:outline-none" id="menu-btn">
+                    <i class="fas fa-bars text-gray-700 text-xl"></i>
+                </button>
+            </div>
+            <!-- Mobile Menu -->
+            <div class="md:hidden hidden mt-4" id="mobile-menu">
+                <a href="#home" class="block py-2 text-gray-700 hover:text-emerald-600">Home</a>
+                <a href="#services" class="block py-2 text-gray-700 hover:text-emerald-600">Services</a>
+                <a href="#projects" class="block py-2 text-gray-700 hover:text-emerald-600">Projects</a>
+                <a href="#about" class="block py-2 text-gray-700 hover:text-emerald-600">About</a>
+                <a href="#contact" class="block py-2 text-gray-700 hover:text-emerald-600">Contact</a>
+            </div>
+        </div>
+    </nav>
+   <!-- Hero Section -->
+    <section id="home" class="hero-gradient min-h-screen flex items-center pt-20">
+        <div class="container mx-auto px-6 py-20">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0">
+                    <h1 class="title-font text-4xl md:text-6xl font-bold text-white mb-6">Expert <span class="text-emerald-200">Planning</span> & <span class="text-emerald-200">Architectural</span> Solutions</h1>
+                    <p class="text-gray-100 text-lg mb-8">We secure planning approvals and provide structural engineering services for developments across London and the South‑East, guiding your project from concept to completion.</p>
+                    <div class="flex flex-wrap gap-4">
+                        <a href="#contact" class="bg-white text-emerald-700 px-8 py-3 rounded-full font-semibold hover:bg-emerald-50 transition-all green-glow">Book a Consultation</a>
+                        <a href="#projects" class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-emerald-700 transition-all">Our Projects</a>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <div class="relative">
+                        <img src="https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Planning drawings" class="rounded-xl shadow-2xl w-full h-auto">
+                        <div class="absolute -bottom-6 -right-6 bg-emerald-700 p-4 rounded-xl shadow-lg">
+                            <p class="text-white font-bold">90%+ Approvals</p>
+                            <p class="text-emerald-100 text-sm">First‑time success rate</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Stats Section -->
+    <section class="bg-white py-16">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
+                <div class="p-6 rounded-lg border border-emerald-100 hover:bg-emerald-50 transition-all">
+                    <h3 class="text-4xl font-bold text-emerald-700 mb-2">150+</h3>
+                    <p class="text-gray-600">Projects Completed</p>
+                </div>
+                <div class="p-6 rounded-lg border border-emerald-100 hover:bg-emerald-50 transition-all">
+                    <h3 class="text-4xl font-bold text-emerald-700 mb-2">25</h3>
+                    <p class="text-gray-600">Awards Won</p>
+                </div>
+                <div class="p-6 rounded-lg border border-emerald-100 hover:bg-emerald-50 transition-all">
+                    <h3 class="text-4xl font-bold text-emerald-700 mb-2">50+</h3>
+                    <p class="text-gray-600">Satisfied Clients</p>
+                </div>
+                <div class="p-6 rounded-lg border border-emerald-100 hover:bg-emerald-50 transition-all">
+                    <h3 class="text-4xl font-bold text-emerald-700 mb-2">12</h3>
+                    <p class="text-gray-600">Years Experience</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-20 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <span class="text-emerald-600 font-semibold">OUR SERVICES</span>
+                <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mt-2">Comprehensive Architectural Planning</h2>
+                <div class="w-20 h-1 bg-emerald-500 mx-auto mt-4"></div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Service 1 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden service-card p-6">
+                    <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-home text-emerald-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Residential Design</h3>
+                    <p class="text-gray-600 mb-4">Custom home designs that blend functionality with sustainability, creating spaces that feel both modern and timeless.</p>
+                    <a href="#" class="text-emerald-600 font-semibold flex items-center">
+                        Learn More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+                <!-- Service 2 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden service-card p-6">
+                    <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-city text-emerald-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Commercial Planning</h3>
+                    <p class="text-gray-600 mb-4">Innovative commercial spaces designed to enhance productivity while minimizing environmental impact.</p>
+                    <a href="#" class="text-emerald-600 font-semibold flex items-center">
+                        Learn More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+                <!-- Service 3 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden service-card p-6">
+                    <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-leaf text-emerald-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Sustainable Solutions</h3>
+                    <p class="text-gray-600 mb-4">Eco-friendly designs incorporating renewable materials, energy efficiency, and green technologies.</p>
+                    <a href="#" class="text-emerald-600 font-semibold flex items-center">
+                        Learn More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+                <!-- Service 4 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden service-card p-6">
+                    <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-expand text-emerald-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Space Optimization</h3>
+                    <p class="text-gray-600 mb-4">Maximizing functionality in every square foot through intelligent space planning and innovative layouts.</p>
+                    <a href="#" class="text-emerald-600 font-semibold flex items-center">
+                        Learn More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+                <!-- Service 5 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden service-card p-6">
+                    <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-pencil-ruler text-emerald-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Interior itecture</h3>
+                    <p class="text-gray-600 mb-4">Seamless integration of interior spaces with Architectural elements for cohesive, beautiful environments.</p>
+                    <a href="#" class="text-emerald-600 font-semibold flex items-center">
+                        Learn More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+                <!-- Service 6 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden service-card p-6">
+                    <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-6">
+                        <i class="fas fa-hard-hat text-emerald-600 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Construction Oversight</h3>
+                    <p class="text-gray-600 mb-4">Ensuring your vision becomes reality with meticulous project management and quality control.</p>
+                    <a href="#" class="text-emerald-600 font-semibold flex items-center">
+                        Learn More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Projects Section -->
+    <section id="projects" class="py-20 bg-emerald-700 text-white parallax" style="background-image: url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');">
+        <div class="bg-black bg-opacity-60 py-20">
+            <div class="container mx-auto px-6">
+                <div class="text-center mb-16">
+                    <span class="text-emerald-300 font-semibold">OUR PORTFOLIO</span>
+                    <h2 class="title-font text-3xl md:text-4xl font-bold text-white mt-2">Featured Projects</h2>
+                    <div class="w-20 h-1 bg-emerald-300 mx-auto mt-4"></div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Project 1 -->
+                    <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl overflow-hidden border border-white border-opacity-20 hover:border-opacity-40 transition-all">
+                        <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Modern Residence" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2">The Green Haven Residence</h3>
+                            <p class="text-emerald-100 mb-4">A net-zero energy home with passive solar design and rainwater harvesting.</p>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-emerald-200">2023 | Residential</span>
+                                <a href="#" class="text-white hover:text-emerald-300">
+                                    <i class="fas fa-external-link-alt"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Project 2 -->
+                    <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl overflow-hidden border border-white border-opacity-20 hover:border-opacity-40 transition-all">
+                        <img src="https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Office Building" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2">EcoTech Office Park</h3>
+                            <p class="text-emerald-100 mb-4">LEED Platinum certified commercial complex with vertical gardens and solar panel roof.</p>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-emerald-200">2022 | Commercial</span>
+                                <a href="#" class="text-white hover:text-emerald-300">
+                                    <i class="fas fa-external-link-alt"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Project 3 -->
+                    <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl overflow-hidden border border-white border-opacity-20 hover:border-opacity-40 transition-all">
+                        <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Community Center" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2">Harmony Community Center</h3>
+                            <p class="text-emerald-100 mb-4">Multi-use facility built with recycled materials and geothermal heating/cooling.</p>
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm text-emerald-200">2021 | Public</span>
+                                <a href="#" class="text-white hover:text-emerald-300">
+                                    <i class="fas fa-external-link-alt"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="text-center mt-12">
+                    <a href="#" class="inline-block border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-emerald-700 transition-all">View All Projects</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
+                    <img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team" class="rounded-xl shadow-lg w-full h-auto">
+                </div>
+                <div class="md:w-1/2">
+                    <span class="text-emerald-600 font-semibold">ABOUT US</span>
+                    <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-6">Designing for a Sustainable Future</h2>
+                    <p class="text-gray-600 mb-6">Founded in 2010, Sam Planning has been at the forefront of sustainable itectural design. Our team of passionate itects, designers, and engineers believe that beautiful spaces should exist in harmony with nature.</p>
+                    <div class="mb-6">
+                        <div class="flex items-start mb-4">
+                            <div class="bg-emerald-100 p-2 rounded-full mr-4">
+                                <i class="fas fa-check text-emerald-600"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-800">Innovative Approach</h4>
+                                <p class="text-gray-600">We combine cutting-edge technology with timeless design principles.</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start mb-4">
+                            <div class="bg-emerald-100 p-2 rounded-full mr-4">
+                                <i class="fas fa-check text-emerald-600"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-800">Sustainability Focus</h4>
+                                <p class="text-gray-600">Every project incorporates eco-friendly materials and energy-efficient solutions.</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-emerald-100 p-2 rounded-full mr-4">
+                                <i class="fas fa-check text-emerald-600"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-800">Client-Centric Process</h4>
+                                <p class="text-gray-600">We collaborate closely with clients to bring their unique visions to life.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <a href="#" class="inline-block bg-emerald-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-emerald-700 transition-all green-glow">Learn More About Us</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-20 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <span class="text-emerald-600 font-semibold">TESTIMONIALS</span>
+                <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mt-2">What Our Clients Say</h2>
+                <div class="w-20 h-1 bg-emerald-500 mx-auto mt-4"></div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="bg-white p-8 rounded-xl shadow-md">
+                    <div class="flex items-center mb-4">
+                        <div class="text-emerald-500 text-2xl mr-2">“</div>
+                        <div class="text-yellow-400">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 mb-6">"Sam Planning transformed our outdated home into a modern, energy-efficient sanctuary. Their attention to detail and sustainable approach exceeded our expectations."</p>
+                    <div class="flex items-center">
+                        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="font-bold text-gray-800">Sarah Johnson</h4>
+                            <p class="text-gray-500 text-sm">Homeowner, Green Haven Residence</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Testimonial 2 -->
+                <div class="bg-white p-8 rounded-xl shadow-md">
+                    <div class="flex items-center mb-4">
+                        <div class="text-emerald-500 text-2xl mr-2">“</div>
+                        <div class="text-yellow-400">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 mb-6">"The EcoTech Office Park has boosted employee morale and productivity while reducing our energy costs by 40%. Sam Planning's vision was perfectly executed."</p>
+                    <div class="flex items-center">
+                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="font-bold text-gray-800">Michael Chen</h4>
+                            <p class="text-gray-500 text-sm">CEO, TechForward Inc.</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Testimonial 3 -->
+                <div class="bg-white p-8 rounded-xl shadow-md">
+                    <div class="flex items-center mb-4">
+                        <div class="text-emerald-500 text-2xl mr-2">“</div>
+                        <div class="text-yellow-400">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star-half-alt"></i>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 mb-6">"Working with Sam Planning on our community center was a dream. They listened to our needs and created a space that serves our diverse population beautifully."</p>
+                    <div class="flex items-center">
+                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Maria Gonzalez" class="w-12 h-12 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="font-bold text-gray-800">Maria Gonzalez</h4>
+                            <p class="text-gray-500 text-sm">Director, Harmony Community</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-emerald-700 text-white">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row">
+                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
+                    <span class="text-emerald-300 font-semibold">GET IN TOUCH</span>
+                    <h2 class="title-font text-3xl md:text-4xl font-bold text-white mt-2 mb-6">Let's Build Something Amazing</h2>
+                    <p class="text-emerald-100 mb-8">Ready to start your itectural project? Fill out the form or contact us directly. Our team will respond within 24 hours.</p>
+                    <div class="mb-8">
+                        <div class="flex items-start mb-6">
+                            <div class="bg-emerald-600 p-3 rounded-full mr-4">
+                                <i class="fas fa-map-marker-alt"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Our Office</h4>
+                                <p class="text-emerald-100">123 Greenway Blvd, Suite 400<br>EcoCity, EC 12345</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start mb-6">
+                            <div class="bg-emerald-600 p-3 rounded-full mr-4">
+                                <i class="fas fa-phone-alt"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Call Us</h4>
+                                <p class="text-emerald-100">+1 (555) 123-4567<br>Mon-Fri, 9am-5pm</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-emerald-600 p-3 rounded-full mr-4">
+                                <i class="fas fa-envelope"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Email Us</h4>
+                                <p class="text-emerald-100">hello@Sam Planning.com<br>info@Sam Planning.com</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex space-x-4">
+                        <a href="#" class="bg-emerald-600 hover:bg-emerald-800 w-10 h-10 rounded-full flex items-center justify-center transition-all">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="bg-emerald-600 hover:bg-emerald-800 w-10 h-10 rounded-full flex items-center justify-center transition-all">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="bg-emerald-600 hover:bg-emerald-800 w-10 h-10 rounded-full flex items-center justify-center transition-all">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="bg-emerald-600 hover:bg-emerald-800 w-10 h-10 rounded-full flex items-center justify-center transition-all">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <form class="bg-white rounded-xl shadow-lg p-8 text-gray-800">
+                        <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3>
+                        <div class="mb-4">
+                            <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
+                            <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-emerald-500">
+                        </div>
+                        <div class="mb-4">
+                            <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
+                            <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-emerald-500">
+                        </div>
+                        <div class="mb-4">
+                            <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
+                            <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-emerald-500">
+                        </div>
+                        <div class="mb-4">
+                            <label for="service" class="block text-gray-700 font-medium mb-2">Service Interested In</label>
+                            <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-emerald-500">
+                                <option value="">Select a service</option>
+                                <option value="residential">Residential Design</option>
+                                <option value="commercial">Commercial Planning</option>
+                                <option value="sustainable">Sustainable Solutions</option>
+                                <option value="space">Space Optimization</option>
+                                <option value="interior">Interior itecture</option>
+                                <option value="construction">Construction Oversight</option>
+                            </select>
+                        </div>
+                        <div class="mb-6">
+                            <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label>
+                            <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-emerald-500"></textarea>
+                        </div>
+                        <button type="submit" class="w-full bg-emerald-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-emerald-700 transition-all green-glow">Send Message</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Newsletter -->
+    <section class="py-16 bg-gray-100">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="title-font text-3xl font-bold text-gray-800 mb-4">Stay Updated</h2>
+            <p class="text-gray-600 max-w-2xl mx-auto mb-8">Subscribe to our newsletter for the latest in sustainable itecture, design trends, and company updates.</p>
+            <div class="max-w-md mx-auto flex">
+                <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border border-gray-300 focus:border-emerald-500 focus:outline-none">
+                <button class="bg-emerald-600 text-white px-6 py-3 rounded-r-lg font-semibold hover:bg-emerald-700 transition-all">Subscribe</button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 bg-emerald-600 rounded-full flex items-center justify-center">
+                            <i class="fas fa-drafting-compass text-white"></i>
+                        </div>
+                        <a href="#" class="title-font text-xl font-bold ml-3">Sam Planning<span class="text-emerald-400"></span></a>
+                    </div>
+                    <p class="text-gray-400 mb-4">Designing sustainable spaces for a greener future.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#home" class="text-gray-400 hover:text-emerald-400 transition-all">Home</a></li>
+                        <li><a href="#services" class="text-gray-400 hover:text-emerald-400 transition-all">Services</a></li>
+                        <li><a href="#projects" class="text-gray-400 hover:text-emerald-400 transition-all">Projects</a></li>
+                        <li><a href="#about" class="text-gray-400 hover:text-emerald-400 transition-all">About Us</a></li>
+                        <li><a href="#contact" class="text-gray-400 hover:text-emerald-400 transition-all">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Services</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">Residential Design</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">Commercial Planning</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">Sustainable Solutions</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">Interior itecture</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">Construction Oversight</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Contact Info</h3>
+                    <address class="not-italic text-gray-400 space-y-2">
+                        <p>123 Greenway Blvd, Suite 400<br>EcoCity, EC 12345</p>
+                        <p>+1 (555) 123-4567</p>
+                        <p>hello@Sam Planning.com</p>
+                    </address>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 mb-4 md:mb-0">© 2023 Sam Planning. All rights reserved.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">Privacy Policy</a>
+                    <a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">Terms of Service</a>
+                    <a href="#" class="text-gray-400 hover:text-emerald-400 transition-all">Sitemap</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Back to Top Button -->
+    <button id="back-to-top" class="fixed bottom-8 right-8 bg-emerald-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-emerald-700 transition-all hidden">
+        <i class="fas fa-arrow-up"></i>
+    </button>
+    <script>
+        // Mobile Menu Toggle
+        const menuBtn = document.getElementById('menu-btn');
+        const mobileMenu = document.getElementById('mobile-menu');
+        menuBtn.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        // Back to Top Button
+        const backToTopBtn = document.getElementById('back-to-top');
+        window.addEventListener('scroll', () => {
+            if (window.pageYOffset > 300) {
+                backToTopBtn.classList.remove('hidden');
+            } else {
+                backToTopBtn.classList.add('hidden');
+            }
+        });
+        backToTopBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    mobileMenu.classList.add('hidden');
+                }
+            });
+        });
+        // Navbar scroll effect
+        window.addEventListener('scroll', () => {
+            const nav = document.querySelector('nav');
+            if (window.scrollY > 50) {
+                nav.classList.add('py-2');
+                nav.classList.remove('py-4');
+            } else {
+                nav.classList.add('py-4');
+                nav.classList.remove('py-2');
+            }
+        });
+    </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=Samik1994/demo-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes