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/Hero.tsx

@@ -1,15 +1,22 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import Link from "next/link";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Container } from "@/components/Container";
-import { Placeholder } from "@/components/Placeholder";
-import { heroBanners } from "@/lib/data";
-import type { Slide } from "@/lib/media";
+import { SlotMedia } from "@/components/SlotMedia";
+import { parseAspectRatio } from "@/lib/static-images";
+import type { SlotMediaItem } from "@/lib/static-images";
 
-export function Hero({ slides }: { slides: Slide[] }) {
+type HeroProps = {
+  slides: SlotMediaItem[];
+  banners: SlotMediaItem[];
+  sliderAspectRatio?: string;
+  bannerAspectRatio?: string;
+};
+
+export function Hero({ slides = [], banners = [], sliderAspectRatio, bannerAspectRatio }: HeroProps) {
   const [index, setIndex] = useState(0);
+  const sliderRatio = parseAspectRatio(sliderAspectRatio);
 
   useEffect(() => {
     if (slides.length <= 1) return;
@@ -27,24 +34,26 @@ export function Hero({ slides }: { slides: Slide[] }) {
   return (
     <section className="pt-5">
       <Container>
-        <div className="relative overflow-hidden rounded-2xl bg-sky">
-          <div className="relative aspect-[16/6] sm:aspect-[16/5.2]">
-            {slides.map((slide, i) => (
-              <Link
-                key={slide.id}
-                href={slide.href}
-                className={`absolute inset-0 transition-opacity duration-500 ${i === index ? "opacity-100" : "pointer-events-none opacity-0"}`}
-              >
-                <Placeholder src={slide.image} className="h-full w-full object-cover" />
-              </Link>
-            ))}
-          </div>
+        <div
+          className={`relative overflow-hidden rounded-2xl bg-sky ${sliderRatio ? "" : "aspect-[16/6] sm:aspect-[16/5.2]"}`}
+          style={sliderRatio ? { aspectRatio: sliderRatio } : undefined}
+        >
+          {slides.map((slide, i) => (
+            <SlotMedia
+              key={slide.id}
+              fill
+              src={slide.image}
+              href={slide.href}
+              fallbackSrc={slide.fallbackSrc}
+              className={`transition-opacity duration-500 ${i === index ? "opacity-100" : "pointer-events-none opacity-0"}`}
+            />
+          ))}
           {slides.length > 1 ? (
             <>
               <button
                 type="button"
                 onClick={() => go(-1)}
-                className="absolute top-1/2 right-3 grid size-9 -translate-y-1/2 place-items-center rounded-full bg-white/90 text-navy"
+                className="absolute top-1/2 right-3 z-10 grid size-9 -translate-y-1/2 place-items-center rounded-full bg-white/90 text-navy"
                 aria-label="اسلاید قبلی"
               >
                 <ChevronRight className="size-5" />
@@ -52,12 +61,12 @@ export function Hero({ slides }: { slides: Slide[] }) {
               <button
                 type="button"
                 onClick={() => go(1)}
-                className="absolute top-1/2 left-3 grid size-9 -translate-y-1/2 place-items-center rounded-full bg-white/90 text-navy"
+                className="absolute top-1/2 left-3 z-10 grid size-9 -translate-y-1/2 place-items-center rounded-full bg-white/90 text-navy"
                 aria-label="اسلاید بعدی"
               >
                 <ChevronLeft className="size-5" />
               </button>
-              <div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1.5">
+              <div className="absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 gap-1.5">
                 {slides.map((slide, i) => (
                   <button
                     key={slide.id}
@@ -73,10 +82,15 @@ export function Hero({ slides }: { slides: Slide[] }) {
         </div>
 
         <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
-          {heroBanners.map((banner) => (
-            <Link key={banner.id} href={banner.href} className="overflow-hidden rounded-xl bg-sky">
-              <Placeholder src={banner.image} className="h-[92px] w-full object-cover sm:h-[110px]" />
-            </Link>
+          {banners.map((banner) => (
+            <SlotMedia
+              key={banner.id}
+              src={banner.image}
+              href={banner.href}
+              fallbackSrc={banner.fallbackSrc}
+              aspectRatio={bannerAspectRatio}
+              className={`overflow-hidden rounded-xl bg-sky ${!bannerAspectRatio ? "h-[92px] sm:h-[110px]" : ""}`}
+            />
           ))}
         </div>
       </Container>