keystone-design-bootstrap 1.0.50 → 1.0.53

package/src/design_system/sections/service-menu-section.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { PhotoWithFallback, Carousel, Modal, MarkdownRenderer, Button } from '../elements';
-import type { OfferPublic } from '../../lib/server-api';
+import type { OfferPublic } from '../../types/api/offer';
 import type { Service, ServiceItem } from '../../types/api/service';
 import type { WebsitePhotos } from '../../types/api/website-photos';
 import type { CompanyInformation } from '../../types/api/company-information';
@@ -34,6 +34,7 @@ export interface PackagePublic {
   price_cents?: number | null;
   photo_attachments?: PhotoAttachment[];
   package_items?: Array<{ quantity: number; service_item?: { id: number; name: string; slug: string; summary?: string | null } }>;
+  offers?: OfferPublic[];
 }
 
 /** Package with category names and first-service description fallback (derived from services). */
@@ -42,16 +43,9 @@ export interface PackageForMenu extends PackagePublic {
   first_service_description_markdown?: string | null;
 }
 
-/** Offer with category names and first-service description fallback (derived from services). */
-export interface OfferForMenu extends OfferPublic {
-  category_names?: string[];
-  first_service_description_markdown?: string | null;
-}
-
 export interface ServiceMenuSectionProps {
   title?: string;
   subtitle?: string;
-  offers?: OfferPublic[] | null;
   packages?: PackagePublic[] | null;
   /** Services (used to derive service items for the third row). */
   services?: Service[] | null;
@@ -74,10 +68,14 @@ export interface ServiceItemWithService extends ServiceItem {
 }
 
 type DetailItem =
-  | { type: 'offer'; item: OfferForMenu }
   | { type: 'package'; item: PackageForMenu }
   | { type: 'service_item'; item: ServiceItemWithService };
 
+function getActivePublicOffers(offers: OfferPublic[] | undefined | null): OfferPublic[] {
+  if (!Array.isArray(offers) || offers.length === 0) return [];
+  return offers.filter((o) => o.active !== false && o.expired !== true);
+}
+
 function photoAttachmentDisplayUrl(pa: PhotoAttachment): string | undefined {
   return pa.photo?.large_url || pa.photo?.medium_url;
 }
@@ -138,6 +136,7 @@ function GridCardWithImage({
   websitePhotos,
   companyInformation,
   cycleSeed,
+  hasSpecial,
 }: {
   photoAttachments?: PhotoAttachment[];
   fallbackId: string | number;
@@ -149,6 +148,8 @@ function GridCardWithImage({
   websitePhotos?: WebsitePhotos | null;
   companyInformation?: CompanyInformation | null;
   cycleSeed?: string;
+  /** Show a small “Special” badge when this package or treatment has active offers. */
+  hasSpecial?: boolean;
 }) {
   const seed = cycleSeed ?? String(fallbackId);
   const list = useCycledPhotoList(photoAttachments, seed);
@@ -192,6 +193,14 @@ function GridCardWithImage({
       className="flex flex-col h-full w-full text-left group block rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-brand-accent focus-visible:ring-offset-2"
     >
       <div className="w-full h-36 overflow-hidden rounded-lg mb-3 relative">
+        {hasSpecial ? (
+          <span
+            className="absolute top-2 right-2 z-10 rounded-full border border-brand-accent/40 bg-secondary/95 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-brand-accent shadow-sm backdrop-blur-sm"
+            aria-label="Has special offer"
+          >
+            Special
+          </span>
+        ) : null}
         {list.length === 0 ? (
           <PhotoWithFallback
             item={undefined}
@@ -350,7 +359,37 @@ function ModalSection({ title, children }: { title: string; children: React.Reac
   );
 }
 
-/** Renders modal body for the selected offer, package, or service item. */
+function ActiveOffersCallout({ offers }: { offers: OfferPublic[] }) {
+  if (!offers.length) return null;
+  return (
+    <div className="rounded-xl border border-secondary bg-secondary/25 p-4 md:p-5 space-y-3 ring-1 ring-brand-accent/25">
+      <p className="text-xs font-semibold uppercase tracking-wide text-brand-accent">Current specials</p>
+      <ul className="space-y-3 list-none m-0 p-0">
+        {offers.map((o) => (
+          <li
+            key={o.id}
+            className="rounded-lg border border-secondary border-l-[3px] border-l-brand-accent bg-primary_hover/30 p-4"
+          >
+            <p className="font-display text-base font-medium text-fg-primary">{o.name}</p>
+            {o.value_terms ? (
+              <p className="font-body text-sm text-brand-accent mt-1 font-medium">{o.value_terms}</p>
+            ) : null}
+            {o.description ? (
+              <p className="font-body text-sm text-fg-secondary mt-2 leading-relaxed">{o.description}</p>
+            ) : null}
+            {o.expires_at ? (
+              <p className="text-xs text-tertiary mt-2">
+                Ends {new Date(o.expires_at).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+              </p>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/** Modal body for package or service item (specials shown inline when present). */
 function DetailModalContent({
   detail,
   serviceItems = [],
@@ -360,90 +399,18 @@ function DetailModalContent({
   packages?: PackageForMenu[];
   serviceItems?: ServiceItemWithService[];
 }) {
-  if (detail.type === 'offer') {
-    const o = detail.item;
-    const categoryLine = o.category_names?.length ? o.category_names.join(' | ') : null;
-    const descriptionContent = o.description || o.first_service_description_markdown;
-    // Backend includes nested services, service_items, and packages on every offer (list and single).
-    const relatedServices = o.services?.length ? o.services : (o.service_items ?? []);
-    const relatedPackages = o.packages ?? [];
-
-    return (
-      <div className="space-y-6">
-        {categoryLine && (
-          <p className="text-sm font-medium text-fg-secondary uppercase tracking-wide">{categoryLine}</p>
-        )}
-        {o.value_terms && !categoryLine && (
-          <p className="text-sm font-medium text-fg-secondary uppercase tracking-wide">{o.value_terms}</p>
-        )}
-        {descriptionContent && (
-          <ModalSection title="Offer details">
-            <div className="prose prose-sm font-body text-fg-primary max-w-none">
-              {o.description ? <p className="text-fg-primary">{o.description}</p> : <MarkdownRenderer content={o.first_service_description_markdown!} />}
-            </div>
-          </ModalSection>
-        )}
-        {o.expires_at && (() => {
-          const d = new Date(o.expires_at);
-          if (Number.isNaN(d.getTime())) return null;
-          return (
-            <p className="text-sm text-tertiary">
-              Expires {d.toLocaleDateString(undefined, { dateStyle: 'medium' })}
-            </p>
-          );
-        })()}
-
-        {relatedServices.length > 0 && (
-          <ModalSection title="Related services">
-            <ul className="space-y-4">
-              {relatedServices.map((s: Service | { id: number; name: string; summary?: string | null }) => (
-                <li key={s.id} className="border border-secondary rounded-lg p-4 bg-secondary/20">
-                  <p className="font-display font-medium text-fg-primary">{s.name}</p>
-                  {'description_markdown' in s && s.description_markdown ? (
-                    <div className="mt-2 prose prose-sm font-body text-fg-secondary max-w-none">
-                      <MarkdownRenderer content={s.description_markdown} />
-                    </div>
-                  ) : s.summary ? (
-                    <p className="mt-2 font-body text-sm text-fg-secondary">{s.summary}</p>
-                  ) : null}
-                </li>
-              ))}
-            </ul>
-          </ModalSection>
-        )}
-
-        {relatedPackages.length > 0 && (
-          <ModalSection title="Related packages">
-            <ul className="space-y-4">
-              {relatedPackages.map((pkg) => (
-                <li key={pkg.id} className="border border-secondary rounded-lg p-4 bg-secondary/20">
-                  <p className="font-display font-medium text-fg-primary">{pkg.name}</p>
-                  {'description_markdown' in pkg && pkg.description_markdown ? (
-                    <div className="mt-2 prose prose-sm font-body text-fg-secondary max-w-none">
-                      <MarkdownRenderer content={pkg.description_markdown} />
-                    </div>
-                  ) : pkg.summary ? (
-                    <p className="mt-2 font-body text-sm text-fg-secondary">{pkg.summary}</p>
-                  ) : null}
-                </li>
-              ))}
-            </ul>
-          </ModalSection>
-        )}
-      </div>
-    );
-  }
-
   if (detail.type === 'package') {
     const p = detail.item;
     const categoryLine = p.category_names?.length ? p.category_names.join(' | ') : null;
     const descriptionMarkdown = p.description_markdown || p.summary || p.first_service_description_markdown;
+    const packageSpecials = getActivePublicOffers(p.offers);
 
     return (
       <div className="space-y-6">
         {categoryLine && (
           <p className="text-sm font-medium text-fg-secondary uppercase tracking-wide">{categoryLine}</p>
         )}
+        <ActiveOffersCallout offers={packageSpecials} />
         {descriptionMarkdown && (
           <ModalSection title="Package details">
             <div className="prose prose-sm font-body text-fg-primary max-w-none">
@@ -497,12 +464,14 @@ function DetailModalContent({
   const priceStr = formatPriceCents(si.price_cents);
   const summary = si.summary || si.service_summary;
   const descriptionMarkdown = si.description_markdown || si.service_description_markdown;
+  const itemSpecials = getActivePublicOffers(si.offers);
 
   return (
     <div className="space-y-6">
       {si.service_name && (
         <p className="text-sm font-medium text-fg-secondary uppercase tracking-wide">{si.service_name}</p>
       )}
+      <ActiveOffersCallout offers={itemSpecials} />
 
       {priceStr && (
         <ModalSection title="Price">
@@ -541,14 +510,11 @@ function DetailModalContent({
 }
 
 /**
- * Service Menu section: up to 3 independent carousel rows (Offers, Packages, Service Items).
- * Service items are derived from services (each service’s service_items with service name).
- * Cards cycle through photos; clicking opens a detail modal.
+ * Service Menu: packages and treatments (service items). Specials appear as card badges and in modals.
  */
 export function ServiceMenuSection({
   title = 'Service Menu',
   subtitle,
-  offers = null,
   packages = null,
   services = null,
   websitePhotos,
@@ -558,10 +524,6 @@ export function ServiceMenuSection({
   servicesRowTitle = 'Treatments',
   variant = 'section',
 }: ServiceMenuSectionProps) {
-  const offerList = React.useMemo(
-    () => (Array.isArray(offers) ? offers.filter((o) => !o.expired) : []),
-    [offers]
-  );
   const packageList = React.useMemo(
     () => (Array.isArray(packages) ? packages : []),
     [packages]
@@ -596,23 +558,6 @@ export function ServiceMenuSection({
     [packageList, serviceItemIdToService]
   );
 
-  const offersForMenu: OfferForMenu[] = React.useMemo(
-    () =>
-      offerList.map((offer) => {
-        const category_names =
-          (offer.category_names?.length ? offer.category_names : null) ??
-          ((offer.service_ids || [])
-            .map((id) => serviceList.find((s) => s.id === id)?.name)
-            .filter(Boolean) as string[]);
-        const firstServiceId = offer.service_ids?.[0];
-        const firstService = firstServiceId ? serviceList.find((s) => s.id === firstServiceId) : undefined;
-        const first_service_description_markdown =
-          firstService?.description_markdown || firstService?.summary || null;
-        return { ...offer, category_names: category_names ?? [], first_service_description_markdown };
-      }),
-    [offerList, serviceList]
-  );
-
   const serviceItemsForMenu: ServiceItemWithService[] = serviceList.flatMap((s) =>
     (s.service_items || []).map((si) => ({
       ...si,
@@ -621,12 +566,11 @@ export function ServiceMenuSection({
       service_description_markdown: s.description_markdown,
     }))
   );
-  const hasAny = offersForMenu.length > 0 || packagesForMenu.length > 0 || serviceItemsForMenu.length > 0;
+  const hasAny = packagesForMenu.length > 0 || serviceItemsForMenu.length > 0;
 
   const CAROUSEL_MIN = 3;
   // Page variant: always grid (full list, no carousel). Section variant: carousel when >=3 items else grid.
   const isPage = variant === 'page';
-  const offersLayout: 'carousel' | 'grid' = isPage ? 'grid' : (offersForMenu.length >= CAROUSEL_MIN ? 'carousel' : 'grid');
   const packagesLayout: 'carousel' | 'grid' = isPage ? 'grid' : (packagesForMenu.length >= CAROUSEL_MIN ? 'carousel' : 'grid');
   const serviceItemsLayout: 'carousel' | 'grid' = isPage ? 'grid' : (serviceItemsForMenu.length >= CAROUSEL_MIN ? 'carousel' : 'grid');
 
@@ -648,40 +592,13 @@ export function ServiceMenuSection({
 
   const closeModal = useCallback(() => setDetailItem(null), []);
 
-  const renderOfferCard = useCallback(
-    (offer: OfferForMenu, index: number) => {
-      const categorySubtitle =
-        offer.category_names?.length ? offer.category_names.join(' | ') : (offer.value_terms ?? null);
-      const cardDesc = offer.description || offer.first_service_description_markdown;
-      const plainDesc = cardDesc ? (typeof cardDesc === 'string' ? cardDesc : '').replace(/[#*`\[\]]/g, '').replace(/\n+/g, ' ').trim() : '';
-      const descText = plainDesc.length > 120 ? plainDesc.slice(0, 120) + '…' : plainDesc;
-      return (
-        <GridCardWithImage
-          photoAttachments={offer.photo_attachments}
-          fallbackId={offer.id}
-          fallbackAlt={offer.name}
-          title={offer.name}
-          subtitle={categorySubtitle}
-          onClick={() => setDetailItem({ type: 'offer', item: offer })}
-          websitePhotos={websitePhotos}
-          companyInformation={companyInformation}
-          cycleSeed={`offer-${offer.id}-${index}`}
-        >
-          {descText && (
-            <p className="font-body text-sm text-tertiary mt-1 line-clamp-2">{descText}</p>
-          )}
-        </GridCardWithImage>
-      );
-    },
-    [websitePhotos, companyInformation]
-  );
-
   const renderPackageCard = useCallback(
     (pkg: PackageForMenu, index: number) => {
       const categorySubtitle = pkg.category_names?.length ? pkg.category_names.join(' | ') : null;
       const cardDesc = pkg.description_markdown || pkg.summary || pkg.first_service_description_markdown;
       const plainDesc = cardDesc ? cardDesc.replace(/[#*`\[\]]/g, '').replace(/\n+/g, ' ').trim() : '';
       const descText = plainDesc.length > 120 ? plainDesc.slice(0, 120) + '…' : plainDesc;
+      const hasSpecial = getActivePublicOffers(pkg.offers).length > 0;
       return (
         <GridCardWithImage
           photoAttachments={pkg.photo_attachments}
@@ -693,6 +610,7 @@ export function ServiceMenuSection({
           websitePhotos={websitePhotos}
           companyInformation={companyInformation}
           cycleSeed={`pkg-${pkg.id}-${index}`}
+          hasSpecial={hasSpecial}
         >
           {descText && (
             <p className="font-body text-sm text-tertiary mt-1 line-clamp-2">{descText}</p>
@@ -715,6 +633,7 @@ export function ServiceMenuSection({
         websitePhotos={websitePhotos}
         companyInformation={companyInformation}
         cycleSeed={`service-item-${si.id}-${index}`}
+        hasSpecial={getActivePublicOffers(si.offers).length > 0}
       >
         {formatPriceCents(si.price_cents) && (
           <p className="font-body text-sm font-medium text-fg-primary mt-1">
@@ -760,13 +679,6 @@ export function ServiceMenuSection({
           </div>
         )}
 
-        <MenuBlock
-          rowTitle="Offers"
-          items={offersForMenu}
-          layout={offersLayout}
-          renderItem={renderOfferCard}
-        />
-
         <MenuBlock
           rowTitle="Packages"
           items={packagesForMenu}

package/src/lib/server-api.ts

@@ -4,7 +4,6 @@
  */
 
 import type { CompanyInformation } from '../types/api/company-information';
-import type { PhotoAttachment } from '../types/api/photos';
 import type { Service } from '../types/api/service';
 import type { WebsitePhotos } from '../types/api/website-photos';
 
@@ -150,56 +149,3 @@ export async function getForm(formType: string) {
   return serverFetch<FormDefinition>(`/public/forms/${encodeURIComponent(formType)}`, defaultOptions);
 }
 
-/** Minimal service for offer detail (from GET /public/offers/:id). */
-export interface OfferServiceSummary {
-  id: number;
-  name: string;
-  slug: string;
-  summary?: string | null;
-}
-
-/** Package summary (nested on each offer in list and single-offer responses). */
-export interface OfferPackageSummary {
-  id: number;
-  name: string;
-  slug: string;
-  summary?: string | null;
-  description_markdown?: string | null;
-}
-
-/** Offer from public API. */
-export interface OfferPublic {
-  id: number;
-  name: string;
-  description: string | null;
-  value_terms: string | null;
-  /** Optional; when absent or null, offer has no expiration. */
-  expires_at?: string | null;
-  expired?: boolean;
-  /** Service IDs (used for category_names fallback when not provided by API). */
-  service_ids?: number[];
-  /** Package IDs (included in list response; nested services/packages are the source of truth). */
-  package_ids?: number[];
-  /** Category names from API (services + service_items + packages). */
-  category_names?: string[];
-  /** Photo attachments from related services (same shape as Service.photo_attachments). */
-  photo_attachments?: PhotoAttachment[];
-  /** Present when fetching single offer (GET /public/offers/:id). */
-  services?: OfferServiceSummary[];
-  /** Specific menu items this offer applies to (single offer only). */
-  service_items?: OfferServiceSummary[];
-  /** Packages this offer applies to (single offer only). */
-  packages?: OfferPackageSummary[];
-}
-
-/** List offers for the current account (API key scoped). */
-export async function getOffers(): Promise<OfferPublic[] | null> {
-  const data = await serverFetch<OfferPublic[]>('/public/offers', defaultOptions);
-  return Array.isArray(data) ? data : null;
-}
-
-/** Single offer with services for detail page. */
-export async function getOffer(id: number | string): Promise<OfferPublic | null> {
-  return serverFetch<OfferPublic>(`/public/offers/${id}`, defaultOptions);
-}
-

package/src/next/contexts/form-definitions.tsx

@@ -6,21 +6,24 @@ import type { FormDefinition } from '../../types/api/form';
 export type FormDefinitionsContextValue = {
   leadFormDefinition: FormDefinition | null;
   jobApplicationFormDefinition: FormDefinition | null;
+  marketingListSignupFormDefinition: FormDefinition | null;
 };
 
 const FormDefinitionsContext = createContext<FormDefinitionsContextValue>({
   leadFormDefinition: null,
   jobApplicationFormDefinition: null,
+  marketingListSignupFormDefinition: null,
 });
 
 export function FormDefinitionsProvider(props: {
   leadFormDefinition: FormDefinition | null;
   jobApplicationFormDefinition: FormDefinition | null;
+  marketingListSignupFormDefinition: FormDefinition | null;
   children: React.ReactNode;
 }) {
-  const { leadFormDefinition, jobApplicationFormDefinition, children } = props;
+  const { leadFormDefinition, jobApplicationFormDefinition, marketingListSignupFormDefinition, children } = props;
   return (
-    <FormDefinitionsContext.Provider value={{ leadFormDefinition, jobApplicationFormDefinition }}>
+    <FormDefinitionsContext.Provider value={{ leadFormDefinition, jobApplicationFormDefinition, marketingListSignupFormDefinition }}>
       {children}
     </FormDefinitionsContext.Provider>
   );

package/src/next/layouts/root-layout.tsx

@@ -111,6 +111,7 @@ export async function KeystoneRootLayout(props: {
     teamMembersData,
     leadFormDefinition,
     jobApplicationFormDefinition,
+    marketingListSignupFormDefinition,
     adsConfig,
   ] =
     await Promise.all([
@@ -121,6 +122,7 @@ export async function KeystoneRootLayout(props: {
       getTeamMembers(),
       getForm('lead'),
       getForm('job_application'),
+      getForm('marketing_list_signup'),
       getAdsConfig(),
     ]);
 
@@ -162,6 +164,7 @@ export async function KeystoneRootLayout(props: {
             <FormDefinitionsProvider
               leadFormDefinition={leadFormDefinition ?? null}
               jobApplicationFormDefinition={jobApplicationFormDefinition ?? null}
+              marketingListSignupFormDefinition={marketingListSignupFormDefinition ?? null}
             >
               <HeaderNavigation
                 config={dynamicConfig}

package/src/types/api/form.ts

@@ -28,4 +28,4 @@ export interface FormDefinition {
   updated_at?: string;
 }
 
-export type FormType = 'lead' | 'job_application';
+export type FormType = 'lead' | 'job_application' | 'marketing_list_signup';

package/src/types/api/offer.ts

@@ -0,0 +1,13 @@
+import type { PhotoAttachment } from './photos';
+
+/** Nested under `service_items[].offers` and `packages[].offers` in public API. */
+export interface OfferPublic {
+  id: number;
+  name: string;
+  description: string | null;
+  value_terms: string | null;
+  active: boolean;
+  expires_at?: string | null;
+  expired?: boolean;
+  photo_attachments?: PhotoAttachment[];
+}

package/src/types/api/service.ts

@@ -46,6 +46,8 @@ export interface ServiceItem {
     id: number;
     photo?: { thumbnail_url?: string; medium_url?: string; large_url?: string; original_url?: string; title?: string; alt_text?: string };
   }>;
+  /** Active offers that apply to this menu item (public API). */
+  offers?: import('./offer').OfferPublic[];
 }
 
 export interface ServiceParams {

package/src/types/index.ts

@@ -14,6 +14,7 @@ export * from './api/form';
 export * from './api/faq';
 export * from './api/job-posting';
 export * from './api/location';
+export * from './api/offer';
 export * from './api/photos';
 export * from './api/service';
 export * from './api/social-post';

package/src/design_system/sections/offer-detail.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import React from 'react';
-import { registerThemeVariant } from '../../lib/component-registry';
-import { Button } from '../elements';
-import type { OfferPublic } from '../../lib/server-api';
-
-interface OfferDetailSectionProps {
-  offer?: OfferPublic | null;
-  websitePhotos?: unknown;
-  companyInformation?: unknown;
-}
-
-/** Default/fallback offer detail when no theme variant overrides. */
-export const OfferDetailSection = ({ offer }: OfferDetailSectionProps) => {
-  if (!offer) {
-    return (
-      <div className="text-center py-12">
-        <div className="text-6xl mb-4">🎁</div>
-        <h3 className="text-xl font-semibold text-gray-900 mb-2">Offer Not Found</h3>
-        <p className="text-gray-600 mb-4">The offer you&apos;re looking for doesn&apos;t exist or has expired.</p>
-        <Button href="/offers">View All Offers</Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-3xl px-4 py-12">
-      <h1 className="text-2xl font-semibold text-gray-900 mb-4">{offer.name}</h1>
-      {offer.value_terms && <p className="text-gray-600 mb-2">{offer.value_terms}</p>}
-      {offer.description && <p className="text-gray-600 mb-4">{offer.description}</p>}
-      {offer.expires_at && (() => {
-        const d = new Date(offer.expires_at);
-        if (Number.isNaN(d.getTime())) return null;
-        return (
-          <p className="text-sm text-gray-500 mb-6">
-            Expires {d.toLocaleDateString()}
-          </p>
-        );
-      })()}
-      <Button href="/offers">Back to Offers</Button>
-    </div>
-  );
-};
-
-registerThemeVariant('offer-detail', 'classic', OfferDetailSection);

package/src/design_system/sections/offers-gallery.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import React from 'react';
-import { registerThemeVariant } from '../../lib/component-registry';
-import { OffersGrid } from './offers-grid';
-import type { OfferPublic } from '../../lib/server-api';
-import type { WebsitePhotos } from '../../types/api/website-photos';
-import type { CompanyInformation } from '../../types/api/company-information';
-
-interface OffersGalleryProps {
-  offers?: OfferPublic[] | null;
-  title?: string;
-  subtitle?: string;
-  offersPerPage?: number;
-  className?: string;
-  websitePhotos?: WebsitePhotos | null;
-  companyInformation?: CompanyInformation | null;
-}
-
-/** Default/fallback: use grid layout when no theme variant overrides. */
-export const OffersGallery = ({
-  offers,
-  title = 'Offers',
-  subtitle = 'See our current offers.',
-  websitePhotos,
-  companyInformation,
-  className = '',
-}: OffersGalleryProps) => (
-  <section className={className}>
-    <OffersGrid
-      offers={offers ?? null}
-      title={title}
-      subtitle={subtitle}
-      websitePhotos={websitePhotos}
-      companyInformation={companyInformation}
-    />
-  </section>
-);
-
-registerThemeVariant('offers-gallery', 'classic', OffersGallery);