101 lines
4.5 KiB
TypeScript
101 lines
4.5 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative min-h-[calc(100dvh-80px)] flex items-center bg-gradient-to-br from-blue-50 via-white to-blue-50">
|
|
<div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="z-10 text-center lg:text-left"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="mb-4 lg:mb-6"
|
|
>
|
|
<h2 className="text-lg lg:text-xl text-blue-600 font-semibold mb-2">Welcome to a World of Deaf Advocacy</h2>
|
|
<h1 className="text-4xl lg:text-5xl font-bold mb-3 lg:mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-mcdi-maroon">
|
|
Chris Haulmark
|
|
</h1>
|
|
<h3 className="text-xl lg:text-2xl text-gray-700">Transforming Lives Through Leadership</h3>
|
|
</motion.div>
|
|
|
|
<motion.p
|
|
className="text-lg lg:text-xl leading-relaxed text-gray-700 mb-6 lg:mb-8 max-w-lg mx-auto lg:mx-0 font-medium"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.5 }}
|
|
>
|
|
Empowering the Deaf community through advocacy, leadership, and cultural bridge-building. With experience spanning 54 countries and leadership roles in prominent state and national Deaf organizations.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.7 }}
|
|
>
|
|
<Link href="/services" className="w-full sm:w-auto">
|
|
<motion.button
|
|
className="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-mcdi-maroon text-white px-6 lg:px-8 py-3 rounded-lg shadow-lg text-base lg:text-lg"
|
|
whileHover={{ scale: 1.05, boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1)" }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
Explore Services
|
|
</motion.button>
|
|
</Link>
|
|
<Link href="/biography" className="w-full sm:w-auto">
|
|
<motion.button
|
|
className="w-full sm:w-auto border-2 border-blue-600 text-blue-600 px-6 lg:px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors text-base lg:text-lg"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
Learn More
|
|
</motion.button>
|
|
</Link>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="relative z-10 mt-8 lg:mt-0"
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<div className="w-full h-[300px] sm:h-[400px] lg:h-[600px] relative group">
|
|
<motion.div
|
|
className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent rounded-2xl"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.5 }}
|
|
/>
|
|
<Image
|
|
src="/images/hero-image.jpg"
|
|
alt="Chris Haulmark standing by a Dodge Charger near a serene lake"
|
|
fill
|
|
className="absolute inset-0 rounded-2xl shadow-2xl object-cover grayscale hover:grayscale-0 transition-all duration-500"
|
|
priority
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
/>
|
|
<motion.div
|
|
className="absolute bottom-0 left-0 right-0 p-4 lg:p-8 text-white opacity-100 lg:opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
|
initial={{ y: 20 }}
|
|
whileHover={{ y: 0 }}
|
|
>
|
|
<p className="text-xl lg:text-2xl font-semibold mb-2 drop-shadow-lg">Global Deaf Advocate</p>
|
|
<p className="text-base lg:text-lg drop-shadow-lg">Vice President of KAD & NAD Region II Board Representative</p>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|