@pradip1995/create-storefront 1.0.1

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

@@ -0,0 +1,407 @@
+"use client"
+
+import Image from "next/image"
+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?: any[]
+}
+
+const LovedByMoms = ({ products, region, ratings }: LovedByMomsProps) => {
+  const safeProducts = products || []
+
+  if (safeProducts.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{
+        __html: `
+          @media (min-width: 340px) and (max-width: 419px) {
+            .loved-by-moms-banner {
+              padding: 1rem !important;
+              min-height: auto !important;
+              border-radius: 1rem !important;
+            }
+            .loved-by-moms-left-section {
+              width: 100% !important;
+              margin-bottom: 1rem !important;
+            }
+            .loved-by-moms-title {
+              font-size: 1.25rem !important;
+              margin-bottom: 0.5rem !important;
+            }
+            .loved-by-moms-text {
+              font-size: 0.75rem !important;
+              margin-bottom: 0.375rem !important;
+            }
+            .loved-by-moms-button {
+              padding: 0.5rem 1rem !important;
+              font-size: 0.75rem !important;
+            }
+            .loved-by-moms-cards-container {
+              width: 100% !important;
+              max-width: 100% !important;
+              overflow-x: auto !important;
+              overflow-y: hidden !important;
+              -webkit-overflow-scrolling: touch !important;
+              scrollbar-width: thin !important;
+              scrollbar-color: rgba(139, 90, 177, 0.3) transparent !important;
+              padding-left: 0 !important;
+              padding-right: 0 !important;
+            }
+            .loved-by-moms-cards-container::-webkit-scrollbar {
+              height: 4px !important;
+            }
+            .loved-by-moms-cards-container::-webkit-scrollbar-track {
+              background: transparent !important;
+            }
+            .loved-by-moms-cards-container::-webkit-scrollbar-thumb {
+              background-color: rgba(139, 90, 177, 0.3) !important;
+              border-radius: 2px !important;
+            }
+            .loved-by-moms-cards-flex {
+              gap: 0.75rem !important;
+              padding-left: 0.5rem !important;
+              padding-right: 0.5rem !important;
+            }
+            .loved-by-moms-card {
+              width: 140px !important;
+              min-width: 140px !important;
+              max-width: 140px !important;
+              height: auto !important;
+              min-height: 200px !important;
+            }
+            .loved-by-moms-image {
+              width: 120px !important;
+              height: 120px !important;
+            }
+            .loved-by-moms-star {
+              width: 0.625rem !important;
+              height: 0.625rem !important;
+            }
+            .loved-by-moms-card-title {
+              font-size: 0.75rem !important;
+              margin-bottom: 0.375rem !important;
+            }
+            .loved-by-moms-price {
+              font-size: 0.8125rem !important;
+            }
+          }
+          @media (min-width: 420px) and (max-width: 549px) {
+            .loved-by-moms-banner {
+              padding: 1.25rem !important;
+              min-height: auto !important;
+              border-radius: 1.125rem !important;
+            }
+            .loved-by-moms-left-section {
+              width: 100% !important;
+              margin-bottom: 1.25rem !important;
+            }
+            .loved-by-moms-title {
+              font-size: 1.375rem !important;
+              margin-bottom: 0.625rem !important;
+            }
+            .loved-by-moms-text {
+              font-size: 0.8125rem !important;
+              margin-bottom: 0.5rem !important;
+            }
+            .loved-by-moms-button {
+              padding: 0.5625rem 1.125rem !important;
+              font-size: 0.8125rem !important;
+            }
+            .loved-by-moms-cards-container {
+              width: 100% !important;
+              max-width: 100% !important;
+              overflow-x: auto !important;
+              overflow-y: hidden !important;
+              -webkit-overflow-scrolling: touch !important;
+              scrollbar-width: thin !important;
+              scrollbar-color: rgba(139, 90, 177, 0.3) transparent !important;
+              padding-left: 0 !important;
+              padding-right: 0 !important;
+            }
+            .loved-by-moms-cards-container::-webkit-scrollbar {
+              height: 4px !important;
+            }
+            .loved-by-moms-cards-container::-webkit-scrollbar-track {
+              background: transparent !important;
+            }
+            .loved-by-moms-cards-container::-webkit-scrollbar-thumb {
+              background-color: rgba(139, 90, 177, 0.3) !important;
+              border-radius: 2px !important;
+            }
+            .loved-by-moms-cards-flex {
+              gap: 0.875rem !important;
+              padding-left: 0.75rem !important;
+              padding-right: 0.75rem !important;
+            }
+            .loved-by-moms-card {
+              width: 150px !important;
+              min-width: 150px !important;
+              max-width: 150px !important;
+              height: auto !important;
+              min-height: 210px !important;
+            }
+            .loved-by-moms-image {
+              width: 130px !important;
+              height: 130px !important;
+            }
+            .loved-by-moms-star {
+              width: 0.6875rem !important;
+              height: 0.6875rem !important;
+            }
+            .loved-by-moms-card-title {
+              font-size: 0.78125rem !important;
+              margin-bottom: 0.4375rem !important;
+            }
+            .loved-by-moms-price {
+              font-size: 0.84375rem !important;
+            }
+          }
+          @media (min-width: 550px) and (max-width: 767px) {
+            .loved-by-moms-banner-inner {
+              flex-direction: row !important;
+              align-items: center !important;
+            }
+            .loved-by-moms-banner {
+              padding: 1.25rem !important;
+              min-height: auto !important;
+              max-width: 100% !important;
+            }
+            .loved-by-moms-left-section {
+              width: 280px !important;
+              flex-shrink: 0 !important;
+              text-align: left !important;
+              margin-bottom: 0 !important;
+            }
+            .loved-by-moms-title {
+              font-size: 1.375rem !important;
+              text-align: left !important;
+              margin-bottom: 0.625rem !important;
+            }
+            .loved-by-moms-text {
+              font-size: 0.8125rem !important;
+              text-align: left !important;
+              margin-bottom: 0.375rem !important;
+            }
+            .loved-by-moms-button {
+              padding: 0.5rem 1.25rem !important;
+              font-size: 0.8125rem !important;
+            }
+            .loved-by-moms-cards-wrapper {
+              flex: 1 !important;
+              min-width: 0 !important;
+            }
+            .loved-by-moms-cards-container {
+              width: 100% !important;
+              max-width: 100% !important;
+              overflow-x: auto !important;
+              overflow-y: hidden !important;
+              -webkit-overflow-scrolling: touch !important;
+            }
+            .loved-by-moms-cards-flex {
+              gap: 0.625rem !important;
+              justify-content: flex-start !important;
+            }
+            .loved-by-moms-card {
+              width: 165px !important;
+              min-width: 165px !important;
+              max-width: 165px !important;
+              height: auto !important;
+              min-height: 230px !important;
+            }
+            .loved-by-moms-image {
+              width: 150px !important;
+              height: 150px !important;
+            }
+            .loved-by-moms-star {
+              width: 0.8125rem !important;
+              height: 0.8125rem !important;
+            }
+            .loved-by-moms-card-title {
+              font-size: 0.8125rem !important;
+              text-align: left !important;
+              margin-bottom: 0.375rem !important;
+            }
+            .loved-by-moms-price {
+              font-size: 0.9375rem !important;
+              text-align: left !important;
+            }
+          }
+          @media (min-width: 768px) and (max-width: 1440px) {
+            .loved-by-moms-banner {
+              padding: 2rem !important;
+              min-height: auto !important;
+              max-width: 100% !important;
+            }
+            .loved-by-moms-left-section {
+              width: 350px !important;
+              flex-shrink: 0 !important;
+              text-align: left !important;
+            }
+            .loved-by-moms-title {
+              font-size: 2rem !important;
+              text-align: left !important;
+              margin-bottom: 1rem !important;
+            }
+            .loved-by-moms-text {
+              font-size: 1rem !important;
+              text-align: left !important;
+              margin-bottom: 0.5rem !important;
+            }
+            .loved-by-moms-button {
+              padding: 0.75rem 2rem !important;
+              font-size: 1rem !important;
+            }
+            .loved-by-moms-cards-wrapper {
+              flex: 1 !important;
+              min-width: 0 !important;
+            }
+            .loved-by-moms-cards-container {
+              width: 100% !important;
+              max-width: 723px !important;
+              overflow-x: auto !important;
+              overflow-y: hidden !important;
+              -webkit-overflow-scrolling: touch !important;
+              scrollbar-width: thin !important;
+              scrollbar-color: rgba(139, 90, 177, 0.3) transparent !important;
+            }
+            .loved-by-moms-cards-container::-webkit-scrollbar {
+              height: 4px !important;
+            }
+            .loved-by-moms-cards-container::-webkit-scrollbar-track {
+              background: transparent !important;
+            }
+            .loved-by-moms-cards-container::-webkit-scrollbar-thumb {
+              background-color: rgba(139, 90, 177, 0.3) !important;
+              border-radius: 2px !important;
+            }
+            .loved-by-moms-card {
+              width: 220px !important;
+              min-width: 220px !important;
+              height: 282px !important;
+            }
+            .loved-by-moms-image {
+              width: 200px !important;
+              height: 200px !important;
+            }
+            .loved-by-moms-star {
+              width: 1rem !important;
+              height: 1rem !important;
+            }
+            .loved-by-moms-card-title {
+              font-size: 1rem !important;
+              text-align: left !important;
+              margin-bottom: 0.5rem !important;
+            }
+            .loved-by-moms-price {
+              font-size: 1.125rem !important;
+              text-align: left !important;
+            }
+          }
+          @media (min-width: 1441px) {
+            .loved-by-moms-banner {
+              max-width: 1360px !important;
+            }
+            .loved-by-moms-left-section {
+              width: 400px !important;
+              flex-shrink: 0 !important;
+            }
+            .loved-by-moms-cards-wrapper {
+              flex: 1 !important;
+              min-width: 0 !important;
+            }
+            .loved-by-moms-cards-container {
+              width: 100% !important;
+              max-width: 723px !important;
+              overflow-x: auto !important;
+              overflow-y: hidden !important;
+              -webkit-overflow-scrolling: touch !important;
+            }
+            .loved-by-moms-card {
+              width: 220px !important;
+              min-width: 220px !important;
+              height: 282px !important;
+            }
+            .loved-by-moms-image {
+              width: 200px !important;
+              height: 200px !important;
+            }
+          }
+        `
+      }} />
+      <div className="w-full py-8 sm:py-12 md:py-14 lg:py-16 bg-page-bg">
+        <div className="w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
+          <div className="w-full flex justify-center">
+            <div className="bg-gradient-to-r from-purple-100 to-pink-100 rounded-2xl sm:rounded-3xl p-6 sm:p-8 md:p-10 lg:p-12 w-full loved-by-moms-banner" style={{ maxWidth: '1360px', minHeight: 'auto' }}>
+              <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 sm:gap-6 md:gap-8 lg:gap-10 h-full loved-by-moms-banner-inner">
+                {/* Left Section - Text Content */}
+                <div className="w-full md:w-[400px] flex-shrink-0 loved-by-moms-left-section text-center md:text-left">
+                  <h2 className="text-2xl sm:text-3xl md:text-3xl lg:text-4xl font-bold mb-3 sm:mb-4 loved-by-moms-title text-heading">
+                    Loved by Moms
+                  </h2>
+                  <p className="text-sm sm:text-base md:text-lg text-gray-700 mb-2 loved-by-moms-text">
+                    Top-rated styles loved by parents and kids alike.
+                  </p>
+                  <p className="text-sm sm:text-base md:text-lg text-gray-700 mb-4 sm:mb-6 loved-by-moms-text">
+                    5-star comfort guaranteed!
+                  </p>
+                  <LocalizedClientLink
+                    href="/store?sortBy=bestsellers"
+                    data-ga-event="shop_bestsellers_click"
+                    data-ga-label="Shop Bestsellers Banner"
+                    className="inline-flex items-center gap-2 px-6 sm:px-8 py-2.5 sm:py-3 rounded-full text-white text-sm sm:text-base font-medium transition-colors duration-200 hover:opacity-90 loved-by-moms-button bg-brand-accent"
+                  >
+                    Shop Bestsellers
+                    <svg
+                      className="w-4 h-4 sm:w-5 sm:h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
+                  </LocalizedClientLink>
+                </div>
+
+                {/* Right Section - Product Cards */}
+                <div className="w-full md:flex-1 min-w-0 loved-by-moms-cards-wrapper">
+                  <div className="loved-by-moms-cards-container overflow-x-auto no-scrollbar">
+                    <div className="flex gap-4 pb-2 sm:pb-4 justify-start loved-by-moms-cards-flex">
+                      {safeProducts.map((product) => (
+                        <div
+                          key={product.id}
+                          className="flex-shrink-0 loved-by-moms-card w-[160px] sm:w-[200px] md:w-[240px]"
+                        >
+                          <ProductCard
+                            product={product}
+                            region={region}
+                            rating={ratings?.find((r) => r.product_id === product.id)}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default LovedByMoms
+

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

@@ -0,0 +1,48 @@
+"use client"
+
+import { HttpTypes } from "@medusajs/types"
+import ProductCard from "@theme/slots/product/ProductCard"
+
+type NewArrivalsProps = {
+  products: HttpTypes.StoreProduct[]
+  region: HttpTypes.StoreRegion
+  ratings?: any[]
+}
+
+const NewArrivals = ({ products, region, ratings }: NewArrivalsProps) => {
+  const safeProducts = (products || []).slice(0, 8) // Show only first 8 products
+
+  return (
+    <div className="w-full py-8 sm:py-12 md:py-14 lg:py-16 bg-page-bg">
+      <div className="w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
+        <div className="mx-auto" style={{ maxWidth: '1360px' }}>
+          <div className="flex items-center justify-between mb-8 md:mb-10">
+            <h2 className="font-display text-2xl md:text-3xl text-heading">
+              New Arrivals
+            </h2>
+          </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-2 md:col-span-4 text-center py-12">
+                <p className="text-gray-500">No new arrivals at the moment. Check back soon!</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NewArrivals
+

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

@@ -0,0 +1,128 @@
+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[]
+}
+
+const getIconForCollection = (collection: HttpTypes.StoreCollection): string | null => {
+  // First try to get icon from metadata
+  const metadata = (collection as any)?.metadata || {}
+  const collectionIcon = metadata.collection_icon || null
+
+  if (collectionIcon) {
+    return collectionIcon
+  }
+
+  // Fallback to hardcoded logic if metadata doesn't have icon
+  const handle = collection.handle?.toLowerCase() || ""
+  const title = collection.title?.toLowerCase() || ""
+  const searchText = `${handle} ${title}`
+
+  if (searchText.includes("newborn") || searchText.includes("new-born") || searchText.includes("0-12")) {
+    return "/Newborn.svg"
+  }
+  if (searchText.includes("toddler") || searchText.includes("1-3")) {
+    return "/Toddler.svg"
+  }
+  if (searchText.includes("kids") || searchText.includes("kid") || searchText.includes("4-7")) {
+    return "/Kids.svg"
+  }
+  if (searchText.includes("juniors") || searchText.includes("junior") || searchText.includes("8-12")) {
+    return "/Juniors.svg"
+  }
+  if (searchText.includes("teens") || searchText.includes("teen") || searchText.includes("13-15")) {
+    return "/Teens.svg"
+  }
+  return null
+}
+
+const ShopByAge = ({ collections }: ShopByAgeProps) => {
+  if (!collections || collections.length === 0) {
+    return null
+  }
+
+  // Reverse collections so that last added appears last (API returns newest first)
+  const reversedCollections = [...collections].reverse()
+
+  return (
+    <div className="w-full py-8 sm:py-10 md:py-12 lg:py-16 px-4 sm:px-5 md:px-6">
+      <div className="max-w-[1440px] mx-auto">
+        <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-center mb-6 sm:mb-8 md:mb-10 lg:mb-12 text-gray-900">
+          Shop By Age
+        </h2>
+        <div className="grid grid-cols-2 min-[500px]:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-12 justify-items-center">
+          {reversedCollections.map((collection) => {
+            const metadata = (collection as any)?.metadata || {}
+            const collectionImage = metadata.image || (collection as any)?.thumbnail || null
+            const iconPath = getIconForCollection(collection)
+            const collectionAge = metadata.collection_age || null
+
+            return (
+              <LocalizedClientLink
+                key={collection.id}
+                href={`/store?collection=${collection.id}`}
+                data-ga-event="shop_by_age_click"
+                data-ga-label={collection.title || "Collection"}
+                data-ga-collection-name={collection.title || ""}
+                data-ga-collection-handle={collection.handle || ""}
+                data-ga-collection-id={collection.id || ""}
+                data-ga-collection-age={collectionAge || ""}
+                data-ga-section="Shop by Age"
+                className="flex flex-col items-center group transition-transform duration-200 hover:scale-105 w-full"
+              >
+                {/* Wrap all content in a div with pointer-events-none to force GTM to target the Link */}
+                <div className="flex flex-col items-center pointer-events-none">
+                  <div className="relative w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 lg:w-40 lg:h-40 xl:w-[180px] xl:h-[180px] mb-2 sm:mb-3 md:mb-4 rounded-full overflow-hidden bg-gray-100 flex items-center justify-center">
+                    {collectionImage ? (
+                      <Image
+                        src={collectionImage}
+                        alt={collection.title || "Collection"}
+                        fill
+                        sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 20vw"
+                        className="w-full h-full object-cover"
+                      />
+                    ) : iconPath ? (
+                      <Image
+                        src={iconPath}
+                        alt={collection.title || "Collection"}
+                        fill
+                        sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 20vw"
+                        className="w-full h-full object-contain"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center">
+                        <PlaceholderImage size={80} />
+                      </div>
+                    )}
+                  </div>
+                  <h3 className="text-xs sm:text-sm md:text-base lg:text-lg font-semibold text-gray-900 mb-0.5 sm:mb-1 group-hover:text-pink-500 transition-colors text-center px-1">
+                    {collection.title}
+                  </h3>
+                  {collectionAge && (
+                    <p className="text-[10px] sm:text-xs md:text-sm text-gray-600 text-center mb-0.5 sm:mb-1 px-1">
+                      {collectionAge}
+                    </p>
+                  )}
+                  {collection.handle && !collectionAge && (
+                    <p className="text-[10px] sm:text-xs md:text-sm text-gray-600 text-center px-1">
+                      {collection.handle
+                        .split(" ")
+                        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                        .join(" ")}
+                    </p>
+                  )}
+                </div>
+              </LocalizedClientLink>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ShopByAge
+