merge in new changes

src/components/blog/BlogLeftSection.astro

@@ -0,0 +1,44 @@
+---
+import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
+import Image from '@components/ui/images/Image.astro';
+
+interface Props {
+  title: string;
+  subTitle: string;
+  btnExists?: boolean;
+  btnTitle?: string;
+  btnURL?: string;
+  img: any;
+  imgAlt: any;
+}
+
+const { title, subTitle, btnExists, btnTitle, btnURL, img, imgAlt } = Astro.props;
+---
+
+<section
+  class="mx-auto max-w-[85rem] items-center gap-8 px-4 py-10 sm:px-6 sm:py-16 md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 lg:px-8 lg:py-14 xl:gap-16 2xl:max-w-full"
+>
+  <Image
+    class="h-full w-full rounded-xl object-cover sm:max-h-[320px] md:max-h-[360px]"
+    src={img}
+    alt={imgAlt}
+    draggable="false"
+    loading="lazy"
+    width="850"
+    height="420"
+  />
+
+  <div class="mt-4 md:mt-0">
+    <h2
+      class="mb-4 text-4xl font-extrabold tracking-tight text-balance text-neutral-800 dark:text-neutral-200"
+    >
+      {title}
+    </h2>
+    <p
+      class="mb-4 max-w-prose font-light text-pretty text-neutral-600 sm:text-lg dark:text-neutral-300"
+    >
+      {subTitle}
+    </p>
+    {btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null}
+  </div>
+</section>