diff --git a/README.md b/README.md
index 4ab8b8f..bf4085b 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,9 @@
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/images/banner-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="docs/images/banner-light.svg">
+  <img alt="App Versioning" src="docs/images/banner-light.svg">
+</picture>
+
 # App Versioning
 
 ![CI](https://github.com/ReactiveCircus/app-versioning/workflows/CI/badge.svg)
@@ -6,8 +12,6 @@
 
 A Gradle Plugin for lazily generating Android app's `versionCode` & `versionName` from Git tags.
 
-![App Versioning](docs/images/sample.png)
-
 Modern versions of Android Gradle Plugin provide new [Variant APIs](https://medium.com/androiddevelopers/new-apis-in-the-android-gradle-plugin-f5325742e614) that support **lazily** computing the `versionCode` and `versionName` of an APK or App Bundle.
 
 This plugin builds on top of these APIs to support common Git-based app versioning use cases with full Configuration Cache and Isolated Projects support.
diff --git a/docs/images/banner-dark.svg b/docs/images/banner-dark.svg
new file mode 100644
index 0000000..572b288
--- /dev/null
+++ b/docs/images/banner-dark.svg
@@ -0,0 +1,78 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="440" viewBox="0 0 1280 440" fill="none" role="img">
+  <defs>
+    <path id="tag" d="M 84 54 H 152 C 168 54 180 61 190 73 L 210 96 C 218 106 218 122 210 132 L 190 155 C 180 167 168 174 152 174 H 84 C 57 174 38 155 38 128 V 100 C 38 73 57 54 84 54 Z" />
+    <linearGradient id="back_side" x1="40" y1="90" x2="200" y2="205" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#9333EA" />
+      <stop offset="100%" stop-color="#3B0764" />
+    </linearGradient>
+    <linearGradient id="back_top" x1="45" y1="55" x2="200" y2="180" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#D8B4FE" />
+      <stop offset="55%" stop-color="#A855F7" />
+      <stop offset="100%" stop-color="#6B21A8" />
+    </linearGradient>
+    <linearGradient id="side" x1="42" y1="90" x2="195" y2="205" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#E9D5FF" />
+      <stop offset="55%" stop-color="#A855F7" />
+      <stop offset="100%" stop-color="#6B21A8" />
+    </linearGradient>
+    <linearGradient id="top" x1="55" y1="50" x2="200" y2="185" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#FFFFFF" />
+      <stop offset="60%" stop-color="#F3E8FF" />
+      <stop offset="100%" stop-color="#D8B4FE" />
+    </linearGradient>
+    <linearGradient id="step2" x1="65" y1="80" x2="148" y2="150" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#93C5FD" />
+      <stop offset="55%" stop-color="#67E8F9" />
+      <stop offset="100%" stop-color="#06B6D4" />
+    </linearGradient>
+    <radialGradient id="dark_core" cx="42%" cy="38%" r="65%">
+      <stop offset="0%" stop-color="#1E4E68" />
+      <stop offset="48%" stop-color="#092234" />
+      <stop offset="100%" stop-color="#030D17" />
+    </radialGradient>
+    <filter id="shadow" x="-25%" y="-25%" width="150%" height="155%">
+      <feDropShadow dx="-3" dy="10" stdDeviation="8" flood-color="#210042" flood-opacity="0.48" />
+    </filter>
+  
+    <linearGradient id="bg" x1="0" y1="0" x2="1280" y2="440" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#1B0B33"/><stop offset="55%" stop-color="#2E1065"/><stop offset="100%" stop-color="#0F172A"/>
+    </linearGradient>
+    <linearGradient id="ink" x1="0" y1="0" x2="1280" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#7C3AED"/><stop offset="55%" stop-color="#A78BFA"/><stop offset="100%" stop-color="#22D3EE"/>
+    </linearGradient>
+    <linearGradient id="heroPill" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#A5F3FC"/><stop offset="100%" stop-color="#22D3EE"/></linearGradient>
+    <pattern id="dots" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.2" fill="#FFFFFF" fill-opacity="0.06"/></pattern>
+    <clipPath id="clip"><rect width="1280" height="440" rx="28"/></clipPath>
+  </defs>
+  <g clip-path="url(#clip)">
+    <rect width="1280" height="440" fill="url(#bg)"/>
+    <radialGradient id="g" cx="640" cy="220" r="340" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#A855F7" stop-opacity="0.55"/><stop offset="60%" stop-color="#7C3AED" stop-opacity="0.08"/><stop offset="100%" stop-color="#7C3AED" stop-opacity="0"/></radialGradient><rect width="1280" height="440" fill="url(#g)"/><radialGradient id="hg" cx="405" cy="210" r="95" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#22D3EE" stop-opacity="0.35"/><stop offset="100%" stop-color="#22D3EE" stop-opacity="0"/></radialGradient><circle cx="405" cy="210" r="95" fill="url(#hg)"/>
+  </g>
+  <rect x="0.75" y="0.75" width="1278.5" height="438.5" rx="27.25" fill="none" stroke="#FFFFFF" stroke-opacity="0.10" stroke-width="1.5"/>
+  <linearGradient id="ln" x1="0" y1="0" x2="1280" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#7C3AED"/><stop offset="35%" stop-color="#A78BFA"/><stop offset="100%" stop-color="#22D3EE"/></linearGradient><linearGradient id="fadeG" x1="0" y1="0" x2="190" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#fff" stop-opacity="0"/><stop offset="100%" stop-color="#fff"/></linearGradient><mask id="fadeL" maskUnits="userSpaceOnUse" x="0" y="0" width="1280" height="440"><rect width="1280" height="440" fill="url(#fadeG)"/></mask><filter id="soft" x="-50%" y="-200%" width="200%" height="500%"><feGaussianBlur stdDeviation="5"/></filter><g mask="url(#fadeL)"><clipPath id="toHero"><rect width="405" height="440"/></clipPath><g clip-path="url(#toHero)"><path d="M -20.0 360.0 L 156.0 360.0 Q 190 360 214.0 336.0 L 306.0 244.0 Q 330 220 364.0 220.0 L 481.0 220.0" stroke="url(#ln)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" /></g><circle cx="68.0" cy="360.0" r="5" fill="#A78BFA" stroke="#1E0A3C" stroke-width="3"/></g><circle cx="120.0" cy="360.0" r="7" fill="#A78BFA" stroke="#1E0A3C" stroke-width="3"/><circle cx="238.0" cy="312.0" r="5" fill="#A78BFA" stroke="#1E0A3C" stroke-width="3"/><circle cx="282.0" cy="268.0" r="7" fill="#A78BFA" stroke="#1E0A3C" stroke-width="3"/><line x1="120.0" y1="350.0" x2="120.0" y2="330.0" stroke="#A78BFA" stroke-opacity="0.8" stroke-width="2" stroke-linecap="round"/><rect x="80.5" y="300" width="79.0" height="30" rx="15" fill="#2A0D52" stroke="#A78BFA" stroke-opacity="0.9" stroke-width="1.5"/><text x="120" y="321.24" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="17" font-weight="600" fill="#F5F3FF">1.2.0</text><line x1="275.1" y1="261.1" x2="230.0" y2="234.0" stroke="#A78BFA" stroke-opacity="0.8" stroke-width="2" stroke-linecap="round"/><rect x="160.5" y="207" width="79.0" height="30" rx="15" fill="#2A0D52" stroke="#A78BFA" stroke-opacity="0.9" stroke-width="1.5"/><text x="200" y="228.24" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="17" font-weight="600" fill="#F5F3FF">1.3.0</text><linearGradient id="lk" x1="405" y1="0" x2="487" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#22D3EE"/><stop offset="100%" stop-color="#A5F3FC"/></linearGradient><line x1="405" y1="220" x2="487" y2="220" stroke="#22D3EE" stroke-width="7.5" stroke-opacity="0.55" filter="url(#soft)"/><line x1="405" y1="220" x2="487" y2="220" stroke="url(#lk)" stroke-width="3" stroke-linecap="butt"/><path d="M 793.0 220.0 L 802.5 220.0 Q 812 220 818.7 213.3 L 858.1 173.9 Q 868 164 882.0 164.0 L 912.0 164.0" stroke="url(#ln)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" /><path d="M 793.0 220.0 L 802.5 220.0 Q 812 220 818.7 226.7 L 872.1 280.1 Q 882 290 896.0 290.0 L 912.0 290.0" stroke="url(#ln)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" /><circle cx="912.0" cy="164.0" r="7" fill="#22D3EE" stroke="#1E0A3C" stroke-width="3"/><circle cx="912.0" cy="290.0" r="7" fill="#22D3EE" stroke="#1E0A3C" stroke-width="3"/><line x1="405.0" y1="206.0" x2="405.0" y2="183.0" stroke="#22D3EE" stroke-opacity="0.9" stroke-width="2" stroke-linecap="round"/><rect x="361.0" y="153" width="88.0" height="30" rx="15" fill="url(#heroPill)" stroke="#22D3EE" stroke-width="1.5"/><text x="405" y="175.34" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="20" font-weight="600" fill="#032B36">1.3.1</text><circle cx="405.0" cy="220.0" r="11" fill="#22D3EE" stroke="#1E0A3C" stroke-width="3"/><g transform="translate(481.2 60.0) scale(1.25)">
+    <!-- Lower tag -->
+    <g transform="translate(136 139) scale(1.05) rotate(-13) translate(-127 -124)" filter="url(#shadow)">
+      <use href="#tag" xlink:href="#tag" y="16" fill="url(#back_side)" />
+      <use href="#tag" xlink:href="#tag" fill="url(#back_top)" stroke="#E9D5FF" stroke-width="1.5" stroke-opacity="0.55" />
+      <circle cx="182" cy="114" r="12" fill="#3B036B" />
+    </g>
+
+    <!-- Upper tag -->
+    <g transform="translate(127 111) scale(1.05) rotate(-32) translate(-127 -124)" filter="url(#shadow)">
+      <use href="#tag" xlink:href="#tag" y="20" fill="url(#side)" />
+      <use href="#tag" xlink:href="#tag" fill="url(#top)" stroke="#FFFFFF" stroke-width="2" />
+
+      <!-- Eyelet -->
+      <circle cx="182" cy="114" r="17.5" fill="#B88AE6" opacity="0.55" stroke="#FFFFFF" stroke-width="1.6" />
+      <circle cx="182" cy="115" r="12" fill="#4B0782" />
+      <path d="M 170 115 A 12 12 0 0 1 194 115 A 12 9 0 0 0 170 115 Z" fill="#230040" opacity="0.9" />
+
+      <!-- Lens -->
+      <rect x="54" y="72" width="104" height="84" rx="40" fill="#7DD3FC" opacity="0.45" stroke="#FFFFFF" stroke-width="1.3" />
+      <rect x="66" y="83" width="80" height="62" rx="30" fill="url(#step2)" stroke="#ECFEFF" stroke-width="1" stroke-opacity="0.65" />
+      <rect x="78" y="93" width="56" height="42" rx="21" fill="#020810" />
+      <rect x="80" y="95" width="52" height="38" rx="19" fill="url(#dark_core)" stroke="#38BDF8" stroke-width="0.8" stroke-opacity="0.4" />
+      <ellipse cx="100" cy="105" rx="14" ry="4.8" fill="#BAE6FD" opacity="0.28" />
+    </g>
+  </g><text x="936" y="126" text-anchor="start" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="19" letter-spacing="1" fill="#A5A0C8">versionCode</text><text x="936" y="182" text-anchor="start" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="50" font-weight="700" fill="#67E8F9">10301</text><text x="936" y="252" text-anchor="start" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="19" letter-spacing="1" fill="#A5A0C8">versionName</text><text x="936" y="308" text-anchor="start" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="50" font-weight="700" fill="#67E8F9">"1.3.1"</text>
+</svg>
diff --git a/docs/images/banner-light.svg b/docs/images/banner-light.svg
new file mode 100644
index 0000000..5cca00b
--- /dev/null
+++ b/docs/images/banner-light.svg
@@ -0,0 +1,78 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="440" viewBox="0 0 1280 440" fill="none" role="img">
+  <defs>
+    <path id="tag" d="M 84 54 H 152 C 168 54 180 61 190 73 L 210 96 C 218 106 218 122 210 132 L 190 155 C 180 167 168 174 152 174 H 84 C 57 174 38 155 38 128 V 100 C 38 73 57 54 84 54 Z" />
+    <linearGradient id="back_side" x1="40" y1="90" x2="200" y2="205" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#9333EA" />
+      <stop offset="100%" stop-color="#3B0764" />
+    </linearGradient>
+    <linearGradient id="back_top" x1="45" y1="55" x2="200" y2="180" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#D8B4FE" />
+      <stop offset="55%" stop-color="#A855F7" />
+      <stop offset="100%" stop-color="#6B21A8" />
+    </linearGradient>
+    <linearGradient id="side" x1="42" y1="90" x2="195" y2="205" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#E9D5FF" />
+      <stop offset="55%" stop-color="#A855F7" />
+      <stop offset="100%" stop-color="#6B21A8" />
+    </linearGradient>
+    <linearGradient id="top" x1="55" y1="50" x2="200" y2="185" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#FFFFFF" />
+      <stop offset="60%" stop-color="#F3E8FF" />
+      <stop offset="100%" stop-color="#D8B4FE" />
+    </linearGradient>
+    <linearGradient id="step2" x1="65" y1="80" x2="148" y2="150" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#93C5FD" />
+      <stop offset="55%" stop-color="#67E8F9" />
+      <stop offset="100%" stop-color="#06B6D4" />
+    </linearGradient>
+    <radialGradient id="dark_core" cx="42%" cy="38%" r="65%">
+      <stop offset="0%" stop-color="#1E4E68" />
+      <stop offset="48%" stop-color="#092234" />
+      <stop offset="100%" stop-color="#030D17" />
+    </radialGradient>
+    <filter id="shadow" x="-25%" y="-25%" width="150%" height="155%">
+      <feDropShadow dx="-3" dy="10" stdDeviation="8" flood-color="#4C1D95" flood-opacity="0.22" />
+    </filter>
+  
+    <linearGradient id="bg" x1="0" y1="0" x2="1280" y2="440" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#F3FBF7"/><stop offset="55%" stop-color="#FAF8FF"/><stop offset="100%" stop-color="#F6F4FE"/>
+    </linearGradient>
+    <linearGradient id="ink" x1="0" y1="0" x2="1280" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#7C3AED"/><stop offset="55%" stop-color="#A78BFA"/><stop offset="100%" stop-color="#22D3EE"/>
+    </linearGradient>
+    <linearGradient id="heroPill" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#059669"/><stop offset="100%" stop-color="#047857"/></linearGradient>
+    <pattern id="dots" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.2" fill="#FFFFFF" fill-opacity="0.06"/></pattern>
+    <clipPath id="clip"><rect width="1280" height="440" rx="28"/></clipPath>
+  </defs>
+  <g clip-path="url(#clip)">
+    <rect width="1280" height="440" fill="url(#bg)"/>
+    <radialGradient id="g" cx="640" cy="220" r="340" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.75"/><stop offset="60%" stop-color="#C4B5FD" stop-opacity="0.12"/><stop offset="100%" stop-color="#C4B5FD" stop-opacity="0"/></radialGradient><rect width="1280" height="440" fill="url(#g)"/><radialGradient id="g2" cx="640" cy="225" r="215" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#A78BFA" stop-opacity="0.38"/><stop offset="70%" stop-color="#A78BFA" stop-opacity="0.17"/><stop offset="100%" stop-color="#A78BFA" stop-opacity="0"/></radialGradient><rect width="1280" height="440" fill="url(#g2)"/><radialGradient id="hg" cx="405" cy="210" r="95" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#34D399" stop-opacity="0.32"/><stop offset="100%" stop-color="#34D399" stop-opacity="0"/></radialGradient><circle cx="405" cy="210" r="95" fill="url(#hg)"/>
+  </g>
+  <rect x="0.75" y="0.75" width="1278.5" height="438.5" rx="27.25" fill="none" stroke="#4C1D95" stroke-opacity="0.08" stroke-width="1.5"/>
+  <linearGradient id="ln" x1="0" y1="0" x2="1280" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="28%" stop-color="#10B981"/><stop offset="45%" stop-color="#10B981"/><stop offset="60%" stop-color="#22D3EE"/><stop offset="100%" stop-color="#06B6D4"/></linearGradient><linearGradient id="fadeG" x1="0" y1="0" x2="190" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#fff" stop-opacity="0"/><stop offset="100%" stop-color="#fff"/></linearGradient><mask id="fadeL" maskUnits="userSpaceOnUse" x="0" y="0" width="1280" height="440"><rect width="1280" height="440" fill="url(#fadeG)"/></mask><filter id="soft" x="-50%" y="-200%" width="200%" height="500%"><feGaussianBlur stdDeviation="5"/></filter><g mask="url(#fadeL)"><clipPath id="toHero"><rect width="405" height="440"/></clipPath><g clip-path="url(#toHero)"><path d="M -20.0 360.0 L 156.0 360.0 Q 190 360 214.0 336.0 L 306.0 244.0 Q 330 220 364.0 220.0 L 481.0 220.0" stroke="url(#ln)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" /></g><circle cx="68.0" cy="360.0" r="5" fill="#10B981" stroke="#FFFFFF" stroke-width="3"/></g><circle cx="120.0" cy="360.0" r="7" fill="#10B981" stroke="#FFFFFF" stroke-width="3"/><circle cx="238.0" cy="312.0" r="5" fill="#10B981" stroke="#FFFFFF" stroke-width="3"/><circle cx="282.0" cy="268.0" r="7" fill="#10B981" stroke="#FFFFFF" stroke-width="3"/><line x1="120.0" y1="350.0" x2="120.0" y2="330.0" stroke="#9AEBC6" stroke-opacity="1" stroke-width="2" stroke-linecap="round"/><rect x="80.5" y="300" width="79.0" height="30" rx="15" fill="#DDF7EA" stroke="#9AEBC6" stroke-opacity="1" stroke-width="1.5"/><text x="120" y="321.24" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="17" font-weight="600" fill="#047857">1.2.0</text><line x1="275.1" y1="261.1" x2="230.0" y2="234.0" stroke="#9AEBC6" stroke-opacity="1" stroke-width="2" stroke-linecap="round"/><rect x="160.5" y="207" width="79.0" height="30" rx="15" fill="#DDF7EA" stroke="#9AEBC6" stroke-opacity="1" stroke-width="1.5"/><text x="200" y="228.24" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="17" font-weight="600" fill="#047857">1.3.0</text><linearGradient id="lk" x1="405" y1="0" x2="487" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#6EE7B7"/></linearGradient><line x1="405" y1="220" x2="487" y2="220" stroke="#34D399" stroke-width="7.5" stroke-opacity="0.4" filter="url(#soft)"/><line x1="405" y1="220" x2="487" y2="220" stroke="url(#lk)" stroke-width="3" stroke-linecap="butt"/><path d="M 793.0 220.0 L 802.5 220.0 Q 812 220 818.7 213.3 L 858.1 173.9 Q 868 164 882.0 164.0 L 912.0 164.0" stroke="url(#ln)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" /><path d="M 793.0 220.0 L 802.5 220.0 Q 812 220 818.7 226.7 L 872.1 280.1 Q 882 290 896.0 290.0 L 912.0 290.0" stroke="url(#ln)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" /><circle cx="912.0" cy="164.0" r="7" fill="#06B6D4" stroke="#FFFFFF" stroke-width="3"/><circle cx="912.0" cy="290.0" r="7" fill="#06B6D4" stroke="#FFFFFF" stroke-width="3"/><line x1="405.0" y1="206.0" x2="405.0" y2="183.0" stroke="#047857" stroke-opacity="1" stroke-width="2" stroke-linecap="round"/><rect x="361.0" y="153" width="88.0" height="30" rx="15" fill="url(#heroPill)" stroke="#047857" stroke-width="1.5"/><text x="405" y="175.34" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="20" font-weight="600" fill="#FFFFFF">1.3.1</text><circle cx="405.0" cy="220.0" r="11" fill="#10B981" stroke="#FFFFFF" stroke-width="3"/><g transform="translate(481.2 60.0) scale(1.25)">
+    <!-- Lower tag -->
+    <g transform="translate(136 139) scale(1.05) rotate(-13) translate(-127 -124)" filter="url(#shadow)">
+      <use href="#tag" xlink:href="#tag" y="16" fill="url(#back_side)" />
+      <use href="#tag" xlink:href="#tag" fill="url(#back_top)" stroke="#E9D5FF" stroke-width="1.5" stroke-opacity="0.55" />
+      <circle cx="182" cy="114" r="12" fill="#3B036B" />
+    </g>
+
+    <!-- Upper tag -->
+    <g transform="translate(127 111) scale(1.05) rotate(-32) translate(-127 -124)" filter="url(#shadow)">
+      <use href="#tag" xlink:href="#tag" y="20" fill="url(#side)" />
+      <use href="#tag" xlink:href="#tag" fill="url(#top)" stroke="#D8B4FE" stroke-width="2" />
+
+      <!-- Eyelet -->
+      <circle cx="182" cy="114" r="17.5" fill="#B88AE6" opacity="0.55" stroke="#FFFFFF" stroke-width="1.6" />
+      <circle cx="182" cy="115" r="12" fill="#4B0782" />
+      <path d="M 170 115 A 12 12 0 0 1 194 115 A 12 9 0 0 0 170 115 Z" fill="#230040" opacity="0.9" />
+
+      <!-- Lens -->
+      <rect x="54" y="72" width="104" height="84" rx="40" fill="#7DD3FC" opacity="0.45" stroke="#FFFFFF" stroke-width="1.3" />
+      <rect x="66" y="83" width="80" height="62" rx="30" fill="url(#step2)" stroke="#ECFEFF" stroke-width="1" stroke-opacity="0.65" />
+      <rect x="78" y="93" width="56" height="42" rx="21" fill="#020810" />
+      <rect x="80" y="95" width="52" height="38" rx="19" fill="url(#dark_core)" stroke="#38BDF8" stroke-width="0.8" stroke-opacity="0.4" />
+      <ellipse cx="100" cy="105" rx="14" ry="4.8" fill="#BAE6FD" opacity="0.28" />
+    </g>
+  </g><text x="936" y="126" text-anchor="start" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="19" letter-spacing="1" fill="#6E6694">versionCode</text><text x="936" y="182" text-anchor="start" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="50" font-weight="700" fill="#0891B2">10301</text><text x="936" y="252" text-anchor="start" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="19" letter-spacing="1" fill="#6E6694">versionName</text><text x="936" y="308" text-anchor="start" font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="50" font-weight="700" fill="#0891B2">"1.3.1"</text>
+</svg>
diff --git a/docs/images/sample.png b/docs/images/sample.png
deleted file mode 100644
index 19da8a5..0000000
Binary files a/docs/images/sample.png and /dev/null differ
diff --git a/docs/images/social-preview.svg b/docs/images/social-preview.svg
new file mode 100644
index 0000000..23e26df
--- /dev/null
+++ b/docs/images/social-preview.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="640" viewBox="0 0 1280 640" fill="none" role="img" aria-label="App Versioning"><defs>
+    <path id="tag" d="M 84 54 H 152 C 168 54 180 61 190 73 L 210 96 C 218 106 218 122 210 132 L 190 155 C 180 167 168 174 152 174 H 84 C 57 174 38 155 38 128 V 100 C 38 73 57 54 84 54 Z" />
+    <linearGradient id="back_side" x1="40" y1="90" x2="200" y2="205" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#9333EA" />
+      <stop offset="100%" stop-color="#3B0764" />
+    </linearGradient>
+    <linearGradient id="back_top" x1="45" y1="55" x2="200" y2="180" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#D8B4FE" />
+      <stop offset="55%" stop-color="#A855F7" />
+      <stop offset="100%" stop-color="#6B21A8" />
+    </linearGradient>
+    <linearGradient id="side" x1="42" y1="90" x2="195" y2="205" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#E9D5FF" />
+      <stop offset="55%" stop-color="#A855F7" />
+      <stop offset="100%" stop-color="#6B21A8" />
+    </linearGradient>
+    <linearGradient id="top" x1="55" y1="50" x2="200" y2="185" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#FFFFFF" />
+      <stop offset="60%" stop-color="#F3E8FF" />
+      <stop offset="100%" stop-color="#D8B4FE" />
+    </linearGradient>
+    <linearGradient id="step2" x1="65" y1="80" x2="148" y2="150" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#93C5FD" />
+      <stop offset="55%" stop-color="#67E8F9" />
+      <stop offset="100%" stop-color="#06B6D4" />
+    </linearGradient>
+    <radialGradient id="dark_core" cx="42%" cy="38%" r="65%">
+      <stop offset="0%" stop-color="#1E4E68" />
+      <stop offset="48%" stop-color="#092234" />
+      <stop offset="100%" stop-color="#030D17" />
+    </radialGradient>
+    <filter id="shadow" x="-25%" y="-25%" width="150%" height="155%">
+      <feDropShadow dx="-3" dy="10" stdDeviation="8" flood-color="#210042" flood-opacity="0.48" />
+    </filter></defs><linearGradient id="bg" x1="0" y1="0" x2="1280" y2="640" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#1B0B33"/><stop offset="55%" stop-color="#2E1065"/><stop offset="100%" stop-color="#0F172A"/></linearGradient>
+<radialGradient id="g" cx="326.5" cy="320" r="460" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#A855F7" stop-opacity="0.55"/><stop offset="60%" stop-color="#7C3AED" stop-opacity="0.08"/><stop offset="100%" stop-color="#7C3AED" stop-opacity="0"/></radialGradient>
+<rect width="1280" height="640" fill="url(#bg)"/><rect width="1280" height="640" fill="url(#g)"/><g transform="translate(95.2 127.2) scale(1.5)"><!-- Lower tag -->
+    <g transform="translate(136 139) scale(1.05) rotate(-13) translate(-127 -124)" filter="url(#shadow)">
+      <use href="#tag" xlink:href="#tag" y="16" fill="url(#back_side)" />
+      <use href="#tag" xlink:href="#tag" fill="url(#back_top)" stroke="#E9D5FF" stroke-width="1.5" stroke-opacity="0.55" />
+      <circle cx="182" cy="114" r="12" fill="#3B036B" />
+    </g>
+
+    <!-- Upper tag -->
+    <g transform="translate(127 111) scale(1.05) rotate(-32) translate(-127 -124)" filter="url(#shadow)">
+      <use href="#tag" xlink:href="#tag" y="20" fill="url(#side)" />
+      <use href="#tag" xlink:href="#tag" fill="url(#top)" stroke="#FFFFFF" stroke-width="2" />
+
+      <!-- Eyelet -->
+      <circle cx="182" cy="114" r="17.5" fill="#B88AE6" opacity="0.55" stroke="#FFFFFF" stroke-width="1.6" />
+      <circle cx="182" cy="115" r="12" fill="#4B0782" />
+      <path d="M 170 115 A 12 12 0 0 1 194 115 A 12 9 0 0 0 170 115 Z" fill="#230040" opacity="0.9" />
+
+      <!-- Lens -->
+      <rect x="54" y="72" width="104" height="84" rx="40" fill="#7DD3FC" opacity="0.45" stroke="#FFFFFF" stroke-width="1.3" />
+      <rect x="66" y="83" width="80" height="62" rx="30" fill="url(#step2)" stroke="#ECFEFF" stroke-width="1" stroke-opacity="0.65" />
+      <rect x="78" y="93" width="56" height="42" rx="21" fill="#020810" />
+      <rect x="80" y="95" width="52" height="38" rx="19" fill="url(#dark_core)" stroke="#38BDF8" stroke-width="0.8" stroke-opacity="0.4" />
+      <ellipse cx="100" cy="105" rx="14" ry="4.8" fill="#BAE6FD" opacity="0.28" />
+    </g>
+  </g><text x="508.75" y="292" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif" font-size="92" font-weight="800" letter-spacing="-2" fill="#FFFFFF">App Versioning</text><text x="511.75" y="358" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif" font-size="36" font-weight="500" fill="#D8B4FE">Lazily generate <tspan font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="33" font-weight="600" fill="#67E8F9">versionCode</tspan> &amp;</text><text x="511.75" y="408" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif" font-size="36" font-weight="500" fill="#D8B4FE"><tspan font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" font-size="33" font-weight="600" fill="#67E8F9">versionName</tspan> from Git tags</text></svg>
\ No newline at end of file