docs: add hero image

docs/.vitepress/theme/style.css

@@ -49,10 +49,10 @@
   --vp-c-default-3: var(--vp-c-gray-3);
   --vp-c-default-soft: var(--vp-c-gray-soft);
 
-  --vp-c-brand-1: var(--vp-c-indigo-1);
-  --vp-c-brand-2: var(--vp-c-indigo-2);
-  --vp-c-brand-3: var(--vp-c-indigo-3);
-  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+  --vp-c-brand-1: var(--vp-c-green-1);
+  --vp-c-brand-2: var(--vp-c-green-2);
+  --vp-c-brand-3: var(--vp-c-green-3);
+  --vp-c-brand-soft: var(--vp-c-green-soft);
 
   --vp-c-tip-1: var(--vp-c-brand-1);
   --vp-c-tip-2: var(--vp-c-brand-2);
@@ -92,16 +92,12 @@
 
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
-    120deg,
-    #bd34fe 30%,
-    #41d1ff
-  );
+  --vp-home-hero-name-background: #008800;
 
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
-    #bd34fe 50%,
-    #47caff 50%
+    #770000 50%,
+    #007700 50%
   );
   --vp-home-hero-image-filter: blur(44px);
 }

docs/index.md

@@ -3,9 +3,12 @@
 layout: home
 
 hero:
-  name: "DOM-Preview"
-  text: "Unit & Component test visualizer"
+  name: "dom-preview"
+  text: "component test visualizer"
   tagline: "See what your components actually look like when your tests fail."
+  image:
+    src: /images/hero.webp
+    alt: VitePress
   actions:
     - theme: brand
       text: Getting started