Merge branch 'dev' into 'production'
Merge branch 'Homepage Refactoring - Pt .3' into 'production' See merge request rheinsw/website!30
This commit is contained in:
70
components/Services/Section/overview/BugFixing.tsx
Normal file
70
components/Services/Section/overview/BugFixing.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import {motion} from "framer-motion";
|
||||
import {useThemeColors} from "@/utils/useThemeColors";
|
||||
|
||||
const BugFixing = () => {
|
||||
const colors = useThemeColors();
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16"
|
||||
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 className="justify-self-center">
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.5, delay: 0.3}}
|
||||
>
|
||||
<Image
|
||||
src="/images/bug_fixing.jpg"
|
||||
alt="Bug fixing illustration"
|
||||
width={300}
|
||||
height={300}
|
||||
className="object-contain"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BugFixing;
|
||||
60
components/Services/Section/overview/Consulting.tsx
Normal file
60
components/Services/Section/overview/Consulting.tsx
Normal file
@@ -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%] sm:w-[80%] 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;
|
||||
210
components/Services/Section/overview/Development.tsx
Normal file
210
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%] sm:w-[80%] 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;
|
||||
62
components/Services/Section/overview/ManagedServices.tsx
Normal file
62
components/Services/Section/overview/ManagedServices.tsx
Normal file
@@ -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%] sm:w-[80%] 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;
|
||||
Reference in New Issue
Block a user