@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/ultimate-security-demo.stories.js

@@ -0,0 +1,431 @@
+import { html } from "lit";
+
+// A product landing page composed from what the package already ships and
+// nothing else. Every element below is a registered bd-* / pricing / compare
+// element, every attribute is one its element observes, and every image is one
+// public/assets already serves. If a section of the reference could not be
+// expressed that way, the gap is recorded in the docs description rather than
+// papered over with markup of its own.
+import "./header/header.js";
+import "./image/image.js";
+import "./anchor/anchor-nav.js";
+import "./highlight/highlight.js";
+import "./light-carousel/light-carousel.js";
+import "./pricing-cards/pricing-card.js";
+import "./card-features/card-features.js";
+import "./awards/awards-flex.js";
+import "./compare/compare.js";
+import "./tabs/tabs.js";
+import "./features/features.js";
+import "./features-tab/features-tab.js";
+import "./accordion/accordion.js";
+import "./accordion/accordion-bg.js";
+import "./termsOfUse/terms.js";
+import "./footer/footer-lp.js";
+import "./footer/footer-nav-menu.js";
+import "./divider/divider-vertical.js";
+import "./heading/heading.js";
+import "./paragraph/paragraph.js";
+import "./badge/badge.js";
+import "./list/list.js";
+import "./list/list-item/list-item.js";
+import "./icons/individual-icon.js";
+import "./icons/globe-icon.js";
+import "./icons/machine-learning-icon.js";
+import "./icons/analysis-icon.js";
+import "./icons/family-icon.js";
+import "./icons/arrow-up-icon.js";
+import "./icons/close-icon.js";
+
+export default {
+  title     : "Demos/Ultimate Security Landing",
+  tags      : ["autodocs"],
+  parameters: {
+    layout  : "fullscreen",
+    controls: { disable: true },
+    docs    : {
+      description: {
+        component: `
+**Ultimate Security Landing** rebuilds the consumer product page from the
+reference screenshot using only existing atoms, components and modules. No
+new element, no new attribute, no page-level CSS.
+
+Section by section, what the reference asked for and what the package could
+answer with:
+
+| Reference section | Built from |
+|---|---|
+| Hero with price, Buy / View plans, disclaimers, image | bd-header (price zones are store-driven) |
+| Sticky section nav with Buy now | bd-anchor-nav + bd-anchor-nav-item |
+| Eyebrow + highlighted section title | bd-highlight |
+| Four protection pillars | bd-light-carousel-section variant="simple" |
+| Individual / Family plans with Monthly / Yearly | bd-pricing-container (PRODUCT_FROZEN, self-contained) |
+| Nine Scam Copilot capabilities with NEW / IMPROVED | bd-card-features-section + bd-card-features-item |
+| Award band with seven badges | bd-awards-flex background="tint" layout="grid" |
+| Best Protection / Best Performance bars | bd-compare-section + compare-card + compare-bar |
+| Family member tabs with image | bd-tabs + bd-tab-panel + bd-features-tab |
+| Platform tabs, three feature columns on blue | bd-tabs bg-blue + bd-features + bd-feature-col |
+| Questions? Answers. | bd-accordion-bg |
+| System requirements, Terms of use, footnotes | bd-accordion-section, bd-terms-section |
+| Legal footer | bd-footer-lp + bd-footer-nav |
+
+Where the vocabulary ran out, the page says so rather than inventing:
+
+- The Scam Copilot section in the reference has an eyebrow above its title.
+  bd-card-features-section has a title and nothing above it, so the eyebrow
+  and title are carried by a bd-highlight in front of the module and the
+  module's own title is left empty.
+- The hero's price comes from the store integration inside bd-header
+  (bd-product / bd-option). Without a store context the price zones render
+  empty; the fullPrice / discount / finalPrice attributes exist on the element
+  and are passed, but the template reads the store, not them.
+- bd-pricing-container carries its own product content. It is the closest
+  match to the reference's plan cards and switches, and it is frozen, so the
+  copy is its copy.
+        `
+      }
+    }
+  }
+};
+
+// ─── Content ─────────────────────────────────────────────────────────────────
+
+const awardBadges = [
+  { id: "pc-mag",          label: "PC MAG Editors' Choice",  type: "red",  icon: "pc-mag"          },
+  { id: "av-comparatives", label: "AV-Comparatives",         type: "dark", icon: "av-comparatives" },
+  { id: "best-brands",     label: "Best Brands 2024",        type: "dark", icon: "best-brands"     },
+  { id: "pc-mag-2024",     label: "PC Choice 2024",          type: "red",  icon: "pc-mag-2024"     },
+  { id: "pc-mag-readers",  label: "PC MAG Readers' Choice",  type: "red",  icon: "pc-mag-readers"  },
+  { id: "pc-mag-business", label: "PC Business Choice",      type: "red",  icon: "pc-mag-business" },
+  { id: "top-product",     label: "AV-TEST Top Product",     type: "red",  icon: "top-product"     }
+];
+
+const AV_TEST_URL = "https://www.av-test.org/";
+
+const scamCopilot = [
+  { title: "Scam Copilot Chatbot",         badge: "NEW",      variant: "bd-light-blue",  icon: "individual",       text: "Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim." },
+  { title: "Scam Wave Alerts",             badge: "NEW",      variant: "bd-light-blue",  icon: "globe",            text: "Stay informed with real-time alerts about ongoing scam outbreaks detected in your area automatically." },
+  { title: "Online Scam Protection",       badge: "NEW",      variant: "bd-light-blue",  icon: "machine-learning", text: "Focused on browsing activities, it specializes in detecting the newest scam patterns and tactics." },
+  { title: "Remote Access Protection",     badge: "NEW",      variant: "bd-light-blue",  icon: "analysis",         text: "Detects patterns of behavior typical of scammers seeking to access your data remotely." },
+  { title: "SMS Protection",               badge: "IMPROVED", variant: "bd-light-green", icon: "family",           text: "Detects scams and harmful links in SMS messages using advanced AI for fast, real-time protection." },
+  { title: "Email Protection",             badge: "",         variant: "",               icon: "arrow-up",         text: "Monitors web mailboxes from Gmail and Outlook 24/7 and marks every incoming email as safe or unsafe." },
+  { title: "Scam Notification Protection", badge: "",         variant: "",               icon: "close",            text: "Scans and detects scam attempts directly in push notifications before you even tap or interact." },
+  { title: "Chat Protection",              badge: "",         variant: "",               icon: "globe",            text: "Identifies scam messages in WhatsApp, Messenger, Telegram and Discord chats before they reach your attention." },
+  { title: "Calendar Invites Protection",  badge: "",         variant: "",               icon: "analysis",         text: "Finds and blocks scam calendar events before they can trick you with fake links or misleading invites." }
+];
+
+const icon = (name) => {
+  switch (name) {
+    case "individual":       return html`<bd-individual-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>`;
+    case "globe":            return html`<bd-globe-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-globe-icon>`;
+    case "machine-learning": return html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-machine-learning-icon>`;
+    case "analysis":         return html`<bd-analysis-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-analysis-icon>`;
+    case "family":           return html`<bd-family-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-family-icon>`;
+    case "arrow-up":         return html`<bd-arrow-up-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-arrow-up-icon>`;
+    default:                 return html`<bd-close-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-close-icon>`;
+  }
+};
+
+// A family-member panel: the same layout object four times over, with the
+// image side alternating so the section reads as a conversation.
+const familyPanel = (title, heading, body, image, reverse) => html`
+  <bd-tab-panel title="${title}">
+    <bd-features-tab cta-label="Buy now" cta-href="#section-pricing" cta-kind="danger" ?reverse="${reverse}">
+      <bd-h as="h3" visual-level="h3" slot="heading" color="primary">${heading}</bd-h>
+      <div slot="content">
+        <bd-p variant="regular">${body}</bd-p>
+      </div>
+      <bd-img slot="media" src="${image}" alt="" loading="lazy" width="520" height="347" fit="cover"></bd-img>
+    </bd-features-tab>
+  </bd-tab-panel>
+`;
+
+// A platform panel: three feature columns, each an accordion of capabilities.
+// The item lists are shortened for macOS, iOS and Android, as on the reference,
+// where each platform shows only what it ships.
+const platformPanel = (title, protection, privacy, identity) => html`
+  <bd-tab-panel title="${title}">
+    <bd-features>
+      <bd-feature-col title="Protection">
+        <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+        <bd-p variant="small" slot="description">Bitdefender's unbeatable multi-layered protection keeps your devices safe from all new and existing cyber threats.</bd-p>
+        <bd-accordion-section no-container>
+          ${protection.map(([label, text, badge], i) => html`
+            <bd-accordion-item title="${label}" ?open="${i === 0}">
+              ${badge ? html`<bd-badge slot="badge" tone="brand" variant="fill" size="sm">${badge}</bd-badge>` : ""}
+              <bd-p variant="small">${text}</bd-p>
+            </bd-accordion-item>
+          `)}
+        </bd-accordion-section>
+      </bd-feature-col>
+
+      <bd-feature-col title="Privacy">
+        <bd-globe-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-globe-icon>
+        <bd-p variant="small" slot="description">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
+        <bd-accordion-section no-container>
+          ${privacy.map(([label, text], i) => html`
+            <bd-accordion-item title="${label}" ?open="${i === 0}">
+              <bd-p variant="small">${text}</bd-p>
+            </bd-accordion-item>
+          `)}
+        </bd-accordion-section>
+      </bd-feature-col>
+
+      <bd-feature-col title="Identity Protection">
+        <bd-analysis-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-analysis-icon>
+        <bd-p variant="small" slot="description">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
+        <bd-accordion-section no-container>
+          ${identity.map(([label, text], i) => html`
+            <bd-accordion-item title="${label}" ?open="${i === 0}">
+              <bd-p variant="small">${text}</bd-p>
+            </bd-accordion-item>
+          `)}
+        </bd-accordion-section>
+      </bd-feature-col>
+    </bd-features>
+  </bd-tab-panel>
+`;
+
+const protectionWindows = [
+  ["Complete Real-Time Data Protection", "Absolute power in the most efficient security bundle available today. Bitdefender Ultimate Security works against all e-threats.", "NEW"],
+  ["Network Threat Prevention",          "Proactive network monitoring stops attacks before they reach your files.", "INDUSTRY 1ST"],
+  ["Advanced Threat Defense",            "Behavioral detection stops unknown threats before they execute."],
+  ["Scam Copilot",                       "AI-powered scam detection and prevention across chat, email and the web."],
+  ["Multi-Layer Ransomware Protection",  "Protects your files from unauthorized encryption and rolls back changes."],
+  ["Anti-Phishing",                      "Blocks pages that pose as trustworthy in order to steal your data."],
+  ["Web Attack Prevention",              "Filters all web traffic and blocks malicious content before it loads."]
+];
+const privacyWindows = [
+  ["Unlimited VPN Traffic", "Encrypt your connection and stay private online across all your devices."],
+  ["Password Manager",      "Store and autofill passwords securely, with one master password."],
+  ["Anti-tracker",          "Block trackers and keep your browsing activity private."],
+  ["Webcam Protection",     "Prevent unauthorized access to your webcam."],
+  ["Microphone Monitor",    "Alerts you when apps try to access your microphone."],
+  ["Privacy Firewall",      "Advanced firewall protection for your network."]
+];
+const identityAll = [
+  ["Continuous Dark Web & Surface Monitoring", "Get instant alerts if your data appears on the dark web."],
+  ["Digital Footprint Visualization",          "See and reduce your digital exposure online."],
+  ["Identity Protection Score",                "Understand your identity risk at a glance."],
+  ["Real-Time Breach Notifications",           "Be first to know when your accounts are compromised."],
+  ["Credit Report Monitoring",                 "Track changes to your credit report in real time."],
+  ["Identity Theft Insurance — Up to $2 million", "Coverage for eligible losses and expenses related to identity theft."]
+];
+const protectionMac = [
+  ["Real-Time Protection",   "Continuous protection against all Mac and cross-platform threats.", "NEW"],
+  ["Ransomware Remediation", "Backs up your files and restores them after an attack."],
+  ["Scam Copilot",           "AI-powered scam detection and prevention."],
+  ["Adware Blocker",         "Removes adware and unwanted software."]
+];
+const privacyMac = [
+  ["Unlimited VPN Traffic", "Encrypt your connection and stay private online."],
+  ["Password Manager",      "Store and autofill passwords securely."],
+  ["Anti-tracker",          "Block trackers and keep your browsing private."]
+];
+const protectionMobile = [
+  ["Malware Scanner",  "Scans every app you install and flags the ones you should not trust.", "NEW"],
+  ["Scam Alert",       "Monitors links in SMS, notifications and chats for scams."],
+  ["Web Protection",   "Blocks dangerous pages before they load."]
+];
+const privacyMobile = [
+  ["Unlimited VPN Traffic", "Encrypt your connection on any network."],
+  ["Password Manager",      "Autofill on the go, with one master password."],
+  ["Account Privacy",       "Find out if your email address has leaked."]
+];
+
+// ─── The page ────────────────────────────────────────────────────────────────
+
+export const Landing = {
+  name  : "Ultimate Security",
+  render: () => html`
+    <bd-header
+      title="Bitdefender Ultimate Security"
+      subtitle="Complete Security, Enhanced Privacy, and Identity Protection"
+      description="All-in-one plan to provide personalized digital safety. Incorporates AI-powered scams & device protection, secure password management, unlimited VPN traffic & online identity protection for individuals and families."
+      product-id="vsb"
+      devices="5"
+      subscription="1"
+    >
+      <bd-img slot="header-picture" src="/assets/bd-header-us.jpg" alt="A person relaxing at a laptop, protected" loading="eager" width="750" height="500" fit="cover"></bd-img>
+      <span slot="disclaimer-top">
+        Protection for 1 account &amp; 5 PCs, Macs, tablets, or smartphones.
+        Windows® | macOS® | Android™ | iOS®
+      </span>
+      <span slot="disclaimer-bottom-text-start">First year price. Sales tax included. See</span>
+      <a slot="disclaimer-bottom-link" href="#section-terms">Terms of Use</a>
+      <span slot="disclaimer-bottom-text-end"> below.</span>
+    </bd-header>
+
+    <bd-anchor-nav cta-label="Buy now" cta-href="#section-pricing">
+      <bd-anchor-nav-item title="Overview"   href="#section-overview"></bd-anchor-nav-item>
+      <bd-anchor-nav-item title="Plans"      href="#section-pricing"></bd-anchor-nav-item>
+      <bd-anchor-nav-item title="Scam Copilot" href="#section-scam-copilot"></bd-anchor-nav-item>
+      <bd-anchor-nav-item title="Features"   href="#section-platforms"></bd-anchor-nav-item>
+      <bd-anchor-nav-item title="FAQ"        href="#section-faq"></bd-anchor-nav-item>
+    </bd-anchor-nav>
+
+    <!-- Four pillars -->
+    <bd-highlight id="section-overview" sub-title="Let's Secure Your Digital Life" highlight-text="next generation of digital security">
+      Introducing the next generation of digital security: your personalized shield for a worry-free online experience.
+    </bd-highlight>
+    <bd-light-carousel-section variant="simple">
+      <bd-light-carousel-item variant="simple" title="AI-Powered protection" icon="/assets/device_protection.png">
+        <bd-p variant="small">Protect all your devices from malware, ransomware, and disruptions on interruptions ease.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item variant="simple" title="Privacy Protection" icon="/assets/privacy_protection.png">
+        <bd-p variant="small">Browse and stream privately with VPN and anti-tracking tools that keep your identity safe and secure.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item variant="simple" title="Identity Protection" icon="/assets/identity_protection.png">
+        <bd-p variant="small">Get real-time alerts if your data leaks online and stop identity theft early with 24/7 monitoring tools.</bd-p>
+      </bd-light-carousel-item>
+      <bd-light-carousel-item variant="simple" title="Financial Insurance" icon="/assets/financial_insurance.png">
+        <bd-p variant="small">Get peace of mind with fraud protection and identity recovery coverage, up to $2 million included.</bd-p>
+      </bd-light-carousel-item>
+    </bd-light-carousel-section>
+
+    <!-- Plans -->
+    <bd-highlight highlight-text="digital life">
+      Live your digital life confidently with award-winning online protection
+    </bd-highlight>
+    <bd-pricing-container id="section-pricing"></bd-pricing-container>
+
+    <!-- Scam Copilot -->
+    <bd-highlight id="section-scam-copilot" sub-title="Introducing Bitdefender Scam Copilot">
+      Our AI-powered platform that detects and fights scams. In real time.
+    </bd-highlight>
+    <bd-card-features-section>
+      ${scamCopilot.map((item) => html`
+        <bd-card-features-item title="${item.title}" badge="${item.badge}" badge-variant="${item.variant}">
+          ${icon(item.icon)}
+          <bd-p>${item.text}</bd-p>
+        </bd-card-features-item>
+      `)}
+    </bd-card-features-section>
+
+    <!-- Awards -->
+    <bd-awards-flex
+      background="tint"
+      layout="grid"
+      headline="Award-winning security software you can trust. Always."
+      subtext="We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 – so you know you are in good hands."
+      .badges=${awardBadges}
+    ></bd-awards-flex>
+
+    <!-- Comparison -->
+    <bd-compare-section title="Bitdefender's comparison with other cybersecurity brands" gap="32px">
+      <compare-card
+        title="Best Protection"
+        description="Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)"
+        footnote="Overall Score. July 2011 – February 2025. Source AV-TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="/assets/shield-check.svg"
+        bar-stretch="false"
+      >
+        <compare-bar label="Bitdefender" score="5.98" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary" scale="0.73"></compare-bar>
+        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
+      </compare-card>
+      <compare-card
+        title="Best Performance"
+        description="Lightest Impact on Performance (On a scale of 0 to 6, with 6 as the lightest level of impact)"
+        footnote="Overall Score. February 2013 – February 2025. Source AV-TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="/assets/speedometer.svg"
+        bar-stretch="false"
+      >
+        <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.69" max-score="6" variant="secondary" scale="0.73"></compare-bar>
+        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
+      </compare-card>
+    </bd-compare-section>
+
+    <!-- Family -->
+    <bd-tabs
+      title="Customized Online Protection for Each Family Member – Smart, Private & Safe"
+      highlight-text="Family Member"
+      subtitle="Your family is unique and so should be your online security. Our family protection plan adapts to each member's needs, offering the ideal mix of privacy, freedom, and safety."
+    >
+      ${familyPanel("Admin", "Keep your loved ones protected.", "As the Subscription Manager, you can oversee and adjust online safety through an intuitive dashboard. Effortlessly manage settings, monitor real-time alerts, and maintain control without compromising simplicity or security.", "/assets/tabs-img1.png", false)}
+      ${familyPanel("Adult", "Privacy that travels with you.", "Unlimited VPN, a password manager and anti-tracker keep every adult's browsing, banking and shopping private, on every device they own.", "/assets/tabs-img2.png", true)}
+      ${familyPanel("Teen", "Freedom, with a safety net.", "Scam Copilot watches chats, SMS and social feeds for the tricks aimed at teenagers, and says so without reading their messages.", "/assets/tabs-img3.png", false)}
+      ${familyPanel("Child", "A gentler internet.", "Screen-time schedules, content filters and location alerts, set once and adjusted from your own phone as your child grows.", "/assets/tabs-img1.png", true)}
+    </bd-tabs>
+
+    <!-- Platforms -->
+    <bd-tabs
+      id="section-platforms"
+      bg-blue
+      title="The Ultimate Protection and Privacy for all platforms. Bitdefender Premium VPN, Password Manager and Identity Protection included."
+      subtitle="Your digital safety is our top priority, always and everywhere. These comprehensive suites safeguard your digital life by seamlessly combining the ultimate award-winning device security with protection against identity theft and privacy intrusions, plus credit protection."
+    >
+      ${platformPanel("Windows", protectionWindows, privacyWindows, identityAll)}
+      ${platformPanel("macOS",   protectionMac,     privacyMac,     identityAll)}
+      ${platformPanel("iOS",     protectionMobile,  privacyMobile,  identityAll)}
+      ${platformPanel("Android", protectionMobile,  privacyMobile,  identityAll)}
+    </bd-tabs>
+
+    <!-- FAQ -->
+    <bd-accordion-bg id="section-faq" title="Questions? Answers.">
+      <bd-accordion-bg-item title="How does Scam Copilot work?">
+        <bd-p variant="small">Scam Copilot is an AI-powered platform that watches the places scams arrive — email, SMS, chat apps, notifications, calendar invites and the web — and warns you before you act on one.</bd-p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="How does Bitdefender collect and use my personal information?">
+        <bd-p variant="small">We respect and value the privacy of everyone who visits our website. We only collect and use your personal data in accordance with our Privacy Policy, and only to the extent necessary to provide the products and services you request.</bd-p>
+        <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+          <bd-li variant="bullet" size="md"><bd-p variant="small">Threat telemetry is anonymized before it leaves your device</bd-p></bd-li>
+          <bd-li variant="bullet" size="md"><bd-p variant="small">Scam Copilot never reads the content of your private messages</bd-p></bd-li>
+          <bd-li variant="bullet" size="md"><bd-p variant="small">You can review and delete your data from Bitdefender Central at any time</bd-p></bd-li>
+        </bd-list>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="How can I avoid falling for scams?">
+        <bd-p variant="small">Slow down, verify the sender through a channel you already trust, and never act on urgency. Scam Copilot does this check for you, in real time, wherever the message arrives.</bd-p>
+      </bd-accordion-bg-item>
+      <bd-accordion-bg-item title="Where can I send feedback about my experience with Scam Copilot?">
+        <bd-p variant="small">Every Scam Copilot verdict has a feedback control. Tell us when it was right and when it was not; that is how the model gets better for everyone.</bd-p>
+      </bd-accordion-bg-item>
+    </bd-accordion-bg>
+
+    <!-- System requirements, terms, notes -->
+    <bd-accordion-section title="System Requirements" guide-icon="/assets/user_guide.png" guide-label="User guide" guide-href="#">
+      <bd-accordion-item title="Bitdefender Ultimate Security" open>
+        <bd-p variant="small"><strong>Windows™ Operating Systems</strong><br />Microsoft Windows 10 (all versions) or later.</bd-p>
+        <bd-p variant="small"><strong>Mac® Operating Systems</strong><br />macOS Big Sur (11) or later.</bd-p>
+        <bd-p variant="small"><strong>Android™ Operating Systems</strong><br />Android 8.0 or later.</bd-p>
+        <bd-p variant="small"><strong>iOS Operating Systems</strong><br />iOS 15 or later.</bd-p>
+      </bd-accordion-item>
+      <bd-accordion-item title="Bitdefender Central">
+        <bd-p variant="small">A modern browser and a Bitdefender account. Bitdefender Central is where devices, subscriptions and family members are managed.</bd-p>
+      </bd-accordion-item>
+    </bd-accordion-section>
+
+    <bd-terms-section id="section-terms"></bd-terms-section>
+
+    <bd-accordion-section title="Please Note!">
+      <bd-p variant="small">
+        1. And local email clients on Windows<br />
+        2. Windows only<br />
+        3. Android and iOS only<br />
+        4. Android only<br />
+        5. iOS only
+      </bd-p>
+    </bd-accordion-section>
+
+    <bd-footer-lp>
+      <bd-footer-nav slot="secondary-nav">
+        <a href="/legal/">Legal Information</a>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
+        <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Privacy Policy</a>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
+        <a href="/sitemap/">Site Map</a>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
+        <a href="/company/">Company</a>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
+        <a href="https://www.bitdefender.com/consumer/support/">Contact Us</a>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
+        <a href="#">Privacy Settings</a>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
+        <a href="#" class="impressum-link">Impressum</a>
+      </bd-footer-nav>
+    </bd-footer-lp>
+  `
+};

package/src/components/video/video.css.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+
+/** Styled entirely from design tokens — see npm run lint:tokens. */
+export const videoCSS = css`
+  :host { display: block; }
+
+  video {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--radius-lg);
+    /* the frame around media, dark in every theme (dark mode decision 15) */
+    background: var(--color-surface-media);
+  }
+`;
+
+export default videoCSS;

package/src/components/video/video.js

@@ -0,0 +1,40 @@
+import { LitElement, html, nothing } from 'lit';
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import '../../tokens/tokens.js';
+import { videoCSS } from './video.css.js';
+
+export class BdVideo extends LitElement {
+  static styles = [videoCSS];
+
+  static properties = {
+    src     : { type: String },
+    poster  : { type: String },
+    controls: { type: Boolean },
+    muted   : { type: Boolean },
+    loop    : { type: Boolean }
+  };
+
+  constructor() {
+    super();
+    this.src = '';
+    this.poster = '';
+    this.controls = true;
+    this.muted = false;
+    this.loop = false;
+  }
+
+  render() {
+    return html`
+      <video
+        src=${this.src || nothing}
+        poster=${this.poster || nothing}
+        ?controls=${this.controls}
+        ?muted=${this.muted}
+        ?loop=${this.loop}
+        playsinline
+      ><slot></slot></video>
+    `;
+  }
+}
+
+customElements.define('bd-video', BdVideo);

package/src/components/video/video.stories.js

@@ -0,0 +1,106 @@
+import { html } from 'lit';
+import './video.js';
+
+export default {
+  title     : 'Atoms/Video',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdVideo** wraps a native \`<video>\` with the system's framing.
+
+### Usage
+\`\`\`html
+<bd-video src="/media/overview.mp4" poster="/images/overview.jpg"></bd-video>
+<bd-video src="/media/loop.mp4" muted loop></bd-video>
+
+<bd-video src="/media/overview.mp4">
+  <track kind="captions" src="/media/overview.en.vtt" srclang="en" label="English" default>
+</bd-video>
+\`\`\`
+
+### Props
+| Prop | Values | Default |
+|---|---|---|
+| \`src\` | video URL | \`''\` |
+| \`poster\` | still shown before playback | \`''\` |
+| \`controls\` | boolean, native controls | \`true\` |
+| \`muted\` | boolean | \`false\` |
+| \`loop\` | boolean | \`false\` |
+
+### Captions go in the slot
+Anything slotted is passed through into the \`<video>\`, which is how you supply
+\`<track>\` elements. **Recorded video needs captions** — WCAG 1.2.2 at level A —
+and this element does nothing to add them for you.
+
+### Notes
+\`playsinline\` is always set, so iOS plays in place instead of taking over the
+screen.
+
+\`controls\` defaults to \`true\` on purpose: a video a user cannot pause is a
+2.2.2 failure the moment it plays for more than five seconds. If you turn
+controls off, the video must also be \`muted\` and \`loop\` and behave as
+decoration.
+
+There is no \`autoplay\` prop, deliberately — autoplay with sound is both
+disruptive and blocked by most browsers anyway.
+        `
+      }
+    }
+  },
+  argTypes: {
+    src: {
+      control    : 'text',
+      description: 'Video URL.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "" }, category: 'Content' }
+    },
+    poster: {
+      control    : 'text',
+      description: 'Still frame shown before playback.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "" }, category: 'Content' }
+    },
+    controls: {
+      control    : 'boolean',
+      description: 'Native playback controls. Turning them off risks a WCAG 2.2.2 failure.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: "true" }, category: 'Playback' }
+    },
+    muted: {
+      control    : 'boolean',
+      description: 'Start muted.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: "false" }, category: 'Playback' }
+    },
+    loop: {
+      control    : 'boolean',
+      description: 'Repeat on end.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: "false" }, category: 'Playback' }
+    }
+  }
+};
+
+export const Default = () => html`
+    <bd-video poster="/images/bd-header-img.jpg"></bd-video>
+  `;
+
+/**
+ * Controls off is only safe when the video is decoration — so it comes with
+ * `muted` and `loop`, which is the pairing WCAG 2.2.2 asks for. Rendered here
+ * so the no-chrome shape is snapshotted alongside the default one; the
+ * `--radius-lg` corner and the `--color-neutral-900` poster ground are the
+ * whole of this atom's styling and are easiest to see without controls over
+ * them.
+ */
+export const Decorative = () => html`
+    <bd-video poster="/images/bd-header-img.jpg" ?controls=${false} muted loop></bd-video>
+  `;
+
+/**
+ * With no `poster` and no `src` the element is just its own background. Kept
+ * because that is what a consumer sees before the media resolves, and it is
+ * the only view of the poster ground on its own.
+ */
+export const Empty = () => html`
+    <div style="max-width: 32rem">
+      <bd-video></bd-video>
+    </div>
+  `;