feat: enhance BusinessCard component with imprint URL and update styles for better readability

src/components/BusinessCard.tsx

@@ -30,7 +30,7 @@ export function BusinessCard() {
         </div>
 
         <div className={styles.divider} />
-        <CardFooter companyName={businessCard.company} personName={businessCard.name} />
+        <CardFooter companyName={businessCard.company} personName={businessCard.name} imprintUrl={businessCard.imprintUrl} />
       </div>
     </div>
   );

src/components/Card/CardFooter.module.css

@@ -2,17 +2,27 @@
   padding: 15px 20px;
   text-align: center;
   background: #f7fafc;
-  font-size: 11px;
+  font-size: 12px;
-  color: #a0aec0;
+  color: #4a5568;
-  text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
+.legalLink {
+  color: #2d3748;
+  text-decoration: underline;
+  transition: color 0.2s;
+}
+
+.legalLink:hover {
+  color: #000;
+  text-decoration: underline;
+}
+
 /* Extra Small Screens (320px - 479px) */
 @media (max-width: 479px) {
   .footer {
     padding: 12px 16px;
-    font-size: 10px;
+    font-size: 12px;
   }
 }
 
@@ -20,7 +30,7 @@
 @media (min-width: 480px) and (max-width: 767px) {
   .footer {
     padding: 13px 18px;
-    font-size: 10px;
+    font-size: 12px;
   }
 }
 
@@ -28,7 +38,7 @@
 @media (min-width: 768px) and (max-width: 1023px) {
   .footer {
     padding: 14px 22px;
-    font-size: 11px;
+    font-size: 12px;
   }
 }
 
@@ -36,6 +46,6 @@
 @media (min-width: 1024px) {
   .footer {
     padding: 15px 20px;
-    font-size: 11px;
+    font-size: 12px;
   }
 }

src/components/Card/CardFooter.tsx

@@ -3,12 +3,20 @@ import styles from './CardFooter.module.css';
 interface CardFooterProps {
   companyName: string;
   personName: string;
+  imprintUrl?: string;
 }
 
-export function CardFooter({ personName }: Readonly<CardFooterProps>) {
+export function CardFooter({ personName, imprintUrl }: Readonly<CardFooterProps>) {
   return (
     <div className={styles.footer}>
       <p>© 2026 {personName}</p>
+      {imprintUrl && (
+        <p>
+          <a href={imprintUrl} target="_blank" rel="noopener noreferrer" className={styles.legalLink}>
+            Imprint &amp; Privacy
+          </a>
+        </p>
+      )}
     </div>
   );
 }

src/components/Card/CardProfile.module.css

@@ -33,8 +33,7 @@
   font-weight: 600;
   color: #667eea;
   margin: 5px 0;
-  text-transform: uppercase;
+  letter-spacing: 0.5px;
-  letter-spacing: 1px;
   word-break: break-word;
 }
 

src/components/QRCodeDisplay.module.css

@@ -47,7 +47,6 @@
   color: #718096;
   margin: 0;
   text-align: center;
-  text-transform: uppercase;
   letter-spacing: 0.5px;
   font-weight: 500;
 }
@@ -67,7 +66,6 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
-  text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 

src/components/SaveContactButton.module.css

@@ -13,7 +13,6 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
-  text-transform: uppercase;
   letter-spacing: 0.5px;
   min-height: 44px;
 }

src/config/businessCard.config.local.example.ts

@@ -27,4 +27,5 @@ export const localBusinessCard: BusinessCard = {
     { platform: 'GitHub', url: 'https://github.com/yourprofile', icon: 'Github' },
     { platform: 'Portfolio', url: 'https://yourwebsite.com', icon: 'Globe' },
   ],
+  // imprintUrl: 'https://yourwebsite.com/imprint',
 };

src/config/businessCard.config.local.ts

@@ -0,0 +1,22 @@
+import type { BusinessCard } from '../store/types';
+import businessCardImage from '../assets/sascha.png';
+
+// Default business card configuration
+// To customize locally without pushing to git, copy businessCard.config.local.example.ts
+// to businessCard.config.local.ts and modify it
+
+export const localBusinessCard: BusinessCard = {
+  name: 'Sascha Bach',
+  title: 'Web-Developer | Accessibility Advocate',
+  company: '',
+  email: 'freelancer@sascha-bach.de',
+  phone: '+49 179 9364867',
+  website: 'https://sascha-bach.de',
+  image: businessCardImage,
+  bio: 'Passionate about creating accessible and user-friendly web experiences.',
+  socialLinks: [
+    { platform: 'LinkedIn', url: 'https://linkedin.com/in/saschabach', icon: 'Linkedin' },
+    { platform: 'Codeberg', url: 'https://codeberg.org/saschab', icon: 'Github' },
+  ],
+  imprintUrl: 'https://sascha-bach.de/imprint',
+};

src/config/businessCard.config.ts

@@ -19,4 +19,5 @@ export const defaultBusinessCard: BusinessCard = {
     { platform: 'GitHub', url: 'https://github.com/johndoe', icon: 'Github' },
     { platform: 'Portfolio', url: 'https://johndoe.design', icon: 'Globe' },
   ],
+  // imprintUrl: 'https://yourwebsite.com/imprint',
 };

src/store/types.ts

@@ -14,6 +14,7 @@ export interface BusinessCard {
   image: string;
   bio: string;
   socialLinks: SocialLink[];
+  imprintUrl?: string;
 }
 
 export interface BusinessCardContextType {