72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import { Lightbulb, Palette, Code, Search } from "lucide-react";
|
|
|
|
const Services = () => {
|
|
const services = [
|
|
{
|
|
icon: Lightbulb,
|
|
title: "Strategieberatung",
|
|
description: "Wir analysieren Ihre Ziele und erstellen ein maßgeschneidertes Konzept für Ihren digitalen Erfolg.",
|
|
number: "01",
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "UX/UI Design",
|
|
description: "Modernes, benutzerfreundliches Design, das Ihre Marke perfekt repräsentiert.",
|
|
number: "02",
|
|
},
|
|
{
|
|
icon: Code,
|
|
title: "Entwicklung",
|
|
description: "Professionelle Webentwicklung mit modernsten Technologien. Schnell, sicher und skalierbar.",
|
|
number: "03",
|
|
},
|
|
{
|
|
icon: Search,
|
|
title: "SEO & Support",
|
|
description: "Suchmaschinenoptimierung und kontinuierlicher Support für langfristigen Erfolg.",
|
|
number: "04",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="services" className="py-24 md:py-32 bg-background relative">
|
|
<div className="container mx-auto px-6">
|
|
{/* Section Header */}
|
|
<div className="mb-16 md:mb-24">
|
|
<div className="label-tag mb-4">Was wir tun</div>
|
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase">
|
|
Leistungen
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-px bg-border rounded-lg overflow-hidden">
|
|
{services.map((service) => (
|
|
<div
|
|
key={service.title}
|
|
className="group bg-background p-8 md:p-12 transition-all duration-500 hover:bg-secondary/30"
|
|
>
|
|
<div className="flex items-start justify-between mb-8">
|
|
<div className="w-12 h-12 rounded-full border border-border flex items-center justify-center group-hover:border-foreground/30 transition-colors">
|
|
<service.icon className="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" />
|
|
</div>
|
|
<span className="text-5xl font-display font-medium text-border group-hover:text-muted-foreground/30 transition-colors">
|
|
{service.number}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-4 uppercase tracking-tight">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{service.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Services;
|