medusa-ui-home 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medusa-ui-home",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Homepage sections.",
   "type": "module",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "medusa-storefront-data": "^2.0.0",
     "medusa-storefront-hooks": "^1.0.0",
     "medusa-wishlist-logic": "^2.0.0",
+    "medusa-storefront-compose": "^1.0.0",
     "medusa-storefront-theme-base": "^2.0.0",
     "medusa-ui-common": "^2.0.0",
     "medusa-ui-product": "^2.0.0",
@@ -49,6 +50,16 @@
       "types": "./src/home/*",
       "import": "./src/home/*",
       "default": "./src/home/*"
+    },
+    "./home/register-sections": {
+      "types": "./src/home/register-sections.ts",
+      "import": "./src/home/register-sections.ts",
+      "default": "./src/home/register-sections.ts"
+    },
+    "./home/home-content": {
+      "types": "./src/home/home-content.tsx",
+      "import": "./src/home/home-content.tsx",
+      "default": "./src/home/home-content.tsx"
     }
   },
   "typesVersions": {
@@ -68,6 +79,7 @@
     "typescript": "^5.6.0",
     "medusa-storefront-analytics": "workspace:*",
     "medusa-storefront-data": "workspace:*",
+    "medusa-storefront-compose": "workspace:*",
     "medusa-storefront-theme-base": "workspace:*",
     "medusa-ui-common": "workspace:*",
     "medusa-ui-product": "workspace:*"

package/src/home/components/about-brand/index.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
+import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
+import { useThemeSection } from "medusa-ui-common/providers"
+
+export type AboutBrandStat = {
+  label: string
+  value: string
+}
+
+export type AboutBrandContent = {
+  eyebrow?: string
+  title: string
+  description: string
+  readMoreHref?: string
+  stats: AboutBrandStat[]
+}
+
+type AboutBrandProps = {
+  content: AboutBrandContent | null
+  classNames?: Partial<HomeThemeClassNames>
+}
+
+export default function AboutBrand({ content, classNames: classNamesProp }: AboutBrandProps) {
+  const cn = useThemeSection("home", classNamesProp)
+  if (!content) return null
+
+  return (
+    <section className={`${cn.sectionPad} ${cn.section}`}>
+      <div className="px-4 sm:px-6 md:px-8 lg:px-12">
+        <div className="mx-auto max-w-[1100px] text-center">
+          {content.eyebrow ? (
+            <p className={`text-xs sm:text-sm uppercase tracking-[0.25em] mb-3 ${cn.itemSubtitle}`}>
+              {content.eyebrow}
+            </p>
+          ) : null}
+          <h2 className={`text-2xl sm:text-3xl md:text-4xl font-bold mb-4 ${cn.bannerTitle}`}>
+            {content.title}
+          </h2>
+          <p className={`text-sm sm:text-base leading-relaxed max-w-3xl mx-auto mb-8 ${cn.bannerText}`}>
+            {content.description}
+          </p>
+
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-8">
+            {content.stats.map((stat) => (
+              <div
+                key={stat.label}
+                className={`rounded-2xl px-6 py-6 sm:py-8 ${cn.cardSurface}`}
+              >
+                <p className={`text-2xl sm:text-3xl font-bold mb-1 ${cn.itemTitle}`}>
+                  {stat.value}
+                </p>
+                <p className={`text-sm ${cn.itemSubtitle}`}>{stat.label}</p>
+              </div>
+            ))}
+          </div>
+
+          {content.readMoreHref ? (
+            <LocalizedClientLink
+              href={content.readMoreHref}
+              className={`inline-flex rounded-full border-2 border-[var(--sf-color-primary)] px-8 py-3 text-sm font-bold text-[var(--sf-color-primary)] hover:bg-[var(--sf-color-primary)] hover:text-[var(--sf-color-text-on-primary)] transition`}
+            >
+              Read More
+            </LocalizedClientLink>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/home/components/baptism-picks/index.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import Image from "next/image"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
+import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
+import { useThemeSection } from "medusa-ui-common/providers"
+
+type BaptismPicksProps = {
+  title?: string
+  products: HttpTypes.StoreProduct[]
+  classNames?: Partial<HomeThemeClassNames>
+}
+
+export default function BaptismPicks({
+  title,
+  products,
+  classNames: classNamesProp,
+}: BaptismPicksProps) {
+  const cn = useThemeSection("home", classNamesProp)
+  const items = (products ?? []).slice(0, 5)
+  if (items.length === 0) return null
+
+  return (
+    <section className={`${cn.sectionPad} ${cn.section}`}>
+      <div className="px-4 sm:px-6 md:px-8">
+        <div className="mx-auto max-w-[1360px]">
+          {title ? <h2 className={`${cn.sectionTitle} mb-8`}>{title}</h2> : null}
+          <div className="flex gap-4 sm:gap-6 overflow-x-auto pb-2 justify-center">
+            {items.map((product, index) => {
+              const thumb = product.thumbnail || product.images?.[0]?.url
+              return (
+                <LocalizedClientLink
+                  key={product.id}
+                  href={`/products/${product.handle}`}
+                  className="shrink-0 flex flex-col items-center gap-3 group"
+                >
+                  <div className="relative">
+                    <span className="absolute -top-2 -right-2 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-[var(--sf-btn-primary)] text-xs font-bold text-[var(--sf-color-text-on-primary)]">
+                      {index + 1}
+                    </span>
+                    <div
+                      className={`w-24 h-24 sm:w-28 sm:h-28 rounded-2xl overflow-hidden ring-2 ring-[var(--sf-color-border)] group-hover:ring-[var(--sf-color-primary)] ${cn.cardSurface}`}
+                    >
+                      {thumb ? (
+                        <Image
+                          src={thumb}
+                          alt={product.title ?? ""}
+                          width={112}
+                          height={112}
+                          className="w-full h-full object-cover"
+                          unoptimized
+                        />
+                      ) : (
+                        <div className={`w-full h-full ${cn.imagePlaceholder}`} />
+                      )}
+                    </div>
+                  </div>
+                  <span className={`text-[11px] sm:text-xs text-center max-w-[100px] line-clamp-2 ${cn.itemTitle}`}>
+                    {product.title}
+                  </span>
+                </LocalizedClientLink>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/home/components/baptism-section/index.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { HttpTypes } from "@medusajs/types"
+import ProductGridSection from "medusa-ui-home/home/components/shared/product-grid-section"
+import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
+import { useThemeSection } from "medusa-ui-common/providers"
+
+type BaptismSectionProps = {
+  title?: string
+  girlProducts: HttpTypes.StoreProduct[]
+  boyProducts: HttpTypes.StoreProduct[]
+  region: HttpTypes.StoreRegion
+  ratings?: Array<{ product_id?: string; [key: string]: unknown }>
+  classNames?: Partial<HomeThemeClassNames>
+}
+
+export default function BaptismSection({
+  title,
+  girlProducts,
+  boyProducts,
+  region,
+  ratings,
+  classNames: classNamesProp,
+}: BaptismSectionProps) {
+  const cn = useThemeSection("home", classNamesProp)
+  const [tab, setTab] = useState<"girl" | "boy">("girl")
+
+  const products = useMemo(
+    () => (tab === "girl" ? girlProducts : boyProducts),
+    [tab, girlProducts, boyProducts]
+  )
+
+  if (girlProducts.length === 0 && boyProducts.length === 0) return null
+
+  return (
+    <div className={cn.section}>
+      <div className="px-4 sm:px-6 md:px-8 lg:px-12">
+        <div className="mx-auto max-w-[1360px] flex justify-center gap-3 mb-6 sm:mb-8">
+          {(["girl", "boy"] as const).map((key) => (
+            <button
+              key={key}
+              type="button"
+              onClick={() => setTab(key)}
+              className={`rounded-full px-8 sm:px-12 py-2.5 text-sm font-bold capitalize transition ${
+                tab === key
+                  ? "bg-[var(--sf-btn-primary)] text-[var(--sf-color-text-on-primary)]"
+                  : `border border-[var(--sf-color-border)] ${cn.cardSurface} text-[var(--sf-color-text)]`
+              }`}
+            >
+              {key}
+            </button>
+          ))}
+        </div>
+      </div>
+      <ProductGridSection
+        title={title}
+        products={products}
+        region={region}
+        ratings={ratings}
+        columns={4}
+        maxProducts={8}
+        classNames={classNamesProp}
+        centeredTitle
+      />
+    </div>
+  )
+}

package/src/home/components/blog-posts/index.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import Image from "next/image"
+import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
+import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
+import { useThemeSection } from "medusa-ui-common/providers"
+
+export type BlogPostCard = {
+  title: string
+  excerpt?: string
+  category?: string
+  date?: string
+  href: string
+  image?: string
+}
+
+type BlogPostsProps = {
+  title?: string
+  posts: BlogPostCard[]
+  classNames?: Partial<HomeThemeClassNames>
+}
+
+export default function BlogPosts({
+  title,
+  posts,
+  classNames: classNamesProp,
+}: BlogPostsProps) {
+  const cn = useThemeSection("home", classNamesProp)
+  const items = (posts ?? []).slice(0, 4)
+  if (items.length === 0) return null
+
+  return (
+    <section className={`${cn.sectionPad} ${cn.section}`}>
+      <div className="px-4 sm:px-6 md:px-8 lg:px-12">
+        <div className="mx-auto max-w-[1360px]">
+          {title ? (
+            <h2 className={`${cn.sectionTitleLeft} mb-8 sm:mb-10`}>{title}</h2>
+          ) : null}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6">
+            {items.map((post) => (
+              <LocalizedClientLink
+                key={post.href}
+                href={post.href}
+                className={`group flex flex-col overflow-hidden rounded-2xl ${cn.cardSurface}`}
+              >
+                <div className="relative aspect-[4/3] w-full overflow-hidden">
+                  {post.image ? (
+                    <Image
+                      src={post.image}
+                      alt={post.title}
+                      fill
+                      className="object-cover transition-transform duration-500 group-hover:scale-105"
+                      sizes="(max-width: 640px) 100vw, 25vw"
+                      unoptimized
+                    />
+                  ) : (
+                    <div className={`w-full h-full ${cn.imagePlaceholder}`} />
+                  )}
+                </div>
+                <div className="p-4 flex flex-col flex-1">
+                  {post.category ? (
+                    <span className={`text-xs font-semibold uppercase mb-2 ${cn.itemSubtitle}`}>
+                      {post.category}
+                    </span>
+                  ) : null}
+                  <h3 className={`font-bold text-sm sm:text-base mb-2 line-clamp-2 group-hover:text-[var(--sf-color-primary)] ${cn.itemTitle}`}>
+                    {post.title}
+                  </h3>
+                  {post.excerpt ? (
+                    <p className={`text-xs sm:text-sm line-clamp-2 mb-2 flex-1 ${cn.itemSubtitle}`}>
+                      {post.excerpt}
+                    </p>
+                  ) : null}
+                  {post.date ? (
+                    <span className={`text-[11px] ${cn.itemSubtitle}`}>{post.date}</span>
+                  ) : null}
+                </div>
+              </LocalizedClientLink>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/home/components/brand-marquee/index.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
+import { useThemeSection } from "medusa-ui-common/providers"
+
+type BrandMarqueeProps = {
+  text?: string | null
+  classNames?: Partial<HomeThemeClassNames>
+}
+
+export default function BrandMarquee({
+  text,
+  classNames: classNamesProp,
+}: BrandMarqueeProps) {
+  if (!text) return null
+  const cn = useThemeSection("home", classNamesProp)
+  const segment = `${text} - `
+  const line = segment.repeat(12)
+
+  return (
+    <div
+      className={`w-full py-4 sm:py-5 overflow-hidden border-y border-[var(--sf-color-border)] ${cn.section}`}
+      style={{
+        background: "var(--sf-color-primary)",
+        color: "var(--sf-color-text-on-primary)",
+      }}
+    >
+      <div className="flex animate-[sf-brand-marquee_20s_linear_infinite] whitespace-nowrap text-sm sm:text-base font-bold uppercase tracking-[0.35em]">
+        <span>{line}</span>
+        <span>{line}</span>
+      </div>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `@keyframes sf-brand-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}`,
+        }}
+      />
+    </div>
+  )
+}

package/src/home/components/brand-pillars/index.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import Image from "next/image"
+import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
+import { useThemeSection } from "medusa-ui-common/providers"
+
+export type BrandPillar = {
+  title: string
+  description: string
+  image?: string
+}
+
+type BrandPillarsProps = {
+  sectionTitle?: string
+  pillars: BrandPillar[]
+  classNames?: Partial<HomeThemeClassNames>
+}
+
+export default function BrandPillars({
+  sectionTitle,
+  description,
+  pillars,
+  classNames: classNamesProp,
+}: BrandPillarsProps & { description?: string }) {
+  const cn = useThemeSection("home", classNamesProp)
+  if (!pillars?.length) return null
+
+  return (
+    <section className={`${cn.sectionPad} ${cn.section}`}>
+      <div className="px-4 sm:px-6 md:px-8 lg:px-12">
+        <div className="mx-auto max-w-[1360px]">
+          {sectionTitle ? (
+            <h2 className={`${cn.sectionTitle} mb-8 sm:mb-12 max-w-3xl mx-auto`}>
+              {sectionTitle}
+            </h2>
+          ) : null}
+          {description ? (
+            <p className={`text-sm sm:text-base text-center max-w-2xl mx-auto mb-8 ${cn.itemSubtitle}`}>
+              {description}
+            </p>
+          ) : null}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
+            {pillars.map((pillar, index) => (
+              <div
+                key={`${pillar.title}-${index}`}
+                className={`overflow-hidden rounded-2xl sm:rounded-3xl ${cn.cardSurface}`}
+              >
+                {pillar.image ? (
+                  <div className="relative aspect-[16/10] w-full">
+                    <Image
+                      src={pillar.image}
+                      alt={pillar.title}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 768px) 100vw, 50vw"
+                      unoptimized
+                    />
+                  </div>
+                ) : (
+                  <div className={`aspect-[16/10] w-full ${cn.imagePlaceholder}`} />
+                )}
+                <div className="p-5 sm:p-6">
+                  <h3 className={`text-lg sm:text-xl font-bold mb-2 ${cn.itemTitle}`}>
+                    {pillar.title}
+                  </h3>
+                  <p className={`text-sm sm:text-base leading-relaxed ${cn.itemSubtitle}`}>
+                    {pillar.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/home/components/category-pills/index.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import Image from "next/image"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
+import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
+import { useThemeSection } from "medusa-ui-common/providers"
+
+type CategoryPillsProps = {
+  categories: HttpTypes.StoreProductCategory[]
+  classNames?: Partial<HomeThemeClassNames>
+}
+
+export default function CategoryPills({
+  categories,
+  classNames: classNamesProp,
+}: CategoryPillsProps) {
+  const cn = useThemeSection("home", classNamesProp)
+
+  const pills = (categories ?? [])
+    .filter((c) => c.name && c.handle)
+    .slice(0, 14)
+
+  if (pills.length === 0) return null
+
+  return (
+    <section className={`w-full py-6 sm:py-8 ${cn.section}`}>
+      <div className="px-4 sm:px-6 md:px-8">
+        <div className="mx-auto max-w-[1360px]">
+          <div className="flex gap-3 sm:gap-4 overflow-x-auto pb-2 scrollbar-hide snap-x snap-mandatory">
+            {pills.map((category) => {
+              const thumb =
+                (category as { thumbnail?: string }).thumbnail ||
+                (category.metadata as { image?: string } | undefined)?.image
+
+              return (
+                <LocalizedClientLink
+                  key={category.id}
+                  href={`/categories/${category.handle}`}
+                  className={`snap-start shrink-0 flex flex-col items-center gap-2 min-w-[88px] sm:min-w-[100px] group`}
+                >
+                  <div
+                    className={`w-16 h-16 sm:w-20 sm:h-20 rounded-full overflow-hidden ring-2 ring-[var(--sf-color-border)] group-hover:ring-[var(--sf-color-primary)] transition-all ${cn.cardSurface}`}
+                  >
+                    {thumb ? (
+                      <Image
+                        src={thumb}
+                        alt={category.name ?? ""}
+                        width={80}
+                        height={80}
+                        className="w-full h-full object-cover"
+                        unoptimized
+                      />
+                    ) : (
+                      <div
+                        className={`w-full h-full flex items-center justify-center text-lg font-bold ${cn.imagePlaceholder} text-[var(--sf-color-primary)]`}
+                      >
+                        {category.name?.charAt(0)}
+                      </div>
+                    )}
+                  </div>
+                  <span
+                    className={`text-[11px] sm:text-xs text-center font-medium leading-tight max-w-[92px] ${cn.categoryTitle}`}
+                  >
+                    {category.name}
+                  </span>
+                </LocalizedClientLink>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/home/components/celebrity-trust/index.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { HttpTypes } from "@medusajs/types"
+import type { HomeThemeClassNames } from "medusa-storefront-theme-base"
+import { useThemeSection } from "medusa-ui-common/providers"
+import { ProductCardView } from "medusa-ui-product/product-cards"
+import { getProductPrice } from "medusa-ui-common/util/get-product-price"
+import { convertToLocale } from "medusa-ui-common/util/money"
+import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
+
+type CelebrityTrustProps = {
+  title?: string
+  subtitle?: string
+  product?: HttpTypes.StoreProduct | null
+  region: HttpTypes.StoreRegion
+  classNames?: Partial<HomeThemeClassNames>
+}
+
+export default function CelebrityTrust({
+  title,
+  subtitle,
+  product,
+  region,
+  classNames: classNamesProp,
+}: CelebrityTrustProps) {
+  const cn = useThemeSection("home", classNamesProp)
+
+  return (
+    <section className={`${cn.sectionPad} ${cn.section}`}>
+      <div className="px-4 sm:px-6 md:px-8 lg:px-12">
+        <div className="mx-auto max-w-[1360px]">
+          {title || subtitle ? (
+            <div className="text-center mb-8 sm:mb-10">
+              {title ? <h2 className={cn.sectionTitle}>{title}</h2> : null}
+              {subtitle ? (
+                <p className={`mt-3 text-sm sm:text-base ${cn.itemSubtitle}`}>{subtitle}</p>
+              ) : null}
+            </div>
+          ) : null}
+
+          {product ? (
+            <div className="grid md:grid-cols-2 gap-8 items-center">
+              <div className="flex justify-center">
+                <div className="w-full max-w-[320px]">
+                  <ProductCardView product={product} region={region} />
+                </div>
+              </div>
+              <div className="space-y-4 text-center md:text-left">
+                <h3 className={`text-xl sm:text-2xl font-bold ${cn.itemTitle}`}>
+                  {product.title}
+                </h3>
+                {(() => {
+                  const { cheapestPrice } = getProductPrice({ product })
+                  return cheapestPrice ? (
+                    <p className={`text-lg font-semibold ${cn.itemTitle}`}>
+                      {convertToLocale({
+                        amount: cheapestPrice.calculated_price_number,
+                        currency_code: cheapestPrice.currency_code,
+                      })}
+                    </p>
+                  ) : null
+                })()}
+                <LocalizedClientLink
+                  href={`/products/${product.handle}`}
+                  className={`inline-flex items-center justify-center rounded-full px-8 py-3 text-sm font-bold transition ${cn.cardSurface} bg-[var(--sf-btn-primary)] text-[var(--sf-color-text-on-primary)] hover:bg-[var(--sf-btn-primary-hover)]`}
+                >
+                  Shop now
+                </LocalizedClientLink>
+              </div>
+            </div>
+          ) : (
+            <div className={`text-center py-12 rounded-2xl ${cn.banner}`}>
+              <p className={cn.emptyState}>Featured celebrity look coming soon.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/home/components/features/index.tsx

@@ -4,44 +4,48 @@ import {
   type HomeThemeClassNames,
 } from "medusa-storefront-theme-base"
 
-const features = [
-  {
-    name: "100% Secure",
-    icon: "/secure.svg",
-  },
-  {
-    name: "Easy Exchanges",
-    icon: "/exchnage.svg",
-  },
-  {
-    name: "Fast Delivery",
-    icon: "/fast.svg",
-  },
-  {
-    name: "Cash On Delivery",
-    icon: "/cash.svg",
-  },
-]
+export type TrustFeatureItem = {
+  name: string
+  icon: string
+}
 
 type FeaturesProps = {
+  title?: string | null
+  description?: string | null
+  features: TrustFeatureItem[]
   classNames?: Partial<HomeThemeClassNames>
 }
 
-const Features = ({ classNames: classNamesProp }: FeaturesProps) => {
+const Features = ({
+  title,
+  description,
+  features,
+  classNames: classNamesProp,
+}: FeaturesProps) => {
   const cn = resolveThemeSection("home", classNamesProp)
+  if (!features.length) return null
 
   return (
     <div className={`w-full py-4 min-[350px]:py-5 sm:py-6 md:py-8 lg:py-10 px-3 min-[350px]:px-4 sm:px-6 md:px-8 lg:px-12 ${cn.section}`}>
       <div className="max-w-[1360px] mx-auto w-full">
-        {/* Responsive Grid: 4 columns across all screens, but adjusted sizing/layout */}
+        {title || description ? (
+          <div className="text-center mb-6 sm:mb-8 max-w-2xl mx-auto">
+            {title ? (
+              <h2 className={`${cn.sectionTitle} mb-2`}>{title}</h2>
+            ) : null}
+            {description ? (
+              <p className={`text-sm sm:text-base ${cn.itemSubtitle}`}>{description}</p>
+            ) : null}
+          </div>
+        ) : null}
         <div className="grid grid-cols-4 gap-2 sm:gap-4 md:gap-6 lg:gap-8 items-start justify-items-center">
           {features.map((feature, index) => (
             <div
-              key={feature.name}
+              key={`${feature.name}-${index}`}
               className={`
                 flex flex-col sm:flex-row items-center justify-start 
                 w-full relative px-1 sm:px-2
-                ${index < features.length - 1 ? `sm:border-r ${cn.featureBorder}` : ''}
+                ${index < features.length - 1 ? `sm:border-r ${cn.featureBorder}` : ""}
               `}
             >
               <div className="relative w-8 h-8 xs:w-10 xs:h-10 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 xl:w-20 xl:h-20 mb-1.5 sm:mb-0 sm:mr-2 md:mr-3 lg:mr-4 flex-shrink-0">
@@ -70,4 +74,3 @@ const Features = ({ classNames: classNamesProp }: FeaturesProps) => {
 }
 
 export default Features
-