BReadcrumbs

src/views/AboutUs.vue

@@ -1,3 +1,26 @@
+<script setup lang="ts">
+  import { onMounted } from 'vue';
+  import { useSEO } from '../composables/useSEO';
+  import { useStructuredData } from '../composables/useStructuredData';
+
+  const { addBreadcrumbSchema } = useStructuredData();
+
+  onMounted(() => {
+    useSEO({
+      title: 'About Us - Our Mission & Story',
+      description: 'Learn about Spritesheet Generator, a free tool designed to help game developers and artists streamline their workflow with optimized spritesheet creation.',
+      url: '/about',
+      type: 'website',
+      keywords: 'about spritesheet generator, game development tools, open source sprite editor'
+    });
+
+    addBreadcrumbSchema([
+      { name: 'Home', url: '/' },
+      { name: 'About Us', url: '/about' }
+    ]);
+  });
+</script>
+
 <template>
   <div class="w-full">
     <div class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 p-8 sm:p-12">