style(docs): Update fonts and reorganize CSS structure (#3682)

docs/docs/reference/typescript-api/cache/self-refreshing-cache.md

@@ -0,0 +1,156 @@
+---
+title: "SelfRefreshingCache"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## SelfRefreshingCache
+
+<GenerationInfo sourceFile="packages/core/src/common/self-refreshing-cache.ts" sourceLine="10" packageName="@vendure/core" />
+
+A cache which automatically refreshes itself if the value is found to be stale.
+
+```ts title="Signature"
+interface SelfRefreshingCache<V, RefreshArgs extends any[] = []> {
+    value(...refreshArgs: RefreshArgs | [undefined] | []): Promise<V>;
+    memoize<Args extends any[], R>(
+        args: Args,
+        refreshArgs: RefreshArgs,
+        fn: (value: V, ...args: Args) => R,
+    ): Promise<R>;
+    refresh(...args: RefreshArgs): Promise<V>;
+}
+```
+
+<div className="members-wrapper">
+
+### value
+
+<MemberInfo kind="method" type={`(refreshArgs: RefreshArgs | [undefined] | []) => Promise&#60;V&#62;`}   />
+
+The current value of the cache. If the value is stale, the data will be refreshed and then
+the fresh value will be returned.
+### memoize
+
+<MemberInfo kind="method" type={`(args: Args, refreshArgs: RefreshArgs, fn: (value: V, ...args: Args) =&#62; R) => Promise&#60;R&#62;`}   />
+
+Allows a memoized function to be defined. For the given arguments, the `fn` function will
+be invoked only once and its output cached and returned.
+The results cache is cleared along with the rest of the cache according to the configured
+`ttl` value.
+### refresh
+
+<MemberInfo kind="method" type={`(args: RefreshArgs) => Promise&#60;V&#62;`}   />
+
+Force a refresh of the value, e.g. when it is known that the value has changed such as after
+an update operation to the source data in the database.
+
+
+</div>
+
+
+## SelfRefreshingCacheConfig
+
+<GenerationInfo sourceFile="packages/core/src/common/self-refreshing-cache.ts" sourceLine="46" packageName="@vendure/core" />
+
+Configuration options for creating a <a href='/reference/typescript-api/cache/self-refreshing-cache#selfrefreshingcache'>SelfRefreshingCache</a>.
+
+```ts title="Signature"
+interface SelfRefreshingCacheConfig<V, RefreshArgs extends any[]> {
+    name: string;
+    ttl: number;
+    refresh: {
+        fn: (...args: RefreshArgs) => Promise<V>;
+        /**
+         * Default arguments, passed to refresh function
+         */
+        defaultArgs: RefreshArgs;
+    };
+    getTimeFn?: () => number;
+}
+```
+
+<div className="members-wrapper">
+
+### name
+
+<MemberInfo kind="property" type={`string`}   />
+
+The name of the cache, used for logging purposes.
+e.g. `'MyService.cachedValue'`.
+### ttl
+
+<MemberInfo kind="property" type={`number`}   />
+
+The time-to-live (ttl) in milliseconds for the cache. After this time, the value will be considered stale
+and will be refreshed the next time it is accessed.
+### refresh
+
+<MemberInfo kind="property" type={`{         fn: (...args: RefreshArgs) =&#62; Promise&#60;V&#62;;         /**          * Default arguments, passed to refresh function          */         defaultArgs: RefreshArgs;     }`}   />
+
+The function which is used to refresh the value of the cache.
+This function should return a Promise which resolves to the new value.
+### getTimeFn
+
+<MemberInfo kind="property" type={`() =&#62; number`}   />
+
+Intended for unit testing the SelfRefreshingCache only.
+By default uses `() => new Date().getTime()`
+
+
+</div>
+
+
+## createSelfRefreshingCache
+
+<GenerationInfo sourceFile="packages/core/src/common/self-refreshing-cache.ts" sourceLine="114" packageName="@vendure/core" />
+
+Creates a <a href='/reference/typescript-api/cache/self-refreshing-cache#selfrefreshingcache'>SelfRefreshingCache</a> object, which is used to cache a single frequently-accessed value. In this type
+of cache, the function used to populate the value (`refreshFn`) is defined during the creation of the cache, and
+it is immediately used to populate the initial value.
+
+From there, when the `.value` property is accessed, it will return a value from the cache, and if the
+value has expired, it will automatically run the `refreshFn` to update the value and then return the
+fresh value.
+
+*Example*
+
+```ts title="Example of creating a SelfRefreshingCache"
+import { createSelfRefreshingCache } from '@vendure/core';
+
+@Injectable()
+export class PublicChannelService {
+  private publicChannel: SelfRefreshingCache<Channel, [RequestContext]>;
+
+  async init() {
+    this.publicChannel = await createSelfRefreshingCache<Channel, [RequestContext]>({
+     name: 'PublicChannelService.publicChannel',
+     ttl: 1000 * 60 * 60, // 1 hour
+     refresh: {
+       fn: async (ctx: RequestContext) => {
+        return this.channelService.getPublicChannel(ctx);
+      },
+     defaultArgs: [RequestContext.empty()],
+    },
+  });
+}
+```
+
+```ts title="Signature"
+function createSelfRefreshingCache<V, RefreshArgs extends any[]>(config: SelfRefreshingCacheConfig<V, RefreshArgs>, refreshArgs?: RefreshArgs): Promise<SelfRefreshingCache<V, RefreshArgs>>
+```
+Parameters
+
+### config
+
+<MemberInfo kind="parameter" type={`<a href='/reference/typescript-api/cache/self-refreshing-cache#selfrefreshingcacheconfig'>SelfRefreshingCacheConfig</a>&#60;V, RefreshArgs&#62;`} />
+
+### refreshArgs
+
+<MemberInfo kind="parameter" type={`RefreshArgs`} />
+

docs/docs/reference/typescript-api/job-queue/subscribable-job.md

@@ -40,7 +40,7 @@ class SubscribableJob<T extends JobData<T> = any> extends Job<T> {
 <MemberInfo kind="method" type={`(options?: <a href='/reference/typescript-api/job-queue/types#jobupdateoptions'>JobUpdateOptions</a>) => Observable&#60;<a href='/reference/typescript-api/job-queue/types#jobupdate'>JobUpdate</a>&#60;T&#62;&#62;`}   />
 
 Returns an Observable stream of updates to the Job. Works by polling the current JobQueueStrategy's `findOne()` method
-to obtain updates. If this updates are not subscribed to, then no polling occurs.
+to obtain updates. If the updates are not subscribed to, then no polling occurs.
 
 Polling interval, timeout and other options may be configured with an options arguments <a href='/reference/typescript-api/job-queue/types#jobupdateoptions'>JobUpdateOptions</a>.
 

docs/docs/reference/typescript-api/service-helpers/translatable-saver.md

@@ -11,7 +11,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## TranslatableSaver
 
-<GenerationInfo sourceFile="packages/core/src/service/helpers/translatable-saver/translatable-saver.ts" sourceLine="57" packageName="@vendure/core" />
+<GenerationInfo sourceFile="packages/core/src/service/helpers/translatable-saver/translatable-saver.ts" sourceLine="55" packageName="@vendure/core" />
 
 A helper which contains methods for creating and updating entities which implement the <a href='/reference/typescript-api/entities/interfaces#translatable'>Translatable</a> interface.
 

docs/docusaurus.config.js

@@ -52,9 +52,6 @@ const config = {
                 theme: {
                     customCss: [
                         require.resolve('./src/css/custom.css'),
-                        require.resolve('./src/css/layout.css'),
-                        require.resolve('./src/css/overrides.css'),
-                        require.resolve('./src/css/code-blocks.css'),
                     ],
                 },
             }),

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

@@ -4,6 +4,7 @@
     gap: 4px 12px;
     margin-top: -12px;
     margin-bottom: 22px;
+    font-family: var(--ifm-font-family-monospace);
 }
 
 :root {
@@ -20,7 +21,7 @@
     border-radius: var(--ifm-badge-border-radius);
     background-color: var(--color-generation-label-bg);
     font-size: 75%;
-    font-weight: var(--ifm-font-weight-bold);
+    font-weight: var(--ifm-font-weight-semibold);
     line-height: 1;
     padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
 }

