[codex] Add example app logo

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#FFFFFF</color>
-</resources>
+    <color name="ic_launcher_background">#F4F7F4</color>
+</resources>

examples/angular-app/src/app/app.component.ts

@@ -482,8 +482,11 @@ const DETACHED_CENTER_QUERY = '(min-width: 43.75rem)';
     <cap-sheet-outlet #travelOutlet [attr.for]="depthOutletFor" data-travel-type="depth" class="demo-depth-stage">
       <main class="demo-app">
         <header class="demo-hero">
-          <div>
-            <p class="demo-kicker">Angular playground</p>
+          <div class="demo-hero-copy">
+            <div class="demo-brand">
+              <img class="demo-logo" src="/capgo-sheets-logo.svg" alt="" />
+              <p class="demo-kicker">Angular playground</p>
+            </div>
             <h1>Capgo Sheets usecases</h1>
             <p>Open every sheet pattern from the real preview viewport. No fake phone frame, no clipped overlay.</p>
           </div>

examples/react-app/src/UsecaseGallery.tsx

@@ -278,8 +278,11 @@ export function UsecaseGallery() {
       <TravelOutlet for={depthOutletFor} className="demo-depth-stage" type="depth">
         <main className="demo-app">
           <header className="demo-hero">
-            <div>
-              <p className="demo-kicker">React playground</p>
+            <div className="demo-hero-copy">
+              <div className="demo-brand">
+                <img className="demo-logo" src="/capgo-sheets-logo.svg" alt="" />
+                <p className="demo-kicker">React playground</p>
+              </div>
               <h1>Capgo Sheets usecases</h1>
               <p>Open every sheet pattern from the real preview viewport. No fake phone frame, no clipped overlay.</p>
             </div>

examples/shared/usecase-gallery.css

@@ -77,6 +77,24 @@ cap-sheet-trigger.demo-link {
   padding-block: 1em 1.25em;
 }
 
+.demo-hero-copy {
+  min-width: 0;
+}
+
+.demo-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+}
+
+.demo-logo {
+  width: 3rem;
+  height: 3rem;
+  flex: 0 0 auto;
+  border-radius: 0.875rem;
+  box-shadow: 0 0.75rem 2rem rgb(20 23 22 / 0.14);
+}
+
 .demo-hero h1 {
   max-width: 12em;
   margin: 0;

examples/solid-app/src/UsecaseGallery.tsx

@@ -276,8 +276,11 @@ export function UsecaseGallery() {
       <TravelOutlet for={depthOutletFor} class="demo-depth-stage" type="depth">
         <main class="demo-app">
           <header class="demo-hero">
-            <div>
-              <p class="demo-kicker">Solid playground</p>
+            <div class="demo-hero-copy">
+              <div class="demo-brand">
+                <img class="demo-logo" src="/capgo-sheets-logo.svg" alt="" />
+                <p class="demo-kicker">Solid playground</p>
+              </div>
               <h1>Capgo Sheets usecases</h1>
               <p>Open every sheet pattern from the real preview viewport. No fake phone frame, no clipped overlay.</p>
             </div>

examples/svelte-app/src/App.svelte

@@ -753,8 +753,11 @@
 <cap-sheet-outlet use:travelOutlet={'depth'} for={depthOutletFor} class="demo-depth-stage">
   <main class="demo-app">
     <header class="demo-hero">
-      <div>
-        <p class="demo-kicker">Svelte playground</p>
+      <div class="demo-hero-copy">
+        <div class="demo-brand">
+          <img class="demo-logo" src="/capgo-sheets-logo.svg" alt="" />
+          <p class="demo-kicker">Svelte playground</p>
+        </div>
         <h1>Capgo Sheets usecases</h1>
         <p>Open every sheet pattern from the real preview viewport. No fake phone frame, no clipped overlay.</p>
       </div>

examples/vue-app/src/UsecaseGallery.vue

@@ -464,8 +464,11 @@ function booleanAttributes(options?: SheetOptions): Record<string, string> {
   <cap-sheet-outlet :ref="travelOutletRefFor('depth')" :for="depthOutletFor" class="demo-depth-stage">
     <main class="demo-app">
       <header class="demo-hero">
-        <div>
-          <p class="demo-kicker">Vue playground</p>
+        <div class="demo-hero-copy">
+          <div class="demo-brand">
+            <img class="demo-logo" src="/capgo-sheets-logo.svg" alt="" />
+            <p class="demo-kicker">Vue playground</p>
+          </div>
           <h1>Capgo Sheets usecases</h1>
           <p>Open every sheet pattern from the real preview viewport. No fake phone frame, no clipped overlay.</p>
         </div>