Thatsaphorn Atchariyaphap
c44c713925
- Added `react-simple-typewriter` dependency to project. - Integrated a typewriter effect in the Hero component for dynamic text.
85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import {Typewriter} from "react-simple-typewriter";
|
|
|
|
const Hero = () => {
|
|
return (
|
|
<div
|
|
className="relative w-full pt-[4vh] md:pt-[12vh] h-screen flex flex-col overflow-hidden"
|
|
style={{
|
|
backgroundColor: "var(--primary-bg)",
|
|
color: "white",
|
|
}}
|
|
>
|
|
{/* Background Image */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/images/home_hero.jpg"
|
|
alt="Rhein river aerial view"
|
|
layout="fill"
|
|
objectFit="cover"
|
|
className="blur-md scale-105"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-black/40"/>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="relative z-10 flex justify-center flex-col w-[90%] sm:w-[80%] h-full mx-auto">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12">
|
|
{/* Text Content */}
|
|
<div>
|
|
<h1
|
|
data-aos="fade-up"
|
|
className="text-3xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold text-white"
|
|
>
|
|
Rhein-Software Development
|
|
</h1>
|
|
|
|
<p
|
|
data-aos="fade-up"
|
|
data-aos-delay="200"
|
|
className="text-lg md:text-xl text-gray-400"
|
|
>
|
|
Wir bieten digitale Lösungen für dein Unternehmen.
|
|
</p>
|
|
|
|
<p
|
|
data-aos="fade-up"
|
|
data-aos-delay="400"
|
|
className="mt-4 text-lg md:text-xl font-semibold text-white"
|
|
>
|
|
<Typewriter
|
|
words={["Beratung", "Entwicklung", "Wartung", "Fehlerbehebung"]}
|
|
loop={true}
|
|
cursor
|
|
cursorStyle="_"
|
|
typeSpeed={60}
|
|
deleteSpeed={40}
|
|
delaySpeed={1500} // ⬅️ Delay before it starts typing the FIRST word
|
|
/>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Floating Image */}
|
|
<div
|
|
data-aos="fade-up"
|
|
data-aos-delay="400"
|
|
className="hidden lg:block animate-float"
|
|
>
|
|
<Image
|
|
src="/images/hero.png"
|
|
alt="hero graphic"
|
|
width={700}
|
|
height={700}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|