@pradip1995/segment-vertical-collection-scroll 0.1.1

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@pradip1995/segment-vertical-collection-scroll",
+  "version": "0.1.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src",
+    "public"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "^0.4.11",
+    "@pradip1995/segment-tokens": "^0.3.14"
+  },
+  "devDependencies": {
+    "@medusajs/types": "^2.0.0",
+    "@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/commerce-core-shim.d.ts

@@ -0,0 +1,10 @@
+declare module "@pradip1995/commerce-core/data/collections" {
+  import type { HttpTypes } from "@medusajs/types"
+
+  export function listCollections(queryParams?: Record<string, any>): Promise<{
+    collections: HttpTypes.StoreCollection[]
+    count: number
+    offset: number
+    limit: number
+  }>
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"
+export type { VerticalCollectionSlide, VerticalCollectionScrollProps } from "./types"

package/src/manifest.ts

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

package/src/resolve-collection.ts

@@ -0,0 +1,261 @@
+import { resolveMediaUrl } from "@pradip1995/segment-primitives/resolve-media-url"
+import type { HttpTypes } from "@medusajs/types"
+import type { VerticalCollectionSlide } from "./types"
+
+/**
+ * Fallback luxury imagery when a collection in Admin does not yet have an image uploaded.
+ */
+function getMatchingFallbackImage(title: string, index: number): string {
+  const t = title.toLowerCase()
+  if (t.includes("bridal") || t.includes("wedding")) {
+    return "/images/bridal/bridal-hero.png"
+  }
+  if (t.includes("diamond")) {
+    return "/images/collections/white-diamond.jpg"
+  }
+  if (t.includes("gold") || t.includes("antique")) {
+    return "/images/Old_Cut_Jewelry_02_copy_1_1.webp"
+  }
+  if (t.includes("lab grown")) {
+    return "/images/collections/yellow-diamond.jpg"
+  }
+  const defaults = [
+    "/images/collections/emerald-sapphire.jpg",
+    "/images/collections/white-diamond.jpg",
+    "/images/bridal/bridal-hero.png",
+    "/images/Old_Cut_Jewelry_02_copy_1_1.webp",
+    "/images/collections/yellow-diamond.jpg",
+  ]
+  return defaults[index % defaults.length]
+}
+
+export function extractMediaUrl(val: unknown): string | null {
+  if (!val || typeof val !== "string") return null
+  const trimmed = val.trim()
+  if (!trimmed) return null
+  const resolved = resolveMediaUrl(trimmed)
+  return resolved || trimmed
+}
+
+function getCollectionMetadata(collection: HttpTypes.StoreCollection) {
+  return (collection.metadata || {}) as Record<string, unknown>
+}
+
+function isHomeFeatured(collection: HttpTypes.StoreCollection) {
+  const value = getCollectionMetadata(collection).home_featured
+  return value === true || value === "true" || value === "1"
+}
+
+function getHomeSort(collection: HttpTypes.StoreCollection) {
+  const raw = getCollectionMetadata(collection).home_sort
+  const num = Number.parseInt(String(raw ?? ""), 10)
+  return Number.isFinite(num) ? num : 999
+}
+
+function readParallaxText(meta: Record<string, unknown>, keys: string[]) {
+  for (const key of keys) {
+    const val = meta[key]
+    if (typeof val === "string" && val.trim()) return val.trim()
+  }
+  return ""
+}
+
+export function getAdminCollectionImage(col: any, index: number): string {
+  if (!col) return getMatchingFallbackImage("", index)
+
+  const meta = (col.metadata || {}) as Record<string, unknown>
+
+  // Priority 1: Collection Banner uploaded in Medusa Admin
+  const banner =
+    extractMediaUrl(meta.collection_Banner) ||
+    extractMediaUrl(meta.collection_banner) ||
+    extractMediaUrl(meta.Collection_Banner) ||
+    extractMediaUrl(meta.banner)
+  if (banner) return banner
+
+  // Priority 2: Collection Image uploaded in Medusa Admin
+  const image =
+    extractMediaUrl(meta.collection_image) ||
+    extractMediaUrl(meta.collection_Image) ||
+    extractMediaUrl(meta["Collection Image"]) ||
+    extractMediaUrl(meta["collection image"]) ||
+    extractMediaUrl(meta.Collection_Image) ||
+    extractMediaUrl(meta.image) ||
+    extractMediaUrl(meta.imageUrl) ||
+    extractMediaUrl(meta.photo) ||
+    extractMediaUrl(meta.thumbnail)
+  if (image) return image
+
+  // Priority 3: Collection Icon uploaded in Medusa Admin
+  const icon = extractMediaUrl(meta.collection_icon) || extractMediaUrl(meta.icon)
+  if (icon) return icon
+
+  // Priority 4: Collection thumbnail / image field
+  const direct = extractMediaUrl(col.thumbnail) || extractMediaUrl(col.image)
+  if (direct) return direct
+
+  // Priority 5: First product image in the collection
+  if (Array.isArray(col.products) && col.products.length > 0) {
+    const p = col.products[0]
+    const prodImg =
+      extractMediaUrl(p.thumbnail) ||
+      (Array.isArray(p.images) && p.images[0]?.url ? extractMediaUrl(p.images[0].url) : null)
+    if (prodImg) return prodImg
+  }
+
+  // Priority 6: Matching fallback image
+  return getMatchingFallbackImage(col.title || "", index)
+}
+
+export function resolveAdminCollections(
+  collections?: HttpTypes.StoreCollection[],
+  customItems?: VerticalCollectionSlide[]
+): VerticalCollectionSlide[] {
+  // If user passes explicit customItems, use them
+  if (customItems && customItems.length > 0) {
+    return customItems.map((item, index) => {
+      const title = (item.title || item.name || "Collection").trim()
+      const image =
+        extractMediaUrl(item.image) ||
+        extractMediaUrl(item.imageUrl) ||
+        extractMediaUrl(item.photo) ||
+        extractMediaUrl(item.thumbnail) ||
+        getMatchingFallbackImage(title, index)
+
+      return {
+        id: item.id || `col-${index}`,
+        title,
+        subtitle: item.subtitle || item.description || "Discover the handcrafted collection.",
+        eyebrow: item.eyebrow || item.tag || "COLLECTION",
+        buttonText: item.buttonText || item.ctaText || "DISCOVER",
+        buttonLink:
+          item.buttonLink ||
+          item.link ||
+          item.href ||
+          (item.handle ? `/store?collection=${item.handle}` : "/store"),
+        image,
+        imageAlt: title,
+        theme: item.theme || (index % 2 === 1 ? "light" : "dark"),
+      }
+    })
+  }
+
+  // Pure dynamic mode: Read directly from Admin Collections
+  if (collections && collections.length > 0) {
+    const valid = collections.filter((c) => c.title && c.title.trim())
+    const featured = valid.filter(isHomeFeatured).sort(
+      (a, b) => getHomeSort(a) - getHomeSort(b)
+    )
+    const source = featured.length > 0 ? featured : valid
+
+    return source.map((col, index) => {
+      const title = col.title.trim()
+      const image = getAdminCollectionImage(col, index)
+      const meta = getCollectionMetadata(col)
+
+      const subtitle =
+        readParallaxText(meta, [
+          "collection_subtitle",
+          "subtitle",
+          "description",
+          "home_parallax_description",
+        ]) || `Explore ${title} — handcrafted luxury by H.Ankit Jewels.`
+
+      const eyebrow =
+        readParallaxText(meta, ["collection_eyebrow", "eyebrow", "tag"]) ||
+        "COLLECTION"
+
+      const buttonText =
+        readParallaxText(meta, [
+          "collection_button_text",
+          "buttonText",
+          "ctaText",
+        ]) || "DISCOVER"
+
+      const themeRaw = readParallaxText(meta, [
+        "home_parallax_theme",
+        "theme",
+        "parallax_theme",
+      ])
+
+      return {
+        id: col.id || `col-${index}`,
+        title,
+        subtitle,
+        eyebrow,
+        buttonText,
+        buttonLink: `/store?collection=${col.handle || col.id}`,
+        image,
+        imageAlt: title,
+        theme:
+          themeRaw === "light"
+            ? "light"
+            : themeRaw === "dark"
+              ? "dark"
+              : index % 2 === 1
+                ? "light"
+                : "dark",
+      }
+    })
+  }
+
+  // Fallback high-luxury collections when Admin collections are empty
+  return [
+    {
+      id: "fallback-col-silver",
+      title: "Silver Collection",
+      subtitle: "Effortlessly elegant sterling silver jewellery designed for contemporary sophistication.",
+      eyebrow: "EXCLUSIVE COLLECTION",
+      buttonText: "DISCOVER",
+      buttonLink: "/store?collection=silver-collection",
+      image: "/images/collections/emerald-sapphire.jpg",
+      imageAlt: "Silver Collection",
+      theme: "dark" as const,
+    },
+    {
+      id: "fallback-col-lab-grown",
+      title: "Lab Grown Diamonds",
+      subtitle: "Brilliant, conflict-free diamond creations sculpted with flawless ethical precision.",
+      eyebrow: "SUSTAINABLE LUXURY",
+      buttonText: "DISCOVER",
+      buttonLink: "/store?collection=lab-grown-collection",
+      image: "/images/collections/yellow-diamond.jpg",
+      imageAlt: "Lab Grown Diamonds",
+      theme: "light" as const,
+    },
+    {
+      id: "fallback-col-bridal",
+      title: "Bridal Suite",
+      subtitle: "Celebrate your eternal union with handcrafted heirloom jewellery crafted to transcend time.",
+      eyebrow: "CELEBRATE LOVE",
+      buttonText: "DISCOVER",
+      buttonLink: "/store?collection=-bridal-collection",
+      image: "/images/bridal/bridal-hero.png",
+      imageAlt: "Bridal Suite",
+      theme: "dark" as const,
+    },
+    {
+      id: "fallback-col-gold",
+      title: "Gold Heritage",
+      subtitle: "Intricate antique gold craftsmanship echoing the grandeur of timeless royalty.",
+      eyebrow: "ROYAL HERITAGE",
+      buttonText: "DISCOVER",
+      buttonLink: "/store?collection=gold-collection",
+      image: "/images/Old_Cut_Jewelry_02_copy_1_1.webp",
+      imageAlt: "Gold Heritage",
+      theme: "light" as const,
+    },
+    {
+      id: "fallback-col-diamond",
+      title: "High Jewellery Diamonds",
+      subtitle: "Magnificent diamond statement pieces radiating unmatched fire, light, and brilliance.",
+      eyebrow: "THE APEX OF LUXURY",
+      buttonText: "DISCOVER",
+      buttonLink: "/store?collection=diamond-collection",
+      image: "/images/collections/white-diamond.jpg",
+      imageAlt: "High Jewellery Diamonds",
+      theme: "dark" as const,
+    },
+  ]
+}
+

package/src/segment.css

@@ -0,0 +1,398 @@
+/* ==========================================================================
+   Segment: Graff Multiple-Layered Sticky Collection Scroll
+   Identical to https://www.graff.com/international-en/home/
+   ========================================================================== */
+
+.graff-parallax-section {
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  overscroll-behavior: none;
+}
+
+/* --------------------------------------------------------------------------
+   Sticky Stacking Slides: Each slide is sticky at top:0 with stacking z-index
+   As user scrolls, Slide 2 rolls UP and OVER Slide 1 seamlessly!
+   -------------------------------------------------------------------------- */
+.graff-parallax__slide {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  background-color: #06090e;
+  color: #ffffff;
+  user-select: none;
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  box-shadow: none;
+  isolation: isolate;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.graff-parallax__slide--light {
+  background-color: #f7f5f2;
+}
+
+.graff-parallax__slide-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+/* --------------------------------------------------------------------------
+   Background Media
+   -------------------------------------------------------------------------- */
+.graff-parallax__bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: hidden;
+}
+
+/* Graff: images stay fixed — no zoom on scroll or slide change */
+.graff-parallax__image {
+  object-fit: cover;
+  object-position: center center;
+  transform: none;
+  animation: none;
+  transition: none;
+}
+
+.graff-parallax__overlay {
+  display: none;
+}
+
+
+/* --------------------------------------------------------------------------
+   Editorial Content & Typography (Graff Style)
+   -------------------------------------------------------------------------- */
+.graff-parallax__content-wrap {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: var(--container-max, 1440px);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 2rem;
+  padding-right: 5rem;
+  pointer-events: none;
+}
+
+@media (min-width: 768px) {
+  .graff-parallax__content-wrap {
+    padding-left: 4.5rem;
+    padding-right: 6rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .graff-parallax__content-wrap {
+    padding-left: 6.5rem;
+    padding-right: 7rem;
+  }
+}
+
+.graff-parallax__content {
+  max-width: 620px;
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  opacity: 0;
+  visibility: hidden;
+  transform: none;
+  transition:
+    opacity 0.4s ease-out,
+    visibility 0s linear 0.4s;
+}
+
+.graff-parallax__slide.is-active .graff-parallax__content {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity 0.4s ease-out,
+    visibility 0s linear 0s;
+}
+
+/* First slide copy visible as soon as section enters view (Graff hero read) */
+.graff-parallax-section.is-ready
+  .graff-parallax__slide:first-child.is-active
+  .graff-parallax__content {
+  opacity: 1;
+  visibility: visible;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .graff-parallax__content,
+  .graff-parallax__slide.is-active .graff-parallax__content {
+    transition: none;
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+/* Eyebrow tag */
+.graff-parallax__eyebrow {
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  margin-bottom: 0.875rem;
+}
+
+.graff-parallax__slide--dark .graff-parallax__eyebrow {
+  color: #c9a86c;
+}
+
+.graff-parallax__slide--light .graff-parallax__eyebrow {
+  color: #8c7349;
+}
+
+/* Luxury Serif Title (Identical to Graff font styling) */
+.graff-parallax__title {
+  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
+  font-size: 2.75rem;
+  line-height: 1.12;
+  font-weight: 400;
+  letter-spacing: -0.015em;
+  margin: 0 0 1.25rem;
+  text-transform: none;
+  font-style: normal;
+  word-break: break-word;
+}
+
+@media (min-width: 768px) {
+  .graff-parallax__title {
+    font-size: 3.75rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .graff-parallax__title {
+    font-size: 4.5rem;
+  }
+}
+
+.graff-parallax__slide--dark .graff-parallax__title {
+  color: #ffffff;
+  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+}
+
+.graff-parallax__slide--light .graff-parallax__title {
+  color: #121417;
+  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.8);
+}
+
+/* Subtitle */
+.graff-parallax__subtitle {
+  font-family: var(--font-sans, -apple-system, sans-serif);
+  font-size: 1rem;
+  line-height: 1.65;
+  font-weight: 300;
+  margin-bottom: 2rem;
+  max-width: 520px;
+}
+
+@media (min-width: 768px) {
+  .graff-parallax__subtitle {
+    font-size: 1.125rem;
+  }
+}
+
+.graff-parallax__slide--dark .graff-parallax__subtitle {
+  color: rgba(255, 255, 255, 0.85);
+  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+}
+
+.graff-parallax__slide--light .graff-parallax__subtitle {
+  color: #383e47;
+}
+
+/* Discover CTA Button */
+.graff-parallax__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.95rem 2.25rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  text-decoration: none;
+  border-radius: 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
+}
+
+.graff-parallax__slide--dark .graff-parallax__btn {
+  background: rgba(181, 148, 97, 0.92);
+  color: #ffffff;
+  border: 1px solid rgba(201, 168, 108, 0.7);
+  backdrop-filter: blur(8px);
+}
+
+.graff-parallax__slide--dark .graff-parallax__btn:hover {
+  background: #ffffff;
+  color: #0b0f17;
+  border-color: #ffffff;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.graff-parallax__slide--light .graff-parallax__btn {
+  background: #13264d;
+  color: #ffffff;
+  border: 1px solid #13264d;
+}
+
+.graff-parallax__slide--light .graff-parallax__btn:hover {
+  background: #0b0f17;
+  border-color: #0b0f17;
+  color: #ffffff;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 22px rgba(19, 38, 77, 0.3);
+}
+
+/* --------------------------------------------------------------------------
+   Floating Pagination Dots on Right (Identical to Graff .b-parallax__pagination)
+   -------------------------------------------------------------------------- */
+.graff-parallax__pagination {
+  position: fixed;
+  right: clamp(18px, 2.4vw, 30px);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0.4s ease;
+}
+
+.graff-parallax__pagination.is-visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.graff-parallax__pagination-dot {
+  position: relative;
+  flex-shrink: 0;
+  width: 7.5px;
+  height: 7.5px;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  background: #ffffff;
+  cursor: pointer;
+  padding: 0;
+  transition:
+    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+    background 0.3s ease,
+    border-color 0.3s ease;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+}
+
+.graff-parallax__pagination-dot:hover {
+  transform: scale(1.15);
+}
+
+.graff-parallax__pagination-dot.is-active {
+  background: transparent;
+  border: 2px solid #ffffff;
+  transform: scale(1);
+}
+
+.graff-parallax__dot-tooltip {
+  display: none;
+}
+
+/* --------------------------------------------------------------------------
+   Bottom Scroll Down Indicator
+   -------------------------------------------------------------------------- */
+.graff-parallax__scroll-hint {
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  transition: opacity 0.4s ease;
+}
+
+.graff-parallax__scroll-hint-text {
+  font-size: 0.6875rem;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.graff-parallax__slide--light .graff-parallax__scroll-hint-text {
+  color: rgba(18, 20, 23, 0.7);
+}
+
+.graff-parallax__scroll-hint-line {
+  width: 1px;
+  height: 28px;
+  position: relative;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+.graff-parallax__slide--light .graff-parallax__scroll-hint-line {
+  background-color: rgba(18, 20, 23, 0.25);
+}
+
+.graff-parallax__scroll-hint-line::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 40%;
+  background-color: #ffffff;
+  animation: graffParallaxScrollDrop 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+.graff-parallax__slide--light .graff-parallax__scroll-hint-line::after {
+  background-color: #121417;
+}
+
+@keyframes graffParallaxScrollDrop {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  35% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(280%);
+    opacity: 0;
+  }
+}

package/src/segment.tsx

@@ -0,0 +1,51 @@
+import "./segment.css"
+import React from "react"
+import VerticalScrollClient from "./vertical-scroll-client"
+import { resolveAdminCollections } from "./resolve-collection"
+import { listCollections } from "@pradip1995/commerce-core/data/collections"
+import type { VerticalCollectionScrollProps } from "./types"
+import type { HttpTypes } from "@medusajs/types"
+
+export default async function VerticalCollectionScroll({
+  collections: propCollections,
+  nav,
+  items,
+  title,
+  eyebrow,
+  ariaLabel,
+}: VerticalCollectionScrollProps & {
+  nav?: { collections?: HttpTypes.StoreCollection[] }
+}) {
+  let collections = propCollections || nav?.collections
+
+  // If collections are not provided in props, dynamically fetch from Medusa
+  if (!collections || collections.length === 0) {
+    try {
+      const res = await listCollections({
+        limit: "100",
+        fields: "id,handle,title,+metadata",
+      })
+      if (res && res.collections && res.collections.length > 0) {
+        collections = res.collections
+      }
+    } catch {
+      // Fallback handled in resolveAdminCollections
+    }
+  }
+
+  // Resolve collection slides dynamically from Admin or fallback defaults
+  const resolvedItems = resolveAdminCollections(collections, items)
+
+  if (resolvedItems.length === 0) return null
+
+  return (
+    <VerticalScrollClient
+      items={resolvedItems}
+      title={title}
+      eyebrow={eyebrow}
+      ariaLabel={ariaLabel}
+    />
+  )
+}
+
+

package/src/types.ts

@@ -0,0 +1,37 @@
+import type { HttpTypes } from "@medusajs/types"
+
+export type VerticalCollectionSlide = {
+  id?: string
+  title?: string
+  name?: string
+  subtitle?: string
+  description?: string
+  eyebrow?: string
+  tag?: string
+  category?: string
+  buttonText?: string
+  ctaText?: string
+  buttonLink?: string
+  link?: string
+  href?: string
+  image?: string
+  imageUrl?: string
+  photo?: string
+  thumbnail?: string
+  banner?: string
+  imageAlt?: string
+  theme?: "dark" | "light"
+  handle?: string
+  collectionHandle?: string
+  accentColor?: string
+}
+
+export type VerticalCollectionScrollProps = {
+  items?: VerticalCollectionSlide[]
+  collections?: HttpTypes.StoreCollection[]
+  categories?: any[]
+  title?: string
+  eyebrow?: string
+  ariaLabel?: string
+  showPaginationDots?: boolean
+}

package/src/vertical-scroll-client.tsx

@@ -0,0 +1,216 @@
+"use client"
+
+import React, { useState, useEffect, useRef } from "react"
+import Image from "next/image"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import type { VerticalCollectionSlide } from "./types"
+
+export default function VerticalScrollClient({
+  items,
+  title,
+  eyebrow,
+  ariaLabel,
+}: {
+  items: VerticalCollectionSlide[]
+  title?: string
+  eyebrow?: string
+  ariaLabel?: string
+}) {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [isNavVisible, setIsNavVisible] = useState(false)
+  const [isReady, setIsReady] = useState(false)
+  const sectionRef = useRef<HTMLDivElement>(null)
+  const slideRefs = useRef<(HTMLDivElement | null)[]>([])
+  const activeIdxRef = useRef(0)
+
+  const count = items.length
+
+  useEffect(() => {
+    setIsReady(true)
+  }, [])
+
+  const scrollToSlide = (index: number) => {
+    const section = sectionRef.current
+    if (!section || typeof window === "undefined") return
+
+    const vh = window.innerHeight
+    const sectionTop = section.getBoundingClientRect().top + window.scrollY
+    window.scrollTo({
+      top: sectionTop + index * vh,
+      behavior: "smooth",
+    })
+  }
+
+  // Sticky stacked slides: IntersectionObserver fires for multiple slides at once.
+  // Use scroll position within the section (same as Graff parallax pin range).
+  useEffect(() => {
+    if (typeof window === "undefined" || count === 0) return
+
+    let raf = 0
+    const syncFromScroll = () => {
+      raf = 0
+      const section = sectionRef.current
+      if (!section) return
+
+      const rect = section.getBoundingClientRect()
+      const vh = window.innerHeight
+      if (vh <= 0) return
+
+      const sectionInView = rect.bottom > 0 && rect.top < vh
+      const inParallax = rect.top <= 0 && rect.bottom >= vh - 1
+
+      setIsNavVisible(sectionInView && count > 1)
+
+      const scrolled = Math.max(0, -rect.top)
+      const slideProgress = scrolled / vh
+
+      // Graff: 1:1 wheel scroll through pinned layers — stable index with hysteresis (no flicker).
+      let idx = activeIdxRef.current
+      if (inParallax) {
+        const p = slideProgress
+        if (p >= idx + 0.5 && idx < count - 1) {
+          idx += 1
+        } else if (idx > 0 && p < idx - 0.35) {
+          idx -= 1
+        }
+        if (rect.bottom <= vh + 2) {
+          idx = count - 1
+        }
+      } else if (sectionInView) {
+        idx = 0
+      }
+
+      activeIdxRef.current = idx
+      setActiveIndex(idx)
+    }
+
+    const onScroll = () => {
+      if (raf) return
+      raf = window.requestAnimationFrame(syncFromScroll)
+    }
+
+    syncFromScroll()
+    window.addEventListener("scroll", onScroll, { passive: true })
+    window.addEventListener("resize", onScroll, { passive: true })
+
+    return () => {
+      if (raf) window.cancelAnimationFrame(raf)
+      window.removeEventListener("scroll", onScroll)
+      window.removeEventListener("resize", onScroll)
+    }
+  }, [count])
+
+  if (count === 0) return null
+
+  return (
+    <section
+      ref={sectionRef}
+      className={`graff-parallax-section${isReady ? " is-ready" : ""}`}
+      aria-label={ariaLabel || title || "Luxury Collections Showcase"}
+    >
+      {/* Floating Right-Side Pagination Dots (Identical to Graff .b-parallax__pagination) */}
+      {count > 1 && (
+        <nav
+          className={`graff-parallax__pagination ${
+            isNavVisible ? "is-visible" : ""
+          }`}
+          aria-label="Collection slides navigation"
+        >
+          {items.map((slide, idx) => {
+            const isActive = idx === activeIndex
+            return (
+              <button
+                key={slide.id || `dot-${idx}`}
+                type="button"
+                className={`graff-parallax__pagination-dot ${
+                  isActive ? "is-active" : ""
+                }`}
+                onClick={() => scrollToSlide(idx)}
+                aria-label={`Scroll to slide ${idx + 1}: ${slide.title}`}
+                aria-current={isActive ? "true" : undefined}
+                title={slide.title}
+              />
+            )
+          })}
+        </nav>
+      )}
+
+      {/* Multiple Layered Sticky Slides (Identical to Graff .b-parallax__container pin:true, pinSpacing:false) */}
+      {items.map((slide, idx) => {
+        const theme = slide.theme || (idx % 2 === 1 ? "light" : "dark")
+        const imgUrl = slide.image || "/images/collections/emerald-sapphire.jpg"
+        const isActive = idx === activeIndex
+
+        return (
+          <div
+            key={slide.id || `slide-${idx}`}
+            ref={(el) => {
+              slideRefs.current[idx] = el
+            }}
+            className={`graff-parallax__slide graff-parallax__slide--${theme} ${
+              isActive ? "is-active" : ""
+            }`}
+            style={{
+              zIndex: idx + 1,
+            }}
+          >
+            <div className="graff-parallax__slide-inner">
+              {/* Full Bleed Image Background */}
+              <div className="graff-parallax__bg">
+                <Image
+                  src={imgUrl}
+                  alt={slide.imageAlt || slide.title || "Collection image"}
+                  fill
+                  priority={idx <= 1}
+                  quality={90}
+                  sizes="100vw"
+                  className="graff-parallax__image"
+                  unoptimized
+                />
+              </div>
+
+              {/* Editorial Typography Content */}
+              <div className="graff-parallax__content-wrap">
+                <div className="graff-parallax__content">
+                  {slide.eyebrow ? (
+                    <span className="graff-parallax__eyebrow">
+                      {slide.eyebrow}
+                    </span>
+                  ) : null}
+
+                  <h2 className="graff-parallax__title">{slide.title}</h2>
+
+                  {slide.subtitle ? (
+                    <p className="graff-parallax__subtitle">{slide.subtitle}</p>
+                  ) : null}
+
+                  <LocalizedLink
+                    href={slide.buttonLink || "/store"}
+                    className="graff-parallax__btn"
+                  >
+                    {slide.buttonText || "DISCOVER"}
+                  </LocalizedLink>
+                </div>
+              </div>
+
+              {/* Bottom Scroll Indicator on first slide */}
+              {idx === 0 && count > 1 && activeIndex === 0 && (
+                <button
+                  type="button"
+                  className="graff-parallax__scroll-hint"
+                  onClick={() => scrollToSlide(1)}
+                  aria-label="Scroll to next collection"
+                >
+                  <span className="graff-parallax__scroll-hint-text">
+                    SCROLL
+                  </span>
+                  <div className="graff-parallax__scroll-hint-line" />
+                </button>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </section>
+  )
+}