@repobit/dex-system-design 0.20.0 → 0.21.1

package/src/components/display/display.stories.js

@@ -0,0 +1,339 @@
+import { html } from 'lit';
+import '../heading/heading.js';
+import '../paragraph/paragraph.js';
+import './display.js';
+
+export default {
+  title    : 'Atoms/Display',
+  component: 'bd-display',
+  argTypes : {
+    kind: {
+      control    : { type: 'select' },
+      options    : ['sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+      description: 'Display size variant'
+    },
+    content: {
+      control    : 'text',
+      description: 'Display text content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Large display typography for hero sections, landing pages, and prominent headlines.'
+      }
+    }
+  }
+};
+
+const Template = ({ kind, content }) => html`
+  <bd-display kind="${kind}">${content}</bd-display>
+`;
+
+export const AllDisplaySizes = () => html`
+  <div style="display: flex; flex-direction: column; gap: 3rem; max-width: 1200px; margin: 0 auto;">
+    <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
+      <bd-display kind="3xl">Display 3XL - Largest Hero Text</bd-display>
+      <bd-p kind="small" style="margin-top: 1rem;">
+        Font size: var(--typography-display-3xl-fontSize)<br>
+        Perfect for main hero sections on landing pages
+      </bd-p>
+    </div>
+
+    <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
+      <bd-display kind="2xl">Display 2XL - Major Headlines</bd-display>
+      <bd-p kind="small" style="margin-top: 1rem;">
+        Font size: var(--typography-display-2xl-fontSize)<br>
+        Ideal for primary section titles and important announcements
+      </bd-p>
+    </div>
+
+    <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
+      <bd-display kind="xl">Display XL - Prominent Headers</bd-display>
+      <bd-p kind="small" style="margin-top: 1rem;">
+        Font size: var(--typography-display-xl-fontSize)<br>
+        Great for feature highlights and key value propositions
+      </bd-p>
+    </div>
+
+    <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
+      <bd-display kind="lg">Display LG - Standard Display</bd-display>
+      <bd-p kind="small" style="margin-top: 1rem;">
+        Font size: var(--typography-display-lg-fontSize)<br>
+        Balanced display size for most prominent text needs
+      </bd-p>
+    </div>
+
+    <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 2rem;">
+      <bd-display kind="md">Display MD - Compact Display</bd-display>
+      <bd-p kind="small" style="margin-top: 1rem;">
+        Font size: var(--typography-display-md-fontSize)<br>
+        Smaller display for sections with less space
+      </bd-p>
+    </div>
+
+    <div>
+      <bd-display kind="sm">Display SM - Minimal Display</bd-display>
+      <bd-p kind="small" style="margin-top: 1rem;">
+        Font size: var(--typography-display-sm-fontSize)<br>
+        Smallest display size, still larger than regular headings
+      </bd-p>
+    </div>
+  </div>
+`;
+AllDisplaySizes.parameters = {
+  docs: {
+    description: {
+      story: 'All display size variants from 3XL (largest) to SM (smallest) for comparison.'
+    }
+  }
+};
+
+export const Display3XL = Template.bind({});
+Display3XL.args = {
+  kind   : '3xl',
+  content: 'Transform Your Digital Security'
+};
+Display3XL.parameters = {
+  docs: {
+    description: {
+      story: 'Largest display size for main hero sections and primary landing page headlines.'
+    }
+  }
+};
+
+export const Display2XL = Template.bind({});
+Display2XL.args = {
+  kind   : '2xl',
+  content: 'Enterprise-Grade Protection'
+};
+Display2XL.parameters = {
+  docs: {
+    description: {
+      story: 'Extra large display for major section titles and important feature announcements.'
+    }
+  }
+};
+
+export const DisplayXL = Template.bind({});
+DisplayXL.args = {
+  kind   : 'xl',
+  content: 'Advanced Threat Intelligence'
+};
+DisplayXL.parameters = {
+  docs: {
+    description: {
+      story: 'Large display size for prominent headers and key value propositions.'
+    }
+  }
+};
+
+export const DisplayLG = Template.bind({});
+DisplayLG.args = {
+  kind   : 'lg',
+  content: 'Real-Time Malware Detection'
+};
+DisplayLG.parameters = {
+  docs: {
+    description: {
+      story: 'Standard display size for balanced prominence and readability.'
+    }
+  }
+};
+
+export const DisplayMD = Template.bind({});
+DisplayMD.args = {
+  kind   : 'md',
+  content: 'Multi-Platform Security'
+};
+DisplayMD.parameters = {
+  docs: {
+    description: {
+      story: 'Medium display size for sections with limited space but still needing impact.'
+    }
+  }
+};
+
+export const DisplaySM = Template.bind({});
+DisplaySM.args = {
+  kind   : 'sm',
+  content: 'Privacy First Approach'
+};
+DisplaySM.parameters = {
+  docs: {
+    description: {
+      story: 'Smallest display size, ideal for compact hero sections or prominent card titles.'
+    }
+  }
+};
+
+
+export const ComparisonWithHeadings = () => html`
+  <div style="max-width: 800px; margin: 0 auto;">
+    <bd-display kind="xl" style="margin-bottom: 3rem;">Display XL vs Headings</bd-display>
+    
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;">
+      <div>
+        <bd-h as="h3" style="margin-bottom: 1rem;">Display Typography</bd-h>
+        <bd-display kind="sm" style="margin-bottom: 1rem;">Display SM Text</bd-display>
+        <bd-display kind="md" style="margin-bottom: 1rem;">Display MD Text</bd-display>
+        <bd-display kind="lg" style="margin-bottom: 1rem;">Display LG Text</bd-display>
+        <bd-display kind="xl">Display XL Text</bd-display>
+      </div>
+      
+      <div>
+        <bd-h as="h3" style="margin-bottom: 1rem;">Heading Typography</bd-h>
+        <bd-h as="h6" style="margin-bottom: 1rem;">Heading H6 Text</bd-h>
+        <bd-h as="h5" style="margin-bottom: 1rem;">Heading H5 Text</bd-h>
+        <bd-h as="h4" style="margin-bottom: 1rem;">Heading H4 Text</bd-h>
+        <bd-h as="h3">Heading H3 Text</bd-h>
+      </div>
+    </div>
+    
+    <bd-p kind="regular" style="margin-top: 2rem;">
+      <strong>Usage guidelines:</strong> Display typography is for prominent, attention-grabbing text 
+      while headings are for semantic document structure and section titles.
+    </bd-p>
+  </div>
+`;
+ComparisonWithHeadings.parameters = {
+  docs: {
+    description: {
+      story: 'Comparison between display typography and heading typography to demonstrate their different use cases and visual hierarchy.'
+    }
+  }
+};
+
+export const LandingPageExample = () => html`
+  <div style="max-width: 1400px; margin: 0 auto;">
+    <!-- Hero Section -->
+    <section style="text-align: center; padding: 4rem 2rem; background: #f8fafc;">
+      <bd-display kind="2xl" style="margin-bottom: 1rem;">
+        Complete Digital Protection
+      </bd-display>
+      <bd-display kind="lg" style="margin-bottom: 2rem; color: #3b82f6;">
+        For Home & Business
+      </bd-display>
+      <bd-p kind="lead" style="max-width: 600px; margin: 0 auto;">
+        Enterprise-grade security solutions tailored for modern threats and evolving digital landscapes.
+      </bd-p>
+    </section>
+
+    <!-- Features Section -->
+    <section style="padding: 4rem 2rem;">
+      <bd-display kind="xl" style="text-align: center; margin-bottom: 3rem;">
+        Why Choose Our Solution?
+      </bd-display>
+      
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
+        <div style="text-align: center;">
+          <bd-display kind="lg" style="color: #3b82f6; margin-bottom: 1rem;">99.9%</bd-display>
+          <bd-h as="h4" style="margin-bottom: 1rem;">Threat Detection Rate</bd-h>
+          <bd-p kind="regular">Industry-leading accuracy in identifying and neutralizing cyber threats.</bd-p>
+        </div>
+        
+        <div style="text-align: center;">
+          <bd-display kind="lg" style="color: #3b82f6; margin-bottom: 1rem;">24/7</bd-display>
+          <bd-h as="h4" style="margin-bottom: 1rem;">Real-Time Monitoring</bd-h>
+          <bd-p kind="regular">Continuous protection with instant response to emerging threats.</bd-p>
+        </div>
+        
+        <div style="text-align: center;">
+          <bd-display kind="lg" style="color: #3b82f6; margin-bottom: 1rem;">50M+</bd-display>
+          <bd-h as="h4" style="margin-bottom: 1rem;">Protected Users</bd-h>
+          <bd-p kind="regular">Trusted by millions worldwide for their digital security needs.</bd-p>
+        </div>
+      </div>
+    </section>
+  </div>
+`;
+LandingPageExample.parameters = {
+  docs: {
+    description: {
+      story: 'Complete landing page example showing display typography in context with hero sections and feature highlights.'
+    }
+  }
+};
+
+export const ResponsiveDisplay = () => html`
+  <div style="max-width: 100%; padding: 2rem;">
+    <bd-h as="h2" style="margin-bottom: 2rem;">Responsive Display Typography</bd-h>
+    
+    <div style="background: #f1f5f9; padding: 2rem; border-radius: 12px;">
+      <bd-display kind="xl" style="margin-bottom: 1rem;">
+        Adaptive Text Sizing
+      </bd-display>
+      <bd-p kind="regular">
+        Display components automatically adjust based on viewport size and CSS variables. 
+        They maintain optimal readability across all devices from mobile to desktop.
+      </bd-p>
+      
+      <div style="display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem;">
+        <div style="flex: 1; min-width: 200px;">
+          <bd-h as="h4">Mobile</bd-h>
+          <bd-display kind="sm" style="color: #3b82f6;">Compact & Clear</bd-display>
+        </div>
+        
+        <div style="flex: 1; min-width: 200px;">
+          <bd-h as="h4">Tablet</bd-h>
+          <bd-display kind="md" style="color: #3b82f6;">Balanced Impact</bd-display>
+        </div>
+        
+        <div style="flex: 1; min-width: 200px;">
+          <bd-h as="h4">Desktop</bd-h>
+          <bd-display kind="lg" style="color: #3b82f6;">Maximum Presence</bd-display>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+ResponsiveDisplay.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstrates how display typography adapts to different screen sizes while maintaining visual impact.'
+    }
+  }
+};
+
+export const InteractiveSizeDemo = () => {
+  const sizes = [
+    { kind: '3xl', label: '3XL', description: 'Largest - Hero sections' },
+    { kind: '2xl', label: '2XL', description: 'Extra large - Major headlines' },
+    { kind: 'xl', label: 'XL', description: 'Large - Prominent headers' },
+    { kind: 'lg', label: 'LG', description: 'Standard - Balanced display' },
+    { kind: 'md', label: 'MD', description: 'Medium - Compact display' },
+    { kind: 'sm', label: 'SM', description: 'Small - Minimal display' }
+  ];
+
+  return html`
+    <div style="max-width: 800px; margin: 0 auto;">
+      <bd-h as="h2" style="margin-bottom: 2rem;">Interactive Display Size Demo</bd-h>
+      <bd-p kind="regular" style="margin-bottom: 3rem;">
+        Explore different display sizes and their typical use cases:
+      </bd-p>
+      
+      ${sizes.map(size => html`
+        <div style="margin: 3rem 0; padding: 2rem; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+          <bd-display kind="${size.kind}" style="margin-bottom: 1rem;">
+            ${size.label} Display Size
+          </bd-display>
+          <bd-p kind="regular" style="margin-bottom: 1rem;">
+            This is the <strong>${size.kind}</strong> display size - ${size.description}.
+          </bd-p>
+          <bd-p kind="small" style="color: #64748b;">
+            CSS Variables: 
+            <code>--typography-display-${size.kind}-fontSize</code>, 
+            <code>--typography-display-${size.kind}-fontWeight</code>
+          </bd-p>
+        </div>
+      `)}
+    </div>
+  `;
+};
+InteractiveSizeDemo.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive demonstration of all display sizes with their CSS variables and usage recommendations.'
+    }
+  }
+};

package/src/components/divider/divider-horizontal.js

@@ -13,7 +13,7 @@ export class BdDividerHorizontal extends LitElement {
 
   constructor() {
     super();
-    this.width = "200px";
+    this.width = "";
     this.color = "var(--color-neutral-400)";
     this.opacity = "0.25";
   }

package/src/components/footer/footer-links-group.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit';
 import { tokens } from '../../tokens/tokens.js';
+import '../heading/heading.js';
 import footerCSS from './footer-links-group.css.js';
 
 export class BdFooterLinksGroup extends LitElement {
@@ -12,14 +13,13 @@ export class BdFooterLinksGroup extends LitElement {
     this.title = '';
   }
 
-
   render() {
     return html`
