Gitlab-Migration/rhein-sw-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Homepage refactoring pt4

See merge request rheinsw/website!31
This commit is contained in:
Thatsaphorn
2025-04-20 09:42:40 +00:00
parent 5e1bca87a3
commit f2221815c8
24 changed files with 797 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/Services/Section/OverviewTabs.tsx
View File

@@ -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;