Styling fixes for suggested articles on home page

Author: webstackdev

src/components/Carousel/index.astro

@@ -26,6 +26,8 @@ type BaseProps = {
   currentSlug?: string
   /** Controls whether navigation wraps around */
   navigationMode?: CarouselNavigationMode
+  /** Whether to show the "Read More" link */
+  showReadMore: boolean
 }
 
 export type Props =
@@ -42,14 +44,15 @@ export type Props =
     })
 
 const {
-  title = 'Featured Content',
+  title,
   titleHref,
   limit = 3,
   variant = 'featured',
   currentSlug,
   type,
   items: itemsOverride,
   navigationMode = 'wrap',
+  showReadMore = false,
 } = Astro.props
 
 const allItems: ItemType[] = itemsOverride
@@ -73,17 +76,19 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
       class="block"
     >
       <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <header class="text-center mb-6">
-          <h2 id={`${carouselId}-title`} class="font-bold">
-            {titleHref ? (
-              <a href={titleHref} class="hover:text-primary transition-colors duration-200 no-underline">
-                {title}
-              </a>
-            ) : (
-              title
-            )}
-          </h2>
-        </header>
+        {title && (
+          <header class="text-center mb-6">
+            <h2 id={`${carouselId}-title`} class="font-bold">
+              {titleHref ? (
+                <a href={titleHref} class="hover:text-primary transition-colors duration-200 no-underline">
+                  {title}
+                </a>
+              ) : (
+                title
+              )}
+            </h2>
+          </header>
+        )}
 
         {/* Embla Carousel */}
         <div class="embla relative" role="region" aria-labelledby={`${carouselId}-title`}>
@@ -196,12 +201,39 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
           </button>
 
           {/* Dots Navigation */}
-          <div
-            class="embla__dots flex gap-2 justify-center mt-8"
-            role="group"
-            aria-label={`${title} slide navigation`}
-            data-carousel-pagination
-          />
+          <div class="mt-8 grid grid-cols-[1fr_auto_1fr] items-center">
+            <span aria-hidden="true" />
+            <span
+              class="embla__dots flex gap-2 justify-center"
+              role="group"
+              aria-label={`${title} slide navigation`}
+              data-carousel-pagination
+            />
+
+            {showReadMore ? (
+              <span class="flex justify-end mr-4">
+                <a
+                  href="/articles"
+                  class="inline-flex items-center px-6 py-3 bg-content-active text-content-inverse font-semibold rounded-lg hover:bg-content no-underline hover:no-underline transition-all duration-200"
+                >
+                  Read More Articles
+                  <svg
+                    class="ml-2 w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                    focusable="false"
+                  >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"
+                    ></path>
+                  </svg>
+                </a>
+              </span>
+            ) : (
+              <span aria-hidden="true" />
+            )}
+          </div>
 
           <p
             class="sr-only"

src/components/Home/ReadMore/index.astro

@@ -3,16 +3,17 @@
  * "Technologies and Skills" section for the homepage.
  * Renders a dark strip with icon + label links for each technology.
  */
-import { type CollectionEntry } from 'astro:content'
+import { getCollection } from 'astro:content'
 import { Image } from 'astro:assets'
 import Icon from '@components/Icon/index.astro'
 
 export interface Props {
   title: string
-  skills: Array<CollectionEntry<'tags'>>
 }
 
-const { title, skills } = Astro.props as Props
+const { title } = Astro.props as Props
+
+const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
 ---
 
 <skills-carousel

src/components/Home/Skills/index.astro

@@ -1,5 +1,4 @@
 ---
-import { getCollection } from 'astro:content'
 import BaseLayout from '@layouts/BaseLayout.astro'
 import Backstage from '@components/Home/Backstage/index.astro'
 import Carousel from '@components/Carousel/index.astro'
@@ -13,7 +12,7 @@ import Testimonials from '@components/Testimonials/index.astro'
 const pageDescription = 'Webstack Builders, Inc. Home Page'
 const pageTitle = 'Web Development & Digital Solutions - Webstack Builders, Inc.'
 const sectionClasses = 'container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:py-12'
-const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
+
 ---
 
 <BaseLayout description={pageDescription} pageTitle={pageTitle} path={'/'}>
@@ -103,10 +102,10 @@ const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
 
   <!-- Skills/Technologies Preview -->
   <section
-    class:list={[sectionClasses, 'hidden md:block']}
+    class:list={[sectionClasses, 'hidden md:block -mb-12']}
     aria-labelledby="home-technologies-title"
   >
-    <Skills skills={skills} title="Technologies & Expertise" />
+    <Skills title="Technologies & Expertise" />
   </section>
 
   <!-- Latest Articles Section -->
@@ -116,15 +115,16 @@ const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
   >
     <h2
       id="carousel-articles-suggested-all-title"
-      class="font-sans text-lg font-bold text-primary uppercase tracking-widest mb-4"
+      class="font-sans text-lg font-bold text-primary uppercase tracking-widest -mb-6"
     >
       Latest Insights
     </h2>
+
     <Carousel
       titleHref="/articles"
       variant="suggested"
+      limit={7}
       type="articles"
-      classes="md:px-16"
       showReadMore={true}
     />
   </section>