keystone-design-bootstrap 1.0.3

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

@@ -0,0 +1,38 @@
+"use client";
+
+
+interface FAQHeroProps {
+  config: {
+    pages?: any[];
+  };
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const FAQHero = ({
+  config,
+  pageName = 'FAQ',
+  sectionKey = 'faq_page_section_1_hero',
+}: FAQHeroProps) => {
+  const title = 'Frequently Asked Questions';
+  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-faq', 'aman', FAQHero);

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

@@ -0,0 +1,55 @@
+"use client";
+
+import { SearchLg } from '@untitledui/icons';
+import { Input } from '../elements';
+
+interface FAQHeroProps {
+    // Config data - component extracts all values from it
+    config: {
+        pages?: any[];
+    };
+    // Optional search props
+    searchTerm?: string;
+    onSearchChange?: (value: string) => void;
+}
+
+export const FAQHero = ({
+    config,
+    searchTerm,
+    onSearchChange,
+}: FAQHeroProps) => {
+    // Extract values from config
+    const label = "Support";
+    const headline = "Frequently Asked Questions";
+    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" 
+                                icon={SearchLg} 
+                                wrapperClassName="sm:py-0.5"
+                                value={searchTerm || ''}
+                                onChange={onSearchChange}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+

package/src/design_system/sections/hero-generic-text.aman.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+
+interface GenericTextHeroProps {
+  title?: string;
+  subtitle?: string;
+  config?: {
+    pages?: any[];
+  };
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const GenericTextHero = ({
+  title: titleProp,
+  subtitle: subtitleProp,
+  config,
+  pageName,
+  sectionKey,
+}: GenericTextHeroProps) => {
+  // Try to get from config first, then fall back to props
+  let title = titleProp;
+  let subtitle = subtitleProp;
+  
+  if (config && pageName && sectionKey) {
+    title = titleProp || pageName || '';
+    subtitle = subtitleProp || '';
+  } else if (!title && pageName) {
+    title = pageName;
+  }
+  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-generic-text', 'aman', GenericTextHero);

package/src/design_system/sections/hero-generic-text.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+
+interface GenericTextHeroProps {
+    // Config data - component extracts all values from it
+    config: {
+        pages?: any[];
+    };
+    pageName: string; // e.g., 'Blog', 'FAQ', 'Testimonials'
+    sectionKey: string; // e.g., 'blog_page_section_1_hero'
+}
+
+export const GenericTextHero = ({
+    config,
+    pageName,
+    sectionKey,
+}: GenericTextHeroProps) => {
+    // Extract values from config
+    const label = undefined;
+    const headline = "";
+    const subhead = "";
+    
+    // Don't render if there's no content
+    if (!headline && !subhead && !label) {
+        return null;
+    }
+    
+    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">
+                    {label && (
+                        <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
+                    )}
+                    {headline && (
+                        <h1 className={`${label ? 'mt-3' : ''} text-display-md font-semibold text-primary md:text-display-lg`}>
+                            {headline}
+                        </h1>
+                    )}
+                    {subhead && (
+                        <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-home.aman.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Fragment } from "react";
+import React from "react";
+import { PhotoWithFallback } from '../elements';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+
+interface HeroHomeProps {
+    config?: any;
+    websitePhotos?: WebsitePhotos | null;
+    headline?: string;
+    subhead?: string;
+    ctaText?: string;
+    ctaHref?: string;
+    reviews?: { rating: number; count: number };
+    onEmailSubmit?: (email: string) => void;
+}
+
+export const HeroHome = ({
+    config,
+    websitePhotos,
+    headline,
+    subhead,
+    ctaText,
+    ctaHref = "/contact",
+}: HeroHomeProps) => {
+    // Get section config for the hero
+    const homePageConfig = config?.pages?.find((p: any) => 
+        p.library_reference_name === 'Home' || p.slug === 'home'
+    );
+    const heroSection = homePageConfig?.sections?.home_page_section_1_hero;
+    
+    // Use config values, then props, then defaults
+    const displayHeadline = headline || heroSection?.headline || '*TR* Your Slogan Here';
+    const displaySubhead = subhead || heroSection?.subhead || '*TR* A brief description of your business and what makes you special';
+    const displayCtaText = ctaText || heroSection?.cta_text || 'Discover more';
+    
+    const heroImage = {
+        url: websitePhotos?.hero?.url || (websitePhotos as any)?.brand?.url || '',
+        alt: websitePhotos?.hero?.alt || (websitePhotos as any)?.brand?.alt || 'Hero image',
+    };
+
+    return (
+        <Fragment>
+            <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">
+                        {displayHeadline}
+                    </h1>
+                    
+                    <p className="mt-6 font-body text-lg leading-relaxed text-tertiary md:text-xl max-w-3xl mx-auto">
+                        {displaySubhead}
+                    </p>
+
+                    {displayCtaText && (
+                        <a
+                            href={ctaHref}
+                            className="mt-8 inline-block font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
+                            style={{ color: 'var(--color-text-brand-accent)' }}
+                        >
+                            {displayCtaText}
+                        </a>
+                    )}
+                </div>
+            </section>
+
+            <section>
+                <div className="mx-auto max-w-container px-4 md:px-8">
+                    <div className="w-full h-[400px] md:h-[500px] lg:h-[600px]">
+                        <PhotoWithFallback
+                            photoUrl={heroImage.url}
+                            photoAlt={heroImage.alt}
+                            fallbackId="hero-home-brand"
+                            className="w-full h-full object-cover"
+                        />
+                    </div>
+                </div>
+            </section>
+        </Fragment>
+    );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('hero-home', 'aman', HeroHome);

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

@@ -0,0 +1,246 @@
+"use client";
+
+import { Fragment, useMemo } from "react";
+import React from "react";
+import { Button, Form, Input, PhotoWithFallback } from '../elements';
+import { cx } from '../../utils/cx';
+import { mapIcon } from '../utils/icon-mapping';
+import type { FC } from "react";
+import type { WebsitePhotos } from '../../types/api/website-photos';
+
+
+interface HeroHomeProps {
+    config: {
+        pages?: any[];
+    };
+    websitePhotos?: WebsitePhotos | null;
+    reviews?: {
+        rating?: number;
+        count?: number;
+    };
+    onEmailSubmit?: (email: string) => void;
+}
+
+const AvatarsWithReview = ({ 
+    rating = 5.0, 
+    count = 200, 
+    stockPhotos = [],
+    className 
+}: { 
+    rating?: number; 
+    count?: number;
+    stockPhotos?: any[];
+    className?: string;
+}) => {
+    // Get up to 5 stock photos for avatars, cycling if needed
+    const avatarPhotos = useMemo(() => {
+        if (stockPhotos.length === 0) {
+            return Array(5).fill(null).map((_, i) => ({
+                url: undefined,
+                alt: `Avatar ${i + 1}`,
+                fallbackId: `avatar-${i + 1}`
+            }));
+        }
+        
+        return Array(5).fill(null).map((_, i) => {
+            const photo = stockPhotos[i % stockPhotos.length];
+            return {
+                url: photo?.url || photo?.thumbnail_url,
+                alt: photo?.alt || `Avatar ${i + 1}`,
+                fallbackId: photo?.id || `avatar-${i + 1}`
+            };
+        });
+    }, [stockPhotos]);
+    
+    return (
+        <div className={cx("flex items-center gap-4", className)}>
+            <div className="inline-flex -space-x-3 overflow-hidden">
+                {avatarPhotos.map((avatar, index) => (
+                    <div
+                        key={index}
+                        className="inline-block size-10 rounded-full ring-[1.5px] ring-bg-primary outline-1 -outline-offset-1 outline-avatar-contrast-border overflow-hidden"
+                    >
+                        <PhotoWithFallback
+                            photoUrl={avatar.url}
+                            photoAlt={avatar.alt}
+                            fallbackId={avatar.fallbackId}
+                            className="size-full object-cover"
+                        />
+                    </div>
+                ))}
+            </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 HeroHome = ({
+    config,
+    websitePhotos,
+    reviews,
+    onEmailSubmit,
+}: HeroHomeProps) => {
+    // Extract values from config
+    const headline = '';
+    const subhead = '';
+    const email_signup = undefined ? {
+        placeholder: heroSection.email_signup.placeholder || "Enter your email",
+        button_text: heroSection.email_signup.button_text || "Get started",
+        privacy_policy_link: heroSection.email_signup.privacy_policy_link || "#",
+    } : undefined;
+    const statistics = (undefined || []).map((stat: any) => ({
+        number: stat.number,
+        label: stat.label,
+        icon: stat.icon,
+        color: stat.color,
+    }));
+    
+    // Get hero image from props
+    const heroImage = {
+        url: websitePhotos?.hero?.url || '',
+        alt: websitePhotos?.hero?.alt || 'Hero image',
+    };
+    
+    const stockPhotos = websitePhotos?.stock_photos || [];
+    
+    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 || 'Welcome'}
+                        </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);
+                                    }
+                                }}
+                                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}
+                                    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}
+                                </Button>
+                            </Form>
+                        )}
+
+                        <AvatarsWithReview 
+                            rating={reviews?.rating}
+                            count={reviews?.count}
+                            stockPhotos={stockPhotos}
+                            className="mt-8 md:mt-12"
+                        />
+
+                        {(() => {
+                            const statsToShow = statistics && statistics.length > 0 ? statistics.slice(0, 4) : [];
+                            
+                            return statsToShow.length > 0 && (
+                                <dl className="mt-8 grid grid-cols-2 gap-x-6 gap-y-4 md:mt-12">
+                                    {statsToShow.map((stat: { number: string; label: string; icon?: string | FC<{ className?: string }> | React.ReactNode; color?: string }, index: number) => {
+                                        const IconComponent = mapIcon(stat.icon);
+                                        
+                                        return (
+                                            <div key={index} className="flex flex-col gap-2">
+                                                <div className="flex items-center gap-2">
+                                                    {IconComponent && (
+                                                        <div className="size-5 shrink-0">
+                                                            <IconComponent className="w-full h-full" />
+                                                        </div>
+                                                    )}
+                                                    <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>
+
+                    <div className="relative lg:h-full lg:min-h-160">
+                        <PhotoWithFallback
+                            photoUrl={heroImage.url}
+                            photoAlt={heroImage.alt}
+                            fallbackId="hero-home-image"
+                            className="inset-0 h-70 w-full object-cover md:h-110 lg:absolute lg:h-full"
+                        />
+                    </div>
+                </div>
+            </section>
+        </Fragment>
+    );
+};

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

@@ -0,0 +1,33 @@
+"use client";
+
+interface LocationDetailHeroProps {
+  location?: any;
+  config?: {
+    pages?: any[];
+  };
+}
+
+export const LocationDetailHero = ({
+  location,
+}: LocationDetailHeroProps) => {
+  if (!location) return null;
+
+  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">
+          {location.name}
+        </h1>
+        
+        {location.city && location.state && (
+          <p className="mt-6 text-xs font-body uppercase tracking-widest" style={{ color: 'var(--color-text-brand-secondary)' }}>
+            {location.city}, {location.state}
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('hero-location-detail', 'aman', LocationDetailHero);

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { ChevronLeft } from "@untitledui/icons";
+import { Button } from '../elements';
+import type { Location } from '../../types/api/location';
+
+interface LocationDetailHeroProps {
+    config: {
+        pages?: any[];
+    };
+    location?: Location | null;
+}
+
+export const LocationDetailHero = ({
+    config,
+    location,
+}: LocationDetailHeroProps) => {
+    if (!location) return null;
+
+    const breadcrumb = {
+        backHref: "/locations",
+        backLabel: "Locations",
+        currentLabel: location.name || "Location",
+    };
+    
+    const headline = location.name || "Location";
+    const subhead = location.description_markdown?.replace(/[#*\[\]()]/g, '').trim() || "";
+    const ctaText = "Contact Us";
+    const ctaHref = "/contact";
+    
+    return (
+        <section className="bg-primary py-4 md:py-6">
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                {breadcrumb && (
+                    <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 className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
+                    <h1 className="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 className="mt-8">
+                        <Button size="xl" href={ctaHref}>
+                            {ctaText}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};