feat: add imprint to footer

src/components/Footer/Footer.module.css

@@ -14,6 +14,18 @@
   margin: 0 0 30px;
 }
 
+.imprint {
+  opacity: 0.7;
+  display: block;
+  font-size: 12px;
+  text-decoration: underline;
+  text-align: center;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 @media (min-width: 768px) {
   .branding {
     display: flex;
@@ -28,6 +40,10 @@
   .description {
     margin: 0 50px 0;
   }
+
+  .imprint {
+    text-align: right;
+  }
 }
 
 @media (min-width: 768px) and (max-width: 1023px) {

src/components/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import logo from "../../../public/logo.svg";
 import styles from "./Footer.module.css";
 
 import { SocialLinks } from "@/components/SocialLinks/SocialLinks";
-import { getAppName, getLabel } from "@/lib/data";
+import { getAppName, getImprintUrl, getLabel } from "@/lib/data";
 
 export function Footer() {
   return (
@@ -12,6 +12,9 @@ export function Footer() {
         <p className={styles.description}>{getLabel("footer")}</p>
         <SocialLinks className={styles.socialLinks} />
       </div>
+      <a href={getImprintUrl()} className={styles.imprint} target="_blank">
+        {getLabel("imprint")}
+      </a>
     </div>
   );
 }

src/lib/data.ts

@@ -62,6 +62,10 @@ export function getItems(quadrant?: string, featured?: boolean): Item[] {
   }) as Item[];
 }
 
+export function getImprintUrl() {
+  return config.imprint;
+}
+
 export function getItem(id: string): Item | undefined {
   return data.items.find((item) => item.id === id) as Item;
 }