Update homepage hero and footer with demo copy and CTAs

messages/de.json

@@ -40,7 +40,10 @@
     "myAccount": "Mein Konto"
   },
   "footer": {
-    "description": "Ein moderner E-Commerce-Shop, betrieben von Spree Commerce und Next.js.",
+    "description": "Open-Source-E-Commerce basierend auf Spree REST API, TypeScript SDK und Next.js. Selbst hosten. Eigene Daten. Keine Plattformgebühren.",
+    "forkOnGithub": "Diese Storefront auf GitHub forken",
+    "quickstartGuide": "Schnellstartanleitung",
+    "learnMore": "Mehr über Spree Commerce erfahren",
     "shop": "Shop",
     "allProducts": "Alle Produkte",
     "categories": "Kategorien",
@@ -53,10 +56,11 @@
     "copyright": "© {year} {storeName}. Unterstützt durch Spree Commerce."
   },
   "home": {
-    "welcome": "Willkommen bei {storeName}",
-    "heroDescription": "Entdecken Sie großartige Produkte mit unserem modernen E-Commerce-Erlebnis, betrieben von Spree Commerce.",
-    "shopNow": "Jetzt einkaufen",
-    "browseCategories": "Kategorien durchsuchen",
+    "welcome": "{storeName} Storefront",
+    "heroDescription": "Eine produktionsreife, quelloffene Storefront mit Next.js, React und dem Spree TypeScript SDK. Selbst hosten. Eigener Stack. Kein Vendor Lock-in. Keine Plattformgebühren.",
+    "shopNow": "Alle Produkte",
+    "forkOnGithub": "Auf GitHub forken",
+    "quickstartGuide": "Schnellstartanleitung",
     "featuredProducts": "Ausgewählte Produkte",
     "viewAll": "Alle ansehen",
     "qualityProducts": "Qualitätsprodukte",
@@ -204,6 +208,7 @@
     "default": "Standard",
     "noPaymentMethods": "Für diese Bestellung sind keine Zahlungsmethoden verfügbar.",
     "secureTransactions": "Alle Transaktionen sind sicher und verschlüsselt.",
+    "testCardNote": "Testkarte: {testCard} (beliebiges Ablaufdatum, beliebiger CVC)",
     "creditCard": "Kreditkarte",
     "enterShippingAddress": "Lieferadresse eingeben",
     "payNow": "Jetzt bezahlen",

messages/en.json

@@ -40,7 +40,10 @@
     "myAccount": "My Account"
   },
   "footer": {
-    "description": "A modern e-commerce storefront powered by Spree Commerce and Next.js.",
+    "description": "Open-source ecommerce powered by Spree REST API, TypeScript SDK, and Next.js. Self-host it. Own your data. Zero platform fees.",
+    "forkOnGithub": "Fork this storefront on GitHub",
+    "quickstartGuide": "Quickstart guide",
+    "learnMore": "Learn more about Spree Commerce",
     "shop": "Shop",
     "allProducts": "All Products",
     "categories": "Categories",
@@ -53,10 +56,11 @@
     "copyright": "© {year} {storeName}. Powered by Spree Commerce."
   },
   "home": {
-    "welcome": "Welcome to {storeName}",
-    "heroDescription": "Discover amazing products with our modern e-commerce experience powered by Spree Commerce.",
-    "shopNow": "Shop Now",
-    "browseCategories": "Browse Categories",
+    "welcome": "{storeName} Storefront",
+    "heroDescription": "A production-ready, open-source storefront built with Next.js, React, and the Spree TypeScript SDK. Self-host it. Own your stack. No vendor lock-in. Zero platform fees.",
+    "shopNow": "Shop All",
+    "forkOnGithub": "Fork on GitHub",
+    "quickstartGuide": "Quickstart Guide",
     "featuredProducts": "Featured Products",
     "viewAll": "View all",
     "qualityProducts": "Quality Products",
@@ -204,6 +208,7 @@
     "default": "Default",
     "noPaymentMethods": "No payment methods available for this order.",
     "secureTransactions": "All transactions are secure and encrypted.",
+    "testCardNote": "Test card: {testCard} (any future expiry, any CVC)",
     "creditCard": "Credit card",
     "enterShippingAddress": "Enter shipping address",
     "payNow": "Pay Now",

messages/es.json

@@ -40,7 +40,10 @@
     "myAccount": "Mi cuenta"
   },
   "footer": {
-    "description": "Una tienda en linea moderna impulsada por Spree Commerce y Next.js.",
+    "description": "Comercio electrónico de código abierto basado en Spree REST API, TypeScript SDK y Next.js. Alójalo tú mismo. Tus datos. Sin comisiones de plataforma.",
+    "forkOnGithub": "Haz un fork de esta tienda en GitHub",
+    "quickstartGuide": "Guía de inicio rápido",
+    "learnMore": "Más información sobre Spree Commerce",
     "shop": "Tienda",
     "allProducts": "Todos los productos",
     "categories": "Categorias",
@@ -53,10 +56,11 @@
     "copyright": "\u00a9 {year} {storeName}. Impulsado por Spree Commerce."
   },
   "home": {
-    "welcome": "Bienvenido a {storeName}",
-    "heroDescription": "Descubre productos increibles con nuestra experiencia de comercio electronico moderna impulsada por Spree Commerce.",
-    "shopNow": "Comprar ahora",
-    "browseCategories": "Explorar categorias",
+    "welcome": "{storeName} Storefront",
+    "heroDescription": "Un storefront de código abierto listo para producción, construido con Next.js, React y el SDK TypeScript de Spree. Alójalo tú mismo. Tu stack. Sin dependencia de proveedores. Sin comisiones de plataforma.",
+    "shopNow": "Ver todo",
+    "forkOnGithub": "Fork en GitHub",
+    "quickstartGuide": "Guía de inicio rápido",
     "featuredProducts": "Productos destacados",
     "viewAll": "Ver todo",
     "qualityProducts": "Productos de calidad",
@@ -204,6 +208,7 @@
     "default": "Predeterminado",
     "noPaymentMethods": "No hay metodos de pago disponibles para este pedido.",
     "secureTransactions": "Todas las transacciones son seguras y estan encriptadas.",
+    "testCardNote": "Tarjeta de prueba: {testCard} (cualquier fecha de expiración futura, cualquier CVC)",
     "creditCard": "Tarjeta de credito",
     "enterShippingAddress": "Ingresa la direccion de envio",
     "payNow": "Pagar ahora",

messages/fr.json

@@ -40,7 +40,10 @@
     "myAccount": "Mon compte"
   },
   "footer": {
-    "description": "Une boutique en ligne moderne propulsee par Spree Commerce et Next.js.",
+    "description": "E-commerce open source basé sur Spree REST API, TypeScript SDK et Next.js. Auto-hébergé. Vos données. Zéro frais de plateforme.",
+    "forkOnGithub": "Forker cette boutique sur GitHub",
+    "quickstartGuide": "Guide de démarrage rapide",
+    "learnMore": "En savoir plus sur Spree Commerce",
     "shop": "Boutique",
     "allProducts": "Tous les produits",
     "categories": "Categories",
@@ -53,10 +56,11 @@
     "copyright": "\u00a9 {year} {storeName}. Propulse par Spree Commerce."
   },
   "home": {
-    "welcome": "Bienvenue chez {storeName}",
-    "heroDescription": "Decouvrez des produits exceptionnels avec notre experience e-commerce moderne propulsee par Spree Commerce.",
-    "shopNow": "Acheter maintenant",
-    "browseCategories": "Parcourir les categories",
+    "welcome": "{storeName} Storefront",
+    "heroDescription": "Un storefront open source prêt pour la production, construit avec Next.js, React et le SDK TypeScript Spree. Auto-hébergé. Votre stack. Pas de dépendance fournisseur. Zéro frais de plateforme.",
+    "shopNow": "Tout parcourir",
+    "forkOnGithub": "Forker sur GitHub",
+    "quickstartGuide": "Guide de démarrage rapide",
     "featuredProducts": "Produits en vedette",
     "viewAll": "Voir tout",
     "qualityProducts": "Produits de qualite",
@@ -204,6 +208,7 @@
     "default": "Par defaut",
     "noPaymentMethods": "Aucun mode de paiement disponible pour cette commande.",
     "secureTransactions": "Toutes les transactions sont securisees et chiffrees.",
+    "testCardNote": "Carte de test : {testCard} (n'importe quelle date d'expiration future, n'importe quel CVC)",
     "creditCard": "Carte de credit",
     "enterShippingAddress": "Entrer l'adresse de livraison",
     "payNow": "Payer maintenant",

messages/pl.json

@@ -40,7 +40,10 @@
     "myAccount": "Moje konto"
   },
   "footer": {
-    "description": "Nowoczesny sklep internetowy oparty na Spree Commerce i Next.js.",
+    "description": "Sklep e-commerce open source oparty na Spree REST API, TypeScript SDK i Next.js. Hostuj samodzielnie. Twoje dane. Zero opłat platformowych.",
+    "forkOnGithub": "Forkuj ten sklep na GitHubie",
+    "quickstartGuide": "Przewodnik szybkiego startu",
+    "learnMore": "Dowiedz się więcej o Spree Commerce",
     "shop": "Sklep",
     "allProducts": "Wszystkie produkty",
     "categories": "Kategorie",
@@ -53,10 +56,11 @@
     "copyright": "© {year} {storeName}. Zasilany przez Spree Commerce."
   },
   "home": {
-    "welcome": "Witaj w {storeName}",
-    "heroDescription": "Odkryj niesamowite produkty dzięki nowoczesnemu sklepowi internetowemu opartemu na Spree Commerce.",
-    "shopNow": "Kup teraz",
-    "browseCategories": "Przeglądaj kategorie",
+    "welcome": "{storeName} Storefront",
+    "heroDescription": "Gotowy do produkcji, otwartoźródłowy storefront zbudowany z Next.js, React i Spree TypeScript SDK. Hostuj samodzielnie. Twój stack. Brak vendor lock-in. Zero opłat platformowych.",
+    "shopNow": "Wszystkie produkty",
+    "forkOnGithub": "Forkuj na GitHubie",
+    "quickstartGuide": "Przewodnik szybkiego startu",
     "featuredProducts": "Polecane produkty",
     "viewAll": "Zobacz wszystkie",
     "qualityProducts": "Produkty wysokiej jakości",
@@ -204,6 +208,7 @@
     "default": "Domyślna",
     "noPaymentMethods": "Brak dostępnych metod płatności dla tego zamówienia.",
     "secureTransactions": "Wszystkie transakcje są bezpieczne i szyfrowane.",
+    "testCardNote": "Karta testowa: {testCard} (dowolna przyszła data ważności, dowolny CVC)",
     "creditCard": "Karta kredytowa",
     "enterShippingAddress": "Podaj adres wysyłki",
     "payNow": "Zapłać teraz",

src/app/[country]/[locale]/(storefront)/page.tsx

@@ -29,25 +29,43 @@ export default async function HomePage({ params }: HomePageProps) {
   });
   const storeName = getStoreName();
 
