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
74 lines
3.4 KiB
TypeScript
74 lines
3.4 KiB
TypeScript
'use client';
|
||
|
||
import { motion } from 'framer-motion';
|
||
import { SectionTitle } from '@/components/ui/SectionTitle';
|
||
|
||
const About = () => {
|
||
return (
|
||
<section
|
||
id="about"
|
||
className="relative w-full py-24 bg-background text-foreground transition-colors duration-700 ease-in-out">
|
||
<div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
|
||
<div className="flex flex-col">
|
||
<SectionTitle
|
||
title="Über uns"
|
||
className="mb-6"
|
||
/>
|
||
|
||
{/* Text */}
|
||
<div className="p-0 max-w-4xl">
|
||
<motion.p
|
||
className="text-base md:text-lg leading-relaxed text-muted-foreground"
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.5, delay: 0.2}}
|
||
>
|
||
Wir sind Rhein-Software – ein Team, das sich auf individuelle Softwarelösungen spezialisiert
|
||
hat. Unsere Anwendungen sind technisch solide, skalierbar und durchdacht – gebaut für
|
||
langfristigen Erfolg.
|
||
</motion.p>
|
||
|
||
<motion.p
|
||
className="mt-6 text-base md:text-lg leading-relaxed text-muted-foreground"
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.5, delay: 0.3}}
|
||
>
|
||
Von der ersten Idee bis zum Go-Live begleiten wir Unternehmen und Startups mit einem
|
||
flexiblen Netzwerk, klarer Kommunikation und einem hohen Anspruch an Qualität. Gemeinsam
|
||
realisieren wir digitale Produkte, die wirklich passen.
|
||
</motion.p>
|
||
|
||
<motion.p
|
||
className="mt-6 text-base md:text-lg leading-relaxed text-muted-foreground"
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.5, delay: 0.4}}
|
||
>
|
||
Egal ob App-Entwicklung, interne Tools, Web-Plattformen oder komplexe Schnittstellen – wir
|
||
entwickeln Softwarelösungen, die intuitiv, effizient und exakt auf deine Anforderungen
|
||
zugeschnitten sind.
|
||
</motion.p>
|
||
</div>
|
||
|
||
{/* CTA Placeholder */}
|
||
<motion.div
|
||
className="mt-10 flex justify-end"
|
||
initial={{opacity: 0, y: 10}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.5, delay: 0.5}}
|
||
>
|
||
{/* CTA button can go here */}
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default About;
|