---
import { getConfig } from '@libs/config'
import DropletFillIcon from '@components/icons/DropletFillIcon.astro'
import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
---

<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
  <div class="col-lg-6">
    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
      <DropletFillIcon height={32} width={32} />
    </div>
    <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstrap Themes</h2>
    <p class="lead fw-normal">
      Take Bootstrap to the next level with premium themes from the <a href={getConfig().themes}
        >official Bootstrap Themes marketplace</a
      >. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins,
      documentation, and powerful build tools.
    </p>
    <p class="d-flex lead fw-normal mb-md-0">
      <a href={getConfig().themes} class="icon-link icon-link-hover fw-semibold">
        Browse Bootstrap Themes
        <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
      </a>
    </p>
  </div>
  <div class="col-lg-6">
    <ResponsiveImage
      imgPath="/assets/img/bootstrap-themes.png"
      alt="Bootstrap Themes"
      width={700}
      height={500}
      classes="d-block mt-3"
    />
  </div>
</section>