@pradip1995/create-storefront 1.0.1

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

@@ -0,0 +1,62 @@
+import Image from "next/image"
+import type { WhyChooseUsBlockData } from "@core/types/home"
+import { colorClasses } from "@theme/tokens"
+
+const WhyChooseUs = ({ title, features }: WhyChooseUsBlockData) => {
+  if (features.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={`w-full py-8 sm:py-12 md:py-14 lg:py-16 ${colorClasses.pageBg}`}>
+      <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]"
+              >
+                <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">
+                  <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 WhyChooseUs

package/templates/storefront/src/theme/valero/layouts/MainLayoutShell.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+import { colorClasses } from "@theme/tokens"
+
+type MainLayoutShellProps = {
+  children: ReactNode
+}
+
+export function MainLayoutShell({ children }: MainLayoutShellProps) {
+  return (
+    <main className={`${colorClasses.pageBg} min-h-screen w-full`}>
+      {children}
+    </main>
+  )
+}

package/templates/storefront/src/theme/valero/primitives/Button.tsx

@@ -0,0 +1,28 @@
+import { Button as MedusaButton } from "@medusajs/ui"
+import { clx } from "@medusajs/ui"
+import type { ComponentProps } from "react"
+
+type ButtonProps = ComponentProps<typeof MedusaButton> & {
+  variant?: "primary" | "secondary" | "ghost"
+}
+
+const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
+  primary:
+    "bg-brand-accent hover:bg-brand-accent-hover text-white rounded-full font-bold shadow-sm",
+  secondary:
+    "bg-white border border-brand-accent text-brand-accent rounded-full font-semibold",
+  ghost: "bg-transparent text-gray-700 hover:bg-gray-50 rounded-lg",
+}
+
+export function Button({
+  variant = "primary",
+  className,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <MedusaButton className={clx(variantClasses[variant], className)} {...props}>
+      {children}
+    </MedusaButton>
+  )
+}

package/templates/storefront/src/theme/valero/primitives/Card.tsx

