|
|
--- |
|
|
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-32 bg-white text-black"> |
|
|
<Container> |
|
|
<h2 class="text-6xl font-bold mb-6">Examples</h2> |
|
|
<p class="text-2xl text-black mb-12">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-3" data-example-btns> |
|
|
<ExampleButton text="Animated Tour" /> |
|
|
<ExampleButton text="Non-Animated Tour" /> |
|
|
<ExampleButton text="Asynchronous Tour" /> |
|
|
<ExampleButton text="Confirm on Exit" /> |
|
|
<ExampleButton text="Show Progress" /> |
|
|
<ExampleButton text="Simple Element Highlight" /> |
|
|
<ExampleButton text="Prevent Tour from Closing" /> |
|
|
<ExampleButton text="Selective Popover Buttons" /> |
|
|
<ExampleButton text="Overlay Color" /> |
|
|
<ExampleButton text="Popover Positioning" /> |
|
|
<ExampleButton text="Customizing Popover" /> |
|
|
<ExampleButton text="Hooks for Everything" /> |
|
|
<a href="/" |
|
|
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-32 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-bold 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-bold 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 © 2023 <span class="mx-3">·</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"; |
|
|
|
|
|
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" |
|
|
} |
|
|
} |
|
|
] |
|
|
}); |
|
|
|
|
|
const demoTourButton = document.querySelector("[data-demo-tour]"); |
|
|
demoTourButton.addEventListener("click", () => { |
|
|
driverObj.drive(); |
|
|
}); |
|
|
</script> |
|
|
</BaseLayout> |
|
|
|
