diff --git a/src/components/Silk.tsx b/src/components/Silk.tsx
index 470c388..95b7030 100644
--- a/src/components/Silk.tsx
+++ b/src/components/Silk.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable react/no-unknown-property */
+ /* eslint-disable react/no-unknown-property */
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { forwardRef, useRef, useMemo, useLayoutEffect } from "react";
import { Color, type Mesh, type ShaderMaterial } from "three";
@@ -33,6 +33,7 @@ uniform float uSpeed;
uniform float uScale;
uniform float uRotation;
uniform float uNoiseIntensity;
+uniform vec3 uColor2;
const float e = 2.71828182845904523536;
@@ -63,7 +64,8 @@ void main() {
0.02 * tOffset) +
sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));
- vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity;
+ vec3 mixed = mix(uColor2, uColor, pattern);
+ vec4 col = vec4(mixed, 1.0) - rnd / 15.0 * uNoiseIntensity;
col.a = 1.0;
gl_FragColor = col;
}
@@ -74,6 +76,7 @@ type SilkPlaneProps = {
uSpeed: { value: number };
uScale: { value: number };
uNoiseIntensity: { value: number };
+ uColor2: { value: Color };
uColor: { value: Color };
uRotation: { value: number };
uTime: { value: number };
@@ -118,6 +121,7 @@ type SilkProps = {
speed?: number;
scale?: number;
color?: string;
+ color2?: string;
noiseIntensity?: number;
rotation?: number;
};
@@ -126,6 +130,7 @@ const Silk = ({
speed = 5,
scale = 1,
color = "#7B7481",
+ color2 = "#000000",
noiseIntensity = 1.5,
rotation = 0,
}: SilkProps) => {
@@ -136,11 +141,12 @@ const Silk = ({
uSpeed: { value: speed },
uScale: { value: scale },
uNoiseIntensity: { value: noiseIntensity },
+ uColor2: { value: new Color(...hexToNormalizedRGB(color2)) },
uColor: { value: new Color(...hexToNormalizedRGB(color)) },
uRotation: { value: rotation },
uTime: { value: 0 },
}),
- [speed, scale, noiseIntensity, color, rotation]
+ [speed, scale, noiseIntensity, color, color2, rotation]
);
return (
diff --git a/src/components/SolutionSection.tsx b/src/components/SolutionSection.tsx
index 73064c6..3c26954 100644
--- a/src/components/SolutionSection.tsx
+++ b/src/components/SolutionSection.tsx
@@ -1,10 +1,23 @@
import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import { ArrowRight, CheckCircle2 } from "lucide-react";
import { LampTop } from "@/components/ui/lamp";
import LightRays from "@/components/LightRays";
+import PixelBlast from "@/components/PixelBlast";
const SolutionSection = () => {
+ const { resolvedTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ const isDark = mounted && resolvedTheme === "dark";
+ const isLight = mounted && resolvedTheme === "light";
+
const benefits = [
"Alle Prozesse greifen ineinander.",
"Informationen fließen automatisch.",
@@ -13,6 +26,23 @@ const SolutionSection = () => {
return (
+ {/* PixelBlast animated background - nur im Light Mode */}
+ {isLight && (
+
+ )}
{/* Hintergrundbild mittig, auf Handy maximale Breite */}
{
}}
aria-hidden
/>
-
-
-
+ {/* LightRays - nur im Dark Mode */}
+ {isDark && (
+
+
+
+ )}
@@ -74,7 +107,7 @@ const SolutionSection = () => {
{/* Right Content - Visual Element */}
-
+
Das Ergebnis
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..19f94ca
--- /dev/null
+++ b/src/components/ThemeProvider.tsx
@@ -0,0 +1,20 @@
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps as NextThemeProviderProps } from "next-themes";
+
+export interface ThemeProviderProps extends Omit {
+ children: React.ReactNode;
+}
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..ed52b8c
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import { Sun, Moon, Monitor } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface ThemeToggleProps {
+ className?: string;
+}
+
+const themeLabels: Record = {
+ light: "Hell",
+ dark: "Dunkel",
+ system: "System",
+};
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+ const { theme, setTheme, resolvedTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ const currentLabel = themeLabels[theme ?? "system"] ?? "System";
+
+ const icon = !mounted ? (
+
+ ) : theme === "system" ? (
+
+ ) : resolvedTheme === "dark" ? (
+
+ ) : (
+
+ );
+
+ return (
+
+
+
+
+
+ setTheme("light")}>
+
+ Hell
+
+ setTheme("dark")}>
+
+ Dunkel
+
+ setTheme("system")}>
+
+ System
+
+
+
+ );
+}
diff --git a/src/components/Values.tsx b/src/components/Values.tsx
index 3619cf2..ca49a9c 100644
--- a/src/components/Values.tsx
+++ b/src/components/Values.tsx
@@ -1,4 +1,6 @@
import { Users, Cog, MessageSquare, Target, BarChart3, Layers } from "lucide-react";
+import BorderGlow from "@/components/BorderGlow";
+import { TextHoverEffect } from "@/components/ui/text-hover-effect";
const Values = () => {
const features = [
@@ -35,10 +37,14 @@ const Values = () => {
];
return (
-
+
+ {/* TextHoverEffect */}
+
+
+
{/* Hintergrundbild: auf Handy maximale Breite */}
{
{features.map((feature, index) => (
-
-
-
+
+
+
+
+
+ {feature.title}
+
+
+ {feature.description}
+
-
- {feature.title}
-
-
- {feature.description}
-
-
+
))}
diff --git a/src/components/ui/lamp.tsx b/src/components/ui/lamp.tsx
index 4501a80..8a8ebde 100644
--- a/src/components/ui/lamp.tsx
+++ b/src/components/ui/lamp.tsx
@@ -18,7 +18,7 @@ export const LampTop = ({
return (
diff --git a/src/components/ui/resizable-navbar.tsx b/src/components/ui/resizable-navbar.tsx
index 83657db..cc50c39 100644
--- a/src/components/ui/resizable-navbar.tsx
+++ b/src/components/ui/resizable-navbar.tsx
@@ -9,6 +9,7 @@ import {
useMotionValueEvent,
} from "motion/react";
import React, { useRef, useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
interface NavbarProps {
children: React.ReactNode;
@@ -72,8 +73,8 @@ export const NavBody = ({ children, className, visible }: NavBodyProps) => {
}}
className={cn(
"relative z-[60] mx-auto hidden w-full max-w-7xl flex-row items-center justify-between self-start rounded-full bg-transparent px-4 py-2 lg:flex",
- "text-white [&_a]:text-white [&_a:hover]:text-white/90 [&_.navbar-actions_a]:!text-black",
- visible && "bg-black/90",
+ "text-black dark:text-white [&_a]:text-black dark:[&_a]:text-white [&_a:hover]:text-black/70 dark:[&_a:hover]:text-white/90 [&_.navbar-actions_a]:!text-black",
+ visible && "!text-white dark:!text-white [&_a]:!text-white dark:[&_a]:!text-white [&_a:hover]:!text-white/90 bg-black/90",
className
)}
>
@@ -108,23 +109,31 @@ export const NavItems = ({
className
)}
>
- {items.map((item, idx) => (
-
setHovered(idx)}
- onClick={onItemClick}
- className="relative px-4 py-2 text-neutral-600 dark:text-neutral-300"
- key={`link-${idx}`}
- href={item.link}
- >
- {hovered === idx && (
-
- )}
- {item.name}
-
- ))}
+ {items.map((item, idx) => {
+ const isRoute = item.link.startsWith("/");
+ const commonProps = {
+ onMouseEnter: () => setHovered(idx),
+ onClick: onItemClick,
+ className: "relative px-4 py-2 text-neutral-900 dark:text-neutral-300",
+ key: `link-${idx}`,
+ };
+ const inner = (
+ <>
+ {hovered === idx && (
+
+ )}
+
{item.name}
+
+ );
+ return isRoute ? (
+
{inner}
+ ) : (
+
{inner}
+ );
+ })}
);
};
@@ -160,8 +169,8 @@ export const MobileNav = ({
}}
className={cn(
"relative z-50 mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between bg-transparent px-0 py-2 lg:hidden",
- "[&>div:first-child]:text-white [&>div:first-child_a]:text-white [&>div:first-child_svg]:text-white",
- visible && "bg-black/90",
+ "[&>div:first-child]:text-black dark:[&>div:first-child]:text-white [&>div:first-child_a]:text-black dark:[&>div:first-child_a]:text-white [&>div:first-child_svg]:text-black dark:[&>div:first-child_svg]:text-white",
+ visible && "[&>div:first-child]:!text-white dark:[&>div:first-child]:!text-white [&>div:first-child_a]:!text-white [&>div:first-child_svg]:!text-white bg-black/90",
className
)}
>
diff --git a/src/components/ui/text-hover-effect.tsx b/src/components/ui/text-hover-effect.tsx
new file mode 100644
index 0000000..f3df46b
--- /dev/null
+++ b/src/components/ui/text-hover-effect.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useRef, useState, useCallback, useId } from "react";
+import { motion } from "motion/react";
+
+export const TextHoverEffect = ({
+ text,
+}: {
+ text: string;
+ duration?: number;
+}) => {
+ const svgRef = useRef
(null);
+ const [hovered, setHovered] = useState(false);
+ const [cursorPos, setCursorPos] = useState({ x: 150, y: 30 });
+ const id = useId();
+ const gradientId = `textGradient-${id}`;
+ const revealMaskId = `revealMask-${id}`;
+ const textMaskId = `textMask-${id}`;
+
+ const handleMouseMove = useCallback(
+ (e: React.MouseEvent) => {
+ if (!svgRef.current) return;
+ const rect = svgRef.current.getBoundingClientRect();
+ // Map screen coords to viewBox coords (0 0 300 60)
+ const x = ((e.clientX - rect.left) / rect.width) * 300;
+ const y = ((e.clientY - rect.top) / rect.height) * 60;
+ setCursorPos({ x, y });
+ },
+ []
+ );
+
+ return (
+
+ );
+};
diff --git a/src/index.css b/src/index.css
index b164083..712423b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,11 +10,79 @@
@tailwind components;
@tailwind utilities;
-/* webklar Design System - Muradov Inspired Minimal Dark Theme */
+/* webklar Design System - Light/Dark Theme Support */
@layer base {
:root {
- /* Ultra Minimal Deep Black Theme - Muradov Inspired */
+ /* Light Theme */
+ --background: 0 0% 100%;
+ --foreground: 0 0% 9%;
+
+ --card: 0 0% 98%;
+ --card-foreground: 0 0% 9%;
+
+ --popover: 0 0% 98%;
+ --popover-foreground: 0 0% 9%;
+
+ /* Primary - Cyan-Blau */
+ --primary: 198 93% 42%;
+ --primary-foreground: 0 0% 98%;
+
+ /* Secondary - Helles Grau */
+ --secondary: 0 0% 94%;
+ --secondary-foreground: 0 0% 9%;
+
+ /* Muted */
+ --muted: 0 0% 94%;
+ --muted-foreground: 0 0% 40%;
+
+ /* Accent */
+ --accent: 0 0% 94%;
+ --accent-foreground: 0 0% 9%;
+
+ --destructive: 0 62% 50%;
+ --destructive-foreground: 0 0% 98%;
+
+ --border: 0 0% 88%;
+ --input: 0 0% 88%;
+ --ring: 198 93% 42%;
+
+ --radius: 0.5rem;
+
+ /* Shadows */
+ --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+ --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+ --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+
+ --sidebar-background: 0 0% 97%;
+ --sidebar-foreground: 0 0% 9%;
+ --sidebar-primary: 198 93% 42%;
+ --sidebar-primary-foreground: 0 0% 98%;
+ --sidebar-accent: 0 0% 94%;
+ --sidebar-accent-foreground: 0 0% 9%;
+ --sidebar-border: 0 0% 88%;
+ --sidebar-ring: 198 93% 42%;
+ --chart-1: 198 93% 42%;
+ --chart-2: 213 93% 50%;
+ --chart-3: 0 0% 45%;
+ --chart-4: 0 0% 35%;
+ --chart-5: 0 0% 25%;
+ --sidebar: 0 0% 97%;
+ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+ --font-display: 'Space Grotesk', system-ui, sans-serif;
+ --spacing: 0.25rem;
+ --font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+ --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+ --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+ --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+ --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+ --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+ --tracking-normal: 0em;
+ }
+
+ .dark {
+ /* Dark Theme – original :root dark color scheme */
--background: 0 0% 0%;
--foreground: 0 0% 92%;
@@ -68,61 +136,10 @@
--chart-4: 215 16% 46%;
--chart-5: 215 19% 34%;
--sidebar: 210 40% 98%;
- --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
- --font-display: 'Space Grotesk', system-ui, sans-serif;
- --spacing: 0.25rem;
- --font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
- --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
- --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
- --tracking-normal: 0em;
- }
-
- .dark {
- --background: 222 47% 11%;
- --foreground: 210 40% 98%;
- --card: 217 32% 17%;
- --card-foreground: 210 40% 98%;
- --popover: 215 24% 26%;
- --popover-foreground: 210 40% 98%;
- --primary: 198 93% 59%;
- --primary-foreground: 204 80% 15%;
- --secondary: 212 26% 83%;
- --secondary-foreground: 228 84% 4%;
- --muted: 215 16% 46%;
- --muted-foreground: 210 40% 98%;
- --accent: 228 84% 4%;
- --accent-foreground: 215 20% 65%;
- --destructive: 0 84% 60%;
- --destructive-foreground: 0 85% 97%;
- --border: 215 19% 34%;
- --input: 215 19% 34%;
- --ring: 198 93% 59%;
- --chart-1: 199 95% 73%;
- --chart-2: 211 96% 78%;
- --chart-3: 215 20% 65%;
- --chart-4: 215 16% 46%;
- --chart-5: 215 19% 34%;
- --sidebar: 217 32% 17%;
- --sidebar-foreground: 210 40% 98%;
- --sidebar-primary: 198 93% 59%;
- --sidebar-primary-foreground: 204 80% 15%;
- --sidebar-accent: 215 20% 65%;
- --sidebar-accent-foreground: 228 84% 4%;
- --sidebar-border: 215 19% 34%;
- --sidebar-ring: 198 93% 59%;
- --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
- --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
- --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
- --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
- --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
- --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
- --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
- --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
- --radius: 0rem;
}
}
@@ -216,11 +233,11 @@
border-radius: inherit;
}
- /* Minimal glass nav */
+ /* Minimal glass nav – theme-aware */
.glass-nav {
@apply backdrop-blur-xl border-b;
- background: hsl(0 0% 3% / 0.9);
- border-color: hsl(0 0% 15% / 0.5);
+ background: hsl(var(--background) / 0.9);
+ border-color: hsl(var(--border) / 0.5);
}
/* Card minimal */
@@ -230,12 +247,12 @@
border: 1px solid hsl(var(--border));
}
.card-minimal:hover {
- border-color: hsl(0 0% 25%);
+ border-color: hsl(var(--muted-foreground));
}
- /* Text gradient - subtle */
+ /* Text gradient - theme-aware */
.text-gradient {
- background: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(0 0% 70%) 100%);
+ background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -248,7 +265,7 @@
.link-underline::after {
content: '';
@apply absolute bottom-0 left-0 w-full h-px scale-x-0 origin-right transition-transform duration-300;
- background: hsl(0 0% 98%);
+ background: hsl(var(--foreground));
}
.link-underline:hover::after {
@apply scale-x-100 origin-left;
@@ -268,37 +285,37 @@
animation: marquee 30s linear infinite;
}
- /* Minimal project card */
+ /* Minimal project card – theme-aware */
.project-card {
@apply transition-all duration-500 overflow-hidden;
- background: hsl(0 0% 6%);
- border: 1px solid hsl(0 0% 12%);
+ background: hsl(var(--card));
+ border: 1px solid hsl(var(--border));
}
.project-card:hover {
- border-color: hsl(0 0% 25%);
+ border-color: hsl(var(--muted-foreground));
transform: translateY(-4px);
}
- /* Minimal button */
+ /* Minimal button – theme-aware */
.btn-minimal {
@apply relative transition-all duration-300;
- background: hsl(0 0% 98%);
- color: hsl(0 0% 3%);
+ background: hsl(var(--foreground));
+ color: hsl(var(--background));
}
.btn-minimal:hover {
- background: hsl(0 0% 85%);
+ background: hsl(var(--muted-foreground));
}
- /* Outline button */
+ /* Outline button – theme-aware */
.btn-outline {
@apply relative transition-all duration-300 border;
background: transparent;
- color: hsl(0 0% 98%);
- border-color: hsl(0 0% 25%);
+ color: hsl(var(--foreground));
+ border-color: hsl(var(--muted-foreground));
}
.btn-outline:hover {
- border-color: hsl(0 0% 50%);
- background: hsl(0 0% 10%);
+ border-color: hsl(var(--foreground));
+ background: hsl(var(--accent));
}
/* Custom CTA button (System-Demo) */
@@ -764,41 +781,33 @@
line-height: 1;
}
- /* Count-up with gradient */
+ /* Count-up with gradient – theme-aware */
.count-up-text {
- background: linear-gradient(135deg, hsl(0 0% 92%) 0%, hsl(0 0% 70%) 50%, hsl(0 0% 92%) 100%);
+ background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 50%, hsl(var(--foreground)) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
- .dark .count-up-text {
- background: linear-gradient(135deg, hsl(0 0% 98%) 0%, hsl(0 0% 75%) 50%, hsl(0 0% 98%) 100%);
- background-size: 200% auto;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- }
-
- /* Grid line decoration */
+ /* Grid line decoration – theme-aware */
.grid-lines {
background-image:
- linear-gradient(hsl(0 0% 12%) 1px, transparent 1px),
- linear-gradient(90deg, hsl(0 0% 12%) 1px, transparent 1px);
+ linear-gradient(hsl(var(--border)) 1px, transparent 1px),
+ linear-gradient(90deg, hsl(var(--border)) 1px, transparent 1px);
background-size: 80px 80px;
}
- /* Horizontal divider */
+ /* Horizontal divider – theme-aware */
.divider {
@apply w-full h-px;
- background: linear-gradient(90deg, transparent 0%, hsl(0 0% 20%) 50%, transparent 100%);
+ background: linear-gradient(90deg, transparent 0%, hsl(var(--border)) 50%, transparent 100%);
}
- /* Label/Tag */
+ /* Label/Tag – theme-aware */
.label-tag {
@apply text-xs uppercase tracking-widest font-medium;
- color: hsl(0 0% 50%);
+ color: hsl(var(--muted-foreground));
}
}
@@ -865,4 +874,4 @@
.animate-fade-in-up {
animation: fade-in-up 0.6s ease-out forwards;
-}
\ No newline at end of file
+}
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..d8fc630
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,183 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import CountUp from "@/components/CountUp";
+import BorderGlow from "@/components/BorderGlow";
+
+const About = () => {
+ return (
+
+ {/* Header */}
+
+
+
+
+
+ Webklar
+
+
+
+
+
+
+
+
+ {/* Main Content */}
+
+
+
+
Die Realität
+
+
+ Mehr Arbeit darf nicht die einzige Antwort auf Wachstum sein.
+
+
+
+
+ Neue Kunden sollten Ihr Unternehmen nicht ins Chaos stürzen.
+
+
+
+ Wenn mehr Umsatz automatisch mehr Stress bedeutet, liegt das
+ Problem nicht an Ihrem Markt –{" "}
+
+ sondern an fehlenden Systemen.
+
+
+
+
+
+ Erfolgreiche Unternehmen skalieren Prozesse.
+
+
+ Nicht Arbeitsstunden.
+
+
+
+
+ Genau dort setzen wir an.
+
+
+
+ {/* Back / Contact */}
+
+
+
+
+
+
+
+
+
+
+
+
+
Der Unterschied
+
+
+ Warum Unternehmen zu uns wechseln.
+
+
+
+
+
+
+
+
+
+ Alles aus einer Hand
+
+
+ Keine 10 verschiedenen Anbieter. Ein Partner für Ihre gesamte digitale Infrastruktur.
+
+
+
+
+
+
+
+
+
+ Systeme statt Inseln
+
+
+ Wir verbinden Ihre Tools zu einem durchdachten Gesamtsystem.
+
+
+
+
+
+
+
+
+
+ Langfristige Partnerschaft
+
+
+ Wir begleiten Sie nicht nur beim Launch, sondern beim Wachstum.
+
+
+
+
+
+
+
+
+
+
+