109 lines
5.4 KiB
TypeScript
109 lines
5.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, MouseEvent } from "react";
|
|
import Image from "next/image";
|
|
|
|
import { FloatingHouse, RotatingKey } from "./PropertyAnimations";
|
|
|
|
export default function Lifestyle() {
|
|
const [zoomProps, setZoomProps] = useState({ x: 0, y: 0, show: false });
|
|
const imageRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
|
|
if (!imageRef.current) return;
|
|
|
|
const { left, top, width, height } = imageRef.current.getBoundingClientRect();
|
|
const x = ((e.clientX - left) / width) * 100;
|
|
const y = ((e.clientY - top) / height) * 100;
|
|
|
|
setZoomProps({ x, y, show: true });
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
setZoomProps((prev) => ({ ...prev, show: false }));
|
|
};
|
|
|
|
return (
|
|
<section id="lifestyle" className="py-24 bg-secondary dark:bg-gray-900 relative overflow-hidden">
|
|
|
|
{/* Decorative Animations */}
|
|
<div className="absolute top-20 right-10 opacity-30 hidden lg:block">
|
|
<FloatingHouse />
|
|
</div>
|
|
<div className="absolute bottom-20 left-10 opacity-20 hidden lg:block">
|
|
<RotatingKey />
|
|
</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">
|
|
{/* Image Side with Zoom Effect */}
|
|
<div
|
|
className="order-2 lg:order-1 relative h-[600px] rounded-3xl overflow-hidden shadow-2xl group cursor-crosshair"
|
|
ref={imageRef}
|
|
onMouseMove={handleMouseMove}
|
|
onMouseLeave={handleMouseLeave}
|
|
>
|
|
<Image
|
|
src="/assets/images/home/experience.webp"
|
|
alt="Aurora Lifestyle Clubhouse and Amenities"
|
|
fill
|
|
className={`object-cover transition-transform duration-200 ease-out ${zoomProps.show ? 'scale-[2.5]' : 'scale-100'}`}
|
|
style={{
|
|
transformOrigin: `${zoomProps.x}% ${zoomProps.y}%`
|
|
}}
|
|
/>
|
|
|
|
{/* Overlay Text - Hidden on Hover to see details */}
|
|
<div className={`absolute inset-0 bg-gradient-to-tr from-gray-800/60 to-transparent flex items-center justify-center pointer-events-none transition-opacity duration-300 ${zoomProps.show ? 'opacity-0' : 'opacity-100'}`}>
|
|
<span className="text-xl font-light tracking-widest uppercase text-white border border-white/30 px-6 py-2 rounded-full backdrop-blur-sm">
|
|
Clubhouse & Amenities
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Side */}
|
|
<div className="order-1 lg:order-2 space-y-8">
|
|
<h2 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground">
|
|
Experience the <br />
|
|
<span className="text-primary">Aurora Lifestyle.</span>
|
|
</h2>
|
|
|
|
<p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
Designed for those who seek more than just a home. Immerse yourself in a world of leisure, wellness, and community.
|
|
</p>
|
|
|
|
<ul className="space-y-6 mt-8">
|
|
{[
|
|
{
|
|
title: "World-Class Clubhouse",
|
|
desc: "A sprawling hub for recreation and social gatherings.",
|
|
},
|
|
{
|
|
title: "Green Spaces",
|
|
desc: "Acres of landscaped gardens and breathing spaces.",
|
|
},
|
|
{
|
|
title: "24/7 Security",
|
|
desc: "Advanced surveillance and gated community safety.",
|
|
},
|
|
].map((item, idx) => (
|
|
<li key={idx} className="flex items-start gap-4">
|
|
<div className="mt-1 p-2 bg-white dark:bg-gray-800 rounded-full shadow-sm text-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-foreground">{item.title}</h3>
|
|
<p className="text-gray-600 dark:text-gray-400">{item.desc}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|