@pradip1995/theme-impulse 1.1.4

package/README.md

@@ -0,0 +1,31 @@
+# @pradip1995/theme-impulse
+
+Shopify [Impulse](https://themes.shopify.com/themes/impulse/presets/impulse)-inspired storefront theme for Medusa.
+
+## Design highlights
+
+- **Karla + Playfair Display** typography with wide uppercase nav tracking
+- **Full-bleed hero** with bottom overlay and bordered CTA
+- **Promo tiles** — 3-up collection blocks below the hero
+- **Category image grid** with hover zoom
+- **Product cards** with image rollover and quick-add
+- **Trust badge strip** and editorial testimonial carousel
+- **Sticky header**, promo bar, dark footer
+
+## Use in a storefront
+
+```bash
+./scripts/create-storefront.sh my-shop --theme impulse
+```
+
+Or as an npm package (CSS-only overrides):
+
+```ts
+import "@pradip1995/theme-impulse/tokens/theme.css"
+```
+
+## Fork for full customization
+
+```bash
+./scripts/create-theme.sh my-brand --from impulse
+```

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-impulse",
+  "version": "1.1.4",
+  "description": "Shopify Impulse-inspired Medusa storefront theme — promo tiles, editorial typography, mobile-first product grid",
+  "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-impulse"
+  },
+  "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": "^1.1.4",
+    "@pradip1995/commerce-core": "^1.1.4",
+    "@medusajs/types": ">=2",
+    "@medusajs/ui": ">=4",
+    "color": ">=5",
+    "next": ">=15",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@pradip1995/commerce-auth": "^1.1.4",
+    "@pradip1995/commerce-core": "^1.1.4",
+    "@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,37 @@
+const features = [
+  { name: "Free shipping" },
+  { name: "Easy returns" },
+  { name: "Secure checkout" },
+  { name: "Customer support" },
+]
+
+/** Impulse-style trust badge strip. */
+const Features = () => {
+  return (
+    <section className="w-full border-y border-[var(--color-border)] bg-page-bg">
+      <div
+        className="mx-auto px-4 sm:px-6 py-5 md:py-6"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <ul className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
+          {features.map((feature, index) => (
+            <li
+              key={feature.name}
+              className={`flex items-center justify-center text-center ${
+                index < features.length - 1
+                  ? "md:border-r md:border-[var(--color-border)]"
+                  : ""
+              }`}
+            >
+              <span className="text-[10px] sm:text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading">
+                {feature.name}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+export default Features

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

@@ -0,0 +1,102 @@
+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">
+      {/* Desktop — Impulse full-bleed hero with overlay */}
+      <div className="hidden min-[551px]:block relative w-full min-h-[420px] md:min-h-[520px] lg:min-h-[600px]">
+        <Image
+          src={desktopImage}
+          alt={homeBanner.subtitle || homeBanner.title || "Hero banner"}
+          fill
+          priority
+          sizes="100vw"
+          className="object-cover"
+        />
+        <div
+          className="absolute inset-0"
+          style={{ background: "var(--gradient-hero)" }}
+        />
+        <div className="absolute inset-0 flex items-end">
+          <div
+            className="w-full mx-auto px-8 md:px-12 lg:px-16 pb-12 md:pb-16 lg:pb-20"
+            style={{ maxWidth: "var(--container-max)" }}
+          >
+            <div className="max-w-xl text-[var(--color-text-inverse)]">
+              {homeBanner.title && (
+                <p className="text-xs md:text-sm font-semibold uppercase tracking-[var(--letter-spacing-nav)] mb-3 opacity-90">
+                  {homeBanner.title}
+                </p>
+              )}
+              {homeBanner.subtitle && (
+                <h1 className="font-display text-3xl md:text-5xl lg:text-6xl font-normal leading-heading mb-4">
+                  {homeBanner.subtitle}
+                </h1>
+              )}
+              {homeBanner.description && (
+                <p className="text-sm md:text-base text-white/85 mb-8 max-w-md leading-relaxed">
+                  {homeBanner.description}
+                </p>
+              )}
+              {homeBanner.buttonName && (
+                <LocalizedClientLink href={homeBanner.buttonLink || "/store"}>
+                  <span
+                    className="inline-block border-2 border-white text-white px-8 py-3 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] hover:bg-white hover:text-brand-accent transition-colors duration-300"
+                    data-ga-event="hero_banner_click"
+                    data-ga-label={homeBanner.buttonName}
+                  >
+                    {homeBanner.buttonName}
+                  </span>
+                </LocalizedClientLink>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile */}
+      <div className="block min-[551px]:hidden relative w-full min-h-[480px]">
+        <Image
+          src={mobileImage}
+          alt={appBanner.subtitle || appBanner.title || "Hero banner"}
+          fill
+          priority
+          sizes="100vw"
+          className="object-cover"
+        />
+        <div
+          className="absolute inset-0"
+          style={{ background: "var(--gradient-hero)" }}
+        />
+        <div className="absolute inset-0 flex items-end px-6 pb-10">
+          <div className="text-[var(--color-text-inverse)]">
+            {appBanner.title && (
+              <p className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] mb-2 opacity-90">
+                {appBanner.title}
+              </p>
+            )}
+            {appBanner.subtitle && (
+              <h1 className="font-display text-2xl font-normal leading-heading mb-3">
+                {appBanner.subtitle}
+              </h1>
+            )}
+            {appBanner.buttonName && (
+              <LocalizedClientLink href={appBanner.buttonLink || "/store"}>
+                <span className="inline-block border-2 border-white text-white px-6 py-2.5 text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)]">
+                  {appBanner.buttonName}
+                </span>
+              </LocalizedClientLink>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Hero

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

@@ -0,0 +1,59 @@
+"use client"
+
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+import ProductCard from "@theme/slots/product/ProductCard"
+
+type LovedByMomsProps = {
+  products: HttpTypes.StoreProduct[]
+  region: HttpTypes.StoreRegion
+  ratings?: { product_id?: string }[]
+}
+
+/** Impulse-style featured / best sellers product row. */
+const LovedByMoms = ({ products, region, ratings }: LovedByMomsProps) => {
+  const safeProducts = (products || []).slice(0, 4)
+
+  if (safeProducts.length === 0) {
+    return null
+  }
+
+  return (
+    <section className="w-full py-10 md:py-16 bg-surface-muted">
+      <div
+        className="mx-auto px-4 sm:px-6 lg:px-8"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8 md:mb-10">
+          <div>
+            <p className="text-[10px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-[var(--color-text-muted)] mb-2">
+              Customer favorites
+            </p>
+            <h2 className="font-display text-2xl md:text-3xl text-heading">
+              Best sellers
+            </h2>
+          </div>
+          <LocalizedClientLink
+            href="/store?sortBy=bestsellers"
+            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 self-start sm:self-auto"
+          >
+            View all
+          </LocalizedClientLink>
+        </div>
+
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
+          {safeProducts.map((product) => (
+            <ProductCard
+              key={product.id}
+              product={product}
+              region={region}
+              rating={ratings?.find((r) => r.product_id === product.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default LovedByMoms

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

@@ -0,0 +1,57 @@
+"use client"
+
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import ProductCard from "@theme/slots/product/ProductCard"
+
+type NewArrivalsProps = {
+  products: HttpTypes.StoreProduct[]
+  region: HttpTypes.StoreRegion
+  ratings?: { product_id?: string }[]
+}
+
+const NewArrivals = ({ products, region, ratings }: NewArrivalsProps) => {
+  const safeProducts = (products || []).slice(0, 8)
+
+  return (
+    <section className="w-full py-10 md:py-16 bg-page-bg">
+      <div
+        className="mx-auto px-4 sm:px-6 lg:px-8"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <div className="flex items-end justify-between gap-4 mb-8 md:mb-10">
+          <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>
+
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
+          {safeProducts.length > 0 ? (
+            safeProducts.map((product) => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                region={region}
+                rating={ratings?.find((r) => r.product_id === product.id)}
+              />
+            ))
+          ) : (
+            <div className="col-span-full text-center py-12">
+              <p className="text-[var(--color-text-muted)]">
+                No new arrivals at the moment. Check back soon!
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default NewArrivals

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

@@ -0,0 +1,82 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+
+type ShopByAgeProps = {
+  collections: HttpTypes.StoreCollection[]
+}
+
+/** Impulse-style promo tiles — large image blocks below the hero. */
+const ShopByAge = ({ collections }: ShopByAgeProps) => {
+  if (!collections || collections.length === 0) {
+    return null
+  }
+
+  const tiles = [...collections].reverse().slice(0, 3)
+
+  return (
+    <section className="w-full bg-page-bg">
+      <div
+        className="mx-auto grid grid-cols-1 md:grid-cols-3 gap-0"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        {tiles.map((collection) => {
+          const metadata = (collection as { metadata?: Record<string, string> })
+            ?.metadata
+          const image =
+            metadata?.image ||
+            (collection as { thumbnail?: string }).thumbnail ||
+            null
+          const subtitle = metadata?.collection_subtitle || metadata?.collection_age
+          const buttonLabel = metadata?.button_label || "Shop now"
+
+          return (
+            <LocalizedClientLink
+              key={collection.id}
+              href={`/store?collection=${collection.id}`}
+              data-ga-event="promo_tile_click"
+              data-ga-label={collection.title || "Promo tile"}
+              className="group relative block aspect-[4/5] md:aspect-[3/4] overflow-hidden"
+            >
+              {image ? (
+                <Image
+                  src={image}
+                  alt={collection.title || "Collection"}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 33vw"
+                  className="object-cover transition-transform duration-700 group-hover:scale-105"
+                />
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center bg-surface-muted">
+                  <PlaceholderImage size={64} />
+                </div>
+              )}
+
+              <div
+                className="absolute inset-0"
+                style={{ background: "var(--gradient-hero)" }}
+              />
+
+              <div className="absolute inset-x-0 bottom-0 p-6 md:p-8 text-[var(--color-text-inverse)]">
+                {subtitle && (
+                  <p className="text-[10px] md:text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] mb-2 opacity-90">
+                    {subtitle}
+                  </p>
+                )}
+                <h3 className="font-display text-xl md:text-2xl lg:text-3xl font-normal leading-heading mb-4">
+                  {collection.title}
+                </h3>
+                <span className="inline-block border border-white text-white px-5 py-2.5 text-[10px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] group-hover:bg-white group-hover:text-brand-accent transition-colors duration-300">
+                  {buttonLabel}
+                </span>
+              </div>
+            </LocalizedClientLink>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+export default ShopByAge

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

@@ -0,0 +1,92 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+
+type ShopByCategoryProps = {
+  categories: HttpTypes.StoreProductCategory[]
+}
+
+/** Impulse-style collection tiles — clean image grid with overlay titles. */
+const ShopByCategory = ({ categories }: ShopByCategoryProps) => {
+  if (!categories || categories.length === 0) {
+    return null
+  }
+
+  const subcategories = categories
+    .filter((category) => category.parent_category_id)
+    .slice(0, 6)
+
+  if (subcategories.length === 0) {
+    return null
+  }
+
+  return (
+    <section className="w-full py-10 md:py-16 bg-page-bg">
+      <div
+        className="mx-auto px-4 sm:px-6 lg:px-8"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <h2 className="font-display text-2xl md:text-3xl text-heading text-center mb-8 md:mb-12">
+          Shop by category
+        </h2>
+
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
+          {subcategories.map((category) => {
+            const metadata = (category as { metadata?: Record<string, string> })
+              ?.metadata
+            const categoryImage = metadata?.category_image || null
+            const parentCategory = (
+              category as { parent_category?: { name?: string } }
+            )?.parent_category
+            const subtitle = parentCategory?.name || ""
+            const categoryUrl = category.id
+              ? `/store?category=${category.id}`
+              : "#"
+
+            return (
+              <LocalizedClientLink
+                key={category.id}
+                href={categoryUrl}
+                data-ga-event="shop_by_category_click"
+                data-ga-label={category.name || "Category"}
+                className="group relative block aspect-[3/4] overflow-hidden bg-surface-muted"
+              >
+                {categoryImage ? (
+                  <Image
+                    src={categoryImage}
+                    alt={category.name || "Category"}
+                    fill
+                    sizes="(max-width: 768px) 50vw, 33vw"
+                    className="object-cover transition-transform duration-500 group-hover:scale-105"
+                  />
+                ) : (
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <PlaceholderImage size={48} />
+                  </div>
+                )}
+
+                <div
+                  className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors duration-300"
+                />
+
+                <div className="absolute inset-x-0 bottom-0 p-4 md:p-6 text-[var(--color-text-inverse)]">
+                  {subtitle && (
+                    <p className="text-[10px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] mb-1 opacity-90">
+                      {subtitle}
+                    </p>
+                  )}
+                  <h3 className="font-display text-base md:text-xl font-normal leading-tight">
+                    {category.name}
+                  </h3>
+                </div>
+              </LocalizedClientLink>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ShopByCategory

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

@@ -0,0 +1,130 @@
+"use client"
+
+import { useState, useEffect } from "react"
+
+interface Testimonial {
+  id: string
+  text: string
+  name: string
+  rating: number
+  avatar?: string
+}
+
+interface TestimonialsProps {
+  initialData?: {
+    title: string
+    testimonials: Testimonial[]
+  } | null
+}
+
+const defaultTestimonials: Testimonial[] = [
+  {
+    id: "1",
+    text: "Beautiful quality and fast shipping. Exactly what I was looking for — will definitely order again.",
+    name: "Sarah M.",
+    rating: 5,
+  },
+  {
+    id: "2",
+    text: "The site is easy to navigate and checkout was seamless. Products arrived well packaged.",
+    name: "James L.",
+    rating: 5,
+  },
+  {
+    id: "3",
+    text: "Great customer service and the returns process was hassle-free. Highly recommend.",
+    name: "Emily R.",
+    rating: 5,
+  },
+]
+
+/** Impulse-style testimonial carousel — editorial serif quotes. */
+const Testimonials = ({ initialData }: TestimonialsProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const title = initialData?.title || "What our customers say"
+  const testimonials =
+    initialData?.testimonials && initialData.testimonials.length > 0
+      ? initialData.testimonials
+      : defaultTestimonials
+
+  const [itemsPerView, setItemsPerView] = useState(1)
+
+  useEffect(() => {
+    const updateItemsPerView = () => {
+      if (window.innerWidth >= 1024) setItemsPerView(3)
+      else if (window.innerWidth >= 640) setItemsPerView(2)
+      else setItemsPerView(1)
+    }
+    updateItemsPerView()
+    window.addEventListener("resize", updateItemsPerView)
+    return () => window.removeEventListener("resize", updateItemsPerView)
+  }, [])
+
+  const visible = testimonials.slice(currentIndex, currentIndex + itemsPerView)
+  const padded =
+    visible.length < itemsPerView
+      ? [...visible, ...testimonials.slice(0, itemsPerView - visible.length)]
+      : visible
+
+  const hasMore = testimonials.length > itemsPerView
+
+  const next = () =>
+    setCurrentIndex((prev) => (prev + itemsPerView) % testimonials.length)
+  const prev = () =>
+    setCurrentIndex(
+      (prev) =>
+        (prev - itemsPerView + testimonials.length) % testimonials.length
+    )
+
+  return (
+    <section className="w-full py-10 md:py-16 bg-surface-muted">
+      <div
+        className="mx-auto px-4 sm:px-6 lg:px-8"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <h2 className="font-display text-2xl md:text-3xl text-heading text-center mb-8 md:mb-12">
+          {title}
+        </h2>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+          {padded.map((testimonial) => (
+            <blockquote
+              key={testimonial.id}
+              className="bg-page-bg p-6 md:p-8 text-center"
+            >
+              <p className="font-quote text-lg md:text-xl text-heading leading-relaxed mb-6 italic">
+                &ldquo;{testimonial.text}&rdquo;
+              </p>
+              <footer className="text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-[var(--color-text-muted)]">
+                — {testimonial.name}
+              </footer>
+            </blockquote>
+          ))}
+        </div>
+
+        {hasMore && (
+          <div className="flex justify-center gap-4 mt-8">
+            <button
+              type="button"
+              onClick={prev}
+              className="w-10 h-10 border border-[var(--color-border)] flex items-center justify-center text-heading hover:bg-brand-accent hover:text-white hover:border-brand-accent transition-colors"
+              aria-label="Previous testimonials"
+            >
+              ←
+            </button>
+            <button
+              type="button"
+              onClick={next}
+              className="w-10 h-10 border border-brand-accent bg-brand-accent text-white flex items-center justify-center hover:bg-brand-accent-hover transition-colors"
+              aria-label="Next testimonials"
+            >
+              →
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default Testimonials