docs: update home page (#2441)

documentation/docusaurus.config.ts

@@ -14,7 +14,7 @@ const inkeepOrgId = process.env.INKEEP_ORG_ID;
 const config: Config = {
   title: "codename goose",
   tagline:
-    "Your on-machine AI agent, automating engineering tasks seamlessly.",
+    "Your local AI agent, automating engineering tasks seamlessly.",
   favicon: "img/favicon.ico",
 
   // Set the production url of your site here
@@ -131,17 +131,11 @@ const config: Config = {
           label: "Quickstart",
           position: "left",
         },
-        {
-          to: "/extensions",
-          label: "Extensions",
-          position: "left",
-        },
         {
           to: "/docs/category/getting-started",
           position: "left",
           label: "Docs",
         },
-        
         {
           to: "/docs/category/tutorials",
           position: "left",
@@ -150,7 +144,12 @@ const config: Config = {
         {
           to: "/prompt-library",
           position: "left",
-          label: "Prompt Library",
+          label: "Prompts",
+        },
+        {
+          to: "/extensions",
+          label: "Extensions",
+          position: "left",
         },
         { to: "/blog", label: "Blog", position: "left" },
 

documentation/src/components/HomepageFeatures/index.tsx

@@ -146,7 +146,6 @@ function Quote({ name, github, role, testimonial }: FeatureQuote) {
           alignItems: "left",
         }}
       >
-        <p>{testimonial}</p>
         <div className="avatar">
           <img
             className="avatar__photo"
@@ -158,6 +157,7 @@ function Quote({ name, github, role, testimonial }: FeatureQuote) {
             <small className="avatar__subtitle">{role}</small>
           </div>
         </div>
+        <p>{testimonial}</p>
       </div>
     </div>
   );
@@ -168,54 +168,12 @@ export default function HomepageFeatures(): ReactNode {
     <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} />
           ))}
 
-          {/* YouTube Video Section */}
-          <div style={{ width: "100%", textAlign: "center", padding: "2rem 0" }}>
-            <h2 style={{ fontSize: "3rem", marginBottom: "1rem", fontWeight: "bold" }}>
-              Meet Codename Goose
-            </h2>
-            <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
-              <div
-                style={{
-                  position: "relative",
-                  width: "66vw", 
-                  height: "37.125vw",
-                  maxWidth: "1100px",
-                  borderRadius: "12px", 
-                  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.25)", 
-                  overflow: "hidden",
-                }}
-              >
-                <iframe
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: "100%",
-                    borderRadius: "12px", 
-                  }}
-                  src="https://www.youtube.com/embed/tZCNOe4TTkM"
-                  title="Goose Introduction"
-                  frameBorder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  allowFullScreen
-                ></iframe>
-              </div>
-            </div>
-          </div>
           {/* Testimonials Section */}
           <div style={{ display: "flex", flexDirection: "column", marginTop: "60px" }}>
             <h3 style={{ textAlign: "center", marginBottom: "40px" }}>Loved by engineers</h3>

documentation/src/css/custom.css

@@ -241,8 +241,6 @@ html {
   padding-top: 24px;
 }
 
-/* net new */
-
 .hero--logo svg {
   height: 220px;
   width: 220px;
@@ -257,6 +255,17 @@ html {
   margin: 0;
 }
 
+.ctaButton {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  background: var(--background-app);
+  color: var(--text-standard);
+  font-weight: bold;
+  border-radius: 999px;
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
 /* Enable word-wrap for code blocks */
 .theme-code-block pre {
   white-space: pre-wrap;
@@ -306,3 +315,4 @@ html[data-theme="light"] .hide-in-light {
   object-fit: cover; /* Ensure the image covers the area while maintaining aspect ratio */
   border-radius: 8px; /* Optional: rounded corners */
 }
+

documentation/src/pages/index.module.css

@@ -1,24 +1,98 @@
 /**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
+* CSS files with the .module.css suffix will be treated as CSS modules
+* and scoped locally.
+*/
 
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-  padding-bottom: 0;
+.header {
+  padding: 4rem 2rem;
 }
 
+
+.wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3rem;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.textColumn {
+  flex: 1 1 300px;
+  max-width: 500px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: -40px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+}
+
+.subtitle {
+  font-size: 1.25rem;
+  margin-bottom: 1.5rem;
+  max-width: 30ch;
+}
+
+.videoColumn {
+  flex: 1 1 400px;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  max-width: 640px;
+}
+
+.aspect-ratio{
+  aspect-ratio: 16 / 9;
+  width: 100%;
+}
+
+ 
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
   }
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+@media screen and (max-width: 768px) {
+  .header {
+    padding: 1rem 1rem;
+  }
+
+  .wrapper {
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+    padding: 1rem 1rem;
+  }
+
+  .textColumn {
+    text-align: center;
+    max-width: 100%;
+    flex: 1 1 400px;
+    margin-top: 0;
+  }
+
+  .subtitle {
+    font-size: 1.1rem;
+    line-height: 1.5;
+    margin: 0 auto 1.5rem;
+  }
+
+  .ctaButton {
+    font-size: 1rem;
+    width: auto;
+  }
+
+  .videoColumn {
+    flex: 1 1 180px;
+    aspect-ratio: 16 / 9;
+    width: 100%;
+  }
 }

documentation/src/pages/index.tsx

@@ -1,37 +1,42 @@
 import type { ReactNode } from "react";
-import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
-import Heading from "@theme/Heading";
 
 import styles from "./index.module.css";
-import { IconDownload } from "../components/icons/download";
 import { GooseWordmark } from "../components/gooseWordmark";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className="container">
+    <header className={styles.header}>
+      <div className={styles.wrapper}>
+        <div className={styles.textColumn}>
           <div className="hero--logo">
             <GooseWordmark />
           </div>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--primary button--lg"
-            to="docs/getting-started/installation"
-          >            
+          <p className={styles.subtitle}>{siteConfig.tagline}</p>
+          <Link className="button button--primary button--lg" to="docs/getting-started/installation">
             install goose
           </Link>
         </div>
+
+        <div className={styles.videoColumn}>
+          <iframe
+            src="https://www.youtube.com/embed/D-DpDunrbpo"
+            className="aspect-ratio"
+            title="vibe coding with goose"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          ></iframe>
+        </div>
       </div>
     </header>
   );
 }
 
+
 export default function Home(): ReactNode {
   const { siteConfig } = useDocusaurusContext();
   return (