@repobit/dex-system-design 0.2.0

package/src/components/pricing-cards/pricing-card.stories.js

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+import './pricing-card.js'; 
+
+export default {
+  title: 'Components/Pricing Cards', 
+  component: 'bd-pricing-container',
+};
+
+const Template = () => html`<bd-pricing-container></bd-pricing-container>`;
+
+export const Default = Template.bind({});
+Default.storyName = 'Pricing Cards Component';

package/src/components/tabs/tabs.css.js

@@ -0,0 +1,239 @@
+import { css } from "../../../node_modules/lit-element/lit-element";
+
+export default css`
+  :host {
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+    --border-card-green: var(--color-green-700);
+    --badge-background: var(--color-blue-500);
+    --text-color-white: var(--color-neutral-0);
+    font-size: 100%;
+    display: block;
+    font-family: var(--font-family-sans);
+  }
+
+  .bd-tab-button p {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  .bd-tabs-component .bd-left img {
+    max-width: 90%;
+  }
+
+  .bd-card-container {
+    display: flex;
+    justify-content: space-between;
+    padding: 36px 0px;
+    border-radius: 5px;
+    margin-top: 10px;
+    margin: auto;
+    width: 50%;
+  }
+
+  .bd-card-container .bd-left {
+    flex: 1;
+    padding-right: 20px;
+  }
+
+  .bd-card-container .bd-right {
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    padding: 0px var(--size-24);
+  }
+
+  .bd-tabs-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 40px;
+    flex-wrap: wrap;
+    border-bottom: 1px solid #e4f2ff;
+    margin: 0 auto;
+  }
+
+  .bd-tabs-container button {
+    background-color: white;
+    color: #006eff;
+    border: 0;
+    padding: 9px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    font-size: 1.125em;
+    max-height: 55px;
+  }
+
+  .bd-tabs-container button::after {
+    background: #006eff;
+    content: "";
+    height: 4px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    transition: width 1s ease;
+  }
+
+  .bd-tabs-container button.bd-selected::after {
+    width: 100%;
+  }
+
+  .bd-tabs-container button.bd-selected {
+    color: black;
+  }
+
+  .bd-tab-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .bd-tab-button img {
+    margin-right: 8px;
+    height: 30px;
+    width: 30px;
+  }
+
+  .bd-tabs-component h2 {
+    margin-bottom: 75px;
+    max-width: 630px;
+    text-align: center;
+  }
+
+  .bd-tabs-component {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 48px;
+  }
+
+  .bd-ul-privacy {
+    list-style: none;
+    padding-inline-start: 0px;
+  }
+
+  .bd-find-out-more {
+    text-decoration: none;
+    background-color: white;
+    color: #006eff;
+    border: 0;
+    display: flex;
+    gap: 10px;
+    align-items: start;
+    position: relative;
+    cursor: pointer;
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-semibold);
+  }
+
+  .bd-find-out-more .bd-arrow svg {
+    width: 12px;
+    height: 12px;
+    position: relative;
+    top: 1.5px;
+  }
+
+  .bd-right h3 {
+    font-size: 1.5em;
+  }
+
+  .bd-section-title {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-semibold);
+  }
+
+  /* ✅ Responsive Design */
+  @media (max-width: 1200px) {
+    .bd-tabs-component.bd-we-container {
+      max-width: 100%;
+      padding: 0 20px;
+    }
+  }
+
+  @media (max-width: 992px) {
+    .bd-tabs-component .bd-card-container {
+      flex-direction: column;
+      width: 90%;
+    }
+
+    .bd-tabs-component .bd-tabs-container {
+      flex-wrap: wrap;
+    }
+
+    .bd-tabs-component .bd-tabs-container button picture img {
+      width: 24px;
+    }
+
+    .bd-tabs-component .bd-card-container {
+      align-items: center;
+      text-align: center;
+    }
+
+    .bd-tabs-component .bd-left {
+      width: 100%;
+      padding: 10px;
+    }
+
+    .bd-tabs-component .bd-left img {
+      max-width: 80%;
+    }
+
+    .bd-tabs-component .bd-right {
+      width: 100%;
+      padding: 10px;
+    }
+
+    .bd-tabs-component.bd-we-container {
+      max-width: 100%;
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .bd-card-container {
+      flex-direction: column;
+      width: 100%;
+      padding: 20px;
+    }
+
+    .bd-tabs-component {
+      margin-top: 24px;
+    }
+
+    .bd-tabs-container {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+    }
+
+    .bd-tabs-container button {
+      font-size: 1em;
+      padding: 6px;
+    }
+
+    .bd-tabs-component .bd-left img {
+      max-width: 70%;
+      height: auto;
+    }
+
+    .bd-tabs-component .bd-right {
+      text-align: center;
+      padding: 10px;
+    }
+
+    .bd-find-out-more {
+      justify-content: center;
+    }
+  }
+`;

package/src/components/tabs/tabs.js

