76 lines
4.5 KiB
TypeScript
76 lines
4.5 KiB
TypeScript
export default function WhyChooseUs() {
|
|
const features = [
|
|
{
|
|
title: "Prime Locations",
|
|
description: "Strategically located in the heart of North Bengaluru's growth corridor.",
|
|
icon: (
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Smart Homes",
|
|
description: "Future-ready infrastructure with integrated smart home automation.",
|
|
icon: (
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Transparent Deals",
|
|
description: "100% clear documentation and legal compliance for peace of mind.",
|
|
icon: (
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Customer First",
|
|
description: "Dedicated support team to guide you through every step of the journey.",
|
|
icon: (
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-24 bg-secondary dark:bg-gray-900/50">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4">
|
|
Why Sky and Soil?
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
|
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-4 gap-8">
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300 flex flex-col items-center text-center group"
|
|
>
|
|
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/30 text-primary rounded-full group-hover:scale-110 transition-transform duration-300">
|
|
{feature.icon}
|
|
</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>
|
|
);
|
|
}
|