Frontend migration

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;

frontend/components/Services/Section/ServiceHero.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import React from "react";
+import SmallHero from "@/components/Helper/SmallHero";
+
+const ServiceHero = () => {
+    return (
+        <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>
+    );
+};
+
+export default ServiceHero;

frontend/components/Services/Section/overview/BugFixing.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const BugFixing = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div
+            className="w-[95%] mx-auto grid grid-cols-1 gap-6 mt-8 mb-16 text-left"
+            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>
+    );
+};
+
+export default BugFixing;

frontend/components/Services/Section/overview/Consulting.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const Consulting = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div
+            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>
+                <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}}
+                >
+                    🧠 Technische Beratung
+                </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 unterstützen dich dabei, technische Entscheidungen fundiert zu treffen – von der Auswahl
+                    geeigneter Technologien bis hin zur Planung skalierbarer Architekturen. Gemeinsam finden wir den
+                    effizientesten Weg von der Idee bis zur Umsetzung – praxisnah, zielgerichtet und verständlich.
+                </motion.p>
+
+                <motion.h3
+                    className="mt-8 text-lg font-semibold"
+                    initial={{opacity: 0}}
+                    whileInView={{opacity: 1}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    🔍 Themenbereiche
+                </motion.h3>
+
+                <ul
+                    className="list-disc list-inside text-sm mt-4 space-y-1"
+                    style={{color: colors.secondaryText}}
+                >
+                    <li>Software-Architektur & Microservices</li>
+                    <li>Technologie- und Framework-Auswahl</li>
+                    <li>Prototyping & Machbarkeitsanalysen</li>
+                    <li>Projektplanung und agile Methodik</li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default Consulting;

frontend/components/Services/Section/overview/Development.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+import Image from "next/image";
+
+const techStack = {
+    row1: [
+        {
+            category: 'Programmiersprachen & Frameworks – Backend',
+            items: [
+                {id: 'java', label: 'Java'},
+                {id: 'dart', label: 'Dart'},
+                {id: 'kotlin', label: 'Kotlin'},
+                {id: 'spring', label: 'Spring'},
+            ],
+        },
+        {
+            category: 'Programmiersprachen & Frameworks – Frontend',
+            items: [
+                {id: 'html', label: 'HTML'},
+                {id: 'css', label: 'CSS'},
+                {id: 'bootstrap', label: 'Bootstrap'},
+                {id: 'nextjs', label: 'Next.js'},
+                {id: 'typescript', label: 'TypeScript'},
+                {id: 'flutter', label: 'Flutter'},
+            ],
+        },
+    ],
+    row2: [
+        {
+            category: 'Betriebssysteme',
+            items: [
+                {id: 'macos', label: 'macOS'},
+                {id: 'debian', label: 'Debian'},
+                {id: 'ubuntu', label: 'Ubuntu'},
+            ],
+        },
+        {
+            category: 'Version Control & Collaboration',
+            items: [
+                {id: 'gitlab', label: 'GitLab'},
+                {id: 'outline', label: 'Outline'},
+            ],
+        },
+        {
+            category: 'DevOps & Infrastruktur',
+            items: [
+                {id: 'gitlab-ci', label: 'GitLab CI'},
+                {id: 'docker', label: 'Docker'},
+                {id: 'proxmox', label: 'Proxmox'},
+            ],
+        },
+    ],
+};
+
+const TechCard = ({group}: {
+    group: { category: string; items: { id: string; label: string }[] };
+}) => {
+    const colors = useThemeColors();
+
+    return (
+        <motion.div
+            initial={{opacity: 0, y: 20}}
+            animate={{opacity: 1, y: 0}}
+            transition={{duration: 0.4}}
+            className="p-4 rounded-lg border shadow-md transition-colors duration-700 ease-in-out"
+            style={{
+                backgroundColor: colors.primaryBg,
+                borderColor: colors.primaryBg,
+                color: colors.primaryText,
+            }}
+        >
+            <h3 className="text-base font-semibold mb-4">{group.category}</h3>
+            <div className="grid grid-cols-3 gap-3">
+                {group.items.map(({id, label}) => (
+                    <div key={id} className="flex flex-col items-center text-center">
+                        <Image
+                            src={`/images/svg/${id}.svg`}
+                            alt={label}
+                            width={32}
+                            height={32}
+                            className="object-contain"
+                        />
+                        <span
+                            className="text-[10px] mt-1 transition-colors duration-700 ease-in-out"
+                            style={{color: colors.secondaryText}}
+                        >
+                            {label}
+                        </span>
+                    </div>
+                ))}
+            </div>
+        </motion.div>
+    );
+};
+
+const Development = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div
+            className="w-[95%] mx-auto grid grid-cols-1 gap-6 mt-8 mb-16 text-left"
+            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}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5}}
+                >
+                    💻 Full-Stack Entwicklung
+                </motion.h2>
+
+                <motion.p
+                    className="text-sm font-medium leading-7"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Wir entwickeln individuelle Softwarelösungen – von der nativen Mobile-App über moderne Webseiten bis
+                    hin zu internen Tools.
+                    Unser Fokus liegt auf skalierbaren Architekturen, performanten Frontends und wartbaren Backends.
+                    <br/><br/>
+                    Egal ob API-Entwicklung, Admin-Dashboard oder komplexe Plattform – wir setzen moderne Technologien
+                    gezielt ein, um robuste, zukunftssichere Anwendungen zu realisieren.
+                </motion.p>
+
+                <motion.div
+                    className="mt-6 text-sm font-medium space-y-3 pl-2"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">🚀</span>
+                        <p>Native Mobile-Apps mit Flutter</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">🌐</span>
+                        <p>Webseiten & Web-Portale mit Next.js</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">🧩</span>
+                        <p>Skalierbare Backends mit Spring Boot</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">📊</span>
+                        <p>Individuelle Dashboards & Admin-Panels</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">🔌</span>
+                        <p>API-Entwicklung (REST & GraphQL)</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">⚙️</span>
+                        <p>Automatisierte interne Tools</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs">📦</span>
+                        <p>CI/CD & Container mit GitLab CI & Docker</p>
+                    </div>
+                </motion.div>
+
+                <motion.h3
+                    className="mt-10 text-lg font-semibold"
+                    initial={{opacity: 0}}
+                    animate={{opacity: 1}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    🔧 Unser Tech Stack im Überblick
+                </motion.h3>
+
+                <motion.p
+                    className="text-sm font-medium mb-4"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Mit diesem Stack entwickeln wir robuste, moderne Softwarelösungen – abgestimmt auf deine
+                    Anforderungen.
+                </motion.p>
+
+                <motion.div
+                    initial={{opacity: 0}}
+                    animate={{opacity: 1}}
+                    transition={{duration: 0.5, delay: 0.1}}
+                >
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                        {techStack.row1.map((group) => (
+                            <TechCard key={group.category} group={group}/>
+                        ))}
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+                        {techStack.row2.map((group) => (
+                            <TechCard key={group.category} group={group}/>
+                        ))}
+                    </div>
+                </motion.div>
+            </div>
+        </div>
+    );
+};
+
+export default Development;

