Initial Commit
This commit is contained in:
210
frontend/components/Services/Section/overview/Development.tsx
Normal file
210
frontend/components/Services/Section/overview/Development.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user