medusa-ui-home 2.6.0 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medusa-ui-home",
-  "version": "2.6.0",
+  "version": "3.0.2",
   "description": "Homepage sections.",
   "type": "module",
   "license": "MIT",
@@ -21,15 +21,16 @@
     "lodash": ">=4",
     "lucide-react": "*",
     "medusa-plugin-dynamic-config": ">=0.0.31",
+    "medusa-ui-home-config": "^1.1.0",
     "medusa-contact-logic-plugin": "^2.0.0",
     "medusa-reviews-logic": "^2.0.0",
     "medusa-storefront-analytics": "^1.0.0",
-    "medusa-storefront-data": "^2.0.0",
+    "medusa-storefront-data": "^2.5.3",
     "medusa-storefront-hooks": "^1.0.0",
     "medusa-wishlist-logic": "^2.0.0",
-    "medusa-storefront-theme-base": "^2.0.0",
-    "medusa-ui-common": "^2.0.0",
-    "medusa-ui-product": "^2.0.0",
+    "medusa-storefront-theme-base": "^3.0.0",
+    "medusa-ui-common": "^3.0.0",
+    "medusa-ui-product": "^3.0.0",
     "next": ">=14.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -160,6 +161,16 @@
       "types": "./src/home/sections/blogPosts/index.ts",
       "import": "./src/home/sections/blogPosts/index.ts",
       "default": "./src/home/sections/blogPosts/index.ts"
+    },
+    "./catalog/page": {
+      "types": "./src/home/catalog/page.tsx",
+      "import": "./src/home/catalog/page.tsx",
+      "default": "./src/home/catalog/page.tsx"
+    },
+    "./components/home-page-json-ld": {
+      "types": "./src/home/components/home-page-json-ld.tsx",
+      "import": "./src/home/components/home-page-json-ld.tsx",
+      "default": "./src/home/components/home-page-json-ld.tsx"
     }
   },
   "typesVersions": {
@@ -185,6 +196,7 @@
     "medusa-storefront-data": "workspace:*",
     "medusa-storefront-theme-base": "workspace:*",
     "medusa-ui-common": "workspace:*",
-    "medusa-ui-product": "workspace:*"
+    "medusa-ui-product": "workspace:*",
+    "medusa-ui-home-config": "workspace:*"
   }
 }

package/src/home/catalog/components/hero-banner.tsx

