77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import {motion} from 'framer-motion';
|
|
import Image from 'next/image';
|
|
import {Typewriter} from 'react-simple-typewriter';
|
|
import PulsatingButton from "@/components/PulsatingButton";
|
|
|
|
const Hero = () => {
|
|
return (
|
|
<section id="start" className="relative w-full h-screen overflow-hidden">
|
|
{/* Background */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/images/home_hero.jpg"
|
|
alt="Rhein river aerial view"
|
|
fill
|
|
className="object-cover scale-105 blur-sm"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-black/60"/>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div
|
|
className="relative z-10 flex flex-col justify-center items-start h-full w-[90%] sm:w-[80%] max-w-6xl mx-auto text-white">
|
|
<motion.h1
|
|
className="text-3xl sm:text-5xl font-bold mb-6 leading-tight"
|
|
initial={{opacity: 0, y: 40}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6}}
|
|
>
|
|
Digitale Lösungen, <br/> die wirklich passen.
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-lg sm:text-xl text-gray-300 mb-6 max-w-2xl"
|
|
initial={{opacity: 0, y: 20}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6, delay: 0.2}}
|
|
>
|
|
Wir entwickeln individuelle Softwarelösungen für Unternehmen und Startups.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
className="text-xl font-semibold text-white"
|
|
initial={{opacity: 0}}
|
|
animate={{opacity: 1}}
|
|
transition={{delay: 0.6}}
|
|
>
|
|
<Typewriter
|
|
words={['Webdesign', 'App-Entwicklung', 'Interne Tools']}
|
|
loop={true}
|
|
cursor
|
|
cursorStyle="_"
|
|
typeSpeed={60}
|
|
deleteSpeed={40}
|
|
delaySpeed={2000}
|
|
/>
|
|
</motion.div>
|
|
|
|
<div className="mt-10 relative flex items-center justify-center">
|
|
<PulsatingButton
|
|
label="Jetzt Kontakt aufnehmen"
|
|
href="/contact"
|
|
color="#2563eb" // Tailwind blue-600
|
|
width={256}
|
|
pulse
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|