Frontend migration
This commit is contained in:
158
frontend/components/About/Section/AboutProcess.tsx
Normal file
158
frontend/components/About/Section/AboutProcess.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
'use client';
|
||||
|
||||
import React, {useState} from "react";
|
||||
import {motion} from "framer-motion";
|
||||
import {useThemeColors} from "@/utils/useThemeColors";
|
||||
|
||||
const processSteps = [
|
||||
{
|
||||
title: "Beratung",
|
||||
description: (
|
||||
<>
|
||||
In der <strong>Beratungsphase</strong> analysieren wir gemeinsam Ihre Anforderungen und
|
||||
Geschäftsziele. Dabei identifizieren wir Herausforderungen und definieren die Zielsetzung
|
||||
für Ihr Projekt.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Planung",
|
||||
description: (
|
||||
<>
|
||||
Wir erarbeiten ein <strong>technisches Konzept</strong> mit klarer Struktur, Meilensteinen und
|
||||
Ressourcenplanung. Eine solide Architektur bildet die Grundlage für ein skalierbares und wartbares
|
||||
System.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Entwicklung",
|
||||
description: (
|
||||
<>
|
||||
In iterativen Zyklen setzen wir das Projekt um. Regelmäßige <strong>Feedbackschleifen</strong>
|
||||
sorgen dafür, dass das Ergebnis Ihren Erwartungen entspricht und flexibel angepasst werden kann.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Test",
|
||||
description: (
|
||||
<>
|
||||
Durch umfangreiche <strong>Tests und Optimierungen</strong> stellen wir sicher, dass Ihre
|
||||
Anwendung robust, performant und benutzerfreundlich ist – noch vor dem Go-Live.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Go-Live",
|
||||
description: (
|
||||
<>
|
||||
Wir begleiten Sie beim <strong>produktiven Einsatz</strong> Ihrer Anwendung und unterstützen Sie
|
||||
auch nach dem Go-Live mit Support und Weiterentwicklungsmöglichkeiten.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const AboutProcess: React.FC = () => {
|
||||
const colors = useThemeColors();
|
||||
const [activeIndex, setActiveIndex] = useState<number>(0);
|
||||
|
||||
return (
|
||||
<section className="w-full px-6 sm:px-12 py-20 max-w-6xl mx-auto">
|
||||
<h2
|
||||
className="text-2xl sm:text-3xl font-bold text-left"
|
||||
style={{color: colors.primaryText}}
|
||||
>
|
||||
Unser Prozess
|
||||
</h2>
|
||||
<motion.div
|
||||
className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
|
||||
initial={{opacity: 0, x: -20}}
|
||||
whileInView={{opacity: 1, x: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.4, delay: 0.1}}
|
||||
/>
|
||||
|
||||
{/* Mobile View: Tab buttons */}
|
||||
<div className="block md:hidden mb-6">
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
{processSteps.map((step, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setActiveIndex(idx)}
|
||||
className={`w-full px-4 py-2 text-sm border rounded-full transition-colors ${
|
||||
activeIndex === idx
|
||||
? 'bg-blue-600 text-white border-blue-600'
|
||||
: 'border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{step.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop View: 2-column layout */}
|
||||
<div className="hidden md:grid grid-cols-3 gap-8">
|
||||
{/* Left: Step List */}
|
||||
<div className="flex flex-col space-y-4">
|
||||
{processSteps.map((step, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setActiveIndex(idx)}
|
||||
className={`text-left px-4 py-3 border rounded-lg transition-colors ${
|
||||
activeIndex === idx
|
||||
? 'border-blue-600 bg-blue-50 dark:bg-gray-800'
|
||||
: 'border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
style={{color: colors.primaryText}}
|
||||
>
|
||||
<span className="font-semibold">{idx + 1}. {step.title}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right: Step Content */}
|
||||
<div className="md:col-span-2 p-6 border border-gray-300 dark:border-gray-700 rounded-lg"
|
||||
style={{backgroundColor: colors.primaryBg}}>
|
||||
<motion.div
|
||||
key={activeIndex}
|
||||
initial={{opacity: 0, y: 10}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.4}}
|
||||
>
|
||||
<h3 className="text-xl font-bold mb-4" style={{color: colors.primaryText}}>
|
||||
{processSteps[activeIndex].title}
|
||||
</h3>
|
||||
<div className="text-base space-y-1" style={{color: colors.secondaryText}}>
|
||||
{processSteps[activeIndex].description}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile View: Content Below Tabs */}
|
||||
<div className="block md:hidden">
|
||||
<div className="p-6 border border-gray-300 dark:border-gray-700 rounded-lg"
|
||||
style={{backgroundColor: colors.primaryBg}}>
|
||||
<motion.div
|
||||
key={activeIndex + '-mobile'}
|
||||
initial={{opacity: 0, y: 10}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.4}}
|
||||
>
|
||||
<h3 className="text-xl font-bold mb-4" style={{color: colors.primaryText}}>
|
||||
{activeIndex + 1}. {processSteps[activeIndex].title}
|
||||
</h3>
|
||||
<div className="text-base space-y-1" style={{color: colors.secondaryText}}>
|
||||
{processSteps[activeIndex].description}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutProcess;
|
||||
Reference in New Issue
Block a user