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.7 KiB
64 lines
2.7 KiB
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { motion } from 'framer-motion';
|
|
import Image from 'next/image';
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section id="home" className="pt-16 md:pt-20 min-h-screen flex items-center bg-gradient-to-br from-orange-50 via-orange-50 to-orange-100">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<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-slate-800 mb-6 leading-tight"
|
|
>
|
|
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-slate-600 mb-8 font-light"
|
|
>
|
|
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"
|
|
className="inline-block bg-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-orange-700 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"
|
|
>
|
|
Contact Now
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
|
|
className="relative h-64 md:h-96 lg:h-[500px] rounded-2xl overflow-hidden shadow-2xl"
|
|
>
|
|
<Image
|
|
src="https://kagi.com/proxy/familys-circle-of-love.jpg?c=N7Pi3QNEaSL6_svD8glSC__wDVyV2V3zvCInmdfWCWKG-8Z-O9nEpHpluEteRgw0QoYCXXKIdy6hZg8Xfdp19tYAlt-dh2gMkJKZiY8dnDIjuZuYj6-QliCKHu5uJamh4tIksNx6ozWuccjRjCnOzyjYSoJf_uF4FtTBLvOFJjRYpeUUDKVWjmrJT1Pbv8A5qcv87GQINLuysB5dqMdkPg%3D%3D"
|
|
alt="Multilingual family"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
priority
|
|
unoptimized
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|