+  /* Demo-only: Remove for production. */
+  const githubUrl = "https://github.com/spree/storefront";
+  const quickstartUrl =
+    "https://spreecommerce.org/docs/developer/getting-started/quickstart";
   return (
     <div>
       {/* Hero Section */}
       <section className="border-b border-gray-200">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8  py-24">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-24">
           <div className="text-center">
             <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-gray-900">
               {t("welcome", { storeName })}
             </h1>
-            <p className="mt-4 text-xl text-gray-500 max-w-2xl mx-auto">
+            <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
               {t("heroDescription")}
             </p>
-            <div className="mt-8 flex justify-center gap-4">
+            <div className="mt-8 flex justify-center gap-4 flex-wrap">
               <Button size="lg" asChild>
                 <Link href={`${basePath}/products`}>{t("shopNow")}</Link>
               </Button>
+              {/* Demo-only: Remove for production. */}
               <Button variant="outline" size="lg" asChild>
-                <Link href={`${basePath}/products`}>
-                  {t("browseCategories")}
+                <Link
+                  href={githubUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t("forkOnGithub")}
+                </Link>
+              </Button>
+              <Button variant="outline" size="lg" asChild>
+                <Link
+                  href={quickstartUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t("quickstartGuide")} &rarr;
                 </Link>
               </Button>
             </div>

src/components/checkout/PaymentSection.tsx

@@ -337,8 +337,10 @@ export const PaymentSection = forwardRef<
     <div>
       {/* Section Header */}
       <h2 className="text-lg font-bold text-gray-900">{t("paymentMethod")}</h2>
-      <p className="text-sm text-gray-500 mt-0.5 mb-3">
-        {t("secureTransactions")}
+      <p className="text-sm text-gray-500 mt-0.5">{t("secureTransactions")}</p>
+      {/* Demo-only: Remove for production. */}
+      <p className="text-xs text-gray-400 mb-3">
+        {t("testCardNote", { testCard: "4242 4242 4242 4242" })}
       </p>
 
       {/* Inline requirement errors from parent */}

src/components/layout/Footer.tsx

@@ -7,6 +7,12 @@ import { getStoreDescription, getStoreName } from "@/lib/store";
 const storeName = getStoreName();
 const storeDescription = getStoreDescription();
 
+// Demo-only: Remove for production.
+const githubUrl = "https://github.com/spree/storefront";
+const quickstartUrl =
+  "https://spreecommerce.org/docs/developer/getting-started/quickstart";
+const learnMoreUrl = "https://spreecommerce.org";
+
 interface FooterProps {
   rootCategories: Category[];
   basePath: string;
@@ -25,12 +31,40 @@ export async function Footer({
     <footer className="bg-primary text-gray-300">
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid grid-cols-1 gap-8 md:grid-cols-5">
+          {/* Demo-only: Remove for production. */}
           {/* Brand */}
           <div className="col-span-1 md:col-span-2">
             <span className="text-xl font-bold text-white">{storeName}</span>
             <p className="mt-4 text-sm text-neutral-400">
               {t("description") || storeDescription}
             </p>
+            {/* Demo-only: Remove for production. */}
+            <div className="mt-4 flex flex-col gap-2">
+              <Link
+                href={githubUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-white hover:text-neutral-200 transition-colors font-medium"
+              >
+                {t("forkOnGithub")} &rarr;
+              </Link>
+              <Link
+                href={quickstartUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
+              >
+                {t("quickstartGuide")}
+              </Link>
+              <Link
+                href={learnMoreUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
+              >
+                {t("learnMore")}
+              </Link>
+            </div>
           </div>
 
           {/* Links */}

src/lib/seo.ts

@@ -5,7 +5,7 @@ import { ensureProtocol, getStoreName, getStoreUrl } from "@/lib/store";
  * Default social image path (stored in public/).
  * Replace public/social-image.png with your own 1200x630 OG image.
  */
-export const SOCIAL_IMAGE_PATH = "/social-image.png";
+export const SOCIAL_IMAGE_PATH = "/social-image.webp";
 
 /**
  * Build a full canonical URL from a store URL and a relative path.