-    <h4 class="group-title">${this.title ? this.title : html`&nbsp;`}</h4>
+    ${this.title ? html`<bd-h as="h6"  fontWeight="700" color="#ffffff" class="group-title">${this.title}</bd-h>` : html`&nbsp;`}
     <slot></slot>
   `;
   }
 }
 BdFooterLinksGroup.styles = [tokens, footerCSS];
 
-customElements.define('bd-footer-links-group', BdFooterLinksGroup);
+customElements.define('bd-footer-links-group', BdFooterLinksGroup);

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

@@ -1,4 +1,3 @@
-// footer-lp.stories.js
 import { html } from 'lit';
 import '../divider/divider-horizontal.js';
 import '../divider/divider-vertical.js';

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;

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';
@@ -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'
@@ -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,8 +218,6 @@ export class BdFooter extends LitElement {
     }));
   }
 
-
-
   get locale() {
     const val = (this.currentLocale || 'en').toLowerCase();
     return val;
@@ -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,6 +250,7 @@ export class BdFooter extends LitElement {
       }
     });
   }
+
   render() {
     const year = new Date().getFullYear();
     const showAnpc = this.locale.startsWith('ro');
@@ -292,21 +271,20 @@ export class BdFooter extends LitElement {
       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">
@@ -356,15 +334,15 @@ export class BdFooter extends LitElement {
         : ''}
       
       <div class="footer-links-right social-icons">
-        <slot name="social-links">
-          <a href="https://www.facebook.com/bitdefender" class="bd-facebook"></a>
-          <a href="https://twitter.com/bitdefender" class="bd-twitter"></a>
-          <a href="https://www.linkedin.com/company/bitdefender" class="bd-linkedin"></a>
-          <a href="https://www.youtube.com/c/Bitdefender" class="bd-youtube"></a>
-          <a href="https://www.instagram.com/bitdefender/" class="bd-instagram"></a>
-          <a href="https://www.tiktok.com/@bitdefender" class="bd-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
@@ -426,12 +404,14 @@ export class BdFooter extends LitElement {
           ${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>
           `)}

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

@@ -1,4 +1,3 @@
-// footer.stories.js - Varianta ultra-simplă
 import { html } from 'lit';
 import './footer.js';