feat: navigation, homepage, css config

.vitepress/config.ts

@@ -3,6 +3,8 @@ import type { Config as ThemeConfig } from "vitepress-shopware-docs";
 import baseConfig from "vitepress-shopware-docs/config";
 import ViteRequireContext from '@originjs/vite-plugin-require-context'
 import {resolve} from "path";
+
+import { CssCleanup } from "../node_modules/@shopware-docs/vitepress/src/plugins/cssCleanup";
 import Inspect from "vite-plugin-inspect";
 
 import {createSitemap, storeRedirects} from "../node_modules/@shopware-docs/vitepress/src/helpers";
@@ -80,6 +82,18 @@ export default defineConfigWithTheme<ThemeConfig>({
       ViteRequireContext.default({
         projectBasePath: `${process.cwd()}/src`
       }),
+      CssCleanup({
+        cleanup: [
+          '.vp-doc h2',
+          '.vp-doc hr',
+          '.vp-doc a',
+          '.vp-doc h1 .header-anchor',
+          '.vp-doc h2 .header-anchor',
+          '.vp-doc h3 .header-anchor',
+          '.vp-doc h4 .header-anchor',
+          '.vp-doc h5 .header-anchor',
+        ]
+      }),
     ],
     build: {
       rollupOptions: {

.vitepress/navigation.ts

@@ -3,14 +3,26 @@ import {resourcesMenu} from "../node_modules/vitepress-shopware-docs/src/shopwar
 
 const navigation = buildSidebarNav('./src/', [
     {
-        link: 'https://shopware.design/',
-        text: 'shopware.design',
+        link: '/foundations.html',
+        text: 'Foundations',
     },
     {
-        link: 'https://brand.shopware.com/',
-        text: 'Brand',
+        link: '/product-experience.html',
+        text: 'Product Experience',
+    },
+    {
+        link: '/content-experience.html',
+        text: 'Content Experience',
+    },
+    {
+        link: '/components.html',
+        text: 'Components',
     },
     resourcesMenu,
+    {
+        link: '/what-is-new.html',
+        text: 'What\' New',
+    },
 ], [
     '/', // always have root sidebar
 ]);

src/components/home/SwagExposed.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="SwagExposed">
+    <div>
+      <div class="h-label">Guides</div>
+      <h2 class="h-homepage md:max-w-1/2">Check out these practical guides to help you understand how to design for
+        Shopware</h2>
+      <ul class="SwagExposed_links">
+        <li><a href="#">Shopware Design Principles</a></li>
+        <li><a href="#">Designing extensions for Shopware</a></li>
+        <li><a href="#">Accessibility</a></li>
+        <li><a href="#">Human-AI interactions</a></li>
+      </ul>
+    </div>
+    <div>
+      <div class="h-label">Product Experience</div>
+      <h2 class="h-homepage md:max-w-1/2">We empower you to build the exceptional - Our Design System makes UX and UI
+        easily accessible</h2>
+      <ul class="SwagExposed_links">
+        <li><a href="#">Shopware Design Principles</a></li>
+      </ul>
+    </div>
+    <div class="SwagExposed_subgrid">
+      <div>
+        <div class="h-label">Brand</div>
+        <h2 class="h-homepage">Learn how to apply and adhere to Shopware's visual identity</h2>
+        <ul class="SwagExposed_links">
+          <li><a href="#">Explore our brand</a></li>
+        </ul>
+      </div>
+      <div>
+        <div class="h-label">Content</div>
+        <h2 class="h-homepage">Explore our tone of voice and the mechanics of our grammar and style</h2>
+        <ul class="SwagExposed_links">
+          <li><a href="#">Explore content guideance</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.SwagExposed {
+  @apply grid gap-24;
+  ul.SwagExposed_links {
+    @apply flex p-0 m-0 mt-6 gap-12;
+    list-style-type: none;
+
+    li {
+      @apply p-0 m-0;
+      & + li {
+        @apply mt-0;
+      }
+    }
+  }
+
+  &_subgrid {
+    @apply grid gap-20 md:grid-cols-2;
+  }
+}
+</style>
+
+<script setup lang="ts">
+</script>

src/components/home/SwagLine.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="SwagLine">
+    <ul>
+      <li>Vue</li>
+      <li>150+ Components</li>
+      <li>750+ Icons</li>
+      <li>Accessible</li>
+      <li>Extensible</li>
+      <li>Design Token Support</li>
+      <li>Made for the world</li>
+      <li>Open source</li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss">
+.SwagLine {
+  border: 1px solid var(--sw-c-gray-200);
+  border-width: 1px 0 1px 0;
+
+  ul {
+    @apply flex gap-5 m-0 p-0 py-4 items-center;
+    list-style-type: none;
+  }
+  li {
+    @apply m-0 p-0 flex gap-5 items-center flex-row;
+    font-family: Inter;
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 140%; /* 1.05rem */
+    & + li {
+      @apply mt-0;
+    }
+    &:not(:last-child)::after {
+      @apply flex;
+      content: '・';
+    }
+  }
+}
+</style>

src/components/home/SwagResources.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="SwagResources">
+    <div class="h-label">Resources</div>
+    <h2 class="h-homepage">Browse our resources to get started designing with Shopware.</h2>
+    <div class="SwagResources_grid">
+
+      <a href="/themes.html" class="HomepageCard_item">
+        <span class="HomepageCard_icon">
+          <SwagIcon icon="image" type="solid" />
+        </span>
+        <span class="HomepageCard_heading">
+          Figma libraries
+          <SwagIcon icon="long-arrow-right" type="solid" />
+        </span>
+        <p>Our Figma libraries contains the latest foundations, components, and patterns. You’ll find all of them in our Figma community profile.</p>
+      </a>
+
+      <a href="/themes.html" class="HomepageCard_item --has-double-height">
+        <span class="HomepageCard_icon">
+          <SwagIcon icon="image" type="solid" />
+        </span>
+        <span class="HomepageCard_heading">
+          Fonts
+          <SwagIcon icon="long-arrow-right" type="solid" />
+        </span>
+        <p>To use our admin and storefront libraries you’ll also need the Inter font designed by Rasmus Andersson. Get your copy over at Google fonts.</p>
+      </a>
+
+      <a href="/themes.html" class="HomepageCard_item --has-double-height">
+        <span class="HomepageCard_icon">
+          <SwagIcon icon="image" type="solid" />
+        </span>
+        <span class="HomepageCard_heading">
+          Language and grammar
+          <SwagIcon icon="long-arrow-right" type="solid" />
+        </span>
+        <p>Learn the tone of voice and the common grammar of our software.</p>
+      </a>
+
+      <a href="/themes.html" class="HomepageCard_item">
+        <span class="HomepageCard_icon">
+          <SwagIcon icon="image" type="solid" />
+        </span>
+        <span class="HomepageCard_heading">
+          Logo library
+          <SwagIcon icon="long-arrow-right" type="solid" />
+        </span>
+        <p>Some text about our logo library.</p>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.SwagResources {
+  &_grid {
+    @apply grid gap-7 md:grid-cols-2 lg:grid-cols-3;
+    @media (min-width: 960px) {
+      grid-template-columns: 2fr 1fr 1fr;
+    }
+  }
+
+  .--has-double-height {
+    @media (min-width: 960px) {
+      @apply row-span-2;
+    }
+  }
+}
+</style>
+<script setup lang="ts">
+</script>