Update screenshot, remove duplicate from repo root

Single screenshot lives in packages/docs/public/. README references it
from there. Custom VitePress layout places it between hero and features.

README.md

@@ -4,7 +4,7 @@ Open-source, AI-native design editor. Figma-compatible, AI-first, fully local.
 
 > **Status:** Active development. Not ready for production use.
 
-![OpenPencil](screenshot.png)
+![OpenPencil](packages/docs/public/screenshot.png)
 
 ## Why
 

packages/docs/.vitepress/theme/HomeLayout.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import DefaultTheme from 'vitepress/theme'
+import { useData } from 'vitepress'
+
+const { Layout } = DefaultTheme
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <Layout>
+    <template #home-hero-after>
+      <div v-if="frontmatter.layout === 'home'" class="screenshot">
+        <img
+          src="/screenshot.png"
+          alt="OpenPencil editor with a Material 3 design file open"
+        />
+      </div>
+    </template>
+  </Layout>
+</template>
+
+<style scoped>
+.screenshot {
+  max-width: 1152px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.screenshot img {
+  width: 100%;
+  border-radius: 12px;
+}
+</style>

packages/docs/.vitepress/theme/index.ts

@@ -0,0 +1,7 @@
+import DefaultTheme from 'vitepress/theme'
+import HomeLayout from './HomeLayout.vue'
+
+export default {
+  extends: DefaultTheme,
+  Layout: HomeLayout,
+}

packages/docs/index.md

@@ -6,9 +6,6 @@ hero:
   name: OpenPencil
   text: AI-Native Design Editor
   tagline: Open-source Figma alternative. Fully local, AI-native, programmable.
-  image:
-    src: /screenshot.png
-    alt: OpenPencil editor with a Material 3 design file open
   actions:
     - theme: brand
       text: Get Started