198 lines
10 KiB
TypeScript
198 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
|
|
const faqs = [
|
|
{
|
|
question: "What types of properties do you offer?",
|
|
answer: "We offer a wide range of properties including luxury apartments, premium villas, and sustainable eco-homes designed to blend with nature."
|
|
},
|
|
{
|
|
question: "How can I book a site visit?",
|
|
answer: "You can book a site visit by clicking the 'Book a Visit' button on our website or by contacting our sales team directly through the contact form."
|
|
},
|
|
{
|
|
question: "Do you provide assistance with home loans?",
|
|
answer: "Yes, we have tie-ups with leading banks and financial institutions to help you secure the best home loan rates and assist with the documentation process."
|
|
},
|
|
{
|
|
question: "Are your projects RERA registered?",
|
|
answer: "Absolutely. All our projects are fully compliant with RERA regulations and we ensure complete transparency in all our dealings."
|
|
},
|
|
{
|
|
question: "What amenities are included in your projects?",
|
|
answer: "Our projects feature world-class amenities such as swimming pools, clubhouses, landscaped gardens, 24/7 security, and dedicated fitness centers."
|
|
}
|
|
];
|
|
|
|
const carouselImages = [
|
|
{ src: "/1-f63fe3ad.png", label: "Building Exterior" },
|
|
{ src: "/hero-image.jpg", label: "Luxury Amenities" },
|
|
{ src: "/1-f63fe3ad.png", label: "Modern Architecture" }
|
|
];
|
|
|
|
export default function FAQ() {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
|
const [activeCard, setActiveCard] = useState(0);
|
|
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
|
const [isHovering, setIsHovering] = useState(false);
|
|
|
|
const toggleFAQ = (index: number) => {
|
|
setOpenIndex(openIndex === index ? null : index);
|
|
};
|
|
|
|
const nextCard = () => {
|
|
setActiveCard((prev) => (prev + 1) % carouselImages.length);
|
|
};
|
|
|
|
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const centerX = rect.width / 2;
|
|
|
|
// Calculate offset: negative for left, positive for right
|
|
const offsetX = (x - centerX) / centerX; // Range: -1 to 1
|
|
|
|
setMousePosition({ x: offsetX * 30, y: 0 }); // Move up to 30px left or right
|
|
};
|
|
|
|
const handleMouseEnter = () => {
|
|
setIsHovering(true);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
setIsHovering(false);
|
|
setMousePosition({ x: 0, y: 0 });
|
|
};
|
|
|
|
return (
|
|
<section className="py-24 bg-gray-50 dark:bg-gray-900 overflow-hidden">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid md:grid-cols-2 gap-12 items-start">
|
|
{/* Left Column: Stacked Card Carousel */}
|
|
<div
|
|
className="relative h-[600px] hidden md:flex items-center justify-center"
|
|
onMouseMove={handleMouseMove}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
>
|
|
<div className="relative w-full max-w-md h-[500px]">
|
|
{carouselImages.map((image, index) => {
|
|
const offset = index - activeCard;
|
|
const isActive = index === activeCard;
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
onClick={nextCard}
|
|
className={`absolute inset-0 transition-all duration-500 ease-out cursor-pointer ${isActive ? 'z-30' : offset > 0 ? 'z-20' : 'z-10'
|
|
}`}
|
|
style={{
|
|
transform: `
|
|
translateY(${offset * 20}px)
|
|
translateX(${offset * 10 + (isActive && isHovering ? mousePosition.x : 0)}px)
|
|
scale(${isActive ? 1 : 0.9 - Math.abs(offset) * 0.05})
|
|
rotateZ(${offset * 2}deg)
|
|
`,
|
|
opacity: Math.abs(offset) > 1 ? 0 : 1 - Math.abs(offset) * 0.3,
|
|
pointerEvents: isActive ? 'auto' : 'none',
|
|
transition: isHovering ? 'transform 0.2s ease-out' : 'transform 0.5s ease-out'
|
|
}}
|
|
>
|
|
<div className="relative w-full h-full rounded-3xl overflow-hidden shadow-2xl border-4 border-white dark:border-gray-800">
|
|
<Image
|
|
src={image.src}
|
|
alt={image.label}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
|
<div className="absolute bottom-6 left-6 right-6">
|
|
<h3 className="text-white text-2xl font-bold mb-2">{image.label}</h3>
|
|
<p className="text-white/80 text-sm">Click to explore more</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Navigation Dots */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-2 z-40">
|
|
{carouselImages.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setActiveCard(index)}
|
|
className={`w-2 h-2 rounded-full transition-all duration-300 ${index === activeCard
|
|
? 'bg-primary w-8'
|
|
: 'bg-gray-400 hover:bg-gray-600'
|
|
}`}
|
|
aria-label={`Go to slide ${index + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: FAQ Content */}
|
|
<div>
|
|
<div className="mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400">
|
|
Everything you need to know about our properties and services.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{faqs.map((faq, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white dark:bg-black border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-md"
|
|
>
|
|
<button
|
|
onClick={() => toggleFAQ(index)}
|
|
className="w-full flex items-center justify-between p-6 text-left focus:outline-none"
|
|
>
|
|
<span className="text-lg font-semibold text-foreground">
|
|
{faq.question}
|
|
</span>
|
|
<span
|
|
className={`ml-6 flex-shrink-0 transition-transform duration-300 ${openIndex === index ? "rotate-180" : "rotate-0"
|
|
}`}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={2}
|
|
stroke="currentColor"
|
|
className="w-5 h-5 text-primary"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<div
|
|
className={`px-6 transition-all duration-300 ease-in-out overflow-hidden ${openIndex === index ? "max-h-48 pb-6 opacity-100" : "max-h-0 opacity-0"
|
|
}`}
|
|
>
|
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
{faq.answer}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|