Implement initial version of the top half of the new design (#17)

docusaurus.config.js

@@ -41,7 +41,7 @@ const config = {
   ],
 
   plugins: [
-    async function tailwindPlugin() {
+    function tailwindPlugin() {
       return {
         name: "tailwindcss",
         configurePostCss(postcssOptions) {
@@ -142,6 +142,35 @@ const config = {
         additionalLanguages: ["hcl"],
       },
     }),
+  customFields: {
+    companiesWithLogos: [
+      {
+        name: "Gruntwork",
+        logo: "/logos/gruntwork.png",
+        pledge: "Development; open-source community efforts",
+      },
+      {
+        name: "Spacelift",
+        logo: "/logos/spacelift.svg",
+        pledge: "Cover the cost of 5 FTEs for at least 5 years",
+      },
+      {
+        name: "env0",
+        logo: "/logos/env0.svg",
+        pledge: "Cover the cost of 5 FTEs for at least 5 years",
+      },
+      {
+        name: "Scalr",
+        logo: "/logos/scalr.svg",
+        pledge: "Cover the cost of 3 FTEs for at least 5 years",
+      },
+      {
+        name: "Harness",
+        logo: "/logos/harness.svg",
+        pledge: "Cover the cost of 5 FTEs for at least 5 years",
+      },
+    ],
+  },
 };
 
 module.exports = config;

package.json

@@ -43,6 +43,9 @@
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.17.1"
+  },
+  "devDependencies": {
+    "cheerio": "^1.0.0-rc.12"
   }
 }

src/components/Goals/index.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import ExpandIcon from "../../icons/expand.svg";
+import DotsIcon from "../../icons/dots.svg";
+import ScaleIcon from "../../icons/scale.svg";
+import LayersIcon from "../../icons/layers.svg";
+import HumidityIcon from "../../icons/humidity.svg";
+
+function Goal({ icon: Icon, title, description }) {
+  return (
+    <div className="bg-dark2 p-6">
+      <Icon className="w-12 mb-4" />
+      <h4 className="text-xl mb-2">{title}</h4>
+      <p className="text-[#818995]">{description}</p>
+    </div>
+  );
+}
+
+export default function Goals() {
+  return (
+    <section className="py-6 md:py-12 mx-auto container">
+      <h3 className="text-center text-3xl md:text-5xl font-bold mb-6 md:mb-12">
+        Our Goals
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <Goal
+          icon={ExpandIcon}
+          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
+          icon={DotsIcon}
+          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
+          icon={ScaleIcon}
+          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
+          icon={LayersIcon}
+          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
+          icon={HumidityIcon}
+          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,125 @@
+import React, { useState } from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import supporters from "../../../supporters.json";
+import Link from "@docusaurus/Link";
+
+type SupporterTypeProps = {
+  children: React.ReactNode;
+  count?: number;
+  withSeparator?: boolean;
+};
+
+function SupporterType({ children, withSeparator, count }: SupporterTypeProps) {
+  return (
+    <li className=" text-white h-12 flex items-center">
+      {children}
+      {count && (
+        <sup className="ml-1 mt-2 text-brandLight text-base font-bold">
+          {count}
+        </sup>
+      )}
+      {withSeparator && <span className="mx-4 text-white/50">•</span>}
+    </li>
+  );
+}
+
+function groupSupportersByType(supporters) {
+  const groupedSupporters = {};
+  for (const supporter of supporters) {
+    let { type } = supporter;
+
+    switch (true) {
+      case type.includes("Individual"):
+        type = "Individuals";
+        break;
+      case type === "Company":
+        type = "Companies";
+        break;
+      case type === "Project":
+        type = "Projects";
+        break;
+      case type === "Foundation":
+        type = "Foundations";
+        break;
+    }
+
+    if (!groupedSupporters[type]) {
+      groupedSupporters[type] = [];
+    }
+    groupedSupporters[type].push(supporter);
+  }
+  return groupedSupporters;
+}
+
+export default function Supporters() {
+  const { siteConfig } = useDocusaurusContext();
+  const [showAll, setShowAll] = useState(false);
+  const groupedSupporters = groupSupportersByType(supporters);
+  const types = Object.keys(groupedSupporters);
+
+  const truncatedSupporters = showAll ? supporters : supporters.slice(0, 5);
+
+  return (
+    <section className="py-12 mx-auto container items-center flex flex-col">
+      <h3 className="text-center text-3xl md:text-5xl font-bold mb-4 md:mb-7">
+        Supporters
+      </h3>
+      <ol className="inline-flex" role="list">
+        {types.map((type, index) => (
+          <SupporterType
+            key={type}
+            count={groupedSupporters[type].length}
+            withSeparator={index < types.length - 1}
+          >
+            {type}
+          </SupporterType>
+        ))}
+      </ol>
+      <table className="w-full mt-6 md:mt-12 mb-6 border-0 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl table">
+        <tbody>
+          {siteConfig.customFields.companiesWithLogos.map((supporter) => (
+            <tr
+              className="even:bg-transparent border-t-0 border-b border-white/20 w-full"
+              key={supporter.name}
+            >
+              <td className="py-3 md:py-6 border-0 w-2/6 md:w-1/6 px-6">
+                <Link
+                  href={supporter.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    src={supporter.logo}
+                    alt={supporter.name}
+                    className="min-w-[100px]"
+                  />
+                </Link>
+              </td>
+              <td className="py-3 md:py-6 border-0 w-2/6 text-center text-[#9DA6B5]">
+                Company
+              </td>
+              <td className="py-3 md:py-6 border-0 w-2/6 md:w-3/6 text-right text-[#9DA6B5] px-6">
+                {supporter.pledge}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="flex gap-6 justify-center">
+        <button
+          type="button"
+          className="border text-white h-12 px-6 flex items-center hover:no-underline border-white/20"
+          onClick={() => setShowAll((value) => !value)}
+        >
+          {showAll ? "Show Less" : "Show More"}
+        </button>
+        <Link
+          href="/support"
+          className="bg-brand text-white h-12 px-6 flex items-center hover:no-underline hover:text-white hover:bg-brand/80 transition-colors"
+        >
+          Support Us
+        </Link>
+      </div>
+    </section>
+  );
+}

src/css/custom.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,[email protected],300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -10,13 +12,22 @@ 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 px-6 md:px-0 container mx-auto;
+}
+
+.navbar--fixed-top {
+  position: static;
 }
 
 .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>
   );
 }