Gitlab-Migration/rhein-sw-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'homepage-refactoring' into 'dev'

Browse Source 
Refactor the whole page.

See merge request rheinsw/website!26
This commit is contained in:
Thatsaphorn
2025-04-11 19:08:43 +00:00
parent d19a90ce9a
commit 14ec81f4c2
33 changed files with 728 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
components/Home/Hero/Hero.tsx
View File

@@ -1,15 +1,16 @@
"use client";
'use client';
import Image from "next/image";
import {Typewriter} from "react-simple-typewriter";
import Image from 'next/image';
import {Typewriter} from 'react-simple-typewriter';
import {motion} from 'framer-motion';
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",
backgroundColor: 'var(--primary-bg)',
color: 'white',
}}
>
{/* Background Image */}
@@ -25,56 +26,71 @@ const Hero = () => {
<div className="absolute inset-0 bg-black/40"/>
</div>
{/* Main Content */}
{/* 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"
<motion.h1
className="text-3xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold text-white"
initial={{opacity: 0, y: 30}}
animate={{opacity: 1, y: 0}}
transition={{duration: 0.6, ease: 'easeOut'}}
>
Rhein-Software Development
</h1>
</motion.h1>
<p
data-aos="fade-up"
data-aos-delay="200"
<motion.p
className="text-lg md:text-xl text-gray-400"
initial={{opacity: 0, y: 30}}
animate={{opacity: 1, y: 0}}
transition={{duration: 0.6, delay: 0.2, ease: 'easeOut'}}
>
Digitale Lösungen für dein Unternehmen.
</p>
</motion.p>
<p
data-aos="fade-up"
data-aos-delay="400"
<motion.p
className="mt-4 text-lg md:text-xl font-semibold text-white"
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{delay: 0.9, duration: 0.6}}
>
<Typewriter
words={["Beratung", "Entwicklung", "Wartung", "Fehlerbehebung"]}
words={['Beratung', 'Entwicklung', 'Wartung', 'Fehlerbehebung']}
loop={true}
cursor
cursorStyle="_"
typeSpeed={60}
deleteSpeed={40}
delaySpeed={1500} // ⬅️ Delay before it starts typing the FIRST word
delaySpeed={1500}
/>
</p>
</motion.p>
</div>
{/* Floating Image */}
<div
data-aos="fade-up"
data-aos-delay="400"
className="hidden lg:block animate-float"
<motion.div
className="hidden lg:block"
initial={{opacity: 0, y: 30}}
animate={{opacity: 1, y: 0}}
transition={{duration: 0.8, ease: 'easeOut', delay: 0.3}}
>
<Image
src="/images/hero.png"
alt="hero graphic"
width={700}
height={700}
/>
</div>
<motion.div
animate={{y: [0, -10, 0]}}
transition={{
duration: 4,
repeat: Infinity,
ease: 'easeInOut',
}}
className="animate-float"
>
<Image
src="/images/hero.png"
alt="hero graphic"
width={700}
height={700}
/>
</motion.div>
</motion.div>
</div>
</div>
</div>