feat: landing page styles (#795)

Co-authored-by: Angie Jones <jones.angie@gmail.com>

documentation/docusaurus.config.ts

@@ -4,7 +4,7 @@ import type * as Preset from "@docusaurus/preset-classic";
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
-require('dotenv').config();
+require("dotenv").config();
 
 const inkeepApiKey = process.env.INKEEP_API_KEY;
 const inkeepIntegrationId = process.env.INKEEP_INTEGRATION_ID;
@@ -13,7 +13,7 @@ const inkeepOrgId = process.env.INKEEP_ORG_ID;
 const config: Config = {
   title: "codename goose",
   tagline:
-    "goose is your on-machine AI agent, automating engineering tasks seamlessly within your IDE or terminal",
+    "Your on-machine AI agent, automating engineering tasks seamlessly.",
   favicon: "img/favicon.ico",
 
   // Set the production url of your site here
@@ -165,31 +165,30 @@ const config: Config = {
     },
     inkeepConfig: {
       baseSettings: {
-          apiKey: inkeepApiKey,
+        apiKey: inkeepApiKey,
-          integrationId: inkeepIntegrationId,
+        integrationId: inkeepIntegrationId,
-          organizationId: inkeepOrgId,
+        organizationId: inkeepOrgId,
-          primaryBrandColor: "#1E1E1E"
+        primaryBrandColor: "#1E1E1E",
       },
       aiChatSettings: {
-          chatSubjectName: "goose",
+        chatSubjectName: "goose",
-          botAvatarSrcUrl: "https://storage.googleapis.com/organization-image-assets/block-botAvatarSrcUrl-1737745528096.png",
+        botAvatarSrcUrl:
-          botAvatarDarkSrcUrl: "https://storage.googleapis.com/organization-image-assets/block-botAvatarDarkSrcUrl-1737745527450.png",
+          "https://storage.googleapis.com/organization-image-assets/block-botAvatarSrcUrl-1737745528096.png",
-          getHelpCallToActions: [
+        botAvatarDarkSrcUrl:
-              {
+          "https://storage.googleapis.com/organization-image-assets/block-botAvatarDarkSrcUrl-1737745527450.png",
-                  name: "GitHub",
+        getHelpCallToActions: [
-                  url: "https://github.com/block/goose",
+          {
-                  icon: {
+            name: "GitHub",
-                      builtIn: "FaGithub"
+            url: "https://github.com/block/goose",
-                  }
+            icon: {
-              }
+              builtIn: "FaGithub",
-          ],
+            },
-          quickQuestions: [
+          },
-              "What is Goose?"
+        ],
-          ]
+        quickQuestions: ["What is Goose?"],
-      }
+      },
-  },
+    },
   } satisfies Preset.ThemeConfig,
-  
 };
 
 export default config;

documentation/src/components/HomepageFeatures/index.tsx

@@ -9,13 +9,21 @@ type FeatureItem = {
   description: ReactNode;
 };
 
+type FeatureQuote = {
+  name: string;
+  github: string;
+  role: string;
+  testimonial: string;
+};
+
 const FeatureList: FeatureItem[] = [
   {
     title: "Open Source",
     Svg: require("@site/static/img/lock-unlocked-fill.svg").default,
     description: (
       <>
-        Built with transparency and collaboration in mind, Goose empowers developers to contribute, customize, and innovate freely.
+        Built with transparency and collaboration in mind, goose empowers
+        developers to contribute, customize, and innovate freely.
       </>
     ),
   },
@@ -24,7 +32,8 @@ const FeatureList: FeatureItem[] = [
     Svg: require("@site/static/img/category-moving.svg").default,
     description: (
       <>
-        Goose runs locally to execute tasks efficiently, keeping control in your hands.
+        Goose runs locally to execute tasks efficiently, keeping control in your
+        hands.
       </>
     ),
   },
@@ -33,7 +42,8 @@ const FeatureList: FeatureItem[] = [
     Svg: require("@site/static/img/category-ETF.svg").default,
     description: (
       <>
-        Customize Goose with your preferred LLM and enhance its capabilities by connecting it to any external MCP server or API.
+        Customize goose with your preferred LLM and enhance its capabilities by connecting it to any
+        external MCP server or API.
       </>
     ),
   },
@@ -42,12 +52,65 @@ const FeatureList: FeatureItem[] = [
     Svg: require("@site/static/img/pay-in-four.svg").default,
     description: (
       <>
-        Goose independently handles complex tasks, from debugging to deployment, freeing you to focus on what matters most.
+        Goose independently handles complex tasks, from debugging to deployment,
+        freeing you to focus on what matters most.
       </>
     ),
   },
 ];
 
