feat(services-page): add ServicesSection

i18n/de-DE.json

@@ -37,6 +37,21 @@
   "ServicesHeroSection.cta": "Heute starten",
   "ServicesHeroSection.description": "Expertenberatung, Prototyping, PoCs und MVP-Entwicklung.",
   "ServicesHeroSection.title": "Verwandle deine Ideen mit Vuesion Services in Realität.",
+  "ServicesSection.Benefit1.description": "Wir helfen bei der Identifizierung innovativer Ideen und bewerten ihre Machbarkeit und Ausrichtung auf die Geschäftsziele, um eine solide Grundlage für die Produktentwicklung zu gewährleisten.",
+  "ServicesSection.Benefit1.title": "Maßgeschneiderte Strategien zur Generierung und Prüfung von Ideen.",
+  "ServicesSection.Benefit2.description": "Wir führen gründliche Nutzerforschung durch, um Kundenbedürfnisse und -präferenzen zu verstehen und eine umfassende Machbarkeitsstudie für Ihr Produktkonzept zu erstellen.",
+  "ServicesSection.Benefit2.title": "Nutzerforschung und Machbarkeitsstudien.",
+  "ServicesSection.Benefit3.description": "Wir erstellen voll funktionsfähige Prototypen, um Konzepte zu validieren und sicherzustellen, dass sie den Benutzeranforderungen und technischen Anforderungen entsprechen.",
+  "ServicesSection.Benefit3.title": "Voll funktionsfähige Konzeptvalidierung.",
+  "ServicesSection.Benefit4.description": "Wir führen detaillierte Risikobewertungen durch, um potenzielle Herausforderungen zu identifizieren und Risikominderungsstrategien zu entwickeln, um eine reibungslosere Produktentwicklung zu gewährleisten.",
+  "ServicesSection.Benefit4.title": "Risikobewertung.",
+  "ServicesSection.Benefit5.description": "Wir entwickeln MVPs, um den Markt mit einem funktionsfähigen Produkt zu testen, das nur die Kernfunktionen enthält, was schnellere Rückmeldungen und Iterationen ermöglicht.",
+  "ServicesSection.Benefit5.title": "Minimum Viable Products.",
+  "ServicesSection.Benefit6.description": "Wir erleichtern die effektive Kommunikation und Zusammenarbeit zwischen verschiedenen Teams, optimieren Workflows und steigern die Produktivität.",
+  "ServicesSection.Benefit6.title": "Steigerung der Produktivität durch Prozessoptimierung.",
+  "ServicesSection.Benefit7.description": "Wir stellen sicher, dass Ihr Produkt für den Marktstart bereit ist, mit optimierter Leistung, robusten Sicherheitsmaßnahmen und verbesserter Sichtbarkeit durch technisches SEO.",
+  "ServicesSection.Benefit7.title": "Technisches SEO, Leistungsoptimierung und bewährte Sicherheitspraktiken.",
+  "ServicesSection.title": "Vuesion Services für jede Phase Ihres Unternehmens",
   "SupportSection.chanel1.cta": "Discord öffnen",
   "SupportSection.chanel1.description": "Trete mit anderen Benutzern auf unserem Discord-Server in Kontakt.",
   "SupportSection.chanel2.cta": "GitHub öffnen",

i18n/en-US.json

@@ -37,6 +37,21 @@
   "ServicesHeroSection.cta": "Get Started Today",
   "ServicesHeroSection.description": "Expert Consulting, Prototyping, PoCs, and MVP Development.",
   "ServicesHeroSection.title": "Transform Your Ideas into Reality with Vuesion Services.",
