update features list on homepage

Author: matas-bitbybit-dev

docs/docusaurus.config.ts

@@ -86,8 +86,8 @@ const config: Config = {
                 },
                 { to: "/learn/code/intro", label: "Code", position: "left" },
                 { to: "/learn/3d-bits/intro", label: "3D Bits", position: "left" },
-
                 { to: "/blog", label: "Blog", position: "left" },
+                { to: "https://bitbybit.dev", label: "Home", position: "left" },
                 {
                     href: "https://bitbybit.dev/auth/pick-plan",
                     label: "Support the Mission",

docs/src/components/HomepageFeatures/index.tsx

@@ -1,22 +1,100 @@
-import type {ReactNode} from "react";
+import React, { type ReactNode } from "react";
 import clsx from "clsx";
-import Heading from "@theme/Heading";
+import Link from '@docusaurus/Link';
 import styles from "./styles.module.css";
 
 type FeatureItem = {
-  title: string;
-  Svg: React.ComponentType<React.ComponentProps<"svg">>;
-  description: ReactNode;
+    title: string;
+    link: string;
+    description: ReactNode;
 };
 
+const FeatureList: FeatureItem[] = [
+    {
+        title: "Getting Started Tutorials",
+        link: "/learn/getting-started/overview",
+        description: (
+            <>
+                Dive into our step-by-step tutorials to quickly learn the fundamentals
+                and get your 3D projects up and running with Bitbybit.dev.
+            </>
+        ),
+    },
+    {
+        title: "3D Bits app for Shopify",
+        link: "/learn/3d-bits/intro",
+        description: (
+            <>
+                Discover how our "3D Bits" Shopify app can help you integrate stunning
+                3D models and AR experiences directly into your e-commerce store.
+            </>
+        ),
+    },
+    {
+        title: "Our Blog",
+        link: "/blog",
+        description: (
+            <>
+                Stay updated with the latest news, feature releases, tutorials, and
+                community showcases from the Bitbybit.dev team and users.
+            </>
+        ),
+    },
+    {
+        title: "Bitbybit GitHub",
+        link: "/learn/github/",
+        description: (
+            <>
+                This page serves as a guide to understanding Bitbybit GitHub monorepo, its contents, and how it all fits together to power the Bitbybit platform.
+            </>
+        ),
+    }, {
+        title: "Integrate with Three.JS, Babylon.JS and more",
+        link: "/learn/npm-packages/intro",
+        description: (
+            <>
+               Integrating with Three.JS, Babylon.JS or other web technologies? Our npm packages provide seamless integration with popular 3D libraries, enabling you to create rich, interactive 3D experiences on the web.
+            </>
+        ),
+    },{
+        title: "Run Visual Scripts On Your Website",
+        link: "/learn/runners/intro",
+        description: (
+            <>
+               Use our runners to execute visual scripts on your website. This allows you to create dynamic, interactive 3D experiences without needing extensive coding knowledge.
+            </>
+        ),
+    },
+];
 
-export default function HomepageFeatures(): ReactNode {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
+function Feature({ title, description, link }: FeatureItem) {
+    return (
+        <div className={clsx("col col--4", styles.feature)}>
+            <div className={clsx("text--center padding-horiz--md", styles.featureContent)}>
+                <Link to={link} className={styles.featureLinkWrapper}>
+                    <h3 className={styles.featureTitle}>{title}</h3>
+                </Link>
+                <p className={styles.featureDescription}>{description}</p>
+                <Link
+                    className={clsx("button button--secondary button--sm", styles.featureButton)}
+                    to={link}>
+                    Learn More
+                </Link>
+            </div>
         </div>
-      </div>
-    </section>
-  );
+    );
 }
+
+export default function HomepageFeatures(): ReactNode {
+    return (
+        <section className={styles.features}>
+            <div className="container">
+                <div className="row">
+                    {FeatureList.map((props, idx) => (
+                        <Feature key={idx} {...props} />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

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

@@ -9,3 +9,49 @@
   height: 200px;
   width: 200px;
 }
+
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.feature {
+  margin-bottom: 2rem;
+}
+
+.featureContent {
+  padding: 1.5rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-card-border-radius, 8px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ifm-card-background-color);
+}
+
+.featureLinkWrapper {
+  text-decoration: none;
+  color: inherit;
+}
+
+.featureLinkWrapper:hover .featureTitle {
+  color: var(--ifm-color-primary);
+}
+
+.featureTitle {
+  margin-bottom: 0.75rem;
+  font-size: 1.5rem;
+}
+
+.featureDescription {
+  margin-bottom: 1.5rem;
+  flex-grow: 1;
+}
+
+.featureButton {
+  margin-top: auto;
+  text-decoration: none !important;
+}