Thatsaphorn Atchariyaphap
d9ff535ac0
New Project Structure: - Created reusable UI components (ServiceCard, AnimatedSection, SectionTitle) - Split large components into smaller, focused ones - Extracted shared hooks for common functionality - Organized constants into separate files Key Improvements: - Hooks: useScrollNavigation, useScrollToSection, useCookieSettings - UI Components: Modular components for consistent styling and behavior - Constants: Centralized data management (ServicesData, NavigationData) - Component Split: Navbar, Hero, and Footer broken into logical sub-components
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Typewriter } from 'react-simple-typewriter';
|
|
import PulsatingButton from '@/components/PulsatingButton';
|
|
|
|
const typewriterWords = ['Webdesign', 'App-Entwicklung', 'Interne Tools'];
|
|
|
|
export const HeroContent = () => {
|
|
return (
|
|
<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={typewriterWords}
|
|
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"
|
|
width={256}
|
|
pulse
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |