Merge branch 'homepage-refactoring-pt4' into 'dev'

Homepage refactoring pt4

See merge request rheinsw/website!31

components/Services/Section/OverviewTabs.tsx

@@ -1,9 +1,8 @@
-// components/Leistungen/Section/OverviewTabs.tsx
 'use client';
 
 import React, {useState} from 'react';
 import {motion, AnimatePresence} from 'framer-motion';
-import {FiMonitor, FiUsers, FiSettings, FiTool} from 'react-icons/fi';
+import {FiZap, FiMonitor, FiServer, FiTool} from 'react-icons/fi';
 import Development from "@/components/Services/Section/overview/Development";
 import Consulting from "@/components/Services/Section/overview/Consulting";
 import ManagedServices from "@/components/Services/Section/overview/ManagedServices";
@@ -11,53 +10,47 @@ import BugFixing from "@/components/Services/Section/overview/BugFixing";
 import {useThemeColors} from "@/utils/useThemeColors";
 
 const tabs = [
-    {key: 'entwicklung', label: 'Entwicklung', icon: <FiMonitor size={20}/>},
-    {key: 'beratung', label: 'Beratung', icon: <FiUsers size={20}/>},
-    {key: 'services', label: 'Managed Services', icon: <FiSettings size={20}/>},
+    {key: 'entwicklung', label: 'Entwicklung', icon: <FiZap size={20}/>},
+    {key: 'beratung', label: 'Beratung', icon: <FiMonitor size={20}/>},
+    {key: 'services', label: 'Managed Services', icon: <FiServer size={20}/>},
     {key: 'support', label: 'Fehlerbehebung', icon: <FiTool size={20}/>},
 ];
 
 const tabContent: Record<string, React.ReactNode> = {
-    entwicklung: (
-        <Development/>
-    ),
-    beratung: (
-        <Consulting/>
-    ),
-    services: (
-        <ManagedServices/>
-    ),
-    support: (
-        <BugFixing/>
-    ),
+    entwicklung: <Development/>,
+    beratung: <Consulting/>,
+    services: <ManagedServices/>,
+    support: <BugFixing/>,
 };
+
 const OverviewTabs = () => {
     const [activeTab, setActiveTab] = useState("entwicklung");
     const colors = useThemeColors();
 
     return (
-        <div className="max-w-4xl mx-auto px-6 py-16 text-center transition-theme">
-            <h2
-                className="text-3xl font-bold mb-4"
-                style={{color: colors.primaryText}}
-            >
+        <div className="max-w-5xl mx-auto px-6 py-16 transition-theme text-left">
+            <h2 className="text-3xl font-bold mb-2" style={{color: colors.primaryText}}>
                 Was wir tun
             </h2>
 
             <motion.div
-                className="w-12 h-[2px] mb-8 bg-amber-500 mx-auto"
+                className="w-12 h-[2px] mb-6 bg-amber-500"
                 initial={{opacity: 0, x: -20}}
                 whileInView={{opacity: 1, x: 0}}
                 viewport={{once: true}}
                 transition={{duration: 0.4, delay: 0.1}}
             />
+            <p className="text-sm mb-10" style={{color: colors.secondaryText}}>
+                In diesem Abschnitt geben wir dir einen Überblick über unsere zentralen Leistungen – von der technischen
+                Entwicklung über Beratung bis hin zu Betrieb und Support.
+            </p>
 
-            <div className="flex justify-center gap-4 mb-8 flex-wrap">
+            <div className="flex flex-wrap gap-4 mb-10">
                 {tabs.map((tab) => (
                     <button
                         key={tab.key}
                         onClick={() => setActiveTab(tab.key)}
-                        className="flex items-center gap-2 px-4 py-2 rounded-full border text-sm font-medium transition-all"
+                        className="flex-1 min-w-[150px] flex items-center justify-start gap-2 px-4 py-2 rounded-full border text-sm font-medium transition-all"
                         style={{
                             color: activeTab === tab.key ? '#ffffff' : colors.primaryText,
                             backgroundColor: activeTab === tab.key ? '#1D4ED8' : 'transparent',
@@ -85,4 +78,4 @@ const OverviewTabs = () => {
     );
 };
 
-export default OverviewTabs;
+export default OverviewTabs;

components/Services/Section/ServiceHero.tsx

@@ -1,29 +1,18 @@
-// components/Leistungen/Section/Hero.tsx
 'use client';
 
 import React from "react";
-import {motion} from "framer-motion";
+import SmallHero from "@/components/Helper/SmallHero";
 
 const ServiceHero = () => {
     return (
-        <section className="py-24 text-center max-w-4xl mx-auto">
-            <motion.h1
-                className="text-4xl md:text-5xl font-bold mb-6"
-                initial={{opacity: 0, y: 20}}
-                animate={{opacity: 1, y: 0}}
-                transition={{duration: 0.6}}
-            >
-                Unsere Leistungen
-            </motion.h1>
-            <motion.p
-                className="text-lg text-gray-500"
-                initial={{opacity: 0, y: 10}}
-                animate={{opacity: 1, y: 0}}
-                transition={{duration: 0.6, delay: 0.2}}
-            >
-                Wir bieten maßgeschneiderte Lösungen – von der Beratung bis zum Betrieb.
-            </motion.p>
-        </section>
+        <div className="relative overflow-hidden">
+            <SmallHero
+                title="Unsere Leistungen"
+                subtitle="Wir bieten maßgeschneiderte Lösungen – von der Beratung bis zum Betrieb."
+                backgroundImage="/images/contact.png"
+                blurBackground
+            />
+        </div>
     );
 };
 

components/Services/Section/overview/BugFixing.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from "react";
-import Image from "next/image";
 import {motion} from "framer-motion";
 import {useThemeColors} from "@/utils/useThemeColors";
 
@@ -10,7 +9,7 @@ const BugFixing = () => {
 
     return (
         <div
-            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16"
+            className="w-[95%] mx-auto grid grid-cols-1 gap-6 mt-8 mb-16 text-left"
             style={{color: colors.primaryText}}
         >
             <div>
@@ -22,6 +21,7 @@ const BugFixing = () => {
                 >
                     🐞 Fehlerbehebung & Optimierung
                 </motion.h2>
+
                 <motion.p
                     className="text-sm font-medium leading-7"
                     style={{color: colors.secondaryText}}
@@ -41,28 +41,17 @@ const BugFixing = () => {
                 >
                     🔎 Fokusbereiche
                 </motion.h3>
-                <ul className="list-disc list-inside text-sm mt-4 space-y-1" style={{color: colors.secondaryText}}>
+
+                <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>
     );
 };

components/Services/Section/overview/Consulting.tsx

@@ -9,7 +9,7 @@ const Consulting = () => {
 
     return (
         <div
-            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 text-left"
+            className="w-[95%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 text-left"
             style={{color: colors.primaryText}}
         >
             <div>

components/Services/Section/overview/Development.tsx

@@ -101,7 +101,7 @@ const Development = () => {
 
     return (
         <div
-            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 gap-6 mt-8 mb-16 text-left"
+            className="w-[95%] mx-auto grid grid-cols-1 gap-6 mt-8 mb-16 text-left"
             style={{color: colors.primaryText}}
         >
             <div>

components/Services/Section/overview/ManagedServices.tsx

@@ -9,7 +9,7 @@ const ManagedServices = () => {
 
     return (
         <div
-            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 text-left"
+            className="w-[95%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 text-left"
             style={{color: colors.primaryText}}
         >
             <div>