+const FeatureQuotes: FeatureQuote[] = [
+  {
+    name: "Prem Prem Pillai",
+    github: "https://github.com/cloud-on-prem",
+    role: "Software Engineer",
+    testimonial:
+      "With Goose, I feel like I am Maverick. Thanks a ton for creating this. 🙏 I have been having way too much fun with it today.",
+  },
+  {
+    name: "Jarrod Sibbison",
+    github: "https://github.com/jsibbison-square",
+    role: "Software Engineer",
+    testimonial:
+      "I wanted to construct some fake data for an API with a large request body and business rules I haven't memorized. So I told Goose which object to update and a test to run that calls the vendor. Got it to use the errors descriptions from the vendor response to keep correcting the request until it was successful. So good!",
+  },
+  {
+    name: "Manik Surtani",
+    github: "https://github.com/maniksurtani",
+    role: "Head of Open Source",
+    testimonial:
+      "I asked Goose to write up a few Google Scripts that mimic Clockwise's functionality (particularly, creating blocks on my work calendar based on events in my personal calendar, as well as color-coding calendar entries based on type and importance). Took me under an hour. If you haven't tried Goose yet, I highly encourage you to do so!",
+  },
+  {
+    name: "Andrey Bolduzev",
+    github: "https://github.com/andrey-bolduzev",
+    role: "Android Engineer",
+    testimonial:
+      "If anyone was looking for another reason to check it out: I just asked Goose to break a string-array into individual string resources across eleven localizations, and it performed amazingly well and saved me a bunch of time doing it manually or figuring out some way to semi-automate it.",
+  },
+  {
+    name: "Kang Huang",
+    github: "https://github.com/kang-square",
+    role: "Software Engineer",
+    testimonial:
+      "Hi team, thank you for much for making Goose, it's so amazing. Our team is working on migrating Dashboard components to React components. I am working with Goose to help the migration.",
+  },
+  {
+    name: "Jarrod Sibbison",
+    github: "https://github.com/jsibbison-square",
+    role: "Software Engineer",
+    testimonial:
+      "Got Goose to update a dependency, run tests, make a branch and a commit... it was 🤌. Not that complicated but I was impressed it figured out how to run tests from the README.",
+  },
+  {
+    name: "Lily Delalande",
+    github: "https://github.com/lily-de",
+    role: "Software Engineer",
+    testimonial:
+      "Wanted to document what I had Goose do -- took about 30 minutes end to end! I created a custom CLI command in the gh CLI library to download in-line comments on PRs about code changes (currently they aren't directly viewable). I don't know Go that well and I definitely didn't know where to start looking in the code base or how to even test the new command was working and Goose did it all for me 😁",
+  },
+];
+
 function Feature({ title, Svg, description }: FeatureItem) {
   return (
     <div className={clsx("col col--3")}>
@@ -62,14 +125,112 @@ function Feature({ title, Svg, description }: FeatureItem) {
   );
 }
 
+function Quote({ name, github, role, testimonial }: FeatureQuote) {
+  return (
+    <div className="col col--6">
+      {/* inline styles in the interest of time */}
+      <div
+        className="text--left padding-horiz--md padding-bottom--xl"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "left",
+        }}
+      >
+        <p>{testimonial}</p>
+        <div className="avatar">
+          <img
+            className="avatar__photo"
+            src={`https://github.com/${github.split("/").pop()}.png`}
+            alt={`${name}'s profile picture`}
+          />
+          <div className="avatar__intro">
+            <div className="avatar__name">{name}</div>
+            <small className="avatar__subtitle">{role}</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function HomepageFeatures(): ReactNode {
   return (
     <section className={styles.features}>
       <div className="container">
         <div className="row">
+          <div className={styles.videoContainer}>
+            <video
+              className={`${styles.video} hide-in-dark`}
+              autoPlay
+              loop
+              muted
+              playsInline
+            >
+              <source
+                src={require("@site/static/videos/hero_light.mp4").default}
+                type="video/mp4"
+              />
+            </video>
+
+            <video
+              className={`${styles.video} hide-in-light`}
+              autoPlay
+              loop
+              muted
+              playsInline
+            >
+              <source
+                src={require("@site/static/videos/hero_dark.mp4").default}
+                type="video/mp4"
+              />
+            </video>
+          </div>
+
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}
+
+          <div
+            style={{
+              margin: "80px 0",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: "100%",
+            }}
+          >
+            <img src={require("@site/static/img/placeholder.png").default} />
+          </div>
+
+          {/* inline styles in the interest of time */}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              marginTop: "60px",
+            }}
+          >
+            <h3
+              style={{
+                textAlign: "center",
+                marginBottom: "40px",
+              }}
+            >
+              Loved by engineers
+            </h3>
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+              }}
+            >
+              {FeatureQuotes.map((props, idx) => (
+                <Quote key={idx} {...props} />
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </section>

documentation/src/components/HomepageFeatures/styles.module.css

@@ -14,3 +14,23 @@
   height: 32px;
   width: 32px;
 }
+
+.videoContainer {
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 100px;
+  position: relative;
+}
+
+.video {
+  width: 100%;
+  height: auto;
+  display: block;
+  outline: none;
+}
+
+.video + .video {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

documentation/src/components/gooseWordmark.tsx

@@ -0,0 +1,68 @@
+export const GooseWordmark = (props: { className?: string }) => {
+  return (
+    <svg
+      width="1283"
+      height="1174"
+      viewBox="0 0 1283 1174"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M176.929 815.98C176.929 838.188 188.562 851.057 205.596 851.057C218.892 851.057 226.993 842.34 230.11 830.301L251.507 841.094C245.898 858.737 229.279 872.643 205.596 872.643C174.436 872.643 152 849.604 152 815.98C152 782.356 174.436 759.317 205.596 759.317C229.071 759.317 245.274 772.601 251.091 790.036L230.11 801.451C226.993 789.62 218.892 780.695 205.596 780.695C188.562 780.695 176.929 793.771 176.929 815.98Z"
+        fill="currentColor"
+      />
+      <path
+        d="M366.293 815.98C366.293 849.812 344.481 872.643 313.735 872.643C282.99 872.643 261.178 849.812 261.178 815.98C261.178 782.148 282.99 759.317 313.735 759.317C344.481 759.317 366.293 782.148 366.293 815.98ZM286.314 815.98C286.314 838.188 296.909 851.68 313.735 851.68C330.562 851.68 341.157 838.188 341.157 815.98C341.157 793.771 330.562 780.28 313.735 780.28C296.909 780.28 286.314 793.771 286.314 815.98Z"
+        fill="currentColor"
+      />
+      <path
+        d="M428.284 872.643C397.746 872.643 380.296 846.906 380.296 815.98C380.296 785.054 397.746 759.317 428.284 759.317C442.41 759.317 452.797 764.921 459.652 773.016V721.334H484.581V870.36H459.652V858.944C452.797 867.039 442.41 872.643 428.284 872.643ZM460.275 812.867C460.275 792.319 448.642 781.111 433.269 781.111C415.196 781.111 405.432 795.224 405.432 815.98C405.432 836.736 415.196 850.849 433.269 850.849C448.642 850.849 460.275 839.434 460.275 819.301V812.867Z"
+        fill="currentColor"
+      />
+      <path
+        d="M558.271 872.643C527.11 872.643 505.298 849.604 505.298 815.98C505.298 784.016 526.902 759.317 557.232 759.317C588.808 759.317 605.635 783.186 605.635 813.074V821.376H529.187C531.057 840.057 542.275 851.472 558.271 851.472C570.527 851.472 580.291 845.245 583.615 834.037L605.012 842.132C597.326 861.227 580.083 872.643 558.271 872.643ZM557.024 780.28C544.145 780.28 534.173 787.96 530.434 802.696H580.499C580.291 790.658 572.812 780.28 557.024 780.28Z"
+        fill="currentColor"
+      />
+      <path
+        d="M625.794 870.36V761.393H650.722V773.016C656.955 765.751 666.718 759.317 680.844 759.317C703.696 759.317 717.406 775.091 717.406 798.545V870.36H692.478V805.81C692.478 792.319 687.077 782.563 673.366 782.563C662.148 782.563 650.722 790.866 650.722 806.432V870.36H625.794Z"
+        fill="currentColor"
+      />
+      <path
+        d="M773.179 872.228C752.405 872.228 736.409 859.567 736.409 840.057C736.409 819.301 751.99 810.168 772.971 805.81L803.093 799.583V797.715C803.093 787.337 797.692 780.903 784.397 780.903C772.556 780.903 766.324 786.299 763.415 796.885L739.941 791.488C745.342 773.431 761.338 759.317 785.436 759.317C811.611 759.317 827.399 771.771 827.399 796.885V843.793C827.399 850.019 830.099 851.887 836.955 851.057V870.36C818.881 872.435 809.326 868.907 805.586 859.982C798.731 867.661 787.305 872.228 773.179 872.228ZM803.093 831.962V818.678L779.619 823.66C769.024 825.943 761.13 829.264 761.13 839.019C761.13 847.529 767.362 852.302 776.918 852.302C790.214 852.302 803.093 845.245 803.093 831.962Z"
+        fill="currentColor"
+      />
+      <path
+        d="M881.047 806.432V870.36H856.118V761.393H881.047V773.016C887.071 765.751 896.42 759.317 910.961 759.317C924.049 759.317 933.812 765.129 939.837 774.469C946.484 767.412 956.872 759.317 973.698 759.317C996.134 759.317 1010.68 775.091 1010.68 798.545V870.36H985.747V805.81C985.747 792.319 980.761 782.563 967.466 782.563C956.872 782.563 945.861 790.866 945.861 806.432V870.36H920.933V805.81C920.933 792.319 915.947 782.563 902.652 782.563C892.057 782.563 881.047 790.866 881.047 806.432Z"
+        fill="currentColor"
+      />
+      <path
+        d="M1083.64 872.643C1052.47 872.643 1030.66 849.604 1030.66 815.98C1030.66 784.016 1052.27 759.317 1082.6 759.317C1114.17 759.317 1131 783.186 1131 813.074V821.376H1054.55C1056.42 840.057 1067.64 851.472 1083.64 851.472C1095.89 851.472 1105.66 845.245 1108.98 834.037L1130.38 842.132C1122.69 861.227 1105.45 872.643 1083.64 872.643ZM1082.39 780.28C1069.51 780.28 1059.54 787.96 1055.8 802.696H1105.86C1105.66 790.658 1098.18 780.28 1082.39 780.28Z"
+        fill="currentColor"
+      />
+      <path
+        d="M460.616 1009.15C460.616 1041.45 438.498 1060 407.197 1060C381.949 1060 364.212 1049.37 357.326 1028.11L380.697 1019.78C384.035 1032.07 393.425 1039.78 407.197 1039.78C424.1 1039.78 435.576 1031.45 435.576 1011.44V1003.73C429.734 1011.44 418.674 1017.48 404.693 1017.48C374.645 1017.48 356.7 993.1 356.7 963.088C356.7 933.077 374.645 908.692 404.693 908.692C418.466 908.692 429.734 914.736 435.576 922.448V910.777H460.616V1009.15ZM435.994 962.046C435.994 942.039 425.143 930.576 409.493 930.576C392.173 930.576 381.949 942.664 381.949 963.088C381.949 983.305 392.173 995.601 409.493 995.601C425.143 995.601 435.994 984.138 435.994 964.547V962.046Z"
+        fill="currentColor"
+      />
+      <path
+        d="M587.225 965.589C587.225 999.561 565.315 1022.49 534.432 1022.49C503.55 1022.49 481.64 999.561 481.64 965.589C481.64 931.618 503.55 908.692 534.432 908.692C565.315 908.692 587.225 931.618 587.225 965.589ZM506.888 965.589C506.888 987.89 517.53 1001.44 534.432 1001.44C551.335 1001.44 561.977 987.89 561.977 965.589C561.977 943.289 551.335 929.742 534.432 929.742C517.53 929.742 506.888 943.289 506.888 965.589Z"
+        fill="currentColor"
+      />
+      <path
+        d="M706.877 965.589C706.877 999.561 684.966 1022.49 654.084 1022.49C623.201 1022.49 601.291 999.561 601.291 965.589C601.291 931.618 623.201 908.692 654.084 908.692C684.966 908.692 706.877 931.618 706.877 965.589ZM626.539 965.589C626.539 987.89 637.182 1001.44 654.084 1001.44C670.986 1001.44 681.628 987.89 681.628 965.589C681.628 943.289 670.986 929.742 654.084 929.742C637.182 929.742 626.539 943.289 626.539 965.589Z"
+        fill="currentColor"
+      />
+      <path
+        d="M716.351 999.352L735.131 984.347C741.6 994.976 754.12 1002.06 766.849 1002.06C777.491 1002.06 787.298 998.31 787.298 988.515C787.298 979.136 778.117 978.094 760.797 974.551C743.478 971.008 723.655 966.631 723.655 943.289C723.655 923.281 741.183 908.692 766.431 908.692C785.629 908.692 802.74 917.237 810.669 929.325L793.767 944.54C787.507 934.744 777.073 929.117 764.971 929.117C754.746 929.117 748.069 933.702 748.069 940.997C748.069 948.916 755.998 950.375 769.77 953.293C788.341 957.253 811.712 961.213 811.712 986.222C811.712 1008.31 791.472 1022.49 766.64 1022.49C746.399 1022.49 726.159 1014.36 716.351 999.352Z"
+        fill="currentColor"
+      />
+      <path
+        d="M878.724 1022.49C847.424 1022.49 825.514 999.352 825.514 965.589C825.514 933.494 847.215 908.692 877.68 908.692C909.398 908.692 926.3 932.66 926.3 962.672V971.008H849.51C851.388 989.765 862.656 1001.23 878.724 1001.23C891.035 1001.23 900.843 994.976 904.181 983.721L925.674 991.849C917.953 1011.02 900.634 1022.49 878.724 1022.49ZM877.472 929.742C864.534 929.742 854.518 937.453 850.762 952.251H901.051C900.843 940.163 893.331 929.742 877.472 929.742Z"
+        fill="currentColor"
+      />
+      <path
+        d="M819.393 589.784C841.031 585.085 863.985 572.295 863.985 572.295L823.812 539.201C803.952 522.855 787.048 503.214 773.832 481.148C755.571 450.659 730.34 424.931 700.22 406.08L685.51 397.514C680.47 394.01 676.956 388.549 676.456 382.388C676.135 378.416 677.088 374.864 679.308 371.739C686.968 360.943 726.557 313.965 733.812 307.962C743.155 300.238 753.567 293.814 763.226 286.459C764.599 285.412 765.978 284.37 767.335 283.307C767.382 283.26 767.451 283.223 767.493 283.181C770.592 280.734 773.517 278.135 775.842 275.052C784.239 265.329 786.28 256.732 786.78 252.928C785.643 249.267 782.255 241.08 772.812 231.636C778.73 231.999 785.896 236.681 792.393 242.19C796.755 235.219 801.321 227.853 805.883 220.471C808.929 215.542 804.409 211.853 804.283 211.738L804.257 211.732L804.252 211.706C804.136 211.58 800.448 207.06 795.529 210.107C785.012 216.615 774.5 223.128 765.152 229.047C765.152 229.047 754.072 228.816 740.951 240.149C737.863 242.479 735.264 245.405 732.823 248.498C732.775 248.546 732.733 248.609 732.696 248.656C731.628 250.008 730.587 251.387 729.545 252.765C722.185 262.43 715.767 272.837 708.043 282.181C702.046 289.442 655.065 329.028 644.269 336.688C641.144 338.909 637.598 339.866 633.621 339.54C627.466 339.045 621.999 335.526 618.496 330.485L609.931 315.775C591.08 285.643 565.354 260.42 534.866 242.158C512.802 228.942 493.168 212.032 476.816 192.176L443.714 152.001C443.714 152.001 430.919 174.951 426.226 196.596C432.755 204.535 449.785 224.238 469.609 239.286C448.296 229.263 432.54 221.513 420.113 215.031C418.198 229.205 418.945 250.64 420.918 267.239C434.371 273.127 457.277 282.197 480.594 287.016C461.944 291.378 441.483 292.172 425.685 291.862C428.468 302.137 432.34 312.618 437.548 323.162C439.763 328.039 442.188 332.8 444.808 337.462C453.168 339.761 485.992 344.544 503.458 340.619C486.081 346.822 456.909 357.244 456.909 357.244C479.315 385.124 504.079 407.805 504.079 407.805C541.748 387.549 550.334 384.782 578.586 366.304C532.836 403.533 520.962 418.733 508.119 434.354L499.17 446.913C494.52 453.437 490.484 460.366 487.112 467.632C475.827 491.913 459.855 543.652 459.855 543.652C457.003 552.67 463.611 559.278 472.366 556.164C472.366 556.164 524.092 540.19 548.382 528.905C555.642 525.527 562.581 521.492 569.1 516.846L581.658 507.897C585.872 504.429 590.06 501.031 594.658 497.021C594.658 497.021 626.271 534.477 658.769 559.115C658.769 559.115 669.191 529.941 675.393 512.563C671.464 530.036 676.246 562.861 678.55 571.216C683.201 573.837 687.973 576.262 692.85 578.477C703.398 583.691 713.873 587.558 724.147 590.341C723.842 574.536 724.631 554.08 728.993 535.429C733.812 558.747 742.877 581.66 748.769 595.108C765.367 597.081 786.801 597.828 800.974 595.913C794.492 583.486 786.743 567.718 776.721 546.415C791.767 566.239 811.47 583.27 819.409 589.799L819.393 589.784Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

documentation/src/components/icons/pay-in-four.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 11C21.8954 11 21 10.1046 21 9C21 7.89543 21.8954 7 23 7C24.1046 7 25 7.89543 25 9C25 10.1046 24.1046 11 23 11ZM18 9C18 6.23858 20.2386 4 23 4C25.7614 4 28 6.23858 28 9C28 11.7614 25.7614 14 23 14C20.2386 14 18 11.7614 18 9ZM23 25C21.8954 25 21 24.1046 21 23C21 21.8954 21.8954 21 23 21C24.1046 21 25 21.8954 25 23C25 24.1046 24.1046 25 23 25ZM18 23C18 20.2386 20.2386 18 23 18C25.7614 18 28 20.2386 28 23C28 25.7614 25.7614 28 23 28C20.2386 28 18 25.7614 18 23ZM7 23C7 24.1046 7.89543 25 9 25C10.1046 25 11 24.1046 11 23C11 21.8954 10.1046 21 9 21C7.89543 21 7 21.8954 7 23ZM9 18C6.23858 18 4 20.2386 4 23C4 25.7614 6.23858 28 9 28C11.7614 28 14 25.7614 14 23C14 20.2386 11.7614 18 9 18ZM9 4C6.23858 4 4 6.23858 4 9C4 11.7614 6.23858 14 9 14C11.7614 14 14 11.7614 14 9C14 6.23858 11.7614 4 9 4Z" fill="#1E1E1E"/>
+</svg>

documentation/src/css/custom.css

@@ -53,7 +53,7 @@
   --constant-white: #ffffff;
   --constant-black: #000000;
   --green-for-lightbg: #0f6636; /* accessible on white bg */
-  --green-for-darkbg: #25c2a0;; /* accessible on black bg */
+  --green-for-darkbg: #25c2a0; /* accessible on black bg */
   --grey-10: #101010;
   --grey-20: #1e1e1e;
   --grey-50: #666666;
@@ -152,7 +152,7 @@
   --text-inverse: var(--constant-black);
 
   --button-primary-background: var(--constant-white);
-  --ifm-link-color: var(--green-for-darkbg); 
+  --ifm-link-color: var(--green-for-darkbg);
 }
 
 /* overrides */
@@ -203,18 +203,20 @@ html {
 .hero__subtitle {
   max-width: 600px;
   margin-bottom: 32px;
+  font-size: 28px;
+  line-height: 36px;
 }
 
-.footer .container {
+.footer {
-  border-top: 2px solid var(--border-prominent);
+  border-top: 2px solid var(--border-subtle);
   padding-top: 24px;
 }
 
 /* net new */
 
 .hero--logo svg {
-  height: 100px;
+  height: 220px;
-  width: 100px;
+  width: 220px;
 }
 
 .pill-button {
@@ -232,3 +234,11 @@ html {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
+
+html[data-theme="dark"] .hide-in-dark {
+  opacity: 0;
+}
+
+html[data-theme="light"] .hide-in-light {
+  opacity: 0;
+}

documentation/src/pages/index.module.css

@@ -8,6 +8,7 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  padding-bottom: 0;
 }
 
 @media screen and (max-width: 996px) {

documentation/src/pages/index.tsx

@@ -8,7 +8,7 @@ import Heading from "@theme/Heading";
 
 import styles from "./index.module.css";
 import { IconDownload } from "../components/icons/download";
-import Goose from "../components/icons/goose";
+import { GooseWordmark } from "../components/gooseWordmark";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -16,11 +16,8 @@ function HomepageHeader() {
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         <div className="hero--logo">
-          <Goose />
+          <GooseWordmark />
         </div>
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link