New Project Structure: - Created reusable UI components (ServiceCard, AnimatedSection, SectionTitle) - Split large components into smaller, focused ones - Extracted shared hooks for common functionality - Organized constants into separate files Key Improvements: - Hooks: useScrollNavigation, useScrollToSection, useCookieSettings - UI Components: Modular components for consistent styling and behavior - Constants: Centralized data management (ServicesData, NavigationData) - Component Split: Navbar, Hero, and Footer broken into logical sub-components
49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import { SectionTitle } from '@/components/ui/SectionTitle';
|
|
import { ServiceCard } from '@/components/ui/ServiceCard';
|
|
import { servicesData } from '@/constant/ServicesData';
|
|
|
|
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">
|
|
<SectionTitle title="Leistungen" />
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{servicesData.map((service, index) => (
|
|
<ServiceCard
|
|
key={service.title}
|
|
title={service.title}
|
|
description={service.description}
|
|
bullets={service.bullets}
|
|
index={index}
|
|
/>
|
|
))}
|
|
</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; |