61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
import { useInView } from 'react-intersection-observer'
|
|
|
|
const Home = () => {
|
|
const [ref, inView] = useInView({
|
|
triggerOnce: true,
|
|
threshold: 0.1,
|
|
})
|
|
|
|
return (
|
|
<div>
|
|
{/* Hero Section */}
|
|
<section className="relative h-screen">
|
|
<div className="absolute inset-0">
|
|
<img
|
|
src="/images/scene.jpg"
|
|
alt="Serene mountain lake landscape"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-secondary/70 to-primary/70" />
|
|
</div>
|
|
|
|
<div className="relative h-full flex items-center justify-center text-accent-snow">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center px-4"
|
|
>
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-8 text-accent-snow">
|
|
DeafGain LLC
|
|
</h1>
|
|
<p className="text-2xl md:text-3xl font-extrabold mb-8 bg-gradient-to-r from-accent-lake via-white to-accent-lake bg-clip-text text-transparent tracking-wider">
|
|
"Language is a right, not a luxury."
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Mission Statement Section */}
|
|
<motion.section
|
|
ref={ref}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8 }}
|
|
className="py-20 bg-accent-snow"
|
|
>
|
|
<div className="max-w-4xl mx-auto px-4 text-center">
|
|
<h2 className="text-3xl font-bold text-secondary mb-6">
|
|
Our Mission
|
|
</h2>
|
|
<p className="text-lg text-accent-mountain">
|
|
We are dedicated to bridging language gaps, fostering inclusivity, and celebrating <br /> the unique contributions of the Deaf community through innovative solutions that benefit everyone.
|
|
</p>
|
|
</div>
|
|
</motion.section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|