docs: refactor (WIP) (#840)

* docs: refactor * chore: rearrange landing page to match astro * chore: make updates to introduction * chore: make website homepage update * chore: make website homepage update * chore: make updates to docs * chore: make docs updates * chore: make docs updates * chore: make docs updates * chore: make docs updates * chore: make docs updates * chore: make docs updates * fix: ugly cta on homepage * chore: add feedback from Sarah to docs updates * chore: pulling * chore: make updates on homepage and internals * chore: make changes to automatic mode, installation and index of docs * docs(refactor): make final docs updates
aidenybai · Jan 2, 2024 · 9f199e9 · 9f199e9
1 parent 82811d5
commit 9f199e9
Show file tree

Hide file tree

Showing 39 changed files with 1,212 additions and 809 deletions.
diff --git a/packages/kitchen-sink/src/css/style.css b/packages/kitchen-sink/src/css/style.css
@@ -118,6 +118,7 @@ button:disabled {
   }
 }
 
+
 pre {
   white-space: pre-wrap;
   /* css-3 */

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/.env.example b/website/.env.example
diff --git a/website/components/home/about.tsx b/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 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>
     </>
   );
 }

diff --git a/website/components/home/community.tsx b/website/components/home/community.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import Wyze from '../../pages/showcase/wyze.png';
+import HackClub from '../../pages/showcase/hackclub.jpeg';
+import DonaAI from '../../pages/showcase/dona-ai.jpeg';
+import LLMReport from '../../pages/showcase/llm-report.png';
+import Texts from '../../pages/showcase/texts.png';
+import { Container } from './container';
+
+
+export function Community() {
+  return (
+    <>
+      <div className="bg-black max-w-7xl w-[90%]  mx-auto p-6 lg:p-10 xl:p-6 rounded-2xl ">
+        <div className="flex flex-col lg:flex-row gap-6 items-end justify-between overflow-hidden">
+          <div className="py-5 pt-5 lg:pt-20 px-3 lg:w-[50%]">
+            <h2 className="font-normal font-white text-4xl md:text-5xl xl:text-7xl pb-6 leading-6">
+              Join our <br/> 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 className="w-full lg:w-[45%]">
+            <ShowcaseSlider/>
+
+            <div className="flex flex-wrap justify-center gap-6 mt-8 items-center">
+          <Link
+            href="/showcase"
+            className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:border before:border-transparent before:bg-purple-600/10 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 dark:before:border-zinc-700 dark:before:bg-zinc-800 sm:w-max"
+          >
+            <span className="relative text-base font-semibold text-purple-600 dark:text-white">
+              View the Million.js showcase
+            </span>
+          </Link>
+        </div>
+            </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+
+export const ShowcaseSlider = () => {
+  const entries = [
+    {
+      image: Wyze,
+      name: 'Wyze',
+      url: 'wyze.com',
+    },
+    {
+      image: HackClub,
+      name: 'Hack Club',
+      url: 'hackclub.com',
+    },
+    {
+      image: DonaAI,
+      name: 'Dona AI',
+      url: 'dona.ai',
+    },
+    {
+      image: LLMReport,
+      name: 'LLM Report',
+      url: 'llm.report',
+    },
+    {
+      image: Texts,
+      name: 'Texts',
+      url: 'texts.com',
+    },
+  ];
+  return (
+    <div className="slider">
+      <div className="slide-track-10 hover:pause mt-6 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5">
+        {[...entries, ...entries, ...entries].map(({ image, name, url }, i) => (
+          <a
+            href={`https://${url}`}
+            target="_blank"
+            className="pr-10 space-y-6 text-center w-[24rem] relative grayscale-[50%] opacity-90 hover:opacity-100 transition duration-200 hover:grayscale-0"
+          >
+            <Image
+              src={image}
+              alt={name}
+              width={256}
+              height={288}
+              className={`mx-auto h-32 w-72 md:h-40 md:w-24 lg:h-32 lg:w-72 rounded-lg object-cover object-top hover:rotate-0 ${
+                i % 2 === 0 ? '-rotate-1' : 'rotate-1'
+              } hover:scale-110 hover:shadow-lg lg:hover:shadow-2xl transition`}
+            />
+            <div>
+              <h4 className="text-2xl text-gray-700 dark:text-white">{name}</h4>
+              <span className="block text-sm text-gray-500">{url}</span>
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/website/components/home/faq.tsx b/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]"

diff --git a/website/components/home/hero.tsx b/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 {' '}
               <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

diff --git a/website/components/home/index.tsx b/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';
@@ -9,8 +10,8 @@ export function Home() {
     <main className="space-y-40 mb-40">
       <Hero />
       <About />
-      <Showcase />
-      <FAQ />
+      {/* <Showcase /> */}
+      <Community />
       <CTA />
     </main>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -118,6 +118,7 @@ button:disabled { @@
       }
     }
     pre {
       white-space: pre-wrap;
       /* css-3 */
@@ Expand Down @@