keystone-design-bootstrap 1.0.3

package/src/design_system/sections/hero-service-detail.aman.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Breadcrumb } from '../elements';
+import type { Service } from '../../types/api/service';
+
+interface HeroServiceDetailProps {
+  title?: string;
+  description?: string;
+  backgroundImage?: string;
+  breadcrumbs?: Array<{ label: string; href: string }>;
+  config?: {
+    pages?: any[];
+  };
+  service?: Service | null;
+}
+
+export const ServiceDetailHero = ({
+  title: titleProp,
+  description: descriptionProp,
+  breadcrumbs = [],
+  config,
+  service,
+}: HeroServiceDetailProps) => {
+  const title = service?.name || titleProp || '';
+  const description = service?.summary || descriptionProp || '';
+  
+  return (
+    <section className="relative">
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        {breadcrumbs && breadcrumbs.length > 0 && (
+          <div className="mb-8">
+            <Breadcrumb items={breadcrumbs} />
+          </div>
+        )}
+        
+        <div className="text-center max-w-4xl mx-auto">
+          <h1 className="font-display text-5xl font-normal leading-tight text-fg-primary md:text-6xl">
+            {title}
+          </h1>
+          
+          {description && (
+            <p className="mt-6 font-display text-lg leading-relaxed text-tertiary md:text-xl">
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('hero-service-detail', 'aman', ServiceDetailHero);

package/src/design_system/sections/hero-service-detail.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { ChevronLeft } from "@untitledui/icons";
+import { Button } from '../elements';
+import type { Service } from '../../types/api/service';
+
+interface ServiceDetailHeroProps {
+    config: {
+        pages?: any[];
+    };
+    service?: Service | null;
+}
+
+export const ServiceDetailHero = ({
+    config,
+    service,
+}: ServiceDetailHeroProps) => {
+    if (!service) return null;
+
+    // Build breadcrumb from service data
+    const breadcrumb = {
+        backHref: "/services",
+        backLabel: "Services",
+        currentLabel: service.name || "Service",
+    };
+
+    return (
+        <section className="bg-primary py-4 md:py-6">
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                {/* Breadcrumb - top left aligned */}
+                <div className="mb-8">
+                    <nav aria-label="Breadcrumb">
+                        <div className="flex items-center gap-2">
+                            <Button 
+                                color="link-gray" 
+                                size="md" 
+                                href={breadcrumb.backHref}
+                                iconLeading={ChevronLeft}
+                                className="text-tertiary hover:text-primary"
+                            >
+                                {breadcrumb.backLabel}
+                            </Button>
+                            <span className="text-tertiary">/</span>
+                            <span className="text-primary font-medium">{breadcrumb.currentLabel}</span>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </section>
+    );
+};

package/src/design_system/sections/hero-social-media.aman.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+
+interface SocialMediaHeroProps {
+  config: {
+    pages?: any[];
+  };
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const SocialMediaHero = ({
+  config,
+  pageName = 'SocialMedia',
+  sectionKey = 'social_media_page_section_1_hero',
+}: SocialMediaHeroProps) => {
+  // Get the page to extract nav_title
+  const page = config?.pages?.find((p: any) => p.library_reference_name === pageName);
+  const navTitle = page?.nav_title || 'Social Media';
+  
+  const title = navTitle;
+  const subtitle = '';
+  
+  return (
+    <section className="py-24 md:py-32">
+      <div className="mx-auto max-w-4xl px-4 text-center md:px-8">
+        <h1 className="font-display text-5xl font-normal leading-tight text-fg-primary md:text-6xl lg:text-7xl">
+          {title}
+        </h1>
+        
+        {subtitle && (
+          <p className="mt-6 font-display text-lg leading-relaxed text-tertiary md:text-xl max-w-3xl mx-auto">
+            {subtitle}
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('hero-social-media', 'aman', SocialMediaHero);

package/src/design_system/sections/hero-social-media.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+
+interface SocialMediaHeroProps {
+    // Config data - component extracts all values from it
+    config: {
+        pages?: any[];
+    };
+}
+
+export const SocialMediaHero = ({
+    config,
+}: SocialMediaHeroProps) => {
+    // Extract values from config
+    const label = "Social Media";
+    const headline = "Follow Us";
+    const subhead = "";
+    return (
+        <section className="bg-primary py-16 md:py-24">
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                <div className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
+                    <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
+                    <h1 className="mt-3 text-display-md font-semibold text-primary md:text-display-lg">
+                        {headline}
+                    </h1>
+                    <p className="mt-4 text-lg text-tertiary md:mt-6 md:text-xl">
+                        {subhead}
+                    </p>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+

package/src/design_system/sections/hero-testimonials.aman.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+
+interface TestimonialsHeroProps {
+  config: {
+    pages?: any[];
+  };
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const TestimonialsHero = ({
+  config,
+  pageName = 'Testimonials',
+  sectionKey = 'testimonials_page_section_1_hero',
+}: TestimonialsHeroProps) => {
+  const title = 'Client Testimonials';
+  const subtitle = '';
+
+  return (
+    <section className="py-24 md:py-32">
+      <div className="mx-auto max-w-4xl px-4 text-center md:px-8">
+        <h1 className="font-display text-5xl font-normal leading-tight text-fg-primary md:text-6xl lg:text-7xl">
+          {title}
+        </h1>
+        
+        {subtitle && (
+          <p className="mt-6 font-display text-lg leading-relaxed text-tertiary md:text-xl max-w-3xl mx-auto">
+            {subtitle}
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('hero-testimonials', 'aman', TestimonialsHero);

package/src/design_system/sections/hero-testimonials.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { SearchLg } from '@untitledui/icons';
+import { Input } from '../elements';
+
+interface TestimonialsHeroProps {
+    // Config data - component extracts all values from it
+    config: {
+        pages?: any[];
+    };
+    // Optional search props
+    searchTerm?: string;
+    onSearchChange?: (value: string) => void;
+}
+
+export const TestimonialsHero = ({
+    config,
+    searchTerm,
+    onSearchChange,
+}: TestimonialsHeroProps) => {
+    // Extract values from config
+    const label = "Testimonials";
+    const headline = "What our customers say";
+    const subhead = "";
+    return (
+        <section className="bg-primary py-16 md:py-24">
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                <div className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
+                    <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
+                    <h1 className="mt-3 text-display-md font-semibold text-primary md:text-display-lg">
+                        {headline}
+                    </h1>
+                    <p className="mt-4 text-lg text-tertiary md:mt-6 md:text-xl">
+                        {subhead}
+                    </p>
+                    {onSearchChange && (
+                        <div className="mt-8 w-full sm:mt-12 sm:w-80">
+                            <Input 
+                                size="md" 
+                                type="search" 
+                                placeholder="Search testimonials" 
+                                icon={SearchLg} 
+                                wrapperClassName="sm:py-0.5"
+                                value={searchTerm || ''}
+                                onChange={onSearchChange}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+

package/src/design_system/sections/home-hero-component.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { Fragment } from "react";
+import { Button, Form, Input } from '../elements';
+import { cx } from '../../utils/cx';
+import IconComponent from '../elements/IconComponent';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+
+interface HomeHeroComponentProps {
+    headline: string;
+    subhead: string;
+    email_signup?: {
+        placeholder?: string;
+        button_text?: string;
+        privacy_policy_link?: string;
+    };
+    reviews?: {
+        rating?: number;
+        count?: number;
+        avatars?: Array<{
+            url: string;
+            alt: string;
+        }>;
+    };
+    statistics?: Array<{
+        number: string;
+        label: string;
+        icon: string;
+        color: string;
+    }>;
+    onEmailSubmit?: (email: string) => void;
+    websitePhotos?: WebsitePhotos | null;
+}
+
+const AvatarsWithReview = ({ 
+    rating = 5.0, 
+    count = 200, 
+    avatars = [
+        { url: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80", alt: "Olivia Rhye" },
+        { url: "https://www.untitledui.com/images/avatars/phoenix-baker?fm=webp&q=80", alt: "Phoenix Baker" },
+        { url: "https://www.untitledui.com/images/avatars/lana-steiner?fm=webp&q=80", alt: "Lana Steiner" },
+        { url: "https://www.untitledui.com/images/avatars/demi-wilkinson?fm=webp&q=80", alt: "Demi Wilkinson" },
+        { url: "https://www.untitledui.com/images/avatars/candice-wu?fm=webp&q=80", alt: "Candice Wu" },
+    ],
+    className 
+}: { 
+    rating?: number; 
+    count?: number; 
+    avatars?: Array<{ url: string; alt: string }>;
+    className?: string;
+}) => {
+    return (
+        <div className={cx("flex items-center gap-4", className)}>
+            <div className="inline-flex -space-x-3 overflow-hidden">
+                {avatars.map((avatar, index) => (
+                    <img
+                        key={index}
+                        className="inline-block size-10 rounded-full ring-[1.5px] ring-bg-primary outline-1 -outline-offset-1 outline-avatar-contrast-border"
+                        src={avatar.url}
+                        alt={avatar.alt}
+                    />
+                ))}
+            </div>
+            <div className="flex flex-col gap-0.5">
+                <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1">
+                        {Array(5)
+                            .fill(null)
+                            .map((_, index) => {
+                                const clipId0 = `clip0_star_${index}`;
+                                const clipId1 = `clip1_star_${index}`;
+                                return (
+                                    <svg
+                                        key={index}
+                                        width={20}
+                                        height={20}
+                                        viewBox="0 0 20 20"
+                                        fill="none"
+                                        className="relative size-5 shrink-0 grow-0"
+                                        preserveAspectRatio="none"
+                                    >
+                                        <g clipPath={`url(#${clipId0})`}>
+                                            <path
+                                                d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
+                                                className="fill-bg-tertiary"
+                                            />
+                                            <g clipPath={`url(#${clipId1})`}>
+                                                <path
+                                                    d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
+                                                    className="fill-warning-300"
+                                                />
+                                            </g>
+                                        </g>
+                                        <defs>
+                                            <clipPath id={clipId0}>
+                                                <rect width={20} height={20} fill="white" />
+                                            </clipPath>
+                                            <clipPath id={clipId1}>
+                                                <rect width={20} height={20} fill="white" />
+                                            </clipPath>
+                                        </defs>
+                                    </svg>
+                                );
+                            })}
+                    </div>
+                </div>
+                <p className="text-md font-medium text-tertiary">from {count}+ reviews</p>
+            </div>
+        </div>
+    );
+};
+
+export const HomeHeroComponent = ({
+    headline,
+    subhead,
+    email_signup,
+    reviews,
+    statistics,
+    onEmailSubmit,
+    websitePhotos,
+}: HomeHeroComponentProps) => {
+    // Get hero image from website photos prop
+    const heroImage = websitePhotos?.hero ? {
+        url: websitePhotos.hero.url,
+        alt: websitePhotos.hero.alt
+    } : null;
+    
+    return (
+        <Fragment>
+            <section className="bg-primary py-16 md:pb-24">
+                <div className="mx-auto grid max-w-container grid-cols-1 items-center gap-16 px-4 md:px-8 lg:grid-cols-2 lg:gap-8">
+                    <div className="flex max-w-3xl flex-col items-start lg:pr-8">
+                        <h1 className="text-display-md font-semibold text-primary md:text-display-lg lg:text-display-xl">
+                            {headline}
+                        </h1>
+                        <p className="mt-4 max-w-lg text-lg text-balance text-tertiary md:mt-6 md:text-xl">
+                            {subhead}
+                        </p>
+
+                        {email_signup && (
+                            <Form
+                                onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                                    e.preventDefault();
+                                    const formData = new FormData(e.currentTarget);
+                                    const email = formData.get("email") as string;
+                                    if (onEmailSubmit) {
+                                        onEmailSubmit(email);
+                                    } else {
+                                        console.log("Email signup:", email);
+                                    }
+                                }}
+                                className="mt-8 flex w-full flex-col items-stretch gap-4 md:mt-12 md:max-w-120 md:flex-row md:items-start"
+                            >
+                                <Input
+                                    isRequired
+                                    size="md"
+                                    name="email"
+                                    type="email"
+                                    placeholder={email_signup.placeholder || "Enter your email"}
+                                    wrapperClassName="py-0.5"
+                                    hint={
+                                        <span>
+                                            We care about your data in our{" "}
+                                            <a
+                                                href={email_signup.privacy_policy_link || "#"}
+                                                className="rounded-xs underline underline-offset-3 outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                                            >
+                                                privacy policy
+                                            </a>
+                                            .
+                                        </span>
+                                    }
+                                />
+                                <Button type="submit" color="primary" size="xl">
+                                    {email_signup.button_text || "Get started"}
+                                </Button>
+                            </Form>
+                        )}
+
+                        <AvatarsWithReview 
+                            rating={reviews?.rating}
+                            count={reviews?.count}
+                            avatars={reviews?.avatars}
+                            className="mt-8 md:mt-12"
+                        />
+
+                        {/* Statistics in 2x2 grid */}
+                        {statistics && statistics.length > 0 && (
+                            <dl className="mt-8 grid grid-cols-2 gap-x-6 gap-y-4 md:mt-12">
+                                {statistics.slice(0, 4).map((stat, index) => {
+                                    const IconWrapper = ({ className }: { className?: string }) => (
+                                        <div className={className}>
+                                            <IconComponent 
+                                                icon={stat.icon} 
+                                                color={stat.color || 'blue'}
+                                                className="w-full h-full"
+                                            />
+                                        </div>
+                                    );
+                                    
+                                    return (
+                                        <div key={index} className="flex flex-col gap-2">
+                                            <div className="flex items-center gap-2">
+                                                <IconWrapper className="size-5 shrink-0" />
+                                                <dd className="text-lg font-semibold text-primary md:text-xl">{stat.number}</dd>
+                                            </div>
+                                            <dt className="text-sm font-medium text-tertiary md:text-md">{stat.label}</dt>
+                                        </div>
+                                    );
+                                })}
+                            </dl>
+                        )}
+                    </div>
+
+                    {heroImage && heroImage.url && (
+                        <div className="relative lg:h-full lg:min-h-160">
+                            <img
+                                className="inset-0 h-70 w-full object-cover md:h-110 lg:absolute lg:h-full"
+                                src={heroImage.url}
+                                alt={heroImage.alt}
+                            />
+                        </div>
+                    )}
+                </div>
+            </section>
+        </Fragment>
+    );
+};

package/src/design_system/sections/index.tsx

@@ -0,0 +1,131 @@
+/**
+ * Centralized Section Exports
+ * All sections export from here with theme variant support
+ * Includes all 34 section components (excluding index.tsx and .modern variants)
+ */
+
+'use client';
+
+import React from 'react';
+import { getThemedComponent } from '../../lib/component-registry';
+import { useTheme } from '../../contexts/ThemeContext';
+
+// Import base components (these are the defaults/classic theme)
+import { HeroHome as BaseHeroHome } from './hero-home';
+import { ServicesHome as BaseServicesHome } from './services-home';
+import { AboutHome as BaseAboutHome } from './about-home';
+import { TestimonialsHome as BaseTestimonialsHome } from './testimonials-home';
+import { FAQHome as BaseFAQHome } from './faq-home';
+import { BlogSection as BaseBlogSection } from './blog-section';
+import ContactSectionBase from './contact-section';
+import { FooterHome as BaseFooterHome } from './footer-home';
+import { HeaderNavigation as BaseHeaderNavigation } from './header-navigation';
+import { GenericHeaderComponent as BaseGenericHeaderComponent } from './generic-header-component';
+import { StatisticsSection as BaseStatisticsSection } from './statistics-section';
+import { ValuesSection as BaseValuesSection } from './values-section';
+import { TeamGrid as BaseTeamGrid } from './team-grid';
+import { LocationGrid as BaseLocationGrid } from './location-grid';
+import { LocationDetailsSection as BaseLocationDetailsSection } from './location-details-section';
+import { ServicesGrid as BaseServicesGrid } from './services-grid';
+import { SocialMediaGrid as BaseSocialMediaGrid } from './social-media-grid';
+import { JobGallery as BaseJobGallery } from './job-gallery';
+import { BlogHome as BaseBlogHome } from './blog-home';
+import { BlogGallery as BaseBlogGallery } from './blog-gallery';
+import { BlogPostSection as BaseBlogPostSection } from './blog-post';
+import { ContactHome as BaseContactHome } from './contact-home';
+import { FAQGrid as BaseFAQGrid } from './faq-grid';
+import { FAQHero as BaseFAQHero } from './hero-faq';
+import { GenericTextHero as BaseGenericTextHero } from './hero-generic-text';
+import { LocationDetailHero as BaseLocationDetailHero } from './hero-location-detail';
+import { ServiceDetailHero as BaseServiceDetailHero } from './hero-service-detail';
+import { SocialMediaHero as BaseSocialMediaHero } from './hero-social-media';
+import { TestimonialsHero as BaseTestimonialsHero } from './hero-testimonials';
+import { HomeHeroComponent as BaseHomeHeroComponent } from './home-hero-component';
+
+// Import variant files to trigger their registration
+import './hero-home.aman';
+import './header-navigation.aman';
+import './about-home.aman';
+import './services-home.aman';
+import './services-grid.aman';
+import './testimonials-home.aman';
+import './contact-section.aman';
+import './team-grid.aman';
+import './footer-home.aman';
+import './hero-service-detail.aman';
+import './values-section.aman';
+import './statistics-section.aman';
+import './location-grid.aman';
+import './location-details-section.aman';
+import './social-media-grid.aman';
+import './blog-home.aman';
+import './blog-gallery.aman';
+import './blog-post.aman';
+import './blog-section.aman';
+import './faq-home.aman';
+import './faq-grid.aman';
+import './hero-faq.aman';
+import './hero-generic-text.aman';
+import './hero-location-detail.aman';
+import './hero-social-media.aman';
+import './hero-testimonials.aman';
+import './job-gallery.aman';
+
+/**
+ * Create a themed component wrapper that checks for variants
+ * Falls back to base component if no variant exists
+ */
+function createThemedExport(componentName: string, BaseComponent: React.ComponentType<any>) {
+  return function ThemedComponent(props: any) {
+    const { theme } = useTheme();
+    
+    try {
+      // Try to get themed variant from registry
+      const Component = getThemedComponent(componentName, theme);
+      return React.createElement(Component, props);
+    } catch {
+      // No variant registered, use base component
+      return React.createElement(BaseComponent, props);
+    }
+  };
+}
+
+// All components wrapped with themed export (falls back to base if no variant)
+export const HeroHome = createThemedExport('hero-home', BaseHeroHome);
+export const ServicesHome = createThemedExport('services-home', BaseServicesHome);
+export const AboutHome = createThemedExport('about-home', BaseAboutHome);
+export const TestimonialsHome = createThemedExport('testimonials-home', BaseTestimonialsHome);
+export const FAQHome = createThemedExport('faq-home', BaseFAQHome);
+export const BlogSection = createThemedExport('blog-section', BaseBlogSection);
+export const ContactSection = createThemedExport('contact-section', ContactSectionBase);
+export const FooterHome = createThemedExport('footer-home', BaseFooterHome);
+export const HeaderNavigation = createThemedExport('header-navigation', BaseHeaderNavigation);
+export const GenericHeaderComponent = createThemedExport('generic-header-component', BaseGenericHeaderComponent);
+export const StatisticsSection = createThemedExport('statistics-section', BaseStatisticsSection);
+export const ValuesSection = createThemedExport('values-section', BaseValuesSection);
+export const TeamGrid = createThemedExport('team-grid', BaseTeamGrid);
+export const LocationGrid = createThemedExport('location-grid', BaseLocationGrid);
+export const LocationDetailsSection = createThemedExport('location-details-section', BaseLocationDetailsSection);
+export const ServicesGrid = createThemedExport('services-grid', BaseServicesGrid);
+export const SocialMediaGrid = createThemedExport('social-media-grid', BaseSocialMediaGrid);
+export const JobGallery = createThemedExport('job-gallery', BaseJobGallery);
+export const BlogHome = createThemedExport('blog-home', BaseBlogHome);
+export const BlogGallery = createThemedExport('blog-gallery', BaseBlogGallery);
+export const BlogPostSection = createThemedExport('blog-post', BaseBlogPostSection);
+export const ContactHome = createThemedExport('contact-home', BaseContactHome);
+export const FAQGrid = createThemedExport('faq-grid', BaseFAQGrid);
+export const FAQHero = createThemedExport('hero-faq', BaseFAQHero);
+
+// Re-export component variants (these files contain multiple variants, not a single component)
+export * from './blog-cards';
+export * from './feature-tab';
+export * from './feature-text';
+export const GenericTextHero = createThemedExport('hero-generic-text', BaseGenericTextHero);
+export const LocationDetailHero = createThemedExport('hero-location-detail', BaseLocationDetailHero);
+export const ServiceDetailHero = createThemedExport('hero-service-detail', BaseServiceDetailHero);
+export const SocialMediaHero = createThemedExport('hero-social-media', BaseSocialMediaHero);
+export const TestimonialsHero = createThemedExport('hero-testimonials', BaseTestimonialsHero);
+export const HomeHeroComponent = createThemedExport('home-hero-component', BaseHomeHeroComponent);
+
+// Re-export types
+export type { Theme } from '../../themes';