docs/src/css/code-blocks.css

@@ -1,22 +0,0 @@
-/* Styling of GraphQL code blocks */
-.graphql-code-block {
-    background-color: var(--ifm-pre-background);
-    border-radius: var(--ifm-pre-border-radius);
-    padding: var(--ifm-pre-padding);
-    color: var(--ifm-pre-color);
-    font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) var(--ifm-font-family-monospace);
-}
-
-.graphql-code-line {
-}
-
-.graphql-code-line:not(.top-level) {
-    margin-left: 24px;
-}
-.graphql-code-line.comment {
-    color: var(--color-graphql-comment);
-}
-.graphql-code-identifier {
-    color: var(--color-graphql-identifier);
-    margin-right: 6px;
-}

docs/src/css/components.css

@@ -0,0 +1,138 @@
+/**
+ * Component styles
+ * Styles for specific UI components and elements
+ */
+
+:root {
+    --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg>');
+
+    --ifm-code-padding-horizontal: 6px;
+    --ifm-code-font-size: 90%;
+}
+
+/* Markdown content */
+.markdown img {
+    border-radius: 4px;
+}
+
+/* Members documentation */
+.members-wrapper {
+    border-left: 1px solid var(--color-members-border);
+    padding-left: 32px;
+}
+
+.members-wrapper > h3 {
+    margin-top: 42px;
+}
+
+/* Sidebar */
+.sidebar-section-header {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 12px;
+    opacity: 0.8;
+    color: #afafaf;
+    padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+}
+
+.sidebar-section-divider {
+    border-bottom: 1px solid var(--ifm-font-color-base);
+    opacity: 0.2;
+    margin: 6px 12px;
+}
+
+/* Code blocks */
+
+.prism-code {
+    line-height: 1.8;
+}
+
+.limited-height-code-block pre.prism-code {
+    max-height: 800px;
+}
+
+/* GraphQL code blocks */
+.graphql-code-block {
+    background-color: var(--ifm-pre-background);
+    border-radius: var(--ifm-pre-border-radius);
+    padding: var(--ifm-pre-padding);
+    color: var(--ifm-pre-color);
+    font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) var(--ifm-font-family-monospace);
+}
+
+.graphql-code-line:not(.top-level) {
+    margin-left: 24px;
+}
+
+.graphql-code-line.comment {
+    color: var(--color-graphql-comment);
+}
+
+.graphql-code-identifier {
+    color: var(--color-graphql-identifier);
+    margin-right: 6px;
+}
+
+/* Menu and navigation overrides */
+.menu__link--sublist-caret:after {
+    background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
+    opacity: 0.6;
+}
+
+.menu__link--sublist-caret:hover:after {
+    opacity: 1;
+}
+
+.theme-doc-sidebar-item-category-level-1 {
+    font-size: 15px;
+}
+
+.theme-doc-sidebar-item-category-level-2 {
+    font-size: 14px;
+}
+
+.theme-doc-sidebar-item-link-level-3,
+.theme-doc-sidebar-item-link-level-4,
+.theme-doc-sidebar-item-link-level-5 {
+    font-size: 13px;
+    word-break: break-all;
+}
+
+.menu__caret:before {
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg>');
+    opacity: 0.6;
+}
+
+/* Navbar */
+.navbar-sidebar {
+    background-color: var(--ifm-background-color);
+}
+
+.navbar {
+    background-color: var(--navbar-background-color-mobile);
+    border-bottom: 1px solid var(--border-color);
+}
+
+/* Hero section */
+.hero--primary {
+    --ifm-hero-background-color: transparent;
+    --ifm-hero-text-color: var(--ifm-font-color-base);
+}
+
+/* Search button */
+button.DocSearch-Button {
+    border-radius: 6px;
+    width: 250px;
+    border: 1px solid var(--color-docsearch-border);
+}
+
+/* CLI admonition */
+.theme-admonition-cli {
+    background-color: #2b2b2b;
+    color: #fff;
+}
+
+.theme-admonition-cli a:link,
+.theme-admonition-cli a:visited {
+    color: #fff;
+}

