Merge pull request #34 from karelmaxa/upgrade-index

Update index page

package.json

@@ -19,7 +19,7 @@
     "glob": "^8.0.1",
     "gray-matter": "^4.0.3",
     "typescript": "^4.8.4",
-    "vitepress": "^1.0.1",
+    "vitepress": "^1.3.1",
     "vue-eslint-parser": "^9.1.0"
   }
 }

site/.vitepress/config.ts

@@ -30,11 +30,11 @@ export default defineConfig({
       {
         text: 'Projects',
         items: [
-          { text: 'Wren:IDM', link: '/projects/wrenidm/' },
           { text: 'Wren:AM', link: '/projects/wrenam/' },
           { text: 'Wren:DS', link: '/projects/wrends/' },
-          { text: 'Wren:IG', link: '/projects/wrenig/' },
           { text: 'Wren:ICF', link: '/projects/wrenicf/' },
+          { text: 'Wren:IDM', link: '/projects/wrenidm/' },
+          { text: 'Wren:IG', link: '/projects/wrenig/' },
         ]
       },
       {
@@ -59,16 +59,6 @@ export default defineConfig({
       },
     ],
     sidebar: {
-      '/projects/wrenidm': [
-        {
-          text: 'Wren:IDM',
-          items: [
-            { text: 'Overview', link: '/projects/wrenidm/' },
-            { text: 'Getting Started', link: '/projects/wrenidm/download' },
-            { text: 'Resources', link: '/projects/wrenidm/resources' },
-          ]
-        },
-      ],
       '/projects/wrenam': [
         {
           text: 'Wren:AM',
@@ -89,21 +79,31 @@ export default defineConfig({
           ]
         },
       ],
-      '/projects/wrenig': [
+      '/projects/wrenicf': [
         {
-          text: 'Wren:IG',
+          text: 'Wren:ICF',
           items: [
-            { text: 'Overview', link: '/projects/wrenig/' },
-            { text: 'Getting Started', link: '/projects/wrenig/download' },
-            { text: 'Resources', link: '/projects/wrenig/resources' },
+            { text: 'Overview', link: '/projects/wrenicf/' },
           ]
         },
       ],
-      '/projects/wrenicf': [
+      '/projects/wrenidm': [
         {
-          text: 'Wren:ICF',
+          text: 'Wren:IDM',
           items: [
-            { text: 'Overview', link: '/projects/wrenicf/' },
+            { text: 'Overview', link: '/projects/wrenidm/' },
+            { text: 'Getting Started', link: '/projects/wrenidm/download' },
+            { text: 'Resources', link: '/projects/wrenidm/resources' },
+          ]
+        },
+      ],
+      '/projects/wrenig': [
+        {
+          text: 'Wren:IG',
+          items: [
+            { text: 'Overview', link: '/projects/wrenig/' },
+            { text: 'Getting Started', link: '/projects/wrenig/download' },
+            { text: 'Resources', link: '/projects/wrenig/resources' },
           ]
         },
       ],

site/.vitepress/theme/components/index/Feature.vue

@@ -15,9 +15,12 @@
   padding: 24px;
   border-radius: 12px;
 }
+
 .wren-feature h3 {
   margin: 0;
+  font-size: 18px;
 }
+
 .wren-feature p {
   margin-bottom: 0;
 }

site/.vitepress/theme/components/index/Features.vue

@@ -15,7 +15,7 @@ defineProps({
   display: grid;
   grid-template-columns: repeat(v-bind(columns), 1fr);
   gap: 16px;
-  margin-top: 42px;
+  margin-top: 58px;
 }
 
 @media (max-width: 960px) {

site/.vitepress/theme/components/index/Index.vue

@@ -1,54 +1,58 @@
 <script setup lang="ts">
+import { withBase } from 'vitepress';
 import Features from './Features.vue';
 import Feature from './Feature.vue';
 </script>
 
 <template>
-  <Features :columns="4">
-    <Feature>
-      <template #title>
-        Comprehensive
-      </template>
-      <template #description>
-        All the tools you need for building reliable Identity and Access Management systems.
-      </template>
-    </Feature>
-    <Feature>
-      <template #title>
-        Versatile
-      </template>
-      <template #description>
-        Start small, adapt as needed, whether a basic tool or comprehensive IAM system.
-      </template>
-    </Feature>
-    <Feature>
-      <template #title>
-        Open
-      </template>
-      <template #description>
-        Completely open-source. Without vendor lock-in. No licensing fees.
-      </template>
-    </Feature>
-    <Feature>
-      <template #title>
-        Secure
-      </template>
-      <template #description>
-        Regular upgrades, security analysis, transparent vulnerability management - published as CVEs.
-      </template>
-    </Feature>
-  </Features>
+  <div class="wren-home-features">
+    <div class="wren-home-feature">
+      <div class="wren-home-feature-title">
+        <img :src="withBase('icon-gear.svg')">
+        <h3>Comprehensive</h3>
+      </div>
+      <p>All the tools you need for building reliable Identity and Access Management systems.</p>
+    </div>
+    <div class="wren-home-feature">
+      <div class="wren-home-feature-title">
+        <img :src="withBase('icon-puzzle.svg')">
+        <h3>Versatile</h3>
+      </div>
+      <p>Start small, adapt as needed, whether a basic tool or comprehensive IAM system.</p>
+    </div>
+    <div class="wren-home-feature">
+      <div class="wren-home-feature-title">
+        <img :src="withBase('icon-osi.svg')">
+        <h3>Open</h3>
+      </div>
+      <p>Completely open-source. Without vendor lock-in. No licensing fees.</p>
+    </div>
+    <div class="wren-home-feature">
+      <div class="wren-home-feature-title">
+        <img :src="withBase('icon-lock.svg')">
+        <h3>Secure</h3>
+      </div>
+      <p>Regular upgrades, security analysis, transparent vulnerability management - published as CVEs.</p>
+    </div>
+  </div>
 
   <div class="section-wrapper">
-    <h1>
-      Identity Management
-    </h1>
-    <p>
-      Regain control over people's access. Use Wren:IDM to streamline your identity governance and gain full control
-      over where and why users have access. Increase productivity with efficient access provisioning. Reduce operational
-      labour through automation and user self-service. And ensure that everyone has all the access they need, but no
-      other.
-    </p>
+    <div class="wren-project">
+      <div class="wren-project-image">
+        <img :src="withBase('project-idm-img.png')">
+      </div>
+      <div class="wren-project-description">
+        <h1>
+          Identity Management
+        </h1>
+        <p>
+          Regain control over people's access. Use Wren:IDM to streamline your identity governance and gain full control
+          over where and why users have access. Increase productivity with efficient access provisioning. Reduce operational
+          labour through automation and user self-service. And ensure that everyone has all the access they need, but no
+          other.
+        </p>
+      </div>
+    </div>
     <Features :columns="3">
       <Feature>
         <template #title>
@@ -107,14 +111,21 @@ import Feature from './Feature.vue';
   </div>
 
   <div class="section-wrapper">
-    <h1>
-      Access Management
-    </h1>
-    <p>
-      A secure portal for your digital services. Use Wren:AM to establish consistent access policies and advanced
-      observability across all your applications, cloud services and IT infrastructure with minimal effort. Avoid
-      multiple logins with Single Sign-On to deliver a superior login experience for your users.
-    </p>
+    <div class="wren-project">
+      <div class="wren-project-description">
+        <h1>
+          Access Management
+        </h1>
+        <p>
+          A secure portal for your digital services. Use Wren:AM to establish consistent access policies and advanced
+          observability across all your applications, cloud services and IT infrastructure with minimal effort. Avoid
+          multiple logins with Single Sign-On to deliver a superior login experience for your users.
+        </p>
+      </div>
+      <div class="wren-project-image">
+        <img :src="withBase('project-am-img.png')">
+      </div>
+    </div>
     <Features :columns="3">
       <Feature>
         <template #title>
@@ -201,13 +212,20 @@ import Feature from './Feature.vue';
   </div>
 
   <div class="section-wrapper">
-    <h1>
-      Directory Service
-    </h1>
-    <p>
-      Efficiently store and organize your digital identities, even in the most complex IT environments. Wren:DS provides
-      a secure and scalable directory service that complies with industry standards.
-    </p>
+    <div class="wren-project">
+      <div class="wren-project-image">
+        <img :src="withBase('project-ds-img.png')">
+      </div>
+      <div class="wren-project-description">
+        <h1>
+          Directory Service
+        </h1>
+        <p>
+          Efficiently store and organize your digital identities, even in the most complex IT environments. Wren:DS provides
+          a secure and scalable directory service that complies with industry standards.
+        </p>
+      </div>
+    </div>
     <Features :columns="3">
       <Feature>
         <template #title>
@@ -240,14 +258,21 @@ import Feature from './Feature.vue';
   </div>
 
   <div class="section-wrapper">
-    <h1>
-      Identity Gateway
-    </h1>
-    <p>
-      Place an identity gateway in front of your applications, microservices, and APIs to ensure consistent security
-      measures, regardless of their technology or authentication capabilities. Including the most problematic legacy
-      systems.
-    </p>
+    <div class="wren-project">
+      <div class="wren-project-description">
+        <h1>
+          Identity Gateway
+        </h1>
+        <p>
+          Place an identity gateway in front of your applications, microservices, and APIs to ensure consistent security
+          measures, regardless of their technology or authentication capabilities. Including the most problematic legacy
+          systems.
+        </p>
+      </div>
+      <div class="wren-project-image">
+        <img :src="withBase('project-ig-img.png')">
+      </div>
+    </div>
     <Features :columns="3">
       <Feature>
         <template #title>
@@ -312,7 +337,68 @@ import Feature from './Feature.vue';
 </template>
 
 <style scoped>
+.wren-home-features {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-top: 58px;
+}
+
+@media (max-width: 960px) {
+  .wren-home-features {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .wren-home-features {
+    grid-template-columns: 1fr;
+  }
+}
+
+.wren-home-feature-title {
+  display: flex;
+  column-gap: 8px;
+}
+
+.wren-home-feature-title img {
+  width: 24px;
+}
+
+.wren-home-feature-title h3 {
+  margin: 0;
+  font-size: 18px;
+}
+
 .section-wrapper {
-  padding-top: 80px;
+  padding-top: 120px;
+}
+
+.section-wrapper p {
+  margin-bottom: 0;
+}
+
+.wren-project {
+  display: flex;
+  column-gap: 24px;
+}
+
+.wren-project-image {
+  width: 300px;
+  padding-inline: 48px;
+
+  > img {
+    filter: none;
+  }
+}
+
+@media (max-width: 960px) {
+  .wren-project-image {
+    display: none;
+  }
+}
+
+.wren-project-description {
+  flex: 1;
 }
 </style>

site/.vitepress/theme/custom.css

@@ -42,5 +42,5 @@
 }
 
 .VPContent .VPHome .VPHero {
-  padding-bottom: 0;
+  padding-bottom: 40px;
 }