Update hero and examples in docs

docs/src/components/CallToAction.astro

@@ -8,8 +8,8 @@ import Container from "./Container.astro";
       <img
         src="/rocket-fox.png"
         alt="driver.js mascot riding a rocket"
-        width="901"
-        height="1189"
+        width="826"
+        height="950"
         class="-mt-8 md:-mt-10 lg:-mt-7 h-48 w-auto md:h-60 lg:h-80"
       />
 

docs/src/components/CodeShowcase.astro

@@ -43,23 +43,6 @@ driverObj.highlight({
   },
 });`,
   },
-  {
-    name: "Customize",
-    code: `import { driver } from "driver.js";
-
-const driverObj = driver({
-  animate: true,
-  smoothScroll: true,
-  allowClose: true,
-  stagePadding: 4,
-  popoverClass: "my-popover",
-  nextBtnText: "Next →",
-  prevBtnText: "← Back",
-  doneBtnText: "Finish",
-});
-
-driverObj.drive();`,
-  },
 ];
 ---
 
@@ -70,7 +53,7 @@ driverObj.drive();`,
       Import driver.js, describe your steps, and call <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm text-black">drive()</code>. That's the whole setup.
     </p>
 
-    <div id="code-showcase" class="overflow-hidden rounded-2xl bg-[#272822] shadow-[6px_6px_0_0_#000]">
+    <div id="code-showcase" class="overflow-hidden rounded-2xl bg-[#101010] shadow-[6px_6px_0_0_#000]">
       <div class="flex flex-wrap gap-2 p-3 pb-5 md:gap-3 md:p-4 md:pb-6">
         {
           tabs.map((tab, i) => (
@@ -81,7 +64,7 @@ driverObj.drive();`,
                 "code-tab cursor-pointer rounded-lg border-2 px-4 py-2 text-sm font-medium transition-colors md:px-5 md:py-2 md:text-base",
                 i === 0
                   ? "border-black bg-yellow-300 text-black"
-                  : "border-transparent bg-white/5 text-gray-400 hover:bg-white/10 hover:text-gray-200",
+                  : "border-transparent bg-white/15 text-gray-200 hover:bg-white/25 hover:text-white",
               ]}
             >
               {tab.name}
@@ -123,7 +106,7 @@ driverObj.drive();`,
 
   if (root) {
     const activeClasses = ["border-black", "bg-yellow-300", "text-black"];
-    const inactiveClasses = ["border-transparent", "bg-white/5", "text-gray-400", "hover:bg-white/10", "hover:text-gray-200"];
+    const inactiveClasses = ["border-transparent", "bg-white/15", "text-gray-200", "hover:bg-white/25", "hover:text-white"];
 
     const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>("[data-code-tab]"));
     const panels = Array.from(root.querySelectorAll<HTMLElement>("[data-code-panel]"));

docs/src/components/DocsHeader.tsx

@@ -15,7 +15,7 @@ export function DocsHeader(props: DocsHeaderProps) {
       <div className="border-b border-gray-200 flex items-center justify-between">
         <div className="text-right flex justify-end py-3 px-6">
           <a href="/" className="flex items-center justify-end text-xl font-bold">
-            <img src="/mascot-head.png" alt="driver.js logo" width={639} height={534} className="h-10 w-auto mr-2" />
+            <img src="/mascot-head.png" alt="driver.js logo" width={900} height={775} className="h-10 w-auto mr-2" />
             driver.js
           </a>
         </div>

docs/src/components/Examples.astro

@@ -100,7 +100,7 @@ import { ExampleButton } from "./ExampleButton";
           element: "[data-driver-license]",
           popover: {
             title: "MIT Licensed",
-            description: "Driver.js is MIT licensed and is used by tens thousands of companies around the world.",
+            description: "Driver.js is MIT licensed and is used by tens of thousands of companies around the world.",
             side: "top",
             align: "start"
           }

docs/src/components/HeroSection.astro

@@ -6,7 +6,7 @@ import Container from "./Container.astro";
   <Container>
     <div class="flex items-center justify-between h-16">
       <a href="/" class="flex items-center justify-end text-xl font-bold text-gray-900 font-semibold gap-2.5">
-        <img src="/mascot-head.png" alt="driver.js logo" width="639" height="534" class="h-10 w-auto" />
+        <img src="/mascot-head.png" alt="driver.js logo" width="900" height="775" class="h-10 w-auto" />
         driver.js
       </a>
       <span class="flex items-center gap-3">
@@ -49,7 +49,7 @@ import Container from "./Container.astro";
         </div>
       </div>
       <div class="flex-shrink-0 hidden sm:flex">
-        <img src="/fox-mascot.png" alt="driver.js mascot" width="672" height="916" class="w-auto sm:h-64 md:h-80 lg:h-[380px] relative top-[12px]" />
+        <img src="/fox-mascot.png" alt="driver.js mascot" width="1130" height="744" class="w-auto sm:h-56 md:h-64 lg:h-[300px] relative top-[12px]" />
       </div>
     </div>
   </Container>

docs/src/components/Sidebar.astro

@@ -13,7 +13,7 @@ const { activePath, groupedGuides, activeGuideTitle } = Astro.props;
   <div class="relative sh:sticky top-0">
     <div class="justify-end flex pt-10 pb-5 px-5">
       <a href="/" class="block items-center justify-end mb-2">
-        <img src="/mascot-head.png" alt="driver.js logo" width="639" height="534" class="h-16 w-auto" />
+        <img src="/mascot-head.png" alt="driver.js logo" width="900" height="775" class="h-16 w-auto" />
       </a>
     </div>