@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/home/components/dynamic-banner/index.tsx

@@ -0,0 +1,190 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { getHomeBannersFromConfig, getAppBannersFromConfig } from "@core/data/dynamic-config"
+
+const DynamicBanner = async () => {
+  const homeBanners = await getHomeBannersFromConfig()
+  const appBanners = await getAppBannersFromConfig()
+
+  // Default data for fallback
+  const defaultBanner = {
+    image: "/newbanner.png",
+    title: "Premium Kids Shop",
+    subtitle: "Little Trends, Quality Kids Wear",
+    description: "Shop stylish kids wear for little ones and children of all years—from newborn up to 15 years. Crafted for play, absolute comfort, and everyday magic.",
+    buttonName: "Shop Kids Wear",
+    buttonLink: "/store"
+  }
+
+  const homeBanner = (homeBanners && homeBanners.length > 0) ? homeBanners[0] : defaultBanner
+
+  // Use config image if available, otherwise use fallback
+  const homeBannerImage = homeBanner.image || "/newbanner.png"
+
+  // Robust fallback logic for app banner
+  const firstAppBanner = (appBanners && appBanners.length > 0) ? appBanners[0] : null
+  const appBanner = {
+    image: firstAppBanner?.image || "/appbanner.png",
+    title: firstAppBanner?.title || homeBanner.title,
+    subtitle: firstAppBanner?.subtitle || homeBanner.subtitle,
+    description: firstAppBanner?.description || homeBanner.description,
+    buttonName: firstAppBanner?.buttonName || homeBanner.buttonName,
+    buttonLink: firstAppBanner?.buttonLink || homeBanner.buttonLink
+  }
+
+  return (
+    <div className="w-full relative overflow-hidden">
+      {/* Desktop & Tablet Banner View (Visible on 551px and up) */}
+      <div className="hidden min-[551px]:block relative w-full">
+        {homeBannerImage ? (
+          <Image
+            src={homeBannerImage}
+            alt={homeBanner.title || "Home Banner"}
+            width={1920}
+            height={800}
+            sizes="100vw"
+            className="w-full h-auto object-cover"
+            priority
+          />
+        ) : (
+          <div className="w-full h-[400px] md:h-[500px] lg:h-[600px] bg-[#E9DFFF]"></div>
+        )}
+
+        {/* Content Overlay with Responsive Gaps and Sizes */}
+        <div className="absolute inset-0 flex items-center">
+          <div className="max-w-[1440px] mx-auto w-full 
+            px-12    /* 551px to 767px */
+            md:px-20 /* 768px to 1023px */
+            lg:px-32 /* 1024px to 1439px */
+            xl:px-40 /* 1440px+ */
+          ">
+            <div className="
+              max-w-[240px] /* 551px to 767px */
+              md:max-w-sm   /* 768px to 1023px */
+              lg:max-w-md   /* 1024px+ */
+              space-y-2 md:space-y-4
+            ">
+              <div className="space-y-0.5 md:space-y-1">
+                {homeBanner.title && (
+                  <span className="text-[#333] font-bold tracking-tight block
+                    text-sm    /* 551px to 767px */
+                    md:text-lg /* 768px to 1023px */
+                    lg:text-xl /* 1024px+ */
+                  ">
+                    {homeBanner.title}
+                  </span>
+                )}
+                {homeBanner.subtitle && (
+                  <h1 className="font-bold text-[#8B5AB1] leading-[1.1]
+                    text-2xl   /* 551px to 767px */
+                    md:text-4xl /* 768px to 1023px */
+                    lg:text-5xl /* 1024px+ */
+                  ">
+                    {homeBanner.subtitle}
+                  </h1>
+                )}
+              </div>
+
+              {homeBanner.description && (
+                <p className="text-gray-600 leading-relaxed font-medium
+                  text-[10px] /* 551px to 767px */
+                  md:text-xs  /* 768px to 1023px */
+                  lg:text-sm  /* 1024px+ */
+                  line-clamp-2 md:line-clamp-none
+                ">
+                  {homeBanner.description}
+                </p>
+              )}
+
+              {homeBanner.buttonName && (
+                <div className="pt-1 md:pt-2">
+                  <LocalizedClientLink href={homeBanner.buttonLink || "/store"}>
+                    <button
+                      data-ga-event="hero_banner_click"
+                      data-ga-label={homeBanner.buttonName || "Shop Now"}
+                      className="bg-[#8B5AB1] hover:bg-[#7a4e9d] text-white rounded-full font-bold flex items-center transition-all transform hover:scale-105 active:scale-95 shadow-[0_8px_16px_rgba(139,90,177,0.2)] group
+                      px-6 py-2.5 text-xs     /* 551px to 767px */
+                      md:px-10 md:py-4 md:text-base /* 768px+ */
+                    ">
+                      {homeBanner.buttonName}
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
+                        className="group-hover:translate-x-1 transition-transform ml-2
+                        w-3 h-3 md:w-5 md:h-5
+                      ">
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                        <polyline points="12 5 19 12 12 19"></polyline>
+                      </svg>
+                    </button>
+                  </LocalizedClientLink>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Banner View (Visible below 551px) */}
+      <div className="block min-[551px]:hidden relative w-full min-h-[400px]">
+        {appBanner.image ? (
+          <Image
+            src={appBanner.image}
+            alt={appBanner.title || "App Banner"}
+            width={720}
+            height={960}
+            sizes="100vw"
+            className="w-full h-auto min-h-[400px] object-cover"
+            priority
+          />
+        ) : (
+          <div className="w-full h-[450px] bg-[#E9DFFF]"></div>
+        )}
+
+        {/* Mobile Content Overlay */}
+        <div className="absolute inset-0 flex items-center pt-40 min-[451px]:pt-48">
+          <div className="w-full px-6 min-[451px]:px-12">
+            <div className="max-w-[240px] min-[451px]:max-w-[300px] space-y-2.5">
+              <div className="space-y-1">
+                {appBanner.title && (
+                  <span className="text-[#333] text-sm min-[451px]:text-lg font-bold tracking-tight block">
+                    {appBanner.title}
+                  </span>
+                )}
+                {appBanner.subtitle && (
+                  <h1 className="text-2xl min-[451px]:text-3xl font-bold text-[#8B5AB1] leading-tight">
+                    {appBanner.subtitle}
+                  </h1>
+                )}
+              </div>
+
+              {appBanner.description && (
+                <p className="text-gray-600 text-xs min-[451px]:text-sm leading-relaxed font-medium line-clamp-3">
+                  {appBanner.description}
+                </p>
+              )}
+
+              {appBanner.buttonName && (
+                <div className="pt-2">
+                  <LocalizedClientLink href={appBanner.buttonLink || "/store"}>
+                    <button
+                      data-ga-event="hero_banner_click"
+                      data-ga-label={appBanner.buttonName || "Shop Now"}
+                      className="bg-[#8B5AB1] text-white rounded-full px-6 py-2.5 min-[451px]:px-8 min-[451px]:py-3.5 text-xs min-[451px]:text-sm font-bold flex items-center gap-2 shadow-[0_4px_12px_rgba(139,90,177,0.2)] active:scale-95"
+                    >
+                      {appBanner.buttonName}
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                        <polyline points="12 5 19 12 12 19"></polyline>
+                      </svg>
+                    </button>
+                  </LocalizedClientLink>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DynamicBanner

package/templates/storefront/src/modules/home/components/featured-products/index.tsx

@@ -0,0 +1,16 @@
+import { HttpTypes } from "@medusajs/types"
+import ProductRail from "@modules/home/components/featured-products/product-rail"
+
+export default async function FeaturedProducts({
+  collections,
+  region,
+}: {
+  collections: HttpTypes.StoreCollection[]
+  region: HttpTypes.StoreRegion
+}) {
+  return collections.map((collection) => (
+    <li key={collection.id}>
+      <ProductRail collection={collection} region={region} />
+    </li>
+  ))
+}

package/templates/storefront/src/modules/home/components/featured-products/product-rail/index.tsx

@@ -0,0 +1,51 @@
+import { listProducts } from "@core/data/products"
+import { getWishlistProductIds } from "@core/data/wishlist"
+import { HttpTypes } from "@medusajs/types"
+import { Text } from "@medusajs/ui"
+
+import InteractiveLink from "@modules/common/components/interactive-link"
+import ProductCard from "@registry/components/product-card"
+
+export default async function ProductRail({
+  collection,
+  region,
+}: {
+  collection: HttpTypes.StoreCollection
+  region: HttpTypes.StoreRegion
+}) {
+  const {
+    response: { products: pricedProducts },
+  } = await listProducts({
+    regionId: region.id,
+    queryParams: {
+      collection_id: collection.id,
+      fields: "*variants.calculated_price",
+    },
+  })
+
+  if (!pricedProducts) {
+    return null
+  }
+
+  // Fetch wishlist IDs once for all products
+  const wishlistProductIds = await getWishlistProductIds()
+
+  return (
+    <div className="content-container py-12 small:py-24">
+      <div className="flex justify-between mb-8">
+        <Text className="txt-xlarge">{collection.title}</Text>
+        <InteractiveLink href={`/store?collection=${collection.id}`}>
+          View all
+        </InteractiveLink>
+      </div>
+      <ul className="grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36">
+        {pricedProducts &&
+          pricedProducts.map((product) => (
+            <li key={product.id}>
+              <ProductCard product={product} region={region} isFeatured wishlistProductIds={wishlistProductIds} />
+            </li>
+          ))}
+      </ul>
+    </div>
+  )
+}

package/templates/storefront/src/modules/home/components/features/index.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/blocks/home/Features"

package/templates/storefront/src/modules/home/components/hero/index.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/blocks/home/Hero"

package/templates/storefront/src/modules/home/components/loved-by-moms/index.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/blocks/home/LovedByMoms"

package/templates/storefront/src/modules/home/components/new-arrivals/index.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/blocks/home/NewArrivals"

package/templates/storefront/src/modules/home/components/shop-by-age/index.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/blocks/home/ShopByAge"

package/templates/storefront/src/modules/home/components/shop-by-category/index.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/blocks/home/ShopByCategory"

package/templates/storefront/src/modules/home/components/testimonials/index.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/blocks/home/Testimonials"

package/templates/storefront/src/modules/home/components/why-choose-us/dynamic-features.tsx

@@ -0,0 +1,93 @@
+import Image from "next/image"
+import { getFeaturesFromConfig } from "@core/data/dynamic-config"
+
+const DynamicFeatures = async () => {
+  const config = await getFeaturesFromConfig()
+
+  const title = config?.title || "Why Choose Chocomelon?"
+  const features = config?.features || []
+
+  if (features.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="w-full py-8 sm:py-12 md:py-14 lg:py-16 bg-[#FFFAFE]">
+      <div className="w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
+        <div className="max-w-[1440px] mx-auto">
+          <h2 className="text-xl sm:text-2xl md:text-2xl lg:text-3xl font-bold text-center mb-6 sm:mb-8 md:mb-10 lg:mb-12 text-gray-900">
+            {title}
+          </h2>
+          <style dangerouslySetInnerHTML={{
+            __html: `
+              @media (max-width: 449px) {
+                .why-choose-grid {
+                  grid-template-columns: repeat(4, 1fr) !important;
+                  gap: 0.5rem !important;
+                }
+                .why-choose-icon {
+                  width: 45px !important;
+                  height: 45px !important;
+                }
+                .why-choose-text-scroll {
+                  font-size: 8.5px !important;
+                }
+              }
+              @media (min-width: 450px) {
+                .why-choose-grid {
+                  grid-template-columns: repeat(4, 1fr) !important;
+                }
+                .why-choose-icon {
+                  width: 60px !important;
+                  height: 60px !important;
+                }
+              }
+              @media (min-width: 550px) {
+                .why-choose-icon {
+                  width: 70px !important;
+                  height: 70px !important;
+                }
+              }
+              @media (min-width: 640px) {
+                .why-choose-icon {
+                  width: 75px !important;
+                  height: 75px !important;
+                }
+              }
+              @media (min-width: 768px) {
+                .why-choose-icon {
+                  width: 85px !important;
+                  height: 85px !important;
+                }
+              }
+            `
+          }} />
+          <div className="grid grid-cols-4 sm:grid-cols-4 why-choose-grid gap-3 sm:gap-4 md:gap-6 lg:gap-8 xl:gap-12 2xl:gap-16 justify-items-center">
+            {features.map((feature, index) => (
+              <div
+                key={`${feature.name}-${index}`}
+                className="flex flex-col items-center group w-full max-w-[160px] sm:max-w-[180px] md:max-w-[200px] lg:max-w-[220px] why-choose-item-scroll"
+              >
+                <div className="relative w-[60px] h-[60px] sm:w-[75px] sm:h-[75px] md:w-[85px] md:h-[85px] lg:w-[95px] lg:h-[95px] xl:w-[105px] xl:h-[105px] 2xl:w-[120px] 2xl:h-[120px] mb-2 sm:mb-3 md:mb-4 why-choose-icon why-choose-icon-scroll">
+                  <Image
+                    src={feature.icon}
+                    alt={feature.name}
+                    width={120}
+                    height={120}
+                    className="w-full h-full object-contain"
+                  />
+                </div>
+                <h3 className="text-[10px] xs:text-xs sm:text-sm md:text-base lg:text-lg font-semibold text-gray-900 text-center leading-tight px-1 why-choose-text-scroll">
+                  {feature.name}
+                </h3>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DynamicFeatures
+

package/templates/storefront/src/modules/home/components/why-choose-us/index.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/blocks/home/WhyChooseUs"

package/templates/storefront/src/modules/layout/components/account-dropdown/index.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import {
+    Popover,
+    PopoverButton,
+    PopoverPanel,
+    Transition,
+} from "@headlessui/react"
+import Image from "next/image"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { signout } from "@core/data/customer"
+import { useParams } from "next/navigation"
+import { Fragment, useState } from "react"
+
+const AccountDropdown = ({
+    customer,
+}: {
+    customer: HttpTypes.StoreCustomer
+}) => {
+    const getProfileImageUrl = (customer: HttpTypes.StoreCustomer): string | null => {
+        const metadata = customer.metadata as Record<string, any> | undefined
+        return metadata?.profile_image_url || null
+    }
+
+    return (
+        <div className="h-full z-50 flex items-center">
+            <LocalizedClientLink
+                href="/account"
+                className="hover:opacity-80 transition-opacity flex items-center h-full"
+            >
+                {getProfileImageUrl(customer) ? (
+                    <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full overflow-hidden border border-gray-200">
+                        <Image
+                            src={getProfileImageUrl(customer)!}
+                            alt="Account"
+                            width={36}
+                            height={36}
+                            className="w-full h-full object-cover"
+                        />
+                    </div>
+                ) : (
+                    <Image
+                        src="/Account.svg"
+                        alt="Account"
+                        width={26}
+                        height={26}
+                        className="w-5 h-5"
+                    />
+                )}
+            </LocalizedClientLink>
+        </div>
+    )
+}
+
+export default AccountDropdown

package/templates/storefront/src/modules/layout/components/cart-button/index.tsx

@@ -0,0 +1,8 @@
+import { retrieveCart } from "@core/data/cart"
+import CartDropdown from "../cart-dropdown"
+
+export default async function CartButton() {
+  const cart = await retrieveCart().catch(() => null)
+
+  return <CartDropdown cart={cart} />
+}