Merge branch 'dev' into 'production'

Merge branch 'Homepage Refactoring - Pt .3' into 'production'

See merge request rheinsw/website!30

components/Services/Section/overview/BugFixing.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React from "react";
+import Image from "next/image";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const BugFixing = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div
+            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16"
+            style={{color: colors.primaryText}}
+        >
+            <div>
+                <motion.h2
+                    className="text-xl sm:text-2xl md:text-3xl font-bold mb-4"
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5}}
+                >
+                    🐞 Fehlerbehebung & Optimierung
+                </motion.h2>
+                <motion.p
+                    className="text-sm font-medium leading-7"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Wir analysieren und beheben Fehler in bestehenden Systemen, optimieren die Performance und sorgen
+                    dafür, dass deine Software stabil und zuverlässig läuft.
+                </motion.p>
+
+                <motion.h3
+                    className="mt-8 text-lg font-semibold"
+                    initial={{opacity: 0}}
+                    whileInView={{opacity: 1}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    🔎 Fokusbereiche
+                </motion.h3>
+                <ul className="list-disc list-inside text-sm mt-4 space-y-1" style={{color: colors.secondaryText}}>
+                    <li>Debugging & Troubleshooting</li>
+                    <li>Performance-Analyse</li>
+                    <li>Refactoring von Legacy-Code</li>
+                    <li>Stabilitäts- und Sicherheitsupdates</li>
+                </ul>
+            </div>
+            <div className="justify-self-center">
+                <motion.div
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <Image
+                        src="/images/bug_fixing.jpg"
+                        alt="Bug fixing illustration"
+                        width={300}
+                        height={300}
+                        className="object-contain"
+                    />
+                </motion.div>
+            </div>
+        </div>
+    );
+};
+
+export default BugFixing;