Design overhaul: teal theme, dark mode, and layout fixes

.gitignore

@@ -33,3 +33,4 @@ yarn-debug.log*
 yarn-error.log*
 updated_url_mappings.json
 .claude/
+screenshots/

docusaurus.config.ts

@@ -30,6 +30,7 @@ const config: Config = {
 
   onBrokenLinks: "throw",
   markdown: {
+    mermaid: true,
     hooks: {
       onBrokenMarkdownLinks: "throw",
     },
@@ -96,7 +97,7 @@ const config: Config = {
     ],
   ],
 
-  themes: ["docusaurus-theme-openapi-docs"],
+  themes: ["docusaurus-theme-openapi-docs", "@docusaurus/theme-mermaid"],
   stylesheets: [
     "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
   ],
@@ -162,6 +163,7 @@ const config: Config = {
       logo: {
         alt: "TagoIO Logo",
         src: "img/tagoio-official-logo.svg",
+        srcDark: "img/tagoio-official-logo-white.svg",
         width: 110,
         height: 26,
       },
@@ -212,6 +214,24 @@ const config: Config = {
     prism: {
       theme: prismThemes.nightOwlLight,
       darkTheme: prismThemes.nightOwl,
+      additionalLanguages: ["abnf", "yaml"],
+    },
+    mermaid: {
+      theme: {
+        light: "base",
+        dark: "dark",
+      },
+      options: {
+        themeVariables: {
+          primaryColor: "#2cb1bc",
+          primaryTextColor: "#ffffff",
+          primaryBorderColor: "transparent",
+          lineColor: "#707070",
+          edgeLabelBackground: "transparent",
+          clusterBkg: "transparent",
+          clusterBorder: "#2a2a2a",
+        },
+      },
     },
   } satisfies Preset.ThemeConfig,
 };

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@docusaurus/core": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
+    "@docusaurus/theme-mermaid": "^3.9.2",
     "@mdx-js/react": "^3.1.0",
     "clsx": "^2.0.0",
     "docusaurus-plugin-openapi-docs": "^4.7.1",

src/components/HomepageFeatures/index.tsx

@@ -1,7 +1,6 @@
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import Heading from "@theme/Heading";
-import clsx from "clsx";
 import type { ReactNode } from "react";
 import styles from "./styles.module.css";
 
@@ -14,7 +13,7 @@ type FeatureItem = {
 
 function Feature({ title, imgSrc, href, description }: FeatureItem) {
   return (
-    <div className={clsx("col col--3", styles.featureCol)}>
+    <div className={styles.featureCol}>
       <Link to={href} className={styles.featureLink}>
         <div className={styles.featureCard}>
           <div className="text--center">
@@ -103,12 +102,10 @@ export default function HomepageFeatures(): ReactNode {
 
   return (
     <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props) => (
-            <Feature key={props.title} {...props} />
-          ))}
-        </div>
+      <div className={styles.featureRow}>
+        {FeatureList.map((props) => (
+          <Feature key={props.title} {...props} />
+        ))}
       </div>
     </section>
   );

src/components/HomepageFeatures/styles.module.css

@@ -24,14 +24,14 @@
   justify-content: center;
   background: linear-gradient(
     135deg,
-    rgba(0, 123, 255, 0.08) 0%,
-    rgba(0, 123, 255, 0.04) 100%
+    rgba(44, 177, 188, 0.08) 0%,
+    rgba(44, 177, 188, 0.04) 100%
   );
   border-radius: 16px;
   margin-bottom: 1.5rem;
   position: relative;
   overflow: hidden;
-  border: 1px solid rgba(0, 123, 255, 0.1);
+  border: 1px solid rgba(44, 177, 188, 0.1);
 }
 
 /* Light mode specific stronger shine effect */
@@ -45,9 +45,9 @@
   background: linear-gradient(
     135deg,
     transparent 0%,
-    rgba(0, 123, 255, 0.2) 30%,
+    rgba(44, 177, 188, 0.2) 30%,
     rgba(255, 255, 255, 0.3) 50%,
-    rgba(0, 123, 255, 0.15) 70%,
+    rgba(44, 177, 188, 0.15) 70%,
     transparent 100%
   );
   opacity: 0;
@@ -64,9 +64,20 @@ html[data-theme="dark"] .featureCard > :first-child::before {
   );
 }
 
