From df824612b3a97813d35fac2c76c898fdc0dacb2b Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Wed, 19 Aug 2026 12:41:03 +0200
Subject: [PATCH] Add preview image and refine live-demo SVG

Add readme preview PNG and tweak live-demo-button.svg visuals: introduce a banner clipPath, add a shadowed background rect, wrap the main artwork in a clipped group, and move the outer border stroke outside the clipped area so the stroke renders correctly. Also remove a small teal accent circle. These changes improve rendering and provide a preview asset for the README.
---
 readme-assets/live-demo-button.svg | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/readme-assets/live-demo-button.svg b/readme-assets/live-demo-button.svg
index 1c805f4..0ed485f 100644
--- a/readme-assets/live-demo-button.svg
+++ b/readme-assets/live-demo-button.svg
@@ -15,17 +15,19 @@
     <filter id="shadow" x="-10%" y="-30%" width="120%" height="170%">
       <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#111827" flood-opacity="0.28"/>
     </filter>
+    <clipPath id="banner-clip">
+      <rect x="4" y="4" width="772" height="136" rx="30"/>
+    </clipPath>
   </defs>
 
-  <g filter="url(#shadow)">
+  <rect x="4" y="4" width="772" height="136" rx="30" fill="#111827" fill-opacity="0.01" filter="url(#shadow)"/>
+  <g clip-path="url(#banner-clip)">
     <rect x="4" y="4" width="772" height="136" rx="30" fill="url(#background)"/>
-    <rect x="5" y="5" width="770" height="134" rx="29" fill="none" stroke="#c4b5fd" stroke-opacity="0.7" stroke-width="2"/>
     <path d="M34 5H400L270 140H5V34A29 29 0 0 1 34 5Z" fill="url(#shine)"/>
 
     <circle cx="72" cy="72" r="43" fill="#ffffff" fill-opacity="0.14"/>
     <rect x="51" y="35" width="42" height="74" rx="10" fill="none" stroke="#ffffff" stroke-width="4"/>
     <path d="M65 43h14M67 100h10" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
-    <circle cx="86" cy="48" r="8" fill="#22d3ee"/>
 
     <text x="132" y="66" fill="#ffffff" font-family="Segoe UI, Arial, sans-serif" font-size="32" font-weight="800" letter-spacing="0.8">TRY THE LIVE DEMO</text>
     <text x="132" y="98" fill="#ede9fe" font-family="Segoe UI, Arial, sans-serif" font-size="17" font-weight="500">Experience the complete Sky Phone in your browser</text>
@@ -33,4 +35,5 @@
     <rect x="590" y="48" width="156" height="50" rx="25" fill="#ffffff"/>
     <text x="668" y="80" fill="#6d28d9" font-family="Segoe UI, Arial, sans-serif" font-size="16" font-weight="800" text-anchor="middle">OPEN NOW  →</text>
   </g>
+  <rect x="5" y="5" width="770" height="134" rx="29" fill="none" stroke="#c4b5fd" stroke-opacity="0.7" stroke-width="2"/>
 </svg>