feat(blog): complete blog experience overhaul
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Failing after 1m4s
Build & Deploy / 🏗️ Build (push) Failing after 3m51s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Failing after 1m4s
Build & Deploy / 🏗️ Build (push) Failing after 3m51s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
- Implemented minimalist vertical teaser list (MediumCard) - Consolidated and refined 20 engineering-focused blog posts - Rebuilt blog overview with narrow, centered layout (max-w-3xl) - Introduced BlogCommandBar for integrated search and tag filtering - Consolidated tags to 6-8 core technical categories - Redesigned blog detail pages with industrial 'Technical Frame' layout - Added SectionHeader component for consistent industrial titling - Optimized vertical space by removing redundant PageHeaders
This commit is contained in:
@@ -1,19 +1,11 @@
|
||||
import * as React from "react";
|
||||
import { notFound } from "next/navigation";
|
||||
import { blogPosts } from "../../../src/data/blogPosts";
|
||||
import { Tag } from "../../../src/components/Tag";
|
||||
import { CodeBlock } from "../../../src/components/ArticleBlockquote";
|
||||
import { H2 } from "../../../src/components/ArticleHeading";
|
||||
import {
|
||||
Paragraph,
|
||||
LeadParagraph,
|
||||
} from "../../../src/components/ArticleParagraph";
|
||||
import { UL, LI } from "../../../src/components/ArticleList";
|
||||
import { FileExamplesList } from "../../../src/components/FileExamplesList";
|
||||
import { FileExampleManager } from "../../../src/data/fileExamples";
|
||||
import { BlogPostClient } from "../../../src/components/BlogPostClient";
|
||||
import { PageHeader } from "../../../src/components/PageHeader";
|
||||
import { Section } from "../../../src/components/Section";
|
||||
import { BlogPostClient } from "../../../src/components/BlogPostClient";
|
||||
import { PostComponents } from "../../../src/components/blog/posts";
|
||||
import { Card } from "../../../src/components/Layout";
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return blogPosts.map((post) => ({
|
||||
@@ -33,201 +25,78 @@ export default async function BlogPostPage({
|
||||
notFound();
|
||||
}
|
||||
|
||||
const formattedDate = new Date(post.date).toLocaleDateString("en-US", {
|
||||
const formattedDate = new Date(post.date).toLocaleDateString("de-DE", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
const wordCount = post.description.split(/\s+/).length + 100;
|
||||
const wordCount = post.description.split(/\s+/).length + 300; // Average post length
|
||||
const readingTime = Math.max(1, Math.ceil(wordCount / 200));
|
||||
|
||||
const showFileExamples = post.tags?.some((tag) =>
|
||||
[
|
||||
"architecture",
|
||||
"design-patterns",
|
||||
"system-design",
|
||||
"docker",
|
||||
"deployment",
|
||||
].includes(tag),
|
||||
);
|
||||
|
||||
// Load file examples for the post
|
||||
let groups: any[] = [];
|
||||
if (showFileExamples) {
|
||||
const allGroups = await FileExampleManager.getAllGroups();
|
||||
groups = allGroups
|
||||
.map((group) => ({
|
||||
...group,
|
||||
files: group.files.filter((file) => {
|
||||
if (file.postSlug !== slug) return false;
|
||||
return true;
|
||||
}),
|
||||
}))
|
||||
.filter((group) => group.files.length > 0);
|
||||
}
|
||||
const PostContent = PostComponents[slug];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
|
||||
<div className="flex flex-col gap-12 py-12 md:py-24 overflow-hidden">
|
||||
<BlogPostClient readingTime={readingTime} title={post.title} />
|
||||
|
||||
<PageHeader
|
||||
variant="blog"
|
||||
title={post.title}
|
||||
description={post.description}
|
||||
backLink={{ href: "/blog", label: "Zurück zum Blog" }}
|
||||
backgroundSymbol="B"
|
||||
backgroundSymbol={slug.charAt(0).toUpperCase()}
|
||||
/>
|
||||
|
||||
<main id="post-content">
|
||||
<Section number="01" title="Inhalt">
|
||||
<div className="prose prose-slate max-w-none">
|
||||
<div className="flex flex-wrap items-center gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em]">
|
||||
<time dateTime={post.date}>{formattedDate}</time>
|
||||
<span className="text-slate-200">•</span>
|
||||
<span>{readingTime} min read</span>
|
||||
</div>
|
||||
<Section containerVariant="wide" className="pt-0 md:pt-0">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<Card
|
||||
variant="glass"
|
||||
techBorder
|
||||
className="relative overflow-hidden"
|
||||
>
|
||||
{/* Decorative background grid inside the card */}
|
||||
<div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
|
||||
|
||||
{post.tags && post.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-12">
|
||||
{post.tags.map((tag, index) => (
|
||||
<Tag key={tag} tag={tag} index={index} className="text-xs" />
|
||||
))}
|
||||
<div className="relative z-10 px-6 py-12 md:px-16 md:py-20">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-2 h-2 rounded-full bg-slate-300" />
|
||||
<time dateTime={post.date}>{formattedDate}</time>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span>{readingTime} min Lesezeit</span>
|
||||
<span className="text-slate-200">|</span>
|
||||
<span>
|
||||
{slug.substring(0, 4).toUpperCase()}-
|
||||
{Math.floor(Math.random() * 999)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{post.tags && post.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-12">
|
||||
{post.tags.map((tag, index) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-3 py-1 bg-slate-50 border border-slate-100 rounded text-[10px] font-mono text-slate-500 uppercase tracking-widest"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{PostContent ? (
|
||||
<PostContent />
|
||||
) : (
|
||||
<div className="p-8 bg-slate-50 border border-slate-200 rounded-lg italic text-slate-500">
|
||||
Inhalt wird bald veröffentlicht...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{slug === "first-note" && (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
This blog is a public notebook. It's where I document things I
|
||||
learn, problems I solve, and tools I test.
|
||||
</LeadParagraph>
|
||||
<H2>Why write in public?</H2>
|
||||
<Paragraph>
|
||||
I forget things. Writing them down helps. Making them public
|
||||
helps me think more clearly and might help someone else.
|
||||
</Paragraph>
|
||||
<H2>What to expect</H2>
|
||||
<UL>
|
||||
<LI>Short entries, usually under 500 words</LI>
|
||||
<LI>Practical solutions to specific problems</LI>
|
||||
<LI>Notes on tools and workflows</LI>
|
||||
<LI>Mistakes and what I learned</LI>
|
||||
</UL>
|
||||
</>
|
||||
)}
|
||||
|
||||
{slug === "debugging-tips" && (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Sometimes the simplest debugging tool is the best one. Print
|
||||
statements get a bad reputation, but they're often exactly
|
||||
what you need.
|
||||
</LeadParagraph>
|
||||
<H2>Why print statements work</H2>
|
||||
<Paragraph>
|
||||
Debuggers are powerful, but they change how your code runs.
|
||||
Print statements don't.
|
||||
</Paragraph>
|
||||
<CodeBlock language="python" showLineNumbers={true}>
|
||||
{`def process_data(data):
|
||||
print(f"Processing {len(data)} items")
|
||||
result = expensive_operation(data)
|
||||
print(f"Operation result: {result}")
|
||||
return result`}
|
||||
</CodeBlock>
|
||||
|
||||
<H2>Complete examples</H2>
|
||||
<Paragraph>
|
||||
Here are some practical file examples you can copy and
|
||||
download. These include proper error handling and logging.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-8">
|
||||
<FileExamplesList groups={groups} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{slug === "architecture-patterns" && (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Good software architecture is about making the right decisions
|
||||
early. Here are some patterns I've found useful in production
|
||||
systems.
|
||||
</LeadParagraph>
|
||||
<H2>Repository Pattern</H2>
|
||||
<Paragraph>
|
||||
The repository pattern provides a clean separation between
|
||||
your business logic and data access layer. It makes your code
|
||||
more testable and maintainable.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Service Layer</H2>
|
||||
<Paragraph>
|
||||
Services orchestrate business logic and coordinate between
|
||||
repositories and domain events. They keep your controllers
|
||||
thin and your business rules organized.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Domain Events</H2>
|
||||
<Paragraph>
|
||||
Domain events help you decouple components and react to
|
||||
changes in your system. They're essential for building
|
||||
scalable, event-driven architectures.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Complete examples</H2>
|
||||
<Paragraph>
|
||||
These TypeScript examples demonstrate modern architecture
|
||||
patterns for scalable applications. You can copy them directly
|
||||
into your project.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-8">
|
||||
<FileExamplesList groups={groups} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{slug === "docker-deployment" && (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Docker has become the standard for containerizing
|
||||
applications. Here's how to set up production-ready
|
||||
deployments that are secure, efficient, and maintainable.
|
||||
</LeadParagraph>
|
||||
<H2>Multi-stage builds</H2>
|
||||
<Paragraph>
|
||||
Multi-stage builds keep your production images small and
|
||||
secure by separating build and runtime environments. This
|
||||
reduces attack surface and speeds up deployments.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Health checks and monitoring</H2>
|
||||
<Paragraph>
|
||||
Proper health checks ensure your containers are running
|
||||
correctly. Combined with restart policies, this gives you
|
||||
resilient, self-healing deployments.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Orchestration with Docker Compose</H2>
|
||||
<Paragraph>
|
||||
Docker Compose makes it easy to manage multi-service
|
||||
applications in development and production. Define services,
|
||||
networks, and volumes in a single file.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Complete examples</H2>
|
||||
<Paragraph>
|
||||
These Docker configurations are production-ready. Use them as
|
||||
a starting point for your own deployments.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-8">
|
||||
<FileExamplesList groups={groups} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</Section>
|
||||
</main>
|
||||
|
||||
@@ -1,242 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Tag } from '../../../src/components/Tag';
|
||||
import { H2 } from '../../../src/components/ArticleHeading';
|
||||
import { Paragraph, LeadParagraph } from '../../../src/components/ArticleParagraph';
|
||||
import { UL, LI } from '../../../src/components/ArticleList';
|
||||
import { CodeBlock } from '../../../src/components/ArticleBlockquote';
|
||||
import { YouTubeEmbed } from '../../../src/components/YouTubeEmbed';
|
||||
import { TwitterEmbed } from '../../../src/components/TwitterEmbed';
|
||||
import { GenericEmbed } from '../../../src/components/GenericEmbed';
|
||||
import { Mermaid } from '../../../src/components/Mermaid';
|
||||
import { BlogPostClient } from '../../../src/components/BlogPostClient';
|
||||
|
||||
export default function EmbedDemoPage() {
|
||||
const post = {
|
||||
title: "Rich Content Embedding Demo",
|
||||
description: "Testing our new free embed components for YouTube, Twitter, Mermaid diagrams, and other platforms",
|
||||
date: "2024-02-15",
|
||||
slug: "embed-demo",
|
||||
tags: ["embeds", "components", "tutorial", "mermaid"]
|
||||
};
|
||||
|
||||
const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
const readingTime = 5;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<BlogPostClient readingTime={readingTime} title={post.title} />
|
||||
|
||||
<main id="post-content" className="pt-24">
|
||||
<section className="py-12 md:py-16">
|
||||
<div className="max-w-3xl mx-auto px-6">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl md:text-5xl font-serif font-bold text-slate-900 mb-6 leading-tight tracking-tight">
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-600 mb-6 font-sans">
|
||||
<time dateTime={post.date} className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
|
||||
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zM4 8h12v8H4V8z"/>
|
||||
</svg>
|
||||
{formattedDate}
|
||||
</time>
|
||||
<span className="text-slate-400">•</span>
|
||||
<span className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
|
||||
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd"/>
|
||||
</svg>
|
||||
{readingTime} min
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xl md:text-2xl text-slate-600 leading-relaxed font-serif italic mb-8 max-w-2xl mx-auto">
|
||||
{post.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-2 mb-8">
|
||||
{post.tags.map((tag, index) => (
|
||||
<Tag key={tag} tag={tag} index={index} className="text-xs" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="max-w-3xl mx-auto px-6 pb-24">
|
||||
<div className="prose prose-slate max-w-none">
|
||||
<LeadParagraph>
|
||||
This post demonstrates our new free embed components that give you full styling control over YouTube videos, Twitter tweets, and other rich content - all generated at build time.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>YouTube Embed Example</H2>
|
||||
<Paragraph>
|
||||
Here's a YouTube video embedded with full styling control. The component uses build-time generation for optimal performance.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-6">
|
||||
<YouTubeEmbed
|
||||
videoId="dQw4w9WgXcQ"
|
||||
title="Demo Video"
|
||||
style="minimal"
|
||||
className="my-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Paragraph>
|
||||
You can customize the appearance using CSS variables or data attributes:
|
||||
</Paragraph>
|
||||
|
||||
<CodeBlock
|
||||
language="jsx"
|
||||
showLineNumbers={true}
|
||||
>
|
||||
{`<YouTubeEmbed
|
||||
videoId="dQw4w9WgXcQ"
|
||||
style="minimal" // 'default' | 'minimal' | 'rounded' | 'flat'
|
||||
aspectRatio="56.25%" // Custom aspect ratio
|
||||
className="my-4" // Additional classes
|
||||
/>`}
|
||||
</CodeBlock>
|
||||
|
||||
<H2>Twitter/X Embed Example</H2>
|
||||
<Paragraph>
|
||||
Twitter embeds use the official Twitter iframe embed for reliable display.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-4">
|
||||
<TwitterEmbed
|
||||
tweetId="20"
|
||||
theme="light"
|
||||
align="center"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CodeBlock
|
||||
language="jsx"
|
||||
showLineNumbers={true}
|
||||
>
|
||||
{`<TwitterEmbed
|
||||
tweetId="20"
|
||||
theme="light" // 'light' | 'dark'
|
||||
align="center" // 'left' | 'center' | 'right'
|
||||
/>`}
|
||||
</CodeBlock>
|
||||
|
||||
<H2>Generic Embed Example</H2>
|
||||
<Paragraph>
|
||||
The generic component supports direct embeds for Vimeo, CodePen, GitHub Gists, and other platforms.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-6">
|
||||
<GenericEmbed
|
||||
url="https://vimeo.com/123456789"
|
||||
type="video"
|
||||
maxWidth="800px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CodeBlock
|
||||
language="jsx"
|
||||
showLineNumbers={true}
|
||||
>
|
||||
{`<GenericEmbed
|
||||
url="https://vimeo.com/123456789"
|
||||
type="video" // 'video' | 'article' | 'rich'
|
||||
maxWidth="800px"
|
||||
/>`}
|
||||
</CodeBlock>
|
||||
|
||||
<H2>Mermaid Diagrams</H2>
|
||||
<Paragraph>
|
||||
We've added support for Mermaid diagrams! You can now create flowcharts, sequence diagrams, and more using a simple text-based syntax.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-8">
|
||||
<Mermaid
|
||||
graph={`graph LR
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[App Server 1]
|
||||
B --> D[App Server 2]
|
||||
C --> E[(Database)]
|
||||
D --> E`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Paragraph>
|
||||
Usage is straightforward:
|
||||
</Paragraph>
|
||||
|
||||
<CodeBlock
|
||||
language="jsx"
|
||||
showLineNumbers={true}
|
||||
>
|
||||
{`<Mermaid
|
||||
graph={\`graph LR
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[App Server 1]
|
||||
B --> D[App Server 2]
|
||||
C --> E[(Database)]
|
||||
D --> E\`}
|
||||
/>`}
|
||||
</CodeBlock>
|
||||
|
||||
<H2>Styling Control</H2>
|
||||
<Paragraph>
|
||||
All components use CSS variables for easy customization:
|
||||
</Paragraph>
|
||||
|
||||
<CodeBlock
|
||||
language="css"
|
||||
showLineNumbers={true}
|
||||
>
|
||||
{`.youtube-embed {
|
||||
--aspect-ratio: 56.25%;
|
||||
--bg-color: #000000;
|
||||
--border-radius: 12px;
|
||||
--shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* Data attribute variations */
|
||||
.youtube-embed[data-style="minimal"] {
|
||||
--border-radius: 4px;
|
||||
--shadow: none;
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<H2>Benefits</H2>
|
||||
<UL>
|
||||
<LI><strong>Free:</strong> No paid services required</LI>
|
||||
<LI><strong>Fast:</strong> Build-time generation, no runtime API calls</LI>
|
||||
<LI><strong>Flexible:</strong> Full styling control via CSS variables</LI>
|
||||
<LI><strong>Self-hosted:</strong> Complete ownership and privacy</LI>
|
||||
<LI><strong>SEO-friendly:</strong> Static HTML content</LI>
|
||||
</UL>
|
||||
|
||||
<H2>Integration</H2>
|
||||
<Paragraph>
|
||||
Simply import the components in your blog posts:
|
||||
</Paragraph>
|
||||
|
||||
<CodeBlock
|
||||
language="jsx"
|
||||
showLineNumbers={true}
|
||||
>
|
||||
{`import { YouTubeEmbed } from '../components/YouTubeEmbed';
|
||||
import { TwitterEmbed } from '../components/TwitterEmbed';
|
||||
import { GenericEmbed } from '../components/GenericEmbed';
|
||||
|
||||
<YouTubeEmbed videoId="abc123" style="rounded" />
|
||||
<TwitterEmbed tweetId="123456789" theme="dark" />`}
|
||||
</CodeBlock>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,19 +3,19 @@
|
||||
import * as React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { MediumCard } from "../../src/components/MediumCard";
|
||||
import { SearchBar } from "../../src/components/SearchBar";
|
||||
import { Tag } from "../../src/components/Tag";
|
||||
import { BlogCommandBar } from "../../src/components/blog/BlogCommandBar";
|
||||
import { blogPosts } from "../../src/data/blogPosts";
|
||||
import { PageHeader } from "../../src/components/PageHeader";
|
||||
import { SectionHeader } from "../../src/components/SectionHeader";
|
||||
import { Reveal } from "../../src/components/Reveal";
|
||||
import { Section } from "../../src/components/Section";
|
||||
import { AbstractCircuit, GradientMesh } from "../../src/components/Effects";
|
||||
import { Label } from "../../src/components/Typography";
|
||||
|
||||
export default function BlogPage() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [activeTags, setActiveTags] = useState<string[]>([]);
|
||||
|
||||
// Memoize allPosts to prevent infinite re-render loop
|
||||
// Memoize allPosts
|
||||
const allPosts = React.useMemo(
|
||||
() =>
|
||||
[...blogPosts].sort(
|
||||
@@ -32,110 +32,123 @@ export default function BlogPage() {
|
||||
[allPosts],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const query = searchQuery.toLowerCase().trim();
|
||||
if (query.startsWith("#")) {
|
||||
const tag = query.slice(1);
|
||||
setFilteredPosts(
|
||||
allPosts.filter((post) =>
|
||||
post.tags?.some((t) => t.toLowerCase() === tag.toLowerCase()),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
setFilteredPosts(
|
||||
allPosts.filter((post) => {
|
||||
const title = post.title.toLowerCase();
|
||||
const description = post.description.toLowerCase();
|
||||
const tags = (post.tags || []).join(" ").toLowerCase();
|
||||
return (
|
||||
title.includes(query) ||
|
||||
description.includes(query) ||
|
||||
tags.includes(query)
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}, [searchQuery, allPosts]);
|
||||
const [visibleCount, setVisibleCount] = useState(8);
|
||||
|
||||
const filterByTag = (tag: string) => {
|
||||
setSearchQuery(`#${tag}`);
|
||||
const handleTagToggle = (tag: string) => {
|
||||
setActiveTags((prev) =>
|
||||
prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
|
||||
);
|
||||
setVisibleCount(8); // Reset pagination on filter change
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const query = searchQuery.toLowerCase().trim();
|
||||
|
||||
let filtered = allPosts;
|
||||
|
||||
if (query) {
|
||||
filtered = filtered.filter((post) => {
|
||||
const title = post.title.toLowerCase();
|
||||
const description = post.description.toLowerCase();
|
||||
const pTagString = (post.tags || []).join(" ").toLowerCase();
|
||||
return (
|
||||
title.includes(query) ||
|
||||
description.includes(query) ||
|
||||
pTagString.includes(query)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (activeTags.length > 0) {
|
||||
filtered = filtered.filter((post) =>
|
||||
post.tags?.some((tag) => activeTags.includes(tag)),
|
||||
);
|
||||
}
|
||||
|
||||
setFilteredPosts(filtered);
|
||||
}, [searchQuery, activeTags, allPosts]);
|
||||
|
||||
const loadMore = () => {
|
||||
setVisibleCount((prev) => prev + 6);
|
||||
};
|
||||
|
||||
const hasMore = visibleCount < filteredPosts.length;
|
||||
const postsToShow = filteredPosts.slice(0, visibleCount);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col bg-white overflow-hidden relative min-h-screen">
|
||||
<div className="flex flex-col bg-slate-50/30 overflow-hidden relative min-h-screen">
|
||||
<AbstractCircuit />
|
||||
|
||||
<PageHeader
|
||||
title={
|
||||
<>
|
||||
Blog <br />
|
||||
<span className="text-slate-400">& Notes.</span>
|
||||
</>
|
||||
}
|
||||
description="Ein technisches Notizbuch über Lösungen, Fehler und Werkzeuge."
|
||||
backLink={{ href: "/", label: "Zurück" }}
|
||||
backgroundSymbol="B"
|
||||
/>
|
||||
|
||||
<Section
|
||||
number="01"
|
||||
title="Journal"
|
||||
borderTop
|
||||
effects={<GradientMesh variant="metallic" className="opacity-50" />}
|
||||
effects={<GradientMesh variant="metallic" className="opacity-40" />}
|
||||
className="pb-32 pt-12 md:pt-20"
|
||||
containerVariant="wide"
|
||||
>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
||||
{/* Sidebar / Filter area */}
|
||||
<div className="lg:col-span-4 lg:order-2">
|
||||
<div className="sticky top-32 space-y-16">
|
||||
<Reveal>
|
||||
<div className="space-y-6">
|
||||
<Label className="text-slate-400 uppercase tracking-[0.3em]">
|
||||
Suchen
|
||||
</Label>
|
||||
<SearchBar value={searchQuery} onChange={setSearchQuery} />
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
{allTags.length > 0 && (
|
||||
<Reveal delay={0.2}>
|
||||
<div className="space-y-8">
|
||||
<Label className="text-slate-400 uppercase tracking-[0.3em]">
|
||||
Themen
|
||||
</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allTags.map((tag, index) => (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => filterByTag(tag)}
|
||||
className="text-left group"
|
||||
>
|
||||
<Tag tag={tag} index={index} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
</div>
|
||||
<div className="max-w-[calc(100vw-2rem)] md:max-w-7xl mx-auto space-y-12">
|
||||
{/* Section Header & Filters - Centered & Compact */}
|
||||
<div className="relative z-20 space-y-12 flex flex-col items-center text-center">
|
||||
<SectionHeader
|
||||
title="Alle Artikel"
|
||||
subtitle="Index"
|
||||
align="center"
|
||||
className="py-0 md:py-0"
|
||||
/>
|
||||
<Reveal width="100%" className="max-w-2xl mx-auto">
|
||||
<BlogCommandBar
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
tags={allTags}
|
||||
activeTags={activeTags}
|
||||
onTagToggle={handleTagToggle}
|
||||
/>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
{/* Posts area */}
|
||||
<div className="lg:col-span-8 lg:order-1">
|
||||
<div id="posts-container" className="flex flex-col gap-12">
|
||||
{filteredPosts.length === 0 ? (
|
||||
<div className="py-24 text-center border border-dashed border-slate-200 rounded-3xl">
|
||||
<p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
|
||||
Keine Beiträge gefunden.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredPosts.map((post, i) => (
|
||||
<Reveal key={post.slug} delay={0.1 * i} width="100%">
|
||||
{/* Posts List (Vertical & Minimal) */}
|
||||
<div id="posts-container" className="space-y-12">
|
||||
{postsToShow.length === 0 ? (
|
||||
<div className="py-24 text-center border border-dashed border-slate-200 rounded-3xl bg-white/50">
|
||||
<p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
|
||||
Keine Beiträge gefunden.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchQuery("");
|
||||
setActiveTags([]);
|
||||
}}
|
||||
className="mt-4 text-xs font-bold text-slate-900 underline underline-offset-4 hover:text-slate-600"
|
||||
>
|
||||
Filter zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-6 max-w-3xl mx-auto w-full">
|
||||
{postsToShow.map((post, i) => (
|
||||
<Reveal key={post.slug} delay={0.05 * (i % 6)} width="100%">
|
||||
<MediumCard post={post} />
|
||||
</Reveal>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{hasMore && (
|
||||
<div className="flex justify-center pt-8">
|
||||
<Reveal delay={0.1}>
|
||||
<button
|
||||
onClick={loadMore}
|
||||
className="group relative px-8 py-4 bg-white border border-slate-200 text-slate-600 rounded-full overflow-hidden transition-all hover:border-slate-400 hover:text-slate-900 hover:shadow-lg"
|
||||
>
|
||||
<span className="relative z-10 font-mono text-xs uppercase tracking-widest flex items-center gap-3">
|
||||
Mehr laden
|
||||
<div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors" />
|
||||
<div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors delay-75" />
|
||||
<div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors delay-150" />
|
||||
</span>
|
||||
</button>
|
||||
</Reveal>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
@@ -1,24 +1,30 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
interface HeadingProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const H1: React.FC<HeadingProps> = ({ children, className = '' }) => (
|
||||
<h1 className={`text-4xl md:text-5xl font-bold text-slate-900 mb-8 mt-12 leading-[1.1] tracking-tight ${className}`}>
|
||||
export const H1: React.FC<HeadingProps> = ({ children, className = "" }) => (
|
||||
<h1
|
||||
className={`text-4xl md:text-5xl font-bold text-slate-900 mb-6 mt-8 leading-[1.1] tracking-tight ${className}`}
|
||||
>
|
||||
{children}
|
||||
</h1>
|
||||
);
|
||||
|
||||
export const H2: React.FC<HeadingProps> = ({ children, className = '' }) => (
|
||||
<h2 className={`text-3xl md:text-4xl font-bold text-slate-900 mb-6 mt-10 leading-[1.2] tracking-tight ${className}`}>
|
||||
export const H2: React.FC<HeadingProps> = ({ children, className = "" }) => (
|
||||
<h2
|
||||
className={`text-3xl md:text-4xl font-bold text-slate-900 mb-4 mt-10 leading-[1.2] tracking-tight ${className}`}
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
|
||||
export const H3: React.FC<HeadingProps> = ({ children, className = '' }) => (
|
||||
<h3 className={`text-2xl md:text-3xl font-bold text-slate-900 mb-4 mt-8 leading-[1.3] tracking-tight ${className}`}>
|
||||
export const H3: React.FC<HeadingProps> = ({ children, className = "" }) => (
|
||||
<h3
|
||||
className={`text-2xl md:text-3xl font-bold text-slate-900 mb-3 mt-8 leading-[1.3] tracking-tight ${className}`}
|
||||
>
|
||||
{children}
|
||||
</h3>
|
||||
);
|
||||
);
|
||||
|
||||
@@ -1,18 +1,28 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
interface ParagraphProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const Paragraph: React.FC<ParagraphProps> = ({ children, className = '' }) => (
|
||||
<p className={`text-slate-700 font-serif text-lg md:text-xl leading-relaxed mb-6 ${className}`}>
|
||||
export const Paragraph: React.FC<ParagraphProps> = ({
|
||||
children,
|
||||
className = "",
|
||||
}) => (
|
||||
<p
|
||||
className={`text-slate-700 font-serif text-lg md:text-xl leading-[1.6] mb-4 ${className}`}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
|
||||
export const LeadParagraph: React.FC<ParagraphProps> = ({ children, className = '' }) => (
|
||||
<p className={`text-xl md:text-2xl text-slate-700 font-serif italic leading-relaxed mb-8 ${className}`}>
|
||||
export const LeadParagraph: React.FC<ParagraphProps> = ({
|
||||
children,
|
||||
className = "",
|
||||
}) => (
|
||||
<p
|
||||
className={`text-xl md:text-2xl text-slate-700 font-serif italic leading-snug mb-6 ${className}`}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
);
|
||||
|
||||
@@ -2,8 +2,10 @@ import * as React from "react";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { Reveal } from "../Reveal";
|
||||
import { Label, H3, LeadText } from "../Typography";
|
||||
import { cn } from "../../utils/cn";
|
||||
|
||||
interface ComparisonRowProps {
|
||||
description?: string;
|
||||
negativeLabel: string;
|
||||
negativeText: React.ReactNode;
|
||||
positiveLabel: string;
|
||||
@@ -13,6 +15,7 @@ interface ComparisonRowProps {
|
||||
}
|
||||
|
||||
export const ComparisonRow: React.FC<ComparisonRowProps> = ({
|
||||
description,
|
||||
negativeLabel,
|
||||
negativeText,
|
||||
positiveLabel,
|
||||
@@ -22,27 +25,40 @@ export const ComparisonRow: React.FC<ComparisonRowProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<Reveal delay={delay}>
|
||||
<div
|
||||
className={`flex flex-col ${reverse ? "md:flex-row-reverse" : "md:flex-row"} gap-8 md:gap-12 items-center`}
|
||||
>
|
||||
<div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
|
||||
<Label className="mb-4 line-through decoration-red-500">
|
||||
{negativeLabel}
|
||||
<div className="space-y-4">
|
||||
{description && (
|
||||
<Label className="text-slate-400 text-[10px] tracking-[0.2em] uppercase">
|
||||
{description}
|
||||
</Label>
|
||||
<LeadText className="line-through decoration-red-500 leading-snug">
|
||||
{negativeText}
|
||||
</LeadText>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-8 md:gap-12 items-center",
|
||||
reverse ? "md:flex-row-reverse" : "md:flex-row",
|
||||
)}
|
||||
>
|
||||
<div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
|
||||
<Label className="mb-4 line-through decoration-red-500">
|
||||
{negativeLabel}
|
||||
</Label>
|
||||
<LeadText className="line-through decoration-red-500 leading-snug">
|
||||
{negativeText}
|
||||
</LeadText>
|
||||
</div>
|
||||
|
||||
<div className="shrink-0">
|
||||
<ArrowRight
|
||||
className={`w-6 h-6 text-slate-200 hidden md:block ${reverse ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<ArrowRight
|
||||
className={cn(
|
||||
"w-6 h-6 text-slate-200 hidden md:block",
|
||||
reverse ? "rotate-180" : "",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full">
|
||||
<Label className="text-slate-900 mb-4">{positiveLabel}</Label>
|
||||
<H3 className="text-2xl md:text-3xl">{positiveText}</H3>
|
||||
<div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full">
|
||||
<Label className="text-slate-900 mb-4">{positiveLabel}</Label>
|
||||
<H3 className="text-2xl md:text-3xl">{positiveText}</H3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import Link from 'next/link';
|
||||
import * as React from "react";
|
||||
import Link from "next/link";
|
||||
import { Card } from "./Layout";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
interface Post {
|
||||
title: string;
|
||||
@@ -14,34 +16,53 @@ interface MediumCardProps {
|
||||
}
|
||||
|
||||
export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
|
||||
const { title, description, date, slug } = post;
|
||||
const { title, description, date, slug, tags } = post;
|
||||
|
||||
const formattedDate = new Date(date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
const formattedDate = new Date(date).toLocaleDateString("de-DE", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
return (
|
||||
<Link href={`/blog/${slug}`} className="group block">
|
||||
<article className="space-y-4 py-8 px-8 border border-slate-200 rounded-3xl group-hover:border-slate-400 transition-all duration-500 bg-white">
|
||||
<time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-colors">
|
||||
{formattedDate}
|
||||
</time>
|
||||
|
||||
<h3 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:text-slate-900 transition-colors">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
<p className="text-xl text-slate-500 font-serif italic leading-snug line-clamp-2">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
<div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-xs uppercase tracking-widest group/link">
|
||||
Lesen
|
||||
<div className="w-10 h-px bg-slate-200 group-hover:bg-slate-400 group-hover:w-16 transition-all duration-500"></div>
|
||||
<Link href={`/blog/${slug}`} className="group block w-full">
|
||||
<Card
|
||||
variant="glass"
|
||||
padding="normal"
|
||||
techBorder={false}
|
||||
className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
|
||||
{formattedDate}
|
||||
</time>
|
||||
<div className="flex gap-2">
|
||||
{tags?.slice(0, 2).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-[9px] font-mono text-slate-300 uppercase"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
|
||||
<span>Beitrag öffnen</span>
|
||||
<ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -8,8 +8,6 @@ interface MermaidProps {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
import { CodeWindow } from "./Effects/CodeWindow";
|
||||
|
||||
export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
|
||||
const [id, setId] = useState<string | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
@@ -60,24 +58,22 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
|
||||
if (!id) return null;
|
||||
|
||||
return (
|
||||
<div className="mermaid-wrapper my-8 not-prose">
|
||||
<CodeWindow title="Diagram" className="max-w-4xl" minHeight="300px">
|
||||
<div className="flex justify-center bg-white p-4">
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`mermaid transition-opacity duration-500 w-full max-w-4xl ${isRendered ? "opacity-100" : "opacity-0"}`}
|
||||
id={id}
|
||||
>
|
||||
{error ? (
|
||||
<div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
graph
|
||||
)}
|
||||
</div>
|
||||
<div className="mermaid-wrapper my-12 not-prose w-full overflow-hidden">
|
||||
<div className="flex justify-center w-full">
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`mermaid transition-opacity duration-500 w-full flex justify-center ${isRendered ? "opacity-100" : "opacity-0"}`}
|
||||
id={id}
|
||||
>
|
||||
{error ? (
|
||||
<div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
graph
|
||||
)}
|
||||
</div>
|
||||
</CodeWindow>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -14,6 +14,7 @@ interface PageHeaderProps {
|
||||
};
|
||||
backgroundSymbol?: string;
|
||||
className?: string;
|
||||
variant?: "default" | "blog";
|
||||
}
|
||||
|
||||
export const PageHeader: React.FC<PageHeaderProps> = ({
|
||||
@@ -22,42 +23,88 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
|
||||
backLink,
|
||||
backgroundSymbol,
|
||||
className = "",
|
||||
variant = "default",
|
||||
}) => {
|
||||
const isBlog = variant === "blog";
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cn(
|
||||
"narrow-container relative pt-24 pb-16 md:pt-40 md:pb-24",
|
||||
"narrow-container relative",
|
||||
isBlog
|
||||
? "pt-32 pb-12 md:pt-48 md:pb-16"
|
||||
: "pt-24 pb-16 md:pt-40 md:pb-24",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{backgroundSymbol && (
|
||||
<div className="absolute -left-24 -top-12 text-[20rem] md:text-[24rem] font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none">
|
||||
<div
|
||||
className={cn(
|
||||
"absolute font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none",
|
||||
isBlog
|
||||
? "-left-8 top-12 text-[12rem] md:text-[16rem]"
|
||||
: "-left-24 -top-12 text-[20rem] md:text-[24rem]",
|
||||
)}
|
||||
>
|
||||
{backgroundSymbol}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isBlog && (
|
||||
<div
|
||||
className="absolute left-0 top-32 w-px h-12 bg-slate-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
|
||||
{backLink && (
|
||||
<Link
|
||||
href={backLink.href}
|
||||
className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
|
||||
className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-8 md:mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
|
||||
>
|
||||
<ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "}
|
||||
{backLink.label}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<div className="space-y-8 relative">
|
||||
<div
|
||||
className={cn("space-y-6 md:space-y-8 relative", isBlog && "max-w-7xl")}
|
||||
>
|
||||
<Reveal>
|
||||
<H1 className="max-w-4xl">{title}</H1>
|
||||
<h1
|
||||
className={cn(
|
||||
"font-bold text-slate-900 tracking-tighter leading-[1.1]",
|
||||
isBlog ? "text-4xl md:text-6xl" : "text-5xl md:text-7xl",
|
||||
)}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
</Reveal>
|
||||
|
||||
{description && (
|
||||
<Reveal delay={0.2}>
|
||||
<LeadText className="text-xl md:text-2xl text-slate-400 leading-relaxed max-w-2xl font-serif italic">
|
||||
<p
|
||||
className={cn(
|
||||
"font-serif italic text-slate-400 leading-relaxed",
|
||||
isBlog
|
||||
? "text-lg md:text-xl max-w-xl"
|
||||
: "text-xl md:text-2xl max-w-2xl",
|
||||
)}
|
||||
>
|
||||
{description}
|
||||
</LeadText>
|
||||
</p>
|
||||
</Reveal>
|
||||
)}
|
||||
|
||||
{isBlog && (
|
||||
<div className="pt-4 flex items-center gap-4">
|
||||
<div className="h-px flex-1 bg-slate-100" />
|
||||
<span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
|
||||
Technical ID:{" "}
|
||||
{Math.random().toString(36).substring(7).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import * as React from 'react';
|
||||
import { useState, useRef } from 'react';
|
||||
import * as React from "react";
|
||||
import { useState, useRef } from "react";
|
||||
|
||||
interface SearchBarProps {
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
size?: 'small' | 'large';
|
||||
size?: "small" | "large";
|
||||
}
|
||||
|
||||
export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange, size = 'small' }) => {
|
||||
const [internalValue, setInternalValue] = useState('');
|
||||
export const SearchBar: React.FC<SearchBarProps> = ({
|
||||
value: propValue,
|
||||
onChange,
|
||||
size = "small",
|
||||
}) => {
|
||||
const [internalValue, setInternalValue] = useState("");
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
|
||||
@@ -27,9 +31,9 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
|
||||
|
||||
const clearSearch = () => {
|
||||
if (onChange) {
|
||||
onChange('');
|
||||
onChange("");
|
||||
} else {
|
||||
setInternalValue('');
|
||||
setInternalValue("");
|
||||
}
|
||||
if (inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
@@ -37,24 +41,24 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Escape') {
|
||||
if (e.key === "Escape") {
|
||||
clearSearch();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div className="relative flex items-center">
|
||||
<div className="relative w-full max-w-full">
|
||||
<div className="relative flex items-center w-full">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder="Suchen..."
|
||||
value={value}
|
||||
className={`w-full px-8 py-4 font-bold text-slate-900 bg-white rounded-2xl border transition-all focus:outline-none placeholder:text-slate-300 ${
|
||||
size === 'large' ? 'text-2xl md:text-4xl py-6 rounded-3xl' : 'text-lg'
|
||||
} ${
|
||||
isFocused ? 'border-slate-400' : 'border-slate-200'
|
||||
}`}
|
||||
className={`w-full max-w-full px-8 py-4 font-bold text-slate-900 bg-white rounded-2xl border transition-all focus:outline-none placeholder:text-slate-300 ${
|
||||
size === "large"
|
||||
? "text-2xl md:text-4xl py-6 rounded-3xl"
|
||||
: "text-lg"
|
||||
} ${isFocused ? "border-slate-400" : "border-slate-200"}`}
|
||||
onChange={handleInput}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
|
||||
@@ -82,48 +82,58 @@ export const Section: React.FC<SectionProps> = ({
|
||||
|
||||
<div className={cn("relative z-10", containerClass)}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
|
||||
{/* Sidebar: Number & Title */}
|
||||
<div className="md:col-span-3">
|
||||
<div className="md:sticky md:top-40 space-y-8">
|
||||
{number && (
|
||||
<Reveal delay={delay}>
|
||||
<span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
|
||||
{number}
|
||||
{/* Subtle binary overlay on number */}
|
||||
<span
|
||||
className="absolute top-1 left-0 text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{parseInt(number || "0")
|
||||
.toString(2)
|
||||
.padStart(8, "0")}
|
||||
{/* Sidebar: Number & Title (Only if provided) */}
|
||||
{(number || title || illustration) && (
|
||||
<div className="md:col-span-3">
|
||||
<div className="md:sticky md:top-40 space-y-8">
|
||||
{number && (
|
||||
<Reveal delay={delay}>
|
||||
<span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
|
||||
{number}
|
||||
{/* Subtle binary overlay on number */}
|
||||
<span
|
||||
className="absolute top-1 left-0 text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{parseInt(number || "0")
|
||||
.toString(2)
|
||||
.padStart(8, "0")}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</Reveal>
|
||||
)}
|
||||
{title && (
|
||||
<Reveal delay={delay + 0.1}>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Animated dot indicator */}
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
|
||||
<Label className="text-slate-900 text-[10px] tracking-[0.4em]">
|
||||
{title}
|
||||
</Label>
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
{illustration && (
|
||||
<Reveal delay={delay + 0.2}>
|
||||
<div className="pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
|
||||
{illustration}
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
</Reveal>
|
||||
)}
|
||||
{title && (
|
||||
<Reveal delay={delay + 0.1}>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Animated dot indicator */}
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
|
||||
<Label className="text-slate-900 text-[10px] tracking-[0.4em]">
|
||||
{title}
|
||||
</Label>
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
{illustration && (
|
||||
<Reveal delay={delay + 0.2}>
|
||||
<div className="pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
|
||||
{illustration}
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="md:col-span-9">{children}</div>
|
||||
<div
|
||||
className={cn(
|
||||
number || title || illustration
|
||||
? "md:col-span-9"
|
||||
: "md:col-span-12",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
55
apps/web/src/components/SectionHeader.tsx
Normal file
55
apps/web/src/components/SectionHeader.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Reveal } from "./Reveal";
|
||||
import { cn } from "../utils/cn";
|
||||
|
||||
interface SectionHeaderProps {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
className?: string;
|
||||
align?: "left" | "center" | "right";
|
||||
}
|
||||
|
||||
export const SectionHeader: React.FC<SectionHeaderProps> = ({
|
||||
title,
|
||||
subtitle,
|
||||
className = "",
|
||||
align = "left",
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative",
|
||||
align === "center" ? "text-center" : "text-left",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<Reveal width="100%">
|
||||
<div
|
||||
className={cn(
|
||||
"relative inline-block",
|
||||
align === "center" ? "mx-auto" : "",
|
||||
)}
|
||||
>
|
||||
{/* Industrial Overline */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-4 mb-2 text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400",
|
||||
align === "center" ? "justify-center" : "justify-start",
|
||||
)}
|
||||
>
|
||||
<div className="w-6 h-px bg-slate-200" />
|
||||
<span>{subtitle || "Section"}</span>
|
||||
<div className="w-12 h-px bg-slate-100" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl md:text-6xl font-bold text-slate-900 tracking-tighter leading-none">
|
||||
{title}
|
||||
<span className="text-slate-200">.</span>
|
||||
</h2>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
80
apps/web/src/components/blog/BlogCommandBar.tsx
Normal file
80
apps/web/src/components/blog/BlogCommandBar.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { cn } from "../../utils/cn";
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
interface BlogCommandBarProps {
|
||||
searchQuery: string;
|
||||
onSearchChange: (value: string) => void;
|
||||
tags: string[];
|
||||
activeTags: string[];
|
||||
onTagToggle: (tag: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
|
||||
searchQuery,
|
||||
onSearchChange,
|
||||
tags,
|
||||
activeTags,
|
||||
onTagToggle,
|
||||
className = "",
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"w-full max-w-2xl mx-auto flex flex-col items-center space-y-6 px-4 md:px-0",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{/* Command Input Area */}
|
||||
<div className="relative group w-full">
|
||||
{/* Glow Effect */}
|
||||
<div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-30 group-hover:opacity-100 transition duration-500" />
|
||||
|
||||
<div className="relative flex items-center bg-white rounded-2xl border border-slate-200 p-2 shadow-sm transition-all focus-within:ring-2 focus-within:ring-slate-100 focus-within:border-slate-300">
|
||||
<div className="pl-4 text-slate-400">
|
||||
<Search className="w-5 h-5" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder="Search posts..."
|
||||
className="w-full bg-transparent px-4 py-3 text-lg text-slate-900 placeholder:text-slate-300 outline-none font-bold"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => onSearchChange("")}
|
||||
className="mr-2 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tag Command Row */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||
{tags.map((tag) => {
|
||||
const isActive = activeTags.includes(tag);
|
||||
return (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => onTagToggle(tag)}
|
||||
className={cn(
|
||||
"px-3 py-1.5 rounded-lg text-[10px] font-mono uppercase tracking-wider border transition-all duration-200 select-none",
|
||||
isActive
|
||||
? "bg-slate-900 text-white border-slate-900 shadow-md transform scale-105"
|
||||
: "bg-white text-slate-500 border-slate-200 hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50",
|
||||
)}
|
||||
>
|
||||
#{tag}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
69
apps/web/src/components/blog/BlogFilterBar.tsx
Normal file
69
apps/web/src/components/blog/BlogFilterBar.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { SearchBar } from "../SearchBar";
|
||||
import { cn } from "../../utils/cn";
|
||||
|
||||
interface BlogFilterBarProps {
|
||||
searchQuery: string;
|
||||
onSearchChange: (value: string) => void;
|
||||
tags: string[];
|
||||
activeTags: string[];
|
||||
onTagToggle: (tag: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const BlogFilterBar: React.FC<BlogFilterBarProps> = ({
|
||||
searchQuery,
|
||||
onSearchChange,
|
||||
tags,
|
||||
activeTags,
|
||||
onTagToggle,
|
||||
className = "",
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"w-full max-w-full glass rounded-3xl border border-slate-200/50 p-2 md:p-3 flex flex-col md:flex-row gap-4 md:items-center shadow-lg shadow-slate-100/50 backdrop-blur-md relative overflow-hidden group",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{/* Decorative gradient bleed */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-indigo-500/5 to-transparent blur-2xl -z-10 pointer-events-none" />
|
||||
|
||||
{/* Search Area */}
|
||||
<div className="w-full md:w-1/3 min-w-[280px]">
|
||||
<SearchBar value={searchQuery} onChange={onSearchChange} size="small" />
|
||||
</div>
|
||||
|
||||
{/* Vertical Divider (Desktop) */}
|
||||
<div className="hidden md:block w-px h-8 bg-slate-100" />
|
||||
|
||||
{/* Tags Scroll Area */}
|
||||
<div className="flex-1 min-w-0 overflow-x-auto no-scrollbar mask-gradient-right">
|
||||
<div className="flex items-center gap-2 pr-8">
|
||||
<span className="text-[10px] font-mono text-slate-300 uppercase tracking-widest shrink-0 mr-2">
|
||||
Filter:
|
||||
</span>
|
||||
{tags.map((tag) => {
|
||||
const isActive = activeTags.includes(tag);
|
||||
return (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => onTagToggle(tag)}
|
||||
className={cn(
|
||||
"px-3 py-1.5 rounded text-[9px] font-mono uppercase tracking-wider border transition-all duration-300 whitespace-nowrap",
|
||||
isActive
|
||||
? "bg-slate-900 text-white border-slate-900 shadow-md"
|
||||
: "bg-white/50 text-slate-500 border-slate-100 hover:border-slate-300 hover:text-slate-800",
|
||||
)}
|
||||
>
|
||||
#{tag}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
191
apps/web/src/components/blog/posts/Group1/AgencySlowdown.tsx
Normal file
191
apps/web/src/components/blog/posts/Group1/AgencySlowdown.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const AgencySlowdown: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Haben Sie sich schon einmal gefragt, warum eine einfache Textänderung bei
|
||||
Ihrer Agentur oft zwei Wochen dauert?
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich kenne die Antwort aus meiner jahrelangen Erfahrung: Es liegt an
|
||||
veralteten Hierarchien und einem technologischen Overhead, der Innovation
|
||||
im Keim erstickt.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
<Marker>Mein Modell radikaler Direktheit</Marker> beschleunigt Ihr
|
||||
Business, indem es unnötige Schnittstellen eliminiert. Wir lenken den
|
||||
Fokus zurück auf das fertige Produkt.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Die "stille Post" der Agentur-Hierarchien</H2>
|
||||
<Paragraph>
|
||||
In einer klassischen Full-Service-Agentur landet Ihr Wunsch zuerst beim
|
||||
Account Manager.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Dieser gibt ihn an den Projektleiter weiter, der ein Ticket erstellt,
|
||||
welches schließlich einem oft überarbeiteten Junior-Entwickler zugewiesen
|
||||
wird.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Jede dieser Stationen ist nicht nur ein potenzieller Flaschenhals, sondern
|
||||
auch eine Fehlerquelle.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Informationen gehen verloren, die Umsetzung dauert ewig und am Ende
|
||||
bezahlen Sie für Meetings und Ticket-Management statt für Output.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich nenne das die <Marker>"Agentur-Steuer"</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Während dort noch über Prioritäten diskutiert wird, könnte Ihre neue
|
||||
Lösung schon live sein und ersten Umsatz für Ihr Unternehmen generieren.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph LR
|
||||
Request["Ihr Wunsch"] --> AM["Account Manager"]
|
||||
AM --> PM["Projektleiter (Meetings)"]
|
||||
PM --> Ticket["Veraltetes Ticketsystem"]
|
||||
Ticket --> Dev["Junior Entwickler"]
|
||||
Dev --> Review["Code Review (Wartezeit)"]
|
||||
Review --> QA["Manuelle QA"]
|
||||
QA --> Approval["Kundenseitige Freigabe"]
|
||||
Approval --> Prod["Mühsamer Live-Gang"]
|
||||
style AM fill:#fca5a5,stroke:#333
|
||||
style PM fill:#fca5a5,stroke:#333
|
||||
style Ticket fill:#fca5a5,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Die traditionelle 'Stille Post': Jede Schnittstelle kostet Sie Zeit,
|
||||
Präzision und bares Geld.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Der systemische Interessenkonflikt</H3>
|
||||
<Paragraph>
|
||||
Es gibt einen tieferen Grund für die Trägheit vieler Agenturen: Das
|
||||
Geschäftsmodell.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Agenturen nach abrechenbaren Stunden arbeiten und große Teams
|
||||
finanzieren müssen, fehlt oft der ökonomische Anreiz zur radikalen
|
||||
Vereinfachung.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Langsame Prozesse bedeuten oft mehr abrechenbare Projektmanagement-Zeit.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich hingegen habe mein gesamtes Business auf{" "}
|
||||
<Marker>Effizienz und technologische Souveränität</Marker> optimiert.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Mein Ziel ist die Maximierung Ihres Outputs, nicht die der Stunden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich investiere massiv in meine eigene Toolchain, um Aufgaben, die
|
||||
Agenturen Tage kosten, in Minuten zu erledigen.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Handwerk statt Fließband: Mein Boutique-Ansatz</H2>
|
||||
<Paragraph>
|
||||
In meiner Welt gibt es keine Junioren, an die Arbeit "durchgereicht" wird.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie mit mir arbeiten, sprechen Sie direkt mit dem Experten, der die
|
||||
Architektur entwirft und den Code schreibt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich betrachte Softwareentwicklung nicht als anonymen Fließband-Job,
|
||||
sondern als <Marker>digitales Kunsthandwerk</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Dieser Boutique-Ansatz erlaubt es mir, auf eine Weise flexibel zu sein,
|
||||
die für große, starre Strukturen unmöglich ist.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich kann Ideen sofort auf ihre technische Machbarkeit prüfen und
|
||||
prototypisieren, ohne erst eine interne Freigabewelle abwarten zu müssen.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Zwei Welten der digitalen Umsetzung"
|
||||
negativeLabel="Struktur-Agentur"
|
||||
negativeText="Unnötige Meetings, langsame Kommunikationskanäle, personeller 'Verschleiß' Ihres Briefings"
|
||||
positiveLabel="Mintel Boutique Architect"
|
||||
positiveText="Direkter Experten-Draht, automatisierte Workflows, Fokus auf Pure Output"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Mein Modell: Radikale Direktheit</H2>
|
||||
<Paragraph>
|
||||
Ich nutze Technologien, die darauf ausgelegt sind, Reibung zu eliminieren.
|
||||
Statt mühsam "Tickets" zu schreiben, bauen wir sofort an Lösungen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Hier sind die drei Hebel, mit denen ich das Tempo Ihres Projekts
|
||||
verdopple:
|
||||
</Paragraph>
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Preview-Deployments in Echtzeit:</strong> Jede Änderung wird
|
||||
sofort auf einer geheimen URL visualisiert. Sie sehen den Fortschritt
|
||||
live.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Komponentengestützte Evolution:</strong> Ich baue ein
|
||||
Design-System für Sie, das mitwächst. Neue Seiten entstehen in Stunden.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Automatisierte Schutzschilde:</strong> Statt fehleranfälliger
|
||||
manueller QA nutze ich automatisierte Tests.{" "}
|
||||
<Marker>Technik schützt Technik.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<H2>Für wen ich die Bremse löse</H2>
|
||||
<Paragraph>
|
||||
Mein Angebot richtet sich an Gründer und Entscheider, die{" "}
|
||||
<Marker>Ergebnisse über Hochglanz-Reports</Marker> stellen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Suchen Sie einen Partner, der so schnell denkt wie Ihr Business es
|
||||
erfordert? Dann passen wir zusammen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Unternehmen, die primär nach maximaler personeller Skalierung suchen, sind
|
||||
bei klassischen Großagenturen besser aufgehoben.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich arbeite für die Macher, die{" "}
|
||||
<Marker>Qualität und Geschwindigkeit durch Intelligenz</Marker> erreichen
|
||||
wollen.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Ihre Zeit ist ein knappes Gut</H2>
|
||||
<Paragraph>
|
||||
Technologische Exzellenz bedeutet für mich auch, Ihnen keine Zeit zu
|
||||
stehlen. Ich baue Systeme, die fließen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie heute eine Vision haben, möchte ich, dass wir sie übermorgen
|
||||
bereits am Markt testen können.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen Sie uns die Agentur-Steuer streichen und direkt in Ihren Erfolg
|
||||
investieren.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Echte Geschwindigkeit beginnt dort, wo Hierarchie endet.</Marker>
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
182
apps/web/src/components/blog/posts/Group1/PageSpeedFails.tsx
Normal file
182
apps/web/src/components/blog/posts/Group1/PageSpeedFails.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const PageSpeedFails: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Unternehmen investieren oft Unsummen in glänzende Oberflächen, während das
|
||||
technische Fundament einer digitalen Ruine gleicht.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Wenn Ihre Website bei Google PageSpeed scheitert, verlieren Sie Kunden –{" "}
|
||||
<Marker>bevor diese Ihre Botschaft überhaupt wahrnehmen können</Marker>.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit als Digital Architect ist die Geschwindigkeit der
|
||||
architektonische Gradmesser für Professionalität.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Der unsichtbare Umsatz-Verschleiß</H2>
|
||||
<Paragraph>
|
||||
Stellen Sie sich vor, Sie eröffnen ein Luxus-Geschäft in der besten Lage,
|
||||
aber die Eingangstür klemmt massiv.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Kunden müssen 10 Sekunden lang drücken, um einzutreten. Genau das passiert
|
||||
täglich auf tausenden Websites.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Millisekunden sind im digitalen Zeitalter die härteste Währung.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Eine Verzögerung von nur einer Sekunde kann die{" "}
|
||||
<Marker>Conversion-Rate um bis zu 20 % senken</Marker>. Das ist kein
|
||||
technisches Detail, sondern ein unternehmerisches Risiko.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich betrachte Performance nicht als IT-Kennzahl, sondern als ökonomischen
|
||||
Hebel.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Google bewertet Websites heute primär nach den "Core Web Vitals". Das sind
|
||||
präzise Messgrößen für die Frustrationstoleranz Ihrer Nutzer.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wer hier rote Zahlen schreibt, wird vom Algorithmus unsichtbar gemacht –
|
||||
eine digitale Strafe für technische Nachlässigkeit.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der Impact von Geschwindigkeit auf Ihre Bilanz"
|
||||
negativeLabel="Langsames Legacy-System"
|
||||
negativeText="Hohe Absprungraten, sinkendes Markenvertrauen, teure Akquise ohne Ertrag"
|
||||
positiveLabel="Mintel High-Performance"
|
||||
positiveText="Maximale Conversion, SEO-Vorsprung ab Tag 1, begeisterte Nutzer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Warum klassische Lösungen scheitern</H2>
|
||||
<Paragraph>
|
||||
Die Ursache liegt oft in der Verwendung von "All-in-One"-Lösungen wie
|
||||
WordPress oder überladenen Baukästen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Diese Systeme versuchen, alles für jeden zu sein. Das Ergebnis ist ein
|
||||
gigantischer "Ballast an Code".
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Jedes Byte muss durch das Nadelöhr der Internetverbindung gepresst werden,
|
||||
bevor das erste Bild erscheint.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
In einer mobilen Welt mit oft instabilen Verbindungen ist das ein{" "}
|
||||
<Marker>architektonisches Todesurteil</Marker>. Wer hier spart, zahlt
|
||||
später doppelt durch verlorene Kunden.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
A["Anfrage des Browsers"] --> B["Server muss 'nachdenken' (PHP/DB)"]
|
||||
B --> C["Hunderte Datenbank-Abfragen"]
|
||||
C --> D["HTML wird mühsam live konstruiert"]
|
||||
D --> E["Veraltetes Asset-Management lädt alles"]
|
||||
E --> F["Render-Blocking Code (Browser stoppt)"]
|
||||
F --> G["Seite endlich sichtbar (nach 3-5 Sek)"]
|
||||
style B fill:#fca5a5,stroke:#333
|
||||
style F fill:#fca5a5,stroke:#333
|
||||
style G fill:#fca5a5,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Der Flaschenhals der Standard-Systeme: Rechenzeit am Server raubt Ihnen
|
||||
wertvolle Kundenzeit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H2>Meine Architektur der Geschwindigkeit</H2>
|
||||
<Paragraph>
|
||||
Ich verfolge einen radikal anderen Ansatz. Statt die Seite erst mühsam
|
||||
zusammenzubauen, wenn der Kunde sie anfragt, liefere ich fertig optimierte
|
||||
"digitale Objekte" aus.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Mein "Static-First" Framework sorgt dafür, dass die Antwortzeit Ihres
|
||||
Servers nahezu bei Null liegt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Völlig egal, ob gerade 10 oder 10.000 Menschen gleichzeitig auf Ihre Seite
|
||||
zugreifen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>Skalierbarkeit durch Design</Marker>, nicht durch bloße
|
||||
Server-Power.
|
||||
</Paragraph>
|
||||
|
||||
<H3>Die drei Säulen meiner Umsetzung</H3>
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Zero-Computation am Edge:</strong> Durch Static Site Generation
|
||||
(SSG) liegen alle Inhalte fertig auf globalen CDNs. Keine Wartezeit.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Präzises Asset-Engineering:</strong> Ich nutze Tree-Shaking. Ihr
|
||||
Kunde lädt exakt nur den Code, den er wirklich benötigt.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Next-Gen Media-Handling:</strong> Bilder werden automatisch in
|
||||
Formaten wie AVIF ausgeliefert. Qualität bleibt, Dateigröße schmilzt.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<H2>Der wirtschaftliche Case</H2>
|
||||
<Paragraph>
|
||||
Baukästen wirken "auf den ersten Blick" günstiger. Doch das ist eine
|
||||
riskante Milchmädchenrechnung.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie monatlich 5.000 € in Marketing investieren, aber 30 % Ihrer Leads
|
||||
durch Ladezeiten verlieren, verbrennen Sie jedes Jahr 18.000 €.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Mein System ist kein Kostenfaktor, sondern ein{" "}
|
||||
<Marker>ROI-Beschleuniger</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wir senken die Kosten pro Lead, indem wir die Reibungsverluste minimieren.
|
||||
Ein technisch überlegenes System ist immer die rentablere Wahl.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Wann meine Architektur für Sie Sinn macht</H2>
|
||||
<Paragraph>
|
||||
Ich bin Partner für Unternehmen, die über die "digitale Visitenkarte"
|
||||
hinausgewachsen sind.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ist Ihre Website ein geschäftskritisches Werkzeug für die Lead-Gen? Dann
|
||||
ist mein Ansatz alternativlos.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich steige dort ein, wo technologische{" "}
|
||||
<Marker>Exzellenz zum entscheidenden Wettbewerbsvorteil</Marker> wird.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Respekt vor der Zeit Ihrer Nutzer</H2>
|
||||
<Paragraph>
|
||||
Geschwindigkeit ist letztlich Ausdruck von Wertschätzung. Sie
|
||||
signalisieren Ihrem Kunden: "Ich respektiere deine Zeit."
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen Sie uns Ihre Website in eine hochpräzise Wachstums-Maschine
|
||||
verwandeln.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Qualität zahlt sich aus</Marker> – in Millisekunden und in Euro.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
184
apps/web/src/components/blog/posts/Group1/SlowLoadingDebt.tsx
Normal file
184
apps/web/src/components/blog/posts/Group1/SlowLoadingDebt.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
|
||||
export const SlowLoadingDebt: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Zeit ist im modernen Web die härteste Währung.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Laufbahn als Digital Architect habe ich miterlebt, wie
|
||||
Millisekunden über den Erfolg von Geschäftsmodellen entscheiden.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Wer technische Altlasten ignoriert, zahlt Zinsen in Form von massiven
|
||||
Kundenverlusten.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
<Marker>
|
||||
Bis das digitale Business schließlich an technischer Zahlungsunfähigkeit
|
||||
scheitert
|
||||
</Marker>
|
||||
.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Zinsen auf schlechte technische Entscheidungen</H2>
|
||||
<Paragraph>
|
||||
Technik-Schulden (Technical Debt) entstehen oft schleichend.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Man wählt heute die schnelle, unsaubere Lösung, um vermeintlich Zeit zu
|
||||
sparen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Doch diese Entscheidung ist ein digitaler Kredit mit extrem hohen Zinsen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Bei der Performance äußert sich das in trägen Ladezeiten, die sich wie
|
||||
Blei auf Ihre Conversion-Rate legen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Jede Sekunde Verzögerung senkt die Abschlussquote im Schnitt um 20 %.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist kein bloßes IT-Thema – das ist ein{" "}
|
||||
<Marker>massives betriebswirtschaftliches Risiko</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich helfe Ihnen, diese Performance-Killer aufzuspüren und systematisch zu
|
||||
eliminieren.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Oft sind es kleine Versäumnisse, die in der Summe ein System unrettbar
|
||||
schwerfällig machen.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph LR
|
||||
Slow["Träge Website"] --> Frust["Nutzer-Frustration (Subliminal)"]
|
||||
Frust --> Bounce["Hohe Absprungrate"]
|
||||
Bounce --> Rank["Ranking-Verlust bei Google"]
|
||||
Rank --> Loss["Umsatz- & Reputationsverlust"]
|
||||
Loss --> Debt["Explodierende Akquisekosten"]
|
||||
style Loss fill:#ef4444,color:#fff
|
||||
style Debt fill:#ef4444,color:#fff`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Der fatale Teufelskreis der Ladezeit: Technische Schulden führen zu
|
||||
immer höheren Opportunitätskosten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Die Psychologie des digitalen Wartens</H3>
|
||||
<Paragraph>
|
||||
Wussten Sie, dass die menschliche Wahrnehmung von Zeit im Internet völlig
|
||||
verzerrt ist?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Eine Sekunde Wartezeit fühlt sich digital wie eine kleine Ewigkeit an.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn eine Seite nicht sofort reagiert, sendet dies ein Signal von{" "}
|
||||
<Marker>Unzuverlässigkeit und Inkompetenz</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Der Nutzer fragt sich unbewusst: "Wenn sie schon ihre Website nicht im
|
||||
Griff haben, wie gehen sie dann mit meinen Daten um?"
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich sorge für eine "Instant-Feel" Erfahrung durch intelligentes
|
||||
Pre-Loading.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das schafft Vertrauen, noch bevor das erste Wort gelesen wurde.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Wo die Schulden in Ihrem System wirklich lauern</H2>
|
||||
<Paragraph>
|
||||
In meiner Analyse begegnen mir immer wieder die gleichen drei Quellen für
|
||||
technische Altlasten.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Diese zu bereinigen ist der Hebel für Ihre digitale Rendite:
|
||||
</Paragraph>
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Legacy Script Bloat:</strong> Veraltete Tracker, die den Browser
|
||||
bei jedem Aufruf blockieren. Wir entfernen den Ballast radikal.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Architektonische Trägheit:</strong> Dynamische Abfragen, wo
|
||||
statische Antworten möglich wären. Wir liefern Antworten in
|
||||
Lichtgeschwindigkeit.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Die mobile Vernachlässigung:</strong> Eine Seite, die im
|
||||
4G-Funkloch zur Qual wird.{" "}
|
||||
<Marker>Hier findet oft der Erstkontakt statt.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12 space-y-8">
|
||||
<ComparisonRow
|
||||
description="Status Quo (Altlasten) vs. Mintel Standard"
|
||||
negativeLabel="Historisch gewachsene Last"
|
||||
negativeText="8s Ladezeit, instabiles Layout (Lighthouse 30), hohe Wartungs-Sorgen"
|
||||
positiveLabel="Strategisches Refactoring"
|
||||
positiveText="< 1s Ladezeit, felsenfeste Architektur (Lighthouse 100), absolute Ruhe im Betrieb"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Refactoring als Rendite-Beschleuniger</H2>
|
||||
<Paragraph>
|
||||
Ich flicke nicht an Symptomen herum, ich optimiere die DNA Ihres Systems.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ein strategisches Refactoring ist der mutige Schritt weg von
|
||||
schwerfälligen Datenbank-Monolithen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Dies ist kein technisches Selbstverwirklichungsprojekt, sondern eine
|
||||
Investition mit knallhartem ROI.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wer schneller ist als der Wettbewerb, gewinnt die Aufmerksamkeit zuerst.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
In einem gesättigten Markt ist{" "}
|
||||
<Marker>Geschwindigkeit ein entscheidender Wettbewerbsvorteil</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Wann ist es Zeit für eine Schuldenbereinigung?</H2>
|
||||
<Paragraph>
|
||||
Wenn Sie spüren, dass Ihre aktuelle Technik Ihre Ambitionen ausbremst, bin
|
||||
ich Ihr Architekt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich verstehe, dass für junge Projekte ein pragmatischer Ansatz oft
|
||||
sinnvoll ist.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie jedoch an einem Punkt stehen, an dem Professionalität und
|
||||
Skalierung zählen, gießen wir das{" "}
|
||||
<Marker>technologische Fundament</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Befreien Sie Ihr Business</H2>
|
||||
<Paragraph>
|
||||
Technische Schulden sind eine unsichtbare Bremse für Ihr Wachstum.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Ihnen ein System, das durch{" "}
|
||||
<Marker>Effizienz und Klarheit</Marker> überzeugt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ihr Business verdient es, unbeschwert und frei von Altlasten zu skalieren.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
159
apps/web/src/components/blog/posts/Group1/WebsiteStability.tsx
Normal file
159
apps/web/src/components/blog/posts/Group1/WebsiteStability.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const WebsiteStability: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
"Nach dem letzten Update war plötzlich das halbe Layout kaputt."
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Das ist der Satz, den ich am häufigsten von Neukunden höre.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Für mich ist eine Website ein technisches Präzisionswerkzeug. Es darf
|
||||
niemals einfach "auseinanderfallen".
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
<Marker>Stabilität ist kein glücklicher Zufall</Marker>, sondern das
|
||||
Ergebnis eines kompromisslosen Engineering-Systems.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Die Entropie des Webs</H2>
|
||||
<Paragraph>Das Internet ist eine extrem dynamische Umgebung.</Paragraph>
|
||||
<Paragraph>
|
||||
Browser-Updates und neue Sicherheitsstandards nagen permanent an der
|
||||
Integrität Ihrer Website.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
In herkömmlichen Systemen sind die Komponenten oft wie ein wackeliger
|
||||
Stapel Lego-Steine angeordnet.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Zieht man einen Stein heraus – etwa durch ein Plugin-Update –, gerät das
|
||||
gesamte Konstrukt ins Wanken.
|
||||
</Paragraph>
|
||||
<Paragraph>Ich nenne das den schleichenden "Software-Zerfall".</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Architektur, die diesem Zerfall <Marker>aktiv widersteht</Marker>
|
||||
.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Update["Technische Änderung / Update"] --> Test["Automatisierte Qualitäts-Tests"]
|
||||
Test -->|OK| Deploy["Automatischer, sicherer Live-Gang"]
|
||||
Test -->|Fehler| Alert["Sofortiger Stopp & Fehler-Isolation"]
|
||||
Alert --> Fix["Manuelle Korrektur durch mich (Dev)"]
|
||||
Deploy --> Stable["Website bleibt 100% konsistent"]
|
||||
style Stable fill:#4ade80,stroke:#333
|
||||
style Alert fill:#ef4444,color:#fff
|
||||
style Deploy fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Mein defensives Sicherheitsnetz: Keine Änderung erreicht den Nutzer,
|
||||
ohne maschinell zertifiziert zu sein.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Die Kosten des menschlichen Versagens eliminieren</H3>
|
||||
<Paragraph>
|
||||
Die meisten Fehler entstehen durch manuelle Eingriffe oder das Übersehen
|
||||
von Seiteneffekten.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ein Entwickler ändert das Design auf einer Unterseite und merkt nicht,
|
||||
dass dadurch das Kontaktformular bricht.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
In meiner Welt gibt es solche Fehler nicht. Ich investiere in{" "}
|
||||
<Marker>automatisierte Wächtern</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Bevor eine Änderung live geht, prüft eine künstliche Instanz jedes Detail
|
||||
Ihrer gesamten Website.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Technik schützt hier den Menschen vor Flüchtigkeitsfehlern.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Die "Fortress-Mentalität": Drei Schichten der Sicherheit</H2>
|
||||
<Paragraph>
|
||||
Sorgen Sie sich nie wieder darum, ob Ihre Seite "das Wochenende überlebt
|
||||
hat".
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Mein Stabilitäts-System umfasst drei entscheidende Schutzschichten:
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Visual Regression Testing:</strong> Mein System vergleicht nach
|
||||
jeder Änderung tausende Bildpunkte. Die Maschine sieht Fehler sofort.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Immutable Deployments:</strong> Ich überschreibe niemals
|
||||
Live-Dateien. Wir können in Millisekunden auf eine saubere Kopie
|
||||
zurückrollen.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Entkoppelte Modul-Logik:</strong> Ich baue in isolierten
|
||||
Komponenten. Änderung an Punkt A gefährden niemals Punkt B.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Hobby-Ansatz vs. Industrial-Grade Reliability"
|
||||
negativeLabel="Standard Agentur-Service"
|
||||
negativeText="Updates auf 'Gut Glück', Hotfixes am Live-System, schleichender Qualitätsverlust"
|
||||
positiveLabel="Mintel Engineering"
|
||||
positiveText="0 % Risiko-Deployments, proaktive Überwachung, technologische Sorgenfreiheit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Warum Stabilität die beste Wachstums-Strategie ist</H2>
|
||||
<Paragraph>
|
||||
Ein stabiles System ist kein technischer Selbstzweck. Es ist die
|
||||
Grundvoraussetzung für Skalierung.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Nur wenn Sie blind auf Ihr technologisches Rückgrat vertrauen können,
|
||||
können Sie mit voller Kraft investieren.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue keine "Schönwetter-Websites", sondern{" "}
|
||||
<Marker>industrielle Software-Systeme</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>Stabilität bedeutet für Sie Fokus auf Ihr Business.</Paragraph>
|
||||
|
||||
<H2>Für wen ist meine 'Fortress-Architektur' richtig?</H2>
|
||||
<Paragraph>
|
||||
Gefährden optische Defekte oder Ausfälle direkt Ihren Ruf? Dann brauchen
|
||||
Sie eine ernsthafte Architektur.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich werde aktiv, wenn{" "}
|
||||
<Marker>Professionalität und Zuverlässigkeit</Marker> für Sie nicht
|
||||
verhandelbar sind.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Ihre digitale Ruhe ist mein Auftrag</H2>
|
||||
<Paragraph>
|
||||
Souveränität im Netz beginnt bei der Verlässlichkeit der eigenen
|
||||
Werkzeuge.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir die Zeit der "kaputten Layouts" ein für alle Mal beenden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Stabilität ist die Basis für Vertrauen.</Marker> Ihr Erfolg
|
||||
verdient dieses solide Fundament.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
164
apps/web/src/components/blog/posts/Group1/WordPressPlugins.tsx
Normal file
164
apps/web/src/components/blog/posts/Group1/WordPressPlugins.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const WordPressPlugins: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
WordPress-Plugins werden oft als die ultimative Abkürzung zum Erfolg
|
||||
verkauft.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner täglichen Praxis als Digital Architect sehe ich jedoch meist das
|
||||
Gegenteil: Sie sind eine teure Umleitung in eine technische Sackgasse.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Die vermeintlich "schnelle Lösung" ist am Ende{" "}
|
||||
<Marker>oft die teuerste Entscheidung Ihrer digitalen Strategie</Marker>.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Die "Frankenstein-Architektur" der Plugins</H2>
|
||||
<Paragraph>
|
||||
Die Versuchung ist menschlich: Ein Klick, und das neue Feature ist da.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Doch was Sie wirklich tun, ist fremden Code ungefiltert in Ihr
|
||||
geschäftskritisches System zu lassen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich sehe oft Instanzen, die unter der Last von 40+ Plugins förmlich
|
||||
zermalmt werden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Jedes Plugin verfolgt eine eigene Logik und kämpft mit anderen Komponenten
|
||||
um knappe Ressourcen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Es entsteht eine instabile <Marker>"Frankenstein-Architektur"</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie geben die Kontrolle über Ihre Plattform ab und hängen von der Roadmap
|
||||
Dritter ab.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Verliert ein Plugin-Entwickler das Interesse, stehen Sie mit einer
|
||||
Sicherheitslücke da.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
P1["Plugin A (Slider)"] --> Core["WordPress Core"]
|
||||
P2["Plugin B (SEO)"] --> Core
|
||||
P3["Plugin C (Forms)"] --> Core
|
||||
Core --> Bloat["Asset-Overload (CSS/JS)"]
|
||||
Bloat --> Slow["Ladezeit > 4 Sek."]
|
||||
P1 -.-> P2["Konfliktmöglichkeit"]
|
||||
P2 -.-> P3["Konfliktmöglichkeit"]
|
||||
Slow --> Bounce["Besucher springen ab"]
|
||||
style Slow fill:#fca5a5,stroke:#333
|
||||
style Bounce fill:#ef4444,color:#fff`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Das Plugin-Paradoxon: Jedes 'Feature' erhöht die Wahrscheinlichkeit
|
||||
eines Systemkollapses.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Die versteckten Kosten der "Gratis"-Features</H3>
|
||||
<Paragraph>
|
||||
Man sagt oft, WordPress-Plugins seien kostenlos. Das ist eine gefährliche
|
||||
Illusion.
|
||||
</Paragraph>
|
||||
<Paragraph>Die wahren Kosten entstehen bei der Wartung.</Paragraph>
|
||||
<Paragraph>
|
||||
In klassischen Agenturen zahlt ein Kunde meist hunderte Euro monatlich für
|
||||
"Updates installieren".
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>reaktives Hoffen statt proaktivem Engineering</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Echter, sauberer Code altert viel langsamer als zusammengeklickte
|
||||
Plugin-Konstrukte.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Technische und betriebswirtschaftliche Risiken</H2>
|
||||
<Paragraph>
|
||||
Aus meiner architektonischen Sicht gibt es drei kritische Hebel:
|
||||
</Paragraph>
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Die Sicherheitsfalle:</strong> Über 90 % der Angriffe auf
|
||||
WordPress erfolgen über unsichere Plugins. Jede Erweiterung vergrößert
|
||||
Ihre Angriffsfläche.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Die Performance-Erosion:</strong> Viele Plugins laden ihre
|
||||
Scripte global – auch wenn sie gar nicht gebraucht werden.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Die technologische Sackgasse:</strong> Je mehr Plugins Sie
|
||||
nutzen, desto schwerer wird ein Wechsel.{" "}
|
||||
<Marker>Datenhoheit beginnt bei der Codehoheit.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der architektonische Vergleich"
|
||||
negativeLabel="Plugin-Chaos"
|
||||
negativeText="Abhängigkeit von Unbekannten, instabile Update-Zyklen, massiver Performance-Leck"
|
||||
positiveLabel="Bespoke Architecture"
|
||||
positiveText="100 % eigene Codebasis, maximale Kontrolle, Performance als Kernmerkmal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Mein Weg: Präziser Code statt Blackbox-Plugins</H2>
|
||||
<Paragraph>
|
||||
Anstatt ein tonnenschweres Plugin für eine einfache Funktion zu
|
||||
installieren, schreibe ich Ihnen diese Funktion direkt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Ergebnis ist ein System, das exakt das tut, was Sie brauchen – und
|
||||
kein Byte mehr.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Kein Ballast, kein Sicherheitsrisiko, keine Abhängigkeit.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue keine digitalen Kartenhäuser, sondern{" "}
|
||||
<Marker>echte digitale Assets</Marker>, die für Profis arbeiten.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Wann ist dieser Premium-Ansatz für Sie richtig?</H2>
|
||||
<Paragraph>
|
||||
Ich arbeite für die Wenigen, die{" "}
|
||||
<Marker>technische Brillanz zum entscheidenden Marktvorteil</Marker>{" "}
|
||||
machen wollen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Planen Sie, Ihre Marke über Jahre stabil im Netz zu führen? Dann sind wir
|
||||
Partner.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Investieren Sie in Ihr Fundament</H2>
|
||||
<Paragraph>
|
||||
Plugins sind wie billige Anbauwände: Sie wirken im Katalog gut, aber nach
|
||||
dem ersten Umzug wackeln sie.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam eine Plattform schaffen, die Ihr Business auch in
|
||||
fünf Jahren noch zuverlässig trägt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>
|
||||
Qualität ist die einzige Abkürzung, die wirklich funktioniert.
|
||||
</Marker>
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
176
apps/web/src/components/blog/posts/Group2/CookieFreeDesign.tsx
Normal file
176
apps/web/src/components/blog/posts/Group2/CookieFreeDesign.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const CookieFreeDesign: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Ich halte Cookie-Banner für eine der größten Design-Sünden und
|
||||
Vertrauenskiller des modernen Webs.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Sie stören den Lesefluss und suggerieren eine Pseudo-Sicherheit.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Vor allem signalisieren sie eines: Ein mangelhaftes technisches Konzept.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, wie wir{" "}
|
||||
<Marker>vollständig ohne Banner auskommen</Marker> – bei 100 %
|
||||
DSGVO-Konformität.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Das Banner-Paradoxon: Warum wir uns das antun</H2>
|
||||
<Paragraph>
|
||||
Klassische Websites laden oft ungefragt Scripte von Drittanbietern – meist
|
||||
US-Konzerne.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Diese Tracker setzen Cookies, um Nutzer über verschiedene Seiten hinweg zu
|
||||
verfolgen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Ergebnis ist das tägliche Banner-Chaos, das den Inhalt überdeckt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Viele Besucher klicken frustriert auf "Alle akzeptieren" oder verlassen
|
||||
die Seite sofort wieder.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich verfolge eine radikal andere Philosophie:{" "}
|
||||
<Marker>
|
||||
Wenn wir keine Daten abfließen lassen, brauchen wir auch keine
|
||||
Erlaubnis.
|
||||
</Marker>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Es ist eine Frage der technischen Souveränität und des digitalen Anstands.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
User["Nutzer besucht Website"] --> Logic["Mintel Privacy Engine"]
|
||||
Logic --> Assets["Lokale Assets (Fonts/Scripts)"]
|
||||
Logic --> Analytics["Aggregierte, anonyme Metriken"]
|
||||
Assets --> NoBanner["Kein Cookie-Banner nötig"]
|
||||
Analytics --> NoBanner
|
||||
NoBanner --> Experience["Sofortige Experience & Vertrauen"]
|
||||
style NoBanner fill:#4ade80,stroke:#333
|
||||
style Experience fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Privacy by Design: Wenn die Architektur den Schutz bereits garantiert,
|
||||
entfallen die rechtlichen Krücken.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Die unsichtbare Transaktion des Vertrauens</H3>
|
||||
<Paragraph>
|
||||
Jedes Mal, wenn ein Nutzer Ihre Seite ohne Banner betreten kann, findet
|
||||
eine unsichtbare Transaktion statt: Vertrauensaufbau.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie signalisieren Ihrem Besucher: "Ich brauche deine persönlichen Daten
|
||||
nicht, um dich zu überzeugen."
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Privatsphäre ist heute ein <Marker>High-End Feature</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Systeme, die diesen Respekt technisch erzwingen und so die
|
||||
Markenbindung stärken.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wir verzichten konsequent auf invasive Tracker und gewinnen dafür loyale
|
||||
Nutzer.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Mein Weg zu 100 % technischer Souveränität</H2>
|
||||
<Paragraph>
|
||||
Privacy-first bedeutet für mich nicht Verzicht, sondern intelligenteres
|
||||
Engineering.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wir messen Ihren Erfolg – aber wir brauchen keine personenbezogenen
|
||||
Profile.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Full Local Hosting:</strong> Google Fonts und sämtliche Scripte
|
||||
liegen direkt auf Ihrer Infrastruktur. Kein Datentransfer zu US-Servern.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Ethische Telemetrie:</strong> Analysetools, die Nutzerwege
|
||||
messen, ohne Cookies zu setzen.{" "}
|
||||
<Marker>Volle Transparenz, ohne Verfolgung.</Marker>
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Zero-Tracking Default:</strong> Mein Framework ist so ausgelegt,
|
||||
dass "Consent-Einforderung" technisch gar nicht notwendig wird.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Nutzererfahrung im harten Fakten-Check"
|
||||
negativeLabel="Tracking-fokussierte Seite"
|
||||
negativeText="Banner-Dschungel, rechtliche Grauzonen, Performance-Verlust durch Tracker"
|
||||
positiveLabel="Cookie-Free Architecture"
|
||||
positiveText="Direkter Zugang zum Content, 100 % DSGVO-Safe, Premium-Look & Feel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Der ökonomische Vorteil von 'Banner-Freiheit'</H2>
|
||||
<Paragraph>
|
||||
Consent-Management-Tools verschlechtern oft selbst die Ladezeit Ihrer
|
||||
Website.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie laden schwere JavaScript-Dateien, noch bevor Ihre Botschaft erscheint.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Indem wir diese Tools eliminieren, verbessern wir die UX und Ihre
|
||||
PageSpeed-Werte.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Zudem vermeiden Sie Abo-Kosten und das Risiko von Abmahnungen durch
|
||||
falsche Skripte.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ein <Marker>sauberes System ist wartungsarm und rechtssicher</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Wann macht dieser radikale Ansatz für Sie Sinn?</H2>
|
||||
<Paragraph>
|
||||
Ich verstehe mich als Partner für Marken, die Haltung zeigen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Datenschutz für Sie ein echtes Qualitätsmerkmal ist, ist dies mein
|
||||
absoluter Standard.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich arbeite für Unternehmen, die{" "}
|
||||
<Marker>durch Überzeugung und Relevanz</Marker> verkaufen, nicht durch
|
||||
Verfolgung.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Befreien Sie Ihre Inhalte</H2>
|
||||
<Paragraph>
|
||||
Eine Website ohne Banner wirkt sofort aufgeräumter, ehrlicher und
|
||||
wertiger.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Es ist ein klares Statement für digitale Professionalität und Respekt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Ihnen die Brücke in eine{" "}
|
||||
<Marker>bannerfreie, souveräne Zukunft</Marker>.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
178
apps/web/src/components/blog/posts/Group2/GDPRSystem.tsx
Normal file
178
apps/web/src/components/blog/posts/Group2/GDPRSystem.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const GDPRSystem: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
DSGVO-Konformität wird oft als lästiges bürokratisches Hindernis
|
||||
wahrgenommen.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit sehe ich sie jedoch als{" "}
|
||||
<Marker>das ultimative Qualitätsmerkmal für sauberes Engineering</Marker>.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ein System, das Daten schützt, ist ein gesundes System.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, wie ich Datenschutz architektonisch löse, statt ihn nur
|
||||
mit Bannern zu "flicken".
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Gegen das Abmahnrisiko – mit Systemarchitektur</H2>
|
||||
<Paragraph>
|
||||
Die meisten versuchen, die Anforderungen durch rechtliche Dokumente und
|
||||
nachträglich installierte Banner zu lösen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist so, als würde man ein brennendes Haus mit einer neuen
|
||||
Versicherungspolice löschen wollen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Es schafft eine Schein-Sicherheit, bekämpft aber nicht die Ursache des
|
||||
Risikos.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Datenschutz muss bereits in der DNA des Codes verankert sein (Privacy by
|
||||
Design).
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn ein System keine unnötigen Daten sammelt,{" "}
|
||||
<Marker>verschwinden die Einfallstore für Probleme von selbst</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>Wahre Compliance ist technisch erzwungen.</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Collection["Frontend Datenerhebung"] --> Minimize["Strikte Datenminimierung (SSO)"]
|
||||
Minimize --> Encrypt["End-to-End Verschlüsselung (TLS 1.3)"]
|
||||
Encrypt --> Access["Rollenbasierte Zugriffskontrolle (RBAC)"]
|
||||
Access --> Audit["Automatisches Compliance-Logging"]
|
||||
Audit --> Safe["Rechtssicheres & Robustes System"]
|
||||
style Safe fill:#4ade80,stroke:#333
|
||||
style Minimize fill:#4ade80,stroke:#333
|
||||
style Encrypt fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Der Kreislauf der systemischen Sicherheit: Jede Stufe schützt Ihre
|
||||
Daten, Ihren Ruf und Ihren langfristigen Business-Value.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Die ökonomische Logik des Datenschutz-Management</H3>
|
||||
<Paragraph>
|
||||
Wussten Sie, dass unsaubere Datensparsamkeit ein echtes finanzielles
|
||||
Risiko darstellt?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Daten, die Sie nicht besitzen, können nicht gestohlen werden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich helfe Ihnen, Ihre Prozesse so zu verschlanken, dass nur das{" "}
|
||||
<Marker>geschäftskritische Minimum</Marker> fließt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Dies spart Speicher- und Rechenkapazitäten und reduziert Haftungsrisiken
|
||||
massiv.
|
||||
</Paragraph>
|
||||
<Paragraph>Ein schlankes Datensystem ist ein agiles System.</Paragraph>
|
||||
<Paragraph>
|
||||
Compliance ist kein Kostenfaktor, sondern eine Versicherung für Ihre
|
||||
digitale Zukunft.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Mein Prinzip: Privacy by Infrastructure</H2>
|
||||
<Paragraph>
|
||||
Ich betrachte Datenschutz nicht als Text auf der Unterseite "Impressum",
|
||||
sondern als Eigenschaft der Infrastruktur.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Mein Ziel ist ein System, bei dem die Einhaltung der Regeln{" "}
|
||||
<Marker>technisch unvermeidbar</Marker> ist.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Echtzeit-Anonymisierung:</strong> Logfiles und IPs werden am
|
||||
Punkt des Eingangs anonymisiert. Was technisch unkenntlich ist, fällt
|
||||
nicht unter die DSGVO-Strenge.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Geschlossene Datenkreisläufe:</strong> Wir vermeiden
|
||||
Blackbox-Server von Drittanbietern. Jedes Formular nutzt dedizierte
|
||||
Kanäle.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Compliance-as-Code:</strong> Automatisierte Tests prüfen bei
|
||||
jeder Änderung, ob neue Abhängigkeiten Ihre Richtlinien gefährden.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Zwei Ansätze der digitalen Compliance"
|
||||
negativeLabel="Reaktive Notlösung"
|
||||
negativeText="Nachträgliche Banner-Hacks, unsichere US-Dienste, permanente Angst vor der nächsten Abmahnwelle"
|
||||
positiveLabel="Proaktives Mintel Engineering"
|
||||
positiveText="Technisch verankerter Schutz, volle Datenhoheit, absolute rechtliche Sorgenfreiheit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Vertrauen als härteste Währung am Markt</H2>
|
||||
<Paragraph>
|
||||
Nutzer und Kunden sind heute sensibilisierter als jemals zuvor.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Eine Website, die respektvoll und ohne Banner-Nötigung mit Daten umgeht,
|
||||
schafft sofortiges Vertrauen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
In einer Welt voller "Dark Patterns" ist Transparenz Ihr stärkstes
|
||||
Verkaufsargument.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schaffe <Marker>souveräne digitale Räume</Marker>, die für Ihre Marke
|
||||
und Ihre Werte sprechen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ein sauberes DSGVO-Konzept ist ein Investment in die Reputation Ihres
|
||||
Unternehmens.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Für wen ich 'Sicherheits-Festungen' baue</H2>
|
||||
<Paragraph>
|
||||
Mein architektonischer Ansatz ist ideal für Unternehmen in regulierten
|
||||
Branchen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Begreifen Sie{" "}
|
||||
<Marker>technische Exzellenz als Teil Ihrer Verantwortung</Marker>? Dann
|
||||
sind wir Partner.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich werde aktiv, wenn Sicherheit für Sie nicht verhandelbar ist.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Souveränität durch saubere Technik</H2>
|
||||
<Paragraph>
|
||||
Schaffen wir die Angst vor rechtlichen Fehltritten ab.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Ihnen ein System, das durch seine innere Ordnung besticht und den
|
||||
Schutz technically garantiert.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen Sie uns Ihre digitale Basis für die{" "}
|
||||
<Marker>nächste Stufe der Professionalität</Marker> gemeinsam gießen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Seriosität ist planbar.</Marker>
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
161
apps/web/src/components/blog/posts/Group2/LocalCloud.tsx
Normal file
161
apps/web/src/components/blog/posts/Group2/LocalCloud.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const LocalCloud: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
"Die Daten liegen sicher in der Cloud." – Dieser Satz ist heute oft eine
|
||||
gefährliche Halbwahrheit.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit als Digital Architect begegne ich unzähligen Unternehmen,
|
||||
die die Kontrolle über ihre wichtigsten Assets verloren haben.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Sie sind abhängig von US-Infrastrukturen und rechtlichen Grauzonen.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, warum <Marker>lokale Datenhoheit</Marker> der wahre Hebel
|
||||
für Sicherheit und Geschwindigkeit ist.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Das Märchen von der sorglosen US-Cloud</H2>
|
||||
<Paragraph>Die großen Hyper-Scaler bieten Bequemlichkeit.</Paragraph>
|
||||
<Paragraph>
|
||||
Doch diese Bequemlichkeit hat einen Preis: Ihre Souveränität.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Durch Gesetze wie den Cloud Act können US-Behörden theoretisch Zugriff auf
|
||||
Daten verlangen, die auf US-Servern liegen – völlig egal, wo diese
|
||||
physisch stehen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Für europäische Unternehmen mit sensiblen Kunden- oder Prozessdaten ist
|
||||
das ein <Marker>untragbares strategisches Risiko</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wer seine Datenhoheit aufgibt, macht sein Business erpressbar.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Data["Ihre geschäftskritischen Daten"] --> Hosting["Strategische Hosting-Wahl"]
|
||||
Hosting --> US["US Hyper-Scaler (Abhängigkeit)"]
|
||||
Hosting --> Local["European Local Cloud (Souveränität)"]
|
||||
US --> Risk["Rechtliche Unsicherheit & Cloud Act"]
|
||||
Local --> Compliance["DSGVO-Safe & Daten-Immunität"]
|
||||
Compliance --> Speed["Niedrige Latenz & Absolute Kontrolle"]
|
||||
style Local fill:#4ade80,stroke:#333
|
||||
style Risk fill:#fca5a5,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Architektonische Entscheidung: Geopolitische Risiken minimieren durch
|
||||
bewusste Standort-Wahl.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Technologie ist niemals neutral</H3>
|
||||
<Paragraph>
|
||||
Hinter jedem Server steht eine politische und rechtliche Realität.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Indem wir auf spezialisierte europäische Infrastrukturen setzen, gewinnen
|
||||
wir Immunität gegen fremde Gesetzgebungen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>digitaler Selbstschutz</Marker> auf höchstem Niveau.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Gleichzeitig profitieren wir von extrem niedrigen Latenzen und einer
|
||||
Performance, die US-Systeme oft nicht liefern können.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Nähe zum Kunden bedeutet hier auch messbare Geschwindigkeit.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Mein Ansatz: Die "High-Fidelity" Infrastruktur</H2>
|
||||
<Paragraph>
|
||||
Ich baue Systeme, die nicht nur technisch brillant, sondern auch
|
||||
strategisch unangreifbar sind.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lokalität ist bei mir kein Rückschritt, sondern{" "}
|
||||
<Marker>Premium-Protection</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Physische Souveränität:</strong> Wir nutzen Rechenzentren unter
|
||||
europäischem Recht. Ihre Daten verlassen niemals diesen Rechtsraum.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Entkoppelte Dienste:</strong> Ich vermeide proprietäre
|
||||
US-Schnittstellen. Wir nutzen offene Standards für maximale
|
||||
Architektur-Freiheit.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Sovereign Operations:</strong> Wir kontrollieren jeden Layer –
|
||||
vom OS bis zur Applikation.{" "}
|
||||
<Marker>Keine Blackboxes, keine Hintertüren.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der strategische Impact Ihrer Standortwahl"
|
||||
negativeLabel="Standard US-Hosting"
|
||||
negativeText="Rechtliche Unsicherheit, Datenexport-Risiken, schleichende Abhängigkeit"
|
||||
positiveLabel="European Local Cloud"
|
||||
positiveText="Volle Compliance, geopolitische Sicherheit, maximale Geschwindigkeit vor Ort"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Souveränität als Wettbewerbsvorteil</H2>
|
||||
<Paragraph>
|
||||
In einer Welt, die immer instabiler wird, ist "Daten-Sicherheit am
|
||||
Standort" ein echtes Verkaufsargument.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Zeigen Sie Ihren Kunden, dass Sie ihre Informationen ernst nehmen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wer heute proaktiv auf <Marker>lokale Cloud-Lösungen</Marker> setzt, spart
|
||||
sich morgen teure und hektische Migrationswellen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schaffe Ihnen ein digitales Fundament, das politisch und rechtlich
|
||||
stabil steht.
|
||||
</Paragraph>
|
||||
<Paragraph>Investieren Sie in Immunität, nicht in Abhängigkeit.</Paragraph>
|
||||
|
||||
<H2>Wann macht lokale Exzellenz für Sie Sinn?</H2>
|
||||
<Paragraph>
|
||||
Suchen Sie nach maximaler Unabhängigkeit von globalen Playern?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich bin der richtige Partner für Unternehmen, die{" "}
|
||||
<Marker>eigene digitale Assets als Kern ihres Erfolgs</Marker> begreifen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Für Projekte "ohne Anspruch" gibt es Massenangebote. Ich baue für die, die
|
||||
keine Kompromisse machen.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Ihr Business, Ihre Regeln</H2>
|
||||
<Paragraph>Holen Sie sich die Kontrolle über Ihre Daten zurück.</Paragraph>
|
||||
<Paragraph>
|
||||
Ich begleite Sie beim Aufbau einer Architektur, die so unabhängig ist wie
|
||||
Ihre unternehmerische Vision.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir Ihre Daten dort, wo sie sicher sind:{" "}
|
||||
<Marker>In Ihrem Einflussbereich.</Marker>
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
155
apps/web/src/components/blog/posts/Group2/PrivacyAnalytics.tsx
Normal file
155
apps/web/src/components/blog/posts/Group2/PrivacyAnalytics.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const PrivacyAnalytics: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
"Ich brauche Google Analytics, um zu wissen, was meine Nutzer tun." – Das
|
||||
ist eine weit verbreitete Fehlannahme.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner täglichen Arbeit als Digital Architect beweise ich das
|
||||
Gegenteil:{" "}
|
||||
<Marker>Maximale Erkenntnis erfordert keine maximale Überwachung.</Marker>
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, wie wir Erfolg präzise messen, ohne die Privatsphäre
|
||||
Ihrer Kunden an US-Konzerne zu verkaufen.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Analytics ohne den Beigeschmack der Überwachung</H2>
|
||||
<Paragraph>
|
||||
Klassische Analytics-Tools funktionieren wie ein Trojaner.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie sammeln riesige Mengen an persönlichen Daten, um daraus Profile zu
|
||||
bilden, die weit über Ihre Website hinausgehen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Dies zwingt Sie rechtlich in die Knie – Sie brauchen Banner, Consent-Tools
|
||||
und riskieren Abmahnungen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Paradoxon:{" "}
|
||||
<Marker>Die meisten dieser Daten brauchen Sie gar nicht.</Marker>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie wollen wissen, welche Inhalte funktionieren, nicht wie der Nutzer in
|
||||
seiner Freizeit heißt.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph LR
|
||||
Traffic["Besucherstrom"] --> Filter["Privacy-Proxy"]
|
||||
Filter --> Metrics["Aggregate Metriken (Trends)"]
|
||||
Filter --> Zero["Zero PII (No Personal Info)"]
|
||||
Metrics --> Insights["Optimierung Ihres Business"]
|
||||
Zero --> Compliance["100% DSGVO & Banner-Frei"]
|
||||
style Insights fill:#4ade80,stroke:#333
|
||||
style Compliance fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Ethisches Tracking: Wir gewinnen wertvolle Business-Insights, während
|
||||
die Identität der Nutzer absolut geschützt bleibt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Qualität der Daten vor Quantität der Profile</H3>
|
||||
<Paragraph>
|
||||
Mein Ansatz basiert auf aggregierten Trends statt auf individueller
|
||||
Verfolgung.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wir messen Seitenaufrufe, Verweildauer und Conversions – aber wir tun es{" "}
|
||||
<Marker>anonym und am Edge</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Ergebnis ist statistisch genauso wertvoll für Ihr Marketing, aber
|
||||
moralisch und rechtlich weit überlegen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wahre Souveränität bedeutet, Insights zu generieren, ohne sich von
|
||||
GA4-Komplexität abhängig zu machen.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Meine Architektur für ethische Insights</H2>
|
||||
<Paragraph>Ich integriere Analytics direkt in Ihre Plattform.</Paragraph>
|
||||
<Paragraph>
|
||||
Keine externen Scripte bedeutet auch: Mehr Performance für Ihre Nutzer.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Cookieless Tracking:</strong> Wir erkennen wiederkehrende Nutzer
|
||||
über kurzlebige, anonyme Hashes. Keine Speicherung am Endgerät nötig.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>First-Party Data:</strong> Die Daten bleiben auf Ihrem Server.
|
||||
Kein Abfluss an Drittanbieter-Netzwerke zur Werbeoptimierung.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Lightweight Implementation:</strong> Statt 100KB
|
||||
Analytics-Ballast nutzen wir Lösungen, die weniger als 1KB wiegen.{" "}
|
||||
<Marker>Geschwindigkeit trifft auf Erkenntnis.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der strategische Vergleich im Lead-Tracking"
|
||||
negativeLabel="Google Analytics / GA4"
|
||||
negativeText="Abhängigkeit von Consent-Raten, Daten-Leakage, komplexe & träge Interfaces"
|
||||
positiveLabel="Mintel Privacy Analytics"
|
||||
positiveText="Volle Lead-Transparenz, Banner-Freiheit, blitzschnelle Auswertung"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Der unternehmerische Hebel: Banner-freie Leads</H2>
|
||||
<Paragraph>
|
||||
Wenn Sie kein Banner brauchen, messen Sie 100 % Ihres Traffics.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Bei Google Analytics verlieren Sie oft 40-60 % der Daten, weil Nutzer den
|
||||
Consent ablehnen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Mein System liefert Ihnen <Marker>die echten Zahlen</Marker>, weil die
|
||||
Hürde der Zustimmung technisch entfällt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ehrlichkeit zahlt sich hier direkt in der Genauigkeit Ihrer
|
||||
Marketing-Planung aus.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Gute Entscheidungen brauchen ein solides Fundament – keine lückenhaften
|
||||
Statistiken.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Wann sollten Sie umstellen?</H2>
|
||||
<Paragraph>Haben Sie genug von rechtlichen Grauzonen?</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue für Entscheider, die{" "}
|
||||
<Marker>Datenschutz als Teil ihres Markenversprechens</Marker> begreifen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen Sie uns Analytics von einer Last zu einer Stärke machen.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Wissen ist Macht, Respekt ist Zukunft</H2>
|
||||
<Paragraph>Messen Sie, was zählt – und schützen Sie, wer zählt.</Paragraph>
|
||||
<Paragraph>
|
||||
Ich begleite Sie bei der Installation einer Lösung, die Professionalität
|
||||
und Ethik brillant vereint.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Insights ohne Reue.</Marker> Das ist modernes digitales
|
||||
Management.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
157
apps/web/src/components/blog/posts/Group2/VendorLockIn.tsx
Normal file
157
apps/web/src/components/blog/posts/Group2/VendorLockIn.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const VendorLockIn: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
"Wir können nicht wechseln, das wäre zu teuer."
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit als Digital Architect ist das der Anfang vom Ende jeder
|
||||
technologischen Innovation.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Vendor Lock-In ist die <Marker>digitale Version einer Geiselnahme</Marker>
|
||||
.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, wie wir Systeme bauen, die Ihnen jederzeit die volle
|
||||
Freiheit lassen – technologisch und wirtschaftlich.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Die unsichtbaren Ketten proprietärer Systeme</H2>
|
||||
<Paragraph>
|
||||
Viele Unternehmen lassen sich von der Bequemlichkeit großer
|
||||
SaaS-Plattformen oder Baukästen blenden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Man bekommt ein schnelles Feature, gibt aber dafür die Kontrolle über
|
||||
seine Daten und seine Codebasis ab.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Nach zwei Jahren sind Sie so tief im Ökosystem eines Anbieters verstrickt,
|
||||
dass ein Auszug unmöglich scheint.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Der Anbieter weiß das – und diktiert fortan die Preise und das Tempo Ihrer
|
||||
Entwicklung.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich nenne das <Marker>technologische Erpressbarkeit</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wahre Unabhängigkeit beginnt bei der strategischen Wahl der Architektur.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Prop["Proprietäre Blackbox"] --> Lock["Steigende Kosten & Starre Features"]
|
||||
Open["Open-Source-Kern & Offene Standards"] --> Flex["Volle Kontrolle & Anbieter-Freiheit"]
|
||||
Lock --> Crisis["Digitale Sackgasse"]
|
||||
Flex --> Evolution["Permanente Innovation"]
|
||||
style Open fill:#4ade80,stroke:#333
|
||||
style Crisis fill:#fca5a5,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Die Gabelung der digitalen Strategie: Wählen Sie Freiheit durch
|
||||
Architektur, statt Komfort durch Abhängigkeit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Technologische Souveränität als Asset</H3>
|
||||
<Paragraph>Software sollte für Sie arbeiten, nicht umgekehrt.</Paragraph>
|
||||
<Paragraph>
|
||||
Indem wir auf offene Standards und portable Architekturen setzen,
|
||||
verwandeln wir Code in ein echtes Firmen-Asset.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie können den Cloud-Anbieter wechseln, die Agentur tauschen oder das Team
|
||||
skalieren – <Marker>ohne jemals bei Null anfangen zu müssen</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>Das ist das Privileg der technologischen Elite.</Paragraph>
|
||||
<Paragraph>
|
||||
Portabilität ist kein technisches Gimmick, sondern eine unternehmerische
|
||||
Notwendigkeit.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Meine Architektur der Ungebundenheit</H2>
|
||||
<Paragraph>Ich baue keine "Käfige" aus fertigen Plugins.</Paragraph>
|
||||
<Paragraph>Mein Framework basiert auf Modularität und Klarheit.</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Standard-basiertes Engineering:</strong> Wir nutzen
|
||||
Technologien, die weltweit verstanden werden. Keine geheimen
|
||||
"Spezial-Module" eines einzelnen Anbieters.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Daten-Portabilität:</strong> Ihre Daten gehören Ihnen. Zu jeder
|
||||
Zeit. Wir bauen Schnittstellen, die den Export so einfach machen wie den
|
||||
Import.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Cloud-agnostisches Hosting:</strong> Wir nutzen
|
||||
Container-Technologie. Ob AWS, Azure oder lokale Anbieter –{" "}
|
||||
<Marker>Ihr Code läuft überall gleich perfekt.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der ökonomische Vergleich Ihrer Unabhängigkeit"
|
||||
negativeLabel="Closed Ecosystem (Walled Garden)"
|
||||
negativeText="Diktierte Preise, starre Roadmap des Anbieters, Datenverlust bei Wechsel"
|
||||
positiveLabel="Bespoke Open-Core System"
|
||||
positiveText="Totale Preis-Kontrolle, unbegrenzte Features, volle Exit-Option ab Tag 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Der strategische Hebel für langfristige Rendite</H2>
|
||||
<Paragraph>Systeme ohne Lock-In altern besser.</Paragraph>
|
||||
<Paragraph>
|
||||
Sie lassen sich schrittweise modernisieren, statt alle fünf Jahre komplett
|
||||
neu gebaut werden zu müssen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das spart Millionen an Opportunitätskosten und Fehl-Investitionen.
|
||||
</Paragraph>
|
||||
<Paragraph>Seien Sie der Herr über Ihr digitales Schicksal.</Paragraph>
|
||||
<Paragraph>
|
||||
Investieren Sie in <Marker>intelligente Unabhängigkeit</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Für wen ich 'Freiheits-Systeme' erstelle</H2>
|
||||
<Paragraph>
|
||||
Ich arbeite für Gründer, die ihr Unternehmen langfristig wertvoll
|
||||
aufstellen wollen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ist digitale Exzellenz Teil Ihrer Exit-Strategie oder Ihres Erbes? Dann
|
||||
brauchen Sie meine Architektur.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue keine Provisorien, sondern <Marker>nachhaltige Werte</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Freiheit ist eine Wahl</H2>
|
||||
<Paragraph>
|
||||
Technologie sollte Ihnen Flügel verleihen, keine Fesseln anlegen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen Sie uns gemeinsam ein System schaffen, das so flexibel ist wie Ihr
|
||||
Business.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>
|
||||
Werden Sie unersetzbar durch Qualität, nicht durch Abhängigkeit.
|
||||
</Marker>{" "}
|
||||
Ihr Erfolg verdient absolute Freiheit.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
179
apps/web/src/components/blog/posts/Group3/BuildFirst.tsx
Normal file
179
apps/web/src/components/blog/posts/Group3/BuildFirst.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const BuildFirst: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
"Gekauft ist schneller als gebaut." – In der digitalen Welt ist das oft
|
||||
der teuerste Irrtum, den ein Unternehmen begehen kann.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit als Digital Architect sehe ich täglich, wie
|
||||
Standard-SaaS-Lösungen Innovationen im Keim ersticken.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Sie bezahlen für Features, die Sie nicht brauchen, während Ihnen die
|
||||
entscheidenden 5 % fehlen.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, warum <Marker>Bauen die neue Form der Effizienz</Marker>{" "}
|
||||
ist und wie Sie sich echte Marktvorteile sichern.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Die Sackgasse der Generic-Software</H2>
|
||||
<Paragraph>
|
||||
Standard-Software ist darauf ausgelegt, dem kleinsten gemeinsamen Nenner
|
||||
zu gefallen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Man bekommt ein schnelles Resultat, läuft aber sofort gegen eine Wand,
|
||||
wenn man Prozesse wirklich optimieren will.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ihre Wettbewerber nutzen wahrscheinlich exakt die gleiche Software wie
|
||||
Sie.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wo bleibt da der <Marker>technologische Vorsprung</Marker>?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wer nur mietet, wird niemals Marktführer. Wahre Überlegenheit entsteht
|
||||
durch maßgeschneiderte Systeme.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Need["Individuelles Business-Bedürfnis"] --> Path["Strategische Entscheidung"]
|
||||
Path --> Buy["Software-Abo (SaaS)"]
|
||||
Path --> Build["Bespoke Architecture (Mintel)"]
|
||||
Buy --> Compromise["Kompromisse & Monatliche Fixkosten"]
|
||||
Build --> Competitive["Wettbewerbsvorteil & Unendliche Freiheit"]
|
||||
Compromise --> Stagnation["Digitaler Stillstand"]
|
||||
Competitive --> Growth["Skalierung ohne Grenzen"]
|
||||
style Build fill:#4ade80,stroke:#333
|
||||
style Growth fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Build vs. Buy: Investieren Sie in Ihr eigenes geistiges Eigentum statt
|
||||
in die monatliche Miete von Fremdprodukten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Bauen bedeutet heute: Strategisches Kombinieren</H3>
|
||||
<Paragraph>
|
||||
"Bauen" heißt heute nicht mehr, jedes Rad neu zu erfinden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich nutze moderne Frameworks und spezialisierte Microservices, um Ihr
|
||||
individuelles System zu komponieren.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Ergebnis ist so flexibel wie eine Eigenentwicklung, aber so schnell
|
||||
einsatzbereit wie ein Standardprodukt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Dabei besitzen Sie den Code und kontrollieren die Roadmap.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>digitale Handwerkskunst am Puls der Zeit</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Der wirtschaftliche Case von 'Build-First'</H2>
|
||||
<Paragraph>
|
||||
Die initialen Kosten für Individualsoftware wirken oft höher als eine
|
||||
monatliche Lizenzgebühr.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Doch bei SaaS-Modellen steigen die Kosten linear mit Ihrem Wachstum.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Maßgeschneiderte Software amortisiert sich oft nach 12-18 Monaten – durch
|
||||
wegfallende Lizenzen und massiv gesteigerte Effizienz.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie investieren in ein <Marker>Firmen-Asset</Marker>, das den Wert Ihres
|
||||
Unternehmens steigert.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Software-Miete ist ein Kostenblock, Software-Bau ist eine Investition.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Exakter Prozess-Match:</strong> Das System passt sich Ihren
|
||||
Abläufen an, nicht umgekehrt. Keine unnötigen Klicks mehr.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Skalierung nach Ihren Regeln:</strong> Keine künstlichen Limits
|
||||
durch Nutzerzahlen oder Datenvolumen.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Sicherheits-Vorsprung:</strong> Ihr System ist kein Ziel für
|
||||
Massen-Exploits, die Standard-Systeme täglich bedrohen.{" "}
|
||||
<Marker>Individualität ist Schutz.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der Impact auf Ihr unternehmerisches Wachstum"
|
||||
negativeLabel="Software as a Service (SaaS)"
|
||||
negativeText="Abhängigkeit von Anbieter-Preisen, starre Features, kein Kapitalwertaufbau"
|
||||
positiveLabel="Bespoke Asset (Mintel)"
|
||||
positiveText="0 € Lizenzkosten, unbegrenzte Features, Steigerung des Firmenwerts"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Digitales Eigentum als strategischer Hebel</H2>
|
||||
<Paragraph>
|
||||
Wer den Code besitzt, besitzt die Zukunft seines Unternehmens.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie jemals an einen Exit oder eine Fusion denken, ist technische
|
||||
Unabhängigkeit ein entscheidender Faktor.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schaffe Ihnen eine Architektur, die{" "}
|
||||
<Marker>frei von technologischen Altlasten</Marker> ist.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Bauen wir Systeme, die so einzigartig sind wie Ihre Vision.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Für wen ich 'Unikate' erschaffe</H2>
|
||||
<Paragraph>
|
||||
Ich bin der Architekt für Gründer, die keine Lust mehr auf "geht technisch
|
||||
leider nicht" haben.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ist Ihr Business-Modell am Markt einzigartig? Dann sollte es Ihre Software
|
||||
auch sein.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich steige dort ein, wo{" "}
|
||||
<Marker>technische Brillanz zur strategischen Waffe</Marker> wird.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Hören Sie auf zu mieten, fangen Sie an zu bauen</H2>
|
||||
<Paragraph>
|
||||
Wahrer Reichtum im Digitalen entsteht durch Eigentum und Souveränität.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam ein System erschaffen, das genau so hart arbeitet wie
|
||||
Sie.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>
|
||||
Qualität ist kein Zufallsprodukt, sondern eine bewusste Entscheidung für
|
||||
den Bau.
|
||||
</Marker>{" "}
|
||||
Ihr Erfolg verdient ein Original.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
167
apps/web/src/components/blog/posts/Group3/FixedPrice.tsx
Normal file
167
apps/web/src/components/blog/posts/Group3/FixedPrice.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const FixedPrice: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Sicherheitsdenken ist tief in der menschlichen Natur verwurzelt.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Am Ende eines Projekts wollen wir wissen, worauf wir uns eingelassen haben
|
||||
– finanziell und zeitlich.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit als Digital Architect baue ich{" "}
|
||||
<Marker>Sicherheit durch Transparenz</Marker>.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, warum ein intelligenter Festpreis der fairste Weg zu
|
||||
exzellenten Ergebnissen ist.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Die Falle der unendlichen Stunden</H2>
|
||||
<Paragraph>
|
||||
In der klassischen Softwareentwicklung ist Abrechnung nach Stunden (Time &
|
||||
Material) der Standard.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Doch das setzt einen völlig falschen Anreiz: Je länger ein Entwickler
|
||||
braucht, desto mehr verdient er.
|
||||
</Paragraph>
|
||||
<Paragraph>Effizienz wird ökonomisch bestraft.</Paragraph>
|
||||
<Paragraph>
|
||||
Ich hingegen habe mein gesamtes Business auf Geschwindigkeit und Klarheit
|
||||
optimiert.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Mit einem Festpreis drehen wir den Spieß um:{" "}
|
||||
<Marker>Mein Anreiz ist Ihre schnellstmögliche Zufriedenheit.</Marker>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
So entsteht echte Partnerschaft statt eines Interessenkonflikts.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph LR
|
||||
Goal["Ihr Projektziel"] --> Model["Wirtschaftliches Modell"]
|
||||
Model --> TnM["Abrechnung nach Stunden"]
|
||||
Model --> Fixed["Strategischer Festpreis (Mintel)"]
|
||||
TnM --> Risk["Uferlose Kosten & Zeitdruck"]
|
||||
Fixed --> Safety["Kalkulations-Sicherheit & Fokus"]
|
||||
Safety --> Quality["Maximale Qualität durch Effizienz"]
|
||||
style Fixed fill:#4ade80,stroke:#333
|
||||
style Quality fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Das Modell des Vertrauens: Fixe Budgets schaffen den Raum für
|
||||
kompromisslose inhaltliche Qualität.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Planung ist das halbe Fundament</H3>
|
||||
<Paragraph>
|
||||
Ein Festpreis funktioniert nur, wenn die Vision klar ist.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Deshalb investiere ich zu Beginn massiv Zeit in die Analyse und das
|
||||
"Blueprint-Design".
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn wir das Fundament präzise geplant haben, gibt es im Bauprozess keine
|
||||
bösen Überraschungen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>digitales Engineering mit norddeutscher Klarheit</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie bezahlen nicht für mein Ausprobieren, sondern für die punktgenaue
|
||||
Umsetzung meiner Erfahrung.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Warum meine Kalkulation hält</H2>
|
||||
<Paragraph>Ich arbeite nicht mit Schätzungen, sondern mit Daten.</Paragraph>
|
||||
<Paragraph>
|
||||
Durch meine automatisierte Toolchain weiß ich exakt, wie lange bestimmte
|
||||
Architekturschritte dauern.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Integrierte Risiko-Abdeckung:</strong> Unvorhergesehenes ist in
|
||||
meinem Preis bereits einkalkuliert. Sie tragen kein finanzielles Risiko.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Klare Deliverables:</strong> Wir definieren präzise
|
||||
Meilensteine. Sie wissen zu jedem Zeitpunkt, was Sie für Ihr Investment
|
||||
erhalten.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>0 % Budget-Overrun:</strong> Mein Wort gilt.{" "}
|
||||
<Marker>
|
||||
Zusatzkosten entstehen nur, wenn Sie den Scope aktiv erweitern.
|
||||
</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der ökonomische Vergleich Ihrer Projektsicherheit"
|
||||
negativeLabel="Schätzpreis nach Stunden"
|
||||
negativeText="Kosten-Explosion möglich, fehlender Anreiz zur schnellen Fertigstellung"
|
||||
positiveLabel="Strategischer Festpreis"
|
||||
positiveText="Absolute Budgetsicherheit, Fokus auf Pure Output, maximale Effizienz"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Ihr Investment in Sicherheit</H2>
|
||||
<Paragraph>Ein Festpreis befreit den Kopf.</Paragraph>
|
||||
<Paragraph>
|
||||
Statt bei jedem Meeting die Uhr hämmern zu hören, konzentrieren wir uns
|
||||
auf das Wesentliche: Ihren Markterfolg.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das schafft eine Atmosphäre von{" "}
|
||||
<Marker>Kreativität und technologischem Mut</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wer keine Angst vor dem Budget hat, baut die besseren Lösungen.
|
||||
</Paragraph>
|
||||
<Paragraph>Ich schaffe Ihnen den Rahmen für diese Exzellenz.</Paragraph>
|
||||
|
||||
<H2>Wann ist ein Festpreis der richtige Weg?</H2>
|
||||
<Paragraph>
|
||||
Mein Modell ist ideal für Entscheider, die unternehmerische Verantwortung
|
||||
für Budgets tragen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ist Ihnen ein{" "}
|
||||
<Marker>planbares Ergebnis wichtiger als vage Hoffnungen</Marker>? Dann
|
||||
passen wir zusammen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich arbeite für die Profis, die Qualität zum festen Preis wertschätzen.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Klarheit ist kein Luxus</H2>
|
||||
<Paragraph>
|
||||
Lassen wir das Rätselraten bei der Preisgestaltung hinter uns.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich biete Ihnen eine Zusammenarbeit auf Augenhöhe, bei der das Ergebnis im
|
||||
Mittelpunkt steht.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen Sie uns gemeinsam Ihr Projekt auf ein{" "}
|
||||
<Marker>solides finanzielles Fundament</Marker> stellen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Pünktlich. Präzise. Zum vereinbarten Preis.</Marker>
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
161
apps/web/src/components/blog/posts/Group3/GreenIT.tsx
Normal file
161
apps/web/src/components/blog/posts/Group3/GreenIT.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const GreenIT: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Das Internet verbraucht mehr Energie als der weltweite Flugverkehr.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Rolle als Digital Architect sehe ich Nachhaltigkeit nicht als
|
||||
"Nice-to-Have", sondern als Ausdruck technischer Reife.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Effizienter Code ist grüner Code.{" "}
|
||||
<Marker>
|
||||
Schlanke Systeme sparen nicht nur CO2, sondern auch bares Geld.
|
||||
</Marker>
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, warum ökologische Verantwortung und ökonomische
|
||||
Profitabilität Hand in Hand gehen.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Der ökologische Fußabdruck von schlechtem Code</H2>
|
||||
<Paragraph>
|
||||
Jedes unnötige Kilobyte, das durch das Netz geschickt wird, frisst Strom –
|
||||
im Rechenzentrum, in den Leitungen und am Endgerät des Nutzers.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Viele moderne Websites sind heute "Adipös". Sie schleppen Megabytes an
|
||||
Ballast mit sich herum.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das führt zu erhitzten Smartphones und überlasteten Servern.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich nenne das <Marker>digitale Verschwendung</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Durch radikale Optimierung senken wir die CPU-Last um bis zu 80 %. Das
|
||||
schont die Umwelt und beschleunigt Ihre UX.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Code["Schlanke Code-Architektur"] --> Compute["Weniger CPU-Zyklen am Server"]
|
||||
Code --> Bytes["Weniger Traffic (CDN)"]
|
||||
Compute --> Energy["Niedrigerer Stromverbrauch"]
|
||||
Bytes --> Impact["Schnellere UX & Weniger CO2"]
|
||||
Energy --> Profit["Geringere Hosting-Kosten"]
|
||||
style Profit fill:#4ade80,stroke:#333
|
||||
style Impact fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Die grüne Rendite: Effizienz in der Software führt direkt zu
|
||||
ökologischen und finanziellen Einsparungen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Boutique-Engineering als Klimaschutz</H3>
|
||||
<Paragraph>
|
||||
Standard-Agenturen greifen oft zu überladenen Baukästen, um Zeit zu
|
||||
sparen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Der Preis dafür ist eine gigantische technische Ineffizienz.
|
||||
</Paragraph>
|
||||
<Paragraph>Ich investiere lieber Zeit in präzises Handwerk.</Paragraph>
|
||||
<Paragraph>
|
||||
Ein maßgeschneidertes System verbraucht nur einen Bruchteil der Ressourcen
|
||||
eines WordPress-Monolithen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>Nachhaltigkeit durch technologische Brillanz</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Meine Hebel für eine nachhaltige Infrastruktur</H2>
|
||||
<Paragraph>Grüne IT beginnt bei der Wahl der Waffen.</Paragraph>
|
||||
<Paragraph>
|
||||
Hier sind drei Wege, wie ich Ihren digitalen Fußabdruck minimiere:
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Static-First Architektur:</strong> Wir berechnen Seiten nicht
|
||||
bei jedem Aufruf neu. Einmal generiert, tausende Male effizient
|
||||
ausgeliefert.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Intelligentes Asset-Management:</strong> Keine unnötigen Fonts
|
||||
oder Tracking-Skripte. Wir senden nur das absolute Minimum an Daten an
|
||||
den Browser.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Grünes Server-Partnering:</strong> Ich wähle Hostinganbieter,
|
||||
die zu 100 % mit erneuerbaren Energien arbeiten.{" "}
|
||||
<Marker>Nachhaltigkeit über den gesamten Stack.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der Impact Ihres technologischen Fußabdrucks"
|
||||
negativeLabel="Standard Legacy-Website"
|
||||
negativeText="Hohe Serverlast, überladene Scripte, unnötiger CO2-Ausstoß"
|
||||
positiveLabel="Eco-Performance Architecture"
|
||||
positiveText="Minimale CPU-Last, schlanke Datenübertragung, 100% Green Hosting"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Wirtschaftliche Vorteile von Green IT</H2>
|
||||
<Paragraph>Effizienz zahlt sich aus.</Paragraph>
|
||||
<Paragraph>
|
||||
Weniger Datentransfer und geringere Serverlast bedeuten niedrigere
|
||||
laufende Kosten.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Gleichzeitig belohnt Google schnelle, schlanke Seiten mit besseren
|
||||
Rankings.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Nachhaltigkeit ist also kein Verzicht, sondern ein{" "}
|
||||
<Marker>Wettbewerbsvorteil</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Positionieren Sie Ihr Unternehmen als Vorreiter einer neuen, bewussten
|
||||
digitalen Ära.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Wann macht Green IT für Sie Sinn?</H2>
|
||||
<Paragraph>
|
||||
Ich baue für Marken, die <Marker>Werte über kurzfristige Trends</Marker>{" "}
|
||||
stellen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie Ihre CSR-Ziele auch digital ernst nehmen, bin ich Ihr Architekt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Schaffen wir Systeme, die auch für die nächste Generation noch vorbildlich
|
||||
sind.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Weniger ist mehr Zukunft</H2>
|
||||
<Paragraph>Gutes Design ist immer auch sparsames Design.</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam Ihren digitalen Ballast abwerfen und stattdessen in
|
||||
echte Effizienz investieren.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Purer Output bei minimalem Input.</Marker> Das ist das Ziel meines
|
||||
Boutique-Ansatzes.
|
||||
</Paragraph>
|
||||
<Paragraph>Für Ihr Business und unseren Planeten.</Paragraph>
|
||||
</>
|
||||
);
|
||||
157
apps/web/src/components/blog/posts/Group3/Longevity.tsx
Normal file
157
apps/web/src/components/blog/posts/Group3/Longevity.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const Longevity: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
In der schnelllebigen Tech-Welt gilt Software oft schon nach zwei Jahren
|
||||
als veraltet.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich halte das für eine massive Verschwendung von Kapital und Energie.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Wahre Qualität zeigt sich darin, wie ein System altert.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, wie wir <Marker>digitale Werte für Jahrzehnte</Marker>{" "}
|
||||
schaffen – durch vorausschauende Architektur und zeitlose Standards.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Gegen die Wegwerf-Mentalität im Code</H2>
|
||||
<Paragraph>
|
||||
Viele Agenturen bauen "Schönwetter-Lösungen", die nur bis zur nächsten
|
||||
Trend-Welle halten.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Man setzt auf kurzlebige Frameworks oder proprietäre Blackboxes, die nach
|
||||
kurzer Zeit nicht mehr unterstützt werden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Ergebnis: Alle drei Jahre ist ein teurer Relaunch fällig.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich nenne das <Marker>geplante Obsoleszenz der Software</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Mein Boutique-Ansatz ist das Gegenteil davon: Ich baue Systeme, die durch
|
||||
ihre innere Ordnung und Robustheit bestechen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Guter Code ist wie eine solide Immobilie – er braucht Pflege, aber keine
|
||||
Abrissbirne.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Logic["Zukunftsfähige Kern-Logik"] --> Standards["Offene Web-Standards"]
|
||||
Logic --> Modular["Modulare Komponenten"]
|
||||
Standards --> Decade["Lebensdauer > 10 Jahre"]
|
||||
Modular --> Update["Einfache Teil-Modernisierung"]
|
||||
Decade --> ROI["Maximaler Return on Investment"]
|
||||
Update --> ROI
|
||||
style ROI fill:#4ade80,stroke:#333
|
||||
style Decade fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Architektur der Langlebigkeit: Durch die Trennung von Logik und Trends
|
||||
sichern wir den Wert Ihrer digitalen Investition über Generationen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Die Ästhetik der Zeitlosigkeit</H3>
|
||||
<Paragraph>Langlebigkeit hat auch eine visuelle Komponente.</Paragraph>
|
||||
<Paragraph>
|
||||
Ich vermeide "modische" Spielereien, die morgen schon peinlich wirken
|
||||
könnten.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wahre technische Eleganz ist schlicht, funktional und hochpräzise.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ein <Marker>industrieller, klarer Look</Marker> altert langsamer als jede
|
||||
verspielte Grafik.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schaffe Designs, die heute beeindrucken und in fünf Jahren noch immer
|
||||
souverän wirken.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Meine Prinzipien für ewige Systeme</H2>
|
||||
<Paragraph>Wie baut man Software, die nicht veraltet?</Paragraph>
|
||||
<Paragraph>Durch die kompromisslose Auswahl der Fundamente:</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Bohrmaschinen statt Spielzeug:</strong> Ich nutze nur
|
||||
Technologien mit breitem industriellem Rückhalt. Keine "Hype"-Tools ohne
|
||||
Langzeit-Sicherheit.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Strict Separation of Concerns:</strong> Wir trennen Design,
|
||||
Daten und Logik so sauber, dass man Einzelteile austauschen kann, ohne
|
||||
das Ganze zu gefährden.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Automatisierte Evolution:</strong> Mein System prüft sich
|
||||
selbst. Wir erkennen frühzeitig, wenn externe Standards sich ändern und
|
||||
passen uns proaktiv an.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der wirtschaftliche Impact der Halbwertszeit"
|
||||
negativeLabel="Trend-fokussierte Agentur"
|
||||
negativeText="Relaunch alle 3 Jahre nötig, technologische Schulden, hohe Lizenz-Abhängigkeit"
|
||||
positiveLabel="Mintel Longevity Standard"
|
||||
positiveText="Laufzeit von 10+ Jahren möglich, Code als bleibendes Asset, volle Souveränität"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Rendite durch technologische Beständigkeit</H2>
|
||||
<Paragraph>Wahrer ROI entsteht erst über die Zeit.</Paragraph>
|
||||
<Paragraph>
|
||||
Wer nicht ständig neu bauen muss, hat mehr Kapital für echtes Wachstum zur
|
||||
Verfügung.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Langlebige Software ist zudem das{" "}
|
||||
<Marker>nachhaltigste digitale Werkzeug</Marker>, das Sie besitzen können.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Investieren Sie in Substanz, nicht in flüchtige Effekte.
|
||||
</Paragraph>
|
||||
<Paragraph>Vorsprung hat der, dessen Fundament felsenfest steht.</Paragraph>
|
||||
|
||||
<H2>Wann ist 'Ewigkeit' Ihr Ziel?</H2>
|
||||
<Paragraph>
|
||||
Suchen Sie einen Partner für den Aufbau einer digitalen Marke, die Bestand
|
||||
hat?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich arbeite für Gründer, die <Marker>Generationen-Projekte</Marker>{" "}
|
||||
führen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie technologische Stabilität als Teil Ihres Vermächtnisses
|
||||
begreifen, bin ich Ihr Architekt.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Werte schaffen, die bleiben</H2>
|
||||
<Paragraph>Digitale Exzellenz misst sich am Erfolg von morgen.</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam ein System gießen, das die Zeit überdauert.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Qualität ist Beständigkeit.</Marker> Ihr Erfolg verdient eine
|
||||
Architektur ohne Verfallsdatum.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
162
apps/web/src/components/blog/posts/Group3/MaintenanceNoCMS.tsx
Normal file
162
apps/web/src/components/blog/posts/Group3/MaintenanceNoCMS.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const MaintenanceNoCMS: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Ein CMS wird oft als Befreiung verkauft. In der Realität ist es oft der
|
||||
Anfang einer teuren Abhängigkeit.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Praxis sehe ich, wie Unternehmen hunderte Stunden in die Pflege
|
||||
von Systemen investieren, die sie eigentlich entlasten sollten.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, warum <Marker>Content-Management ohne Ballast</Marker>{" "}
|
||||
der wahre Hebel für Geschwindigkeit und Fokus ist.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Der CMS-Wartungs-Albtraum</H2>
|
||||
<Paragraph>
|
||||
Klassische CMS-Lösungen (wie WordPress oder Typo3) sind komplexe
|
||||
Software-Monster.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie müssen ständig aktualisiert werden, weil wöchentlich neue
|
||||
Sicherheitslücken auftauchen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Diese Wartung frisst Zeit und Geld, ohne einen einzigen Cent Mehrwert für
|
||||
Ihr Business zu generieren.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich nenne das <Marker>technische Sisyphusarbeit</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Warum ein ganzes Kraftwerk betreiben, wenn Sie nur eine Glühbirne zum
|
||||
Leuchten bringen wollen?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wahre Effizienz bedeutet, Komplexität radikal zu streichen.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Need["Änderung am Inhalt"] --> Path["Update-Prozess"]
|
||||
Path --> CMS["Klassisches CMS (Update/Backup/DB)"]
|
||||
Path --> Git["Git-based Workflow (Mintel)"]
|
||||
CMS --> Risk["Sicherheitslücken & Träge Ladezeit"]
|
||||
Git --> Speed["Instant Go-Live & Maximale Sicherheit"]
|
||||
Speed --> Focus["Fokus auf Kunden & Strategie"]
|
||||
style Git fill:#4ade80,stroke:#333
|
||||
style Focus fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Der schlanke Workflow: Wir eliminieren die Datenbank-Ebene, um
|
||||
Angriffsflächen zu schließen und das Tempo zu verdoppeln.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Content as Code: Die Architektur der Profis</H3>
|
||||
<Paragraph>
|
||||
Anstatt sich mit unübersichtlichen Admin-Backends herumzuschlagen,
|
||||
integrieren wir Inhalte direkt in den Deployment-Prozess.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das bedeutet: Wenn Sie etwas ändern wollen, geschieht das in einer
|
||||
sauberen, versionierten Umgebung.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Keine Datenbanken, die korrumpieren können. Kein Backend, das gehackt
|
||||
werden kann.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>Sicherheit durch Simplizität</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>Inhalte werden so stabil wie die Architektur selbst.</Paragraph>
|
||||
|
||||
<H2>Warum "Kein CMS" die beste CMS-Strategie ist</H2>
|
||||
<Paragraph>
|
||||
Vermeintlich "einfache" Editoren führen oft zu zerstückelten Layouts und
|
||||
inkonsistentem Design.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Durch meinen Code-basierten Ansatz bleibt Ihre Markenidentität zu 100 %
|
||||
geschützt.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>0 % Sicherheitsrisiko:</strong> Ohne Datenbank-Schnittstelle
|
||||
gibt es keine Login-Bereiche für Hacker. Ihre Seite ist faktisch immun.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Blitzschnelle Änderungen:</strong> Wir nutzen automatisierte
|
||||
Pipelines. Eine Textänderung ist in Sekunden weltweit live.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Reduzierte Fixkosten:</strong> Sie sparen sich teure
|
||||
Wartungsverträge für "Backend-Security".{" "}
|
||||
<Marker>Geld, das produktiver in Marketing fließen kann.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der ökonomische Vergleich Ihres Betriebsaufwands"
|
||||
negativeLabel="Standard CMS-Betrieb"
|
||||
negativeText="Wöchentliche Sicherheits-Updates, monatliche Hosting-Hacks, träge Performance"
|
||||
positiveLabel="Mintel Low-Maintenance"
|
||||
positiveText="0 Wartungs-Minuten pro Monat, felsenfeste Stabilität, Höchstgeschwindigkeit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Fokus auf das, was zählt: Ihre Botschaft</H2>
|
||||
<Paragraph>
|
||||
Die wertvollste Ressource in Ihrem Unternehmen ist Aufmerksamkeit.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Verschwenden Sie diese nicht mit technischen Nebenschauplätzen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Ihnen ein System, das einfach funktioniert – im Hintergrund,
|
||||
lautlos und effizient.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Investieren Sie in <Marker>Inhaltliche Exzellenz</Marker> statt in
|
||||
technische Reparaturen.
|
||||
</Paragraph>
|
||||
<Paragraph>Befreien Sie Ihr Business von der CMS-Last.</Paragraph>
|
||||
|
||||
<H2>Wann ist dieser minimalistische Weg für Sie richtig?</H2>
|
||||
<Paragraph>
|
||||
Ich arbeite für Entscheider, deren Kerngeschäft nicht das Betreiben einer
|
||||
IT-Infrastruktur ist.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wollen Sie eine Website, die einfach{" "}
|
||||
<Marker>immer online und immer schnell</Marker> ist?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich bin der Architekt für alle, die Klarheit und Ergebnisorientierung über
|
||||
Feature-Listen stellen.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Simplizität ist das neue High-End</H2>
|
||||
<Paragraph>Die besten Systeme sind die, die man nicht spürt.</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam den Ballast abwerfen und uns auf Ihren Erfolg
|
||||
konzentrieren.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Maximale Wirkung bei minimalem technischem Overhead.</Marker> Ihr
|
||||
Erfolg verdient dieses effiziente Fundament.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
164
apps/web/src/components/blog/posts/Group4/CRMSync.tsx
Normal file
164
apps/web/src/components/blog/posts/Group4/CRMSync.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const CRMSync: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Die wertvollsten Daten Ihres Unternehmens liegen oft in Silos versteckt.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ihre Website sammelt Leads, aber Ihr CRM "weiß" nichts davon – oder erst
|
||||
nach manueller Übertragung.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>Ich beende das Zeitalter der Daten-Inseln.</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, wie <Marker>nahtlose CRM-Integration</Marker> Ihre
|
||||
Marketing-Effizienz verdoppelt und menschliche Fehler eliminiert.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Das Problem der manuellen Daten-Brücke</H2>
|
||||
<Paragraph>
|
||||
Viele Unternehmen nutzen Kontaktformulare, die lediglich E-Mails
|
||||
versenden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ein Mitarbeiter muss diese E-Mails lesen und die Daten händisch in
|
||||
Salesforce, HubSpot oder Pipedrive übertragen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist nicht nur zeitfressend, sondern auch eine Riskante Fehlerquelle.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Leads gehen verloren, die Reaktionszeit sinkt und die Datenqualität
|
||||
leidet.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
In einer digitalen Welt ist{" "}
|
||||
<Marker>manuelle Datenpflege ein Anachronismus</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wahre Professionalität bedeutet: Die Software erledigt die Arbeit im
|
||||
Hintergrund.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph LR
|
||||
Lead["Besucher sendet Formular"] --> Edge["Mintel Validation Layer"]
|
||||
Edge --> Transform["Intelligente Daten-Aufbereitung"]
|
||||
Transform --> CRM["CRM (Salesforce/HubSpot/etc.)"]
|
||||
CRM --> Notify["Instat Sales-Benachrichtigung"]
|
||||
CRM --> AutoResp["Personalisierte Auto-Antwort"]
|
||||
style CRM fill:#4ade80,stroke:#333
|
||||
style Notify fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Der automatisierte Lead-Fluss: Von der ersten Interaktion bis zum
|
||||
CRM-Eintrag in Millisekunden – ohne menschliches Eingreifen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Echtzeit-Synchronität als Wettbewerbsvorteil</H3>
|
||||
<Paragraph>Kunden erwarten heute sofortige Reaktionen.</Paragraph>
|
||||
<Paragraph>
|
||||
Ein Lead, der erst nach 24 Stunden kontaktiert wird, ist oft schon beim
|
||||
Wettbewerber gelandet.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Meine Architektur sorgt dafür, dass Ihre Sales-Teams{" "}
|
||||
<Marker>Sekunden nach dem Klick</Marker> arbeitsfähig sind.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wir automatisieren die Qualifizierung und Zuweisung, damit keine Zeit
|
||||
verloren geht.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Geschwindigkeit ist im Digitalvertrieb der entscheidende Faktor.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Meine Hebel für Ihre Daten-Souveränität</H2>
|
||||
<Paragraph>
|
||||
Integration bedeutet für mich mehr als nur das Verbinden von APIs.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Es geht um die Schaffung eines <Marker>Single Source of Truth</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Resiliente API-Anbindung:</strong> Wir bauen Puffer-Systeme.
|
||||
Sollte Ihr CRM kurzzeitig offline sein, gehen keine Leads verloren.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Smart Data Enrichment:</strong> Wir bereiten die Daten so auf,
|
||||
dass Ihr Sales-Team sofort alle Kontext-Infos hat.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>DSGVO-konforme Übertragung:</strong> Alle Daten fließen
|
||||
Ende-zu-Ende verschlüsselt und nach strengsten europäischen Standards.{" "}
|
||||
<Marker>Sicherheit trifft auf Komfort.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der Impact auf Ihre Sales-Performance"
|
||||
negativeLabel="Manuelle E-Mail-Übertragung"
|
||||
negativeText="Hohe Fehlerquote, langsame Response-Time, lückenhafte Daten-Historie"
|
||||
positiveLabel="Automatisierte CRM-Sync"
|
||||
positiveText="0 % Datenverlust, Echtzeit-Benachrichtigung, perfekte Lead-Transparenz"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Warum die 'Billig-Lösung' hier teuer wird</H2>
|
||||
<Paragraph>
|
||||
Einfache Plugins für CRM-Anbindungen sind oft instabil und unflexibel.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sie brechen bei Updates oder können individuelle Felder nicht korrekt
|
||||
abbilden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Ihnen eine <Marker>robuste Brücke</Marker>, die mit Ihren
|
||||
Anforderungen mitwächst.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Verlässlichkeit ist in der Lead-Generierung die wichtigste Eigenschaft.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Vermeiden Sie das Risiko von Daten-Silos durch professionelles
|
||||
Engineering.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Für wen ich 'Daten-Autobahnen' baue</H2>
|
||||
<Paragraph>
|
||||
Mein Fokus liegt auf Unternehmen, deren Erfolg von der Qualität ihrer
|
||||
Leads abhängt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Begreifen Sie Ihr <Marker>CRM als Herzstück Ihrer Wertschöpfung</Marker>?
|
||||
Dann bin ich Ihr Architekt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schlage die Brücke zwischen Ihrer Website und Ihrem Erfolg.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Lassen Sie Ihre Daten fließen</H2>
|
||||
<Paragraph>
|
||||
Technologie sollte Reibung eliminieren, nicht neue Hürden schaffen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam Ihre Website zu einem integralen Bestandteil Ihres
|
||||
Sales-Motors machen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Präzision in der Schnittstelle, Klarheit im Ergebnis.</Marker> Ihr
|
||||
Business verdient einen reibungslosen Datenfluss.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
159
apps/web/src/components/blog/posts/Group4/CleanCode.tsx
Normal file
159
apps/web/src/components/blog/posts/Group4/CleanCode.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const CleanCode: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Code ist nicht nur eine Anweisung für Maschinen. Es ist das Fundament
|
||||
Ihres digitalen Unternehmenswertes.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit als Digital Architect sehe ich oft "historisch
|
||||
gewachsenen" Code, der eher einem verfilzten Knäuel gleicht als einer
|
||||
Architektur.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, warum <Marker>Clean Code kein Luxus</Marker> ist, sondern
|
||||
die harte Währung für Ihre Zukunftsfähigkeit.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Die versteckten Kosten von 'Quick-and-Dirty'</H2>
|
||||
<Paragraph>
|
||||
Softwareentwicklung unter Zeitdruck führt oft zu unsauberen Abkürzungen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Kurzfristig spart das Stunden, langfristig erstickt es jede Innovation.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Unsauberer Code wird mit jedem Monat schwerer zu warten und zu erweitern.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich nenne das <Marker>technologische Verstopfung</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ihre Entwickler verbringen dann 80 % ihrer Zeit mit Bugfixing, statt neue
|
||||
Features zu bauen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Clean Code hingegen ist eine Investition in die Geschwindigkeit von
|
||||
morgen.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Clean["Clean Code Architektur"] --> Easy["Einfache Wartbarkeit"]
|
||||
Clean --> Scalable["Schnelle Erweiterbarkeit"]
|
||||
Easy --> LowCost["Geringe langfristige Kosten"]
|
||||
Scalable --> Market["Schnellerer Markteintritt (Time-to-Market)"]
|
||||
LowCost --> Profit["Höherer ROI für Ihr Business"]
|
||||
Market --> Profit
|
||||
style Profit fill:#4ade80,stroke:#333
|
||||
style Clean fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Die Logik der Qualität: Sauberer Code zahlt sich durch sinkende
|
||||
Betriebskosten und steigendes Innovationstempo aus.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Code als Kommunikationsmittel</H3>
|
||||
<Paragraph>Code wird viel öfter gelesen als geschrieben.</Paragraph>
|
||||
<Paragraph>
|
||||
Deshalb ist Klarheit mein oberstes Gebot. Ein gut strukturiertes System
|
||||
"erklärt" sich selbst.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das macht Sie unabhängig von einzelnen Personen. Jedes neue Teammitglied
|
||||
findet sich sofort zurecht.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>Souveränität durch Transparenz</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schreibe Code für Menschen, nicht nur für den Compiler.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Meine Prinzipien für eine glasklare Architektur</H2>
|
||||
<Paragraph>
|
||||
Wie unterscheidet sich meine Arbeit von Standard-Agentur-Code?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Durch die kompromisslose Anwendung von Engineering-Prinzipien:
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Single Responsibility:</strong> Jede Komponente tut genau eine
|
||||
Sache – und die perfekt. Das macht Fehlerbehebungen zum Kinderspiel.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Automatisierte Selbstkontrolle:</strong> Bevor eine Änderung
|
||||
live geht, wird sie von hunderten automatischen Tests geprüft.{" "}
|
||||
<Marker>Qualität ist bei mir systemimmanent.</Marker>
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Dokumentation im Design:</strong> Ich baue Systeme, deren
|
||||
Struktur so logisch ist, dass Handbücher überflüssig werden.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der wirtschaftliche Vergleich der Codequalität"
|
||||
negativeLabel="Agentur-Standard (Spaghetti)"
|
||||
negativeText="Chaos-Abhängigkeit, expontentiell steigende Wartungskosten, Angst vor jedem Update"
|
||||
positiveLabel="Mintel Boutique Standard"
|
||||
positiveText="Lineares Wachstum, sinkende technische Schulden, volle Kontrolle ab Tag 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Wahrer Profit durch technische Brillanz</H2>
|
||||
<Paragraph>Clean Code senkt Ihre Betriebskosten massiv.</Paragraph>
|
||||
<Paragraph>
|
||||
Es ist die Basis für Skalierbarkeit. Nur ein sauberes Fundament trägt ein
|
||||
Hochhaus.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Sie planen, Ihr digitales Business über Jahre zu führen, ist{" "}
|
||||
<Marker>Codequalität Ihre wichtigste Versicherung</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Software sollte ein Vermögenswert sein, keine Verbindlichkeit.
|
||||
</Paragraph>
|
||||
<Paragraph>Gießen wir ein Fundament, das Stand hält.</Paragraph>
|
||||
|
||||
<H2>Für wen ich 'Pures Gold' schreibe</H2>
|
||||
<Paragraph>
|
||||
Ich bin der Architekt für Entscheider, die den Wert ihrer digitalen Assets
|
||||
langfristig maximieren wollen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Haben Sie genug von Systemen, die bei jeder Änderung zusammenbrechen? Dann
|
||||
passen wir zusammen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schaffe <Marker>Ruhe im Maschinenraum</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Qualität gewinnt immer</H2>
|
||||
<Paragraph>Es gibt keine Abkürzung zu exzellenter Software.</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam den Ballast von unsauberem Code hinter uns.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Ihnen eine Architektur, die nicht nur heute funktioniert, sondern
|
||||
auch in vielen Jahren noch durch ihre{" "}
|
||||
<Marker>Eleganz und Klarheit</Marker> besticht.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Purer Code. Purere Ergebnisse.</Marker> Ihr Erfolg verdient dieses
|
||||
Niveau.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
165
apps/web/src/components/blog/posts/Group4/HostingOps.tsx
Normal file
165
apps/web/src/components/blog/posts/Group4/HostingOps.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const HostingOps: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Ein brillanter Webauftritt ist wertlos, wenn er im entscheidenden Moment
|
||||
nicht erreichbar ist.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Hosting ist für mich kein notwendiges Übel, sondern das schlagende Herz
|
||||
Ihrer digitalen Präsenz.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, wie <Marker>Industrial-Grade Operations</Marker> dafür
|
||||
sorgen, dass Sie auch bei massiven Traffic-Spitzen ruhig schlafen können.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Das Märchen vom 'Billig-Hosting'</H2>
|
||||
<Paragraph>
|
||||
Viele Unternehmen sparen am falschen Ende und wählen Shared-Hosting für
|
||||
wenige Euro.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Der Preis dafür ist eine geteilte Performance und ein erhöhtes
|
||||
Sicherheitsrisiko.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ist Ihr Nachbar auf dem Server Ziel einer Attacke, geht Ihre Seite mit
|
||||
unter.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist kein vernünftiges Geschäftsmodell, sondern ein digitales
|
||||
Glücksspiel.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
In meiner Welt gibt es keine Kompromisse bei der Erreichbarkeit.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Ihre Marke verdient eine eigene Umlaufbahn.</Marker>
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Deploy["Automatisches Deployment (Git Push)"] --> Build["Isolierte Container-Builds"]
|
||||
Build --> Global["Global CDN Verteilung"]
|
||||
Global --> User["Nutzer (Weltweit blitzschnell)"]
|
||||
Global --> Failover["Automatisches Failover (Sicherheit)"]
|
||||
style Global fill:#4ade80,stroke:#333
|
||||
style Failover fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Die Cloud-Native Architektur: Skalierung per Knopfdruck und
|
||||
Ausfallsicherheit durch globale Redundanz.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Infrastruktur als Code: Die moderne Festung</H3>
|
||||
<Paragraph>
|
||||
Ich konfiguriere Server nicht manuell durch Klicken in irgendwelchen
|
||||
Web-Interfaces.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schreibe die Infrastruktur als Code (IaC). Das bedeutet absolute
|
||||
Reproduzierbarkeit und Fehlerfreiheit.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Sollte ein Rechenzentrum ausfallen, "erwacht" Ihr System an einem anderen
|
||||
Ort in Minuten wieder zum Leben.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist das Niveau von <Marker>Hochverfügbarkeit</Marker>, das ich für
|
||||
meine Kunden realisiere.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ihre Website wird zu einem unverwüstlichen digitalen Asset.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Meine Prinzipien für reibungslose Operations</H2>
|
||||
<Paragraph>Was macht eine professionelle Hosting-Strategie aus?</Paragraph>
|
||||
<Paragraph>Es sind die unsichtbaren Schutzschilde:</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Edge Computing & Caching:</strong> Ihre Seite wird direkt dort
|
||||
ausgeliefert, wo der Nutzer ist. Ob in New York oder Berlin – Ladezeiten
|
||||
unter 1 Sekunde sind der Standard.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Automatisierte Backups & Rollbacks:</strong> Mit einem Klick
|
||||
können wir jede Version der Vergangenheit wiederherstellen.{" "}
|
||||
<Marker>Keine Angst vor Fehlern.</Marker>
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Echtzeit-Monitoring:</strong> Ich sehe Probleme, bevor Ihre
|
||||
Kunden sie bemerken. Proaktives Handeln ist besser als reaktives
|
||||
Flicken.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der Impact auf Ihre Betriebssicherheit"
|
||||
negativeLabel="Standard Shared-Hosting"
|
||||
negativeText="Träge Ladezeiten bei Last, unsichere Nachbarschaft, manuelle Wartung"
|
||||
positiveLabel="Bespoke Managed Infra"
|
||||
positiveText="Unbegrenzte Skalierung, maximale Isolation, 100 % automatisierte Sicherheit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Warum Sorgenfreiheit ein Investment ist</H2>
|
||||
<Paragraph>
|
||||
Was kostet Sie eine Stunde Website-Ausfall während einer wichtigen
|
||||
Kampagne?
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Meist ist dieser Schaden weitaus höher als die Investition in eine solide
|
||||
Architektur.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schlage die Brücke zwischen Hochleistungstechnologie und
|
||||
geschäftlichem Erfolg.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen Sie uns Ihre Plattform auf ein{" "}
|
||||
<Marker>industrielles Fundament</Marker> stellen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ruhe im Betrieb ist das Ergebnis von erstklassiger Planung.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Für wen ich 'Unverwüstlichkeit' baue</H2>
|
||||
<Paragraph>
|
||||
Ich arbeite für Gründer, die über das Stadium von "es läuft irgendwie"
|
||||
hinaus sind.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ist Ihre Website das Schaufenster Ihres Erfolgs? Dann sollte sie auf dem
|
||||
besten Fundament stehen, das die Technik bietet.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich bin der Architekt für <Marker>kompromisslose Verfügbarkeit</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Ihre Plattform verdient das Beste</H2>
|
||||
<Paragraph>Lassen wir das Basteln im Maschinenraum hinter uns.</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Ihnen eine Umgebung, die mit Ihren Ambitionen mitwächst.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Sicher. Schnell. Skalierbar.</Marker> Das ist modernes Hosting auf
|
||||
Boutique-Niveau.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Gönnen Sie Ihrem Business die technologische Souveränität, die es
|
||||
verdient.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
147
apps/web/src/components/blog/posts/Group4/NoTemplates.tsx
Normal file
147
apps/web/src/components/blog/posts/Group4/NoTemplates.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const NoTemplates: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
Vorlagen sind die Fast-Food-Lösung des Web-Designs: Schnell verfügbar,
|
||||
aber auf Dauer ungesund für Ihre Marke.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Arbeit als Digital Architect begegne ich ständig Unternehmen,
|
||||
die in der Beliebigkeit von Standard-Templates versinken.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, warum <Marker>Zero-Template-Architektur</Marker> der
|
||||
einzige Weg zu echter digitaler Distinktion ist.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Die Falle der visuellen Gleichschaltung</H2>
|
||||
<Paragraph>
|
||||
Wenn Sie ein Template nutzen, nutzen Sie die gleiche Basis wie tausende
|
||||
andere Unternehmen weltweit.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Ergebnis ist eine "digitale Uniform", die Ihre Einzigartigkeit im Keim
|
||||
erstickt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Kunden spüren unbewusst, wenn eine Seite "von der Stange" kommt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Es signalisiert fehlende Investitionsbereitschaft und mangelnde Vision.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich nenne das <Marker>ästhetische Kapitulation</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wahre Markenbildung braucht Raum zum Atmen und ein Fundament, das nur für
|
||||
Sie gegossen wurde.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Need["Individuelle Marken-Botschaft"] --> Path["Design-Entscheidung"]
|
||||
Path --> Temp["Fertig-Template (Masse)"]
|
||||
Path --> Custom["Bespoke Component Design (Mintel)"]
|
||||
Temp --> Bland["Visuelle Beliebigkeit & Hoher Ballast"]
|
||||
Custom --> Distinct["Maximale Unterscheidbarkeit & Pure Performance"]
|
||||
Bland --> NoTrust["Vertrauensverlust"]
|
||||
Distinct --> Authority["Marken-Autorität"]
|
||||
style Custom fill:#4ade80,stroke:#333
|
||||
style Authority fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Bespoke vs. Template: Investieren Sie in ein digitales Unikat, das Ihre
|
||||
Marktposition untermauert statt sie zu verwässern.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Boutique-Design: Jedes Pixel hat einen Zweck</H3>
|
||||
<Paragraph>
|
||||
Templates enthalten Code für hunderte Optionen, die Sie nie nutzen werden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Dieser Ballast verlangsamt Ihre Seite und verwässert Ihre Botschaft.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
In meinem Boutique-Ansatz entwickeln wir jede Komponente von Grund auf.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Ergebnis ist eine <Marker>hochpräzise Maschine</Marker>, die exakt auf
|
||||
Ihre Ziele ausgerichtet ist.
|
||||
</Paragraph>
|
||||
<Paragraph>Schlank. Schnell. Unverwechselbar.</Paragraph>
|
||||
|
||||
<H2>Warum technisches Maßwerk rentabler ist</H2>
|
||||
<Paragraph>
|
||||
Templates sind starr. Wenn Ihr Business wächst, wird das Template schnell
|
||||
zur Wachstumsbremse.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Anpassungen am Standard-Code sind oft teurer als ein kompletter Neubau.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich baue Systeme, die <Marker>evolutionär</Marker> sind.
|
||||
</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Unbegrenzte Design-Freiheit:</strong> Wir biegen den Code nach
|
||||
Ihrer Vision, nicht umgekehrt. Jede Interaktion folgt Ihrer Marken-DNA.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Zukunftssicheres Asset:</strong> Da wir keine
|
||||
Drittanbieter-Themen nutzen, gibt es keine Abhängigkeiten von deren
|
||||
Update-Zyklen.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Maximale Konversions-Rate:</strong> Wir optimieren Layouts exakt
|
||||
nach dem Nutzerverhalten Ihres Zielmarktes.{" "}
|
||||
<Marker>Keine Kompromisse.</Marker>
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der Impact auf Ihre digitale Reputation"
|
||||
negativeLabel="Premium Template-Kauf"
|
||||
negativeText="Gefahr der Verwechslung, technischer Overhead, eingeschränkte Flexibilität"
|
||||
positiveLabel="Bespoke Digital Object"
|
||||
positiveText="Absolut einzigartig, 100 % performant, unendlich skalierbar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Wann ist 'Bespoke' der einzige Weg?</H2>
|
||||
<Paragraph>
|
||||
Ist Ihr Unternehmen Marktführer oder auf dem Weg dorthin? Dann darf Ihre
|
||||
Website nicht nach "Durchschnitt" aussehen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich arbeite für Entscheider, die{" "}
|
||||
<Marker>Qualität als Wettbewerbsvorteil</Marker> begreifen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wenn Differenzierung über Ihren Erfolg entscheidet, bin ich Ihr Architekt.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Ein Unikat für Ihren Erfolg</H2>
|
||||
<Paragraph>
|
||||
Hören Sie auf, sich in fremde Formen pressen zu lassen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam ein digitales Denkmal setzen, das so unverwechselbar
|
||||
ist wie Ihr unternehmerischer Fingerabdruck.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Pures Handwerk. Maximale Distinktion.</Marker> Ihr Erfolg verdient
|
||||
dieses Niveau.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
147
apps/web/src/components/blog/posts/Group4/ResponsiveDesign.tsx
Normal file
147
apps/web/src/components/blog/posts/Group4/ResponsiveDesign.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import React from "react";
|
||||
import { H2, H3 } from "../../../ArticleHeading";
|
||||
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||
import { IconList, IconListItem } from "../../../IconList";
|
||||
import { Mermaid } from "../../../Mermaid";
|
||||
import { Marker } from "../../../Marker";
|
||||
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||
|
||||
export const ResponsiveDesign: React.FC = () => (
|
||||
<>
|
||||
<LeadParagraph>
|
||||
"Responsive" bedeutet heute viel mehr als nur das Nebeneinander-Rücken von
|
||||
Boxen.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
In meiner Welt als Digital Architect ist jedes Endgerät eine eigene Bühne
|
||||
mit eigenen Regeln.
|
||||
</LeadParagraph>
|
||||
<LeadParagraph>
|
||||
Ich zeige Ihnen, warum <Marker>Responsive-Exzellenz</Marker> der Hebel für
|
||||
Ihre globale Conversion-Rate ist.
|
||||
</LeadParagraph>
|
||||
|
||||
<H2>Jenseits der Standard-Breakpoints</H2>
|
||||
<Paragraph>
|
||||
Die meisten Agenturen nutzen simple Raster, die auf dem Desktop gut
|
||||
aussehen und auf dem Smartphone "irgendwie funktionieren".
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das Ergebnis ist oft frustrierend: Zu kleine Texte, unbedienbare Buttons
|
||||
und Bilder, die das Layout sprengen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich betrachte Responsive Design als{" "}
|
||||
<Marker>architektonische Präzisionsleistung</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wir gestalten die Experience für den Nutzer im Zug ebenso perfekt wie für
|
||||
den Entscheider am 4K-Monitor.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Fokus und Hierarchie müssen auf jedem Screen neu definiert werden.
|
||||
</Paragraph>
|
||||
|
||||
<div className="my-12">
|
||||
<Mermaid
|
||||
graph={`graph TD
|
||||
Logic["Zentrales Design-System"] --> Mobile["Mobile (Daumen-Optimiert)"]
|
||||
Logic --> Tablet["Tablet (Touch & Swipe)"]
|
||||
Logic --> Desktop["Desktop (Maus & Tastatur)"]
|
||||
Mobile --> UX["Perfekte UX auf jedem Gerät"]
|
||||
Tablet --> UX
|
||||
Desktop --> UX
|
||||
style UX fill:#4ade80,stroke:#333
|
||||
style Logic fill:#4ade80,stroke:#333`}
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||
Plattformübergreifende Brillanz: Ein System, das sich nicht nur anpasst,
|
||||
sondern für jedes Endgerät optimiert wird.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<H3>Kontextsensitive Ergonomie</H3>
|
||||
<Paragraph>
|
||||
Ein mobiler Nutzer hat andere Bedürfnisse als ein Desktop-Nutzer.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
In meiner Architektur passen wir nicht nur das Layout an, sondern oft auch
|
||||
die Interaktionslogik.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Das ist <Marker>digitale Ergonomie auf Boutique-Niveau</Marker>.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Informationen müssen dort fließen, wo sie gebraucht werden – ohne
|
||||
Reibungsverluste durch das Endgerät.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Meine Hebel für ein grenzenloses Web</H2>
|
||||
<Paragraph>Wie erreichen wir diese technische Perfektion?</Paragraph>
|
||||
<Paragraph>Durch den Einsatz modernster Engineering-Methoden:</Paragraph>
|
||||
|
||||
<IconList>
|
||||
<IconListItem check>
|
||||
<strong>Fluid Typography & Spacing:</strong> Wir nutzen keine starren
|
||||
Pixel-Werte. Alles atmet und skaliert harmonisch mit der Viewport-Größe.
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Adaptive Media:</strong> Bilder und Videos werden exakt in der
|
||||
Größe ausgeladen, die das Display erfordert.{" "}
|
||||
<Marker>Kein Byte wird verschwendet.</Marker>
|
||||
</IconListItem>
|
||||
<IconListItem check>
|
||||
<strong>Intelligente Touch-Targets:</strong> Wir optimieren alle
|
||||
interaktiven Elemente für die menschliche Anatomie – auf jedem Gerät.
|
||||
</IconListItem>
|
||||
</IconList>
|
||||
|
||||
<div className="my-12">
|
||||
<ComparisonRow
|
||||
description="Der Impact auf Ihre globale Marktdurchdringung"
|
||||
negativeLabel="Standard Grid-Responsive"
|
||||
negativeText="Verlust an Übersichtlichkeit auf kleinen Screens, langsame Ladezeiten, 'Bastel'-Look"
|
||||
positiveLabel="Bespoke Multi-Screen Engine"
|
||||
positiveText="Perfekte Ergonomie überall, blitzschneller Content, konsistentes Markenbild"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<H2>Wirtschaftlicher Hebel: Mobiler Erfolg</H2>
|
||||
<Paragraph>
|
||||
Über 60 % des Web-Traffics findet heute auf mobilen Endgeräten statt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Wer hier patzt, verliert die Mehrheit seiner potenziellen Kunden.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schaffe Ihnen ein System, das <Marker>Zukunftssicherheit</Marker>{" "}
|
||||
garantiert – egal welche Geräte morgen auf den Markt kommen.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ihre Website wird zu einem universellen Werkzeug Ihres Erfolgs.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Für wen ich 'grenzenlose' Welten baue</H2>
|
||||
<Paragraph>
|
||||
Mein Fokus liegt auf Marken mit einem internationalen, mobilen Publikum.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Verlangen Ihre Kunden Perfektion in jedem Moment? Dann bin ich Ihr
|
||||
Architekt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
Ich schaffe <Marker>Barrierefreiheit durch Qualität</Marker>.
|
||||
</Paragraph>
|
||||
|
||||
<H2>Fazit: Konsistenz ist die halbe Miete</H2>
|
||||
<Paragraph>Ihre Marke muss sich überall gleich wertig anfühlen.</Paragraph>
|
||||
<Paragraph>
|
||||
Lassen wir gemeinsam ein digitales Ökosystem erschaffen, das auf jedem
|
||||
Screen glänzt.
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Marker>Präzision im Detail, Harmonie im Ganzen.</Marker> Ihr Erfolg
|
||||
verdient diese nahtlose Integration.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
49
apps/web/src/components/blog/posts/index.ts
Normal file
49
apps/web/src/components/blog/posts/index.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { PageSpeedFails } from "./Group1/PageSpeedFails";
|
||||
import { SlowLoadingDebt } from "./Group1/SlowLoadingDebt";
|
||||
import { AgencySlowdown } from "./Group1/AgencySlowdown";
|
||||
import { WordPressPlugins } from "./Group1/WordPressPlugins";
|
||||
import { WebsiteStability } from "./Group1/WebsiteStability";
|
||||
|
||||
import { CookieFreeDesign } from "./Group2/CookieFreeDesign";
|
||||
import { LocalCloud } from "./Group2/LocalCloud";
|
||||
import { GDPRSystem } from "./Group2/GDPRSystem";
|
||||
import { VendorLockIn } from "./Group2/VendorLockIn";
|
||||
import { PrivacyAnalytics } from "./Group2/PrivacyAnalytics";
|
||||
|
||||
import { GreenIT } from "./Group3/GreenIT";
|
||||
import { FixedPrice } from "./Group3/FixedPrice";
|
||||
import { BuildFirst } from "./Group3/BuildFirst";
|
||||
import { MaintenanceNoCMS } from "./Group3/MaintenanceNoCMS";
|
||||
import { Longevity } from "./Group3/Longevity";
|
||||
|
||||
import { CleanCode } from "./Group4/CleanCode";
|
||||
import { ResponsiveDesign } from "./Group4/ResponsiveDesign";
|
||||
import { HostingOps } from "./Group4/HostingOps";
|
||||
import { NoTemplates } from "./Group4/NoTemplates";
|
||||
import { CRMSync } from "./Group4/CRMSync";
|
||||
|
||||
export const PostComponents: Record<string, React.FC> = {
|
||||
"why-pagespeed-fails": PageSpeedFails,
|
||||
"slow-loading-costs-customers": SlowLoadingDebt,
|
||||
"why-agencies-are-slow": AgencySlowdown,
|
||||
"hidden-costs-of-wordpress-plugins": WordPressPlugins,
|
||||
"why-websites-break-after-updates": WebsiteStability,
|
||||
|
||||
"website-without-cookie-banners": CookieFreeDesign,
|
||||
"no-us-cloud-platforms": LocalCloud,
|
||||
"gdpr-conformity-system-approach": GDPRSystem,
|
||||
"builder-systems-threaten-independence": VendorLockIn,
|
||||
"analytics-without-tracking": PrivacyAnalytics,
|
||||
|
||||
"fast-website-carbon-footprint": GreenIT,
|
||||
"fixed-price-vs-hourly-rate": FixedPrice,
|
||||
"build-first-talk-later": BuildFirst,
|
||||
"maintenance-without-cms": MaintenanceNoCMS,
|
||||
"timeless-websites": Longevity,
|
||||
|
||||
"clean-code-success": CleanCode,
|
||||
"responsive-design-scaling": ResponsiveDesign,
|
||||
"hosting-and-operation": HostingOps,
|
||||
"no-ready-made-templates": NoTemplates,
|
||||
"seamless-crm-sync": CRMSync,
|
||||
};
|
||||
@@ -7,39 +7,174 @@ export interface BlogPost {
|
||||
}
|
||||
|
||||
export const blogPosts: BlogPost[] = [
|
||||
// Gruppe 1: Schmerzpunkte & Fehlerbehebung
|
||||
{
|
||||
title: "Starting this blog",
|
||||
description: "Why I'm writing things down in public",
|
||||
date: "2024-01-15",
|
||||
slug: "first-note",
|
||||
tags: ["meta", "learning"]
|
||||
title: "Warum Ihre Website bei Google PageSpeed scheitert",
|
||||
description:
|
||||
"Technische Optimierung ist heute kein Luxus mehr, sondern überlebenswichtig für Ihre Sichtbarkeit.",
|
||||
date: "2026-02-15",
|
||||
slug: "why-pagespeed-fails",
|
||||
tags: ["performance", "engineering"],
|
||||
},
|
||||
{
|
||||
title: "Debugging with print statements",
|
||||
description: "When printf debugging is actually the right tool",
|
||||
date: "2024-01-20",
|
||||
slug: "debugging-tips",
|
||||
tags: ["debugging", "tools"]
|
||||
title: "Langsame Ladezeiten: Diese technischen Altlasten kosten Sie Kunden",
|
||||
description:
|
||||
"Wie Sie versteckte Performance-Killer identifizieren und eliminieren, bevor sie Ihren Umsatz gefährden.",
|
||||
date: "2026-02-14",
|
||||
slug: "slow-loading-costs-customers",
|
||||
tags: ["performance", "business"],
|
||||
},
|
||||
{
|
||||
title: "Software Architecture Patterns",
|
||||
description: "Exploring common architectural patterns for scalable systems",
|
||||
date: "2024-02-01",
|
||||
slug: "architecture-patterns",
|
||||
tags: ["architecture", "design-patterns", "system-design"]
|
||||
title: "Warum Ihre Agentur für kleine Änderungen Wochen braucht",
|
||||
description:
|
||||
"Starre Prozesse vs. flexible Architektur: So brechen Sie den Flaschenhals in Ihrer Entwicklung auf.",
|
||||
date: "2026-02-13",
|
||||
slug: "why-agencies-are-slow",
|
||||
tags: ["architecture", "engineering"],
|
||||
},
|
||||
{
|
||||
title: "Docker Deployment Best Practices",
|
||||
description: "Production-ready Docker configurations and workflows",
|
||||
date: "2024-02-10",
|
||||
slug: "docker-deployment",
|
||||
tags: ["docker", "deployment", "architecture"]
|
||||
title: "Die versteckten Kosten von WordPress-Plugins",
|
||||
description:
|
||||
"Warum die 'einfache Lösung' oft zur teuren Wartungsfalle wird und wie Sie echte Unabhängigkeit gewinnen.",
|
||||
date: "2026-02-12",
|
||||
slug: "hidden-costs-of-wordpress-plugins",
|
||||
tags: ["architecture", "business"],
|
||||
},
|
||||
{
|
||||
title: "Rich Content Embedding Demo",
|
||||
description: "Testing our new free embed components for YouTube, Twitter, Mermaid diagrams, and other platforms",
|
||||
date: "2024-02-15",
|
||||
slug: "embed-demo",
|
||||
tags: ["embeds", "components", "tutorial", "mermaid"]
|
||||
}
|
||||
];
|
||||
title: "Warum Ihre Website nach jedem Update kaputtgeht",
|
||||
description:
|
||||
"Systematische Stabilität vs. Flickschusterei: Warum Test-Automatisierung Ihr wichtigstes Investment ist.",
|
||||
date: "2026-02-11",
|
||||
slug: "why-websites-break-after-updates",
|
||||
tags: ["engineering", "architecture"],
|
||||
},
|
||||
|
||||
// Gruppe 2: Souveränität & Recht
|
||||
{
|
||||
title:
|
||||
"Website ohne Cookie-Banner: So funktioniert datenschutzkonformes Design",
|
||||
description:
|
||||
"Nutzererfahrung ohne nervige Popups: Wie Sie Vertrauen gewinnen und DSGVO-konform bleiben.",
|
||||
date: "2026-02-10",
|
||||
slug: "website-without-cookie-banners",
|
||||
tags: ["privacy", "ux-design"],
|
||||
},
|
||||
{
|
||||
title: "Warum ich keine US-Cloud-Plattformen für Ihre Daten nutze",
|
||||
description:
|
||||
"Souveränität durch lokale Infrastruktur: Warum Ihre Daten in Europa am sichersten sind.",
|
||||
date: "2026-02-09",
|
||||
slug: "no-us-cloud-platforms",
|
||||
tags: ["privacy", "architecture"],
|
||||
},
|
||||
{
|
||||
title: "DSGVO-Konformität ohne Abmahnrisiko: Der System-Ansatz",
|
||||
description:
|
||||
"Rechtssicherheit ist kein Zufall, sondern das Ergebnis eines klaren technischen Konzepts.",
|
||||
date: "2026-02-08",
|
||||
slug: "gdpr-conformity-system-approach",
|
||||
tags: ["privacy", "architecture"],
|
||||
},
|
||||
{
|
||||
title: "Warum Baukasten-Systeme Ihre digitale Unabhängigkeit gefährden",
|
||||
description:
|
||||
"Vendor Lock-in vermeiden: Warum Sie die volle Kontrolle über Ihren Code und Ihre Daten behalten müssen.",
|
||||
date: "2026-02-07",
|
||||
slug: "builder-systems-threaten-independence",
|
||||
tags: ["architecture", "business"],
|
||||
},
|
||||
{
|
||||
title: "Analytics ohne Tracking: Erfolg messen, ohne Kunden zu nerven",
|
||||
description:
|
||||
"Privacy-first Metriken: Wie Sie wertvolle Insights gewinnen, ohne die Privatsphäre Ihrer Nutzer zu verletzen.",
|
||||
date: "2026-02-06",
|
||||
slug: "analytics-without-tracking",
|
||||
tags: ["privacy", "ux-design"],
|
||||
},
|
||||
|
||||
// Gruppe 3: Effizienz & Investment
|
||||
{
|
||||
title: "Warum eine schnelle Website Ihren CO₂-Fußabdruck halbiert",
|
||||
description:
|
||||
"Digitale Nachhaltigkeit: Wie effizienter Code nicht nur Kunden, sondern auch das Klima schont.",
|
||||
date: "2026-02-05",
|
||||
slug: "fast-website-carbon-footprint",
|
||||
tags: ["performance", "engineering"],
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Fixpreis statt Stundensatz: Warum ich keine Kostenvoranschläge schätze",
|
||||
description:
|
||||
"Transparenz und Ergebnisfokus: Warum klassische Schätzungen oft am Ziel vorbeischießen.",
|
||||
date: "2026-02-04",
|
||||
slug: "fixed-price-vs-hourly-rate",
|
||||
tags: ["business", "engineering"],
|
||||
},
|
||||
{
|
||||
title: "Warum ich erst baue und wir dann darüber reden",
|
||||
description:
|
||||
"Prototyping-first: Warum echte Interaktion wertvoller ist als hundert Mockups.",
|
||||
date: "2026-02-03",
|
||||
slug: "build-first-talk-later",
|
||||
tags: ["engineering", "ux-design"],
|
||||
},
|
||||
{
|
||||
title: "Website-Pflege: Warum Sie kein CMS brauchen, um Inhalte zu ändern",
|
||||
description:
|
||||
"Modernes Content Management: Effizienz durch Entkopplung von Design und Redaktion.",
|
||||
date: "2026-02-02",
|
||||
slug: "maintenance-without-cms",
|
||||
tags: ["architecture", "business"],
|
||||
},
|
||||
{
|
||||
title: "Warum meine Websites auch nach fünf Jahren nicht veralten",
|
||||
description:
|
||||
"Invesitionssicherheit durch zukunftssichere Technologie-Stacks und zeitloses Design.",
|
||||
date: "2026-02-01",
|
||||
slug: "timeless-websites",
|
||||
tags: ["business", "architecture"],
|
||||
},
|
||||
|
||||
// Gruppe 4: Technik & Handwerk
|
||||
{
|
||||
title:
|
||||
"Clean Code: Warum die Struktur hinter der Oberfläche über Ihren Erfolg entscheidet",
|
||||
description:
|
||||
"Wartbarkeit als Wettbewerbsvorteil: Warum Qualität im Verborgenen beginnt.",
|
||||
date: "2026-01-31",
|
||||
slug: "clean-code-success",
|
||||
tags: ["engineering", "architecture"],
|
||||
},
|
||||
{
|
||||
title: "Responsives Design: Warum Skalieren allein nicht ausreicht",
|
||||
description:
|
||||
"Echte Adaptivität vs. einfache Größenanpassung: UX über alle Viewports hinweg.",
|
||||
date: "2026-01-30",
|
||||
slug: "responsive-design-scaling",
|
||||
tags: ["ux-design", "engineering"],
|
||||
},
|
||||
{
|
||||
title: "Hosting und Betrieb: Was hinter einem stabilen System steckt",
|
||||
description:
|
||||
"Managed Infrastructure: Warum die Wahl der Umgebung entscheidend für die Performance ist.",
|
||||
date: "2026-01-29",
|
||||
slug: "hosting-and-operation",
|
||||
tags: ["architecture", "performance"],
|
||||
},
|
||||
{
|
||||
title: "Warum ich keine fertigen Templates verwende",
|
||||
description:
|
||||
"Individualität als Standard: Warum 'von der Stange' oft teure Anpassungen nach sich zieht.",
|
||||
date: "2026-01-28",
|
||||
slug: "no-ready-made-templates",
|
||||
tags: ["ux-design", "performance"],
|
||||
},
|
||||
{
|
||||
title: "Schnittstellen ohne Stress: So gelingt der Daten-Sync zu Ihrem CRM",
|
||||
description:
|
||||
"Automatisierung durch Integration: Wie Sie manuelle Arbeit durch saubere APIs eliminieren.",
|
||||
date: "2026-01-27",
|
||||
slug: "seamless-crm-sync",
|
||||
tags: ["architecture", "engineering"],
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user