Hugging Face's logo

Spaces:
aletrn
/
driver.js
Running

App Files Community
kamrify commited on
Commit
c73f86b
·
1 Parent(s): 6cadce0

Add basic home setup

Browse files
Files changed (14) hide show
  1. docs/.gitignore +21 -0
  2. docs/astro.config.mjs +9 -0
  3. docs/package.json +23 -0
  4. docs/pnpm-lock.yaml +0 -0
  5. docs/public/driver.svg +57 -0
  6. docs/public/favicon.svg +9 -0
  7. docs/src/components/Container.astro +3 -0
  8. docs/src/components/FeatureMarquee.tsx +30 -0
  9. docs/src/env.d.ts +1 -0
  10. docs/src/layouts/BaseLayout.astro +22 -0
  11. docs/src/pages/index.astro +72 -0
  12. docs/tailwind.config.cjs +10 -0
  13. docs/tsconfig.json +7 -0
  14. package.json +1 -0
docs/.gitignore ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # build output
2
+ dist/
3
+
4
+ # generated types
5
+ .astro/
6
+
7
+ # dependencies
8
+ node_modules/
9
+
10
+ # logs
11
+ npm-debug.log*
12
+ yarn-debug.log*
13
+ yarn-error.log*
14
+ pnpm-debug.log*
15
+
16
+ # environment variables
17
+ .env
18
+ .env.production
19
+
20
+ # macOS-specific files
21
+ .DS_Store
docs/astro.config.mjs ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ import { defineConfig } from 'astro/config';
2
+ import tailwind from "@astrojs/tailwind";
3
+
4
+ import react from "@astrojs/react";
5
+
6
+ // https://astro.build/config
7
+ export default defineConfig({
8
+ integrations: [tailwind(), react()]
9
+ });
docs/package.json ADDED
@@ -0,0 +1,23 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "driver-docs",
3
+ "type": "module",
4
+ "version": "0.0.1",
5
+ "scripts": {
6
+ "dev": "astro dev",
7
+ "start": "astro dev",
8
+ "build": "astro build",
9
+ "preview": "astro preview",
10
+ "astro": "astro"
11
+ },
12
+ "dependencies": {
13
+ "@astrojs/react": "^2.2.1",
14
+ "@astrojs/tailwind": "^4.0.0",
15
+ "@types/react": "^18.0.21",
16
+ "@types/react-dom": "^18.0.6",
17
+ "astro": "^2.7.0",
18
+ "react": "^18.0.0",
19
+ "react-dom": "^18.0.0",
20
+ "react-fast-marquee": "^1.6.0",
21
+ "tailwindcss": "^3.0.24"
22
+ }
23
+ }
docs/pnpm-lock.yaml ADDED
The diff for this file is too large to render. See raw diff
 
