diff --git a/public/assets/images/home/where.webp b/public/assets/images/home/where.webp index 77f882c..b2b5131 100644 Binary files a/public/assets/images/home/where.webp and b/public/assets/images/home/where.webp differ diff --git a/src/components/About.tsx b/src/components/About.tsx index 3f0e3fd..11aef59 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -2,8 +2,21 @@ import Link from "next/link"; import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations"; +import { motion, useScroll, useTransform } from "framer-motion"; +import { useRef } from "react"; export default function About() { + const containerRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ["start end", "end start"] + }); + + // Parallax effect: Moving the image vertically as the user scrolls + // The image height is significantly larger than the container + // We move from 0% (top aligned) to a negative percentage to reveal the bottom + const y = useTransform(scrollYProgress, [0, 1], ["0%", "-30%"]); + return (
@@ -45,18 +58,20 @@ export default function About() { {/* Parallax Image Container */} - {/* Parallax Image Container - Visible on all screens */}
- {/* Empty container for the image background */} + + Where Sky Meets Soil +
diff --git a/src/components/ConnectivityMap.tsx b/src/components/ConnectivityMap.tsx index fed264d..3042f67 100644 --- a/src/components/ConnectivityMap.tsx +++ b/src/components/ConnectivityMap.tsx @@ -167,7 +167,7 @@ export default function ConnectivityMap() { setActiveTab(tab); setSearchQuery(""); // Clear search when switching tabs }} - className={`px-6 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors border-b-2 ${activeTab === tab + className={`px-4 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors border-b-2 ${activeTab === tab ? "text-orange-500 border-orange-500 bg-orange-50/30 dark:bg-orange-900/10" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 border-transparent" }`} diff --git a/src/components/PropertyDetailClient.tsx b/src/components/PropertyDetailClient.tsx index dcfe721..3d58a13 100644 --- a/src/components/PropertyDetailClient.tsx +++ b/src/components/PropertyDetailClient.tsx @@ -1218,7 +1218,7 @@ export default function PropertyDetailClient({ property }: { property: Property