@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/wishlist/templates/index.tsx

@@ -0,0 +1,176 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import WishlistItem from "../components/wishlist-item"
+import { HttpTypes } from "@medusajs/types"
+import { getWishlist, removeFromWishlist } from "@core/data/wishlist"
+import { useWishlist } from "@core/context/wishlist-context"
+import { retrieveCart } from "@core/data/cart"
+
+interface WishlistProduct {
+  id: string
+  product: HttpTypes.StoreProduct
+}
+
+const WishlistTemplate = ({ countryCode }: { countryCode: string }) => {
+  const { refreshWishlist, count } = useWishlist()
+  const [wishlistItems, setWishlistItems] = useState<WishlistProduct[]>([])
+  const [cart, setCart] = useState<HttpTypes.StoreCart | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const loadWishlist = async () => {
+    try {
+      const [wishlistResult, cartResult] = await Promise.all([
+        getWishlist(true, countryCode),
+        retrieveCart().catch(() => null)
+      ])
+      
+      setCart(cartResult)
+
+      if (wishlistResult.success) {
+        // Transform the API response to match our WishlistProduct interface
+        const items: WishlistProduct[] = wishlistResult.data.map((item: any) => {
+          // Handle different response formats
+          if (item.product) {
+            // If item has a product property
+            return {
+              id: item.id || item.product.id,
+              product: item.product,
+            }
+          } else if (item.id && item.title) {
+            // If item is a product object directly
+            return {
+              id: item.id,
+              product: item as HttpTypes.StoreProduct,
+            }
+          } else {
+            // If it's just a product ID, we need to fetch product details
+            // For now, skip it or handle separately
+            return null
+          }
+        }).filter((item: WishlistProduct | null): item is WishlistProduct => item !== null)
+
+        setWishlistItems(items)
+      }
+    } catch (error) {
+      // Error silently handled
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    loadWishlist()
+  }, [])
+
+  const handleRemoveItem = async (productId: string) => {
+    try {
+      const result = await removeFromWishlist(productId)
+      if (result.success) {
+        // Remove from local state
+        const updated = wishlistItems.filter((item) => item.product.id !== productId)
+        setWishlistItems(updated)
+        refreshWishlist()
+      } else {
+        // Still remove from UI for better UX, but show error
+        const updated = wishlistItems.filter((item) => item.product.id !== productId)
+        setWishlistItems(updated)
+        refreshWishlist()
+      }
+    } catch (error) {
+      // Error silently handled
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen" style={{ background: "#FFFAFE" }}>
+        <div className="w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-12 md:py-14 lg:py-16">
+          <div className="mx-auto" style={{ maxWidth: '1360px' }}>
+            <div className="text-center text-sm sm:text-base">Loading...</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{
+        __html: `
+          @media (min-width: 340px) and (max-width: 638px) {
+            .wishlist-grid {
+              grid-template-columns: repeat(2, 1fr) !important;
+            }
+          }
+          @media (min-width: 639px) and (max-width: 767px) {
+            .wishlist-grid {
+              grid-template-columns: repeat(2, 1fr) !important;
+            }
+          }
+          @media (min-width: 768px) and (max-width: 1023px) {
+            .wishlist-grid {
+              grid-template-columns: repeat(3, 1fr) !important;
+            }
+          }
+          @media (min-width: 1024px) {
+            .wishlist-grid {
+              grid-template-columns: repeat(4, 1fr) !important;
+            }
+          }
+        `
+      }} />
+      <div className="min-h-screen" style={{ background: "#FFFAFE" }}>
+        <div className="w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-12 md:py-14 lg:py-16">
+          <div className="mx-auto" style={{ maxWidth: '1360px' }}>
+            {/* Header */}
+            <div className="mb-6 sm:mb-8 md:mb-10 lg:mb-12">
+              <h1 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mb-1 pl-2 sm:pl-4 md:pl-6">My Wishlist</h1>
+              <p className="text-sm sm:text-base text-gray-500 pl-2 sm:pl-4 md:pl-6">
+                ({count} {count === 1 ? "Item" : "Items"})
+              </p>
+            </div>
+
+            {/* Wishlist Grid */}
+            {wishlistItems.length > 0 ? (
+              <div className="grid grid-cols-1 wishlist-grid gap-3 sm:gap-4 md:gap-5 lg:gap-6 justify-items-center">
+                {wishlistItems.map((item) => (
+                  <WishlistItem
+                    key={item.id}
+                    product={item.product}
+                    countryCode={countryCode}
+                    cart={cart}
+                    onRemove={() => handleRemoveItem(item.product.id || "")}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12 sm:py-16 md:py-20">
+                <div className="mb-4 sm:mb-6">
+                  <svg
+                    className="mx-auto w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 text-gray-300"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1.5}
+                      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                    />
+                  </svg>
+                </div>
+                <p className="text-base sm:text-lg md:text-xl text-gray-600 mb-2 font-semibold">Your wishlist is empty</p>
+                <p className="text-sm sm:text-base text-gray-500">Start adding items to your wishlist!</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default WishlistTemplate
+

package/templates/storefront/src/storefront.config.ts

@@ -0,0 +1,12 @@
+/**
+ * Per-brand storefront config — override block order or disable slots here.
+ */
+import { storefrontConfig as baseConfig } from "@pradip1995/storefront-registry/storefront.config"
+
+export const storefrontConfig = {
+  ...baseConfig,
+  theme: "valero",
+  baseDir: "theme/valero",
+} as const
+
+export type { HomeBlockType } from "@pradip1995/storefront-registry/storefront.config"

package/templates/storefront/src/styles/globals.css

@@ -0,0 +1,326 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@layer base {
+  body {
+    background-color: var(--color-page-bg);
+    color: var(--color-text-body);
+    font-family: var(--font-sans);
+    line-height: var(--line-height-body);
+    letter-spacing: var(--letter-spacing-body);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+    line-height: var(--line-height-heading);
+    letter-spacing: var(--letter-spacing-heading);
+  }
+}
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  input:focus ~ label,
+  input:not(:placeholder-shown) ~ label {
+    @apply -translate-y-2 text-xsmall-regular;
+  }
+
+  input:focus ~ label {
+    @apply left-0;
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    border: 1px solid #212121;
+    -webkit-text-fill-color: #212121;
+    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+@layer components {
+  .content-container {
+    @apply max-w-[1440px] w-full mx-auto px-6;
+  }
+
+  .contrast-btn {
+    @apply px-4 py-2 border border-black rounded-full hover:bg-black hover:text-white transition-colors duration-200 ease-in;
+  }
+
+  .text-xsmall-regular {
+    @apply text-[10px] leading-4 font-normal;
+  }
+
+  .text-small-regular {
+    @apply text-xs leading-5 font-normal;
+  }
+
+  .text-small-semi {
+    @apply text-xs leading-5 font-semibold;
+  }
+
+  .text-base-regular {
+    @apply text-sm leading-6 font-normal;
+  }
+
+  .text-base-semi {
+    @apply text-sm leading-6 font-semibold;
+  }
+
+  .text-large-regular {
+    @apply text-base leading-6 font-normal;
+  }
+
+  .text-large-semi {
+    @apply text-base leading-6 font-semibold;
+  }
+
+  .text-xl-regular {
+    @apply text-2xl leading-[36px] font-normal;
+  }
+
+  .text-xl-semi {
+    @apply text-2xl leading-[36px] font-semibold;
+  }
+
+  .text-2xl-regular {
+    @apply text-[30px] leading-[48px] font-normal;
+  }
+
+  .text-2xl-semi {
+    @apply text-[30px] leading-[48px] font-semibold;
+  }
+
+  .text-3xl-regular {
+    @apply text-[32px] leading-[44px] font-normal;
+  }
+
+  .text-3xl-semi {
+    @apply text-[32px] leading-[44px] font-semibold;
+  }
+
+  @keyframes progress-loading {
+    0% { width: 0%; }
+    100% { width: 100%; }
+  }
+
+  .animate-progress {
+    animation: progress-loading 20s linear forwards;
+  }
+
+  /* Checkout — theme-aware surfaces & buttons */
+  .checkout-surface {
+    @apply bg-page-bg;
+  }
+
+  .checkout-panel {
+    @apply bg-page-bg border border-[var(--color-border)] shadow-brand-sm;
+  }
+
+  .checkout-btn-primary {
+    @apply bg-brand-accent text-inverse hover:bg-brand-accent-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .checkout-btn-outline {
+    @apply border-2 border-brand-accent text-brand-accent bg-surface hover:bg-brand-accent-muted transition-colors;
+  }
+
+  .checkout-modal-header {
+    @apply bg-brand-accent text-inverse;
+  }
+
+  .checkout-option-selected {
+    @apply bg-brand-accent-muted border-brand-accent;
+  }
+
+  .checkout-radio-dot {
+    @apply bg-brand-accent border-brand-accent;
+  }
+
+  /* Account & auth — same theme tokens as checkout */
+  .account-surface {
+    @apply bg-page-bg;
+  }
+
+  .account-panel {
+    @apply bg-surface border border-[var(--color-border)] shadow-brand-sm;
+  }
+
+  .account-btn-primary {
+    @apply bg-brand-accent text-inverse hover:bg-brand-accent-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .account-btn-outline {
+    @apply border border-brand-accent text-brand-accent bg-surface hover:bg-brand-accent-muted transition-colors;
+  }
+
+  .account-input {
+    @apply border border-[var(--color-border)] bg-surface focus:outline-none focus:ring-2 focus:ring-brand-accent focus:border-brand-accent transition-all;
+  }
+
+  .account-link {
+    @apply text-brand-accent font-semibold hover:underline;
+  }
+
+  .account-nav-active {
+    @apply text-brand-accent bg-page-bg;
+  }
+
+  .account-option-selected {
+    @apply border-brand-accent bg-brand-accent-muted;
+  }
+
+  /* Contact & Help pages */
+  .page-surface {
+    @apply bg-page-bg min-h-screen;
+  }
+
+  .help-badge {
+    background: var(--color-brand-accent-muted);
+    border: 1px solid var(--color-brand-accent-border);
+    color: var(--color-brand-accent);
+  }
+
+  .help-gradient-text {
+    background: var(--gradient-promo);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .help-btn-brand {
+    background: var(--gradient-promo);
+    color: var(--color-text-inverse);
+    box-shadow: var(--shadow-brand-sm);
+  }
+
+  .help-panel {
+    background: var(--color-surface);
+    border: 1px solid var(--color-brand-accent-border);
+    box-shadow: var(--shadow-card);
+  }
+
+  .help-panel-header {
+    background: var(--color-brand-accent-muted);
+    border-bottom: 1px solid var(--color-brand-accent-border);
+  }
+
+  .help-form-input {
+    background: var(--color-surface-muted);
+    border: 1.5px solid var(--color-brand-accent-border);
+    color: var(--color-text-heading);
+  }
+
+  .help-form-input:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(var(--color-brand-accent-rgb), 0.15),
+      0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+
+  .help-icon-circle {
+    background: var(--color-brand-accent-muted);
+  }
+
+  .help-tab-active {
+    background: var(--gradient-promo);
+    color: var(--color-text-inverse) !important;
+    border-color: transparent !important;
+    box-shadow: var(--shadow-brand-sm);
+  }
+
+  .help-faq-open {
+    background: var(--color-brand-accent-muted);
+  }
+
+  .help-accent-chip {
+    background: rgba(var(--color-brand-accent-rgb), 0.1);
+    color: var(--color-brand-accent);
+  }
+
+  .help-accent-chip-open {
+    background: var(--gradient-promo);
+    color: var(--color-text-inverse);
+  }
+
+  .help-accent-divider {
+    background: linear-gradient(
+      90deg,
+      rgba(var(--color-brand-accent-rgb), 0.2),
+      transparent
+    );
+  }
+
+  .help-accent-underline {
+    background: linear-gradient(
+      90deg,
+      rgba(var(--color-brand-accent-rgb), 0.3),
+      rgba(var(--color-brand-accent-rgb), 0.05)
+    );
+  }
+
+  .help-accent-glow {
+    background: radial-gradient(
+      circle,
+      rgba(var(--color-brand-accent-rgb), 0.08) 0%,
+      transparent 70%
+    );
+  }
+
+  .help-dot-pattern {
+    background-image: radial-gradient(
+      circle,
+      var(--color-brand-accent) 1.5px,
+      transparent 1.5px
+    );
+  }
+
+  .help-dot-pattern-sm {
+    background-image: radial-gradient(
+      circle,
+      var(--color-brand-accent) 1px,
+      transparent 1px
+    );
+  }
+
+  .contact-card-themed {
+    background: var(--color-surface);
+    border: 1px solid rgba(var(--color-brand-accent-rgb), 0.08);
+    box-shadow: var(--shadow-card);
+  }
+
+  .contact-card-themed:hover {
+    box-shadow: 0 16px 48px rgba(var(--color-brand-accent-rgb), 0.15);
+  }
+}

package/templates/storefront/src/theme/valero/blocks/home/Features/index.tsx

@@ -0,0 +1,61 @@
+import Image from "next/image"
+
+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",
+  },
+]
+
+const Features = () => {
+  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 bg-page-bg">
+      <div className="max-w-[1360px] mx-auto w-full">
+        {/* Responsive Grid: 4 columns across all screens, but adjusted sizing/layout */}
+        <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}
+              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 border-gray-200' : ''}
+              `}
+            >
+              <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">
+                <Image
+                  src={feature.icon}
+                  alt={feature.name}
+                  width={80}
+                  height={80}
+                  className="w-full h-full object-contain"
+                  unoptimized
+                />
+              </div>
+              <div className="text-center sm:text-left min-w-0">
+                <h3 className="text-[8px] xs:text-[10px] sm:text-[11px] md:text-sm lg:text-base xl:text-lg font-semibold text-gray-800 leading-tight">
+                  {feature.name}
+                </h3>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Features
+

package/templates/storefront/src/theme/valero/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 || "/newbanner.png"
+  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