115 lines
4.6 KiB
TypeScript
115 lines
4.6 KiB
TypeScript
'use client';
|
||
|
||
import {motion} from 'framer-motion';
|
||
import {ChevronRight} from 'lucide-react';
|
||
import Link from 'next/link';
|
||
|
||
const services = [
|
||
{
|
||
title: 'Webdesign',
|
||
description: 'Moderne Websites, die Vertrauen schaffen und verkaufen.',
|
||
bullets: [
|
||
'Maßgeschneidertes Design',
|
||
'Klare Struktur & überzeugende Inhalte',
|
||
'Nutzerführung mit System & Strategie',
|
||
'Für alle Geräte optimiert',
|
||
],
|
||
},
|
||
{
|
||
title: 'App-Entwicklung',
|
||
description: 'Skalierbare Apps für Web und Mobile – von der Idee bis zum Launch.',
|
||
bullets: [
|
||
'Plattformübergreifend mit modernen Technologien',
|
||
'Backend & API-Entwicklung inklusive',
|
||
'Individuelle Funktionen & Logik',
|
||
'Stabil, performant & wartbar',
|
||
],
|
||
},
|
||
{
|
||
title: 'Interne Tools',
|
||
description: 'Digitale Werkzeuge, die Prozesse vereinfachen und Zeit sparen.',
|
||
bullets: [
|
||
'Prozessdigitalisierung & Automatisierung',
|
||
'Zugeschnitten auf eure Workflows',
|
||
'Skalierbar & zukunftssicher',
|
||
'Intuitiv & effizient bedienbar',
|
||
],
|
||
},
|
||
];
|
||
|
||
const HomeServices = () => {
|
||
return (
|
||
<section id="services"
|
||
className="w-full py-24 bg-background text-foreground">
|
||
<div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
|
||
<motion.h2
|
||
className="text-3xl md:text-4xl font-bold mb-1 text-left"
|
||
initial={{opacity: 0, y: 10}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4}}
|
||
>
|
||
Leistungen
|
||
</motion.h2>
|
||
|
||
<motion.div
|
||
className="w-12 h-[2px] mt-2 mb-10 bg-amber-500"
|
||
initial={{opacity: 0, x: -20}}
|
||
whileInView={{opacity: 1, x: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.1}}
|
||
/>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{services.map((service, index) => (
|
||
<motion.div
|
||
key={service.title}
|
||
className="flex flex-col justify-between h-full p-6 rounded-3xl border bg-muted text-foreground"
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: index * 0.1}}
|
||
whileHover={{
|
||
scale: 1.03,
|
||
boxShadow: '0px 12px 30px rgba(0, 0, 0, 0.08)',
|
||
}}
|
||
>
|
||
<div>
|
||
<h3 className="text-xl font-semibold mb-2">{service.title}</h3>
|
||
<p className="text-muted-foreground mb-4">{service.description}</p>
|
||
<ul className="space-y-3">
|
||
{service.bullets.map((point, i) => (
|
||
<li key={i} className="flex items-start gap-2">
|
||
<ChevronRight className="w-4 h-4 text-primary mt-1"/>
|
||
<span className="text-sm text-foreground">{point}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
<motion.div
|
||
className="mt-12 text-center"
|
||
initial={{opacity: 0}}
|
||
whileInView={{opacity: 1}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.3}}
|
||
>
|
||
<p className="text-muted-foreground mb-4 text-base md:text-lg">
|
||
Du möchtest mehr über unsere Leistungen erfahren oder hast ein konkretes Projekt im Kopf?
|
||
</p>
|
||
<Link
|
||
href="/contact"
|
||
className="text-sm font-semibold text-primary hover:underline"
|
||
>
|
||
Jetzt Kontakt aufnehmen →
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default HomeServices; |