Revert "docs: refactor (WIP) (#840)" (#850)

This reverts commit f55b656.

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

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

website/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=

website/components/home/about.tsx

@@ -13,13 +13,75 @@ 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">
-            The tools to make React faster, automatically.
+            All 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
@@ -77,68 +139,6 @@ 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 text-sm 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 text-sm 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/faq.tsx

@@ -8,7 +8,7 @@ const faq = [
     question: <>How is it fast?</>,
     answer: (
       <>
-        It uses a novel approach to the virtual DOM called the block virtual DOM.
+        We use 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,7 +7,6 @@ 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>,
@@ -30,27 +29,15 @@ 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">
-                <span
-                  data-tooltip-id="virtual-dom-explanation"
-                  className="text-purple-500 hover:text-purple-700"
-                >
-                  Virtual DOM
-                </span>{' '}
-                Replacement
+                Virtual DOM Replacement
               </span>{' '}
-              for React. Experience improved performance for UI and data-heavy
-              React apps. Minimal effort required - all it takes is {' '}
+              for React. Gain big performance wins for UI and data heavy React
+              apps. Dead simple to use – try it out with{' '}
               <Link href="/docs" className="font-medium hover:underline">
-                a single plugin
+                just one 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,5 +1,4 @@
 import { About } from './about';
-import { Community } from './community';
 import { CTA } from './cta';
 import { FAQ } from './faq';
 import { Hero } from './hero';
@@ -10,8 +9,8 @@ export function Home() {
     <main className="space-y-40 mb-40">
       <Hero />
       <About />
-      {/* <Showcase /> */}
-      <Community />
+      <Showcase />
+      <FAQ />
       <CTA />
     </main>
   );