docs: add basic home page

src/client/index.css

@@ -23,7 +23,7 @@ a {
   height: 100%;
 }
 
-/* 滚动条 */
+/* Scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;

website/src/css/base.css

@@ -1,3 +1,38 @@
 @tailwind base;
+
+@layer base {
+  /* Scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-black bg-opacity-10;
+    border-color: transparent;
+    background-clip: padding-box;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-black bg-opacity-20;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-black bg-opacity-5;
+    border-color: transparent;
+    background-clip: padding-box;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 4px;
+  }
+}
+
 @tailwind components;
 @tailwind utilities;

website/src/css/custom.css

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #147af3;
+  --ifm-color-primary-dark: #0b6de1;
+  --ifm-color-primary-darker: #0b67d5;
+  --ifm-color-primary-darkest: #0955af;
+  --ifm-color-primary-light: #2d88f4;
+  --ifm-color-primary-lighter: #3a8ff5;
+  --ifm-color-primary-lightest: #5fa4f7;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #4791eb;
+  --ifm-color-primary-dark: #2b80e8;
+  --ifm-color-primary-darker: #1e78e6;
+  --ifm-color-primary-darkest: #1563c1;
+  --ifm-color-primary-light: #63a1ee;
+  --ifm-color-primary-lighter: #70aaef;
+  --ifm-color-primary-lightest: #9ac2f4;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

website/src/pages/index.module.css

@@ -1,23 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

website/src/pages/index.tsx

@@ -1,32 +1,72 @@
 import React from 'react';
-import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-
-import styles from './index.module.css';
+import LogoSvg from '@site/static/img/logo.svg';
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro"
-          >
-            Docusaurus Tutorial - 5min ⏱️
-          </Link>
+    <header className="container">
+      <div className="text-center mt-10">
+        <LogoSvg className="w-40 h-40" />
+        <h1 className="text-5xl">
+          <span className="text-gradient font-bold">{siteConfig.title}</span>
+        </h1>
+        <p className="text-black text-opacity-60 text-2xl">
+          {siteConfig.tagline}
+        </p>
+        <p className="opacity-60">
+          Tianji brings all your commonly used tools together in one place
+        </p>
+        <div className="text-xl">
+          <span className="underline font-semibold">Website analytics</span> +{' '}
+          <span className="underline font-semibold">Uptime Monitor</span> +{' '}
+          <span className="underline font-semibold">Server Status</span> ={' '}
+          <span className="text-gradient font-bold">Tianji</span>
         </div>
       </div>
+
+      <div className="text-center my-6">
+        <Link
+          className="button button--primary button--lg"
+          to="mailto:moonrailgun@gmail.com?subject=I want to apply for Tianji early access account&body=Here is my account: <Here place your username>"
+        >
+          Early Access
+        </Link>
+      </div>
     </header>
   );
 }
 
+function HomepageMain() {
+  return (
+    <main className="container pb-8">
+      <div className="flex flex-wrap gap-2 justify-around mt-4 mb-8">
+        <div className="px-4 py-2 border rounded border-solid border-gray-300 checked-item">
+          ✔ No cookies
+        </div>
+        <div className="px-4 py-2 border rounded border-solid border-gray-300 checked-item">
+          ✔ GDPR & CCPA compliant
+        </div>
+        <div className="px-4 py-2 border rounded border-solid border-gray-300 checked-item">
+          ✔ Open API
+        </div>
+        <div className="px-4 py-2 border rounded border-solid border-gray-300 checked-item">
+          ✔ Open Source
+        </div>
+      </div>
+
+      <div className="text-center">
+        <img
+          className="border-8 border-solid border-gray-200 rounded-lg shadow-lg"
+          src="/img/preview.png"
+        />
+      </div>
+    </main>
+  );
+}
+
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
@@ -35,9 +75,8 @@ export default function Home(): JSX.Element {
       description="Description will go into a meta tag in <head />"
     >
       <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
+
+      <HomepageMain />
     </Layout>
   );
 }

website/tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{html,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}

website/tailwind.config.ts

@@ -0,0 +1,24 @@
+import type { Config } from 'tailwindcss';
+import { PluginCreator } from 'tailwindcss/types/config';
+
+const plugin: PluginCreator = (api) => {
+  api.addUtilities({
+    '.text-gradient': {
+      background:
+        'linear-gradient(270deg, #00E725 -33.33%, #0799B9 17.93%, #940DFF 105.3%)',
+      backgroundClip: 'text',
+      color: 'transparent',
+    },
+  });
+};
+
+export default {
+  corePlugins: {
+    preflight: false,
+  },
+  content: ['./src/**/*.{html,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [plugin],
+} satisfies Config;