Intro: Logo freigestellt auf schwarzer Section mit Rasterlinien

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.webklar-preview.json

@@ -0,0 +1,11 @@
+{
+  "enabled": true,
+  "type": "node_build",
+  "branch": "main",
+  "displayName": "Amin B.Ahmadi Friseur Salon",
+  "templateName": "webklar-preview-template",
+  "projectType": "preview",
+  "public": false,
+  "template": false,
+  "subdomain": "amin-ahmadi-friseur"
+}

src/components/Intro.tsx

@@ -1,18 +1,20 @@
 import { salon } from '../data/salon'
 import { Emblem } from './Emblem'
+import { GridLines } from './GridLines'
 import { FadeIn, RevealLines } from './Reveal'
 
 export function Intro() {
   return (
-    <section id="salon" className="px-4 py-24 md:px-8 md:py-36">
+    <section id="salon" className="relative isolate bg-ink px-4 py-24 text-paper md:px-8 md:py-36">
+      <GridLines tone="dark" />
       <div className="grid gap-10 md:grid-cols-12 md:gap-8">
-        {/* Logo wie auf Instagram: helle Linien auf dunklem Grund */}
+        {/* Logo wie auf Instagram: helle Linien, freigestellt auf dem dunklen Section-Hintergrund */}
-        <div className="grid aspect-square place-items-center bg-ink md:col-span-4">
+        <div className="grid aspect-square place-items-center md:col-span-4">
           <Emblem className="w-[84%]" />
         </div>
 
         <div className="flex flex-col justify-between gap-12 md:col-span-8">
-          <div className="mini flex justify-between">
+          <div className="mini flex justify-between text-paper/60">
             <span>Über uns</span>
             <span>{salon.city}</span>
           </div>