@@ -0,0 +1,183 @@
+import { LitElement, html, css } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+import tabsCSS from "../tabs/tabs.css.js";
+
+class TabsComponent extends LitElement {
+  static properties = {
+    selectedTab: { type: Number },
+  };
+
+  constructor() {
+    super();
+    this.selectedTab = 0;
+  }
+
+  selectTab(index) {
+    console.log("Selected Tab:", index);
+    this.selectedTab = index;
+    this.requestUpdate();
+  }
+
+  render() {
+    const tabs = [
+      {
+        title: "Privacy Protection",
+        imageBase: "src/assets/icons/tabs-img1.png",
+        icon: "src/assets/icons/pic1.png",
+      },
+      {
+        title: "Identity Protection",
+        imageBase: "src/assets/icons/tabs-img2.png",
+        icon: "src/assets/icons/pic2.png",
+      },
+      {
+        title: "Device Protection",
+        imageBase: "src/assets/icons/tabs-img3.png",
+        icon: "src/assets/icons/pic3.png",
+      },
+      {
+        title: "Financial Insurance",
+        imageBase: "src/assets/icons/tabs-img3.png",
+        icon: "src/assets/icons/pic3.png",
+      },
+    ];
+
+    const content = [
+      {
+        heading: "Take back your family’s digital privacy",
+        description: () => html`<ul class="ul-privacy">
+          <li>
+            Enjoy complete data privacy with
+            <strong>Bitdefender Premium VPN</strong>.
+          </li>
+          <li>
+            Escape intrusive ads and trackers with our advanced
+            <strong>Ad-Blocker</strong> and
+            <strong>Anti-Tracker</strong> features.
+          </li>
+          <li>
+            Shield yourself with robust
+            <strong>Webcam and Microphone Protection</strong>.
+          </li>
+        </ul>`,
+        href: "#1",
+      },
+      {
+        heading: "Safe data. Safe you.",
+        description: () => html`<p>
+            Get instant alerts for potential threats to your personal data and
+            finances.
+          </p>
+          <p>Receive clear and concise advice on handling data breaches.</p>
+          <p>
+            Reduce the risk of online ID theft by scanning your digital
+            footprint.
+          </p>`,
+        href: "#2",
+      },
+      {
+        heading: "We secure what you hold dear",
+        description: () => html`<p>
+            Enjoy seamless security across all devices.
+          </p>
+          <p>
+            Protection from corrupt websites, risky downloads, and phishing
+            attempts.
+          </p>
+          <p>Lightweight performance ensures smooth device operation.</p>`,
+        href: "#3",
+      },
+      {
+        heading: "Financial Insurance",
+        description: () => html`<p>
+            Enjoy seamless security across all devices.
+          </p>
+          <p>
+            Protection from corrupt websites, risky downloads, and phishing
+            attempts.
+          </p>
+          <p>Lightweight performance ensures smooth device operation.</p>`,
+        href: "#4",
+      },
+    ];
+
+    const selectedTabData = tabs[this.selectedTab];
+
+    return html`
+      <div class="bd-tabs-component">
+        <h1 class="bd-section-title">
+          Live your digital life worry-free from start to finish
+        </h1>
+        <div class="bd-tabs-container">
+          ${tabs.map(
+            (tab, index) => html`
+              <button
+                class=${this.selectedTab === index
+                  ? "bd-selected bd-tab-button"
+                  : "bd-tab-button"}
+                @click=${() => this.selectTab(index)}
+              >
+                <img src="${tab.icon}" />
+                <p><strong>${tab.title}</strong></p>
+              </button>
+            `
+          )}
+        </div>
+        <div class="bd-card-container">
+          <div class="bd-left">
+            <picture>
+              ${["webp", "png"].map((format) =>
+                ["2000", "750"].map(
+                  (width) => html`
+                    <source
+                      type="image/${format}"
+                      srcset="
+                        ${selectedTabData.imageBase}?width=${width}&format=${format}&optimize=medium
+                      "
+                      media="${width === "2000" ? "(min-width: 600px)" : ""}"
+                    />
+                  `
+                )
+              )}
+              <img
+                loading="lazy"
+                alt="${selectedTabData.title}"
+                src="${selectedTabData.imageBase}?width=750&format=png&optimize=medium"
+              />
+            </picture>
+          </div>
+          <div class="bd-right">
+            <h3>${content[this.selectedTab].heading}</h3>
+            ${content[this.selectedTab].description()}
+            <a
+              href="${content[this.selectedTab].href}"
+              class="bd-find-out-more"
+            >
+              Find out more
+              <span class="bd-arrow">
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+TabsComponent.styles = [tabsCSS];
+
+customElements.define("bd-tabs-component", TabsComponent);

package/src/components/tabs/tabs.stories.js

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+import './tabs.js'; 
+
+export default {
+  title: 'Components/Tabs', 
+  component: 'bd-tabs-component',
+  decorators: [
+    (story) => html`<div class="tabs">${story()}</div>`, 
+  ],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+const Template = () => html`<bd-tabs-component></bd-tabs-component>`;
+
+export const Default = Template.bind({});
+Default.storyName = 'Tabs Component';

package/src/components/termsOfUse/terms.css.js

@@ -0,0 +1,38 @@
+import { css } from "../../../node_modules/lit-element/lit-element";
+
+export default css`
+  :host {
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+    --border-card-green: var(--color-green-700);
+    --badge-background: var(--color-blue-500);
+    --text-color-white: var(--color-neutral-0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: block;
+  }
+
+  .bd-terms-container {
+    background: #f2f2f2;
+    padding: var(--size-44) 0;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+  .bd-terms-wrapper {
+    padding: var(--size-14) var(--size-20) var(--size-40) var(--size-20);
+  }
+
+  #bd-terms-of-use {
+    font-size: var(--size-16);
+  }
+
+  .bd-terms-text-p {
+    font-size: var(--size-12);
+    line-height: 1.31;
+    letter-spacing: 0.006em;
+    padding: 0;
+  }
+  .bd-terms-text-a {
+    color: var(--color-blue-500);
+  }
+`;