style: update stylings docs

website/docusaurus.config.ts

@@ -51,7 +51,7 @@ const config: Config = {
       },
     },
     navbar: {
-      title: 'Hyperse',
+      // title: 'Hyperse',
       hideOnScroll: false,
       logo: {
         alt: 'Hyperse',

website/package.json

@@ -50,13 +50,15 @@
     "@docusaurus/plugin-content-docs": "^3.4.0",
     "@docusaurus/plugin-google-gtag": "^3.4.0",
     "@docusaurus/preset-classic": "^3.4.0",
+    "@heroicons/react": "^2.1.5",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.1",
     "postcss": "^8.4.40",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.7"
+    "tailwindcss": "^3.4.7",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.5.0",

website/src/pages/index.module.css

@@ -10,14 +10,18 @@
   overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.topBackground {
+  background: linear-gradient(180deg,hsla(0,0%,100%,.031) 0,rgba(102,117,127,.102));
+  clip-path: polygon(100% 0,0 0,0 65%,1% 64.95%,2% 64.8%,3% 64.6%,4% 64.3%,5% 63.9%,6% 63.45%,7% 62.9%,8% 62.25%,9% 61.55%,10% 60.8%,11% 59.95%,12% 59.05%,13% 58.1%,14% 57.1%,15% 56.05%,16% 55%,17% 53.9%,18% 52.8%,19% 51.65%,20% 50.5%,21% 49.35%,22% 48.2%,23% 47.05%,24% 45.9%,25% 44.8%,26% 43.75%,27% 42.75%,28% 41.75%,29% 40.8%,30% 39.9%,31% 39.1%,32% 38.35%,33% 37.65%,34% 37.05%,35% 36.5%,36% 36.05%,37% 35.65%,38% 35.35%,39% 35.15%,40% 35.05%,41% 35%,42% 35.05%,43% 35.2%,44% 35.45%,45% 35.75%,46% 36.15%,47% 36.65%,48% 37.2%,49% 37.85%,50% 38.55%,51% 39.35%,52% 40.2%,53% 41.1%,54% 42.05%,55% 43.05%,56% 44.1%,57% 45.15%,58% 46.3%,59% 47.4%,60% 48.55%,61% 49.7%,62% 50.85%,63% 52%,64% 53.15%,65% 54.25%,66% 55.35%,67% 56.4%,68% 57.45%,69% 58.4%,70% 59.35%,71% 60.2%,72% 61.05%,73% 61.8%,74% 62.45%,75% 63.05%,76% 63.6%,77% 64.05%,78% 64.4%,79% 64.7%,80% 64.85%,81% 65%,82% 65%,83% 64.9%,84% 64.75%,85% 64.5%,86% 64.2%,87% 63.75%,88% 63.25%,89% 62.7%,90% 62.05%,91% 61.3%,92% 60.5%,93% 59.65%,94% 58.75%,95% 57.8%,96% 56.8%,97% 55.75%,98% 54.65%,99% 53.55%,100% 52.4%);
+  height: 30rem;
+  left: 0;
+  position: absolute;
+  top: 0rem;
+  width: 100%
+}

website/src/pages/index.tsx

@@ -1,27 +1,91 @@
 import React from 'react';
 import clsx from 'clsx';
+import { useCopyToClipboard } from 'usehooks-ts';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Docusaurus from '@site/static/img/docusaurus-splash.png';
 import Layout from '@theme/Layout';
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
 import styles from './index.module.css';
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
+  const [, copy] = useCopyToClipboard();
+  const [copied, setCopied] = React.useState(false);
+
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <img src={Docusaurus} className="max-w-[50px]" alt="MUI color input" />
+      <div className="container text-center">
+        <img src={Docusaurus} className="max-w-[200px]" alt="MUI color input" />
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
+        <iframe
+          className="mt-2 h-[30px] w-[160px]"
+          src="https://ghbtns.com/github-btn.html?user=hyperse-io&repo=track&type=star&count=true&size=large"
+        />
+        <div className={clsx(styles.buttons, 'my-4 gap-4')}>
+          <Link
+            className="button button--primary md:py-3 md:px-4 rounded-2xl dark:text-white"
+            to="/docs/getting-started"
+          >
+            Watch
+          </Link>
           <Link
-            className="button button--secondary button--lg"
+            className="button button--danger md:py-3 md:px-4 rounded-2xl dark:text-white"
             to="/docs/getting-started"
           >
-            Docs Tutorial - 5min ⏱️
+            Get Started
           </Link>
+          <Link
+            className="button button--warning md:py-3 md:px-4 rounded-2xl"
+            to="/docs/getting-started"
+          >
+            Donate
+          </Link>
+        </div>
+        <div className="my-8 mx-auto max-w-md rounded-xl border border-solid border-gray-300 dark:border-gray-100 p-2">
+          <Tabs>
+            <TabItem value="npm" label="npm" default>
+              <button
+                onMouseLeave={() => setCopied(false)}
+                onClick={() => {
+                  copy('npm i @hyperse/track');
+                  setCopied(true);
+                }}
+                className="flex w-full border border-solid border-gray-400 dark:border-gray-800 dark:hover:border-gray-600 p-2 rounded-lg hover:border-gray-600 cursor-pointer text-slate-500 hover:text-slate-400 items-center bg-transparent justify-between"
+              >
+                <span className="text-base">npm i @hyperse/track</span>
+                {copied ? (
+                  <CheckIcon className="h-4 w-4 dark:text-white text-gray-500" />
+                ) : (
+                  <DocumentDuplicateIcon className="h-4 w-4 dark:text-white text-gray-500" />
+                )}
+              </button>
+            </TabItem>
+            <TabItem value="yarn" label="yarn">
+              <TabItem value="npm" label="npm" default>
+                <button
+                  onMouseLeave={() => setCopied(false)}
+                  onClick={() => {
+                    copy('yarn add @hyperse/track');
+                    setCopied(true);
+                  }}
+                  className="flex w-full border border-solid border-gray-400 dark:border-gray-800 dark:hover:border-gray-600 p-2 rounded-lg hover:border-gray-600 cursor-pointer text-slate-500 hover:text-slate-400 items-center bg-transparent justify-between"
+                >
+                  <span className="text-base">yarn add @hyperse/track</span>
+                  {copied ? (
+                    <CheckIcon className="h-4 w-4 dark:text-white text-gray-500" />
+                  ) : (
+                    <DocumentDuplicateIcon className="h-4 w-4 dark:text-white text-gray-500" />
+                  )}
+                </button>
+              </TabItem>
+            </TabItem>
+          </Tabs>
         </div>
       </div>
     </header>
@@ -35,6 +99,7 @@ export default function Home() {
       title={`Hello from ${siteConfig.title}`}
       description="Description will go into a meta tag in <head />"
     >
+      <div className={styles.topBackground} />
       <HomepageHeader />
       <main>
         <HomepageFeatures />

website/tailwind.config.cjs

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: 'class',
+  darkMode: ['class', '[data-theme="dark"]'],
   corePlugins: {
     // Avoid conflicts with antd
     preflight: false,

yarn.lock

@@ -3130,6 +3130,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@heroicons/react@npm:^2.1.5":
+  version: 2.1.5
+  resolution: "@heroicons/react@npm:2.1.5"
+  peerDependencies:
+    react: ">= 16"
+  checksum: 10/dd972f06760e2eec36e32db2edd938e7cc4fd012f6b25e0a31adc3c7fd7122517aa8a55f7b262646c6ef988c42b16fc635b252a4b8aa1bcf8597c97567eaa3d4
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/module-importer@npm:^1.0.1":
   version: 1.0.1
   resolution: "@humanwhocodes/module-importer@npm:1.0.1"
@@ -3207,6 +3216,7 @@ __metadata:
     "@docusaurus/plugin-content-docs": "npm:^3.4.0"
     "@docusaurus/plugin-google-gtag": "npm:^3.4.0"
     "@docusaurus/preset-classic": "npm:^3.4.0"
+    "@heroicons/react": "npm:^2.1.5"
     "@hyperse/eslint-config-hyperse": "npm:^1.0.12"
     "@mdx-js/react": "npm:^3.0.1"
     "@tsconfig/docusaurus": "npm:^2.0.3"
@@ -3225,6 +3235,7 @@ __metadata:
     react-dom: "npm:^18.3.1"
     tailwindcss: "npm:^3.4.7"
     typescript: "npm:5.5.4"
+    usehooks-ts: "npm:^3.1.0"
     vitest: "npm:^2.0.5"
   languageName: unknown
   linkType: soft
@@ -17321,6 +17332,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usehooks-ts@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "usehooks-ts@npm:3.1.0"
+  dependencies:
+    lodash.debounce: "npm:^4.0.8"
+  peerDependencies:
+    react: ^16.8.0  || ^17 || ^18
+  checksum: 10/6aef8affd3c053a3040b7421816dab85eb21601c5203496a705bafc32eb973fb519a2b0ddda527962e361d248f3a1c49df130620efe871c8f89e897451ed1cc7
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"