Add card style and fix css

Author: ashwinimanoj

assets/scss/components/_blog-carousel.scss

@@ -1,72 +1,24 @@
-.carousel-inner {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.carousel-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-    background-color: #ffffff;
-    border-radius: 12px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-    margin: 0 10px;
-    transition: transform 0.3s ease;
-}
-
-.carousel-item.active {
-    transform: scale(1.05);
-}
-
-.icon-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 15px;
-}
-
-.carousel-icon {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    object-fit: cover;
-    border: 3px solid #fff;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.text-wrapper {
-    text-align: center;
-}
-
-.carousel-title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 10px;
-}
-
-.carousel-description {
-    font-size: 1rem;
-    color: #666;
-    margin-bottom: 10px;
-}
-
-.carousel-author {
-    font-size: 0.9rem;
-    color: #999;
-    font-style: italic;
-}
-
 .carousel-control-prev,
 .carousel-control-next {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(255, 255, 255, 0);
     border-radius: 50%;
     padding: 10px;
 }
 
 .carousel-control-prev-icon,
 .carousel-control-next-icon {
     filter: invert(1);
+}
+
+.card {
+    display: flex; 
+    justify-content: center;
+    align-items: center;   
+    height: 300px;
+    border-radius: 8px;   
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.1); 
+    padding: 20px;
+    margin: 20px;  
+    text-align: center;      
+    flex-direction: column;   
 }

assets/scss/style.scss

@@ -52,6 +52,7 @@ $sub-footer-text-color: $white;
 @import 'components/strip';
 @import 'components/feature';
 @import 'components/social';
+@import 'components/blog-carousel';
 
 // Pages
 @import 'pages/home';

layouts/blog/meta.html

@@ -1 +1,3 @@
-{{ partial "blog-meta.html" . }}
+<div class="d-flex flex-row mb-2 align-items-center">
+  {{ partial "blog-meta.html" . }}
+</div>

layouts/partials/blog-carousel.html

@@ -4,10 +4,16 @@
     {{ range $index, $page := $posts }}
     {{ if .Params.authorId }}
     <div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
-      <div class="d-flex justify-content-center">
-        <div class="carousel-content text-center">
-          <p class="carousel-description">{{ .Render "summary" }}</p>
-          <div class="blog-meta">{{ partial "blog-meta.html" . }}</div>
+      <div class="card">
+        <div class="card-body card-body-shadow">
+        <div class="d-flex justify-content-center">
+          <div class="carousel-content text-center">
+            <p class="carousel-description">{{ .Render "summary" }}</p>
+            <div class="d-flex justify-content-end">
+              {{ partial "blog-meta.html" . }}
+            </div>
+          </div>
+        </div>
         </div>
       </div>
     </div>

layouts/partials/blog-meta.html

@@ -12,6 +12,5 @@
     <div>{{ $author }}</div>
     <div>{{ time.Format "Jan 2, 2006" .Params.Date }}</div>
   </div>
-
 </div>
 {{ end }}