70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
'use client';
|
||
|
||
import {CheckCircle} from 'lucide-react';
|
||
import {motion} from 'framer-motion';
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
|
||
const points = [
|
||
'Fertigstellung in 4–8 Wochen',
|
||
'Fester Ansprechpartner von Anfang bis Ende',
|
||
'Struktur & Klarheit',
|
||
'Starkes Alleinstellungsmerkmal',
|
||
'Zuverlässiges Team mit Weitblick',
|
||
];
|
||
|
||
export default function WhyUs() {
|
||
return (
|
||
<section id="whyus" className="py-24 px-4 bg-background text-foreground">
|
||
<div className="max-w-xl mx-auto">
|
||
<motion.h2
|
||
className="text-3xl md:text-4xl font-bold mb-1 text-center"
|
||
initial={{opacity: 0, y: 10}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4}}
|
||
>
|
||
Warum wir?
|
||
</motion.h2>
|
||
|
||
<motion.div
|
||
className="w-12 h-[2px] mt-2 mb-10 bg-amber-500 mx-auto"
|
||
initial={{opacity: 0, x: -20}}
|
||
whileInView={{opacity: 1, x: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.1}}
|
||
/>
|
||
|
||
<motion.div
|
||
className="rounded-2xl p-8 md:p-10 bg-gradient-to-br from-[#1e3a8a] to-[#2563eb] text-white shadow-xl relative overflow-hidden"
|
||
initial={{opacity: 0, y: 40}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.5}}
|
||
>
|
||
{/* Logo */}
|
||
<div className="mb-6">
|
||
<Image src="/logo.svg" alt="Rhein Software Logo" width={120} height={32}/>
|
||
</div>
|
||
|
||
<ul className="space-y-4 mb-8">
|
||
{points.map((point, index) => (
|
||
<li key={index} className="flex items-start gap-2">
|
||
<CheckCircle className="text-white w-5 h-5 flex-shrink-0 mt-0.5"/>
|
||
<span>{point}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<Link
|
||
href="/contact"
|
||
className="inline-block bg-white text-blue-700 font-semibold px-6 py-3 rounded-full text-center shadow-md hover:bg-slate-100 transition"
|
||
>
|
||
Kostenlose Beratung anfragen
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|