+/* Row layout for feature cards */
+.featureRow {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
 /* Column layout for feature cards */
 .featureCol {
   display: flex;
+  flex: 0 0 20%;
 }
 
 /* Remove link styling while maintaining block behavior */
@@ -78,7 +89,7 @@ html[data-theme="dark"] .featureCard > :first-child::before {
 
 /* Card styling with stronger light mode effects */
 .featureCard {
-  background: var(--ifm-background-surface-color);
+  background: var(--surface-elevated);
   border-radius: 16px;
   padding: 2.5rem 2rem;
   margin: 1rem;
@@ -94,20 +105,39 @@ html[data-theme="dark"] .featureCard > :first-child::before {
   height: 100%;
 }
 
-/* Mobile responsive adjustments */
-@media (max-width: 768px) {
+/* Tablet responsive adjustments */
+@media (max-width: 1100px) {
+  .featureCol {
+    flex: 0 0 33.333%;
+    max-width: 33.333%;
+    margin-bottom: 1rem;
+  }
+}
+
+@media (max-width: 768px) and (min-width: 577px) {
+  .featureCol {
+    flex: 0 0 50%;
+    max-width: 50%;
+    margin-bottom: 1rem;
+  }
+}
+
+@media (max-width: 576px) {
   .featureCard {
     margin: 0.5rem;
     padding: 1.5rem;
   }
   .featureCol {
+    flex: 0 0 100%;
+    max-width: 100%;
     margin-bottom: 1rem;
   }
 }
 
 /* Dark theme specific adjustments */
 html[data-theme="dark"] .featureCard {
-  border-color: rgba(255, 255, 255, 0.06);
+  background: var(--surface-elevated);
+  border-color: #363749;
   box-shadow:
     0 2px 20px rgba(0, 0, 0, 0.3),
     0 1px 3px rgba(0, 0, 0, 0.4);
@@ -118,7 +148,7 @@ html[data-theme="dark"] .featureCard {
   box-shadow:
     0 12px 40px rgba(0, 0, 0, 0.16),
     0 8px 24px rgba(0, 0, 0, 0.12);
-  border-color: rgba(0, 123, 255, 0.25);
+  border-color: rgba(44, 177, 188, 0.25);
 }
 
 /* More visible icon shadows on hover */
@@ -135,8 +165,8 @@ html[data-theme="dark"] .featureCard {
 html[data-theme="dark"] .featureCard > :first-child {
   background: linear-gradient(
     135deg,
-    rgba(0, 123, 255, 0.08) 0%,
-    rgba(0, 123, 255, 0.03) 100%
+    rgba(44, 177, 188, 0.08) 0%,
+    rgba(44, 177, 188, 0.03) 100%
   );
 }
 
@@ -147,7 +177,7 @@ html[data-theme="dark"] .featureImg {
 
 /* Dark theme hover effects - enhanced lighting only */
 html[data-theme="dark"] .featureCard:hover {
-  border-color: rgba(0, 123, 255, 0.3);
+  border-color: rgba(44, 177, 188, 0.3);
   box-shadow:
     0 8px 32px rgba(0, 0, 0, 0.4),
     0 4px 16px rgba(0, 0, 0, 0.3);
@@ -170,7 +200,7 @@ html[data-theme="dark"] .featureCard:hover .featureImg {
 
 /* Title color change on hover */
 .featureCard:hover h3 {
-  color: #007bff;
+  color: #2cb1bc;
 }
 
 /* Card description text styling */