@muskanmeet/invoicing-design-system 0.1.0

package/.local/skills/slides/templates/zen-meditation.md

@@ -0,0 +1,284 @@
+# Zen Meditation
+
+**Visual Reference**: Before generating any slides or styles, list the `attached_assets/` directory to find the template reference image (filename pattern: `query-choice-<timestamp>-<template-id>.png`). Open and visually read that image. Your first slide MUST match this preview image as closely as possible — replicate its exact layout, color palette, typography, and composition. Build the first slide, then take a screenshot and compare it against the reference image to verify fidelity. Only after confirming a close match should you proceed with the remaining slides, maintaining consistent styling guided by the description below.
+
+The "ZenMeditation" template embodies a serene and minimalist aesthetic, characterized by a calming layout and soft color palette. The background color is a solid #F4F1ED, while text colors include #2C2C2A for primary text, #7A7874 for secondary text, #D1C9BE for a decorative line, #1A1A19 for the main heading, #5A5854 for the subtitle, and #A39E96 for the footer text. The font family used is 'Space Grotesk' for general text and 'DM Mono' for specific elements, providing a modern yet understated feel. Key layout elements include a flexible column structure with a decorative horizontal line, a prominent heading, and a background image of a zen garden located at "/__mockup/photos/zen-garden.jpg". The overall aesthetic feel is tranquil and modern.
+
+## Source Code
+
+**Component:** `ZenMeditation`
+
+### Slide 1 — Title (`slide-styles/ZenMeditation.tsx`)
+
+```tsx
+export function ZenMeditation() {
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        backgroundColor: "#F4F1ED",
+        color: "#2C2C2A",
+        fontFamily: "'Space Grotesk', sans-serif",
+        display: "flex",
+      }}
+    >
+      <div
+        style={{
+          flex: 1,
+          padding: "6vh 5vw",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          boxSizing: "border-box",
+        }}
+      >
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <div style={{ fontSize: "1.5vw", fontWeight: 700, letterSpacing: "-0.05em" }}>acme.co</div>
+          <div style={{ fontSize: "1vw", fontFamily: "'DM Mono', monospace", color: "#7A7874" }}>2026</div>
+        </div>
+        
+        <div style={{ marginBottom: "10vh" }}>
+          <div style={{ width: "3vw", height: "0.2vh", backgroundColor: "#D1C9BE", marginBottom: "4vh" }}></div>
+          <h1 style={{ fontSize: "7vw", margin: 0, fontWeight: 300, lineHeight: 1.1, letterSpacing: "-0.03em", color: "#1A1A19" }}>
+            Example<br />Deck
+          </h1>
+          <p style={{ fontSize: "1.5vw", marginTop: "4vh", color: "#5A5854", lineHeight: 1.4, fontWeight: 400, maxWidth: "35vw" }}>
+            Your compelling subtitle goes here. Describe your big idea in a single sentence.
+          </p>
+        </div>
+
+        <div>
+          <div style={{ fontSize: "0.9vw", fontFamily: "'DM Mono', monospace", color: "#A39E96", textTransform: "uppercase", letterSpacing: "0.1em" }}>
+            Example Company, Inc. / Confidential
+          </div>
+        </div>
+      </div>
+
+      <div
+        style={{
+          width: "45vw",
+          height: "100vh",
+          backgroundImage: 'url("/__mockup/photos/zen-garden.jpg")',
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      ></div>
+    </div>
+  );
+}
+```
+
+### Slide 2 (`slide-pages/ZenMeditationPage2.tsx`)
+
+```tsx
+export function ZenMeditationPage2() {
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        backgroundColor: "#F4F1ED",
+        color: "#2C2C2A",
+        fontFamily: "'Space Grotesk', sans-serif",
+        display: "flex",
+        flexDirection: "column",
+        padding: "6vh 5vw",
+        boxSizing: "border-box",
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <div style={{ fontSize: "1.5vw", fontWeight: 700, letterSpacing: "-0.05em" }}>acme.co</div>
+        <div style={{ fontSize: "1vw", fontFamily: "'DM Mono', monospace", color: "#7A7874" }}>02</div>
+      </div>
+      
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", marginTop: "4vh" }}>
+        <div style={{ width: "3vw", height: "0.2vh", backgroundColor: "#D1C9BE", marginBottom: "4vh" }}></div>
+        <h2 style={{ fontSize: "4vw", margin: 0, fontWeight: 300, lineHeight: 1.1, letterSpacing: "-0.03em", color: "#1A1A19", maxWidth: "60vw" }}>
+          Finding balance in a chaotic market.
+        </h2>
+        
+        <div style={{ display: "flex", gap: "6vw", marginTop: "8vh" }}>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: "0.9vw", fontFamily: "'DM Mono', monospace", color: "#7A7874", marginBottom: "2vh", borderBottom: "0.1vh solid #D1C9BE", paddingBottom: "1vh" }}>01. THE PROBLEM</div>
+            <p style={{ fontSize: "1.2vw", color: "#5A5854", lineHeight: 1.5, fontWeight: 400 }}>
+              Teams are overwhelmed by noise, constant notifications, and scattered information across multiple platforms, leading to cognitive fatigue.
+            </p>
+          </div>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: "0.9vw", fontFamily: "'DM Mono', monospace", color: "#7A7874", marginBottom: "2vh", borderBottom: "0.1vh solid #D1C9BE", paddingBottom: "1vh" }}>02. THE APPROACH</div>
+            <p style={{ fontSize: "1.2vw", color: "#5A5854", lineHeight: 1.5, fontWeight: 400 }}>
+              We introduced mindful workflows, limiting interruptions and organizing data thoughtfully to restore focus and drive meaningful progress.
+            </p>
+          </div>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: "0.9vw", fontFamily: "'DM Mono', monospace", color: "#7A7874", marginBottom: "2vh", borderBottom: "0.1vh solid #D1C9BE", paddingBottom: "1vh" }}>03. THE OUTCOME</div>
+            <p style={{ fontSize: "1.2vw", color: "#5A5854", lineHeight: 1.5, fontWeight: 400 }}>
+              A serene, productive environment where deep work happens naturally, creativity flourishes, and team burnout is significantly reduced.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
+        <div style={{ fontSize: "0.9vw", fontFamily: "'DM Mono', monospace", color: "#A39E96", textTransform: "uppercase", letterSpacing: "0.1em" }}>
+          Market Analysis
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+### Slide 3 (`slide-pages/ZenMeditationPage3.tsx`)
+
+```tsx
+export function ZenMeditationPage3() {
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        backgroundColor: "#F4F1ED",
+        color: "#2C2C2A",
+        fontFamily: "'Space Grotesk', sans-serif",
+        display: "flex",
+      }}
+    >
+      <div
+        style={{
+          width: "40vw",
+          padding: "6vh 5vw",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          boxSizing: "border-box",
+          backgroundColor: "#EBE6E0",
+        }}
+      >
+        <div style={{ fontSize: "1.5vw", fontWeight: 700, letterSpacing: "-0.05em" }}>acme.co</div>
+        
+        <div>
+          <div style={{ width: "3vw", height: "0.2vh", backgroundColor: "#D1C9BE", marginBottom: "4vh" }}></div>
+          <h2 style={{ fontSize: "3.5vw", margin: 0, fontWeight: 300, lineHeight: 1.1, letterSpacing: "-0.03em", color: "#1A1A19" }}>
+            Measurable<br />clarity.
+          </h2>
+          <p style={{ fontSize: "1.2vw", marginTop: "3vh", color: "#5A5854", lineHeight: 1.5 }}>
+            Our metrics show a significant shift towards focused execution when distractions are minimized.
+          </p>
+        </div>
+        
+        <div style={{ fontSize: "0.9vw", fontFamily: "'DM Mono', monospace", color: "#A39E96", textTransform: "uppercase", letterSpacing: "0.1em" }}>
+          Data & Insights
+        </div>
+      </div>
+
+      <div
+        style={{
+          flex: 1,
+          padding: "6vh 5vw",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          boxSizing: "border-box",
+        }}
+      >
+        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "10vh" }}>
+          <div style={{ fontSize: "1vw", fontFamily: "'DM Mono', monospace", color: "#7A7874" }}>03</div>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "6vh", maxWidth: "40vw", margin: "0 auto", width: "100%" }}>
+          <div style={{ display: "flex", alignItems: "flex-end", gap: "2vw" }}>
+            <div style={{ fontSize: "7vw", fontWeight: 300, lineHeight: 0.8, letterSpacing: "-0.05em", color: "#1A1A19" }}>84%</div>
+            <div style={{ fontSize: "1vw", fontFamily: "'DM Mono', monospace", color: "#5A5854", paddingBottom: "1vh", borderBottom: "0.1vh solid #D1C9BE", flex: 1 }}>
+              INCREASE IN DEEP WORK
+            </div>
+          </div>
+          
+          <div style={{ display: "flex", alignItems: "flex-end", gap: "2vw" }}>
+            <div style={{ fontSize: "7vw", fontWeight: 300, lineHeight: 0.8, letterSpacing: "-0.05em", color: "#1A1A19" }}>-60%</div>
+            <div style={{ fontSize: "1vw", fontFamily: "'DM Mono', monospace", color: "#5A5854", paddingBottom: "1vh", borderBottom: "0.1vh solid #D1C9BE", flex: 1 }}>
+              REDUCTION IN CONTEXT SWITCHING
+            </div>
+          </div>
+
+          <div style={{ display: "flex", alignItems: "flex-end", gap: "2vw" }}>
+            <div style={{ fontSize: "7vw", fontWeight: 300, lineHeight: 0.8, letterSpacing: "-0.05em", color: "#1A1A19" }}>2.5x</div>
+            <div style={{ fontSize: "1vw", fontFamily: "'DM Mono', monospace", color: "#5A5854", paddingBottom: "1vh", borderBottom: "0.1vh solid #D1C9BE", flex: 1 }}>
+              FASTER PROJECT COMPLETION
+            </div>
+          </div>
+        </div>
+        
+        <div style={{ flex: 1 }}></div>
+      </div>
+    </div>
+  );
+}
+```
+
+### Slide 4 (`slide-pages/ZenMeditationPage4.tsx`)
+
+```tsx
+export function ZenMeditationPage4() {
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        backgroundColor: "#1A1A19",
+        color: "#F4F1ED",
+        fontFamily: "'Space Grotesk', sans-serif",
+        display: "flex",
+        flexDirection: "column",
+        padding: "6vh 5vw",
+        boxSizing: "border-box",
+        position: "relative",
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", zIndex: 1 }}>
+        <div style={{ fontSize: "1.5vw", fontWeight: 700, letterSpacing: "-0.05em" }}>acme.co</div>
+        <div style={{ fontSize: "1vw", fontFamily: "'DM Mono', monospace", color: "#A39E96" }}>04</div>
+      </div>
+      
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", zIndex: 1 }}>
+        <div style={{ width: "0.2vh", height: "8vh", backgroundColor: "#5A5854", marginBottom: "4vh" }}></div>
+        <h2 style={{ fontSize: "5vw", margin: 0, fontWeight: 300, lineHeight: 1.1, letterSpacing: "-0.03em" }}>
+          Begin your practice.
+        </h2>
+        <p style={{ fontSize: "1.5vw", marginTop: "3vh", color: "#A39E96", lineHeight: 1.5, fontWeight: 400, maxWidth: "40vw" }}>
+          Join us in building a calmer, more deliberate future of work.
+        </p>
+        
+        <div style={{ marginTop: "6vh", display: "inline-block", border: "0.1vh solid #D1C9BE", padding: "2vh 4vw", borderRadius: "10vh", fontSize: "1vw", fontFamily: "'DM Mono', monospace", letterSpacing: "0.05em", cursor: "pointer", transition: "all 0.3s ease" }}>
+          hello@acme.co
+        </div>
+      </div>
+
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", zIndex: 1 }}>
+        <div style={{ fontSize: "0.9vw", fontFamily: "'DM Mono', monospace", color: "#5A5854", textTransform: "uppercase", letterSpacing: "0.1em" }}>
+          Example Company, Inc.
+        </div>
+        <div style={{ fontSize: "0.9vw", fontFamily: "'DM Mono', monospace", color: "#5A5854" }}>
+          San Francisco / Tokyo / London
+        </div>
+      </div>
+
+      <div style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: "radial-gradient(circle at center, rgba(44,44,42,0.5) 0%, rgba(26,26,25,1) 70%)",
+        zIndex: 0,
+        pointerEvents: "none"
+      }}></div>
+    </div>
+  );
+}
+```

package/.local/skills/slides/templates/zen-void.md

@@ -0,0 +1,244 @@
+# Zen Void
+
+**Visual Reference**: Before generating any slides or styles, list the `attached_assets/` directory to find the template reference image (filename pattern: `query-choice-<timestamp>-<template-id>.png`). Open and visually read that image. Your first slide MUST match this preview image as closely as possible — replicate its exact layout, color palette, typography, and composition. Build the first slide, then take a screenshot and compare it against the reference image to verify fidelity. Only after confirming a close match should you proceed with the remaining slides, maintaining consistent styling guided by the description below.
+
+The ZenVoid template features a serene and minimalist aesthetic, characterized by a soft, neutral background color of #FAF8F5. It incorporates a background image of a zen garden located at "/__mockup/photos/zen-garden.png," which is displayed in full cover. The text elements utilize the font family 'DM Sans' for the main title, styled in #1A1A1A, and 'Inter' for the subtitle and footer text, with colors #8A8578 and #1A1A1A respectively. Key layout elements include a rotated title positioned at the bottom right, a decorative horizontal line in #8A8578, and a circular accent in #1A1A1A at the bottom left. The overall aesthetic feel can be described as tranquil and modern.
+
+## Source Code
+
+**Component:** `ZenVoid`
+
+### Slide 1 — Title (`slide-styles/ZenVoid.tsx`)
+
+```tsx
+export function ZenVoid() {
+  return (
+    <div style={{ width: "100vw", height: "100vh", overflow: "hidden", position: "relative", backgroundColor: "#FAF8F5" }}>
+      <img 
+        src="/__mockup/photos/zen-garden.png" 
+        alt="Zen Garden" 
+        style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", objectFit: "cover" }} 
+      />
+      
+      <div style={{
+        position: "absolute",
+        right: "5vw",
+        bottom: "10vh",
+        transform: "rotate(-90deg)",
+        transformOrigin: "right bottom",
+        display: "flex",
+        alignItems: "center",
+        gap: "2vw",
+        whiteSpace: "nowrap"
+      }}>
+        <h1 style={{ 
+          fontFamily: "'DM Sans', sans-serif", 
+          color: "#1A1A1A", 
+          fontSize: "4.5vw", 
+          margin: 0, 
+          fontWeight: 400,
+          letterSpacing: "-0.02em"
+        }}>
+          Example Deck
+        </h1>
+        <div style={{ width: "3vw", height: "1px", background: "#8A8578" }} />
+        <p style={{
+          fontFamily: "'Inter', sans-serif",
+          color: "#8A8578",
+          fontSize: "1.2vw",
+          margin: 0,
+          fontWeight: 300,
+          letterSpacing: "0.02em"
+        }}>
+          Your compelling subtitle goes here. Describe your big idea in a single sentence.
+        </p>
+      </div>
+
+      <div style={{
+        position: "absolute",
+        bottom: "6vh",
+        left: "5vw",
+        width: "1.5vw",
+        height: "1.5vw",
+        borderRadius: "50%",
+        background: "#1A1A1A"
+      }} />
+
+      <div style={{
+        position: "absolute",
+        bottom: "6vh",
+        right: "5vw",
+        fontFamily: "'Inter', sans-serif",
+        color: "#1A1A1A",
+        fontSize: "0.8vw",
+        letterSpacing: "0.1em",
+        opacity: 0.8
+      }}>
+        acme.co
+      </div>
+    </div>
+  );
+}
+```
+
+### Slide 2 (`slide-pages/ZenVoidPage2.tsx`)
+
+```tsx
+export function ZenVoidPage2() {
+  return (
+    <div style={{ width: "100vw", height: "100vh", overflow: "hidden", position: "relative", backgroundColor: "#FAF8F5", color: "#1A1A1A", fontFamily: "'Inter', sans-serif" }}>
+      
+      {/* Header */}
+      <div style={{ position: "absolute", top: "15vh", left: "10vw", width: "80vw" }}>
+        <h2 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: "3.5vw", fontWeight: 400, margin: 0, letterSpacing: "-0.02em" }}>
+          01. The Approach
+        </h2>
+        <div style={{ width: "100%", height: "1px", background: "#8A8578", marginTop: "2vh", opacity: 0.3 }} />
+      </div>
+
+      {/* Content */}
+      <div style={{ position: "absolute", top: "35vh", left: "10vw", width: "40vw" }}>
+        <p style={{ fontSize: "1.5vw", lineHeight: 1.6, color: "#1A1A1A", fontWeight: 300, margin: "0 0 4vh 0" }}>
+          We focus on reduction. By stripping away the non-essential, we reveal the core truth of the product. The remaining elements are given room to breathe and purpose to serve.
+        </p>
+        <p style={{ fontSize: "1.2vw", lineHeight: 1.6, color: "#8A8578", fontWeight: 300, margin: 0 }}>
+          This philosophy extends across our entire design system, creating experiences that are both calm and highly functional. Emptiness is not a lack of content, but a presence of space.
+        </p>
+      </div>
+
+      <div style={{ position: "absolute", top: "35vh", left: "55vw", width: "35vw" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "3vh" }}>
+          {[
+            { title: "Clarity", desc: "Removing noise to amplify the signal." },
+            { title: "Intention", desc: "Every element must serve a distinct purpose." },
+            { title: "Space", desc: "Allowing concepts the room they need to land." }
+          ].map((item, i) => (
+            <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: "2vw" }}>
+              <div style={{ width: "0.5vw", height: "0.5vw", borderRadius: "50%", background: "#1A1A1A", marginTop: "0.6vw", flexShrink: 0 }} />
+              <div>
+                <h3 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: "1.5vw", fontWeight: 400, margin: "0 0 0.5vh 0" }}>{item.title}</h3>
+                <p style={{ fontSize: "1.1vw", color: "#8A8578", fontWeight: 300, margin: 0 }}>{item.desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div style={{ position: "absolute", bottom: "6vh", left: "5vw", display: "flex", alignItems: "center", gap: "1vw" }}>
+        <div style={{ width: "1.5vw", height: "1.5vw", borderRadius: "50%", background: "#1A1A1A" }} />
+        <span style={{ fontSize: "0.8vw", letterSpacing: "0.1em", fontWeight: 400 }}>02</span>
+      </div>
+
+      <div style={{ position: "absolute", bottom: "6vh", right: "5vw", fontSize: "0.8vw", letterSpacing: "0.1em", opacity: 0.8 }}>
+        acme.co
+      </div>
+    </div>
+  );
+}
+```
+
+### Slide 3 (`slide-pages/ZenVoidPage3.tsx`)
+
+```tsx
+export function ZenVoidPage3() {
+  return (
+    <div style={{ width: "100vw", height: "100vh", overflow: "hidden", position: "relative", backgroundColor: "#FAF8F5", color: "#1A1A1A", fontFamily: "'Inter', sans-serif" }}>
+      
+      {/* Header */}
+      <div style={{ position: "absolute", top: "15vh", left: "10vw", width: "80vw" }}>
+        <h2 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: "3.5vw", fontWeight: 400, margin: 0, letterSpacing: "-0.02em" }}>
+          02. The Metrics
+        </h2>
+        <div style={{ width: "100%", height: "1px", background: "#8A8578", marginTop: "2vh", opacity: 0.3 }} />
+      </div>
+
+      {/* Content - Data Viz */}
+      <div style={{ position: "absolute", top: "35vh", left: "10vw", width: "80vw", display: "flex", justifyContent: "space-between", alignItems: "flex-end", height: "40vh" }}>
+        
+        {/* Metric 1 */}
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "2vh" }}>
+          <div style={{ fontSize: "3vw", fontFamily: "'DM Sans', sans-serif", fontWeight: 400 }}>84%</div>
+          <div style={{ width: "12vw", height: "20vh", background: "#EAE6DF", position: "relative" }}>
+            <div style={{ position: "absolute", bottom: 0, left: 0, width: "100%", height: "84%", background: "#1A1A1A" }} />
+          </div>
+          <div style={{ fontSize: "1vw", color: "#8A8578", letterSpacing: "0.05em", textTransform: "uppercase" }}>RETENTION</div>
+        </div>
+
+        {/* Metric 2 */}
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "2vh" }}>
+          <div style={{ fontSize: "3vw", fontFamily: "'DM Sans', sans-serif", fontWeight: 400 }}>62%</div>
+          <div style={{ width: "12vw", height: "20vh", background: "#EAE6DF", position: "relative" }}>
+            <div style={{ position: "absolute", bottom: 0, left: 0, width: "100%", height: "62%", background: "#1A1A1A" }} />
+          </div>
+          <div style={{ fontSize: "1vw", color: "#8A8578", letterSpacing: "0.05em", textTransform: "uppercase" }}>ENGAGEMENT</div>
+        </div>
+
+        {/* Metric 3 */}
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "2vh" }}>
+          <div style={{ fontSize: "3vw", fontFamily: "'DM Sans', sans-serif", fontWeight: 400 }}>91%</div>
+          <div style={{ width: "12vw", height: "20vh", background: "#EAE6DF", position: "relative" }}>
+            <div style={{ position: "absolute", bottom: 0, left: 0, width: "100%", height: "91%", background: "#1A1A1A" }} />
+          </div>
+          <div style={{ fontSize: "1vw", color: "#8A8578", letterSpacing: "0.05em", textTransform: "uppercase" }}>ADOPTION</div>
+        </div>
+
+        {/* Metric 4 */}
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "2vh" }}>
+          <div style={{ fontSize: "3vw", fontFamily: "'DM Sans', sans-serif", fontWeight: 400 }}>45%</div>
+          <div style={{ width: "12vw", height: "20vh", background: "#EAE6DF", position: "relative" }}>
+            <div style={{ position: "absolute", bottom: 0, left: 0, width: "100%", height: "45%", background: "#1A1A1A" }} />
+          </div>
+          <div style={{ fontSize: "1vw", color: "#8A8578", letterSpacing: "0.05em", textTransform: "uppercase" }}>GROWTH</div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div style={{ position: "absolute", bottom: "6vh", left: "5vw", display: "flex", alignItems: "center", gap: "1vw" }}>
+        <div style={{ width: "1.5vw", height: "1.5vw", borderRadius: "50%", background: "#1A1A1A" }} />
+        <span style={{ fontSize: "0.8vw", letterSpacing: "0.1em", fontWeight: 400 }}>03</span>
+      </div>
+
+      <div style={{ position: "absolute", bottom: "6vh", right: "5vw", fontSize: "0.8vw", letterSpacing: "0.1em", opacity: 0.8 }}>
+        acme.co
+      </div>
+    </div>
+  );
+}
+```
+
+### Slide 4 (`slide-pages/ZenVoidPage4.tsx`)
+
+```tsx
+export function ZenVoidPage4() {
+  return (
+    <div style={{ width: "100vw", height: "100vh", overflow: "hidden", position: "relative", backgroundColor: "#FAF8F5", color: "#1A1A1A", fontFamily: "'Inter', sans-serif" }}>
+      
+      {/* Content */}
+      <div style={{ position: "absolute", top: "0", left: "0", width: "100vw", height: "100vh", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
+        <h2 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: "6vw", fontWeight: 400, margin: "0 0 2vh 0", letterSpacing: "-0.02em" }}>
+          End of Deck
+        </h2>
+        <div style={{ width: "4vw", height: "1px", background: "#8A8578", marginBottom: "4vh" }} />
+        <p style={{ fontSize: "1.2vw", color: "#8A8578", letterSpacing: "0.1em", margin: 0, fontWeight: 300, textTransform: "uppercase" }}>
+          hello@acme.co
+        </p>
+      </div>
+
+      {/* Decorative vertical line matching the Zen aesthetic */}
+      <div style={{ position: "absolute", top: "0", left: "50%", width: "1px", height: "25vh", background: "linear-gradient(to bottom, transparent, #8A8578)" }} />
+      <div style={{ position: "absolute", bottom: "0", left: "50%", width: "1px", height: "25vh", background: "linear-gradient(to top, transparent, #8A8578)" }} />
+
+      {/* Footer */}
+      <div style={{ position: "absolute", bottom: "6vh", left: "5vw", display: "flex", alignItems: "center", gap: "1vw" }}>
+        <div style={{ width: "1.5vw", height: "1.5vw", borderRadius: "50%", background: "#1A1A1A" }} />
+        <span style={{ fontSize: "0.8vw", letterSpacing: "0.1em", fontWeight: 400 }}>04</span>
+      </div>
+
+      <div style={{ position: "absolute", bottom: "6vh", right: "5vw", fontSize: "0.8vw", letterSpacing: "0.1em", opacity: 0.8 }}>
+        acme.co
+      </div>
+    </div>
+  );
+}
+```

package/.local/skills/stripe/.fingerprint

@@ -0,0 +1 @@
+3a471afd3df6a4c8a096fe3697865158