@pradip1995/theme-sahsha 3.1.0

package/README.md

@@ -0,0 +1,29 @@
+# @pradip1995/theme-sahsha
+
+Production Sahsha brand theme for Medusa storefronts — forked from Impulse with luxury nav, editorial home blocks, account login shell, and Sahsha design tokens.
+
+## Design highlights
+
+- Montserrat + Playfair Display typography (`#5a2a43` accent)
+- Split nav header with categories/collections dropdowns and smart search
+- Hero, shop-by-category, new arrivals, shop-by-age, testimonials, loved-by-moms blocks
+- Account login split-panel layout with OTP guest-order flow
+- Cashfree-oriented checkout slots (payment UI lives in app modules)
+
+## Use in a storefront
+
+```bash
+./scripts/create-storefront.sh my-shop --theme sahsha --use-package
+```
+
+Monorepo reference app: `apps/storefront-template` with `pnpm dev:sahsha` (uses this theme package).
+
+```ts
+import "@pradip1995/theme-sahsha/tokens/theme.css"
+```
+
+## Fork for full customization
+
+```bash
+./scripts/create-theme.sh my-brand --from sahsha
+```

package/assets/hero-desktop.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 600" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="hero" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#e8e4df"/>
+      <stop offset="50%" stop-color="#d4cfc8"/>
+      <stop offset="100%" stop-color="#b8b0a6"/>
+    </linearGradient>
+  </defs>
+  <rect width="1440" height="600" fill="url(#hero)"/>
+</svg>

package/assets/hero-mobile.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 960" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="hero-m" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#e8e4df"/>
+      <stop offset="100%" stop-color="#b8b0a6"/>
+    </linearGradient>
+  </defs>
+  <rect width="750" height="960" fill="url(#hero-m)"/>
+</svg>

package/assets/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 48" fill="none">
+  <text x="0" y="34" font-family="Georgia, serif" font-size="28" fill="#1a1a1a">Your Store</text>
+</svg>

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@pradip1995/theme-sahsha",
+  "version": "3.1.0",
+  "description": "Sahsha storefront theme — Impulse-based editorial layout, luxury nav, and brand tokens",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SmartByteLabs/medusa-storefront-kit.git",
+    "directory": "packages/theme-sahsha"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "src",
+    "assets"
+  ],
+  "exports": {
+    "./tokens/theme.css": "./src/tokens/theme.css",
+    "./tokens": "./src/tokens/index.ts",
+    "./tokens/*": "./src/tokens/*",
+    "./layouts/*": "./src/layouts/*",
+    "./primitives": "./src/primitives/index.ts",
+    "./primitives/*": "./src/primitives/*",
+    "./blocks/*": "./src/blocks/*/index.tsx",
+    "./slots/*": "./src/slots/*/index.tsx",
+    "./*": "./src/*"
+  },
+  "peerDependencies": {
+    "@pradip1995/commerce-auth": "^3.0.0",
+    "@pradip1995/commerce-core": "^3.0.0",
+    "@medusajs/types": ">=2",
+    "@medusajs/ui": ">=4",
+    "color": ">=5",
+    "next": ">=15",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@pradip1995/commerce-auth": "^3.0.0",
+    "@pradip1995/commerce-core": "^3.0.0",
+    "@medusajs/types": "latest",
+    "@medusajs/ui": "latest",
+    "@types/color": "^4.2.0",
+    "@types/react": "^19",
+    "color": "^5.0.3",
+    "next": "15.3.8",
+    "react": "19.0.3",
+    "react-dom": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.typecheck.json",
+    "lint": "tsc --noEmit -p tsconfig.typecheck.json"
+  }
+}

package/src/blocks/home/Features/index.tsx

