// File: /data/html/HouseOfCoffee/resources/js/Pages/CoffeeHouseLanding.jsx
import React, { useEffect } from 'react';
import { Head, Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
// Using react-icons for FontAwesome icons instead of lucide-react for proper exports.
import { FaCoffee, FaMapMarkerAlt, FaPhone, FaInstagram, FaFacebook, FaTwitter } from 'react-icons/fa';
export default function CoffeeHouseLanding() {
// Animation variants for staggered animations
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.2,
delayChildren: 0.3,
},
},
};
const itemVariants = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
transition: { type: 'spring', stiffness: 100 },
},
};
const featureCardVariants = {
hidden: { scale: 0.8, opacity: 0 },
visible: {
scale: 1,
opacity: 1,
transition: { type: 'spring', damping: 12 },
},
hover: {
scale: 1.05,
boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)",
transition: { type: 'spring', stiffness: 400, damping: 10 },
},
};
// Parallax effect for background
useEffect(() => {
const handleScroll = () => {
const scrollValue = window.scrollY;
const parallaxBg = document.querySelector('.parallax-bg');
if (parallaxBg) {
parallaxBg.style.transform = `translateY(${scrollValue * 0.4}px)`;
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<>