add faq pattern to landingpage

packages/landingpage/app/[lang]/library/patterns/client.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { NextPage } from 'next';
-import { Login, Footer, Hero, SettingsPage } from '@inovex.de/ui-patterns';
+import { Login, Footer, Hero, SettingsPage, Faq } from '@inovex.de/ui-patterns';
 import PreviewBox from './_components/preview-box';
 import styles from './client.module.scss';
 import { useTranslation } from '@hooks/useTranslation';
@@ -125,6 +125,14 @@ export const PatternsPage: NextPage<PatternsPageProps> = ({ highlightedCodes, co
         previewComponent={<Footer />}
         highlightedCode={highlightedCodes.footer}
         rawCode={codeStrings.footer}
+      />
+       <PreviewBox
+        title={t('library.designPatterns.faq.title')}
+        id="faq"
+        description={t('library.designPatterns.faq.description')}
+        previewComponent={<Faq />}
+        highlightedCode={highlightedCodes.faq}
+        rawCode={codeStrings.faq}
       />
       <PreviewBox
         title={t('library.designPatterns.settingsPage.title')}

packages/landingpage/app/[lang]/library/patterns/page.tsx

@@ -3,7 +3,7 @@ import { getMetaTitle } from 'utils/getMetaTitle';
 import { translator } from 'translations/getTranslations';
 import { HighlightedCodes, PatternsPage } from './client';
 import { getHighlighter } from 'shiki';
-import { login, settingsPage, footer, hero } from '@inovex.de/ui-patterns/html';
+import { login, settingsPage, footer, hero, faq } from '@inovex.de/ui-patterns/html';
 
 export async function generateMetadata({ params }: WithLangParam) {
   const title = await translator('common.meta.library', params.lang);
@@ -13,7 +13,7 @@ export async function generateMetadata({ params }: WithLangParam) {
 }
 
 export default async function Page() {
-  const codeStrings = { login, settingsPage, footer, hero };
+  const codeStrings = { login, settingsPage, footer, hero, faq };
 
   const highlighter = await getHighlighter({ theme: 'github-dark-dimmed' });
   const codeToHtml = (code: string) =>

packages/landingpage/translations/locales/de/library.json

@@ -20,6 +20,10 @@
     "footer": {
       "title": "Footer-Navigation",
       "description": "Runden Sie Ihre Webseite mit einem Footer ab, der wesentliche Informationen und Navigationshinweise in einem prägnanten Layout bietet."
+    },
+    "faq": {
+      "title": "FAQ",
+      "description": "Bieten Sie Benutzern eine leicht zugängliche FAQ-Seite, die häufig gestellte Fragen klar und übersichtlich beantwortet."
     }
   }
 }

packages/landingpage/translations/locales/en/library.json

@@ -20,6 +20,10 @@
     "footer": {
       "title": "Footer Navigation",
       "description": "Conclude your site with a Footer that provides essential information and navigational cues in a concise layout."
+    },
+    "faq": {
+      "title": "FAQ",
+      "description": "Deliver an easily accessible FAQ page that answers common questions clearly and concisely."
     }
   }
 }

packages/ui-patterns/src/html.ts

@@ -3,3 +3,4 @@ export { default as login } from './patterns/login/login.html?raw';
 export { default as settingsPage } from './patterns/settingsPage/settingsPage.html?raw';
 export { default as hero } from './patterns/hero/hero.html?raw';
 export { default as footer } from './patterns/footer/footer.html?raw';
+export { default as faq } from './patterns/faq/faq.html?raw';

packages/ui-patterns/src/index.ts

@@ -15,3 +15,6 @@ export { default as heroHtml } from './patterns/hero/hero.html?raw';
 
 export { default as SettingsPage } from './patterns/settingsPage/SettingsPage';
 export { default as settingsPageHtml } from './patterns/settingsPage/settingsPage.html?raw';
+
+export { default as Faq } from './patterns/faq/Faq';
+export { default as faqHtml } from './patterns/faq/faq.html?raw';

packages/ui-patterns/src/patterns/faq/Faq.tsx

@@ -0,0 +1,8 @@
+import htmlContent from './faq.html?raw';
+import PatternWrapper from '../PatternWrapper';
+
+const Footer = () => {
+  return <PatternWrapper htmlContent={htmlContent} />;
+};
+
+export default Footer;

packages/ui-patterns/src/patterns/faq/faq.html

@@ -0,0 +1,34 @@
+<div class="max-w-6xl p-6 bg-white">
+  <h3 class="text-3xl header-d3 mb-8 text-inovex-primary">FAQs</h3>
+
+  <ino-meetup-accordion accordion-title="What are Web Components?">
+    Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags
+    to use in web pages and web apps. They are based on existing web standards and work across modern browsers.
+  </ino-meetup-accordion>
+
+  <ino-meetup-accordion accordion-title="How can I use Web Components in my project?">
+    You can use Web Components in any project by importing them into your HTML file or JavaScript framework. For
+    example, with the inovex Elements library, you can install it using npm and then import the components you need in
+    your React, Angular, or Vue.js project.
+  </ino-meetup-accordion>
+
+  <ino-meetup-accordion accordion-title="What are the main advantages of using Web Components?">
+    The main advantages of Web Components include reusability across different frameworks, encapsulation of styles and
+    functionality, and the ability to create custom elements that work seamlessly with existing HTML, CSS, and
+    JavaScript.
+  </ino-meetup-accordion>
+
+  <ino-meetup-accordion accordion-title="How do I style Web Components?">
+    With inovex Elements, you can use CSS variables like --ino-input-line-color to customize the appearance of
+    components.
+  </ino-meetup-accordion>
+
+  <ino-meetup-accordion accordion-title="Can I use Web Components with React?">
+    We provide a React wrapper, making it easy to use our web components in React projects with a familiar syntax.
+  </ino-meetup-accordion>
+
+  <ino-meetup-accordion accordion-title="What are slots in Web Components?">
+    Slots are a feature of Web Components that allow you to define placeholders in your component that can be filled
+    with custom content. This makes components more flexible and customizable.
+  </ino-meetup-accordion>
+</div>