+  "ServicesSection.Benefit1.description": "We help identify innovative ideas and evaluate their feasibility and alignment with business goals, ensuring a solid foundation for product development.",
+  "ServicesSection.Benefit1.title": "Tailored strategies to generate and screen ideas.",
+  "ServicesSection.Benefit2.description": "We conduct thorough user research to understand customer needs and preferences, providing a comprehensive feasibility study for your product concept.",
+  "ServicesSection.Benefit2.title": "User research and feasibility studies.",
+  "ServicesSection.Benefit3.description": "We create fully functional prototypes to validate concepts and ensure they meet user needs and technical requirements.",
+  "ServicesSection.Benefit3.title": "Fully functional concept validation.",
+  "ServicesSection.Benefit4.description": "We perform detailed risk assessments to identify potential challenges and develop mitigation strategies, ensuring a smoother product development journey.",
+  "ServicesSection.Benefit4.title": "Risk assessment.",
+  "ServicesSection.Benefit5.description": "We develop MVPs to test the market with a functional product that includes only the core features, allowing for faster feedback and iteration.",
+  "ServicesSection.Benefit5.title": "Minimum viable products.",
+  "ServicesSection.Benefit6.description": "We facilitate effective communication and collaboration across different teams, optimizing workflows and enhancing productivity.",
+  "ServicesSection.Benefit6.title": "Enhancing productivity through process optimization.",
+  "ServicesSection.Benefit7.description": "We ensure your product is ready for market launch with optimized performance, robust security measures, and enhanced visibility through technical SEO.",
+  "ServicesSection.Benefit7.title": "Technical SEO, performance optimization, and security best practices.",
+  "ServicesSection.title": "Vuesion Services for every Stage of your Business",
   "SupportSection.chanel1.cta": "Open Discord",
   "SupportSection.chanel1.description": "Engage with other users on our Discord server.",
   "SupportSection.chanel2.cta": "Open Github",

src/components/demo/ServicesSection/ServicesSection.spec.ts

@@ -0,0 +1,31 @@
+import { describe, beforeEach, test } from 'vitest';
+import { render, type RenderResult } from '@testing-library/vue';
+import ServicesSection from './ServicesSection.vue';
+
+describe('ServicesSection.vue', () => {
+  let harness: RenderResult;
+
+  beforeEach(() => {
+    harness = render(ServicesSection, {});
+  });
+
+  test('renders component', () => {
+    const { getByText } = harness;
+
+    getByText('ServicesSection.title');
+    getByText('ServicesSection.Benefit1.title');
+    getByText('ServicesSection.Benefit1.description');
+    getByText('ServicesSection.Benefit2.title');
+    getByText('ServicesSection.Benefit2.description');
+    getByText('ServicesSection.Benefit3.title');
+    getByText('ServicesSection.Benefit3.description');
+    getByText('ServicesSection.Benefit4.title');
+    getByText('ServicesSection.Benefit4.description');
+    getByText('ServicesSection.Benefit5.title');
+    getByText('ServicesSection.Benefit5.description');
+    getByText('ServicesSection.Benefit6.title');
+    getByText('ServicesSection.Benefit6.description');
+    getByText('ServicesSection.Benefit7.title');
+    getByText('ServicesSection.Benefit7.description');
+  });
+});

src/components/demo/ServicesSection/ServicesSection.stories.ts

@@ -0,0 +1,32 @@
+import type { StoryFn } from '@storybook/vue3';
+import ServicesSection from './ServicesSection.vue';
+import ComponentDocs from '~/assets/design-system/docs/components/ComponentDocs.vue';
+
+export default {
+  title: 'Demo/ServicesSection',
+  component: ServicesSection,
+  argTypes: {},
+};
+
+const Template: StoryFn = (args) => ({
+  components: {
+    ServicesSection,
+    ComponentDocs,
+  },
+  inheritAttrs: false,
+  setup() {
+    return { args };
+  },
+  template: `<component-docs
+      component-name="ServicesSection"
+      usage="TBD"
+  >
+      <services-section v-bind="args" />
+  </component-docs>`,
+});
+
+export const Default = {
+  render: Template,
+
+  args: {},
+};