@pradip1995/segment-shop-banner 0.2.0

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@pradip1995/segment-shop-banner",
+  "version": "0.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-tokens": "0.3.2"
+  },
+  "devDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "shop-banner",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "store",
+}
+
+export default manifest

package/src/segment.css

@@ -0,0 +1,37 @@
+.shop-banner {
+  width: 100%;
+}
+
+.shop-banner__frame {
+  position: relative;
+  width: 100%;
+  min-height: 24rem;
+  border-radius: 0 0 5rem 5rem;
+  overflow: hidden;
+}
+
+.shop-banner__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.shop-banner__cta-wrap {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.shop-banner__cta {
+  border: 3px solid var(--color-brand-accent-muted);
+  background: var(--color-surface);
+  color: var(--color-text-heading);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0.75rem 1.5rem;
+  border-radius: 1.25rem;
+}

package/src/segment.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import "./segment.css"
+import Image from "next/image"
+import { getThemeDefaultAssets } from "@pradip1995/commerce-core/util/theme-default-assets"
+
+export default function ShopBanner({
+  imageUrl,
+  ctaText = "Shop all products",
+  scrollTargetId = "shop-by-nav",
+}: {
+  imageUrl?: string | null
+  ctaText?: string
+  scrollTargetId?: string
+}) {
+  const fallback = getThemeDefaultAssets().heroDesktop
+  const src = imageUrl?.trim() || fallback
+
+  const handleCtaClick = () => {
+    const element = document.getElementById(scrollTargetId)
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" })
+    }
+  }
+
+  return (
+    <section className="shop-banner" aria-label="Shop banner">
+      <div className="shop-banner__frame">
+        <Image
+          src={src}
+          alt=""
+          fill
+          className="shop-banner__image object-cover"
+          sizes="100vw"
+          priority
+          unoptimized
+        />
+        <div className="shop-banner__overlay" aria-hidden />
+        <div className="shop-banner__cta-wrap">
+          <button type="button" onClick={handleCtaClick} className="shop-banner__cta">
+            {ctaText}
+          </button>
+        </div>
+      </div>
+    </section>
+  )
+}