align tagline buttons (#3788)

microsoft · Oct 14, 2024 · 7e29714 · 7e29714
1 parent 2834530
commit 7e29714
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 46 deletions.
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -7,52 +7,55 @@ import styles from "./index.module.css";
 import HomepageFeatures from "../components/HomepageFeatures";
 
 function HomepageHeader() {
-    const { siteConfig } = useDocusaurusContext();
-    return (
-        <header className={clsx("hero hero--primary", styles.heroBanner)}>
-            <div className="container">
-                <h1 className="hero__title">{siteConfig.title}</h1>
-                <p className="hero__subtitle">{siteConfig.tagline}</p>
-                <div className={styles.buttons}>
-                    <div className={styles.buttonWrapper}>
-                        <Link
-                            className="button button--secondary button--lg"
-                            to="/docs/Getting-Started"
-                        >
-                            Get Started
-                        </Link>
-                        <p className={styles.buttonTagline}>
-                            Current stable version of AutoGen (autogen-agentchat~=0.2)
-                        </p>
-                    </div>
-                    <div className={styles.buttonWrapper}>
-                        <Link
-                            className="button button--secondary button--lg"
-                            to="https://microsoft.github.io/autogen/dev/"
-                        >
-                            Preview v0.4
-                        </Link>
-                        <p className={styles.buttonTagline}>
-                            A new event driven architecture for AutoGen
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </header>
-    );
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <div className={styles.buttonWrapper}>
+            <Link
+              className="button button--secondary button--lg"
+              to="/docs/Getting-Started"
+            >
+              Get Started
+            </Link>
+            <p className={styles.buttonTagline}>
+              Current stable version of AutoGen (autogen-agentchat~=0.2)
+            </p>
+          </div>
+          <div className={styles.buttonWrapper}>
+            <Link
+              className={clsx(
+                "button button--secondary button--lg",
+                styles.buttonLink
+              )}
+              to="https://microsoft.github.io/autogen/dev/"
+            >
+              Preview v0.4
+            </Link>
+            <p className={styles.buttonTagline}>
+              A new event driven, asynchronous architecture for AutoGen
+            </p>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
 }
 
 export default function Home() {
-    const { siteConfig } = useDocusaurusContext();
-    return (
-        <Layout
-            title={`AutoGen`}
-            description="Enabling Next-Gen LLM Applications via Multi-Agent Conversation Framework"
-        >
-            <HomepageHeader />
-            <main>
-                <HomepageFeatures />
-            </main>
-        </Layout>
-    );
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`AutoGen`}
+      description="Enabling Next-Gen LLM Applications via Multi-Agent Conversation Framework"
+    >
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
 }
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
@@ -29,11 +29,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 200px;
+}
+
+.buttonLink {
+  width: 100%;
 }
 
 .buttonTagline {
   font-size: 0.8rem;
   margin-top: 5px;
   text-align: center;
-  max-width: 200px;
+  height: 100px;
+  overflow-y: auto;
+  padding: 5px;
 }