@bytebrand/fe-ui-core-autobahn 1.0.8 → 1.0.10

package/chrome/Footer.tsx

@@ -67,6 +67,12 @@ const SOCIALS: ReadonlyArray<{ name: string; label: string; href: string }> = [
   { name: 'instagram', label: 'Instagram', href: 'https://instagram.com/auto.de_official/' },
 ];
 
+/** App store links (same real targets as the legacy 'Bleiben Sie in Kontakt' block, app.ts). */
+const APPS: ReadonlyArray<{ name: string; labelKey: string; href: string }> = [
+  { name: 'apple', labelKey: 'autobahn:chrome.iosApp', href: 'https://itunes.apple.com/us/app/yourapp/id1396544891' },
+  { name: 'android', labelKey: 'autobahn:chrome.androidApp', href: 'https://play.google.com/store/apps/details?id=de.auto.app' },
+];
+
 /** financing defaults for the §17a PAngV representative example (same source the legacy footer uses). */
 const FIN = defaultConfig.financing;
 const fmt2 = (n: number): string => Number(n).toFixed(2);
@@ -97,6 +103,27 @@ const Footer: React.FunctionComponent<FooterProps> = ({ t }) => {
           <p className="md-body-sm" style={{ marginTop: 14, maxWidth: 240 }}>
             {t('autobahn:chrome.brandBlurb')}
           </p>
+          <div style={{ marginTop: 18 }}>
+            <div className="md-title-sm" style={{ marginBottom: 10 }}>
+              {t('autobahn:chrome.stayInContact')}
+            </div>
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+              {APPS.map((a) => (
+                <li key={a.name}>
+                  <a
+                    href={a.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="md-body-sm"
+                    style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--md-on-surface-variant)', textDecoration: 'none' }}
+                  >
+                    <SocialIcon name={a.name} />
+                    {t(a.labelKey)}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
           <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
             {SOCIALS.map((s) => (
               <a
@@ -176,8 +203,8 @@ const Footer: React.FunctionComponent<FooterProps> = ({ t }) => {
 };
 
 /**
- * Inline brand-correct social glyphs. lucide-react dropped the brand marks (facebook/twitter/
- * instagram) from its `icons` map, so the shared Icon would render nothing — use small inline SVGs.
+ * Inline brand-correct glyphs (social profiles + app stores). lucide-react dropped these brand
+ * marks from its `icons` map, so the shared Icon would render nothing — use small inline SVGs.
  */
 const SocialIcon: React.FunctionComponent<{ name: string }> = ({ name }) => {
   const common = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'currentColor' as const, 'aria-hidden': true };
@@ -187,7 +214,23 @@ const SocialIcon: React.FunctionComponent<{ name: string }> = ({ name }) => {
   if (name === 'twitter') {
     return (<svg {...common}><path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.65l-5.21-6.81-5.96 6.81H1.69l7.73-8.84L1.25 2.25h6.82l4.71 6.23 5.46-6.23Zm-1.16 17.52h1.83L7.01 4.13H5.05l12.03 15.64Z" /></svg>);
   }
-  return (<svg {...common}><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 1.62c-3.15 0-3.5.01-4.74.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71-.06 1.24-.07 1.59-.07 4.74s.01 3.5.07 4.74c.04.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.24.06 1.59.07 4.74.07s3.5-.01 4.74-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.24.07-1.59.07-4.74s-.01-3.5-.07-4.74c-.04-.9-.19-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.24-.06-1.59-.07-4.74-.07Zm0 2.76a5.46 5.46 0 1 1 0 10.92 5.46 5.46 0 0 1 0-10.92Zm0 9a3.54 3.54 0 1 0 0-7.08 3.54 3.54 0 0 0 0 7.08Zm6.95-9.22a1.28 1.28 0 1 1-2.55 0 1.28 1.28 0 0 1 2.55 0Z" /></svg>);
+  if (name === 'instagram') {
+    return (<svg {...common}><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 1.62c-3.15 0-3.5.01-4.74.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71-.06 1.24-.07 1.59-.07 4.74s.01 3.5.07 4.74c.04.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.24.06 1.59.07 4.74.07s3.5-.01 4.74-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.24.07-1.59.07-4.74s-.01-3.5-.07-4.74c-.04-.9-.19-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.24-.06-1.59-.07-4.74-.07Zm0 2.76a5.46 5.46 0 1 1 0 10.92 5.46 5.46 0 0 1 0-10.92Zm0 9a3.54 3.54 0 1 0 0-7.08 3.54 3.54 0 0 0 0 7.08Zm6.95-9.22a1.28 1.28 0 1 1-2.55 0 1.28 1.28 0 0 1 2.55 0Z" /></svg>);
+  }
+  // Apple/Android use their own native viewBoxes (paths lifted from the legacy
+  // iconsvg/SVG/social/{Apple,AndroidLogo}.tsx, recolored to currentColor).
+  if (name === 'apple') {
+    return (
+      <svg width={18} height={18} viewBox="0 0 291.538 291.538" fill="currentColor" aria-hidden="true">
+        <path d="M188.373 44.308c10.97-11.744 18.39-28.049 16.359-44.308-15.804.564-34.958 9.277-46.302 21.02-10.169 10.396-19.072 27.011-16.696 42.951 17.635 1.193 35.651-7.938 46.639-19.663zm33.657 112.285c-.337-36.451 28.859-53.958 30.152-54.804-16.414-24.753-41.977-28.14-51.081-28.522-21.767-2.285-42.442 13.182-53.493 13.182-11.006 0-28.03-12.882-46.083-12.536-23.733.391-45.601 14.211-57.79 36.114-24.654 44.063-6.319 109.336 17.705 145.077 11.744 17.497 25.727 37.125 44.089 36.415 17.725-.71 24.407-11.789 45.792-11.789 21.394 0 27.384 11.789 46.101 11.434 19.045-.355 31.098-17.834 42.742-35.386 13.473-20.292 19.027-39.938 19.345-40.93-.409-.237-37.088-14.666-37.479-58.255z" />
+      </svg>
+    );
+  }
+  return (
+    <svg width={18} height={18} viewBox="0 0 505.145 505.145" fill="currentColor" aria-hidden="true">
+      <path d="M68.541 164.715h-1.294c-16.588 0-30.113 13.568-30.113 30.113v131.107c0 16.61 13.525 30.134 30.113 30.134h1.316c16.588 0 30.113-13.568 30.113-30.134V194.827c-.022-16.544-13.568-30.112-30.135-30.112zM113.085 376.54c0 15.229 12.446 27.632 27.675 27.632h29.574v70.817c0 16.631 13.568 30.156 30.113 30.156h1.294c16.61 0 30.156-13.546 30.156-30.156v-70.817h41.33v70.817c0 16.631 13.611 30.156 30.156 30.156h1.273c16.609 0 30.134-13.546 30.134-30.156v-70.817h29.595c15.207 0 27.654-12.403 27.654-27.632V169.525H113.085zM322.041 43.983l23.491-36.26c1.51-2.287.841-5.414-1.467-6.903-2.286-1.51-5.414-.884-6.903 1.467l-24.353 37.512c-18.27-7.485-38.676-11.691-60.226-11.691-21.571 0-41.934 4.206-60.247 11.691l-24.31-37.512C166.538-.064 163.388-.69 161.08.82c-2.308 1.488-2.977 4.616-1.467 6.903l23.512 36.26c-42.387 20.773-70.968 59.924-70.968 104.834 0 2.761.173 5.479.41 8.175H392.62c.237-2.696.388-5.414.388-8.175.001-44.91-28.602-84.061-70.967-104.834zm-134.386 64.928c-7.442 0-13.482-5.997-13.482-13.46s6.04-13.439 13.482-13.439c7.485 0 13.482 5.975 13.482 13.439s-6.04 13.46-13.482 13.46zm129.835 0c-7.442 0-13.482-5.997-13.482-13.46s6.04-13.439 13.482-13.439c7.463 0 13.46 5.975 13.46 13.439 0 7.463-5.997 13.46-13.46 13.46zM437.876 164.715h-1.251c-16.588 0-30.156 13.568-30.156 30.113v131.107c0 16.61 13.59 30.134 30.156 30.134h1.273c16.609 0 30.113-13.568 30.113-30.134V194.827c0-16.544-13.547-30.112-30.135-30.112z" />
+    </svg>
+  );
 };
 
 export default Footer;

package/locales/de/autobahn.json

@@ -197,6 +197,9 @@
     "dealerRegister": "Registrieren",
     "dealerTerms": "AGB für Händler",
     "dealerPurchaseTerms": "AEB für Händler",
+    "stayInContact": "Bleiben Sie in Kontakt",
+    "iosApp": "AUTO.DE für iOS",
+    "androidApp": "AUTO.DE für Android",
     "brandBlurb": "Auto online kaufen — geprüfte Fahrzeuge mit Lieferung nach Hause. auto.de GmbH, Sandersdorf-Brehna.",
     "scrollUp": "Nach Oben",
     "favoritesCount": "Merkliste",

package/locales/en/autobahn.json

@@ -197,6 +197,9 @@
     "dealerRegister": "Register",
     "dealerTerms": "Terms for dealers",
     "dealerPurchaseTerms": "Purchase terms for dealers",
+    "stayInContact": "Stay in touch",
+    "iosApp": "AUTO.DE for iOS",
+    "androidApp": "AUTO.DE for Android",
     "brandBlurb": "Buy cars online — verified vehicles with home delivery. auto.de GmbH, Sandersdorf-Brehna.",
     "scrollUp": "Back to top",
     "favoritesCount": "Watchlist",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",