Add hero image: PostgreSQL elephant orbiting a planet

docs/src/assets/hero-elephant-orbit.svg

@@ -0,0 +1,99 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" fill="none">
+  <defs>
+    <!-- Orbital glow -->
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="starGlow">
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <!-- Planet gradient -->
+    <radialGradient id="planetGrad" cx="45%" cy="40%">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="60%" stop-color="#d97706"/>
+      <stop offset="100%" stop-color="#92400e"/>
+    </radialGradient>
+    <!-- Elephant gradient -->
+    <linearGradient id="elephantGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#94a3b8"/>
+      <stop offset="50%" stop-color="#64748b"/>
+      <stop offset="100%" stop-color="#475569"/>
+    </linearGradient>
+    <!-- Orbit trail gradient -->
+    <linearGradient id="orbitTrail" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#f59e0b" stop-opacity="0"/>
+      <stop offset="40%" stop-color="#f59e0b" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="#fbbf24" stop-opacity="0.6"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background stars -->
+  <circle cx="45" cy="30" r="1" fill="#fbbf24" opacity="0.4"/>
+  <circle cx="120" cy="80" r="0.8" fill="#e2e8f0" opacity="0.3"/>
+  <circle cx="530" cy="50" r="1.2" fill="#fbbf24" opacity="0.5"/>
+  <circle cx="480" cy="340" r="0.8" fill="#e2e8f0" opacity="0.3"/>
+  <circle cx="70" cy="350" r="1" fill="#e2e8f0" opacity="0.25"/>
+  <circle cx="560" cy="150" r="0.7" fill="#fbbf24" opacity="0.35"/>
+  <circle cx="200" cy="370" r="0.9" fill="#e2e8f0" opacity="0.2"/>
+  <circle cx="400" cy="25" r="1.1" fill="#fbbf24" opacity="0.4"/>
+  <circle cx="150" cy="180" r="0.6" fill="#e2e8f0" opacity="0.2"/>
+  <circle cx="510" cy="250" r="0.8" fill="#fbbf24" opacity="0.3"/>
+  <circle cx="30" cy="200" r="1" fill="#e2e8f0" opacity="0.15"/>
+  <circle cx="350" cy="380" r="0.7" fill="#fbbf24" opacity="0.25"/>
+
+  <!-- Outer orbit (behind planet) - dashed, subtle -->
+  <ellipse cx="300" cy="200" rx="220" ry="90" stroke="#f59e0b" stroke-width="0.8" stroke-dasharray="4 6" transform="rotate(-12 300 200)" opacity="0.15"/>
+
+  <!-- Primary orbit ellipse (behind planet portion) -->
+  <ellipse cx="300" cy="200" rx="180" ry="75" stroke="url(#orbitTrail)" stroke-width="2" transform="rotate(-12 300 200)" opacity="0.5"/>
+
+  <!-- Central planet/star -->
+  <circle cx="300" cy="200" r="45" fill="url(#planetGrad)" filter="url(#glow)"/>
+  <!-- Planet surface detail -->
+  <ellipse cx="290" cy="190" rx="20" ry="8" fill="#fbbf24" opacity="0.15" transform="rotate(-10 290 190)"/>
+  <ellipse cx="310" cy="210" rx="15" ry="5" fill="#92400e" opacity="0.2" transform="rotate(5 310 210)"/>
+
+  <!-- Primary orbit ellipse (in front of planet) - brighter section -->
+  <path d="M 135 230 A 180 75 -12 0 0 465 170" stroke="#fbbf24" stroke-width="2" transform="rotate(-12 300 200)" fill="none" opacity="0.6" stroke-linecap="round"/>
+
+  <!-- PostgreSQL Elephant (Slonik) - orbiting at upper-right of orbit -->
+  <!-- Positioned at roughly the 2 o'clock position on the orbit -->
+  <g transform="translate(438, 135) scale(0.55) rotate(15)">
+    <!-- Body -->
+    <ellipse cx="0" cy="10" rx="38" ry="30" fill="url(#elephantGrad)"/>
+    <!-- Head -->
+    <circle cx="-30" cy="-8" r="22" fill="url(#elephantGrad)"/>
+    <!-- Ear -->
+    <ellipse cx="-42" cy="-15" rx="14" ry="18" fill="#475569" stroke="#64748b" stroke-width="1"/>
+    <ellipse cx="-42" cy="-15" rx="9" ry="12" fill="#334155" opacity="0.6"/>
+    <!-- Trunk - curling forward and down -->
+    <path d="M -48 0 C -58 5, -62 20, -55 30 C -50 36, -42 34, -40 28" stroke="#64748b" stroke-width="7" fill="none" stroke-linecap="round"/>
+    <!-- Eye -->
+    <circle cx="-24" cy="-12" r="3" fill="#0a0e17"/>
+    <circle cx="-23" cy="-13" r="1" fill="#fbbf24" opacity="0.8"/>
+    <!-- Tusk -->
+    <path d="M -38 4 C -42 12, -38 18, -34 16" stroke="#e2e8f0" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <!-- Legs (2 visible) -->
+    <rect x="-12" y="30" width="8" height="20" rx="4" fill="#475569"/>
+    <rect x="12" y="30" width="8" height="20" rx="4" fill="#475569"/>
+    <!-- Tail -->
+    <path d="M 36 5 C 45 0, 48 8, 44 14" stroke="#64748b" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <!-- Orbital velocity trail from elephant -->
+    <path d="M 40 10 C 55 8, 70 12, 85 18" stroke="#fbbf24" stroke-width="1.5" fill="none" opacity="0.4" stroke-linecap="round"/>
+    <path d="M 40 15 C 52 14, 62 18, 72 24" stroke="#fbbf24" stroke-width="1" fill="none" opacity="0.25" stroke-linecap="round"/>
+  </g>
+
+  <!-- Small satellite dot (on opposite side of orbit) -->
+  <circle cx="165" cy="258" r="3" fill="#fbbf24" filter="url(#starGlow)" opacity="0.7"/>
+
+  <!-- Inner orbit ring (like Saturn's ring on the planet) -->
+  <ellipse cx="300" cy="200" rx="60" ry="12" stroke="#fbbf24" stroke-width="1" transform="rotate(-5 300 200)" opacity="0.25"/>
+</svg>

docs/src/content/docs/index.mdx

@@ -4,6 +4,9 @@ description: Solar system computation for PostgreSQL
 template: splash
 hero:
   tagline: Track satellites, compute planet positions, observe 19 planetary moons, predict Jupiter radio bursts, and plan interplanetary trajectories — all from standard SQL.
+  image:
+    file: ../../assets/hero-elephant-orbit.svg
+    alt: PostgreSQL elephant orbiting a planet
   actions:
     - text: Get Started
       link: /getting-started/what-is-pg-orbit/