Spaces:

aletrn
/

driver.js

Running

App Files Files Community

kamrify commited on Jun 24, 2023

Commit

c73f86b

1 Parent(s): 6cadce0

Add basic home setup

Browse files

Files changed (14) hide show

docs/.gitignore +21 -0
docs/astro.config.mjs +9 -0
docs/package.json +23 -0
docs/pnpm-lock.yaml +0 -0
docs/public/driver.svg +57 -0
docs/public/favicon.svg +9 -0
docs/src/components/Container.astro +3 -0
docs/src/components/FeatureMarquee.tsx +30 -0
docs/src/env.d.ts +1 -0
docs/src/layouts/BaseLayout.astro +22 -0
docs/src/pages/index.astro +72 -0
docs/tailwind.config.cjs +10 -0
docs/tsconfig.json +7 -0
package.json +1 -0

docs/.gitignore ADDED Viewed

	@@ -0,0 +1,21 @@

+# build output
+dist/
+# generated types
+.astro/
+# dependencies
+node_modules/
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+# environment variables
+.env
+.env.production
+# macOS-specific files
+.DS_Store

docs/astro.config.mjs ADDED Viewed

	@@ -0,0 +1,9 @@

+import { defineConfig } from 'astro/config';
+import tailwind from "@astrojs/tailwind";
+import react from "@astrojs/react";
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tailwind(), react()]
+});

docs/package.json ADDED Viewed

	@@ -0,0 +1,23 @@

+{
+  "name": "driver-docs",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/react": "^2.2.1",
+    "@astrojs/tailwind": "^4.0.0",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "astro": "^2.7.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-fast-marquee": "^1.6.0",
+    "tailwindcss": "^3.0.24"
+  }
+}

docs/pnpm-lock.yaml ADDED Viewed

The diff for this file is too large to render. See raw diff

docs/public/driver.svg ADDED Viewed

docs/public/favicon.svg ADDED Viewed

docs/src/components/Container.astro ADDED Viewed

	@@ -0,0 +1,3 @@

+<div class="max-w-[1050px] mx-auto px-10">
+  <slot />
+</div>

docs/src/components/FeatureMarquee.tsx ADDED Viewed

	@@ -0,0 +1,30 @@

+import React from "react";
+import Marquee from "react-fast-marquee";
+const featureList = [
+  "Open Source",
+  "Written in TypeScript",
+  "No dependencies",
+  "Vanilla JavaScript",
+  "Light-weight",
+  "Feature Rich",
+  "Highly Customizable",
+  "Easy to use",
+  "Accessible",
+  "Frameworks Ready",
+  "MIT Licensed",
+];
+export function FeatureMarquee() {
+  return (
+    <Marquee autoFill>
+      <p className="py-4 text-2xl whitespace-nowrap">
+        { featureList.map((featureItem, index) => (
+          <React.Fragment key={index}>
+            { featureItem } <span className="mx-3">&middot;</span>
+          </React.Fragment>
+        ))}
+      </p>
+    </Marquee>
+  );
+}

docs/src/env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="astro/client" />

docs/src/layouts/BaseLayout.astro ADDED Viewed

	@@ -0,0 +1,22 @@

+---
+export interface Props {
+	title: string;
+}
+const { title } = Astro.props;
+---
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description">
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>

docs/src/pages/index.astro ADDED Viewed

	@@ -0,0 +1,72 @@

+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { FeatureMarquee } from "../components/FeatureMarquee";
+import Container from "../components/Container.astro";
+---
+<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, highlight features, 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="#" 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]">
+    <FeatureMarquee client:load />
+  </div>
+  <div class="py-24 bg-black text-white">
+    <Container>
+      <h2 class="text-5xl font-bold mb-4">Usecases</h2>
+      <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>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+        <div class="flex flex-col gap-4">
+          <span class="border-b border-b-yellow-300 block w-[50px]"></span>
+          <h3 class="text-3xl font-bold text-yellow-300">Onboard Users</h3>
+          <p class="text-xl text-gray-300">
+            Onboard your users by explaining how to use your product and answer common
+            questions.
+          </p>
+        </div>
+        <div class="flex flex-col gap-4">
+          <span class="border-b border-b-yellow-300 block w-[50px]"></span>
+          <h3 class="text-3xl font-bold text-yellow-300">
+            Remove Distractions
+          </h3>
+          <p class="text-xl text-gray-300">
+            With highlight feature, you can remove distractions and focus your users attention on what matters.
+          </p>
+        </div>
+        <div class="flex flex-col gap-4">
+          <span class="border-b border-b-yellow-300 block w-[50px]"></span>
+          <h3 class="text-3xl font-bold text-yellow-300">Contextual Help</h3>
+          <p class="text-xl text-gray-300">
+            Provide contextual help for your users, explain how to use your product and answer common questions.
+          </p>
+        </div>
+        <div class="flex flex-col gap-4">
+          <span class="border-b border-b-yellow-300 block w-[50px]"></span>
+          <h3 class="text-3xl font-bold text-yellow-300">Feature Adoption</h3>
+          <p class="text-xl text-gray-300">
+            Highlight new features, explain how to use them and make sure your users don't miss them.
+          </p>
+        </div>
+      </div>
+    </Container>
+  </div>
+</BaseLayout>

docs/tailwind.config.cjs ADDED Viewed

	@@ -0,0 +1,10 @@

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    container: {
+    },
+    extend: {},
+  },
+  plugins: [],
+};

docs/tsconfig.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}

package.json CHANGED Viewed

@@ -18,6 +18,7 @@
   },
   "files": [
     "!tests/**/*",
     "dist/**/*",
     "!dist/**/*.js.map"
   ],

   },
   "files": [
     "!tests/**/*",
+    "!docs/**/*",
     "dist/**/*",
     "!dist/**/*.js.map"
   ],