feat: ui changes

website/docusaurus.config.js

@@ -9,13 +9,13 @@ const { remarkCodeHike } = require('@code-hike/mdx');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'api-ts home',
+  title: 'api-ts',
   tagline: 'Type- and runtime- safe TypeScript APIs',
   url: 'https://bitgo.github.io/api-ts/',
   baseUrl: '/api-ts/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.ico',
+  favicon: 'img/Shield_Logo_Blue-Dark.svg',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
@@ -64,15 +64,21 @@ const config = {
       navbar: {
         title: 'api-ts',
         logo: {
-          alt: 'api-ts Logo',
-          src: 'img/logo.svg',
+          alt: 'BitGo Logo',
+          src: 'img/Shield_Logo_Blue-Dark.svg',
+          srcDark: 'img/Shield_Logo_Blue-Dark.svg',
         },
         items: [
           {
             type: 'doc',
             docId: 'intro',
             position: 'left',
-            label: 'Tutorial',
+            label: 'Documentation',
+          },
+          {
+            to: '/docs/how-to-guides/parsing.json-strings',
+            label: 'How-to Guides',
+            position: 'left',
           },
           {
             href: 'https://github.com/BitGo/api-ts',
@@ -88,9 +94,17 @@ const config = {
             title: 'Docs',
             items: [
               {
-                label: 'Tutorial',
+                label: 'Documentation',
                 to: '/docs/intro',
               },
+              {
+                label: 'Tutorials',
+                to: '/docs/tutorial-basics/render-an-open-api-spec',
+              },
+              {
+                label: 'How-to Guides',
+                to: '/docs/how-to-guides/parsing.json-strings',
+              },
             ],
           },
           {
@@ -100,6 +114,10 @@ const config = {
                 label: 'Stack Overflow',
                 href: 'https://stackoverflow.com/questions/tagged/api-ts',
               },
+              {
+                label: 'Twitter',
+                href: 'https://twitter.com/BitGo',
+              },
             ],
           },
           {
@@ -109,15 +127,24 @@ const config = {
                 label: 'GitHub',
                 href: 'https://github.com/BitGo/api-ts',
               },
+              {
+                label: 'BitGo',
+                href: 'https://www.bitgo.com/',
+              },
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} BitGo, Inc.`,
+        copyright: `Copyright © ${new Date().getFullYear()} BitGo, Inc. All rights reserved.`,
       },
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
       },
+      colorMode: {
+        defaultMode: 'light',
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
+      },
     }),
 };
 

website/src/components/HomepageFeatures/index.js

@@ -1,55 +1,68 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import { useColorMode } from '@docusaurus/theme-common';
 
-const FeatureList = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and used to
-        get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go ahead
-        and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can be
-        extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
+function Feature({ lightSvg, darkSvg, title, description }) {
+  const { colorMode } = useColorMode();
+  const isDarkTheme = colorMode === 'dark';
+  const Svg = isDarkTheme ? darkSvg : lightSvg;
 
-function Feature({ Svg, title, description }) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
+    <div className={clsx('col col--4')} style={{ marginBottom: '2rem' }}>
+      <div className={styles.featureCard}>
+        <div className="text--center">
+          <Svg className={styles.featureSvg} role="img" />
+        </div>
+        <div className="text--center padding-horiz--md">
+          <h3 className={styles.featureTitle}>{title}</h3>
+          <div className={styles.featureDescription}>{description}</div>
+        </div>
       </div>
     </div>
   );
 }
 
 export default function HomepageFeatures() {
+  const FeatureList = [
+    {
+      title: 'Client',
+      lightSvg: require('@site/static/img/ui-access-m-light-blue.svg').default,
+      darkSvg: require('@site/static/img/ui-access-m-dark-blue.svg').default,
+      description: (
+        <>
+          <div>Type-safe API requests with compile-time validation</div>
+          <div>Automatic response decoding with proper error handling</div>
+          <div>Seamless integration with Express and Superagent</div>
+        </>
+      ),
+    },
+    {
+      title: 'API definition',
+      lightSvg: require('@site/static/img/api-m-light-blue.svg').default,
+      darkSvg: require('@site/static/img/api-m-dark-blue.svg').default,
+      description: (
+        <>
+          <div>io-ts powered type definitions with runtime validation</div>
+          <div>OpenAPI specification generation from TypeScript</div>
+          <div>Shared contract between client and server</div>
+        </>
+      ),
+    },
+    {
+      title: 'Server',
+      lightSvg: require('@site/static/img/view-rewards-m-light-blue.svg').default,
+      darkSvg: require('@site/static/img/view-rewards-m-dark-blue.svg').default,
+      description: (
+        <>
+          <div>End-to-end type safety from request to response</div>
+          <div>Middleware chaining with preserved type information</div>
+          <div>Express-compatible with enhanced error handling</div>
+        </>
+      ),
+    },
+  ];
+
   return (
     <section className={styles.features}>
       <div className="container">

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

@@ -1,11 +1,67 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
+  padding: 4rem 0;
   width: 100%;
+  background-color: var(--bitgo-gray-100);
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 150px;
+  width: 150px;
+}
+
+.featureCard {
+  height: 100%;
+  padding: 2rem;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 12px rgba(14, 15, 15, 0.05);
+  transition: all 0.3s ease;
+}
+
+.featureCard:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(14, 15, 15, 0.1);
+}
+
+.featureTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--bitgo-gray-900);
+}
+
+.featureDescription {
+  color: var(--bitgo-gray-700);
+  line-height: 1.6;
+}
+
+.featureDescription div {
+  margin-bottom: 0.75rem;
+  display: flex;
+  align-items: flex-start;
+}
+
+.featureDescription div::before {
+  content: '•';
+  color: var(--ifm-color-primary);
+  font-weight: bold;
+  margin-right: 0.5rem;
+}
+
+[data-theme='dark'] .features {
+  background-color: #1e1e1e;
+}
+
+[data-theme='dark'] .featureCard {
+  background-color: #2d2d2d;
+}
+
+[data-theme='dark'] .featureTitle {
+  color: #ffffff;
+}
+
+[data-theme='dark'] .featureDescription {
+  color: #e0e0e0;
 }