docs/src/css/custom.css

@@ -4,105 +4,8 @@
  * work well for content-centric websites.
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
-
-:root {
-  --ifm-font-family-base: "Inter"
-}
-
-/* You can override the default Infima variables here. */
-:root {
-    /* Colors */
-    --ifm-color-primary: #17c1ff;
-    --ifm-color-primary-dark: #008ece;
-    --ifm-color-primary-darker: #0072a7;
-    --ifm-color-primary-darkest: #084f72;
-    --ifm-color-primary-light: #78daff;
-    --ifm-color-primary-lighter: #b8eaff;
-    --ifm-color-primary-lightest: #dff3ff;
-    --ifm-navbar-background-color: #ffffff11;
-    --navbar-background-color-mobile: #ffffffee;
-    --ifm-heading-color: #000212;
-    --ifm-color-content: var(--ifm-color-emphasis-800);
-    --ifm-code-font-size: 95%;
-    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-    --color-graphql-comment: #47954d;
-    --color-graphql-identifier: rgb(227, 17, 108);
-    --color-members-border: var(--ifm-color-secondary);
-    --docusaurus-highlighted-code-line-bg: #e0f1ff;
-    --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg>');
-    --body-background: white;
-    --ifm-footer-background-color: #edf2f5;
-    --color-docsearch-border: #b7b7c3;
-
-    /* Fonts */
-    --ifm-heading-font-family: 'Plus Jakarta Sans', var(--ifm-font-family-base);
-    --ifm-heading-font-weight: 700;
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-html[data-theme='dark']{
-    --ifm-background-color: #000212;
-    --ifm-heading-color: #ffffff;
-    --ifm-navbar-background-color: transparent;
-    --navbar-background-color-mobile: transparent;
-    --ifm-card-background-color: transparent;
-    --ifm-color-content: hsla(0,0%,100%,.7);
-    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-    --color-graphql-comment: #6ea372;
-
-    --color-graphql-identifier: rgb(255, 121, 198);
-    --color-members-border: #333;
-    --docusaurus-highlighted-code-line-bg: rgba(15, 71, 117, 0.5);
-    --body-background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(79, 208, 255, 0.3), transparent);
-    --ifm-footer-background-color: var(--ifm-background-color);
-    --color-docsearch-border: #232347;
-    --ifm-footer-title-color: #ffffff;
-}
-
-html[data-theme='light'] {
-    --ifm-background-color: #ffffff;
-}
-
-
-h1, h2, h3, h4, h5, h6 {
-    letter-spacing: -0.05rem;
-}
-
-.markdown h2:not(:first-of-type) {
-    --ifm-h2-vertical-rhythm-top: 5;
-}
-
-.markdown img {
-    border-radius: 4px;
-}
-
-
-.members-wrapper {
-    border-left: 1px solid var(--color-members-border);
-    padding-left: 32px;
-}
-
-.members-wrapper > h3 {
-    margin-top: 42px;
-}
-
-.sidebar-section-header {
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 12px;
-    opacity: 0.8;
-    color: #afafaf;
-    padding: var(--ifm-menu-link-padding-vertical)
-         var(--ifm-menu-link-padding-horizontal);
-}
-
-.sidebar-section-divider {
-    border-bottom: 1px solid var(--ifm-font-color-base);
-    opacity: 0.2;
-    margin: 6px 12px;
-}
-
-.limited-height-code-block pre.prism-code {
-    max-height: 800px;
-}
+/* Import organized CSS modules */
+@import './typography.css';
+@import './theme.css';
+@import './layout.css';
+@import './components.css';

