Implement initial version of top half of the new design

src/components/Goals/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+function Goal({ icon, title, description }) {
+  return (
+    <div className="bg-dark2 p-6">
+      <h4 className="text-xl mb-2">{title}</h4>
+      <p className="text-[#818995]">{description}</p>
+    </div>
+  );
+}
+
+export default function Goals() {
+  return (
+    <section className="py-12 mx-auto container">
+      <h3 className="text-center text-5xl font-bold mb-12">Our Goals</h3>
+      <div className="grid grid-cols-3 gap-6">
+        <Goal
+          title="Truly open-source"
+          description="under a well-known and widely-accepted license that companies can trus, that won’t suddenly change in the future, and isn’t subhect to the whims of a singe vendor."
+        />
+        <Goal
+          title="Community-driven"
+          description="so that the community governs the project for the community, where pull requests are regularly reviewed and accepted on their merit."
+        />
+        <Goal
+          title="Impartial"
+          description="so that valuable features and fixes are accepted based on their value to the community, regardless of their impact on any particular vendor."
+        />
+        <Goal
+          title="Layered and modular"
+          description="with a programmer-friendly project structure to encourage building on top, enabling a new vibrant ecosystem of tools and integrations."
+        />
+        <Goal
+          title="Backwards-compatibile"
+          description="so that the existing code can drive value for years to come."
+        />
+      </div>
+    </section>
+  );
+}

src/components/Supporters/index.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import clsx from "clsx";
+
+type ToggleButtonProps = {
+  children: React.ReactNode;
+  isActive: boolean;
+  onClick: () => void;
+};
+
+function ToggleButton({ children, isActive, onClick }: ToggleButtonProps) {
+  return (
+    <button
+      type="button"
+      className={clsx(
+        "border font-semibold text-white h-12 px-6 flex items-center hover:no-underline",
+        isActive ? "border-white" : "border-white/20"
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default function Supporters() {
+  return (
+    <section className="py-12 mx-auto container">
+      <h3 className="text-center text-5xl font-bold mb-7">Supporters</h3>
+      <div className="flex gap-6 justify-center">
+        <ToggleButton isActive onClick={() => {}}>
+          All
+        </ToggleButton>
+        <ToggleButton onClick={() => {}}>Companies</ToggleButton>
+        <ToggleButton onClick={() => {}}>Individuals</ToggleButton>
+        <ToggleButton onClick={() => {}}>Projects</ToggleButton>
+      </div>
+    </section>
+  );
+}

src/css/custom.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@300;400;500;600;700&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -10,13 +12,18 @@ html[data-theme="dark"] {
   --ifm-color-primary-light: #c698ff;
   --ifm-color-primary-lighter: #d0aaff;
   --ifm-color-primary-lightest: #efe2ff;
-  --ifm-background-color: #21252b;
-  --ifm-navbar-background-color: #2c3036;
+  --ifm-background-color: theme("colors.dark1");
+  --ifm-navbar-background-color: transparent;
+  --ifm-heading-font-family: theme("fontFamily.sans");
 }
 
 .navbar {
   height: 96px;
-  border-top: 2px solid #923dfe;
+  padding: 0;
+}
+
+.navbar__inner {
+  @apply container mx-auto;
 }
 
 .navbar__logo {

src/pages/index.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import Layout from "@theme/Layout";
 
-import Pattern from "../components/Pattern";
-import HomePage from "../components/HomePage";
+import Hero from "../components/Hero";
+import Goals from "../components/Goals";
+import Supporters from "../components/Supporters";
 
 export default function Home() {
   return (
     <Layout>
-      <Pattern />
-      <HomePage />
+      <Hero />
+      <Goals />
+      <Supporters />
     </Layout>
   );
 }

tailwind.config.js

@@ -4,9 +4,18 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: "#923dfe",
+        brand: "#933EFF",
+        brandMuted: "#AA4EE7",
+        dark1: "#0C192B",
+        dark2: "#14253D",
+        light1: "#E5E6E6",
+        light2: "#F9F9F9",
+        light3: "#FFFAFA",
       },
     },
+    fontFamily: {
+      sans: ['"DM Sans"', "system-ui"],
+    },
   },
   plugins: [],
 };