Make homepage responsive

docs/src/components/Container.astro

@@ -1,3 +1,3 @@
-<div class="max-w-[1050px] mx-auto px-10">
+<div class="max-w-[1050px] mx-auto px-7 sm:px-10">
   <slot />
 </div>

docs/src/components/{examples/ExampleButton.tsx → ExampleButton.tsx}

@@ -11,7 +11,7 @@ export function ExampleButton(props: ExampleButtonProps) {
     <button
       id={id}
       onClick={onClick}
-      className="bg-transparent rounded-xl py-2 px-4 font-medium text-black border-2 border-black text-lg hover:bg-yellow-300 hover:text-black transition-colors duration-100">
+      className="bg-transparent rounded-lg lg:rounded-xl py-2 px-4 font-medium text-black border-2 border-black md:text-base lg:text-lg hover:bg-yellow-300 hover:text-black transition-colors duration-100">
       { text }
     </button>
   );

docs/src/components/Examples.astro

@@ -0,0 +1,527 @@
+---
+import { ExampleButton } from "./ExampleButton";
+---
+<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-3 md:mb-4 lg:mb-6" data-examples-heading>Examples</h2>
+<p class="text-base md:text-xl lg:text-2xl text-black leading-6" data-examples-tagline>Here are just a few examples; find more <a
+  class="text-black underline underline-offset-4" href="/docs/installation">in the documentation</a>.</p>
+
+<div class="flex flex-wrap gap-2 md:gap-2 lg:gap-3 my-6 md:my-8 lg:my-12" data-example-btns>
+  <ExampleButton id="animated-tour" text="Animated Tour" />
+  <ExampleButton id="static-tour" text="Non-Animated Tour" />
+  <ExampleButton id="async-tour" text="Async Tour" />
+  <ExampleButton id="no-element" text="No Element" />
+  <ExampleButton id="confirm-on-exit" text="Confirm on Exit" />
+  <ExampleButton id="show-progress" text="Show Progress" />
+  <ExampleButton id="simple-element-highlight" text="Simple Highlight" />
+  <ExampleButton id="simple-element-highlight-popover" text="Highlight with Popover" />
+  <ExampleButton id="prevent-close" text="Prevent Closing" />
+  <ExampleButton id="overlay-color" text="Overlay Color" />
+  <ExampleButton id="popover-position" text="Popover Positioning" />
+  <ExampleButton id="customizing-popover" text="Customizing Popover" />
+  <ExampleButton id="hooks-everything" text="Hooks for Everything" />
+  <a href="/docs/installation"
+     class="items-center flex text-base md:text-base lg:text-lg text-gray-900 bg-yellow-300 rounded-lg lg:rounded-xl px-5 py-2 hover:bg-yellow-500 hover:text-black">
+    and much more ...
+  </a>
+</div>
+
+<script>
+  import { driver } from "driver.js";
+  import "driver.js/dist/driver.css";
+  import { mountDummyElement, removeDummyElement } from "../components/CodeSample";
+
+  function markDone(btn) {
+    btn.classList.add("bg-gray-300", "hover:bg-gray-200", "line-through");
+  }
+
+  const demoTourButton = document.querySelector("[data-demo-tour]");
+  demoTourButton.addEventListener("click", () => {
+    const driverObj = driver({
+      popoverClass: "driverjs-theme",
+      showButtons: ["next", "previous"],
+      steps: [
+        {
+          element: "[data-hero-text]",
+          popover: {
+            title: "Before we start",
+            description: "This is just one use-case, make sure to look at the docs for more use-cases and examples.",
+            nextBtnText: "Okay, start!",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-driver-tagline]",
+          popover: {
+            title: "Focus Anything",
+            description: "You can use it to highlight literally anything, images, text, svg, div, span, li etc.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-driver-name]",
+          popover: {
+            title: "Why Driver.js",
+            description: "It's lightweight, has no dependencies, is MIT licensed, is highly customizable, and is super easy to use.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-docs-link]",
+          popover: {
+            title: "More Powerful than Ever",
+            description: "Driver.js has been completely rewritten from scratch and is now more powerful than ever.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-example-btns]",
+          popover: {
+            title: "Examples",
+            description: "Here are some examples to give you a rough idea.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-example-btns] a:last-child",
+          popover: {
+            title: "Visit Docs",
+            description: "Make sure to visit the docs for more examples and use-cases.",
+            side: "top",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-github-link]",
+          popover: {
+            title: "MIT Licensed",
+            description: "Driver.js is MIT licensed and is used by thousands of companies around the world.",
+            side: "top",
+            align: "start"
+          }
+        },
+        {
+          popover: {
+            description: "<img style='width: 270px; height: 206.65px; margin-bottom: 10px; border-radius: 5px;' src='https://i.imgur.com/3WpTnyA.gif' />That's it for now, make sure to <a class='underline font-medium' href='/docs/installation'>visit the docs</a> for more examples and use-cases.",
+            side: "bottom",
+            align: "start",
+            showButtons: [],
+            popoverClass: "default-theme"
+          }
+        }
+      ]
+    });
+
+    driverObj.drive();
+  });
+
+  const animatedTourBtn = document.getElementById('animated-tour');
+  animatedTourBtn.addEventListener("click", () => {
+    const driverObj = driver({
+      popoverClass: "driverjs-theme",
+      showButtons: ["next", "previous"],
+      steps: [
+        {
+          element: "[data-examples-heading]",
+          popover: {
+            title: "Animated Tour",
+            description: "Animated tour can simply be achieved by setting `animate` option true.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline]",
+          popover: {
+            title: "Just an Example",
+            description: "We don't have many steps in this example, but you can have as many as you want.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline] a",
+          popover: {
+            title: "That's it for now",
+            description: "Make sure to visit the docs for more examples and use-cases.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+      ],
+      onDestroyed: () => {
+        markDone(animatedTourBtn);
+      }
+    });
+
+    driverObj.drive();
+  });
+
+  const staticTourBtn = document.getElementById('static-tour');
+  staticTourBtn.addEventListener("click", () => {
+    const driverObj = driver({
+      animate: false,
+      popoverClass: "driverjs-theme",
+      showButtons: ["next", "previous"],
+      steps: [
+        {
+          element: "[data-examples-heading]",
+          popover: {
+            title: "Static Tour",
+            description: "This is a static tour, which means that it won't be animated.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline]",
+          popover: {
+            title: "Just an Example",
+            description: "We don't have many steps in this example, but you can have as many as you want.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline] a",
+          popover: {
+            title: "That's it for now",
+            description: "Make sure to visit the docs for more examples and use-cases.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+      ],
+      onDestroyed: () => {
+        markDone(staticTourBtn);
+      }
+    });
+
+    driverObj.drive();
+  });
+
+  const asyncTourBtn = document.getElementById('async-tour');
+  asyncTourBtn.addEventListener("click", () => {
+    const driverObj = driver({
+      animate: true,
+      popoverClass: "driverjs-theme",
+      showButtons: ["next", "previous"],
+      steps: [
+        {
+          popover: {
+            title: "Async Tour",
+            description: "You can also use Driver.js to create async tours. Element for the next step doesn't exist -- we will create before moving next.",
+            side: "bottom",
+            align: "start",
+            onNextClick: () => {
+              mountDummyElement();
+              driverObj.moveNext();
+            }
+          }
+        },
+        {
+          element: '.dynamic-el',
+          popover: {
+            title: "New Element",
+            description: "This element was created after the first step and will be destroyed after this step.",
+            side: "bottom",
+            align: "start",
+            onPrevClick: () => {
+              removeDummyElement();
+              driverObj.movePrevious();
+            },
+            onNextClick: () => {
+              removeDummyElement();
+              driverObj.moveNext();
+            }
+          }
+        },
+        {
+          popover: {
+            title: "More in Docs",
+            description: "There is a detailed guide on <a href='/docs/async-tour/' target='_blank' class='underline font-bold'>how to create async</a> tours in the documentation.",
+            side: "bottom",
+            align: "start",
+            onPrevClick: () => {
+              mountDummyElement();
+              driverObj.movePrevious();
+            }
+          }
+        },
+      ],
+      onDestroyed: () => {
+        markDone(asyncTourBtn);
+      }
+    });
+
+    driverObj.drive();
+  });
+
+  const exitConfirm = document.getElementById('confirm-on-exit');
+  exitConfirm.addEventListener("click", () => {
+    const driverObj = driver({
+      animate: true,
+      popoverClass: "driverjs-theme",
+      showButtons: ["next", "previous"],
+      steps: [
+        {
+          element: "[data-examples-heading]",
+          popover: {
+            title: "Confirm on Exit",
+            description: "You can also ask for confirmation before exiting the tour.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline]",
+          popover: {
+            title: "Just an Example",
+            description: "We don't have many steps in this example, but you can have as many as you want.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline] a",
+          popover: {
+            title: "That's it for now",
+            description: "Make sure to visit the docs for more examples and use-cases.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+      ],
+      onDestroyStarted: () => {
+        if (!driverObj.hasNextStep() || confirm("Are you sure?")) {
+          driverObj.destroy();
+        }
+      },
+      onDestroyed: () => {
+        markDone(exitConfirm);
+      }
+    });
+
+    driverObj.drive();
+  });
+
+  const showProgressBtn = document.getElementById('show-progress');
+  showProgressBtn.addEventListener('click', () => {
+    const driverObj = driver({
+      animate: true,
+      showProgress: true,
+      showButtons: ["next", "previous"],
+      steps: [
+        {
+          element: "[data-examples-heading]",
+          popover: {
+            title: "Show Progress",
+            description: "You can set `showProgress` to `true` and progress will be shown in the footer.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline]",
+          popover: {
+            title: "Just an Example",
+            description: "We don't have many steps in this example, but you can have as many as you want.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline] a",
+          popover: {
+            title: "That's it for now",
+            description: "Make sure to visit the docs for more examples and use-cases.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+      ],
+      onDestroyed: () => {
+        markDone(showProgressBtn);
+      }
+    });
+
+    driverObj.drive();
+  });
+
+  const simpleHighlightBtn = document.getElementById('simple-element-highlight');
+  simpleHighlightBtn.addEventListener('click', () => {
+    const driverObj = driver({
+      popoverClass: 'driverjs-theme',
+      onDestroyed: () => {
+        markDone(simpleHighlightBtn);
+      }
+    });
+
+    driverObj.highlight({
+      element: '[data-example-btns]'
+    })
+  });
+
+  const simpleHighlightPopoverBtn = document.getElementById('simple-element-highlight-popover');
+  simpleHighlightPopoverBtn.addEventListener('click', () => {
+    const driverObj = driver({
+      popoverClass: 'driverjs-theme',
+      onDestroyed: () => {
+        markDone(simpleHighlightPopoverBtn);
+      }
+    });
+
+    driverObj.highlight({
+      element: '[data-example-btns]',
+      popover: {
+        title: "Popover Highlight",
+        description: "You can also highlight an element with a popover.",
+        side: 'top'
+      }
+    });
+  });
+
+  const noElementbtn = document.getElementById('no-element');
+  noElementbtn.addEventListener('click', () => {
+    const driverObj = driver({
+      popoverClass: 'driverjs-theme',
+      onDestroyed: () => {
+        markDone(noElementbtn);
+      }
+    });
+
+    driverObj.highlight({
+      popover: {
+        title: "Without Element",
+        description: "You can also show a popover without highlighting an element. For example, this popover is shown without highlighting anything.",
+      }
+    });
+  });
+
+  const preventCloseBtn = document.getElementById('prevent-close');
+  preventCloseBtn.addEventListener('click', () => {
+    const driverObj = driver({
+      animate: true,
+      allowClose: false,
+      showProgress: true,
+      showButtons: ["next", "previous"],
+      steps: [
+        {
+          element: "[data-examples-heading]",
+          popover: {
+            title: "Show Progress",
+            description: "You can set `showProgress` to `true` and progress will be shown in the footer.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline]",
+          popover: {
+            title: "Just an Example",
+            description: "We don't have many steps in this example, but you can have as many as you want.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+        {
+          element: "[data-examples-tagline] a",
+          popover: {
+            title: "That's it for now",
+            description: "Make sure to visit the docs for more examples and use-cases.",
+            side: "bottom",
+            align: "start"
+          }
+        },
+      ],
+      onDestroyed: () => {
+        markDone(preventCloseBtn);
+      }
+    });
+
+    driverObj.drive();
+  });
+
+  const overlayColorBtn = document.getElementById('overlay-color');
+  overlayColorBtn.addEventListener('click', () => {
+    const driverObj = driver({
+      overlayColor: 'red',
+      overlayOpacity: 0.5,
+      onDestroyed: () => {
+        markDone(overlayColorBtn);
+      }
+    });
+
+    driverObj.highlight({
+      element: '[data-example-btns]',
+      popover: {
+        title: "Popover Highlight",
+        description: "You can also highlight an element with a popover.",
+        side: 'top'
+      }
+    });
+  });
+
+  const popoverPositionBtn = document.getElementById('popover-position');
+  popoverPositionBtn.addEventListener('click', () => {
+    const driverObj = driver({
+      onDestroyed: () => {
+        markDone(popoverPositionBtn);
+      }
+    });
+
+    driverObj.highlight({
+      element: '#popover-position',
+      popover: {
+        title: "Popover Position",
+        description: "You can also change the position of the popover using `side` and `align` options.<br /> Allowed sides are `top`, `bottom`, `left` and `right`. Allowed aligns are `start`, `center` and `end`.",
+        side: 'top',
+        align: 'start'
+      }
+    });
+  });
+
+  const customizingBtn = document.getElementById('customizing-popover');
+  customizingBtn.addEventListener('click', () => {
+    const driverObj = driver({
+      popoverClass: 'driverjs-theme',
+      onDestroyed: () => {
+        markDone(customizingBtn);
+      }
+    });
+
+    driverObj.highlight({
+      element: '#customizing-popover',
+      popover: {
+        title: "Customizing Popover",
+        description: "Add your own class using `popoverClass` or use `onPopoverRendered` to get full control over the popover. <br /><br /> Visit these pages which cover <a class='font-medium underline' href='/docs/styling-popover'>styling</a> and <a class='font-medium underline' href='/docs/buttons'>customizing popovers</a> in detail.",
+        side: 'top',
+        align: 'start'
+      }
+    });
+  });
+
+  const hooksEverythingBtn = document.getElementById('hooks-everything');
+  hooksEverythingBtn.addEventListener('click', () => {
+    const driverObj = driver({
+      popoverClass: 'driverjs-theme',
+      onDestroyed: () => {
+        markDone(hooksEverythingBtn);
+      }
+    });
+
+    driverObj.highlight({
+      element: '#hooks-everything',
+      popover: {
+        title: "Hooks for Everything",
+        description: "Have a look at the <a class='font-medium underline' href='/docs/configuration'>configuration</a> page to see how you can use hooks to control the driver.",
+        side: 'top',
+        align: 'start'
+      }
+    });
+  });
+</script>

docs/src/components/FeatureMarquee.tsx

@@ -19,10 +19,10 @@ const featureList = [
 export function FeatureMarquee() {
   return (
     <Marquee autoFill>
-      <p className="py-4 text-2xl whitespace-nowrap">
+      <p className="py-2.5 md:py-3.5 lg:py-4 text-lg md:text-xl lg:text-2xl whitespace-nowrap">
         { featureList.map((featureItem, index) => (
           <React.Fragment key={index}>
-            { featureItem }<span className="mx-3">&middot;</span>
+            { featureItem }<span className="mx-2 md:mx-3">&middot;</span>
           </React.Fragment>
         ))}
       </p>

docs/src/components/HeroSection.astro

@@ -0,0 +1,26 @@
+---
+import Container from "./Container.astro";
+---
+<div class="bg-yellow-300">
+  <Container>
+    <div class="py-10 md:py-14 lg:py-20 flex justify-start items-center gap-4">
+      <div class="flex-grow" data-hero-text>
+        <h1 data-driver-name class="text-7xl md:text-8xl lg:text-9xl mb-2 md:mb-3 lg:mb-4 font-bold">driver.js</h1>
+        <p data-driver-tagline class="text-md md:text-2xl lg:text-3xl">Product tours, highlights, contextual help and more.</p>
+        <div class="mt-4 md:mt-8 lg:mt-10 flex flex-col sm:flex-row gap-2 items-stretch">
+          <button data-demo-tour class="bg-black rounded-xl py-2 md:py-3 px-6 font-medium text-white text-lg md:text-xl focus:outline-0">
+            Show Demo Tour
+          </button>
+          <a href="/docs/installation"
+             data-docs-link
+             class="bg-white rounded-xl py-2 md:py-3 px-6 font-medium text-black text-lg md:text-xl focus:outline-0 border-4 border-black text-center">
+            Get Started
+          </a>
+        </div>
+      </div>
+      <div class="flex-shrink-0 hidden sm:flex">
+        <img src="/driver.svg" alt="Hero Image" class="sm:h-48 md:h-60 lg:h-72" />
+      </div>
+    </div>
+  </Container>
+</div>

docs/src/components/OpenSourceLove.astro

@@ -0,0 +1,34 @@
+---
+import Container from "./Container.astro";
+import { getFormattedStars } from "../lib/github";
+
+const starCount = getFormattedStars('kamranahmedse/driver.js');
+---
+<div class="py-10 md:py-12 lg:py-24 bg-white text-black border-t-2 border-t-black">
+  <Container>
+    <div class="flex items-center">
+      <div>
+        <h2 class="text-3xl md:text-4xl lg:text-6xl font-bold mb-4">Loved by Many</h2>
+        <p class="md:text-xl lg:text-2xl text-black mb-6 lg:mb-8">With millions of downloads, Driver.js is an <span class="font-bold">MIT licensed</span>
+          opensource
+          project and is used by
+          thousands of companies around the world.</p>
+
+        <div class="flex flex-col sm:flex-row gap-2 md:gap-3">
+          <a href="https://github.com/kamranahmedse/driver.js"
+             data-github-link
+             target="_blank"
+             class="flex justify-center items-center font-medium text-lg md:text-xl lg:text-2xl rounded-lg lg:rounded-xl py-2 lg:py-3 px-5 bg-yellow-300 border-black hover:bg-yellow-400">
+            <span class="mr-3 inline-flex items-center"><img src="/star.svg" alt="Hero Image" class="h-5 md:h-7 mr-1 md:mr-2" /> { starCount }</span>
+            GitHub Stars
+          </a>
+          <a href="/docs/installation"
+             class="bg-black justify-center text-white flex items-center font-medium text-lg md:text-xl lg:text-2xl border-4 border-black rounded-lg lg:rounded-xl py-2 lg:py-3 px-5 hover:bg-gray-800">
+            Start Using Driver.js
+          </a>
+        </div>
+      </div>
+      <img src="/thumbs.svg" alt="Hero Image" class="hidden lg:block h-36 ml-16" />
+    </div>
+  </Container>
+</div>

docs/src/components/UsecaseItem.astro

@@ -7,12 +7,12 @@ export interface Props {
 const { title, description } = Astro.props;
 ---
 
-<div class="flex flex-col gap-4">
-  <span class="border-b-2 border-b-black block w-[50px]"></span>
-  <h3 class="text-3xl font-bold text-black">
+<div class="flex flex-col gap-2 md:gap-2 lg:gap-4 pt-2">
+  <span class="border-b-2 border-b-black block w-[30px] md:w-[40px] lg:w-[50px]"></span>
+  <h3 class="text-xl md:text-2xl lg:text-3xl mt-2 md:mt-3 lg:mt-0 font-bold text-black">
     { title }
   </h3>
-  <p class="text-xl text-black">
+  <p class="md:text-lg lg:text-xl text-black">
     { description }
   </p>
 </div>

docs/src/components/UsecaseList.astro

@@ -0,0 +1,23 @@
+---
+import UsecaseItem from "./UsecaseItem.astro";
+---
+<p class="text-base md:text-xl lg:text-2xl text-black">Due to it's extensive API, driver.js can be used for a wide range of use
+  cases.</p>
+<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 lg:gap-12 mt-10">
+  <UsecaseItem
+    title="Onboard Users"
+    description="Onboard your users by explaining how to use your product and answer common questions."
+  />
+  <UsecaseItem
+    title="Remove Distractions"
+    description="With highlight feature, you can remove distractions and focus your users attention on what matters."
+  />
+  <UsecaseItem
+    title="Contextual Help"
+    description="Provide contextual help for your users, explain how to use your product and answer common questions."
+  />
+  <UsecaseItem
+    title="Feature Adoption"
+    description="Highlight new features, explain how to use them and make sure your users don't miss them."
+  />
+</div>

docs/src/components/examples/SimpleHighlight.tsx

@@ -1,25 +0,0 @@
-import { useEffect } from "react";
-import { Config, driver } from "driver.js";
-import "driver.js/dist/driver.css";
-
-import type { DriveStep } from "driver.js";
-
-type SimpleHighlightProps = {
-  config?: Config;
-  step: DriveStep;
-};
-
-export function SimpleHighlight(props: SimpleHighlightProps) {
-  const { config, step } = props;
-
-  function onClick() {
-    const driverObj = driver(config);
-    driverObj.highlight(step);
-  }
-
-  return (
-    <button onClick={onClick} className="w-full rounded-md bg-black p-2 text-white">
-      Highlight Something
-    </button>
-  );
-}

docs/src/content/guides/installation.mdx

@@ -4,8 +4,6 @@ groupTitle: "Introduction"
 sort: 1
 ---
 
-import { SimpleHighlight } from "../../components/examples/SimpleHighlight.js";
-
 Run one of the following commands to install the package:
 
 ```bash

docs/src/pages/index.astro

@@ -3,634 +3,48 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 import { FeatureMarquee } from "../components/FeatureMarquee";
 import Container from "../components/Container.astro";
 import UsecaseItem from "../components/UsecaseItem.astro";
-import { ExampleButton } from "../components/examples/ExampleButton";
-import { getFormattedStars } from "../lib/github";
-
-const starCount = getFormattedStars('kamranahmedse/driver.js');
+import { ExampleButton } from "../components/ExampleButton";
+import HeroSection from "../components/HeroSection.astro";
+import Examples from "../components/Examples.astro";
+import UsecaseList from "../components/UsecaseList.astro";
+import OpenSourceLove from "../components/OpenSourceLove.astro";
 ---
 <BaseLayout>
-  <div class="bg-yellow-300">
-    <Container>
-      <div class="py-10 md:py-20 flex justify-start items-center gap-4">
-        <div class="flex-grow" data-hero-text>
-          <h1 data-driver-name class="text-5xl md:text-9xl mb-2 md:mb-4 font-bold">driver.js</h1>
-          <p data-driver-tagline class="text-md md:text-3xl">Product tours, highlights, contextual help and more.</p>
-          <div class="mt-4 md:mt-12 mb-2 flex gap-2 items-stretch">
-            <button data-demo-tour class="bg-black rounded-lg md:rounded-xl py-2 md:py-4 px-5 font-medium text-white text-base md:text-xl focus:outline-0">
-              Show Demo Tour
-            </button>
-            <a href="/docs/installation"
-               data-docs-link
-               class="flex items-center font-bold text-xl border-4 border-black rounded-xl px-5 bg-white">
-              Get Started
-            </a>
-          </div>
-        </div>
-        <div class="flex-shrink-0 hidden md:flex">
-          <img src="/driver.svg" alt="Hero Image" class="h-72" />
-        </div>
-      </div>
-    </Container>
-  </div>
-  <div class="bg-white overflow-x-hidden overflow-y-hidden relative h-[64px] border-b-2 border-b-black" data-feat-marquee>
+  <HeroSection />
+  <div
+    class="bg-white overflow-x-hidden overflow-y-hidden relative h-[48px] md:h-[56px] lg:h-[64px] border-b-2 border-b-black"
+    data-feat-marquee>
     <FeatureMarquee client:only />
   </div>
 
-  <div class="py-24 bg-white text-black">
+  <div class="py-10 md:py-12 lg:py-24 bg-white text-black">
     <Container>
-      <h2 class="text-6xl font-bold mb-6" data-examples-heading>Examples</h2>
-      <p class="text-2xl text-black mb-12" data-examples-tagline>Here are just a few examples; find more and implementation details <a
-        class="text-black underline underline-offset-4" href="/docs/installation">in the documentation</a>.</p>
-
-      <div class="flex flex-wrap gap-3" data-example-btns>
-        <ExampleButton id="animated-tour" text="Animated Tour" />
-        <ExampleButton id="static-tour" text="Non-Animated Tour" />
-        <ExampleButton id="async-tour" text="Async Tour" />
-        <ExampleButton id="no-element" text="No Element" />
-        <ExampleButton id="confirm-on-exit" text="Confirm on Exit" />
-        <ExampleButton id="show-progress" text="Show Progress" />
-        <ExampleButton id="simple-element-highlight" text="Simple Highlight" />
-        <ExampleButton id="simple-element-highlight-popover" text="Highlight with Popover" />
-        <ExampleButton id="prevent-close" text="Prevent Closing" />
-        <ExampleButton id="overlay-color" text="Overlay Color" />
-        <ExampleButton id="popover-position" text="Popover Positioning" />
-        <ExampleButton id="customizing-popover" text="Customizing Popover" />
-        <ExampleButton id="hooks-everything" text="Hooks for Everything" />
-        <a href="/docs/installation"
-           class="items-center flex text-lg text-gray-900 bg-yellow-300 rounded-xl px-5 hover:bg-yellow-500 hover:text-black">
-          and much more ...
-        </a>
-      </div>
-
-      <p class="text-2xl my-14 text-black">Due to it's extensive API, driver.js can be used for a wide range of use
-        cases.</p>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
-        <UsecaseItem
-          title="Onboard Users"
-          description="Onboard your users by explaining how to use your product and answer common questions."
-        />
-        <UsecaseItem
-          title="Remove Distractions"
-          description="With highlight feature, you can remove distractions and focus your users attention on what matters."
-        />
-        <UsecaseItem
-          title="Contextual Help"
-          description="Provide contextual help for your users, explain how to use your product and answer common questions."
-        />
-        <UsecaseItem
-          title="Feature Adoption"
-          description="Highlight new features, explain how to use them and make sure your users don't miss them."
-        />
-      </div>
+      <Examples />
+      <UsecaseList />
     </Container>
   </div>
 
-  <div class="py-24 bg-white text-black border-t-2 border-t-black">
-    <Container>
-      <div class="flex items-center">
-        <div>
-          <h2 class="text-6xl font-bold mb-4">Loved by Many</h2>
-          <p class="text-2xl text-black mb-8">With millions of downloads, Driver.js is an <span class="font-bold">MIT licensed</span>
-            opensource
-            project and is used by
-            thousands of companies around the world.</p>
-
-          <div class="flex gap-3">
-            <a href="https://github.com/kamranahmedse/driver.js"
-               data-github-link
-               target="_blank"
-               class="flex items-center font-medium text-2xl rounded-xl py-3 px-5 bg-yellow-300 border-black hover:bg-yellow-400">
-              <span class="mr-3 inline-flex items-center"><img src="/star.svg" alt="Hero Image" class="h-7 mr-2" /> { starCount }</span>
-              GitHub Stars
-            </a>
-            <a href="/docs/installation"
-               class="bg-black text-white flex items-center font-medium text-2xl border-4 border-black rounded-xl py-3 px-5 hover:bg-gray-800">
-              Start Using Driver.js
-            </a>
-          </div>
-        </div>
-        <img src="/thumbs.svg" alt="Hero Image" class="h-36 ml-16" />
-      </div>
-    </Container>
-  </div>
+  <OpenSourceLove />
 
   <div class="py-8 bg-black text-white">
     <Container>
       <p class="text-lg text-white text-center">
-        MIT Licensed &copy; 2023 <span class="mx-3">&middot;</span>
-        <a href="/docs/installation" class="">
-          Docs
-        </a>
-        <a href="https://github.com/kamranahmedse/driver.js" target="_blank" class="ml-5">
-          GitHub
-          <img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
-        </a>
-        <a href="https://twitter.com/kamrify" target="_blank" class=" ml-5">
-          Twitter
-          <img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
-        </a>
+        MIT Licensed &copy; 2023
+        <span class="hidden sm:inline">
+          <span class="mx-3">&middot;</span>
+          <a href="/docs/installation" class="">
+            Docs
+          </a>
+          <a href="https://github.com/kamranahmedse/driver.js" target="_blank" class="ml-5">
+            GitHub
+            <img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
+          </a>
+          <a href="https://twitter.com/kamrify" target="_blank" class=" ml-5">
+            Twitter
+            <img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
+          </a>
+        </span>
       </p>
     </Container>
   </div>
-
-  <script>
-    import { driver } from "driver.js";
-    import "driver.js/dist/driver.css";
-    import { mountDummyElement, removeDummyElement } from "../components/CodeSample";
-
-    function markDone(btn) {
-      btn.classList.add("bg-gray-300", "hover:bg-gray-200", "line-through");
-    }
-
-    const demoTourButton = document.querySelector("[data-demo-tour]");
-    demoTourButton.addEventListener("click", () => {
-      const driverObj = driver({
-        popoverClass: "driverjs-theme",
-        showButtons: ["next", "previous"],
-        steps: [
-          {
-            element: "[data-hero-text]",
-            popover: {
-              title: "Before we start",
-              description: "This is just one use-case, make sure to look at the docs for more use-cases and examples.",
-              nextBtnText: "Okay, start!",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-driver-tagline]",
-            popover: {
-              title: "Focus Anything",
-              description: "You can use it to highlight literally anything, images, text, svg, div, span, li etc.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-driver-name]",
-            popover: {
-              title: "Why Driver.js",
-              description: "It's lightweight, has no dependencies, is MIT licensed, is highly customizable, and is super easy to use.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-docs-link]",
-            popover: {
-              title: "More Powerful than Ever",
-              description: "Driver.js has been completely rewritten from scratch and is now more powerful than ever.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-example-btns]",
-            popover: {
-              title: "Examples",
-              description: "Here are some examples to give you a rough idea.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-example-btns] a:last-child",
-            popover: {
-              title: "Visit Docs",
-              description: "Make sure to visit the docs for more examples and use-cases.",
-              side: "top",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-github-link]",
-            popover: {
-              title: "MIT Licensed",
-              description: "Driver.js is MIT licensed and is used by thousands of companies around the world.",
-              side: "top",
-              align: "start"
-            }
-          },
-          {
-            popover: {
-              description: "<img style='width: 270px; height: 206.65px; margin-bottom: 10px; border-radius: 5px;' src='https://i.imgur.com/3WpTnyA.gif' />That's it for now, make sure to <a class='underline font-medium' href='/docs/installation'>visit the docs</a> for more examples and use-cases.",
-              side: "bottom",
-              align: "start",
-              showButtons: [],
-              popoverClass: "default-theme"
-            }
-          }
-        ]
-      });
-
-      driverObj.drive();
-    });
-
-    const animatedTourBtn = document.getElementById('animated-tour');
-    animatedTourBtn.addEventListener("click", () => {
-      const driverObj = driver({
-        popoverClass: "driverjs-theme",
-        showButtons: ["next", "previous"],
-        steps: [
-          {
-            element: "[data-examples-heading]",
-            popover: {
-              title: "Animated Tour",
-              description: "Animated tour can simply be achieved by setting `animate` option true.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline]",
-            popover: {
-              title: "Just an Example",
-              description: "We don't have many steps in this example, but you can have as many as you want.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline] a",
-            popover: {
-              title: "That's it for now",
-              description: "Make sure to visit the docs for more examples and use-cases.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-        ],
-        onDestroyed: () => {
-          markDone(animatedTourBtn);
-        }
-      });
-
-      driverObj.drive();
-    });
-
-    const staticTourBtn = document.getElementById('static-tour');
-    staticTourBtn.addEventListener("click", () => {
-      const driverObj = driver({
-        animate: false,
-        popoverClass: "driverjs-theme",
-        showButtons: ["next", "previous"],
-        steps: [
-          {
-            element: "[data-examples-heading]",
-            popover: {
-              title: "Static Tour",
-              description: "This is a static tour, which means that it won't be animated.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline]",
-            popover: {
-              title: "Just an Example",
-              description: "We don't have many steps in this example, but you can have as many as you want.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline] a",
-            popover: {
-              title: "That's it for now",
-              description: "Make sure to visit the docs for more examples and use-cases.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-        ],
-        onDestroyed: () => {
-          markDone(staticTourBtn);
-        }
-      });
-
-      driverObj.drive();
-    });
-
-    const asyncTourBtn = document.getElementById('async-tour');
-    asyncTourBtn.addEventListener("click", () => {
-      const driverObj = driver({
-        animate: true,
-        popoverClass: "driverjs-theme",
-        showButtons: ["next", "previous"],
-        steps: [
-          {
-            popover: {
-              title: "Async Tour",
-              description: "You can also use Driver.js to create async tours. Element for the next step doesn't exist -- we will create before moving next.",
-              side: "bottom",
-              align: "start",
-              onNextClick: () => {
-                mountDummyElement();
-                driverObj.moveNext();
-              }
-            }
-          },
-          {
-            element: '.dynamic-el',
-            popover: {
-              title: "New Element",
-              description: "This element was created after the first step and will be destroyed after this step.",
-              side: "bottom",
-              align: "start",
-              onPrevClick: () => {
-                removeDummyElement();
-                driverObj.movePrevious();
-              },
-              onNextClick: () => {
-                removeDummyElement();
-                driverObj.moveNext();
-              }
-            }
-          },
-          {
-            popover: {
-              title: "More in Docs",
-              description: "There is a detailed guide on <a href='/docs/async-tour/' target='_blank' class='underline font-bold'>how to create async</a> tours in the documentation.",
-              side: "bottom",
-              align: "start",
-              onPrevClick: () => {
-                mountDummyElement();
-                driverObj.movePrevious();
-              }
-            }
-          },
-        ],
-        onDestroyed: () => {
-          markDone(asyncTourBtn);
-        }
-      });
-
-      driverObj.drive();
-    });
-
-    const exitConfirm = document.getElementById('confirm-on-exit');
-    exitConfirm.addEventListener("click", () => {
-      const driverObj = driver({
-        animate: true,
-        popoverClass: "driverjs-theme",
-        showButtons: ["next", "previous"],
-        steps: [
-          {
-            element: "[data-examples-heading]",
-            popover: {
-              title: "Confirm on Exit",
-              description: "You can also ask for confirmation before exiting the tour.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline]",
-            popover: {
-              title: "Just an Example",
-              description: "We don't have many steps in this example, but you can have as many as you want.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline] a",
-            popover: {
-              title: "That's it for now",
-              description: "Make sure to visit the docs for more examples and use-cases.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-        ],
-        onDestroyStarted: () => {
-          if (!driverObj.hasNextStep() || confirm("Are you sure?")) {
-            driverObj.destroy();
-          }
-        },
-        onDestroyed: () => {
-          markDone(exitConfirm);
-        }
-      });
-
-      driverObj.drive();
-    });
-
-    const showProgressBtn = document.getElementById('show-progress');
-    showProgressBtn.addEventListener('click', () => {
-      const driverObj = driver({
-        animate: true,
-        showProgress: true,
-        showButtons: ["next", "previous"],
-        steps: [
-          {
-            element: "[data-examples-heading]",
-            popover: {
-              title: "Show Progress",
-              description: "You can set `showProgress` to `true` and progress will be shown in the footer.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline]",
-            popover: {
-              title: "Just an Example",
-              description: "We don't have many steps in this example, but you can have as many as you want.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline] a",
-            popover: {
-              title: "That's it for now",
-              description: "Make sure to visit the docs for more examples and use-cases.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-        ],
-        onDestroyed: () => {
-          markDone(showProgressBtn);
-        }
-      });
-
-      driverObj.drive();
-    });
-
-    const simpleHighlightBtn = document.getElementById('simple-element-highlight');
-    simpleHighlightBtn.addEventListener('click', () => {
-      const driverObj = driver({
-        popoverClass: 'driverjs-theme',
-        onDestroyed: () => {
-          markDone(simpleHighlightBtn);
-        }
-      });
-
-      driverObj.highlight({
-        element: '[data-example-btns]'
-      })
-    });
-
-    const simpleHighlightPopoverBtn = document.getElementById('simple-element-highlight-popover');
-    simpleHighlightPopoverBtn.addEventListener('click', () => {
-      const driverObj = driver({
-        popoverClass: 'driverjs-theme',
-        onDestroyed: () => {
-          markDone(simpleHighlightPopoverBtn);
-        }
-      });
-
-      driverObj.highlight({
-        element: '[data-example-btns]',
-        popover: {
-          title: "Popover Highlight",
-          description: "You can also highlight an element with a popover.",
-          side: 'top'
-        }
-      });
-    });
-
-    const noElementbtn = document.getElementById('no-element');
-    noElementbtn.addEventListener('click', () => {
-      const driverObj = driver({
-        popoverClass: 'driverjs-theme',
-        onDestroyed: () => {
-          markDone(noElementbtn);
-        }
-      });
-
-      driverObj.highlight({
-        popover: {
-          title: "Without Element",
-          description: "You can also show a popover without highlighting an element. For example, this popover is shown without highlighting anything.",
-        }
-      });
-    });
-
-    const preventCloseBtn = document.getElementById('prevent-close');
-    preventCloseBtn.addEventListener('click', () => {
-      const driverObj = driver({
-        animate: true,
-        allowClose: false,
-        showProgress: true,
-        showButtons: ["next", "previous"],
-        steps: [
-          {
-            element: "[data-examples-heading]",
-            popover: {
-              title: "Show Progress",
-              description: "You can set `showProgress` to `true` and progress will be shown in the footer.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline]",
-            popover: {
-              title: "Just an Example",
-              description: "We don't have many steps in this example, but you can have as many as you want.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-          {
-            element: "[data-examples-tagline] a",
-            popover: {
-              title: "That's it for now",
-              description: "Make sure to visit the docs for more examples and use-cases.",
-              side: "bottom",
-              align: "start"
-            }
-          },
-        ],
-        onDestroyed: () => {
-          markDone(preventCloseBtn);
-        }
-      });
-
-      driverObj.drive();
-    });
-
-    const overlayColorBtn = document.getElementById('overlay-color');
-    overlayColorBtn.addEventListener('click', () => {
-      const driverObj = driver({
-        overlayColor: 'red',
-        overlayOpacity: 0.5,
-        onDestroyed: () => {
-          markDone(overlayColorBtn);
-        }
-      });
-
-      driverObj.highlight({
-        element: '[data-example-btns]',
-        popover: {
-          title: "Popover Highlight",
-          description: "You can also highlight an element with a popover.",
-          side: 'top'
-        }
-      });
-    });
-
-    const popoverPositionBtn = document.getElementById('popover-position');
-    popoverPositionBtn.addEventListener('click', () => {
-      const driverObj = driver({
-        onDestroyed: () => {
-          markDone(popoverPositionBtn);
-        }
-      });
-
-      driverObj.highlight({
-        element: '#popover-position',
-        popover: {
-          title: "Popover Position",
-          description: "You can also change the position of the popover using `side` and `align` options.<br /> Allowed sides are `top`, `bottom`, `left` and `right`. Allowed aligns are `start`, `center` and `end`.",
-          side: 'top',
-          align: 'start'
-        }
-      });
-    });
-
-    const customizingBtn = document.getElementById('customizing-popover');
-    customizingBtn.addEventListener('click', () => {
-      const driverObj = driver({
-        popoverClass: 'driverjs-theme',
-        onDestroyed: () => {
-          markDone(customizingBtn);
-        }
-      });
-
-      driverObj.highlight({
-        element: '#customizing-popover',
-        popover: {
-          title: "Customizing Popover",
-          description: "Add your own class using `popoverClass` or use `onPopoverRendered` to get full control over the popover. <br /><br /> Visit these pages which cover <a class='font-medium underline' href='/docs/styling-popover'>styling</a> and <a class='font-medium underline' href='/docs/buttons'>customizing popovers</a> in detail.",
-          side: 'top',
-          align: 'start'
-        }
-      });
-    });
-
-    const hooksEverythingBtn = document.getElementById('hooks-everything');
-    hooksEverythingBtn.addEventListener('click', () => {
-      const driverObj = driver({
-        popoverClass: 'driverjs-theme',
-        onDestroyed: () => {
-          markDone(hooksEverythingBtn);
-        }
-      });
-
-      driverObj.highlight({
-        element: '#hooks-everything',
-        popover: {
-          title: "Hooks for Everything",
-          description: "Have a look at the <a class='font-medium underline' href='/docs/configuration'>configuration</a> page to see how you can use hooks to control the driver.",
-          side: 'top',
-          align: 'start'
-        }
-      });
-    });
-  </script>
 </BaseLayout>