116 lines
4.6 KiB
TypeScript
116 lines
4.6 KiB
TypeScript
'use client';
|
||
|
||
import {
|
||
FiServer,
|
||
FiTool,
|
||
FiMonitor,
|
||
FiZap,
|
||
FiArrowRight,
|
||
} from 'react-icons/fi';
|
||
import {motion} from 'framer-motion';
|
||
|
||
const services = [
|
||
{
|
||
title: 'Beratung',
|
||
icon: <FiMonitor size={24}/>,
|
||
description:
|
||
'Strategische und technische Beratung rund um digitale Produkte und Prozesse. Wir analysieren bestehende Systeme, identifizieren Potenziale und helfen dir, die passende Architektur für dein Projekt zu finden.',
|
||
},
|
||
{
|
||
title: 'Entwicklung',
|
||
icon: <FiZap size={24}/>,
|
||
description:
|
||
'Individuelle Softwareentwicklung – skalierbar, wartbar, zukunftssicher. Ob Web-App, API oder internes Tool: Wir setzen moderne Technologien ein, um genau die Lösung zu bauen, die du brauchst.',
|
||
},
|
||
{
|
||
title: 'Managed Services',
|
||
icon: <FiServer size={24}/>,
|
||
description:
|
||
'Wir betreuen Infrastruktur, Server und Systeme – verlässlich und performant. Unser Team kümmert sich um Hosting, Monitoring, Backups und sorgt für einen reibungslosen Betrieb deiner Plattform.',
|
||
},
|
||
{
|
||
title: 'Fehlerbehebung',
|
||
icon: <FiTool size={24}/>,
|
||
description:
|
||
'Schnelle Hilfe bei Bugs, Performance-Problemen oder Sicherheitslücken. Wir analysieren Probleme, beheben sie gezielt und sorgen dafür, dass dein System wieder stabil läuft – langfristig und zuverlässig.',
|
||
},
|
||
];
|
||
|
||
const HomeServices = () => {
|
||
return (
|
||
<section
|
||
className="w-full py-24 bg-[var(--primary-bg)] transition-theme"
|
||
id="leistungen"
|
||
>
|
||
<div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
|
||
{/* Heading */}
|
||
<motion.h2
|
||
className="text-3xl md:text-4xl font-bold mb-1 text-left text-[var(--primary-text)]"
|
||
initial={{opacity: 0, y: 20}}
|
||
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}}
|
||
/>
|
||
|
||
{/* Service Cards */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{services.map((service, index) => (
|
||
<motion.div
|
||
key={service.title}
|
||
className="p-6 rounded-xl border border-[var(--secondary-bg)] bg-[var(--secondary-bg)] shadow-md"
|
||
whileHover={{
|
||
scale: 1.03,
|
||
boxShadow: '0px 10px 20px rgba(0,0,0,0.1)',
|
||
}}
|
||
initial={{opacity: 0, y: 30}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{
|
||
duration: 0.4,
|
||
delay: index * 0.1,
|
||
ease: 'easeOut',
|
||
}}
|
||
>
|
||
<div className="mb-3 text-blue-600">{service.icon}</div>
|
||
<h3 className="text-xl font-semibold mb-2 text-[var(--primary-text)]">
|
||
{service.title}
|
||
</h3>
|
||
<p className="text-sm text-[var(--secondary-text)] leading-relaxed">
|
||
{service.description}
|
||
</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Weitere Leistungen */}
|
||
<motion.div
|
||
className="mt-10 flex justify-end"
|
||
initial={{opacity: 0}}
|
||
whileInView={{opacity: 1}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.3}}
|
||
>
|
||
<a
|
||
href="/services"
|
||
className="text-sm font-semibold text-blue-600 hover:underline flex items-center gap-1"
|
||
>
|
||
Weitere Leistungen <FiArrowRight size={16}/>
|
||
</a>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default HomeServices;
|