feat: Implement initial website structure with core pages, components, and assets.

src/app/about/page.tsx

@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 
 export default function AboutPage() {
     return (
-        <main className="min-h-screen bg-white">
+        <main className="min-h-screen bg-white dark:bg-black">
             <Header />
             <InnerBanner
                 title="About Us"

src/app/contact/page.tsx

@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 
 export default function ContactPage() {
     return (
-        <main className="min-h-screen bg-white">
+        <main className="min-h-screen bg-white dark:bg-black">
             <Header />
             <InnerBanner
                 title="Contact Us"

src/app/lifestyle/page.tsx

@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 
 export default function LifestylePage() {
     return (
-        <main className="min-h-screen bg-white">
+        <main className="min-h-screen bg-white dark:bg-black">
             <Header />
             <InnerBanner
                 title="Lifestyle"

src/app/page.tsx

@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <main className="min-h-screen bg-white">
+    <main className="min-h-screen bg-white dark:bg-black">
       <Header />
       <Hero />
       <About />

src/components/Footer.tsx

@@ -1,13 +1,20 @@
 import Link from "next/link";
 
+import Image from "next/image";
+
 export default function Footer() {
     return (
         <footer className="bg-gray-50 dark:bg-black pt-16 pb-8 border-t border-gray-200 dark:border-gray-800">
             <div className="max-w-7xl mx-auto px-6">
                 <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
                     <div className="col-span-1 md:col-span-1">
-                        <Link href="/" className="text-xl font-bold tracking-tight text-foreground">
+                        <Link href="/" className="inline-block relative w-48 h-16">
-                            Sky and Soil
+                            <Image
+                                src="/assets/images/blue-logo.png"
+                                alt="Sky and Soil Logo"
+                                fill
+                                className="object-contain"
+                            />
                         </Link>
                         <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
                             Premium real estate in Bangalore. We connect you with nature and luxury.

src/components/Header.tsx

@@ -28,26 +28,22 @@ export default function Header() {
             >
                 <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
                     <Link href="/" className="flex items-center gap-3 group">
-                        <div className="relative w-10 h-10 overflow-hidden rounded-full bg-white/10 backdrop-blur-sm border border-white/20 shadow-sm group-hover:scale-105 transition-transform">
+                        <div className="relative w-60 h-20 transition-transform group-hover:scale-105">
                             <Image
-                                src="/logo.png"
+                                src={isScrolled ? "/assets/images/blue-logo.png" : "/assets/images/white-logo.png"}
                                 alt="Sky and Soil Logo"
                                 fill
-                                className="object-contain p-1"
+                                className="object-contain"
                             />
                         </div>
-                        <span className={`text-2xl font-semibold tracking-tight group-hover:text-primary transition-colors ${isScrolled ? "text-foreground" : "text-white"
+                        {/* <span className={`text-2xl font-semibold tracking-tight group-hover:text-primary transition-colors ${isScrolled ? "text-foreground" : "text-white"
                             }`}>
                             Sky and Soil
-                        </span>
+                        </span> */}
                     </Link>
 
                     <div className="flex items-center gap-4">
-                        <Link href="/contact">
+
-                            <button className="hidden md:block px-5 py-2 text-sm font-medium text-white bg-primary rounded-full hover:bg-blue-600 transition-colors shadow-sm hover:shadow-md active:scale-95 transform duration-200">
-                                Book a Visit
-                            </button>
-                        </Link>
 
                         <button
                             className={`p-2 -mr-2 transition-colors ${isScrolled ? "text-foreground" : "text-white"

src/components/Hero.tsx

@@ -11,9 +11,9 @@ export default function Hero() {
                     muted
                     playsInline
                     className="absolute inset-0 w-full h-full object-cover"
-                    poster="/assets/images/banglore-nit-view.mp4" // Fallback image
+                    poster="/assets/images/aerial-view.mov" // Fallback image
                 >
-                    <source src="/assets/images/banglore-nit-view.mp4" type="video/mp4" />
+                    <source src="/assets/images/aerial-view.mov" type="video/mp4" />
                     {/* Note: This is a placeholder video. Replace with your Bangalore drone shot. */}
                 </video>
                 {/* Overlay */}
@@ -70,25 +70,11 @@ export default function Hero() {
                     </span>
                 </h1>
 
-                <p className="text-xl md:text-2xl text-gray-100 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 drop-shadow-md" style={{ animationDelay: "0.2s" }}>
+                {/* <p className="text-xl md:text-2xl text-gray-100 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 drop-shadow-md" style={{ animationDelay: "0.2s" }}>
                     Premium properties in North Bengaluru. Experience the perfect blend of nature and luxury.
-                </p>
+                </p> */}
+
 
-                <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-slide-up opacity-0" style={{ animationDelay: "0.4s" }}>
-                    <Link
-                        href="/projects"
-                        className="px-8 py-4 text-base font-medium text-primary bg-white rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:scale-95"
-                    >
-                        Explore Projects
-                    </Link>
-                    <button
-                        className="px-8 py-4 text-base font-medium text-white border border-white/30 bg-white/10 backdrop-blur-sm rounded-full hover:bg-white/20 transition-all shadow-sm hover:shadow-md active:scale-95"
-                    >
-                        <Link href="/contact">
-                            Book a Site Visit
-                        </Link>
-                    </button>
-                </div>
             </div>
 
             {/* Scroll Indicator */}

src/components/Sidebar.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useEffect } from "react";
+import Image from "next/image";
 import { ThemeToggle } from "@/components/ThemeToggle";
 
 interface SidebarProps {
@@ -38,7 +39,14 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
             >
                 <div className="flex flex-col h-full p-6">
                     <div className="flex items-center justify-between mb-8">
-                        <h2 className="text-xl font-bold text-foreground">Menu</h2>
+                        <div className="relative w-40 h-12">
+                            <Image
+                                src="/assets/images/blue-logo.png"
+                                alt="Sky and Soil Logo"
+                                fill
+                                className="object-contain"
+                            />
+                        </div>
                         <button
                             onClick={onClose}
                             className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -98,11 +106,7 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
                             </span>
                             <ThemeToggle />
                         </div>
-                        <Link href="/contact" onClick={onClose}>
+
-                            <button className="w-full py-3 text-base font-medium text-white bg-primary rounded-xl hover:bg-blue-600 transition-colors shadow-lg hover:shadow-xl active:scale-95 transform duration-200">
-                                Book a Visit
-                            </button>
-                        </Link>
                     </div>
                 </div>
             </div>