docs/src/css/layout.css

@@ -1,3 +1,8 @@
+/**
+ * Layout styles
+ * Page layout and structural styles
+ */
+
 .navbar__inner {
     margin-left: auto;
     margin-right: auto;
@@ -10,3 +15,9 @@
     max-width: 1419px;
     width: 100%;
 }
+
+@media screen and (min-width: 996px) {
+    .docs-wrapper article:not(.col) {
+        margin-left: 32px;
+    }
+}

docs/src/css/overrides.css

@@ -1,68 +0,0 @@
-body {
-    background: var(--body-background);
-    background-repeat: no-repeat;
-    background-position: top;
-}
-
-.menu__link--sublist-caret:after {
-    background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
-    opacity: 0.6;
-}
-
-.menu__link--sublist-caret:hover:after {
-    opacity: 1;
-}
-
-.theme-doc-sidebar-item-category-level-1 {
-    font-size: 15px;
-}
-.theme-doc-sidebar-item-category-level-2 {
-    font-size: 14px;
-}
-.theme-doc-sidebar-item-link-level-3, .theme-doc-sidebar-item-link-level-4, .theme-doc-sidebar-item-link-level-5 {
-    font-size: 13px;
-    word-break: break-all;
-}
-
-.menu__caret:before {
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg>');
-    opacity: 0.6;
-}
-
-.navbar-sidebar {
-    background-color: var(--ifm-background-color);
-}
-.navbar {
-    background-color: var(--navbar-background-color-mobile);
-}
-
-@media screen and (min-width: 996px) {
-    .docs-wrapper article:not(.col) {
-        margin-left: 32px;
-    }
-    .navbar {
-        backdrop-filter: blur(20px);
-        background-color: var(--ifm-navbar-background-color);
-    }
-}
-
-
-.hero--primary {
-    --ifm-hero-background-color: transparent;
-    --ifm-hero-text-color: var(--ifm-font-color-base);
-}
-
-button.DocSearch-Button {
-    border-radius: 6px;
-    width: 250px;
-    border: 1px solid var(--color-docsearch-border);
-}
-
-.theme-admonition-cli {
-    background-color: #2b2b2b;
-    color: #fff;
-}
-
-.theme-admonition-cli a:link, .theme-admonition-cli a:visited {
-    color: #fff;
-}

docs/src/css/theme.css

