File size: 8,788 Bytes
c73f86b 7660c1f a231257 c73f86b 8aca263 43f2c65 8aca263 06ea972 8aca263 06ea972 c73f86b 43f2c65 c73f86b 8aca263 46f9483 c73f86b 7d64866 c73f86b 7660c1f 7d64866 06ea972 c73f86b 8aca263 7660c1f c73f86b 7d64866 7660c1f c73f86b 7660c1f 7d64866 1d3e157 06ea972 1d3e157 06ea972 8aca263 06ea972 7d64866 a231257 1d3e157 06ea972 1d3e157 06ea972 1d3e157 06ea972 1d3e157 06ea972 1d3e157 8aca263 c73f86b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 |
---
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>
|