feat(ui-patterns): add footer & hero pattern (#1310)

* feat: add hero section pattern draft WIP

* refactor: classNames

* feat: create footer pattern

* refactor: add dashed outline to patterns instead

* refactor: deploy ui-patterns

* feat: add footer & hero pattern to landingpage

packages/elements/src/global/styles.scss

@@ -4,8 +4,7 @@
 
 .inovex-elements-typo {
   font-family: Lato, Verdana, sans-serif;
-
-  a {
+  a:not(.tailwind) {
     background-color: transparent;
     color: new-theme.$primary;
     font-weight: bold;

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { NextPage } from 'next';
-import { Login, SettingsPage } from '@inovex.de/ui-patterns';
+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';
@@ -39,6 +39,22 @@ export const PatternsPage: NextPage<PatternsPageProps> = ({
         highlightedCode={highlightedCodes.login}
         rawCode={codeStrings.login}
       />
+      <PreviewBox
+        title={t('library.designPatterns.hero.title')}
+        id="hero"
+        description={t('library.designPatterns.hero.description')}
+        previewComponent={<Hero />}
+        highlightedCode={highlightedCodes.hero}
+        rawCode={codeStrings.hero}
+      />
+      <PreviewBox
+        title={t('library.designPatterns.footer.title')}
+        id="footer"
+        description={t('library.designPatterns.footer.description')}
+        previewComponent={<Footer />}
+        highlightedCode={highlightedCodes.footer}
+        rawCode={codeStrings.footer}
+      />
       <PreviewBox
         title={t('library.designPatterns.settingsPage.title')}
         id="settingsPage"

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 } from '@inovex.de/ui-patterns/html';
+import { login, settingsPage, footer, hero } 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 };
+  const codeStrings = { login, settingsPage, footer, hero };
 
   const highlighter = await getHighlighter({ theme: 'github-dark-dimmed' });
   const codeToHtml = (code: string) =>

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

@@ -12,6 +12,14 @@
     "settingsPage": {
       "title": "Einstellungsseite",
       "description": "Bieten Sie eine übersichtliche und anpassbare Einstellungsoberfläche, die es Benutzern ermöglicht, ihre Präferenzen einfach zu verwalten."
+    },
+    "hero": {
+      "title": "Hero-Bereich",
+      "description": "Schaffen Sie einen fesselnden ersten Eindruck mit einem Hero-Bereich, der ästhetische Anziehungskraft mit klarer Botschaft verbindet."
+    },
+    "footer": {
+      "title": "Footer-Navigation",
+      "description": "Runden Sie Ihre Webseite mit einem Footer ab, der wesentliche Informationen und Navigationshinweise in einem prägnanten Layout bietet."
     }
   }
 }

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

@@ -3,7 +3,7 @@
     "header": {
       "top": "Efficient Development",
       "title": "Design Patterns",
-      "subtitle": "Elevate your project with our lovingly crafted design patterns, optimized for web development. The inovex Elements web components, seamlessly integrated with Tailwind CSS, empowers you to build responsive and visually appealing user interfaces with ease. Our commitment to quality ensures each pattern is meticulously designed for modern web applications."
+      "subtitle": "Elevate your project with our lovingly crafted design patterns, optimized for web development. The inovex Elements web components, seamlessly integrated with Tailwind CSS, empower you to build responsive and visually appealing user interfaces with ease. Our commitment to quality ensures each pattern is meticulously designed for modern web applications."
     },
     "login": {
       "title": "Login",
@@ -12,6 +12,14 @@
     "settingsPage": {
       "title": "Settings Page",
       "description": "Offer an efficient and customizable settings experience, ensuring user preferences are easily accessible and manageable."
+    },
+    "hero": {
+      "title": "Hero Section",
+      "description": "Craft a captivating first impression with a Hero Section that combines aesthetic appeal and clear messaging."
+    },
+    "footer": {
+      "title": "Footer Navigation",
+      "description": "Conclude your site with a Footer that provides essential information and navigational cues in a concise layout."
     }
   }
 }

packages/ui-patterns-playground/src/App.tsx

@@ -1,5 +1,11 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { MyPatternA, Login, SettingsPage } from '@inovex.de/ui-patterns';
+import {
+  MyPatternA,
+  Login,
+  SettingsPage,
+  Footer,
+  Hero,
+} from '@inovex.de/ui-patterns';
 import '@inovex.de/elements-react';
 
 import Guide from './components/guide';
@@ -11,9 +17,11 @@ function App() {
       <NavigationDrawer>
         <Routes>
           <Route path="/" element={<Login />} />
-          <Route path="/mypatterna" element={<MyPatternA />} />
+          <Route path="/hero" element={<Hero />} />
+          <Route path="/footer" element={<Footer />} />
           <Route path="/guide" element={<Guide />} />
           <Route path="/settings" element={<SettingsPage />} />
+          <Route path="/mypatterna" element={<MyPatternA />} />
         </Routes>
       </NavigationDrawer>
     </Router>

packages/ui-patterns-playground/src/components/navigationDrawer.tsx

@@ -51,6 +51,16 @@ function NavigationDrawer({ children }: NavigationDrawerProps) {
             <InoIcon icon="number"></InoIcon>
           </InoNavItem>
         </Link>
+        <Link to="/hero">
+          <InoNavItem role="menuitem" text="Hero">
+            <InoIcon icon="display"></InoIcon>
+          </InoNavItem>
+        </Link>
+        <Link to="/footer">
+          <InoNavItem role="menuitem" text="Footer">
+            <InoIcon icon="display"></InoIcon>
+          </InoNavItem>
+        </Link>
       </InoList>
 
       <InoList role="menubar" slot="footer" aria-label="Footer Navigation">

packages/ui-patterns/src/html.ts

@@ -1,3 +1,5 @@
 export { default as myPatternA } from './patterns/my-pattern-a/my-pattern-a.html?raw';
 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';

packages/ui-patterns/src/index.ts

@@ -7,5 +7,11 @@ export { default as myPatternAHtml } from './patterns/my-pattern-a/my-pattern-a.
 export { default as Login } from './patterns/login/Login';
 export { default as loginHtml } from './patterns/login/login.html?raw';
 
+export { default as Footer } from './patterns/footer/Footer';
+export { default as footerHtml } from './patterns/footer/footer.html?raw';
+
+export { default as Hero } from './patterns/hero/Hero';
+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';

packages/ui-patterns/src/patterns/footer/Footer.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import htmlContent from './footer.html?raw';
+import PatternWrapper from '../PatternWrapper';
+import inovexLogo from '../../../assets/inovex-logo.svg';
+
+const Footer = () => {
+  useEffect(() => {
+    const logoImage = document.querySelector('ino-img#attributions');
+
+    if (logoImage) {
+      logoImage.setAttribute('src', inovexLogo);
+    }
+  }, []);
+
+  return <PatternWrapper htmlContent={htmlContent} />;
+};
+
+export default Footer;