@@ -0,0 +1,64 @@
+/**
+ * Theme and color styles
+ * Light and dark mode color schemes
+ */
+
+:root {
+    /* Primary colors */
+    --ifm-color-primary: #17c1ff;
+    --ifm-color-primary-dark: #008ece;
+    --ifm-color-primary-darker: #0072a7;
+    --ifm-color-primary-darkest: #084f72;
+    --ifm-color-primary-light: #78daff;
+    --ifm-color-primary-lighter: #b8eaff;
+    --ifm-color-primary-lightest: #dff3ff;
+
+    /* Background colors */
+    --ifm-navbar-background-color: #ffffff11;
+    --navbar-background-color-mobile: #ffffffee;
+    --body-background: white;
+    --ifm-footer-background-color: #edf2f5;
+
+    /* Text colors */
+    --ifm-heading-color: #000212;
+    --ifm-color-content: var(--ifm-color-emphasis-800);
+
+    /* Code colors */
+    --docusaurus-highlighted-code-line-bg: #e0f1ff;
+    --color-graphql-comment: #47954d;
+    --color-graphql-identifier: rgb(227, 17, 108);
+
+    /* UI colors */
+    --color-members-border: var(--ifm-color-secondary);
+    --color-docsearch-border: #b7b7c3;
+    --border-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode theme */
+html[data-theme='dark'] {
+    --ifm-background-color: #09090b;
+    --ifm-heading-color: oklch(98.5% 0 0);
+    --ifm-navbar-background-color: transparent;
+    --border-color: oklch(26.9% 0 0);
+    --navbar-background-color-mobile: var(--ifm-background-color);
+    --ifm-card-background-color: transparent;
+    --ifm-color-content: oklch(91.97% 0.004 286.32);
+    --ifm-toc-border-color: var(--border-color);
+
+    /* Code colors in dark mode */
+    --docusaurus-highlighted-code-line-bg: rgba(15, 71, 117, 0.5);
+    --color-graphql-comment: #6ea372;
+    --color-graphql-identifier: rgb(255, 121, 198);
+
+    /* UI colors in dark mode */
+    --color-members-border: #333;
+    --body-background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(79, 208, 255, 0.3), transparent);
+    --ifm-footer-background-color: var(--ifm-background-color);
+    --color-docsearch-border: #232347;
+    --ifm-footer-title-color: #ffffff;
+}
+
+/* Light mode specific */
+html[data-theme='light'] {
+    --ifm-background-color: #ffffff;
+}

docs/src/css/typography.css

@@ -0,0 +1,24 @@
+/**
+ * Typography styles
+ * Font families, sizes, and typography-related styles
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Public+Sans:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');
+
+:root {
+    /* Font families */
+    --ifm-font-family-base: 'Public Sans', 'Inter', system-ui, -apple-system, sans-serif;
+    --ifm-heading-font-family: 'Public Sans', 'Plus Jakarta Sans', var(--ifm-font-family-base);
+    --ifm-heading-font-weight: 700;
+    --ifm-font-family-monospace:
+        'Geist Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+    /* Font sizes */
+    --ifm-code-font-size: 95%;
+
+    --ifm-heading-font-weight: 600;
+}
+
+.markdown h2:not(:first-of-type) {
+    --ifm-h2-vertical-rhythm-top: 5;
+}

docs/src/pages/index.module.css

@@ -42,7 +42,6 @@
 
 .description {
     margin: 1rem 0;
-    font-size: 1.3rem;
     max-width: 600px;
     text-align: center;
     opacity: 0.8;

docs/src/pages/index.tsx

@@ -1,7 +1,7 @@
+import Link from '@docusaurus/Link';
 import Playground from '@site/src/components/Playground';
 import Layout from '@theme/Layout';
 import React from 'react';
-import Link from '@docusaurus/Link';
 
 import styles from './index.module.css';
 
@@ -36,7 +36,10 @@ export default function Home(): JSX.Element {
                 </svg>
                 <h1 className={styles.tagline}>Developer Documentation</h1>
                 <div className={styles.description}>
-                    Build better multichannel commerce experiences faster. Vendure is the headless commerce platform that is built to adapt to your needs. Not the other way round.
+                    Vendure is the headless commerce platform for companies with complex commerce
+                    requirements. Its modular architecture gives you complete control to build exactly what
+                    you need—without compromise—whether scaling B2C, managing B2B workflows, or orchestrating
+                    multi-channel experiences.
                 </div>
             </div>
             <main>

docs/src/theme/DocSidebarItem/Category/styles.module.css

@@ -6,7 +6,6 @@
     width: 20px;
     height: 20px;
     margin-top: 5px;
-    opacity: 0.5;
 }
 .categoryName {
     flex: 1;