125 lines
5.3 KiB
TypeScript
125 lines
5.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useRef } from "react";
|
|
import Image from "next/image";
|
|
import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations";
|
|
|
|
export default function WhyChooseUs() {
|
|
const [visibleCards, setVisibleCards] = useState<boolean[]>([false, false, false, false]);
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
|
|
const features = [
|
|
{
|
|
title: "Prime Locations",
|
|
description: "Strategically located in the heart of North Bengaluru's growth corridor.",
|
|
image: "/assets/images/home/why/location.webp",
|
|
},
|
|
{
|
|
title: "Smart Homes",
|
|
description: "Future-ready infrastructure with integrated smart home automation.",
|
|
image: "/assets/images/home/why/smart-home.webp",
|
|
},
|
|
{
|
|
title: "Transparent Deals",
|
|
description: "100% clear documentation and legal compliance for peace of mind.",
|
|
image: "/assets/images/home/why/transparent-deals.webp",
|
|
},
|
|
{
|
|
title: "Customer First",
|
|
description: "Dedicated support team to guide you through every step of the journey.",
|
|
image: "/assets/images/home/why/customer-first.webp",
|
|
},
|
|
];
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
// Trigger cards to appear one by one with delay
|
|
features.forEach((_, index) => {
|
|
setTimeout(() => {
|
|
setVisibleCards((prev) => {
|
|
const newVisible = [...prev];
|
|
newVisible[index] = true;
|
|
return newVisible;
|
|
});
|
|
}, index * 150); // 150ms delay between each card
|
|
});
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.2 }
|
|
);
|
|
|
|
if (sectionRef.current) {
|
|
observer.observe(sectionRef.current);
|
|
}
|
|
|
|
return () => {
|
|
if (sectionRef.current) {
|
|
observer.unobserve(sectionRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<section ref={sectionRef} className="py-24 bg-secondary dark:bg-gray-900/50 relative overflow-hidden">
|
|
|
|
{/* Decorative Animations */}
|
|
<div className="absolute top-20 left-10 opacity-50 hidden lg:block">
|
|
<FloatingHouse />
|
|
</div>
|
|
<div className="absolute top-1/2 right-10 -translate-y-1/2 opacity-40 hidden lg:block">
|
|
<RotatingKey />
|
|
</div>
|
|
<div className="absolute bottom-10 left-1/4 opacity-30 hidden lg:block">
|
|
<GrowingBuilding />
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4 animate-fade-in">
|
|
Why Sky and Soil?
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto animate-slide-up">
|
|
We bridge the gap between your dreams and reality with premium properties and unmatched service.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className={`bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-500 flex flex-col items-center text-center group transform ${visibleCards[index]
|
|
? 'translate-y-0 opacity-100'
|
|
: 'translate-y-10 opacity-0'
|
|
}`}
|
|
style={{
|
|
transitionDelay: `${index * 100}ms`
|
|
}}
|
|
>
|
|
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/30 rounded-full group-hover:scale-110 group-hover:rotate-6 transition-all duration-300 relative w-20 h-20 flex items-center justify-center">
|
|
<div className="relative w-[80%] h-[80%]">
|
|
<Image
|
|
src={feature.image}
|
|
alt={feature.title}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-3">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|