Merge branch 'homepage-refactoring' into 'dev'

Refactor the whole page.

See merge request rheinsw/website!26

components/Home/HomeServices.tsx

@@ -0,0 +1,115 @@
+'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;