docs: refactor (WIP)

packages/kitchen-sink/src/css/style.css

@@ -118,6 +118,7 @@ button:disabled {
   }
 }
 
+
 pre {
   white-space: pre-wrap;
   /* css-3 */

website/components/home/about.tsx

@@ -13,75 +13,13 @@ const Showdown = dynamic(() =>
 export function About() {
   return (
     <>
-      <div>
-        <Container>
-          <div className="lg:p-4 space-y-6 md:flex md:gap-20 justify-center md:space-y-0 lg:items-center">
-            <div className="md:w-7/12 lg:w-1/2">
-              <Graphic />
-            </div>
-            <div className="md:w-7/12 lg:w-1/2">
-              <h2 className="text-3xl font-bold text-zinc-900 md:text-4xl dark:text-white">
-                React at the speed of raw JS
-              </h2>
-              <p className="text-lg my-8 text-zinc-600 dark:text-zinc-300">
-                Million.js automatically optimizes React, making it run way
-                faster. It's one of the top performers in the{' '}
-                <a
-                  href="https://krausest.github.io/js-framework-benchmark/2023/table_chrome_112.0.5615.49.html"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="nx-text-primary-600 underline decoration-from-font [text-underline-position:from-font]"
-                >
-                  JS Framework Benchmark
-                </a>
-                .
-              </p>
-              <div className="divide-y space-y-4 divide-zinc-100 dark:divide-zinc-800">
-                <div className="mt-8 flex gap-4 md:items-center">
-                  <div className="w-12 h-12 flex gap-4 rounded-full bg-purple-100 dark:bg-purple-900/20">
-                    <LightningIcon />
-                  </div>
-                  <div className="w-5/6">
-                    <h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
-                      Up to 70% faster* than React.
-                    </h4>
-                    <p className="text-zinc-500 dark:text-zinc-400">
-                      * - Benchmarks may not represent real-world performance.
-                    </p>
-                  </div>
-                </div>
-                <div className="pt-4 flex gap-4 md:items-center">
-                  <div className="w-12 h-12 flex gap-4 rounded-full bg-purple-100 dark:bg-purple-900/20">
-                    <ClockIcon />
-                  </div>
-                  <div className="w-5/6">
-                    <h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
-                      Integrate and ship in minutes.
-                    </h4>
-                    <p className="text-zinc-500 dark:text-zinc-400">
-                      No need to learn a new framework. Works with your existing
-                      React components.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="mt-10 text-xs bg-gradient-to-b dark:from-zinc-500 dark:to-[#111] dark:hover:to-zinc-500 inline-block text-transparent bg-clip-text from-zinc-500 to-white hover:to-zinc-500 opacity-40 hover:opacity-50 transition-opacity">
-                Note: It's important to note that benchmarks (via JS Framework
-                Benchmark) do not represent real-life performance. Million.js
-                does include some limitations. You may see more performance
-                improvement if you have more data / UI heavy apps.
-              </div>
-            </div>
-          </div>
-        </Container>
-      </div>
       <div className="relative">
         <Container>
           <h3 className="text-2xl text-center font-bold text-zinc-900 dark:text-white md:text-3xl lg:text-4xl">
             What's in Million.js?
           </h3>
           <p className="mt-3 text-center text-zinc-600 dark:text-zinc-300 md:text-md lg:text-lg">
-            All the tools to make React faster, automatically.
+            The tools to make React faster, automatically.
           </p>
           <div className="relative mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
             <Card
@@ -139,6 +77,68 @@ export function About() {
         </Container>
         <Blur />
       </div>
+      <div>
+        <Container>
+          <div className="lg:p-4 space-y-6 md:flex md:gap-20 justify-center md:space-y-0 lg:items-center">
+            <div className="md:w-7/12 lg:w-1/2">
+              <Graphic />
+            </div>
+            <div className="md:w-7/12 lg:w-1/2">
+              <h2 className="text-3xl font-bold text-zinc-900 md:text-4xl dark:text-white">
+                React at the speed of raw JS
+              </h2>
+              <p className="text-lg my-8 text-zinc-600 dark:text-zinc-300">
+                Million.js optimizes React, improving its performance. It stands
+                out as one of the top performers in the{' '}
+                <a
+                  href="https://krausest.github.io/js-framework-benchmark/2023/table_chrome_112.0.5615.49.html"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="nx-text-primary-600 underline decoration-from-font [text-underline-position:from-font]"
+                >
+                  JS Framework Benchmark
+                </a>
+                .
+              </p>
+              <div className="divide-y space-y-4 divide-zinc-100 dark:divide-zinc-800">
+                <div className="mt-8 flex gap-4 md:items-center">
+                  <div className="w-12 h-12 flex gap-4 rounded-full bg-purple-100 dark:bg-purple-900/20">
+                    <LightningIcon />
+                  </div>
+                  <div className="w-5/6">
+                    <h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
+                      Up to 70% faster* than React.
+                    </h4>
+                    <p className="text-zinc-500 dark:text-zinc-400">
+                      * - Benchmarks may not represent real-world performance.
+                    </p>
+                  </div>
+                </div>
+                <div className="pt-4 flex gap-4 md:items-center">
+                  <div className="w-12 h-12 flex gap-4 rounded-full bg-purple-100 dark:bg-purple-900/20">
+                    <ClockIcon />
+                  </div>
+                  <div className="w-5/6">
+                    <h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
+                      Integrate and ship in minutes.
+                    </h4>
+                    <p className="text-zinc-500 dark:text-zinc-400">
+                      No need to learn a new framework. Works with your existing
+                      React components.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <p className="mt-10 text-xs bg-gradient-to-b dark:from-zinc-500 dark:to-[#111] dark:hover:to-zinc-500 inline-block text-transparent bg-clip-text from-zinc-500 to-white hover:to-zinc-500 opacity-40 hover:opacity-50 transition-opacity">
+                Note: Benchmarks (via JS Framework Benchmark) do not represent
+                real-life performance. Million.js does have some limitations.
+                Performance improvements may be more noticeable with apps that
+                include more data / UI components.
+              </p>
+            </div>
+          </div>
+        </Container>
+      </div>
     </>
   );
 }

website/components/home/community.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export function Community() {
+  return (
+    <>
+      <div className="bg-zinc-800 max-w-7xl w-[90%]  mx-auto p-6 lg:p-10 xl:p-6 rounded-2xl">
+        <div className="flex flex-col gap-6">
+          <aside className="font-semibold text-sm md:text-lg">Community</aside>
+          <div>
+            <h2 className="font-bold text-4xl md:text-6xl xl:text-7xl pb-6">
+              Join our community
+            </h2>
+            <p className="font-medium pb-6 text-sm xl:text-base">
+              Connect with 5000+ React developers committed to better performing
+              applications. Connect, participate, and seek support — all on
+              Discord.
+            </p>
+
+            <button className="py-2 px-4 xl:py-4 xl:px-6 bg-white text-blue-purple-gradient rounded-2xl hover:opacity-80">
+              <a
+                href="https://million.dev/chat"
+                className="text-black font-semibold text-sm lg:text-base"
+              >
+                Join our Discord
+              </a>
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

website/components/home/faq.tsx

@@ -8,7 +8,7 @@ const faq = [
     question: <>How is it fast?</>,
     answer: (
       <>
-        We use a novel approach to the virtual DOM called the block virtual DOM.
+        It uses a novel approach to the virtual DOM called the block virtual DOM.
         You can read more on what the block virtual DOM is with{' '}
         <Link
           className="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]"

website/components/home/hero.tsx

@@ -7,6 +7,7 @@ import OpenSaucedLogo from '../../public/opensauced.svg';
 import MetamaskLogo from '../../public/metamask.svg';
 import { Container } from './container';
 import { ShimmerButton } from './shimmer-button';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 
 const CountUp = dynamic(() => import('react-countup'), {
   loading: () => <span>70</span>,
@@ -29,15 +30,27 @@ export function Hero() {
             <p className="mt-8 text-xl text-zinc-600 dark:text-zinc-300 leading-8">
               The{' '}
               <span className="font-medium dark:text-zinc-100">
-                Virtual DOM Replacement
+                <span
+                  data-tooltip-id="virtual-dom-explanation"
+                  className="text-purple-500 hover:text-purple-700"
+                >
+                  Virtual DOM
+                </span>{' '}
+                Replacement
               </span>{' '}
-              for React. Gain big performance wins for UI and data heavy React
-              apps. Dead simple to use – try it out with{' '}
+              for React. Experience improved performance for UI and data-heavy
+              React apps. Minimal effort required - all it takes is with{' '}
               <Link href="/docs" className="font-medium hover:underline">
-                just one plugin
+                a single plugin.
               </Link>
               .
             </p>
+            <ReactTooltip
+              id="virtual-dom-explanation"
+              place="bottom"
+              style={{ width: '50%', zIndex: '13' }}
+              content="The Virtual DOM is a technique in web development, like React.js, that boosts efficiency by first making changes to a virtual copy of the DOM before updating the actual DOM."
+            />
             <div className="mt-16 flex flex-wrap justify-center gap-y-4 gap-x-6">
               <Link href="/docs" className="w-full sm:w-max">
                 <ShimmerButton

website/components/home/index.tsx

@@ -1,4 +1,5 @@
 import { About } from './about';
+import { Community } from './community';
 import { CTA } from './cta';
 import { FAQ } from './faq';
 import { Hero } from './hero';
@@ -10,7 +11,7 @@ export function Home() {
       <Hero />
       <About />
       <Showcase />
-      <FAQ />
+      <Community />
       <CTA />
     </main>
   );

website/components/home/showcase.tsx

@@ -43,8 +43,8 @@ export function Showcase() {
             Faster than the rest
           </h2>
           <p className="mt-3 text-center text-zinc-600 dark:text-zinc-300 md:text-md lg:text-lg">
-            Real companies and projects use Million.js in production to deliver
-            incredible user experiences.
+            Witness applications/companies using MillionJS in production to
+            build better user experiences.
           </p>
         </div>
         <div className="slider">

website/package.json

@@ -33,6 +33,7 @@
     "react-dom": "^18.2.0",
     "react-lag-radar": "^1.0.0",
     "react-parallax-tilt": "^1.7.110",
+    "react-tooltip": "^5.24.0",
     "react-tweet": "^3.1.1",
     "react-youtube": "^10.1.0",
     "tailwindcss": "^3.2.7"

website/pages/_meta.json

@@ -31,6 +31,13 @@
       "typesetting": "article"
     }
   },
+  "faq": {
+    "type": "page",
+    "title": "FAQ",
+    "theme": {
+      "layout": "raw"
+    }
+  },
   "ai": {
     "type": "page",
     "title": "AI",

website/pages/docs/_meta.json

@@ -5,7 +5,7 @@
   },
   "index": "Introduction",
   "install": "Installation",
-  "automatic": "Automatic Mode",
+  "automatic": "How to use Automatic mode",
   "-- API Reference": {
     "type": "separator",
     "title": "API Reference"
@@ -16,10 +16,9 @@
     "type": "separator",
     "title": "Guide"
   },
-  "quickstart": "Tutorial",
+  "guide": "Usage Guide",
   "rules": "Rules of Blocks",
   "typescript": "Usage with TypeScript",
   "virtualization": "Virtualization",
-  "common-errors": "Common Errors",
   "internals": "Internals"
 }