From 92719298a5890ff1fc4047a91338a0ce589b9e29 Mon Sep 17 00:00:00 2001
From: Tobias Heim Galindo
 <81302108+TobiasHeimGalindo@users.noreply.github.com>
Date: Tue, 12 Mar 2024 14:55:55 +0100
Subject: [PATCH] feat(landingpage): add Tailwind Integration guide (#1312)

feat: add stylized tailwind integration hint
---
 .../app/[lang]/library/patterns/client.tsx    | 86 ++++++++++++++++++-
 1 file changed, 85 insertions(+), 1 deletion(-)

diff --git a/packages/landingpage/app/[lang]/library/patterns/client.tsx b/packages/landingpage/app/[lang]/library/patterns/client.tsx
index 5fa689d42b..df3823b432 100644
--- a/packages/landingpage/app/[lang]/library/patterns/client.tsx
+++ b/packages/landingpage/app/[lang]/library/patterns/client.tsx
@@ -5,6 +5,8 @@ import { Login, Footer, Hero, SettingsPage } from '@inovex.de/ui-patterns';
 import PreviewBox from './_components/preview-box';
 import styles from './client.module.scss';
 import { useTranslation } from '@hooks/useTranslation';
+import { InoAccordion } from '@inovex.de/elements-react';
+import { useState } from 'react';
 
 export interface HighlightedCodes {
   [key: string]: string;
@@ -19,7 +21,8 @@ export const PatternsPage: NextPage<PatternsPageProps> = ({
   highlightedCodes,
   codeStrings,
 }) => {
-  const { t } = useTranslation();
+  const { t, lang } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
 
   return (
     <div style={{ marginBottom: '8rem' }}>
@@ -29,6 +32,87 @@ export const PatternsPage: NextPage<PatternsPageProps> = ({
           <b>{t('library.designPatterns.header.title')}</b>
         </h1>
         <p className="body-l">{t('library.designPatterns.header.subtitle')}</p>
+        <InoAccordion
+          expanded={expanded}
+          onExpandedChange={() => setExpanded(!expanded)}
+          accordionTitle="Tailwind Integration"
+          style={{ margin: '2rem' }}
+        >
+          {lang === 'en' && (
+            <div>
+              <p>
+                <strong>Step 1:</strong> Modify your 'tailwind.config.js' to
+                include inovex Elements theme colors. This integration enables
+                you to utilize inovex's color palette within Tailwind's classes.
+                Refer to our{' '}
+                <a
+                  href="https://github.com/inovex/elements/blob/master/packages/ui-patterns/tailwind.config.js"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  public GitHub repository
+                </a>{' '}
+                for an example configuration.
+              </p>
+              <p>
+                <strong>Step 2:</strong> For a detailed view of the inovex
+                Elements color palette, visit the{' '}
+                <a
+                  href="https://elements.inovex.de/en/library/components?element=docs-styleguide-colors--docs"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  storybook styleguide
+                </a>
+                . This guide will help you in selecting appropriate color
+                variables for your designs.
+              </p>
+              <p>
+                Take a look at the Code Snippets below to explore the code and
+                result of using the inovex Elements in combination with Tailwind
+                CSS.
+              </p>
+            </div>
+          )}
+          {lang === 'de' && (
+            <div>
+              <p>
+                <strong>Schritt 1:</strong> Ergänzen Sie Ihre
+                'tailwind.config.js', um die Farbpalette von den inovex Elements
+                einzuschließen. Diese Integration ermöglicht es Ihnen, die
+                Farbpalette von inovex innerhalb der Tailwind-Klassen zu nutzen.
+                Beziehen Sie sich auf unser{' '}
+                <a
+                  href="https://github.com/inovex/elements/blob/master/packages/ui-patterns/tailwind.config.js"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  öffentliches GitHub-Repository
+                </a>{' '}
+                für eine Beispielkonfiguration.
+              </p>
+              <p>
+                <strong>Schritt 2:</strong> Für eine detaillierte Ansicht der
+                Farbpalette von inovex Elements, besuchen Sie das
+                <a
+                  href="https://elements.inovex.de/en/library/components?element=docs-styleguide-colors--docs"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Storybook-Styleguide
+                </a>
+                . Dieser Leitfaden wird Ihnen helfen, geeignete Farbvariablen
+                für Ihre Designs auszuwählen.
+              </p>
+              <p>
+                Schauen Sie sich die untenstehenden Code-Snippets an, um zu
+                sehen, wie die inovex Elements in Kombination mit Tailwind CSS
+                eingesetzt werden und welche Ergebnisse damit erzielt werden
+                können
+              </p>
+            </div>
+          )}
+        </InoAccordion>
         <div className={styles.divider} />
       </div>
       <PreviewBox