@@ -0,0 +1,201 @@
+import Image from "next/image"
+import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
+import type { HomepageBanner } from "medusa-storefront-data/dynamic-config"
+
+type CatalogHeroBannerProps = {
+  homeBanners?: HomepageBanner[] | null
+  appBanners?: HomepageBanner[] | null
+  copy?: {
+    badge?: string
+    desktopHeadingLine1?: string
+    desktopHeadingHighlight?: string
+    description?: string
+    primaryCtaLabel?: string
+    primaryCtaHref?: string
+    secondaryCtaLabel?: string
+    secondaryCtaHref?: string
+    mobilePrimaryCtaLabel?: string
+    mobileSecondaryCtaLabel?: string
+  }
+}
+
+export default function CatalogHeroBanner({
+  homeBanners,
+  appBanners,
+  copy,
+}: CatalogHeroBannerProps) {
+  const fallbackBanner: HomepageBanner = {
+    image: "/newbanner.png",
+    title: "Premium Kids Shop",
+    subtitle: "Little Trends, Quality Kids Wear",
+    description:
+      "Shop stylish kids wear for little ones and children of all years - from newborn up to 15 years.",
+    buttonName: "Shop Kids Wear",
+    buttonLink: "/store",
+  }
+
+  const homeBanner =
+    homeBanners && homeBanners.length > 0 ? homeBanners[0] : fallbackBanner
+  const firstAppBanner = appBanners && appBanners.length > 0 ? appBanners[0] : null
+
+  const homeBannerImage = homeBanner.image || fallbackBanner.image
+  const appBanner = {
+    image: firstAppBanner?.image || "/appbanner.png",
+    title: firstAppBanner?.title || homeBanner.title,
+    subtitle: firstAppBanner?.subtitle || homeBanner.subtitle,
+    description: firstAppBanner?.description || homeBanner.description,
+    buttonName: firstAppBanner?.buttonName || homeBanner.buttonName,
+    buttonLink: firstAppBanner?.buttonLink || homeBanner.buttonLink,
+  }
+
+  const heroBadge = copy?.badge ?? "BEST QUALITY"
+  const desktopHeadingLine1 = copy?.desktopHeadingLine1 ?? "Electronics &"
+  const desktopHeadingHighlight = copy?.desktopHeadingHighlight ?? "Essentials"
+  const heroDescription =
+    copy?.description ??
+    "Discover dependable tools, components, devices, and everyday warehouse-ready stock built for fast-moving stores with large inventories."
+  const primaryCtaLabel = copy?.primaryCtaLabel ?? "Add to Cart"
+  const primaryCtaHref = copy?.primaryCtaHref ?? homeBanner.buttonLink ?? "/store"
+  const secondaryCtaLabel = copy?.secondaryCtaLabel ?? "Explore categories"
+  const secondaryCtaHref = copy?.secondaryCtaHref ?? "/categories"
+  const mobilePrimaryCtaLabel = copy?.mobilePrimaryCtaLabel ?? "Shop now"
+  const mobileSecondaryCtaLabel = copy?.mobileSecondaryCtaLabel ?? secondaryCtaLabel
+
+  return (
+    <div className="relative w-full overflow-x-hidden">
+      <div className="relative hidden sm:block">
+        {homeBannerImage ? (
+          <Image
+            src={homeBannerImage}
+            alt={homeBanner.title || "Home Banner"}
+            width={1920}
+            height={800}
+            sizes="100vw"
+            className="h-[420px] w-full object-cover md:h-[520px] lg:h-[580px] xl:h-[620px]"
+            priority
+          />
+        ) : (
+          <div className="h-[420px] w-full bg-white md:h-[520px] lg:h-[580px] xl:h-[620px]" />
+        )}
+
+        <div className="absolute inset-y-0 left-0 w-[82%] bg-[linear-gradient(90deg,rgba(255,255,255,0.97)_0%,rgba(255,255,255,0.92)_52%,rgba(255,255,255,0.18)_82%,transparent_100%)] md:w-[72%] lg:w-[64%] xl:w-[60%]" />
+
+        <div className="absolute inset-0 flex items-start pt-8 md:pt-10 lg:pt-12">
+          <div className="w-full px-4 sm:px-5 md:px-7 lg:px-10 xl:px-12">
+            <div className="sticky top-24 w-full max-w-[min(92vw,34rem)] rounded-[24px] bg-white/78 px-4 py-4 shadow-[0_18px_50px_rgba(4,18,44,0.08)] backdrop-blur-[3px] transition-all duration-300 ease-out hover:bg-white/82 hover:shadow-[0_24px_60px_rgba(42,139,255,0.16)] active:shadow-[0_16px_36px_rgba(42,139,255,0.14)] sm:max-w-[24rem] sm:px-5 sm:py-5 md:max-w-[28rem] md:px-6 md:py-6 lg:max-w-[32rem] lg:px-7 lg:py-7 xl:max-w-[34rem] xl:px-8 xl:py-8">
+              <div className="space-y-3 sm:space-y-4 md:space-y-5">
+                <div className="inline-flex max-w-full items-center rounded-full border border-[#2A8BFF] bg-white/90 px-3 py-1 text-[10px] font-extrabold uppercase tracking-[0.2em] text-[#0D5BFF] shadow-[0_8px_20px_rgba(42,139,255,0.15)] md:px-4 md:py-1.5 md:text-xs">
+                  {heroBadge}
+                </div>
+
+                <h1 className="max-w-[13ch] text-[clamp(1.8rem,4vw,3.75rem)] font-bold leading-[1.04] text-[#04122C]">
+                  {desktopHeadingLine1}
+                  <br />
+                  Hardware <span className="text-[#2A8BFF]">{desktopHeadingHighlight}</span>
+                </h1>
+
+                <p className="max-w-[44ch] text-[12px] font-medium leading-relaxed text-[#4B5B76] md:text-sm lg:text-base">
+                  {heroDescription}
+                </p>
+
+                <div className="flex flex-wrap items-center gap-2.5 pt-1 md:gap-3 md:pt-2">
+                  <LocalizedClientLink href={primaryCtaHref}>
+                    <button className="group inline-flex min-h-11 items-center rounded-full bg-[#2A8BFF] px-5 py-3 text-xs font-bold text-white shadow-[0_14px_30px_rgba(42,139,255,0.28)] transition-all hover:bg-[#0D5BFF] hover:scale-[1.02] active:scale-95 md:px-7 md:py-3.5 md:text-sm">
+                      {primaryCtaLabel}
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="3"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="ml-2 h-3.5 w-3.5 transition-transform group-hover:translate-x-1 md:h-4 md:w-4"
+                      >
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                        <polyline points="12 5 19 12 12 19"></polyline>
+                      </svg>
+                    </button>
+                  </LocalizedClientLink>
+
+                  <LocalizedClientLink href={secondaryCtaHref}>
+                    <button className="inline-flex min-h-11 items-center rounded-full border border-[#2A8BFF] bg-white/92 px-5 py-3 text-xs font-bold text-[#0D5BFF] shadow-[0_8px_20px_rgba(4,18,44,0.08)] transition-all hover:bg-[#EFF6FF] active:scale-95 md:px-7 md:py-3.5 md:text-sm">
+                      {secondaryCtaLabel}
+                    </button>
+                  </LocalizedClientLink>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative block min-h-[520px] w-full sm:hidden">
+        {appBanner.image ? (
+          <Image
+            src={appBanner.image}
+            alt={appBanner.title || "App Banner"}
+            width={720}
+            height={960}
+            sizes="100vw"
+            className="h-[560px] w-full object-cover object-top"
+            priority
+          />
+        ) : (
+          <div className="h-[560px] w-full bg-[#E9DFFF]" />
+        )}
+
+        <div className="absolute inset-x-0 top-0 h-[82%] bg-[linear-gradient(180deg,rgba(255,255,255,0.97)_0%,rgba(255,255,255,0.92)_46%,rgba(255,255,255,0.14)_82%,transparent_100%)]" />
+
+        <div className="absolute inset-x-0 top-0 flex items-start pt-4">
+          <div className="w-full px-3">
+            <div className="w-full max-w-[21rem] rounded-[22px] bg-white/80 px-4 py-4 shadow-[0_16px_40px_rgba(4,18,44,0.08)] backdrop-blur-[2px] transition-all duration-300 ease-out active:bg-white/85 active:shadow-[0_18px_42px_rgba(42,139,255,0.14)]">
+              <div className="space-y-3">
+                <div className="inline-flex max-w-full items-center rounded-full border border-[#2A8BFF] bg-white/92 px-3 py-1 text-[9px] font-extrabold uppercase tracking-[0.18em] text-[#0D5BFF] shadow-[0_6px_18px_rgba(42,139,255,0.15)]">
+                  {heroBadge}
+                </div>
+
+                <h1 className="max-w-[12ch] text-[clamp(1.9rem,8vw,2.5rem)] font-bold leading-[1.06] text-[#04122C]">
+                  {desktopHeadingLine1}
+                  <br />
+                  Hardware <span className="text-[#2A8BFF]">{desktopHeadingHighlight}</span>
+                </h1>
+
+                <p className="text-[12px] font-medium leading-relaxed text-[#4B5B76] line-clamp-4">
+                  {heroDescription}
+                </p>
+
+                <div className="flex flex-wrap items-center gap-2 pt-1">
+                  <LocalizedClientLink href={primaryCtaHref}>
+                    <button className="group inline-flex min-h-10 items-center rounded-full bg-[#2A8BFF] px-4 py-2.5 text-xs font-bold text-white shadow-[0_10px_24px_rgba(42,139,255,0.28)] active:scale-95">
+                      {mobilePrimaryCtaLabel}
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="3"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="ml-2 transition-transform group-hover:translate-x-1"
+                      >
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                        <polyline points="12 5 19 12 12 19"></polyline>
+                      </svg>
+                    </button>
+                  </LocalizedClientLink>
+
+                  <LocalizedClientLink href={secondaryCtaHref}>
+                    <button className="inline-flex min-h-10 items-center rounded-full border border-[#2A8BFF] bg-white/92 px-4 py-2.5 text-xs font-bold text-[#0D5BFF] shadow-[0_6px_18px_rgba(4,18,44,0.08)] active:scale-95">
+                      {mobileSecondaryCtaLabel}
+                    </button>
+                  </LocalizedClientLink>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}