docs: fix broken English links and complete showcases section (#27)

Author: eduardozaniboni

docs/components/home/ConceptsSection.vue

@@ -4,8 +4,12 @@
       <h2>{{ concepts.title }}</h2>
       <p>{{ concepts.description }}</p>
       <ul>
-        <li v-for="item in concepts.items" :key="item.title">
-          <a :href="`/${locale}${item.link}`">{{ item.title }}</a> - {{ item.description }}
+        <li
+          v-for="item in concepts.items"
+          :key="item.title"
+        >
+          <a :href="`/${locale}${item.link || '#'}`">{{ item.title }}</a>
+          - {{ item.description }}
         </li>
       </ul>
     </div>
@@ -14,85 +18,89 @@
       <h2>{{ showcases.title }}</h2>
       <p>{{ showcases.description }}</p>
       <ul>
-        <li v-for="item in showcases.items" :key="item.title">
-          <a :href="`/${locale}${item.link}`">{{ item.title }}</a> - {{ item.description }}
+        <li
+          v-for="item in showcases.items"
+          :key="item.title"
+        >
+          <a :href="`/${locale}${item.link || '#'}`">{{ item.title }}</a>
+          - {{ item.description }}
         </li>
       </ul>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useData } from 'vitepress';
-import { computed } from 'vue';
+  import { useData } from "vitepress";
+  import { computed } from "vue";
 
-const { frontmatter } = useData();
+  const { frontmatter } = useData();
 
-const locale = computed(() => frontmatter.value.locale || 'en-US');
-const concepts = computed(() => frontmatter.value.concepts || {});
-const showcases = computed(() => frontmatter.value.showcases || {});
+  const locale = computed(() => frontmatter.value.locale || "en-US");
+  const concepts = computed(() => frontmatter.value.concepts || {});
+  const showcases = computed(() => frontmatter.value.showcases || {});
 </script>
 
 <style scoped>
-.home-sections {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  gap: 2rem;
-  margin: 4rem 0;
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  overflow: hidden;
-}
+  .home-sections {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 2rem;
+    margin: 4rem 0;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    overflow: hidden;
+  }
 
-.section-card {
-  padding: 2rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 12px;
-  position: relative;
-  z-index: 1;
-}
+  .section-card {
+    padding: 2rem;
+    background: var(--vp-c-bg-soft);
+    border-radius: 12px;
+    position: relative;
+    z-index: 1;
+  }
 
-.section-card h2 {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
+  .section-card h2 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
 
-.section-card p {
-  color: var(--vp-c-text-2);
-  margin-bottom: 1rem;
-}
+  .section-card p {
+    color: var(--vp-c-text-2);
+    margin-bottom: 1rem;
+  }
 
-.section-card ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
+  .section-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
 
-.section-card li {
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
+  .section-card li {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--vp-c-divider);
+  }
 
-.section-card li:last-child {
-  border-bottom: none;
-}
+  .section-card li:last-child {
+    border-bottom: none;
+  }
 
-.section-card a {
-  color: var(--vp-c-brand-1);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
+  .section-card a {
+    color: var(--vp-c-brand-1);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
 
-.section-card a:hover {
-  color: var(--vp-c-brand-2);
-  text-decoration: underline;
-}
+  .section-card a:hover {
+    color: var(--vp-c-brand-2);
+    text-decoration: underline;
+  }
 
-@media (max-width: 768px) {
-  .home-sections {
-    grid-template-columns: 1fr;
+  @media (max-width: 768px) {
+    .home-sections {
+      grid-template-columns: 1fr;
+    }
   }
-}
 </style>

docs/en-US/index.md

@@ -35,25 +35,45 @@ concepts:
   description: Learn the fundamental concepts that power schepta
   items:
     - title: Factories
+      link: /concepts/01-factories
       description: How schemas become components
     - title: Schema Language
+      link: /concepts/02-schema-language
       description: The syntax for defining UI
     - title: Provider
+      link: /concepts/03-provider
       description: Global configuration and context
     - title: Schema Resolution
+      link: /concepts/04-schema-resolution
       description: From JSON to React/Vue
     - title: Renderer
+      link: /concepts/05-renderer
       description: The rendering engine
     - title: Middleware
+      link: /concepts/06-middleware
       description: Transforming props and behavior
     - title: Debug System
+      link: /concepts/07-debug-system
       description: Development tools
 showcases:
   title: Showcases
-  description: Showcases of how to use schepta
+  description: See schepta in action with interactive examples
   items:
-    - title: React
-      description: React example
+    - title: React Examples
+      link: /showcases/react
+      description: React with react-hook-form
+    - title: React Material UI
+      link: /showcases/material-ui
+      description: React with Material UI
+    - title: React Chakra UI
+      link: /showcases/chakra-ui
+      description: React with Chakra UI
+    - title: Vue Examples
+      link: /showcases/vue
+      description: Vue with custom form adapter
+    - title: Vue Vuetify
+      link: /showcases/vuetify
+      description: Vue with Vuetify Material Design
 ---
 
 <script setup>