You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
2.3 KiB
64 lines
2.3 KiB
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section
|
|
id="home"
|
|
className="pt-16 md:pt-20 min-h-screen flex items-center relative overflow-hidden"
|
|
>
|
|
{/* Blurred background image */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: `url('/media/family-hero.jpg')`,
|
|
filter: 'blur(1.5px)',
|
|
transform: 'scale(1.05)'
|
|
}}
|
|
></div>
|
|
|
|
{/* Transparent overlay for better text readability */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-black/50"></div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32 relative z-10">
|
|
<div className="max-w-3xl">
|
|
<div className="text-center lg:text-left">
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
|
className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight drop-shadow-lg"
|
|
>
|
|
Multilingual Family Space
|
|
</motion.h1>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
|
|
className="text-xl md:text-2xl lg:text-3xl text-white mb-8 font-light drop-shadow-lg"
|
|
>
|
|
Guiding bilingual families and language learners on their multilingual journey
|
|
</motion.p>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
|
|
>
|
|
<Link
|
|
href="#contact"
|
|
style={{ backgroundColor: '#00171F' }}
|
|
className="inline-block text-white px-8 py-4 rounded-full text-lg font-semibold hover:opacity-90 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"
|
|
>
|
|
Contact Now
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|