@@ -0,0 +1,32 @@
+import { clx } from "@medusajs/ui"
+import type { HTMLAttributes } from "react"
+
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+  padding?: "sm" | "md" | "lg"
+}
+
+const paddingClasses = {
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8",
+}
+
+export function Card({
+  padding = "md",
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={clx(
+        "rounded-xl bg-white border border-gray-100 shadow-sm",
+        paddingClasses[padding],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/templates/storefront/src/theme/valero/primitives/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button"
+export { Card } from "./Card"

package/templates/storefront/src/theme/valero/slots/account/ForgotPassword/index.tsx

@@ -0,0 +1 @@
+export { default } from "@pradip1995/commerce-auth/components/forgot-password"

package/templates/storefront/src/theme/valero/slots/account/Login/index.tsx

@@ -0,0 +1 @@
+export { default } from "@pradip1995/commerce-auth/components/login"

package/templates/storefront/src/theme/valero/slots/account/LoginTemplate/index.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { useState } from "react"
+
+import { LOGIN_VIEW } from "@core/types/account"
+import type { AccountPageData } from "@core/types/account"
+import Login from "@theme/slots/account/Login"
+import Register from "@theme/slots/account/Register"
+import ForgotPassword from "@theme/slots/account/ForgotPassword"
+import { colorClasses } from "@theme/tokens"
+
+type LoginTemplateProps = Pick<AccountPageData, "countryCode">
+
+export default function LoginTemplate(_props: LoginTemplateProps) {
+  const [currentView, setCurrentView] = useState(LOGIN_VIEW.SIGN_IN)
+
+  const renderView = () => {
+    switch (currentView) {
+      case LOGIN_VIEW.REGISTER:
+        return <Register setCurrentView={setCurrentView} />
+      case LOGIN_VIEW.FORGOT_PASSWORD:
+        return <ForgotPassword setCurrentView={setCurrentView} />
+      default:
+        return <Login setCurrentView={setCurrentView} />
+    }
+  }
+
+  return (
+    <div className={`min-h-screen w-full flex flex-col ${colorClasses.pageBg}`}>
+      <div className="flex-1 flex flex-col items-center justify-start px-2 min-[340px]:px-3 min-[550px]:px-4 sm:px-6 md:px-8 pt-2 min-[340px]:pt-3 min-[550px]:pt-4 sm:pt-4 md:pt-6 pb-6 min-[340px]:pb-8 min-[550px]:pb-8 sm:pb-8 md:pb-8">
+        <h1 className="text-2xl min-[340px]:text-3xl min-[550px]:text-3xl sm:text-4xl md:text-4xl font-bold text-heading mb-4 min-[340px]:mb-6 min-[550px]:mb-8 sm:mb-8 md:mb-8 text-center">
+          My Account
+        </h1>
+
+        <div
+          className={`w-full ${colorClasses.pageBg} rounded-2xl shadow-lg p-4 min-[340px]:p-5 min-[550px]:p-6 sm:p-7 md:p-8`}
+          style={{ maxWidth: "560px" }}
+        >
+          {renderView()}
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/theme/valero/slots/account/Register/index.tsx

@@ -0,0 +1 @@
+export { default } from "@pradip1995/commerce-auth/components/register"

package/templates/storefront/src/theme/valero/slots/cart/CartItem/index.tsx

@@ -0,0 +1,11 @@
+import { HttpTypes } from "@medusajs/types"
+import CartItemCard from "@modules/cart/components/cart-item-card"
+
+export type CartItemSlotProps = {
+  item: HttpTypes.StoreCartLineItem
+  currencyCode: string
+}
+
+export default function CartItem({ item, currencyCode }: CartItemSlotProps) {
+  return <CartItemCard item={item} currencyCode={currencyCode} />
+}

package/templates/storefront/src/theme/valero/slots/cart/CartSummary/index.tsx

@@ -0,0 +1,13 @@
+import { HttpTypes } from "@medusajs/types"
+import Summary from "@modules/cart/templates/summary"
+
+export type CartSummarySlotProps = {
+  cart: HttpTypes.StoreCart & {
+    promotions: HttpTypes.StorePromotion[]
+  }
+  customer: HttpTypes.StoreCustomer | null
+}
+
+export default function CartSummary({ cart, customer }: CartSummarySlotProps) {
+  return <Summary cart={cart} customer={customer} />
+}

package/templates/storefront/src/theme/valero/slots/checkout/CheckoutForm/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/checkout/templates/checkout-form"

package/templates/storefront/src/theme/valero/slots/checkout/CheckoutSummary/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/checkout/templates/checkout-summary"

package/templates/storefront/src/theme/valero/slots/layout/Footer/index.tsx

@@ -0,0 +1,104 @@
+import type { FooterSlotData } from "@core/types/layout"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import FooterNewsletter from "@modules/layout/components/footer-newsletter"
+
+const COMPANY_LINKS = [
+  { href: "/", label: "Home" },
+  { href: "/store", label: "Shop" },
+  { href: "/blog", label: "Blog" },
+  { href: "/contact", label: "Contact" },
+  { href: "/help", label: "Help" },
+  { href: "/privacy-policy", label: "Privacy Policy" },
+  { href: "/terms-of-use", label: "Terms of Use" },
+]
+
+export default function Footer({ categories }: FooterSlotData) {
+  return (
+    <footer className="bg-brand-footer text-[var(--color-text-inverse)] mt-auto">
+      <div
+        className="mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
+          <div className="sm:col-span-2 lg:col-span-1">
+            <p className="text-lg font-heading font-bold uppercase tracking-[var(--letter-spacing-nav)] mb-4">
+              Valero
+            </p>
+            <p className="text-sm text-white/70 leading-relaxed max-w-xs">
+              Premium fashion with bold promotions. Shop the latest collections
+              with fast delivery and easy returns.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] mb-4 text-white/90">
+              Shop
+            </h3>
+            <ul className="space-y-2.5">
+              {(categories?.slice(0, 6) ?? []).map((cat) => (
+                <li key={cat.id}>
+                  <LocalizedClientLink
+                    href={`/store?category=${cat.id}`}
+                    className="text-sm text-white/70 hover:text-white transition-colors"
+                  >
+                    {cat.name}
+                  </LocalizedClientLink>
+                </li>
+              ))}
+              {!categories?.length && (
+                <li>
+                  <LocalizedClientLink
+                    href="/store"
+                    className="text-sm text-white/70 hover:text-white transition-colors"
+                  >
+                    All products
+                  </LocalizedClientLink>
+                </li>
+              )}
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] mb-4 text-white/90">
+              Company
+            </h3>
+            <ul className="space-y-2.5">
+              {COMPANY_LINKS.map((link) => (
+                <li key={link.href}>
+                  <LocalizedClientLink
+                    href={link.href}
+                    className="text-sm text-white/70 hover:text-white transition-colors"
+                  >
+                    {link.label}
+                  </LocalizedClientLink>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] mb-4 text-white/90">
+              Newsletter
+            </h3>
+            <p className="text-sm text-white/70 mb-4">
+              Subscribe for exclusive offers and new arrivals.
+            </p>
+            <FooterNewsletter />
+          </div>
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-white/50">
+          <p>© {new Date().getFullYear()} Valero. All rights reserved.</p>
+          <div className="flex gap-6">
+            <LocalizedClientLink href="/privacy-policy" className="hover:text-white">
+              Privacy
+            </LocalizedClientLink>
+            <LocalizedClientLink href="/terms-of-use" className="hover:text-white">
+              Terms
+            </LocalizedClientLink>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/templates/storefront/src/theme/valero/slots/layout/Nav/index.tsx

@@ -0,0 +1,97 @@
+import { Suspense } from "react"
+import { HttpTypes } from "@medusajs/types"
+import type { NavSlotData } from "@core/types/layout"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import CartButton from "@modules/layout/components/cart-button"
+import DynamicLogo from "@modules/layout/components/dynamic-logo"
+import MobileMenu from "@modules/layout/components/mobile-menu"
+import SearchPanel from "@modules/layout/components/search-panel"
+import DesktopSearch, {
+  DesktopSearchIcon,
+} from "@modules/layout/components/desktop-search"
+import AccountDropdown from "@modules/layout/components/account-dropdown"
+
+const NAV_LINKS = [
+  { href: "/", label: "Home" },
+  { href: "/store", label: "Shop" },
+  { href: "/contact", label: "Contact" },
+  { href: "/help", label: "Help" },
+]
+
+export default function Nav({ currentLocale, customer }: NavSlotData) {
+  return (
+    <div className="sticky top-0 inset-x-0 z-50">
+      <header className="bg-[var(--color-header-bg)] border-b border-[var(--color-header-border)]">
+        <div
+          className="mx-auto px-4 sm:px-6 flex items-center justify-between gap-4"
+          style={{ maxWidth: "var(--container-max)", height: "var(--header-height)" }}
+        >
+          <div className="flex items-center gap-3 lg:hidden flex-shrink-0">
+            <MobileMenu
+              customer={customer}
+              countryCode={currentLocale || "in"}
+            />
+          </div>
+
+          <div className="flex-shrink-0 lg:flex-1 lg:basis-0">
+            <DynamicLogo />
+          </div>
+
+          <nav
+            className="hidden lg:flex items-center justify-center gap-8 xl:gap-10 flex-1"
+            aria-label="Main"
+          >
+            {NAV_LINKS.map((link) => (
+              <LocalizedClientLink
+                key={link.href}
+                href={link.href}
+                className="text-[11px] xl:text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading hover:text-brand-accent transition-colors"
+              >
+                {link.label}
+              </LocalizedClientLink>
+            ))}
+          </nav>
+
+          <DesktopSearch countryCode={currentLocale || "in"} hideNavLinks>
+            <div className="flex items-center justify-end gap-3 sm:gap-5 flex-shrink-0 lg:flex-1 lg:basis-0">
+              <div className="hidden lg:block">
+                <DesktopSearchIcon />
+              </div>
+              <div className="lg:hidden">
+                <SearchPanel countryCode={currentLocale || "in"} />
+              </div>
+
+              {!customer ? (
+                <LocalizedClientLink
+                  href="/account"
+                  className="hidden sm:inline-flex text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading hover:opacity-70 transition-opacity"
+                  data-testid="nav-login-link"
+                >
+                  Account
+                </LocalizedClientLink>
+              ) : (
+                <AccountDropdown customer={customer as HttpTypes.StoreCustomer} />
+              )}
+
+              <Suspense
+                fallback={
+                  <LocalizedClientLink
+                    href="/cart"
+                    className="text-heading hover:opacity-70"
+                    data-testid="nav-cart-link"
+                  >
+                    <span className="text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)]">
+                      Bag
+                    </span>
+                  </LocalizedClientLink>
+                }
+              >
+                <CartButton />
+              </Suspense>
+            </div>
+          </DesktopSearch>
+        </div>
+      </header>
+    </div>
+  )
+}

package/templates/storefront/src/theme/valero/slots/layout/PromoBar/index.tsx

@@ -0,0 +1,19 @@
+import type { PromoBarSlotData } from "@core/types/layout"
+import PromoBarContent from "./promo-bar-content"
+
+export default function PromoBar({
+  text,
+  code,
+  value,
+  active,
+}: PromoBarSlotData) {
+  if (!active || !text) {
+    return null
+  }
+
+  return (
+    <div className="relative bg-brand-accent text-[var(--color-text-inverse)] text-center py-2.5 px-4 text-xs sm:text-sm font-medium tracking-[var(--letter-spacing-nav)] uppercase">
+      <PromoBarContent text={text} code={code} value={value} />
+    </div>
+  )
+}

package/templates/storefront/src/theme/valero/slots/layout/PromoBar/promo-bar-content.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Copy, Check } from "lucide-react"
+
+export default function PromoBarContent({ text, code: explicitCode, value: explicitValue }: { text: string; code: string | null; value: string | null }) {
+  const [copied, setCopied] = useState(false)
+
+  // Regex for code and value
+  const codeRegex = /\b[A-Z0-9]{4,}\b/;
+  const valueRegex = /(\d+%\s?(OFF)?)|([₹$]\d+)|(\d+\s?(Rs|₹|%|OFF))/gi;
+
+  let currentText = text;
+  let codeToCopy = explicitCode || "";
+  
+  // Find code part
+  let codeMatch = explicitCode && currentText.includes(explicitCode) 
+    ? { text: explicitCode, index: currentText.indexOf(explicitCode) }
+    : null;
+
+  if (!codeMatch) {
+    const regMatch = currentText.match(codeRegex);
+    if (regMatch) {
+      codeMatch = { text: regMatch[0], index: regMatch.index! };
+      if (!explicitCode) codeToCopy = regMatch[0];
+    }
+  }
+
+  // Find value part
+  let valueMatch = explicitValue && currentText.includes(explicitValue)
+    ? { text: explicitValue, index: currentText.indexOf(explicitValue) }
+    : null;
+
+  if (!valueMatch) {
+    const regMatch = Array.from(currentText.matchAll(valueRegex));
+    if (regMatch.length > 0) {
+      const firstValue = regMatch[0];
+      valueMatch = { text: firstValue[0], index: firstValue.index! };
+    }
+  }
+
+  // Handle priority: if explicitCode/explicitValue exist but not found in text, 
+  // we replace the detected ones or append if none detected? 
+  // User said "replace" essentially by saying priority.
+
+  // To render precisely, we need to collect all segments.
+  const segments: Array<{ text: string; type: 'text' | 'code' | 'value' }> = [];
+  let lastIndex = 0;
+
+  const matches = [
+    ...(codeMatch ? [{ ...codeMatch, type: 'code' as const }] : []),
+    ...(valueMatch ? [{ ...valueMatch, type: 'value' as const }] : [])
+  ].sort((a, b) => a.index - b.index);
+
+  // Avoid overlaps
+  let filteredMatches: typeof matches = [];
+  let currentPos = 0;
+  for (const match of matches) {
+    if (match.index >= currentPos) {
+      filteredMatches.push(match);
+      currentPos = match.index + match.text.length;
+    }
+  }
+
+  filteredMatches.forEach(match => {
+    if (match.index > lastIndex) {
+      segments.push({ text: currentText.substring(lastIndex, match.index), type: 'text' });
+    }
+    
+    // Use explicit values if they exist, even if the text match was different (Priority logic)
+    const displayText = match.type === 'code' ? (explicitCode || match.text) : (explicitValue || match.text);
+    segments.push({ text: displayText, type: match.type });
+    lastIndex = match.index + match.text.length;
+  });
+
+  if (lastIndex < currentText.length) {
+    segments.push({ text: currentText.substring(lastIndex), type: 'text' });
+  }
+
+  // Fallback for cases where no match was found but explicit values exist: 
+  // (Optional: we could append them, but usually text should contain them)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(codeToCopy || text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="max-w-[1440px] mx-auto w-full relative z-10 flex flex-row items-center justify-start lg:justify-center gap-x-4 text-center font-medium overflow-hidden whitespace-nowrap py-0.5">
+      {/* Visual Feedback Overlay for Copy Success - Mobile Only */}
+      {copied && (
+        <div className="absolute inset-0 z-50 flex sm:hidden items-center justify-center bg-promo-gradient animate-in fade-in zoom-in duration-200">
+          <span className="text-yellow-300 text-[11px] sm:text-[13px] font-extrabold tracking-wider uppercase flex items-center gap-2 drop-shadow-md">
+            PROMOCODE COPIED! APPLY AT CHECKOUT 🎁
+          </span>
+        </div>
+      )}
+
+      <div className="flex items-center lg:animate-none animate-marquee whitespace-nowrap min-w-full lg:min-w-0">
+        <button 
+          onClick={handleCopy}
+          className="group/btn flex items-center justify-center gap-1.5 focus:outline-none flex-shrink-0"
+          title={codeToCopy ? `Click to copy promo code: ${codeToCopy}` : "Click to copy"}
+        >
+          {/* Main Content Segment */}
+          <div className="flex items-center gap-1.5 px-2 sm:px-0">
+            <span className="text-[11px] sm:text-[12.5px] font-bold tracking-[0.05em] uppercase drop-shadow-sm group-hover/btn:text-yellow-100 transition-colors flex items-center">
+              {segments.length > 0 ? segments.map((s, i) => (
+                s.type === 'text' ? (
+                  <span key={i}>{s.text}</span>
+                ) : (
+                  <span key={i} className="text-yellow-300 text-[12px] sm:text-[13.5px] mx-1 font-extrabold shadow-sm group-hover/btn:text-yellow-200 transition-colors drop-shadow-md">
+                    "{s.text}"
+                  </span>
+                )
+              )) : text}
+            </span>
+            <span className="bg-white/20 p-1 rounded-md group-hover/btn:bg-white/30 transition-colors flex items-center justify-center flex-shrink-0 ml-1">
+              {copied ? (
+                <Check size={13} className="text-green-300" strokeWidth={3} />
+              ) : (
+                <Copy size={13} className="text-white/80 group-hover/btn:text-white" strokeWidth={2.5} />
+              )}
+            </span>
+          </div>
+        </button>
+ 
+        <div className="mx-4 h-3 w-px bg-white/30 flex-shrink-0" />
+ 
+        <Link 
+          href="/store" 
+          className="text-[11px] sm:text-[12.5px] font-bold tracking-[0.02em] uppercase text-yellow-300 hover:text-white underline underline-offset-4 decoration-white/40 hover:decoration-white transition-all flex items-center group/link flex-shrink-0 mr-8 sm:mr-0"
+        >
+          SHOP NOW
+          <svg 
+            className="ml-1 w-3 h-3 transform group-hover/link:translate-x-1 transition-transform" 
+            fill="none" 
+            viewBox="0 0 24 24" 
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M9 5l7 7-7 7" />
+          </svg>
+        </Link>
+ 
+        {/* Duplicated Content for Seamless Loop on Mobile and Tablet */}
+        <div className="flex lg:hidden items-center gap-x-4">
+          <div className="mx-4 h-3 w-px bg-white/30 flex-shrink-0" />
+          <div className="flex items-center gap-1.5 px-2">
+            <span className="text-[11px] font-bold tracking-[0.05em] uppercase drop-shadow-sm flex items-center">
+              {segments.length > 0 ? segments.map((s, i) => (
+                s.type === 'text' ? (
+                  <span key={i}>{s.text}</span>
+                ) : (
+                  <span key={i} className="text-yellow-300 text-[12px] mx-1 font-extrabold">
+                    "{s.text}"
+                  </span>
+                )
+              )) : text}
+            </span>
+            <span className="bg-white/20 p-1 rounded-md flex items-center justify-center flex-shrink-0 ml-1">
+              <Copy size={13} className="text-white/80" strokeWidth={2.5} />
+            </span>
+          </div>
+          <div className="mx-4 h-3 w-px bg-white/30 flex-shrink-0" />
+          <span className="text-[11px] font-bold tracking-[0.02em] uppercase text-yellow-300 flex items-center mr-8">
+            SHOP NOW
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/theme/valero/slots/order/OrderDetails/index.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import OrderDetailsTemplate from "@modules/order/templates/order-details-template"
+import type { HttpTypes } from "@medusajs/types"
+
+type OrderDetailsProps = {
+  order: HttpTypes.StoreOrder
+}
+
+export default function OrderDetails({ order }: OrderDetailsProps) {
+  return <OrderDetailsTemplate order={order} />
+}