feat: ai agents front page

src/components/Ai/index.tsx

@@ -0,0 +1,20 @@
+import BashSnippet from "@site/src/components/BashSnippet";
+import styles from "./styles.module.scss";
+
+export default function Build(): JSX.Element {
+  return (
+    <div className={styles.section}>
+      <h2 className={styles.sub}>
+        Building with <span className={styles.agents}>AI agents</span>?
+      </h2>
+      <p className={styles.text}>
+        Give them instant knowledge by installing skills.
+      </p>
+
+      <BashSnippet
+        cmd="npx skills add junobuild/skills"
+        analyticsEventName="copy_ai_snippet"
+      ></BashSnippet>
+    </div>
+  );
+}

src/components/Ai/styles.module.scss

@@ -0,0 +1,32 @@
+@use "../../mixins/fonts";
+
+.section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sub {
+  margin: 6rem 0 0.75rem;
+  text-align: center;
+  @include fonts.h2;
+}
+
+.agents {
+  html[data-theme="light"] & {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-color: var(--ifm-color-primary);
+    text-decoration-style: wavy;
+  }
+}
+
+.text {
+  max-width: 324px;
+  margin-bottom: 2rem;
+  text-align: center;
+
+  @media screen and (min-width: 768px) {
+    max-width: 524px;
+  }
+}

src/components/BashSnippet/index.tsx

@@ -0,0 +1,49 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { trackEvent } from "@site/src/providers/analytics.providers";
+import CodeBlock from "@theme/CodeBlock";
+import { useRef } from "react";
+import styles from "./styles.module.scss";
+
+export default function BashSnippet({
+  analyticsEventName,
+  cmd
+}: {
+  analyticsEventName: string;
+  cmd: string;
+}): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
+  const container = useRef(null);
+
+  const onClick = async ({ target }: MouseEvent) => {
+    const btn = container.current?.querySelector('button[title="Copy"]');
+
+    if (!btn?.contains(target)) {
+      return;
+    }
+
+    await trackEvent({
+      name: analyticsEventName,
+      siteConfig
+    });
+  };
+
+  return (
+    <div
+      className={styles.code}
+      ref={container}
+      onClick={async ($event) => onClick($event as unknown as MouseEvent)}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="24"
+        viewBox="0 -960 960 960"
+        width="24"
+        fill="#00fff5"
+        className={styles.bash}
+      >
+        <path d="M530-481 353-658q-9-9-8.5-21t9.5-21q9-9 21.5-9t21.5 9l198 198q5 5 7 10t2 11q0 6-2 11t-7 10L396-261q-9 9-21 8.5t-21-9.5q-9-9-9-21.5t9-21.5l176-176Z" />
+      </svg>
+      <CodeBlock className="code-npm">{cmd}</CodeBlock>
+    </div>
+  );
+}

src/components/BashSnippet/styles.module.scss

@@ -0,0 +1,37 @@
+.code {
+  position: relative;
+
+  :global(.code-npm) {
+    width: 340px;
+    box-shadow: none;
+    margin: 0;
+
+    code {
+      padding: var(--ifm-pre-padding) var(--ifm-pre-padding)
+        var(--ifm-pre-padding) 2rem;
+    }
+
+    span {
+      color: #00fff5;
+    }
+
+    button {
+      opacity: 1;
+      border-color: transparent;
+      padding-top: 0.55rem;
+    }
+
+    button[aria-label="Toggle word wrap"] {
+      display: none;
+    }
+  }
+}
+
+.bash {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translate(0, -50%);
+
+  z-index: 1;
+}

src/pages/index.module.scss

@@ -39,6 +39,16 @@
   }
 }
 
+.ai {
+  @include section.section;
+
+  padding: 1rem 3rem 6rem;
+
+  @media screen and (min-width: 1140px) {
+    padding: 1rem 3rem 6rem;
+  }
+}
+
 .block {
   @include section.section;
 

src/pages/index.tsx

@@ -1,5 +1,6 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { initOrbiter } from "@junobuild/analytics";
+import AI from "@site/src/components/Ai";
 import Build from "@site/src/components/Build";
 import Features from "@site/src/components/Features";
 import Head from "@site/src/components/Head";
@@ -56,6 +57,10 @@ export default function Home(): JSX.Element {
           <Launch />
         </section>
 
+        <section className={`container ${styles.ai}`}>
+          <AI />
+        </section>
+
         <section className={`container ${styles.block}`}>
           <Testimonials />
         </section>