feat: redesign page heroes, implement organic markers, and streamline contact flow
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Failing after 1m24s
Build & Deploy / 🏗️ Build (push) Failing after 4m3s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 5s
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Failing after 1m24s
Build & Deploy / 🏗️ Build (push) Failing after 4m3s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 5s
- Refined hero sections for About, Blog, Websites, and Case Studies for a bespoke industrial entry point. - Redesigned Marker component using layered SVG paths for an organic, hand-drawn highlighter effect. - Restored technical precision in ArchitectureVisualizer with refined line thickness. - Streamlined contact page by removing generic headers and prioritizing the configurator/gateway. - Updated technical references to reflect self-hosted Gitea infrastructure. - Cleaned up unused imports and addressed linting warnings across modified pages.
This commit is contained in:
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
|
||||
import { blogPosts } from "../../../src/data/blogPosts";
|
||||
import { PageHeader } from "../../../src/components/PageHeader";
|
||||
import { Section } from "../../../src/components/Section";
|
||||
import { Reveal } from "../../../src/components/Reveal";
|
||||
import { BlogPostClient } from "../../../src/components/BlogPostClient";
|
||||
import { PostComponents } from "../../../src/components/blog/posts";
|
||||
import { Card } from "../../../src/components/Layout";
|
||||
@@ -50,54 +51,58 @@ export default async function BlogPostPage({
|
||||
<main id="post-content">
|
||||
<Section containerVariant="wide" className="pt-0 md:pt-0">
|
||||
<div className="max-w-5xl mx-auto px-0 sm:px-4 md:px-0">
|
||||
<Card
|
||||
variant="glass"
|
||||
techBorder
|
||||
className="relative overflow-hidden rounded-none sm:rounded-3xl"
|
||||
>
|
||||
{/* 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]" />
|
||||
<Reveal delay={0.4} width="100%">
|
||||
<Card
|
||||
variant="glass"
|
||||
techBorder
|
||||
className="relative overflow-hidden rounded-none sm:rounded-3xl"
|
||||
>
|
||||
{/* 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]" />
|
||||
|
||||
<div className="relative z-10 px-5 py-10 md:px-16 md:py-20">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[9px] md:text-[10px] font-bold text-slate-400 mb-10 md: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 sm:gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-slate-200 hidden sm:inline">|</span>
|
||||
<span>{readingTime} min Lesezeit</span>
|
||||
<div className="relative z-10 px-5 py-10 md:px-16 md:py-20">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[9px] md:text-[10px] font-bold text-slate-400 mb-10 md: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>
|
||||
<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-10 md:mb-12">
|
||||
{post.tags.map((tag, index) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
|
||||
>
|
||||
#{tag}
|
||||
<div className="flex items-center gap-4 sm:gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-slate-200 hidden sm:inline">
|
||||
|
|
||||
</span>
|
||||
<span>{readingTime} min Lesezeit</span>
|
||||
</div>
|
||||
<span>
|
||||
{slug.substring(0, 4).toUpperCase()}-
|
||||
{Math.floor(Math.random() * 999)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
</Card>
|
||||
{post.tags && post.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-10 md:mb-12">
|
||||
{post.tags.map((tag, index) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md: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>
|
||||
</Card>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Section>
|
||||
</main>
|
||||
|
||||
@@ -5,7 +5,6 @@ import { useState, useEffect } from "react";
|
||||
import { MediumCard } from "../../src/components/MediumCard";
|
||||
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";
|
||||
@@ -124,7 +123,7 @@ export default function BlogPage() {
|
||||
) : (
|
||||
<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%">
|
||||
<Reveal key={post.slug} delay={0.05 * i} width="100%">
|
||||
<MediumCard post={post} />
|
||||
</Reveal>
|
||||
))}
|
||||
@@ -134,7 +133,7 @@ export default function BlogPage() {
|
||||
{/* Pagination */}
|
||||
{hasMore && (
|
||||
<div className="flex justify-center pt-8">
|
||||
<Reveal delay={0.1}>
|
||||
<Reveal delay={0.1} width="fit-content">
|
||||
<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"
|
||||
|
||||
Reference in New Issue
Block a user