Frontend migration

2025-04-27 17:33:20 +00:00
parent 01bb308740
commit c3f43016c6
94 changed files with 10729 additions and 0 deletions
--- a/frontend/components/Services/Section/OverviewTabs.tsx
+++ b/frontend/components/Services/Section/OverviewTabs.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import React, {useState} from 'react';
+import {motion, AnimatePresence} from 'framer-motion';
+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";
+import BugFixing from "@/components/Services/Section/overview/BugFixing";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const tabs = [
+    {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/>,
+};
+
+const OverviewTabs = () => {
+    const [activeTab, setActiveTab] = useState("entwicklung");
+    const colors = useThemeColors();
+
+    return (
+        <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-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 flex-wrap gap-4 mb-10">
+                {tabs.map((tab) => (
+                    <button
+                        key={tab.key}
+                        onClick={() => setActiveTab(tab.key)}
+                        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',
+                            borderColor: activeTab === tab.key ? '#1D4ED8' : colors.inputBorder,
+                        }}
+                    >
+                        {tab.icon}
+                        {tab.label}
+                    </button>
+                ))}
+            </div>
+
+            <AnimatePresence mode="wait">
+                <motion.div
+                    key={activeTab}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    exit={{opacity: 0, y: -10}}
+                    transition={{duration: 0.4}}
+                >
+                    {tabContent[activeTab]}
+                </motion.div>
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default OverviewTabs;