New home/Themes.astro component + usage in index.astro

site-new/components/home/Themes.astro

@@ -0,0 +1,29 @@
+---
+import { getVersionedDocsPath } from '../../libs/config'
+---
+<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);">
+      <!--TODO: handle partial icons -->
+      <!--{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}-->
+    </div>
+    <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstrap Themes</h2>
+    <!--TODO: handle .Site.Params.themes-->
+    <!--<p class="lead fw-normal">
+      Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.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 justify-content-start lead fw-normal mb-md-0">
+      <!-- TODO: handle .Site.Params.themes -->
+      <!--<a href="{{ .Site.Params.themes }}" class="icon-link icon-link-hover fw-semibold">
+        Browse Bootstrap Themes
+        <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
+      </a>-->
+    </p>
+  </div>
+  <div class="col-lg-6">
+      <img class="img-fluid mt-3 mx-auto" srcset={`${getVersionedDocsPath('assets/img/bootstrap-themes.png')},
+                                                  ${getVersionedDocsPath('assets/img/[email protected]')} 2x"
+                                          src=${getVersionedDocsPath('assets/img/bootstrap-themes.png')}`}
+                                          alt="Bootstrap Themes" width="700" height="500" loading="lazy">
+  </div>
+</section>

site-new/pages/index.astro

@@ -7,6 +7,7 @@ import CSSVariables from '../components/home/CSSVariables.astro'
 import ComponentUtilities from '../components/home/ComponentUtilities.astro'
 import Plugins from '../components/home/Plugins.astro'
 import Icons from '../components/home/Icons.astro'
+import Themes from '../components/home/Themes.astro'
 import { getConfig, getVersionedDocsPath } from '../libs/config'
 ---
 
@@ -58,9 +59,6 @@ import { getConfig, getVersionedDocsPath } from '../libs/config'
     <ComponentUtilities />
     <Plugins />
     <Icons />
-    <!--
-      TODO: each partial must become a component
-      {{ partial "home/themes" . }}
-     -->
+    <Themes />
   </div>
 </BaseLayout>