Connect the storefront to Meshkee catalog, blogs, and static image slots.

Wire homepage specials, product/blog pages, instant search, and the customer portal so the live pharmacy site can be managed from the dashboard.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/home/AboutDoctor.tsx

@@ -1,14 +1,23 @@
 import { Container } from "@/components/Container";
-import { Placeholder } from "@/components/Placeholder";
+import { SlotMedia } from "@/components/SlotMedia";
 import { about } from "@/lib/data";
+import type { SlotMediaItem } from "@/lib/static-images";
+
+export function AboutDoctor({ image, aspectRatio }: { image?: SlotMediaItem; aspectRatio?: string }) {
+  const src = image?.image ?? "/placeholders/doctor.svg";
 
-export function AboutDoctor() {
   return (
     <section id="about" className="pt-10">
       <Container>
         <div className="grid items-center gap-8 overflow-hidden rounded-2xl bg-white p-5 sm:p-8 lg:grid-cols-[0.9fr_1.1fr]">
           <div className="overflow-hidden rounded-2xl bg-sky">
-            <Placeholder src="/placeholders/doctor.svg" className="aspect-[4/5] w-full object-cover lg:aspect-[4/4.4]" />
+            <SlotMedia
+              src={src}
+              href={image?.href}
+              fallbackSrc={image?.fallbackSrc ?? "/placeholders/doctor.svg"}
+              aspectRatio={aspectRatio}
+              className={!aspectRatio ? "aspect-[4/5] lg:aspect-[4/4.4]" : ""}
+            />
           </div>
           <div>
             <p className="text-[13px] font-medium text-primary">{about.subtitle}</p>