frontend/components/Services/Section/overview/ManagedServices.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const ManagedServices = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div
+            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>
+                <motion.h2
+                    className="text-xl sm:text-2xl md:text-3xl font-bold mb-4"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5}}
+                >
+                    🛠️ Managed Services
+                </motion.h2>
+
+                <motion.p
+                    className="text-sm font-medium leading-7"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    Wir übernehmen den Betrieb und die Wartung deiner Anwendungen – zuverlässig, sicher und skalierbar.
+                    So kannst du dich voll auf dein Geschäft konzentrieren.
+                </motion.p>
+
+                <motion.h3
+                    className="mt-8 text-lg font-semibold"
+                    initial={{opacity: 0}}
+                    animate={{opacity: 1}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    🧰 Leistungen
+                </motion.h3>
+
+                <motion.ul
+                    className="list-disc list-inside text-sm mt-4 space-y-1"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 10}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <li>Monitoring & Logging</li>
+                    <li>Security Updates & Wartung</li>
+                    <li>Cloud Deployment & Hosting</li>
+                    <li>24/7 Systemüberwachung</li>
+                </motion.ul>
+            </div>
+        </div>
+    );
+};
+
+export default ManagedServices;

frontend/components/Services/Services.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+import ServiceHero from "@/components/Services/Section/ServiceHero";
+import OverviewTabs from "@/components/Services/Section/OverviewTabs";
+import ContactCTA from "@/components/Home/Sections/ContactCTA";
+import Section from "@/components/Section";
+
+const Home = () => {
+    const colors = useThemeColors();
+
+    return (
+        <motion.div
+            initial={{opacity: 0, y: 20}}
+            animate={{opacity: 1, y: 0}}
+            transition={{duration: 0.7, ease: "easeOut"}}
+            className="overflow-hidden"
+        >
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <ServiceHero/>
+            </Section>
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <OverviewTabs/>
+            </Section>
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <ContactCTA
+                    title="Nichts Passendes gefunden?"
+                    description="Nimm einfach Kontakt mit uns auf – gemeinsam finden wir die passende Lösung für dein Vorhaben."
+                    buttonLabel="Kontakt aufnehmen"
+                />
+            </Section>
+        </motion.div>
+    );
+};
+
+export default Home;