add: ImpressumModal added to Footer

src/components/layout/Footer.module.css

@@ -37,6 +37,22 @@
   gap: var(--space-md);
 }
 
+.legalLink {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--md-sys-color-on-surface);
+  opacity: 0.6;
+  font-size: 0.875rem;
+  padding: 0.5rem;
+  transition: opacity var(--transition-fast), color var(--transition-fast);
+}
+
+.legalLink:hover {
+  opacity: 1;
+  color: var(--md-sys-color-primary);
+}
+
 .socialLink {
   display: flex;
   align-items: center;

src/components/layout/Footer.tsx

@@ -1,9 +1,12 @@
+import { useState } from 'react';
 import { useTranslation } from '../../i18n';
 import styles from './Footer.module.css';
+import { ImpressumModal } from './ImpressumModal';
 
 export function Footer() {
   const { t } = useTranslation();
   const currentYear = new Date().getFullYear();
+  const [isImpressumOpen, setIsImpressumOpen] = useState(false);
 
   return (
     <footer className={styles.footer}>
@@ -16,6 +19,12 @@ export function Footer() {
         </div>
 
         <div className={styles.links}>
+          <button
+            onClick={() => setIsImpressumOpen(true)}
+            className={styles.legalLink}
+          >
+            {t.footer.impressum}
+          </button>
           <a
             href="https://github.com/ragusa-it"
             target="_blank"
@@ -41,6 +50,10 @@ export function Footer() {
           </p>
         </div>
       </div>
+      <ImpressumModal
+        isOpen={isImpressumOpen}
+        onClose={() => setIsImpressumOpen(false)}
+      />
     </footer>
   );
 }

src/components/layout/ImpressumModal.module.css

@@ -0,0 +1,38 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.container section {
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  padding-bottom: var(--space-md);
+}
+
+.container section:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.container section h3 {
+  font-family: var(--md-sys-typescale-display-font);
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: var(--space-xs);
+  color: var(--md-sys-color-primary);
+}
+
+.container section p {
+  margin: 0;
+  color: var(--md-sys-color-on-surface);
+  line-height: 1.6;
+  font-size: 0.95rem;
+}
+
+.container em {
+  font-style: italic;
+  color: var(--md-sys-color-secondary);
+  font-size: 0.875rem;
+  display: block;
+  margin-top: var(--space-xs);
+}

src/components/layout/ImpressumModal.tsx

@@ -0,0 +1,57 @@
+import { Modal } from '../ui/Modal';
+import { useTranslation } from '../../i18n';
+import styles from './ImpressumModal.module.css';
+
+interface ImpressumModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function ImpressumModal({ isOpen, onClose }: ImpressumModalProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={t.footer.impressum}>
+      <div className={styles.container}>
+        <section>
+          <h3>Angaben gemäß § 5 TMG</h3>
+          <p>
+            Melvin Ragusa<br />
+            Provinzialstraße 177<br />
+            44388 Dortmund
+          </p>
+        </section>
+
+        <section>
+          <h3>Kontakt</h3>
+          <p>
+            Telefon: 0160 95098973<br />
+            E-Mail: info@ragusa-it.dev
+          </p>
+        </section>
+
+        <section>
+          <h3>Umsatzsteuer-ID</h3>
+          <p>
+            Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br />
+            <em>Als Kleinunternehmer im Sinne von § 19 Abs. 1 UStG wird keine Umsatzsteuer berechnet.</em>
+          </p>
+        </section>
+
+        <section>
+          <h3>Redaktionell verantwortlich</h3>
+          <p>
+            Melvin Ragusa<br />
+            Provinzialstraße 177<br />
+            44388 Dortmund
+          </p>
+        </section>
+
+        <section>
+            <h3>Hinweis</h3>
+            <p>Kein Ladengeschäft. Termine nur nach Vereinbarung.</p>
+        </section>
+      </div>
+    </Modal>
+  );
+}

src/components/ui/Modal.module.css

@@ -0,0 +1,87 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(8px);
+  padding: 1rem;
+}
+
+.modal {
+  background-color: var(--md-sys-color-surface-container);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--radius-xl);
+  padding: var(--space-xl);
+  width: 100%;
+  max-width: 560px; /* Slightly wider */
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Deep shadow */
+  color: var(--md-sys-color-on-surface);
+}
+
+.closeButton {
+  position: absolute;
+  top: var(--space-md);
+  right: var(--space-md);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--md-sys-color-on-surface-variant);
+  padding: 0.5rem;
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+
+.closeButton:hover {
+  background-color: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+}
+
+.header {
+  margin-bottom: var(--space-lg);
+  padding-right: var(--space-xl); /* Make room for close button */
+}
+
+.title {
+  font-family: var(--md-sys-typescale-display-font);
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--md-sys-color-on-surface);
+  letter-spacing: -0.025em;
+}
+
+.content {
+  color: var(--md-sys-color-on-surface-variant);
+  font-family: var(--md-sys-typescale-body-font);
+  line-height: 1.6;
+}
+
+/* Scrollbar styling for webkit browsers */
+.modal::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modal::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.modal::-webkit-scrollbar-thumb {
+  background-color: var(--md-sys-color-outline-variant);
+  border-radius: var(--radius-full);
+}
+
+.modal::-webkit-scrollbar-thumb:hover {
+  background-color: var(--md-sys-color-outline);
+}

src/components/ui/Modal.tsx

@@ -0,0 +1,93 @@
+import { type ReactNode, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'motion/react';
+import styles from './Modal.module.css';
+
+// I need to check if lucide-react is installed. 
+// Based on package list, react-icons is installed.
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+}
+
+export function Modal({ isOpen, onClose, title, children }: ModalProps) {
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  // Close on escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [onClose]);
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className={styles.overlay}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={onClose}
+        >
+          <motion.div
+            className={styles.modal}
+            initial={{ scale: 0.95, opacity: 0, y: 20 }}
+            animate={{ scale: 1, opacity: 1, y: 0 }}
+            exit={{ scale: 0.95, opacity: 0, y: 20 }}
+            onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? "modal-title" : undefined}
+          >
+            <button
+              className={styles.closeButton}
+              onClick={onClose}
+              aria-label="Close modal"
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+
+            {title && (
+              <div className={styles.header}>
+                <h2 id="modal-title" className={styles.title}>
+                  {title}
+                </h2>
+              </div>
+            )}
+
+            <div className={styles.content}>{children}</div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+}

src/i18n/de.ts

@@ -110,6 +110,7 @@ export const de = {
     copyright: '© {year} Ragusa IT-Consulting. Alle Rechte vorbehalten.',
     madeIn: 'Entwickelt in Deutschland mit',
     love: 'Liebe',
+    impressum: 'Impressum',
   },
 };
 

src/i18n/en.ts

@@ -112,5 +112,6 @@ export const en: Translations = {
     copyright: '© {year} Ragusa IT-Consulting. All rights reserved.',
     madeIn: 'Made in Germany with',
     love: 'love',
+    impressum: 'Imprint',
   },
 };