new version

src/components/Hero.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { ArrowRight } from "lucide-react";
-import { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import Silk from "@/components/Silk";
 import CountUp from "@/components/CountUp";
 
@@ -15,10 +15,28 @@ const SPARKLE_SVG = (
 );
 
 function DemoButtonLetters({ text }: { text: string }) {
+  // #region agent log
+  const chars = text.split("");
+  const spaceIndex = chars.findIndex((c) => c === " ");
+  const lastIndex = chars.length - 1;
+  const lastChar = chars[lastIndex];
+  fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      location: "Hero.tsx:DemoButtonLetters",
+      message: "Letter split for button text",
+      data: { text, len: chars.length, spaceIndex, spaceChar: spaceIndex >= 0 ? chars[spaceIndex] : null, lastIndex, lastChar },
+      timestamp: Date.now(),
+      sessionId: "debug-session",
+      hypothesisId: "A,C",
+    }),
+  }).catch(() => {});
+  // #endregion
   return (
     <>
-      {text.split("").map((char, i) => (
-        <span key={i} className="btn-letter">
+      {chars.map((char, i) => (
+        <span key={i} className={char === " " ? "btn-letter btn-letter-space" : "btn-letter"}>
           {char}
         </span>
       ))}
@@ -31,6 +49,31 @@ const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026
 const Hero = () => {
   const navigate = useNavigate();
   const [companyAge, setCompanyAge] = useState("");
+  const secondBtnRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const el = secondBtnRef.current;
+    if (!el) return;
+    const firstTxtWrapper = el.querySelector(".txt-wrapper");
+    const letters = firstTxtWrapper ? firstTxtWrapper.querySelectorAll(".btn-letter") : [];
+    const spaceIdx = 8;
+    const lastIdx = 16;
+    const wSpace = letters[spaceIdx]?.getBoundingClientRect?.()?.width ?? -1;
+    const wLast = letters[lastIdx]?.getBoundingClientRect?.()?.width ?? -1;
+    fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        location: "Hero.tsx:useEffect:measure",
+        message: "Measured btn-letter widths (space + last)",
+        data: { letterCount: letters.length, wSpace, wLast, spaceIdx, lastIdx },
+        timestamp: Date.now(),
+        sessionId: "debug-session",
+        runId: "post-fix",
+        hypothesisId: "B,D,E",
+      }),
+    }).catch(() => {});
+  }, []);
 
   useEffect(() => {
     const calculateAge = () => {
@@ -113,21 +156,26 @@ const Hero = () => {
             </div>
             <div className="btn-wrapper w-full sm:w-auto">
               <button
+                ref={secondBtnRef}
                 type="button"
                 className="btn w-full sm:w-auto justify-center"
-                onClick={() => navigate("/kontakt")}
-                aria-label="System-Demo anfordern"
+                onClick={() => {
+                  const el = document.getElementById("projects");
+                  if (el) el.scrollIntoView({ behavior: "smooth" });
+                  else navigate("/#projects");
+                }}
+                aria-label="Projekte ansehen"
               >
                 {SPARKLE_SVG}
                 <div className="txt-wrapper">
                   <span className="txt-width-helper" aria-hidden="true">
-                    <DemoButtonLetters text="System-Demo anfordern" />
+                    <DemoButtonLetters text="Projekte ansehen" />
                   </span>
                   <div className="txt-1">
-                    <DemoButtonLetters text="System-Demo anfordern" />
+                    <DemoButtonLetters text="Projekte ansehen" />
                   </div>
                   <div className="txt-2">
-                    <DemoButtonLetters text="Wird angefordert..." />
+                    <DemoButtonLetters text="Wird geladen..." />
                   </div>
                 </div>
               </button>