feat(docs): paths for devs confident in other tools (#948)

Co-authored-by: gautamgambhir97 <[email protected]> Co-authored-by: Joshua Croft <[email protected]> Co-authored-by: Felix Nicolae Bucsa <[email protected]>
fetchai · Sep 23, 2024 · d8cc924 · d8cc924
1 parent 2ddafe6
commit d8cc924
Show file tree

Hide file tree

Showing 16 changed files with 1,637 additions and 2 deletions.
diff --git a/components/landing-page.tsx b/components/landing-page.tsx
@@ -9,9 +9,29 @@ import Image from "next/image";
 import systemDiagram from "../src/svgs/system-diagram.svg";
 import coursesStack from "../src/svgs/courses-stack.svg";
 import coursesStackSecond from "../src/svgs/courses-stack-second.svg";
+import langchain from "../src/svgs/langchain.svg";
+import crewai from "../src/svgs/crewai.svg";
+import fastapi from "../src/svgs/fastapi.svg";
 import { Arrow, vectorPointer, vectorSquare } from "src/icons/shared-icons";
 
 function LandingPage() {
+  const comingFromSomewhere = [
+    {
+      name: "Langchain",
+      icon: langchain,
+      link: "/guides/quickstart-with/langchain/creating-an-agent-with-langchain",
+    },
+    {
+      name: "FastAPI",
+      icon: fastapi,
+      link: "/guides/agents/intermediate/rest-endpoints",
+    },
+    {
+      name: "CrewAi",
+      icon: crewai,
+      link: "/guides/quickstart-with/CrewAI/startup-idea-analyser",
+    },
+  ];
   const startingGuides = [
     {
       label: "Building your first agent",
@@ -57,6 +77,49 @@ function LandingPage() {
     </div>
   );
 
+  const ComingFromSomeWhere = ({
+    icon,
+    name,
+    link,
+  }: {
+    icon: string;
+    name: string;
+    link: string;
+  }) => {
+    const router = useRouter();
+    return (
+      <div
+        onClick={() => router.push(link)}
+        className={styles.comingSomewhereWrapper}
+      >
+        <div className="nx-flex nx-w-full nx-flex-row nx-justify-between">
+          <div className="nx-flex nx-flex-row nx-gap-3 ">
+            <Image
+              src={icon}
+              alt="somewhere-img"
+              className={styles.comingSomewhereImg}
+            />
+            <span className={styles.comingSomewhereTitle}>{name}</span>
+          </div>
+          <p className=" nx-flex nx-justify-center nx-items-center">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M13.75 7.5625L8.25 12.8125C7.9375 13.0938 7.46875 13.0938 7.1875 12.7812C6.90625 12.4688 6.90625 12 7.21875 11.7188L11.375 7.75H0.75C0.3125 7.75 0 7.4375 0 7C0 6.59375 0.3125 6.25 0.75 6.25H11.375L7.21875 2.3125C6.90625 2.03125 6.90625 1.53125 7.1875 1.25C7.46875 0.9375 7.96875 0.9375 8.25 1.21875L13.75 6.46875C13.9062 6.625 14 6.8125 14 7C14 7.21875 13.9062 7.40625 13.75 7.5625Z"
+                fill="#8A9FB8"
+              />
+            </svg>
+          </p>
+        </div>
+      </div>
+    );
+  };
+
   const CourseStack = ({
     course,
     index,
@@ -161,6 +224,19 @@ function LandingPage() {
             ))}
           </div>
         </div>
+        <div className=" nx-flex nx-flex-col nx-gap-3">
+          <p className={styles.subDescription}>Coming from somewhere?</p>
+          <div className=" nx-grid sm:nx-grid-cols-2 md:nx-grid-cols-3 lg:nx-grid-cols-4 nx-grid-cols-1 nx-w-full nx-gap-3">
+            {comingFromSomewhere.map((item, index) => (
+              <ComingFromSomeWhere
+                link={item.link}
+                icon={item.icon}
+                name={item.name}
+                key={index}
+              />
+            ))}
+          </div>
+        </div>
       </section>
       <hr className={styles.horizontalLine} />
       <section>

diff --git a/components/landing.module.css b/components/landing.module.css
@@ -84,7 +84,8 @@
 .startGuides {
   display: flex;
   flex-grow: 1;
-  margin-top: 24px;
+  margin-top: 48px;
+  margin-bottom: 48px;
 }
 
 .startGuideText {
@@ -274,3 +275,37 @@
   right: 20px;
   top: 30px;
 }
+
+.comingSomewhereWrapper:hover {
+  background: #c5cae9;
+}
+
+.comingSomewhereWrapper {
+  display: flex;
+  padding: 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid #d0d9e3;
+  background: #fff;
+  backdrop-filter: blur(35px);
+  cursor: pointer;
+}
+
+.comingSomewhereImg {
+  width: 47.35px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.comingSomewhereTitle {
+  color: #000d3d;
+  font-family: Lexend;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.16px;
+}
diff --git a/pages/guides/_meta.json b/pages/guides/_meta.json
@@ -4,5 +4,6 @@
   "apis": "APIs",
   "fetch-network": "Fetch Network",
   "agent-courses": "Courses",
-  "ai-engine-sdk": "AI Engine SDK"
+  "ai-engine-sdk": "AI Engine SDK",
+  "quickstart-with": "Quickstart With"
 }
diff --git a/pages/guides/quickstart-with/CrewAI/_meta.json b/pages/guides/quickstart-with/CrewAI/_meta.json
@@ -0,0 +1,14 @@
+{
+  "startup-idea-analyser": {
+    "title": "Startup Idea analyser",
+    "tags": [
+      "Intermediate",
+      "Python",
+      "CrewAI",
+      "Functions",
+      "Mailbox",
+      "Use Cases"
+    ],
+    "timestamp": true
+  }
+}