--

layouts/index.html

@@ -1,13 +1,47 @@
 {{ define "main" }}
 <div class="home">
-  <div class="container">
-    {{/* {{ partial components/hero.quotes.html }} */}}
-    <div class="col-lg-9 m-auto py-5">
-      <h2 class="text-center py-3">{{i18n "recentPosts"}}</h2>
-      <div class="row">
-        {{ partial "listitem.html" . }}
-      </div>
+    <div class="container">
+        <section class="container quotes banner">
+            <div class="row align-items-center justify-content-center">
+                <div class="col-lg-6">
+                    <div class="ps-lg-5">
+                        <img alt="উদ্ধৃতি ছবি" class="w-100" src="/uploads/Aishik_Rehman.svg" width="1412">
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <div class="carousel carousel-dark slide" data-interval="5000" data-bs-ride="carousel"
+                        id="QuoteCarousel">
+                        <div class="carousel-inner" style="min-height: 250px;">
+                            {{ range $index, $quote := .Site.Data.quotes }}
+                            <div class="carousel-item{{ if eq $index 0 }} active{{ end }}">
+                                <div class="row d-flex justify-content-center">
+                                    <div class="d-flex">
+                                        <div class="flex-grow-1 ms-4 ps-3">
+                                            <h4 class="mb-4">{{ $quote.q }}</h4>
+                                            <h6>--ঐশিক রেহমান</h6>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {{ end }}
+                        </div>
+                        <div class="carousel-indicators">
+                            {{ range $index, $quote := .Site.Data.quotes }}
+                            <button data-bs-slide-to="{{ $index }}" data-bs-target="#QuoteCarousel"
+                                class="{{ if eq $index 0 }}active{{ end }}"></button>
+                            {{ end }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div class="col-lg-9 m-auto py-5">
+            <h2 class="text-center py-3">{{i18n "recentPosts"}}</h2>
+            <div class="row">
+                {{ partial "listitem.html" . }}
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 {{ end }}

static/css/common.css

@@ -7070,21 +7070,18 @@ fieldset:disabled .btn {
 
 .carousel-indicators [data-bs-target] {
     box-sizing: content-box;
-    flex: 0 1 auto;
-    width: 30px;
-    height: 3px;
     padding: 0;
     margin-right: 3px;
     margin-left: 3px;
-    text-indent: -999px;
     cursor: pointer;
-    background-color: #fff;
     background-clip: padding-box;
     border: 0;
-    border-top: 10px solid rgba(0, 0, 0, 0);
-    border-bottom: 10px solid rgba(0, 0, 0, 0);
     opacity: .5;
-    transition: opacity .6s ease
+    transition: opacity .6s ease;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    display: inline-block;
 }
 
 @media(prefers-reduced-motion: reduce) {