Clean up FAQ section

src/components/Accordion/Item.tsx

@@ -20,7 +20,7 @@ const AccordionItem = ({ summary, open, children }: AccordionItemProps) => {
   return (
     <details
       ref={detailsRef}
-      className="accordion-item group text-lg"
+      className="accordion-item group text-lg border-b border-gray-150"
       open={open}
     >
       <summary

src/components/Accordion/index.tsx

@@ -5,7 +5,7 @@ type AccordionProps = {
 };
 
 const Accordion = ({ children }: AccordionProps) => {
-  return <section className="grid grid-cols-1 divide-y">{children}</section>;
+  return <section className="flex flex-col">{children}</section>;
 };
 
 export default Accordion;

src/components/Button/index.tsx

@@ -3,19 +3,21 @@ import clsx from "clsx";
 import Link, { Props } from "@docusaurus/Link";
 
 type ButtonProps = Props & {
-  variant: "primary" | "secondary";
+  variant: "primary" | "secondaryOnDark" | "secondaryOnLight";
 };
 
 export default function Button({ children, variant, ...rest }: ButtonProps) {
   return (
     <Link
       {...rest}
       className={clsx(
-        "border font-semibold text-white h-12 px-6 flex items-center hover:no-underline transition-colors",
+        "border font-semibold h-12 px-6 flex items-center hover:no-underline transition-colors",
         variant === "primary" &&
-          "bg-primary-base hover:bg-primary-hover border-primary-base hover:border-primary-hover hover:text-white",
-        variant === "secondary" &&
-          "border-gray-700 bg-transparent hover:border-white hover:text-white"
+          "bg-primary-base text-white hover:bg-primary-hover border-primary-base hover:border-primary-hover hover:text-white",
+        variant === "secondaryOnDark" &&
+          "border-gray-700 text-gray-100 bg-transparent hover:border-white hover:text-gray-100",
+        variant === "secondaryOnLight" &&
+          "border-gray-150 text-gray-900 bg-transparent hover:border-gray-900 hover:text-gray-900"
       )}
     >
       {children}

src/components/FAQ/index.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import Accordion from "../Accordion";
 import AccordionItem from "../Accordion/Item";
+import Button from "../Button";
 
 export default function FAQ() {
   return (
-    <section className="text-[#0C192B] flex flex-col justify-center w-full bg-light2 py-10 md:py-20 px-6">
+    <section className="text-gray-900 flex flex-col justify-center w-full bg-gray-50 py-10 md:py-20 px-6">
       <div className="w-full max-w-4xl mx-auto">
         <h3 className="text-center text-3xl md:text-5xl font-bold mb-6 md:mb-12">
           Frequently Asked Questions
@@ -40,6 +41,12 @@ export default function FAQ() {
             future, and isn’t subhect to the whims of a singe vendor.
           </AccordionItem>
         </Accordion>
+
+        <div className="flex justify-center mt-6">
+          <Button variant="secondaryOnLight" href="/faqs">
+            Show More
+          </Button>
+        </div>
       </div>
     </section>
   );

src/components/Hero/index.tsx

@@ -33,7 +33,7 @@ export default function Hero() {
         will be managed by an independent Foundation.
       </p>
       <div className="flex gap-4 pt-6">
-        <Button variant="secondary" href="/manifesto">
+        <Button variant="secondaryOnDark" href="/manifesto">
           Read Manifesto
         </Button>
         <Button variant="primary" href="/support">

src/components/LatestNews/index.tsx

@@ -23,7 +23,10 @@ export default function LatestNews() {
               to all their core products, including Terraform, to the Business
               Source License (BSL).
             </p>
-            <Button variant="secondary" href="https://opentf.org/announcement">
+            <Button
+              variant="secondaryOnDark"
+              href="https://opentf.org/announcement"
+            >
               Read More
             </Button>
           </div>

src/components/Supporters/index.tsx

@@ -104,7 +104,7 @@ export default function Supporters() {
         </tbody>
       </table>
       <div className="flex gap-6 justify-center">
-        <Button variant="secondary" href="/supporters">
+        <Button variant="secondaryOnDark" href="/supporters">
           Show More
         </Button>
         <Button variant="primary" href="/support">

tailwind.config.js

@@ -9,7 +9,12 @@ module.exports = {
           hover: "#7732D0",
         },
         gray: {
+          900: "#1B1D20",
           700: "#505661",
+          600: "#6A7382",
+          150: "#DADEE3",
+          100: "#E7E9EC",
+          50: "#F9F9F9",
         },
         brand: "#933EFF",
         brandMuted: "#AA4EE7",