99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
'use client'
|
||
|
||
import {Briefcase, BookOpen, Building2, User, Coins, ReceiptText} from 'lucide-react'
|
||
import {motion as m, Variants} from 'framer-motion'
|
||
|
||
const containerVariants: Variants = {
|
||
hidden: {},
|
||
visible: {
|
||
transition: {
|
||
staggerChildren: 0.2,
|
||
delayChildren: 0.1,
|
||
},
|
||
},
|
||
}
|
||
|
||
const cardVariants: Variants = {
|
||
hidden: {opacity: 0, y: 30},
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {
|
||
duration: 0.5,
|
||
ease: 'easeOut',
|
||
},
|
||
},
|
||
}
|
||
|
||
export function ServicesSection() {
|
||
const services = [
|
||
{
|
||
title: 'Einkommensteuer',
|
||
subtitle: 'Privatpersonen',
|
||
desc: 'Beratung und Erstellung Ihrer jährlichen Einkommensteuererklärung – digital und unkompliziert.',
|
||
icon: <User className="w-6 h-6 text-primary"/>,
|
||
},
|
||
{
|
||
title: 'Jahresabschlüsse',
|
||
subtitle: 'Unternehmen',
|
||
desc: 'Erstellung von Handels- und Steuerbilanzen für Einzelunternehmen, GmbH & Co. KG oder Kapitalgesellschaften.',
|
||
icon: <BookOpen className="w-6 h-6 text-primary"/>,
|
||
},
|
||
{
|
||
title: 'Lohnbuchhaltung',
|
||
subtitle: 'Mitarbeiterabrechnung',
|
||
desc: 'Abwicklung Ihrer Lohn- und Gehaltsabrechnungen – pünktlich, zuverlässig und digital.',
|
||
icon: <Coins className="w-6 h-6 text-primary"/>,
|
||
},
|
||
{
|
||
title: 'Existenzgründung',
|
||
subtitle: 'Startups & Gründer',
|
||
desc: 'Von der Idee zum Business – steuerliche Beratung, Businessplan und Gründungszuschuss-Anträge.',
|
||
icon: <Briefcase className="w-6 h-6 text-primary"/>,
|
||
},
|
||
{
|
||
title: 'Unternehmensnachfolge',
|
||
subtitle: 'Übergabe & Erbe',
|
||
desc: 'Beratung zur steuerlich optimalen Übergabe an Familie oder Käufer. Langfristige Planung inklusive.',
|
||
icon: <Building2 className="w-6 h-6 text-primary"/>,
|
||
},
|
||
{
|
||
title: 'Finanzbuchhaltung',
|
||
subtitle: 'GoBD & DATEV-konform',
|
||
desc: 'Digitale Finanzbuchhaltung inkl. Belegtransfer, OPOS und monatlichen Auswertungen.',
|
||
icon: <ReceiptText className="w-6 h-6 text-primary"/>,
|
||
},
|
||
]
|
||
|
||
return (
|
||
<section id="leistungen" className="py-20 px-6 bg-muted/50">
|
||
<div className="max-w-6xl mx-auto text-left">
|
||
<h2 className="text-3xl font-bold mb-12 text-center">Unsere Leistungen</h2>
|
||
|
||
<m.div
|
||
className="grid md:grid-cols-2 gap-10"
|
||
variants={containerVariants}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{once: true, amount: 0.2}}
|
||
>
|
||
{services.map(({title, subtitle, desc, icon}) => (
|
||
<m.div
|
||
key={title}
|
||
variants={cardVariants}
|
||
className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md border flex gap-4"
|
||
>
|
||
<div className="mt-1">{icon}</div>
|
||
<div>
|
||
<h3 className="text-xl font-semibold">{title}</h3>
|
||
<p className="text-sm text-muted-foreground mb-1">{subtitle}</p>
|
||
<p className="text-sm">{desc}</p>
|
||
</div>
|
||
</m.div>
|
||
))}
|
||
</m.div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|