89 lines
4.2 KiB
TypeScript
89 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
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%", "-50%"]);
|
|
|
|
return (
|
|
<section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">
|
|
|
|
{/* Decorative Animation */}
|
|
<div className="absolute top-10 left-10 opacity-30 hidden lg:block">
|
|
<FloatingHouse />
|
|
</div>
|
|
<div className="absolute bottom-20 right-10 opacity-20 hidden lg:block">
|
|
<RotatingKey />
|
|
</div>
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-10 pointer-events-none hidden lg:block">
|
|
<GrowingBuilding className="scale-150" />
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
{/* Text Content */}
|
|
<div className="space-y-8 z-10">
|
|
<h2 className="text-4xl font-bold tracking-tight text-foreground">
|
|
Where the Sky Meets <br />
|
|
<span className="text-accent dark:text-accent">The Soil.</span>
|
|
</h2>
|
|
|
|
<div className="space-y-6 text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
<p>
|
|
At Sky and Soil, we curate exceptional living spaces that harmonize with nature. As authorized sales partners for Godrej Properties, we bring you the finest homes in Bangalore's most sought-after locations.
|
|
</p>
|
|
<p>
|
|
Our mission is to connect you with homes that offer not just a roof over your head, but a lifestyle grounded in luxury and elevated by nature. From North Bengaluru to Sarjapur, discover a life of abundance.
|
|
</p>
|
|
</div>
|
|
|
|
<Link href="/about" className="text-primary font-medium hover:text-blue-700 transition-colors flex items-center gap-2 group">
|
|
Learn More About Us
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-4 h-4 group-hover:translate-x-1 transition-transform">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Parallax Image Container */}
|
|
<div
|
|
ref={containerRef}
|
|
className="
|
|
h-[400px]
|
|
w-full
|
|
mx-auto
|
|
rounded-2xl
|
|
shadow-2xl
|
|
overflow-hidden
|
|
relative
|
|
"
|
|
>
|
|
<motion.div
|
|
style={{ y }}
|
|
className="absolute top-[-10%] left-0 w-full h-[160%] will-change-transform"
|
|
>
|
|
<img
|
|
src="/assets/images/home/where.webp"
|
|
alt="Where Sky Meets Soil"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|