fix(Hero): self-stretch image fills full height, icon as SVG, Playfair 600

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/Hero.tsx

@@ -9,12 +9,11 @@ const avatars = [
 
 export function Hero() {
   return (
-    <section className="bg-[#f5f0e8] flex items-center h-[36.4375rem] overflow-hidden">
+    <section className="bg-[#f5f0e8] flex items-stretch overflow-hidden h-[36.4375rem]">
 
       {/* Left: text content */}
-      <div className="flex flex-col gap-[1.75rem] pl-[5rem] pr-[2.5rem] flex-1 min-w-0">
+      <div className="flex-1 flex flex-col justify-center gap-[1.75rem] pl-[5rem] pr-[2.5rem] min-w-0">
 
-        {/* Heading */}
         <h1
           className="text-[4rem] font-semibold leading-[4.5rem] text-black"
           style={{ fontFamily: "var(--font-playfair)" }}
@@ -23,40 +22,39 @@ export function Hero() {
           <span className="text-[#fdb705]">.</span>
         </h1>
 
-        {/* Subheading */}
         <p className="text-[1.5rem] font-semibold text-[#222221] leading-[2.375rem]">
           Für Menschen mit Familie, Verantwortung und zu wenig Zeit
         </p>
 
-        {/* CTA */}
-        <Link
-          href="/challenge"
-          className="inline-flex items-center gap-[1rem] self-start px-[1.5rem] py-[0.75rem] rounded-[0.5rem] bg-[#f6a701] text-[1.375rem] font-semibold text-[#222221] hover:brightness-95 transition-all"
-        >
-          Starte mit der 7-Tage-Challenge
-          <Image
-            src="/icon-check.png"
-            alt=""
-            width={25}
-            height={19}
-          />
-        </Link>
+        <div>
+          <Link
+            href="/challenge"
+            className="inline-flex items-center gap-[1rem] px-[1.5rem] py-[0.75rem] rounded-[0.5rem] bg-[#f6a701] text-[1.375rem] font-semibold text-[#222221] hover:brightness-95 transition-all"
+          >
+            Starte mit der 7-Tage-Challenge
+            <Image
+              src="/icon-check.svg"
+              alt=""
+              width={25}
+              height={19}
+              className="shrink-0"
+            />
+          </Link>
+        </div>
 
-        {/* Social proof */}
         <div className="flex items-center gap-[0.75rem]">
           <div className="flex items-center">
             {avatars.map((avatar, i) => (
               <div
                 key={avatar.src}
-                className="w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden border-2 border-[#f5f0e8]"
-                style={{ marginLeft: i === 0 ? 0 : "-0.5rem" }}
+                className="relative w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden border-2 border-[#f5f0e8] shrink-0"
+                style={{ marginLeft: i === 0 ? 0 : "-0.625rem" }}
               >
                 <Image
                   src={avatar.src}
                   alt={avatar.alt}
-                  width={45}
-                  height={45}
-                  className="object-cover w-full h-full"
+                  fill
+                  className="object-cover"
                 />
               </div>
             ))}
@@ -67,8 +65,8 @@ export function Hero() {
         </div>
       </div>
 
-      {/* Right: hero image */}
-      <div className="relative h-full w-[55.4375rem] shrink-0">
+      {/* Right: hero image — self-stretch fills full section height */}
+      <div className="relative shrink-0 self-stretch w-[55.4375rem]">
         <Image
           src="/hero.jpg"
           alt="Notizbuch mit Tagesplan und Kaffee"

app/layout.tsx

@@ -16,7 +16,7 @@ const geistMono = Geist_Mono({
 const playfair = Playfair_Display({
   variable: "--font-playfair",
   subsets: ["latin"],
-  weight: ["700", "800"],
+  weight: ["600", "700", "800"],
 });
 
 const caveat = Caveat({