264 lines
9.2 KiB
TypeScript
264 lines
9.2 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useInView } from "framer-motion";
|
|
import { useRef, useEffect, useState } from "react";
|
|
import { MapPin, Phone, Building2 } from "lucide-react";
|
|
|
|
export function Location() {
|
|
const ref = useRef(null);
|
|
const isInView = useInView(ref, { once: true, margin: "-100px" });
|
|
const [isDark, setIsDark] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const checkTheme = () => {
|
|
setIsDark(document.documentElement.classList.contains('dark'));
|
|
};
|
|
|
|
checkTheme();
|
|
const observer = new MutationObserver(checkTheme);
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ['class']
|
|
});
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const cities = [
|
|
"Hollywood, FL",
|
|
"Jacksonville, FL",
|
|
"Miami, FL",
|
|
"Pensacola, FL"
|
|
];
|
|
|
|
const counties = [
|
|
"Broward",
|
|
"Duval",
|
|
"Escambia",
|
|
"Miami-dade"
|
|
];
|
|
|
|
const zips = [
|
|
"32256",
|
|
"32503",
|
|
"33021",
|
|
"33145"
|
|
];
|
|
|
|
const neighborhoods = [
|
|
"Coral Gate",
|
|
"Coral Way",
|
|
"Royal Lakes"
|
|
];
|
|
|
|
return (
|
|
<section
|
|
id="location"
|
|
ref={ref}
|
|
className="relative py-20 px-4 overflow-hidden"
|
|
>
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 z-0"
|
|
style={{
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
}}
|
|
/>
|
|
|
|
{/* Minimal overlay - allowing background image to show at near original opaqueness */}
|
|
<div
|
|
className="absolute inset-0 z-[1]"
|
|
style={{
|
|
backgroundColor: isDark ? 'rgba(0, 0, 0, 0.15)' : 'rgba(255, 255, 255, 0.10)'
|
|
}}
|
|
/>
|
|
|
|
{/* Very subtle gradient overlay */}
|
|
{!isDark && (
|
|
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
|
|
)}
|
|
{isDark && (
|
|
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
|
|
)}
|
|
|
|
{/* Subtle animated blobs */}
|
|
<div className="absolute inset-0 overflow-hidden z-[3]">
|
|
<motion.div
|
|
className="absolute top-20 left-20 w-72 h-72 bg-cyan-100 dark:bg-cyan-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
|
animate={{
|
|
x: [0, 80, 0],
|
|
y: [0, 40, 0],
|
|
scale: [1, 1.1, 1],
|
|
}}
|
|
transition={{
|
|
duration: 18,
|
|
repeat: Infinity,
|
|
ease: 'easeInOut',
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute bottom-20 right-20 w-96 h-96 bg-emerald-100 dark:bg-emerald-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
|
animate={{
|
|
x: [0, -80, 0],
|
|
y: [0, 60, 0],
|
|
scale: [1, 1.15, 1],
|
|
}}
|
|
transition={{
|
|
duration: 22,
|
|
repeat: Infinity,
|
|
ease: 'easeInOut',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="container max-w-6xl mx-auto relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<motion.h2
|
|
className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
Location
|
|
</motion.h2>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
|
{/* Primary Location */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 transition-all duration-300"
|
|
>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl">
|
|
<MapPin className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground">Primary Location</h3>
|
|
</div>
|
|
<p className="text-muted-foreground mb-2">Miami, FL 33145</p>
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Phone className="h-4 w-4" />
|
|
<span>(954) 807-3027</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Additional Location */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 transition-all duration-300"
|
|
>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl">
|
|
<Building2 className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground">Additional Location</h3>
|
|
</div>
|
|
<p className="text-muted-foreground mb-2">Hollywood, FL 33021</p>
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Phone className="h-4 w-4" />
|
|
<span>(954) 807-3027</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Nearby Areas */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="bg-card/50 backdrop-blur-sm rounded-2xl p-8 border border-border/50"
|
|
>
|
|
<h3 className="text-2xl font-semibold text-foreground mb-6">Nearby Areas</h3>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{/* Cities */}
|
|
<div>
|
|
<h4 className="font-semibold text-foreground mb-3">Cities</h4>
|
|
<ul className="space-y-2">
|
|
{cities.map((city, index) => (
|
|
<motion.li
|
|
key={city}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.3, delay: 0.5 + index * 0.05 }}
|
|
className="text-sm text-muted-foreground"
|
|
>
|
|
{city}
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Counties */}
|
|
<div>
|
|
<h4 className="font-semibold text-foreground mb-3">Counties</h4>
|
|
<ul className="space-y-2">
|
|
{counties.map((county, index) => (
|
|
<motion.li
|
|
key={county}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.3, delay: 0.6 + index * 0.05 }}
|
|
className="text-sm text-muted-foreground"
|
|
>
|
|
{county}
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Zips */}
|
|
<div>
|
|
<h4 className="font-semibold text-foreground mb-3">Zips</h4>
|
|
<ul className="space-y-2">
|
|
{zips.map((zip, index) => (
|
|
<motion.li
|
|
key={zip}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.3, delay: 0.7 + index * 0.05 }}
|
|
className="text-sm text-muted-foreground"
|
|
>
|
|
{zip}
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Neighborhoods */}
|
|
<div>
|
|
<h4 className="font-semibold text-foreground mb-3">Neighborhoods</h4>
|
|
<ul className="space-y-2">
|
|
{neighborhoods.map((neighborhood, index) => (
|
|
<motion.li
|
|
key={neighborhood}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.3, delay: 0.8 + index * 0.05 }}
|
|
className="text-sm text-muted-foreground"
|
|
>
|
|
{neighborhood}
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|