feat: redesign page heroes, implement organic markers, and streamline contact flow

- 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.

apps/web/app/technologies/[slug]/content.tsx

@@ -1,99 +1,141 @@
-'use client';
+"use client";
 
-import React from 'react';
-import Link from 'next/link';
-import { Container } from '../../../src/components/Layout';
-import { Label } from '../../../src/components/Typography';
-import { Check, ArrowLeft, Zap, ExternalLink } from 'lucide-react';
-import { technologies } from './data';
+import React from "react";
+import Link from "next/link";
+import { Container } from "../../../src/components/Layout";
+import { Label } from "../../../src/components/Typography";
+import { Check, ArrowLeft, Zap, ExternalLink } from "lucide-react";
+import { technologies } from "./data";
+import { Reveal } from "../../../src/components/Reveal";
 
 export default function TechnologyContent({ slug }: { slug: string }) {
-    const tech = technologies[slug];
-
-    if (!tech) {
-        return (
-            <div className="min-h-screen flex items-center justify-center">
-                <div className="text-center">
-                    <h1 className="text-4xl font-bold mb-4">Technology Not Found</h1>
-                    <Link href="/" className="text-blue-600 hover:underline">Return Home</Link>
-                </div>
-            </div>
-        );
-    }
-
-    const Icon = tech.icon;
+  const tech = technologies[slug];
 
+  if (!tech) {
     return (
-        <div className="bg-white min-h-screen text-slate-900 pb-24">
-            <div className="bg-slate-50 border-b border-slate-200">
-                <Container className="py-24">
-                    <Link href="/case-studies/klz-cables" className="inline-flex items-center text-sm font-bold text-slate-500 hover:text-slate-900 mb-8 transition-colors">
-                        <ArrowLeft className="w-4 h-4 mr-2" /> Back to Case Study
-                    </Link>
-
-                    <div className="flex flex-col md:flex-row items-start gap-8">
-                        <div className={`p-6 rounded-2xl shadow-lg ${tech.color}`}>
-                            <Icon className="w-12 h-12" />
-                        </div>
-                        <div className="flex-1">
-                            <Label className="text-slate-400 mb-2">TECHNOLOGY DEEP DIVE</Label>
-                            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">{tech.title}</h1>
-                            <p className="text-xl text-slate-500 font-medium">{tech.subtitle}</p>
-                        </div>
-                    </div>
-                </Container>
-            </div>
-
-            <Container className="py-16">
-                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
-                    <div className="lg:col-span-8 space-y-12">
-                        <section>
-                            <h2 className="text-2xl font-bold mb-4">What is it?</h2>
-                            <p className="text-xl leading-relaxed text-slate-700">{tech.description}</p>
-                        </section>
-
-                        <section>
-                            <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
-                                <Zap className="w-6 h-6 text-amber-500" /> Why I use it
-                            </h2>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                {tech.benefits.map((benefit, i) => (
-                                    <div key={i} className="flex gap-3 p-4 bg-slate-50 rounded-xl border border-slate-100">
-                                        <Check className="w-5 h-5 text-green-600 shrink-0" />
-                                        <span className="font-medium text-slate-700">{benefit}</span>
-                                    </div>
-                                ))}
-                            </div>
-                        </section>
-
-                        <section className="bg-blue-50 border border-blue-100 rounded-2xl p-8">
-                            <Label className="text-blue-600 mb-2">CUSTOMER IMPACT</Label>
-                            <h3 className="text-2xl font-bold text-slate-900 mb-4">What does this mean for you?</h3>
-                            <p className="text-lg text-slate-700 leading-relaxed">
-                                {tech.customerValue}
-                            </p>
-                        </section>
-                    </div>
-
-                    <div className="lg:col-span-4 space-y-8">
-                        <div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 sticky top-24">
-                            <h3 className="font-bold text-slate-900 mb-4">Related Technologies</h3>
-                            <div className="space-y-2">
-                                {tech.related.map((item) => (
-                                    <Link
-                                        key={item.slug}
-                                        href={`/technologies/${item.slug}`}
-                                        className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-slate-400 hover:shadow-sm transition-all group"
-                                    >
-                                        <span className="font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
-                                        <ExternalLink className="w-4 h-4 text-slate-400 group-hover:text-slate-600" />
-                                    </Link>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </Container>
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Technology Not Found</h1>
+          <Link href="/" className="text-blue-600 hover:underline">
+            Return Home
+          </Link>
         </div>
+      </div>
     );
+  }
+
+  const Icon = tech.icon;
+
+  return (
+    <div className="bg-white min-h-screen text-slate-900 pb-24">
+      <div className="bg-slate-50 border-b border-slate-200">
+        <Container className="py-24">
+          <Reveal>
+            <Link
+              href="/case-studies/klz-cables"
+              className="inline-flex items-center text-sm font-bold text-slate-500 hover:text-slate-900 mb-8 transition-colors"
+            >
+              <ArrowLeft className="w-4 h-4 mr-2" /> Back to Case Study
+            </Link>
+          </Reveal>
+
+          <div className="flex flex-col md:flex-row items-start gap-8">
+            <Reveal>
+              <div className={`p-6 rounded-2xl shadow-lg ${tech.color}`}>
+                <Icon className="w-12 h-12" />
+              </div>
+            </Reveal>
+            <div className="flex-1">
+              <Reveal delay={0.1}>
+                <Label className="text-slate-400 mb-2">
+                  TECHNOLOGY DEEP DIVE
+                </Label>
+              </Reveal>
+              <Reveal delay={0.2}>
+                <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">
+                  {tech.title}
+                </h1>
+              </Reveal>
+              <Reveal delay={0.3}>
+                <p className="text-xl text-slate-500 font-medium">
+                  {tech.subtitle}
+                </p>
+              </Reveal>
+            </div>
+          </div>
+        </Container>
+      </div>
+
+      <Container className="py-16">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
+          <div className="lg:col-span-8 space-y-12">
+            <section>
+              <Reveal>
+                <h2 className="text-2xl font-bold mb-4">What is it?</h2>
+                <p className="text-xl leading-relaxed text-slate-700">
+                  {tech.description}
+                </p>
+              </Reveal>
+            </section>
+
+            <section>
+              <Reveal>
+                <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
+                  <Zap className="w-6 h-6 text-amber-500" /> Why I use it
+                </h2>
+              </Reveal>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {tech.benefits.map((benefit, i) => (
+                  <Reveal key={i} delay={0.1 + i * 0.05}>
+                    <div className="flex gap-3 p-4 bg-slate-50 rounded-xl border border-slate-100 h-full">
+                      <Check className="w-5 h-5 text-green-600 shrink-0" />
+                      <span className="font-medium text-slate-700">
+                        {benefit}
+                      </span>
+                    </div>
+                  </Reveal>
+                ))}
+              </div>
+            </section>
+
+            <Reveal delay={0.4}>
+              <section className="bg-blue-50 border border-blue-100 rounded-2xl p-8">
+                <Label className="text-blue-600 mb-2">CUSTOMER IMPACT</Label>
+                <h3 className="text-2xl font-bold text-slate-900 mb-4">
+                  What does this mean for you?
+                </h3>
+                <p className="text-lg text-slate-700 leading-relaxed">
+                  {tech.customerValue}
+                </p>
+              </section>
+            </Reveal>
+          </div>
+
+          <div className="lg:col-span-4 space-y-8">
+            <Reveal delay={0.5}>
+              <div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 sticky top-24">
+                <h3 className="font-bold text-slate-900 mb-4">
+                  Related Technologies
+                </h3>
+                <div className="space-y-2">
+                  {tech.related.map((item) => (
+                    <Link
+                      key={item.slug}
+                      href={`/technologies/${item.slug}`}
+                      className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-slate-400 hover:shadow-sm transition-all group"
+                    >
+                      <span className="font-medium text-slate-700 group-hover:text-slate-900">
+                        {item.name}
+                      </span>
+                      <ExternalLink className="w-4 h-4 text-slate-400 group-hover:text-slate-600" />
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </Reveal>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
 }