feat: improve layout for single and two images

src/components/cards/LargeBlogLeftCard.astro

@@ -15,15 +15,15 @@ interface Props {
 const { title, subTitle, url, img, imgAlt } = Astro.props;
 ---
 
-<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto">
+<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
   <a
-    class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 max-w-340 2xl:max-w-full md:px-8 md:py-8"
+    class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 w-full md:px-8 md:py-8"
     href={url}
     data-astro-prefetch
   >
     <div>
       <Image
-        class="rounded-2xl rounded-b-none md:rounded-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
+        class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
         src={getDirectusImageURL(img)}
         alt={imgAlt}
         draggable="false"

src/components/cards/LargeBlogRightCard.astro

@@ -8,19 +8,18 @@ interface Props {
   title: string;
   subTitle: string;
   url: string;
-  single?: boolean;
+  imgOne: string;
-  imgOne: any;
+  imgOneAlt: string;
-  imgOneAlt: any;
+  imgTwo?: string;
-  imgTwo?: any;
+  imgTwoAlt?: string;
-  imgTwoAlt?: any;
 }
 
-const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
+const { title, subTitle, url, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
 ---
 
-<div class="smooth-reveal flex flex-col px-5 py-10 mx-auto">
+<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
   <a
-    class="md:card-base-hidden group flex flex-col-reverse md:items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 max-w-340 2xl:max-w-full md:px-8 md:py-8"
+    class="md:card-base-hidden group flex flex-col-reverse md:grid md:items-center md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 w-full md:px-8 md:py-8"
     href={url}
     data-astro-prefetch
   >
@@ -43,13 +42,13 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
         </div>
       </div>
     </div>
-    {single ? (
+    {!imgTwo ? (
     <div>
       <Image
-        class="rounded-2xl rounded-b-none md:rounded-2xl w-full"
+        class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
         src={getDirectusImageURL(imgOne)}
         alt={imgOneAlt}
-        format="webp"
+        draggable="false"
         loading="lazy"
         width="850"
         height="420"
@@ -57,30 +56,42 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
       />
     </div>
     ) : (
-    <div class="grid grid-cols-2 gap-4">
+    <>
-      <Image
+      <div class="md:hidden">
-        class="rounded-xl w-full"
+        <Image
-        src={getDirectusImageURL(imgOne)}
+          class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
-        alt={imgOneAlt}
+          src={getDirectusImageURL(imgOne)}
-        draggable="false"
+          alt={imgOneAlt}
-        format="webp"
+          draggable="false"
-        loading="lazy"
+          loading="lazy"
-        width="400"
+          width="850"
-        height="230"
+          height="420"
-        inferSize={true}
+          inferSize={true}
-      />
+        />
-      <Image
+      </div>
-        class="rounded-xl w-full mt-4 lg:mt-10"
+      <div class="hidden md:flex md:items-start">
-        src={getDirectusImageURL(imgTwo)}
+        <Image
-        alt={imgTwoAlt}
+          class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
-        draggable="false"
+          src={getDirectusImageURL(imgOne)}
-        format="webp"
+          alt={imgOneAlt}
-        loading="lazy"
+          draggable="false"
-        width="400"
+          loading="lazy"
-        height="230"
+          width="600"
-        inferSize={true}
+          height="310"
-      />
+          inferSize={true}
-    </div>
+        />
+        <Image
+          class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
+          src={getDirectusImageURL(imgTwo)}
+          alt={imgTwoAlt}
+          draggable="false"
+          loading="lazy"
+          width="600"
+          height="310"
+          inferSize={true}
+        />
+      </div>
+    </>
     )}
   </a>
 </div>

src/components/sections/SelectedPostsSection.astro

@@ -11,7 +11,7 @@ interface Props {
 const { posts } = Astro.props;
 ---
 
-<section class="smooth-reveal flex flex-col gap-4">
+<section class="smooth-reveal flex flex-col gap-4 md:mb-20">
   {posts.map((post, index) => index % 2 === 0 ? (
   <LargeBlogLeftCard
     title={post.title}
@@ -25,7 +25,6 @@ const { posts } = Astro.props;
     title={post.title}
     subTitle={post.description}
     url={`/blog/${post.slug}`}
-    single={!post.image_second}
     imgOne={post.image}
     imgOneAlt={post.image_alt}
     imgTwo={post?.image_second}

src/pages/blog/index.astro

@@ -20,7 +20,7 @@ const posts = await directus.request(
   })
 );
 
-const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 3);
+const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 2);
 const recentPosts: Post[] = posts.filter(
   (p) => !selectedPosts.some((selected) => selected.slug === p.slug)
   ).slice(0, 9);