83 lines
3.8 KiB
TypeScript
83 lines
3.8 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import {FiArrowRight} from 'react-icons/fi';
|
||
import {motion} from 'framer-motion';
|
||
|
||
const About = () => {
|
||
return (
|
||
<section className="relative w-full py-24 bg-[var(--secondary-bg)] transition-theme">
|
||
<div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
|
||
<div className="flex flex-col">
|
||
{/* Title */}
|
||
<motion.h2
|
||
className="text-3xl md:text-4xl font-bold mb-1 text-left"
|
||
style={{color: 'var(--primary-text)'}}
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.5}}
|
||
>
|
||
Über uns
|
||
</motion.h2>
|
||
|
||
<motion.div
|
||
className="w-12 h-[2px] mt-2 mb-6 bg-amber-500"
|
||
initial={{opacity: 0, x: -20}}
|
||
whileInView={{opacity: 1, x: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.1}}
|
||
/>
|
||
|
||
{/* Text */}
|
||
<div className="p-0">
|
||
<motion.p
|
||
className="text-base md:text-lg leading-relaxed text-[var(--secondary-text)] max-w-4xl"
|
||
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 und digitale
|
||
Services 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-[var(--secondary-text)] max-w-4xl"
|
||
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. Unsere
|
||
Lösungen sind
|
||
intuitiv, effizient – und genau auf deine Anforderungen zugeschnitten.
|
||
</motion.p>
|
||
</div>
|
||
|
||
{/* CTA Button */}
|
||
<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}}
|
||
>
|
||
<Link href="/about">
|
||
<button
|
||
className="flex items-center gap-2 bg-blue-700 hover:bg-blue-900 text-white font-semibold px-5 py-2 rounded-full shadow-lg transition-all">
|
||
Mehr über uns <FiArrowRight size={18}/>
|
||
</button>
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default About;
|