docs/public/driver.svg ADDED
docs/public/favicon.svg ADDED
docs/src/components/Container.astro ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ <div class="max-w-[1050px] mx-auto px-10">
2
+ <slot />
3
+ </div>
docs/src/components/FeatureMarquee.tsx ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from "react";
2
+ import Marquee from "react-fast-marquee";
3
+
4
+ const featureList = [
5
+ "Open Source",
6
+ "Written in TypeScript",
7
+ "No dependencies",
8
+ "Vanilla JavaScript",
9
+ "Light-weight",
10
+ "Feature Rich",
11
+ "Highly Customizable",
12
+ "Easy to use",
13
+ "Accessible",
14
+ "Frameworks Ready",
15
+ "MIT Licensed",
16
+ ];
17
+
18
+ export function FeatureMarquee() {
19
+ return (
20
+ <Marquee autoFill>
21
+ <p className="py-4 text-2xl whitespace-nowrap">
22
+ { featureList.map((featureItem, index) => (
23
+ <React.Fragment key={index}>
24
+ { featureItem } <span className="mx-3">&middot;</span>
25
+ </React.Fragment>
26
+ ))}
27
+ </p>
28
+ </Marquee>
29
+ );
30
+ }
docs/src/env.d.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ /// <reference types="astro/client" />
docs/src/layouts/BaseLayout.astro ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ export interface Props {
3
+ title: string;
4
+ }
5
+
6
+ const { title } = Astro.props;
7
+ ---
8
+
9
+ <!DOCTYPE html>
10
+ <html lang="en">
11
+ <head>
12
+ <meta charset="UTF-8" />
13
+ <meta name="description" content="Astro description">
14
+ <meta name="viewport" content="width=device-width" />
15
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
16
+ <meta name="generator" content={Astro.generator} />
17
+ <title>{title}</title>
18
+ </head>
19
+ <body>
20
+ <slot />
21
+ </body>
22
+ </html>
docs/src/pages/index.astro ADDED
@@ -0,0 +1,72 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ import BaseLayout from "../layouts/BaseLayout.astro";
3
+ import { FeatureMarquee } from "../components/FeatureMarquee";
4
+ import Container from "../components/Container.astro";
5
+ ---
6
+ <BaseLayout>
7
+ <div class="bg-yellow-300">
8
+ <Container>
9
+ <div class="py-24 flex justify-start items-center gap-4">
10
+ <div class="flex-grow">
11
+ <h1 class="text-9xl mb-4 font-bold">driver.js</h1>
12
+ <p class="text-3xl">Product tours, highlight features, contextual help and more.</p>
13
+ <div class="mt-12 mb-2 flex gap-2 items-stretch">
14
+ <button class="bg-black rounded-xl py-4 px-5 font-medium text-white text-xl">Show Demo Tour</button>
15
+ <a href="#" class="flex items-center font-bold text-xl border-4 border-black rounded-xl px-5 bg-white">
16
+ Get Started
17
+ </a>
18
+ </div>
19
+ </div>
20
+ <div class="flex-shrink-0">
21
+ <img src="/driver.svg" alt="Hero Image" class="h-72" />
22
+ </div>
23
+ </div>
24
+ </Container>
25
+ </div>
26
+ <div class="bg-white overflow-x-hidden relative h-[64px]">
27
+ <FeatureMarquee client:load />
28
+ </div>
29
+
30
+ <div class="py-24 bg-black text-white">
31
+ <Container>
32
+ <h2 class="text-5xl font-bold mb-4">Usecases</h2>
33
+ <p class="text-2xl mb-16 text-gray-300">Due to it's extensive API, driver.js can be used for a wide range of use cases.</p>
34
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
35
+ <div class="flex flex-col gap-4">
36
+ <span class="border-b border-b-yellow-300 block w-[50px]"></span>
37
+ <h3 class="text-3xl font-bold text-yellow-300">Onboard Users</h3>
38
+ <p class="text-xl text-gray-300">
39
+ Onboard your users by explaining how to use your product and answer common
40
+ questions.
41
+ </p>
42
+ </div>
43
+
44
+ <div class="flex flex-col gap-4">
45
+ <span class="border-b border-b-yellow-300 block w-[50px]"></span>
46
+ <h3 class="text-3xl font-bold text-yellow-300">
47
+ Remove Distractions
48
+ </h3>
49
+ <p class="text-xl text-gray-300">
50
+ With highlight feature, you can remove distractions and focus your users attention on what matters.
51
+ </p>
52
+ </div>
53
+
54
+ <div class="flex flex-col gap-4">
55
+ <span class="border-b border-b-yellow-300 block w-[50px]"></span>
56
+ <h3 class="text-3xl font-bold text-yellow-300">Contextual Help</h3>
57
+ <p class="text-xl text-gray-300">
58
+ Provide contextual help for your users, explain how to use your product and answer common questions.
59
+ </p>
60
+ </div>
61
+
62
+ <div class="flex flex-col gap-4">
63
+ <span class="border-b border-b-yellow-300 block w-[50px]"></span>
64
+ <h3 class="text-3xl font-bold text-yellow-300">Feature Adoption</h3>
65
+ <p class="text-xl text-gray-300">
66
+ Highlight new features, explain how to use them and make sure your users don't miss them.
67
+ </p>
68
+ </div>
69
+ </div>
70
+ </Container>
71
+ </div>
72
+ </BaseLayout>
docs/tailwind.config.cjs ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ /** @type {import('tailwindcss').Config} */
2
+ module.exports = {
3
+ content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
4
+ theme: {
5
+ container: {
6
+ },
7
+ extend: {},
8
+ },
9
+ plugins: [],
10
+ };
docs/tsconfig.json ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ {
2
+ "extends": "astro/tsconfigs/strict",
3
+ "compilerOptions": {
4
+ "jsx": "react-jsx",
5
+ "jsxImportSource": "react"
6
+ }
7
+ }
package.json CHANGED
@@ -18,6 +18,7 @@
18
  },
19
  "files": [
20
  "!tests/**/*",
 
21
  "dist/**/*",
22
  "!dist/**/*.js.map"
23
  ],
 
18
  },
19
  "files": [
20
  "!tests/**/*",
21
+ "!docs/**/*",
22
  "dist/**/*",
23
  "!dist/**/*.js.map"
24
  ],