docs/src/pages/index.astro

---
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');
---
<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>
    <FeatureMarquee client:only />
  </div>

  <div class="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="Asynchronous Tour" />
        <ExampleButton id="confirm-on-exit" text="Confirm on Exit" />
        <ExampleButton id="show-progress" text="Show Progress" />
        <ExampleButton id="simple-element-highlight" text="Simple Element Highlight" />
        <ExampleButton id="simple-element-highlight-popover" text="Simple Highlight with Popover" />
        <ExampleButton id="prevent-close" text="Prevent Tour from Closing" />
        <ExampleButton id="overlay-color" text="Overlay Color" />
        <ExampleButton text="Popover Positioning" />
        <ExampleButton text="Customizing Popover" />
        <ExampleButton 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>
    </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>

  <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/kamranahmedse" target="_blank" class=" ml-5">
          Twitter
          <img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
        </a>
      </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 visit the docs 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 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'
        }
      });
    });
  </script>
</BaseLayout>