77 lines
2.6 KiB
JavaScript
77 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
|
|
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
|
initial: { opacity: 0, y: 20 },
|
|
whileInView: { opacity: 1, y: 0 },
|
|
viewport: { once: true, amount: 0.2 },
|
|
transition: { delay, duration, ease: "easeOut" }
|
|
});
|
|
|
|
const Hero = () => {
|
|
const shouldReduce = useReducedMotion();
|
|
|
|
if (shouldReduce) {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center bg-hero-pattern bg-cover bg-center bg-no-repeat">
|
|
<div className="absolute inset-0 bg-black/60"></div>
|
|
<div className="container-custom relative z-10">
|
|
<div className="max-w-3xl">
|
|
<h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
|
|
Official support
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-gray-200 mb-8 leading-relaxed">
|
|
Our Experts become your development partner to eliminate project risk, tackling the most ambitious projects - right by your side.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<button className="btn-primary">
|
|
Get in touch
|
|
</button>
|
|
<button className="btn-secondary">
|
|
Read more
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<motion.section
|
|
{...fadeUpPreset(0.1, 1.0)}
|
|
className="relative min-h-screen flex items-center bg-hero-pattern bg-cover bg-center bg-no-repeat"
|
|
>
|
|
<div className="absolute inset-0 bg-black/60"></div>
|
|
<div className="container-custom relative z-10">
|
|
<div className="max-w-3xl">
|
|
<motion.h1
|
|
{...fadeUpPreset(0.2, 0.8)}
|
|
className="text-5xl md:text-7xl font-bold text-white mb-6"
|
|
>
|
|
Official support
|
|
</motion.h1>
|
|
<motion.p
|
|
{...fadeUpPreset(0.3, 0.8)}
|
|
className="text-xl md:text-2xl text-gray-200 mb-8 leading-relaxed"
|
|
>
|
|
Our Experts become your development partner to eliminate project risk, tackling the most ambitious projects - right by your side.
|
|
</motion.p>
|
|
<motion.div
|
|
{...fadeUpPreset(0.4, 0.8)}
|
|
className="flex flex-col sm:flex-row gap-4"
|
|
>
|
|
<button className="btn-primary">
|
|
Get in touch
|
|
</button>
|
|
<button className="btn-secondary">
|
|
Read more
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
};
|
|
|
|
export default Hero; |