@repobit/dex-system-design 0.19.2 → 0.21.0

package/src/components/footer/footer-lp.stories.js

@@ -1,69 +1,34 @@
-// BdFooterLP.stories.js
 import { html } from 'lit';
+import '../divider/divider-horizontal.js';
+import '../divider/divider-vertical.js';
+import '../footer/footer-nav-menu.js';
 import './footer-lp.js';
 
 export default {
-  title    : 'Components/Footer/BdFooterLP',
-  component: 'bd-footer-lp',
-  argTypes : {
-    currentLocale: {
-      control    : 'text',
-      description: 'Codul de locale curent (ex: en, ro, de-de)',
-      table      : { defaultValue: { summary: 'en' } }
-    },
-    maxColumnsPerRow: {
-      control    : { type: 'number', min: 1, max: 4 },
-      description: 'Numărul maxim de coloane pentru quick links',
-      table      : { defaultValue: { summary: 2 } }
-    },
-    selectedCountry: {
-      control    : 'text',
-      description: 'Țara selectată în footer',
-      table      : { defaultValue: { summary: 'Choose your country' } }
-    },
-    _isMobile: {
-      control    : 'boolean',
-      description: 'Forțează modul mobile pentru testare',
-      table      : { defaultValue: { summary: false } }
-    },
-    _countriesOpen: {
-      control    : 'boolean',
-      description: 'Controlează dacă dropdown-ul cu țări este deschis',
-      table      : { defaultValue: { summary: false } }
-    }
+  title     : 'Components/Footer/BdFooterLP',
+  component : 'bd-footer-lp',
+  parameters: {
+    layout: 'fullscreen'
   }
 };
 
-const Template = (args) => {
-  return html`
-    <bd-footer-lp
-      .currentLocale=${args.currentLocale}
-      .maxColumnsPerRow=${args.maxColumnsPerRow}
-      .selectedCountry=${args.selectedCountry}
-      ._isMobile=${args._isMobile}
-      ._countriesOpen=${args._countriesOpen}
-    >
-      <span slot="logo">
-        <img src="/assets/BD_logo.png" alt="Bitdefender Logo" style="height: 40px;" />
-      </span>
-
-      <div slot="top-right">
-        <img src="/assets/Bitdefender-Masterbrand.png" alt="Masterbrand" style="height: 40px;" />
-      </div>
-
-      <div slot="anpc">
-        <img src="/assets/anpc.png" alt="Certificat ANPC" style="height: 30px;" />
-      </div>
-    </bd-footer-lp>
-  `;
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  currentLocale   : 'en',
-  maxColumnsPerRow: 2,
-  selectedCountry : 'Choose your country',
-  _isMobile       : false,
-  _countriesOpen  : false
-};
+export const Default = () => html`
+  <bd-footer-lp maxColumnsPerRow="3">
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal Information</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Privacy Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Site Map</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Company</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="https://www.bitdefender.com/consumer/support/">Contact Us</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#">Privacy Settings</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#" class="impressum-link">Impressum</a>
+    </bd-footer-nav>
+  </bd-footer-lp>
+`;
 

package/src/components/footer/footer-nav-menu.css.js

@@ -22,17 +22,16 @@ export default css`
     text-decoration: none;
   }
 
-  /* Stiluri pentru mobil */
-  @media (max-width: 768px) {
-    .footer-nav-main {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--spacing-16);
-    }
+@media (max-width: 767px) {
+  .footer-nav-main {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-16);
+  }
 
-    .footer-nav-main ::slotted(bd-divider-vertical) {
-      display: none !important;
-    }
+  .footer-nav-main ::slotted(bd-divider-vertical) {
+    display: none !important;
   }
+}
  
 `;

package/src/components/footer/footer.css.js

@@ -37,12 +37,6 @@ export default css`
   padding: 2px 6px;
 }
 
-// /* Stiluri pentru link-urile din social icons */
-// .social-icons a:focus {
-//   border-radius: 50%;
-//   padding: 4px;
-// }
-
 /* Stiluri pentru link-urile din navigația principală */
 .footer-nav-main a:focus {
   padding: 2px 6px;
@@ -227,6 +221,45 @@ bd-footer-links-group a:focus {
     align-items: center;
     gap: var(--spacing-8);
   }
+.leading-icon {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 10C1.25 5.16751 5.16751 1.25 10 1.25C14.8325 1.25 18.75 5.16751 18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10ZM10 2.5C9.68262 2.5 9.36983 2.51971 9.06282 2.55799V4.88384C9.06282 5.10767 8.98274 5.32411 8.83705 5.49404L7.13041 7.48466C6.9523 7.6924 6.69232 7.81196 6.41867 7.81196H4.84449L4.62219 8.57915L5.38381 9.44622L6.23342 8.7515C6.62081 8.43474 7.18869 8.47806 7.52354 8.84993L9.9671 11.5636C10.2837 11.9151 10.2887 12.4474 9.97888 12.8049L6.61009 16.692C7.6282 17.2087 8.78009 17.5 10 17.5C13.0594 17.5 15.691 15.6681 16.8577 13.0414L14.6283 15.6137C14.4503 15.8192 14.1918 15.9372 13.9199 15.9372H12.631C11.9827 15.9372 11.5301 15.295 11.7481 14.6844L12.9639 11.2803L11.6036 10.6973C11.1277 10.4933 10.9072 9.94221 11.1112 9.4663L11.8444 7.75544C11.9922 7.41073 12.3311 7.18724 12.7061 7.18724H14.601C14.6608 7.18724 14.7203 7.19296 14.7785 7.2042L14.6138 6.87474H12.5001C11.9823 6.87474 11.5626 6.455 11.5626 5.93724V4.80038C11.5626 4.58106 11.6395 4.36869 11.7799 4.20021L12.7599 3.02412C11.9057 2.68588 10.9746 2.5 10 2.5ZM13.9089 3.59792L12.8126 4.91352V5.62474H14.8069C15.162 5.62474 15.4866 5.82536 15.6455 6.14297L16.3292 7.51038C16.7486 8.34928 15.8126 9.2161 15.0083 8.73354L14.5145 8.43724H12.9122L12.3832 9.67147L13.7263 10.2471C14.1815 10.4422 14.4064 10.9577 14.2399 11.4241L13.0744 14.6872H13.7772L17.4893 10.404C17.4964 10.2702 17.5 10.1355 17.5 10C17.5 7.29005 16.0627 4.91579 13.9089 3.59792ZM7.81282 2.82393C4.98528 3.68463 2.86587 6.17069 2.54281 9.1939C3.18286 9.98092 4.99058 12.3835 5.40842 12.9396C5.58837 13.1791 5.63756 13.4816 5.55863 13.7579L5.07728 15.4426L5.59227 15.9578L8.85346 12.1949L6.79402 9.90779L5.94154 10.6049C5.55068 10.9244 4.97693 10.8771 4.64373 10.4978L3.57 9.27539C3.35876 9.03489 3.28482 8.70323 3.3739 8.39577L3.70923 7.23854C3.82536 6.83775 4.19241 6.56196 4.60969 6.56196H6.27497L7.81282 4.76822V2.82393ZM4.03367 14.5452C3.32557 13.6171 2.82909 12.5189 2.61624 11.3226C3.25918 12.1634 3.97861 13.118 4.31401 13.564L4.03367 14.5452Z" fill="white"/></svg>') no-repeat center;
+  background-size: contain;
+}
+
+.bd-youtube {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.4991 5.66068C23.2223 4.61146 22.4094 3.78802 21.3768 3.50911C19.5049 3 12 3 12 3C12 3 4.49506 3 2.62321 3.50911C1.59063 3.78802 0.777737 4.61146 0.500915 5.66068C0 7.5599 0 11.5177 0 11.5177C0 11.5177 0 15.4755 0.500915 17.3747C0.777737 18.424 1.59063 19.212 2.62321 19.4909C4.49506 20 12 20 12 20C12 20 19.5049 20 21.3768 19.4909C22.4094 19.212 23.2223 18.4195 23.4991 17.3747C24 15.4755 24 11.5177 24 11.5177C24 11.5177 24 7.5599 23.4991 5.66068ZM9.54815 15.1125V7.92292L15.8184 11.5177L9.54815 15.1125Z" fill="white"/></svg>');
+}
+.bd-facebook {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12.0447C24 5.39188 18.6281 0 12 0C5.37188 0 0 5.39188 0 12.0447C0 17.6906 3.87656 22.4332 9.10312 23.7365V15.724H6.62812V12.0447H9.10312V10.4591C9.10312 6.36111 10.95 4.4603 14.9625 4.4603C15.7219 4.4603 17.0344 4.61086 17.5734 4.76142V8.09253C17.2922 8.0643 16.8 8.04548 16.1859 8.04548C14.2172 8.04548 13.4578 8.79357 13.4578 10.7367V12.0447H17.3766L16.7016 15.724H13.4531V24C19.3969 23.2801 24 18.2035 24 12.0447Z" fill="white"/></svg>');
+}
+.bd-instagram {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.0025 6.35948C8.88098 6.35948 6.36319 8.87783 6.36319 12C6.36319 15.1222 8.88098 17.6405 12.0025 17.6405C15.1239 17.6405 17.6417 15.1222 17.6417 12C17.6417 8.87783 15.1239 6.35948 12.0025 6.35948ZM12.0025 15.6671C9.98528 15.6671 8.3362 14.0225 8.3362 12C8.3362 9.97746 9.98037 8.33292 12.0025 8.33292C14.0245 8.33292 15.6687 9.97746 15.6687 12C15.6687 14.0225 14.0196 15.6671 12.0025 15.6671ZM19.1877 6.12875C19.1877 6.8602 18.5988 7.44438 17.8724 7.44438C17.1411 7.44438 16.5571 6.85529 16.5571 6.12875C16.5571 5.40221 17.146 4.81312 17.8724 4.81312C18.5988 4.81312 19.1877 5.40221 19.1877 6.12875ZM22.9227 7.46402C22.8393 5.70166 22.4368 4.14058 21.146 2.8544C19.8601 1.56822 18.2994 1.16568 16.5374 1.07732C14.7215 0.974227 9.27853 0.974227 7.46258 1.07732C5.70552 1.16077 4.14479 1.56332 2.85399 2.84949C1.56319 4.13567 1.16564 5.69675 1.0773 7.45911C0.974233 9.27547 0.974233 14.7196 1.0773 16.536C1.16074 18.2983 1.56319 19.8594 2.85399 21.1456C4.14479 22.4318 5.70061 22.8343 7.46258 22.9227C9.27853 23.0258 14.7215 23.0258 16.5374 22.9227C18.2994 22.8392 19.8601 22.4367 21.146 21.1456C22.4319 19.8594 22.8344 18.2983 22.9227 16.536C23.0258 14.7196 23.0258 9.28037 22.9227 7.46402ZM20.5767 18.4849C20.1939 19.4471 19.4528 20.1883 18.4859 20.5761C17.038 21.1505 13.6025 21.018 12.0025 21.018C10.4025 21.018 6.96196 21.1456 5.51902 20.5761C4.55705 20.1932 3.81595 19.452 3.42822 18.4849C2.85399 17.0367 2.9865 13.6004 2.9865 12C2.9865 10.3996 2.8589 6.95838 3.42822 5.51512C3.81104 4.55294 4.55215 3.81167 5.51902 3.42385C6.96687 2.84949 10.4025 2.98204 12.0025 2.98204C13.6025 2.98204 17.0429 2.8544 18.4859 3.42385C19.4479 3.80676 20.189 4.54803 20.5767 5.51512C21.1509 6.96329 21.0184 10.3996 21.0184 12C21.0184 13.6004 21.1509 17.0416 20.5767 18.4849Z" fill="white"/></svg>');
+}
+.bd-linkedin {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.4286 1H2.56652C1.70223 1 1 1.71205 1 2.58616V21.4138C1 22.2879 1.70223 23 2.56652 23H21.4286C22.2929 23 23 22.2879 23 21.4138V2.58616C23 1.71205 22.2929 1 21.4286 1ZM7.64911 19.8571H4.38839V9.35804H7.65402V19.8571H7.64911ZM6.01875 7.92411C4.97277 7.92411 4.12812 7.07455 4.12812 6.03348C4.12812 4.99241 4.97277 4.14286 6.01875 4.14286C7.05982 4.14286 7.90937 4.99241 7.90937 6.03348C7.90937 7.07946 7.06473 7.92411 6.01875 7.92411ZM19.8719 19.8571H16.6112V14.75C16.6112 13.5321 16.5866 11.9656 14.917 11.9656C13.2179 11.9656 12.9576 13.2915 12.9576 14.6616V19.8571H9.69688V9.35804H12.825V10.792H12.8692C13.3062 9.96696 14.3719 9.09777 15.958 9.09777C19.258 9.09777 19.8719 11.2732 19.8719 14.1018V19.8571Z" fill="white"/></svg>');
+}
+
+.bd-tiktok {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23 9.84003C20.9356 9.84445 18.922 9.19997 17.2438 7.99766V16.3797C17.2433 17.9321 16.7689 19.4474 15.884 20.7228C14.9991 21.9983 13.7459 22.9731 12.292 23.5169C10.8381 24.0608 9.25287 24.1477 7.74825 23.7661C6.24363 23.3845 4.89139 22.5525 3.87237 21.3815C2.85335 20.2104 2.21614 18.7561 2.04595 17.2131C1.87577 15.6701 2.18073 14.1118 2.92004 12.7468C3.65936 11.3818 4.79778 10.2751 6.18306 9.57468C7.56834 8.87428 9.13443 8.61357 10.6719 8.82743V13.0419C9.96888 12.8206 9.21393 12.8271 8.51483 13.0604C7.81573 13.2938 7.20822 13.742 6.77905 14.3413C6.34987 14.9405 6.12099 15.66 6.12506 16.3971C6.12913 17.1341 6.36596 17.8511 6.80173 18.4455C7.2375 19.04 7.84993 19.4815 8.55157 19.7071C9.2532 19.9327 10.0082 19.9309 10.7087 19.7018C11.4092 19.4727 12.0194 19.0281 12.4522 18.4315C12.8851 17.8349 13.1183 17.1168 13.1188 16.3797V0H17.2438C17.2414 0.348908 17.2712 0.697289 17.3328 1.04073C17.4763 1.80627 17.7743 2.53452 18.2087 3.18097C18.6431 3.82741 19.2048 4.37847 19.8594 4.80047C20.7911 5.41593 21.8834 5.74363 23 5.74275V9.84003Z" fill="white"/></svg>');
+}
+
+.bd-twitter {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.14286 1C2.40937 1 1 2.40937 1 4.14286V19.8571C1 21.5906 2.40937 23 4.14286 23H19.8571C21.5906 23 23 21.5906 23 19.8571V4.14286C23 2.40937 21.5906 1 19.8571 1H4.14286ZM18.7326 5.125L13.6353 10.9491L19.6312 18.875H14.9366L11.2634 14.0674L7.05491 18.875H4.72232L10.1732 12.6433L4.42277 5.125H9.23527L12.5598 9.52009L16.4 5.125H18.7326ZM16.8763 17.4804L8.53304 6.44598H7.1433L15.5799 17.4804H16.8714H16.8763Z" fill="white"/></svg>');
+}
+
+.arrow-up {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.55762 5.80806C9.80169 5.56398 10.1974 5.56398 10.4415 5.80806L17.3165 12.6831L16.4326 13.5669L9.99956 7.13388L3.5665 13.5669L2.68262 12.6831L9.55762 5.80806Z" fill="white"/></svg>');
+}
+
+.arrow-down {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99956 12.8662L3.5665 6.43311L2.68262 7.31699L9.55762 14.192C9.80169 14.4361 10.1974 14.4361 10.4415 14.192L17.3165 7.31699L16.4326 6.43311L9.99956 12.8662Z" fill="white"/></svg>');
+}
+.close-icon {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.18182 9L0.564941 15.6169L2.38322 17.4352L9.00007 10.8183L15.6169 17.4352L17.4352 15.6169L10.8183 9L17.4352 2.38317L15.6169 0.564894L9.00007 7.18174L2.38322 0.564894L0.564941 2.38317L7.18182 9Z" fill="white"/></svg>');
+}
 
   a {
     color: var(--color-neutral-0);
@@ -471,11 +504,13 @@ bd-footer-links-group a:focus {
   height: var(--dimension-20px);
   display: block;
 }
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   :host {
     font-size: var(--typography-body-small-fontSize);
   }
-
+.footer-address{
+  display: none !important;
+  }
   .footer-nav-main {
     flex-direction: column;
     align-items: flex-start;
@@ -692,4 +727,56 @@ bd-footer-links-group a:focus {
     text-align: left;
   }
 }
+.tablet-divider {
+  display: none;
+}
+
+/* Afișează divider-ul doar pe tablete */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .tablet-divider {
+    display: block;
+    order: 2;
+    margin: var(--spacing-16) 0;
+    width: 100%;
+  }
+  .footer-address{
+  display: none !important;
+  }
+  .footer-links {
+    display: flex;
+    flex-direction: column;
+    gap: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .footer-links-left,
+  .footer-links-right {
+    width: 100%;
+  }
+
+  .footer-links-left {
+    order: 1;
+  }
+
+  .footer-links > bd-divider-horizontal {
+    order: 2;
+    margin: var(--spacing-16) 0;
+    width: 100%;
+  }
+  /* Ascunde ultimul divider (cel din afara .footer-links) pe tablete */
+  .footer-links + bd-divider-horizontal {
+    display: none !important;
+  }
+  
+  .footer-links-right {
+    order: 3;
+    display: flex;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+    .footer-countries-container {
+    display: inline-flex;
+    gap: 10rem;
+    flex-wrap: wrap;
+}
+}
 `;

package/src/components/footer/footer.js

@@ -4,6 +4,7 @@ import '../../components/divider/divider-vertical.js';
 import '../../components/footer/footer-links-group.js';
 import '../../components/footer/footer-nav-menu.js';
 import '../../components/grid/grid.js';
+import '../../components/link/link.js';
 import { tokens } from "../../tokens/tokens.js";
 import footerCSS from './footer.css.js';
 import { localeMap } from './localeMap.js';
@@ -24,7 +25,7 @@ export class BdFooter extends LitElement {
     this.maxColumnsPerRow = 2;
     this.currentLocale = 'en';
     this.selectedCountry = 'Choose your country';
-    this._isMobile = window.innerWidth <= 768;
+    this._isMobile = window.innerWidth <= 767;
     this._countriesContainer = null;
   }
 
@@ -43,8 +44,6 @@ export class BdFooter extends LitElement {
   firstUpdated() {
     super.firstUpdated();
     this._updateNavLinks();
-    // Obține referința la containerul cu țări
-    // this._countriesContainer = this.shadowRoot.querySelector('.footer-countries-container');
   }
 
   updated(changedProps) {
@@ -70,10 +69,8 @@ export class BdFooter extends LitElement {
       const impressumDivider = footerNav.querySelector('bd-divider-vertical + .impressum-link')?.previousElementSibling;
 
       if (impressumLink) {
-      // Ascunde/afișează link-ul Impressum
         impressumLink.style.display = showImpressum ? '' : 'none';
 
-        // Ascunde/afișează și separatorul dinaintea lui
         if (impressumDivider && impressumDivider.tagName === 'BD-DIVIDER-VERTICAL') {
           impressumDivider.style.display = showImpressum ? '' : 'none';
         }
@@ -82,10 +79,8 @@ export class BdFooter extends LitElement {
   }
 
   _scrollToCountries() {
-  // Obține referința la container doar atunci când este necesar
     const container = this.shadowRoot.querySelector('.footer-countries-container');
     if (container) {
-    // Așteaptă ca render-ul să se finalizeze
       setTimeout(() => {
         container.scrollIntoView({
           behavior: 'smooth',
@@ -96,7 +91,6 @@ export class BdFooter extends LitElement {
   }
 
   _scrollToTop() {
-    // Scroll smooth către începutul footer-ului
     this.scrollIntoView({
       behavior: 'smooth',
       block   : 'start'
@@ -104,8 +98,8 @@ export class BdFooter extends LitElement {
   }
 
   _handleResize() {
-    this._isMobile = window.innerWidth <= 768;
-    const newIsMobile = window.innerWidth <= 768;
+    this._isMobile = window.innerWidth <= 767;
+    const newIsMobile = window.innerWidth <= 767;
     console.log('Resize - Old isMobile:', this._isMobile, 'New isMobile:', newIsMobile, 'Window width:', window.innerWidth);
 
     if (this._isMobile !== newIsMobile) {
@@ -122,27 +116,22 @@ export class BdFooter extends LitElement {
       return;
     }
 
-    // Creează o versiune normalized a localeMap cu cheile lowercase
     const normalizedLocaleMap = {};
     Object.entries(localeMap).forEach(([key, value]) => {
       normalizedLocaleMap[key.toLowerCase()] = value;
     });
 
-    // Încearcă mai întâi potrivire exactă
     let country = normalizedLocaleMap[urlLocale];
 
-    // Dacă nu găsești potrivire exactă, încearcă să găsești cea mai bună potrivire
     if (!country && urlLocale) {
       const localeParts = urlLocale.split('-');
       const language = localeParts[0];
       const region = localeParts[1];
 
-      // Caută o potrivire care să înceapă cu același limbaj
       const possibleMatches = Object.entries(normalizedLocaleMap)
         .filter(([key]) => key.startsWith(language));
 
       if (possibleMatches.length > 0) {
-        // Preferă potrivirea cu aceeași regiune dacă există
         const exactRegionMatch = possibleMatches.find(([key]) => {
           const keyParts = key.split('-');
           const keyRegion = keyParts[1];
@@ -154,13 +143,11 @@ export class BdFooter extends LitElement {
 
         if (exactRegionMatch) {
           country = exactRegionMatch[1];
-          // Recuperează cheia originală din localeMap
           const originalKey = Object.keys(localeMap).find(k =>
             k.toLowerCase() === exactRegionMatch[0]
           );
           this.currentLocale = originalKey || exactRegionMatch[0];
         } else {
-          // Altfel, ia prima potrivire
           country = possibleMatches[0][1];
           const originalKey = Object.keys(localeMap).find(k =>
             k.toLowerCase() === possibleMatches[0][0]
@@ -170,7 +157,6 @@ export class BdFooter extends LitElement {
       }
     }
 
-    // Setează valorile pentru țară și locale
     if (country) {
       this.selectedCountry = country;
     }
@@ -182,14 +168,12 @@ export class BdFooter extends LitElement {
       this.currentLocale = originalKey || urlLocale;
     }
 
-    // Actualizează linkurile de navigație
     this._updateNavLinks();
   }
 
   _toggleCountries() {
     this._countriesOpen = !this._countriesOpen;
 
-    // Dacă se închide dropdown-ul, fac scroll înapoi sus
     if (!this._countriesOpen) {
       this._scrollToTop();
     }
@@ -198,7 +182,6 @@ export class BdFooter extends LitElement {
   _closeCountries() {
     this._countriesOpen = false;
 
-    // Doar pentru desktop, facem scroll înapoi sus
     if (!this._isMobile) {
       this._scrollToTop();
     }
@@ -208,7 +191,6 @@ export class BdFooter extends LitElement {
     e.preventDefault();
     this._selectCountry(countryLabel);
 
-    // Redirect către pagina cu noul locale
     const newPath = `/${locale.toLowerCase()}/`;
     window.location.href = newPath;
   }
@@ -217,7 +199,6 @@ export class BdFooter extends LitElement {
     this.selectedCountry = countryLabel;
     this._countriesOpen = false;
 
-    // Găsește locale-ul corespunzător pentru țara selectată
     const localeEntry = Object.entries(localeMap).find(
       ([, country]) => country === countryLabel
     );
@@ -237,15 +218,13 @@ export class BdFooter extends LitElement {
     }));
   }
 
-
-
   get locale() {
     const val = (this.currentLocale || 'en').toLowerCase();
     return val;
   }
 
   _updateSlotStyles() {
-    const isMobile = window.innerWidth <= 768;
+    const isMobile = window.innerWidth <= 767;
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
     const assignedElements = slot.assignedElements();
 
@@ -261,8 +240,7 @@ export class BdFooter extends LitElement {
   }
 
   _updateNavLinks() {
-    // Actualizează linkurile care sunt acum în shadow DOM
-    const links = this.shadowRoot.querySelectorAll('.footer-nav-main a');
+    const links = this.shadowRoot.querySelectorAll('.footer-nav-main bd-link');
     const linkPaths = ['consumer', 'small-business', 'business', 'partners'];
     const currentLocale = this.locale;
 
@@ -272,10 +250,10 @@ export class BdFooter extends LitElement {
       }
     });
   }
+
   render() {
     const year = new Date().getFullYear();
     const showAnpc = this.locale.startsWith('ro');
-    const showImpressum = this.locale === 'de-de' || this.locale === 'de';
     const countriesList = this.getCountriesList();
 
     const masterbrandUrl = this._isMobile
@@ -287,36 +265,26 @@ export class BdFooter extends LitElement {
       : '/assets/anpc.png';
 
     const logoUrl = '/assets/BD_logo.png';
-    const facebookIcon = '/assets/facebook_vector.svg';
-    const xIcon = '/assets/x_vector.svg';
-    const linkedinIcon = '/assets/linkedin_vector.svg';
-    const youtubeIcon = '/assets/youtube_vector.svg';
-    const instagramIcon = '/assets/instagram_vector.svg';
-    const tiktokIcon = '/assets/tiktok_vector.svg';
-    const leadingIcon = '/assets/leading.svg';
-    const closeIcon = '/assets/close_icon.png';
-
     const chunkSize = Math.ceil(countriesList.length / 3);
     const countryChunks = [
       countriesList.slice(0, chunkSize),
       countriesList.slice(chunkSize, chunkSize * 2),
       countriesList.slice(chunkSize * 2)
     ];
-    // Obține elementele din slot-ul quick-links
+
     const quickLinksSlot = this.shadowRoot?.querySelector('slot[name="quick-links"]');
     const quickLinksElements = quickLinksSlot?.assignedElements({ flatten: true }) || [];
 
-    // Extrage toate componentele bd-footer-links-group din slot
     const linksGroups = [];
     quickLinksElements.forEach(el => {
       if (el.tagName === 'BD-FOOTER-LINKS-GROUP') {
         linksGroups.push(el);
       } else {
-      // Dacă este un container, extrage copiii săi
         const children = el.querySelectorAll ? el.querySelectorAll('bd-footer-links-group') : [];
         children.forEach(child => linksGroups.push(child));
       }
     });
+
     return html`
   <div class="footer-top-bleed">
     <div class="container">
@@ -360,21 +328,21 @@ export class BdFooter extends LitElement {
           <slot name="quick-links"></slot>
         </bd-grid>
       </div>
-      
+        <bd-divider-horizontal class="tablet-divider" width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
       ${this._isMobile
         ? html`<bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>`
         : ''}
       
       <div class="footer-links-right social-icons">
-        <slot name="social-links">
-          <a href="https://www.facebook.com/bitdefender"><img src="${facebookIcon}" alt="Facebook"></a>
-          <a href="https://twitter.com/bitdefender"><img src="${xIcon}" alt="X"></a>
-          <a href="https://www.linkedin.com/company/bitdefender"><img src="${linkedinIcon}" alt="LinkedIn"></a>
-          <a href="https://www.youtube.com/c/Bitdefender"><img src="${youtubeIcon}" alt="YouTube"></a>
-          <a href="https://www.instagram.com/bitdefender/"><img src="${instagramIcon}" alt="Instagram"></a>
-          <a href="https://www.tiktok.com/@bitdefender"><img src="${tiktokIcon}" alt="TikTok"></a>
-        </slot>
-      </div>
+    <slot name="social-links">
+      <bd-link href="https://www.facebook.com/bitdefender" target="_blank" kind="secondary" class="bd-facebook">Facebook</bd-link>
+      <bd-link href="https://twitter.com/bitdefender" target="_blank" kind="secondary" class="bd-twitter">Twitter</bd-link>
+      <bd-link href="https://www.linkedin.com/company/bitdefender" target="_blank" kind="secondary" class="bd-linkedin">LinkedIn</bd-link>
+      <bd-link href="https://www.youtube.com/c/Bitdefender" target="_blank" kind="secondary" class="bd-youtube">YouTube</bd-link>
+      <bd-link href="https://www.instagram.com/bitdefender/" target="_blank" kind="secondary" class="bd-instagram">Instagram</bd-link>
+      <bd-link href="https://www.tiktok.com/@bitdefender" target="_blank" kind="secondary" class="bd-tiktok">TikTok</bd-link>
+    </slot>
+  </div>
     </div>
 
     ${!this._isMobile
@@ -420,13 +388,9 @@ export class BdFooter extends LitElement {
         
       <div class="footer-countries-toggle">
         <button class="country-toggle" @click="${this._toggleCountries}">
-          <img src="${leadingIcon}" alt="Leading icon">
+<span class="leading-icon" role="img" aria-label="Leading icon"></span>
           ${this.selectedCountry}
-          <span class="arrow">
-            ${this._countriesOpen
-              ? html`<img src="/assets/arrow_up.svg" alt="Arrow up">`
-              : html`<img src="/assets/arrow_down.svg" alt="Arrow down">`}
-          </span>
+         <span class="arrow ${this._countriesOpen ? 'arrow-up' : 'arrow-down'}"></span>
         </button>
       </div>
     </div>
@@ -434,18 +398,20 @@ export class BdFooter extends LitElement {
     ${this._countriesOpen
       ? html`
         <div class="footer-countries-container">
-          <button class="close-countries-button" @click="${this._closeCountries}">
-            <img src="${closeIcon}" alt="Close countries list">
-          </button>
+         <button class="close-countries-button" @click="${this._closeCountries}">
+  <span class="close-icon"></span>
+</button>
           ${countryChunks.map(chunk => html`
             <bd-footer-links-group slot="countries" title="${chunk === countryChunks[0] ? 'Choose your country' : ''}">
               ${chunk.map(c => html`
-                <a href="/${c.locale.toLowerCase()}/" 
-                   data-locale="${c.locale}" 
-                   class="${this.selectedCountry === c.label ? 'selected' : ''}" 
-                   @click="${(e) => this._handleCountryClick(e, c.label, c.locale)}">
+                <bd-link 
+                  href="/${c.locale.toLowerCase()}/" 
+                  data-locale="${c.locale}" 
+                  kind="light"
+                  class="${this.selectedCountry === c.label ? 'selected' : ''}" 
+                  @click="${(e) => this._handleCountryClick(e, c.label, c.locale)}">
                   ${c.label}
-                </a>
+                </bd-link>
               `)}
             </bd-footer-links-group>
           `)}