80 lines
2.8 KiB
JavaScript
80 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
import { Github } from 'lucide-react';
|
|
|
|
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 shouldReduceMotion = useReducedMotion();
|
|
|
|
if (shouldReduceMotion) {
|
|
return (
|
|
<section className="relative min-h-screen bg-nest-dark bg-hero-pattern bg-cover bg-center bg-no-repeat flex items-center">
|
|
<div className="absolute inset-0 bg-black/70"></div>
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<div className="max-w-3xl">
|
|
<h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
|
|
Hello, nest!
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed">
|
|
A progressive Node.js framework for building efficient, reliable and scalable server-side applications.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<button className="btn-primary">
|
|
Documentation
|
|
</button>
|
|
<button className="btn-secondary flex items-center justify-center gap-2">
|
|
<Github className="h-5 w-5" />
|
|
Source code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<motion.section
|
|
{...fadeUpPreset(0.1, 0.8)}
|
|
className="relative min-h-screen bg-nest-dark bg-hero-pattern bg-cover bg-center bg-no-repeat flex items-center"
|
|
>
|
|
<div className="absolute inset-0 bg-black/70"></div>
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<div className="max-w-3xl">
|
|
<motion.h1
|
|
{...fadeUpPreset(0.2, 0.8)}
|
|
className="text-5xl md:text-7xl font-bold text-white mb-6"
|
|
>
|
|
Hello, nest!
|
|
</motion.h1>
|
|
<motion.p
|
|
{...fadeUpPreset(0.3, 0.8)}
|
|
className="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed"
|
|
>
|
|
A progressive Node.js framework for building efficient, reliable and scalable server-side applications.
|
|
</motion.p>
|
|
<motion.div
|
|
{...fadeUpPreset(0.4, 0.8)}
|
|
className="flex flex-col sm:flex-row gap-4"
|
|
>
|
|
<button className="btn-primary">
|
|
Documentation
|
|
</button>
|
|
<button className="btn-secondary flex items-center justify-center gap-2">
|
|
<Github className="h-5 w-5" />
|
|
Source code
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
};
|
|
|
|
export default Hero; |