File size: 5,407 Bytes
c73f86b 7660c1f c73f86b 7d64866 c73f86b 06ea972 c73f86b 7d64866 46f9483 c73f86b 7d64866 c73f86b 7660c1f 7d64866 06ea972 c73f86b 7660c1f c73f86b 7d64866 7660c1f c73f86b 7660c1f 7d64866 1d3e157 06ea972 1d3e157 06ea972 7d64866 06ea972 1d3e157 06ea972 1d3e157 06ea972 1d3e157 06ea972 1d3e157 06ea972 1d3e157 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 |
---
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";
---
<BaseLayout>
<div class="bg-yellow-300">
<Container>
<div class="py-24 flex justify-start items-center gap-4">
<div class="flex-grow">
<h1 class="text-9xl mb-4 font-bold">driver.js</h1>
<p class="text-3xl">Product tours, highlights, contextual help and more.</p>
<div class="mt-12 mb-2 flex gap-2 items-stretch">
<button class="bg-black rounded-xl py-4 px-5 font-medium text-white text-xl">Show Demo Tour</button>
<a href="/docs/installation"
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">
<img src="/driver.svg" alt="Hero Image" class="h-72" />
</div>
</div>
</Container>
</div>
<div class="bg-white overflow-x-hidden relative h-[64px] border-b-2 border-b-black">
<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">
<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"
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" /> 14.7k</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>
</BaseLayout>
|