@@ -0,0 +1,87 @@
+import Image from "next/image"
+
+const features = [
+  { 
+    name: "Free Shipping", 
+    description: "On all orders over ₹999", 
+    icon: "/delivery.svg" 
+  },
+  { 
+    name: "Easy Returns", 
+    description: "Hassle-free 15-day returns", 
+    icon: "/Return.svg" 
+  },
+  { 
+    name: "Secure Checkout", 
+    description: "100% protected payments", 
+    icon: "/secure-shield.png" 
+  },
+  { 
+    name: "Cash on Delivery", 
+    description: "Pay at your doorstep", 
+    icon: "/Cod.svg" 
+  },
+]
+
+/** Premium Impulse-style trust badge strip. */
+const Features = () => {
+  return (
+    <section className="w-full bg-page-bg py-4 md:py-8 border-y border-[var(--color-border)] overflow-hidden">
+      <style>{`
+        @keyframes infinite-scroll {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-50%); }
+        }
+        .animate-infinite-scroll {
+          animation: infinite-scroll 12s linear infinite;
+        }
+      `}</style>
+      <div className="mx-auto px-4 sm:px-6" style={{ maxWidth: "var(--container-max)" }}>
+        
+        {/* Mobile Continuous Marquee */}
+        <div className="flex sm:hidden relative w-full overflow-hidden -mx-4 px-4" style={{ width: 'calc(100% + 2rem)' }}>
+          <div className="flex animate-infinite-scroll w-max hover:[animation-play-state:paused]">
+            {[...features, ...features].map((feature, idx) => (
+              <div
+                key={`${feature.name}-${idx}`}
+                className="flex flex-col items-center text-center px-4 w-[140px]"
+              >
+                <div className="w-10 h-10 rounded-full bg-surface flex items-center justify-center border border-[var(--color-border)] mb-2">
+                  <Image src={feature.icon} alt={feature.name} width={36} height={36} className="w-5 h-5 object-contain" />
+                </div>
+                <h3 className="whitespace-nowrap text-[10px] font-black uppercase tracking-tighter text-heading mb-0.5">
+                  {feature.name}
+                </h3>
+                <p className="whitespace-nowrap text-[8px] text-muted font-medium">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Desktop Grid */}
+        <div className="hidden sm:grid sm:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
+          {features.map((feature) => (
+            <div key={feature.name} className="group flex flex-col items-center text-center space-y-3">
+              <div className="w-14 h-14 lg:w-[72px] lg:h-[72px] rounded-full bg-surface flex items-center justify-center transition-all duration-300 group-hover:-translate-y-1 group-hover:shadow-brand-sm border border-[var(--color-border)]">
+                <Image src={feature.icon} alt={feature.name} width={36} height={36} className="w-7 h-7 lg:w-9 lg:h-9 object-contain opacity-80 group-hover:opacity-100 transition-opacity" />
+              </div>
+              <div>
+                <h3 className="whitespace-nowrap sm:text-[11px] lg:text-[13px] font-black uppercase sm:tracking-widest text-heading mb-1.5">
+                  {feature.name}
+                </h3>
+                <p className="whitespace-nowrap sm:text-[10px] lg:text-xs text-muted max-w-[200px] mx-auto font-medium leading-normal">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+      </div>
+    </section>
+  )
+}
+
+export default Features

package/src/blocks/home/Hero/index.tsx

@@ -0,0 +1,98 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import type { HeroBlockData } from "@core/types/home"
+
+const Hero = ({ homeBanner, appBanner }: HeroBlockData) => {
+  const desktopImage = homeBanner.image!
+  const mobileImage = appBanner.image || desktopImage
+
+  return (
+    <section className="w-full impulse-hero-nav-overlap">
+      {/* Desktop */}
+      <div className="hidden min-[551px]:block impulse-hero impulse-hero--desktop">
+        <Image
+          src={desktopImage}
+          alt={homeBanner.subtitle || homeBanner.title || "Hero banner"}
+          fill
+          priority
+          sizes="100vw"
+          className="impulse-hero__image"
+        />
+
+        <div className="impulse-hero__panel">
+          <div className="impulse-hero__panel-inner">
+            <div className="impulse-hero__overlay" aria-hidden />
+            <div className="impulse-hero__content">
+              {homeBanner.title && (
+                <p className="impulse-hero__eyebrow">{homeBanner.title}</p>
+              )}
+              {homeBanner.subtitle && (
+                <h1 className="impulse-hero__title">{homeBanner.subtitle}</h1>
+              )}
+              {homeBanner.description && (
+                <p className="impulse-hero__description">
+                  {homeBanner.description}
+                </p>
+              )}
+              {homeBanner.buttonName && (
+                <LocalizedClientLink href={homeBanner.buttonLink || "/store"}>
+                  <span
+                    className="impulse-hero__cta"
+                    data-ga-event="hero_banner_click"
+                    data-ga-label={homeBanner.buttonName}
+                  >
+                    <span className="impulse-hero__cta-label">
+                      {homeBanner.buttonName}
+                    </span>
+                  </span>
+                </LocalizedClientLink>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile */}
+      <div className="block min-[551px]:hidden impulse-hero impulse-hero--mobile">
+        <Image
+          src={mobileImage}
+          alt={appBanner.subtitle || appBanner.title || "Hero banner"}
+          fill
+          priority
+          sizes="100vw"
+          className="impulse-hero__image"
+        />
+
+        <div className="impulse-hero__panel">
+          <div className="impulse-hero__panel-inner">
+            <div className="impulse-hero__overlay" aria-hidden />
+            <div className="impulse-hero__content">
+              {appBanner.title && (
+                <p className="impulse-hero__eyebrow">{appBanner.title}</p>
+              )}
+              {appBanner.subtitle && (
+                <h1 className="impulse-hero__title">{appBanner.subtitle}</h1>
+              )}
+              {appBanner.description && (
+                <p className="impulse-hero__description">
+                  {appBanner.description}
+                </p>
+              )}
+              {appBanner.buttonName && (
+                <LocalizedClientLink href={appBanner.buttonLink || "/store"}>
+                  <span className="impulse-hero__cta">
+                    <span className="impulse-hero__cta-label">
+                      {appBanner.buttonName}
+                    </span>
+                  </span>
+                </LocalizedClientLink>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Hero

package/src/blocks/home/LovedByMoms/bestsellers-carousel.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/components/product-carousel"

package/src/blocks/home/LovedByMoms/index.tsx

@@ -0,0 +1,43 @@
+import { HttpTypes } from "@medusajs/types"
+import type { ProductCardRating } from "@core/types/product-card"
+import { getBestsellerProducts } from "@lib/data/bestsellers"
+import LovedByMomsSection from "./loved-by-moms-section"
+
+type LovedByMomsProps = {
+  products: HttpTypes.StoreProduct[]
+  region: HttpTypes.StoreRegion
+  ratings?: ProductCardRating[]
+}
+
+/** Best seller products — fetched by `best seller` tag, shown in swipe carousel. */
+const LovedByMoms = async ({
+  products: fallbackProducts,
+  region,
+  ratings,
+}: LovedByMomsProps) => {
+  const countryCode =
+    region.countries?.[0]?.iso_2?.toLowerCase() ??
+    process.env.NEXT_PUBLIC_DEFAULT_REGION ??
+    "in"
+
+  let products = fallbackProducts ?? []
+
+  try {
+    const taggedProducts = await getBestsellerProducts(countryCode, 12)
+    if (taggedProducts.length > 0) {
+      products = taggedProducts
+    }
+  } catch {
+    products = fallbackProducts ?? []
+  }
+
+  return (
+    <LovedByMomsSection
+      products={products}
+      region={region}
+      ratings={ratings}
+    />
+  )
+}
+
+export default LovedByMoms

package/src/blocks/home/LovedByMoms/loved-by-moms-section.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+import type { ProductCardRating } from "@core/types/product-card"
+import BestsellersCarousel from "./bestsellers-carousel"
+
+type LovedByMomsSectionProps = {
+  products: HttpTypes.StoreProduct[]
+  region: HttpTypes.StoreRegion
+  ratings?: ProductCardRating[]
+}
+
+const LovedByMomsSection = ({
+  products,
+  region,
+  ratings,
+}: LovedByMomsSectionProps) => {
+  if (products.length === 0) {
+    return null
+  }
+
+  return (
+    <section className="bestsellers w-full bg-page-bg">
+      <div className="bestsellers__inner">
+        <div className="flex flex-row items-center justify-between mb-6 sm:mb-8">
+          <h2 className="bestsellers__title !mb-0">Best sellers</h2>
+          <LocalizedClientLink
+            href="/store?sortBy=bestsellers"
+            className="bestsellers__link !mt-0"
+          >
+            View all
+          </LocalizedClientLink>
+        </div>
+
+        <BestsellersCarousel
+          products={products}
+          region={region}
+          ratings={ratings}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default LovedByMomsSection

package/src/blocks/home/NewArrivals/index.tsx

@@ -0,0 +1,91 @@
+import { listStoreProductsWithSort } from "@lib/data/store-products"
+import { fetchRatings } from "@core/data/reviews"
+import type { ProductCardRating } from "@core/types/product-card"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import ProductCarousel from "@theme/components/product-carousel"
+import PromotionalBanners from "../PromotionalBanners"
+
+type NewArrivalsProps = {
+  products: HttpTypes.StoreProduct[]
+  region: HttpTypes.StoreRegion
+  ratings?: ProductCardRating[]
+}
+
+const NewArrivals = async ({
+  products: fallbackProducts,
+  region,
+  ratings,
+}: NewArrivalsProps) => {
+  const countryCode =
+    region.countries?.[0]?.iso_2?.toLowerCase() ??
+    process.env.NEXT_PUBLIC_DEFAULT_REGION ??
+    "in"
+
+  let products = fallbackProducts ?? []
+  let allRatings: ProductCardRating[] = ratings ?? []
+
+  try {
+    const [productsResult, ratingsResult] = await Promise.all([
+      listStoreProductsWithSort({
+        page: 1,
+        queryParams: { limit: 12 },
+        sortBy: "created_at_desc",
+        countryCode,
+      }),
+      fetchRatings(),
+    ])
+
+    if (productsResult.response.products?.length > 0) {
+      products = productsResult.response.products
+    }
+
+    if (Array.isArray(ratingsResult) && ratingsResult.length > 0) {
+      allRatings = ratingsResult as ProductCardRating[]
+    }
+  } catch {
+    products = fallbackProducts ?? []
+    allRatings = ratings ?? []
+  }
+
+  const visibleProducts = products.slice(0, 12)
+
+  return (
+    <>
+      <section className="new-arrivals w-full py-8 md:py-12 bg-page-bg">
+        <div
+          className="mx-auto px-2 sm:px-3 lg:px-4"
+          style={{ maxWidth: "var(--container-max)" }}
+        >
+          <div className="flex items-end justify-between gap-4 mb-6 md:mb-8">
+            <h2 className="font-display text-2xl md:text-3xl text-heading">
+              New arrivals
+            </h2>
+            <LocalizedClientLink
+              href="/store"
+              className="text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading border-b border-heading pb-0.5 hover:opacity-70 transition-opacity shrink-0"
+            >
+              View all
+            </LocalizedClientLink>
+          </div>
+
+          {visibleProducts.length > 0 ? (
+            <ProductCarousel
+              products={visibleProducts}
+              region={region}
+              ratings={allRatings}
+            />
+          ) : (
+            <p className="text-center py-12 text-[var(--color-text-muted)]">
+              No new arrivals at the moment. Check back soon!
+            </p>
+          )}
+        </div>
+      </section>
+
+      <PromotionalBanners />
+    </>
+  )
+}
+
+export default NewArrivals

package/src/blocks/home/PromotionalBanners/index.tsx

@@ -0,0 +1,81 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { getPromotionalBannersFromConfig } from "@lib/data/promotional-banners"
+
+const PromotionalBanners = async () => {
+  const banners = await getPromotionalBannersFromConfig()
+
+  if (banners.length === 0) {
+    return null
+  }
+
+  const isSingle = banners.length === 1
+
+  return (
+    <section className="promo-banners" aria-label="Promotions">
+      <div
+        className={
+          isSingle ? "promo-banners__single" : "promo-banners__grid"
+        }
+      >
+        {banners.slice(0, 2).map((banner, index) => {
+          const content = (
+            <>
+              <Image
+                src={banner.image}
+                alt={banner.title || `Promotional banner ${index + 1}`}
+                fill
+                className="promo-banners__image"
+                sizes={
+                  isSingle
+                    ? "100vw"
+                    : "(max-width: 768px) 100vw, 50vw"
+                }
+                unoptimized
+              />
+              <div className="promo-banners__overlay" aria-hidden />
+              <div className="promo-banners__content">
+                {banner.title && (
+                  <h3 className="promo-banners__title">{banner.title}</h3>
+                )}
+                {banner.description && (
+                  <p className="promo-banners__description">
+                    {banner.description}
+                  </p>
+                )}
+                {banner.buttonName && (
+                  <span className="promo-banners__cta">
+                    {banner.buttonName}
+                  </span>
+                )}
+              </div>
+            </>
+          )
+
+          if (banner.link) {
+            return (
+              <LocalizedClientLink
+                key={`${banner.image}-${index}`}
+                href={banner.link}
+                className="promo-banners__tile"
+              >
+                {content}
+              </LocalizedClientLink>
+            )
+          }
+
+          return (
+            <div
+              key={`${banner.image}-${index}`}
+              className="promo-banners__tile"
+            >
+              {content}
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+export default PromotionalBanners