keystone-design-bootstrap 1.0.3

package/src/design_system/sections/location-grid.aman.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { PhotoWithFallback } from '../elements';
+import type { Location } from '../../types/api/location';
+
+interface LocationGridProps {
+  config: {
+    pages?: any[];
+  };
+  locations?: Location[] | null;
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const LocationGrid = ({
+  config,
+  locations: locationsData,
+  pageName = 'Locations',
+  sectionKey = 'locations_page_section_2_locations',
+}: LocationGridProps) => {
+  const locations = Array.isArray(locationsData) ? locationsData : [];
+  const title = 'Our Locations';
+
+  return (
+    <section>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        <div className="mb-12 text-center">
+          <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+            {title}
+          </h2>
+        </div>
+
+        {locations.length > 0 ? (
+          <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+            {locations.map((location: any) => (
+              <div key={location.id} className="flex flex-col">
+                <div className="w-full h-64 mb-6 overflow-hidden">
+                  <PhotoWithFallback
+                    item={location}
+                    fallbackId={location.id}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                
+                <h3 className="font-display text-2xl font-normal text-fg-primary mb-2">
+                  {location.name}
+                </h3>
+                
+                {location.city && location.state && (
+                  <p className="font-body text-base text-tertiary mb-4">
+                    {location.city}, {location.state}
+                  </p>
+                )}
+                
+                <a
+                  href={`/locations/${location.slug}`}
+                  className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
+                  style={{ color: 'var(--color-text-brand-accent)' }}
+                >
+                  Discover more
+                </a>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="font-body text-base text-tertiary">No locations available</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('location-grid', 'aman', LocationGrid);

package/src/design_system/sections/location-grid.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import React from 'react';
+import { ArrowRight } from '@untitledui/icons';
+import { Button } from '../elements';
+import type { Location } from '../../types/api/location';
+
+// Helper to get locations page section from config
+const getLocationsPageSection = (config: { pages?: any[] }, sectionKey: string) => {
+    if (!config?.pages) return null;
+    const locationsPage = config.pages.find((p: any) => p.library_reference_name === 'Locations');
+    return (locationsPage?.sections as any)?.[sectionKey];
+};
+
+interface LocationGridProps {
+    config: {
+        pages?: any[];
+    };
+    locations?: Location[] | null;
+}
+
+// Simple icon components
+const LocationIcon = ({ className }: { className?: string }) => (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+);
+
+const PhoneIcon = ({ className }: { className?: string }) => (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+    </svg>
+);
+
+export const LocationGrid = ({
+    config,
+    locations: locationsData,
+}: LocationGridProps) => {
+    const locations = Array.isArray(locationsData) ? locationsData : [];
+    
+    const title = "Our Locations";
+    const subtitle = "Browse our service locations below. Click any location to learn more.";
+    const backgroundColor = "bg-primary";
+    const className = "";
+    
+    return (
+        <section className={`${backgroundColor} py-16 md:py-24 ${className}`}>
+            <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                {(title || subtitle) && (
+                    <div className="mx-auto mb-12 flex w-full max-w-3xl flex-col items-center text-center">
+                        {title && (
+                            <h2 className="text-display-sm font-semibold text-primary md:text-display-md">
+                                {title}
+                            </h2>
+                        )}
+                        {subtitle && (
+                            <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
+                                {subtitle}
+                            </p>
+                        )}
+                    </div>
+                )}
+
+                {locations.length > 0 ? (
+                    <ul className="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 md:gap-y-12 lg:grid-cols-3">
+                        {locations.map((location, index) => {
+                            const fullAddress = `${location.address_line_1}${location.address_line_2 ? `, ${location.address_line_2}` : ''}, ${location.city}, ${location.state} ${location.zip_code}`.trim();
+                            
+                            return (
+                                <li key={location.id || index} className="flex flex-col gap-6 rounded-2xl bg-secondary p-6 ring-1 ring-secondary_alt md:p-8">
+                                    <div className="flex flex-col gap-4">
+                                        <h3 className="text-lg font-semibold text-primary md:text-xl">{location.name}</h3>
+                                        
+                                        {fullAddress && (
+                                            <div className="flex items-start gap-3">
+                                                <div className="size-5 shrink-0 mt-0.5 text-fg-quaternary">
+                                                    <LocationIcon className="w-full h-full" />
+                                                </div>
+                                                <span className="text-md text-tertiary">{fullAddress}</span>
+                                            </div>
+                                        )}
+                                        
+                                        {location.phone && (
+                                            <div className="flex items-center gap-3">
+                                                <div className="size-5 shrink-0 text-fg-quaternary">
+                                                    <PhoneIcon className="w-full h-full" />
+                                                </div>
+                                                <a 
+                                                    href={`tel:${location.phone}`}
+                                                    className="text-md text-tertiary hover:text-primary transition-colors"
+                                                >
+                                                    {location.phone}
+                                                </a>
+                                            </div>
+                                        )}
+                                    </div>
+
+                                    <div className="flex flex-col gap-3 mt-auto">
+                                        <Button
+                                            size="lg"
+                                            href={`/locations/${location.slug}`}
+                                            iconTrailing={ArrowRight}
+                                        >
+                                            View details
+                                        </Button>
+                                    </div>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                ) : (
+                    <div className="text-center py-12">
+                        <div className="text-gray-400 text-6xl mb-4">📍</div>
+                        <h3 className="text-xl font-semibold text-primary mb-2">No Locations Available</h3>
+                        <p className="text-gray-600 mb-4">We're working on adding our service locations.</p>
+                        <Button href="/contact">Contact Us</Button>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};

package/src/design_system/sections/services-grid.aman.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { PhotoWithFallback } from '../elements';
+import type { Service } from '../../types/api/service';
+
+interface ServicesGridProps {
+  config: {
+    pages?: any[];
+  };
+  services?: Service[] | null;
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const ServicesGrid = ({
+  config,
+  services: servicesData,
+  pageName = 'Services',
+  sectionKey = 'services_page_section_2_services',
+}: ServicesGridProps) => {
+  const services = Array.isArray(servicesData) ? servicesData : [];
+  const title = 'Our Services';
+
+  return (
+    <section>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        <div className="mb-12 text-center">
+          <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+            {title}
+          </h2>
+        </div>
+
+        {services.length > 0 ? (
+          <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+            {services.map((service: Service) => {
+              const description = service.summary || 
+                (service.description_markdown ? service.description_markdown.replace(/[#*\[\]()]/g, '').trim().substring(0, 150) : '');
+              
+              return (
+                <div key={service.id} className="flex flex-col">
+                  <div className="w-full h-64 mb-6 overflow-hidden">
+                    <PhotoWithFallback
+                      item={service}
+                      fallbackId={service.id}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  
+                  <p className="text-xs font-body font-normal uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                    SERVICE
+                  </p>
+                  
+                  <h3 className="font-display text-2xl font-normal text-fg-primary mb-4">
+                    {service.name}
+                  </h3>
+                  
+                  {description && (
+                    <p className="font-body text-base leading-relaxed text-tertiary mb-6 flex-grow">
+                      {description}
+                    </p>
+                  )}
+                  
+                  <a
+                    href={`/services/${service.slug}`}
+                    className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
+                    style={{ color: 'var(--color-text-brand-accent)' }}
+                  >
+                    Discover more
+                  </a>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="font-body text-base text-tertiary">No services available</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('services-grid', 'aman', ServicesGrid);

package/src/design_system/sections/services-grid.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React from 'react';
+import { ArrowRight } from '@untitledui/icons';
+import { Button } from '../elements';
+import { PhotoWithFallback } from '../elements';
+import type { Service } from '../../types/api/service';
+
+interface ServicesGridProps {
+    // Config data - component extracts all values from it
+    config: {
+        pages?: any[];
+    };
+    services?: Service[] | null;
+}
+
+export const ServicesGrid = ({
+    config,
+    services: servicesData,
+}: ServicesGridProps) => {
+    // Get services from props
+    const services = Array.isArray(servicesData) ? servicesData : [];
+    
+    // Extract values from config
+    const title = "Available Services";
+    const subtitle = "All of our core services are available in this location. Each can be customized to meet your specific needs.";
+    const backgroundColor = "bg-secondary";
+    const className = "";
+    
+    return (
+        <section className={`${backgroundColor} py-16 md:py-24 ${className}`}>
+            <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                {(title || subtitle) && (
+                    <div className="mx-auto mb-12 flex w-full max-w-3xl flex-col items-center text-center">
+                        {title && (
+                            <h2 className="text-display-sm font-semibold text-primary md:text-display-md">
+                                {title}
+                            </h2>
+                        )}
+                        {subtitle && (
+                            <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
+                                {subtitle}
+                            </p>
+                        )}
+                    </div>
+                )}
+
+                {services.length > 0 ? (
+                    <ul className="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 md:gap-y-12 lg:grid-cols-3">
+                        {services.map((service, index) => {
+                            const description = service.summary || 
+                                (service.description_markdown ? service.description_markdown.replace(/[#*\[\]()]/g, '').trim().substring(0, 120) + '...' : '');
+                            
+                            // Get service image from photo_attachments
+                            const photo = service.photo_attachments?.find((pa) => pa.featured)?.photo ||
+                                         service.photo_attachments?.[0]?.photo;
+                            const imageAlt = photo?.title || service.name;
+                            
+                            return (
+                                <li key={service.id || index}>
+                                    <div className="flex flex-col gap-12 bg-secondary p-5 md:inline-flex md:gap-16 md:p-6">
+                                        {/* Service Image using PhotoWithFallback */}
+                                        <div className="h-48 w-full overflow-hidden rounded-lg md:h-64">
+                                            <PhotoWithFallback
+                                                item={service}
+                                                fallbackId={service.id || index}
+                                                alt={imageAlt || "Service image"}
+                                                className="size-full object-cover"
+                                            />
+                                        </div>
+
+                                        <div className="flex flex-col gap-4">
+                                            <div>
+                                                <h3 className="text-lg font-semibold text-primary">{service.name}</h3>
+                                                {description && (
+                                                    <p className="mt-1 text-md text-tertiary">
+                                                        {description}
+                                                    </p>
+                                                )}
+                                            </div>
+
+                                            <Button
+                                                color="link-color"
+                                                size="lg"
+                                                href={`/services/${service.slug}`}
+                                                iconTrailing={ArrowRight}
+                                            >
+                                                Learn more
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                ) : (
+                    <div className="text-center py-12">
+                        <p className="text-gray-500">No services available</p>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};

package/src/design_system/sections/services-home.aman.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { PhotoWithFallback } from '../elements';
+import type { Service } from '../../types/api/service';
+
+interface ServicesHomeProps {
+    services?: Service[] | null;
+    title?: string;
+}
+
+export const ServicesHome = ({
+    services: servicesData,
+    title = 'Our Services',
+}: ServicesHomeProps) => {
+    const services = Array.isArray(servicesData) ? servicesData.slice(0, 6) : [];
+
+    return (
+        <section>
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                <div className="mb-12 text-center">
+                    <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+                        {title}
+                    </h2>
+                </div>
+
+                {services.length > 0 ? (
+                    <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+                        {services.map((service: Service) => {
+                            const description = service.summary || 
+                                (service.description_markdown ? service.description_markdown.replace(/[#*\[\]()]/g, '').trim().substring(0, 150) : '');
+                            
+                            return (
+                                <div key={service.id} className="flex flex-col">
+                                    <div className="w-full h-64 mb-6 overflow-hidden">
+                                        <PhotoWithFallback
+                                            item={service}
+                                            fallbackId={service.id}
+                                            className="w-full h-full object-cover"
+                                        />
+                                    </div>
+                                    
+                                    <p className="text-xs font-body font-normal uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                                        SERVICE
+                                    </p>
+                                    
+                                    <h3 className="font-display text-2xl font-normal text-fg-primary mb-4">
+                                        {service.name}
+                                    </h3>
+                                    
+                                    {description && (
+                                        <p className="font-body text-base leading-relaxed text-tertiary mb-6 flex-grow">
+                                            {description}
+                                        </p>
+                                    )}
+                                    
+                                    <a
+                                        href={`/services/${service.slug}`}
+                                        className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
+                                        style={{ color: 'var(--color-text-brand-accent)' }}
+                                    >
+                                        Discover more
+                                    </a>
+                                </div>
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <div className="text-center py-12">
+                        <p className="font-body text-base text-tertiary">No services available</p>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('services-home', 'aman', ServicesHome);

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

@@ -0,0 +1,131 @@
+"use client";
+
+import { useState } from "react";
+import { ArrowRight } from "@untitledui/icons";
+import { Button, PhotoWithFallback } from '../elements';
+import { cx } from '../../utils/cx';
+import type { Service } from '../../types/api/service';
+
+
+interface ServicesHomeProps {
+    services: Service[];
+    label?: string;
+    title?: string;
+    subtitle?: string;
+    viewAllText?: string;
+}
+
+export const ServicesHome = ({
+    services: servicesData,
+    label = "Services",
+    title = "Our Services",
+    subtitle = "",
+    viewAllText = "View all services",
+}: ServicesHomeProps) => {
+    const services = Array.isArray(servicesData) ? servicesData.slice(0, 6) : [];
+    const viewAllHref = "/services";
+    
+    const [internalSelectedId, setInternalSelectedId] = useState<string | undefined>(
+        services.length > 0 ? services[0].id.toString() : undefined
+    );
+
+    const handleServiceClick = (serviceId: string) => {
+        setInternalSelectedId(serviceId);
+    };
+
+    const currentSelectedId = internalSelectedId || (services.length > 0 ? services[0].id.toString() : undefined);
+    const selectedService = services.find(s => s.id.toString() === currentSelectedId) || services[0];
+    
+    const getServiceDescription = (service: Service | undefined): string => {
+        if (!service) return '';
+        return (service as any)?.summary || service.description_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+    };
+
+    return (
+        <section className="overflow-hidden bg-primary py-16 md:py-24">
+            <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                <div className="flex w-full flex-col lg:max-w-3xl">
+                    <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
+                    <h2 className="mt-3 text-display-sm font-semibold text-primary md:text-display-md">
+                        {title}
+                    </h2>
+                    {subtitle && (
+                        <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
+                            {subtitle}
+                        </p>
+                    )}
+                </div>
+
+                <div className="mt-12 grid grid-cols-1 gap-12 md:mt-16 md:gap-16 lg:grid-cols-5 lg:items-start">
+                    {/* Left side - Service list */}
+                    <div className="lg:col-span-2">
+                        <ul className="flex flex-col">
+                            {services.map((service) => {
+                                const serviceId = service.id.toString();
+                                const isSelected = serviceId === currentSelectedId;
+                                return (
+                                    <li key={service.id}>
+                                        <div className="relative">
+                                            {isSelected && (
+                                                <div className="absolute left-0 top-0 bottom-0 w-1 bg-brand-secondary rounded-r" />
+                                            )}
+                                            <div 
+                                                className={cx(
+                                                    "flex items-center py-4 pl-6 pr-4",
+                                                    isSelected && "pl-5",
+                                                    "hover:bg-primary_hover transition-colors cursor-pointer"
+                                                )}
+                                                onClick={() => handleServiceClick(serviceId)}
+                                            >
+                                                <h3 className={cx(
+                                                    "text-lg font-semibold",
+                                                    isSelected ? "text-brand-secondary" : "text-primary"
+                                                )}>
+                                                    {service.name}
+                                                </h3>
+                                            </div>
+                                        </div>
+                                    </li>
+                                );
+                            })}
+                        </ul>
+
+                        <div className="mt-4">
+                            <Button
+                                color="link-color"
+                                size="lg"
+                                href={viewAllHref}
+                                iconTrailing={ArrowRight}
+                            >
+                                {viewAllText}
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* Right side - Featured service image */}
+                    {selectedService && (
+                        <div className="lg:col-span-3">
+                            <div className="relative flex w-full items-center justify-center h-108 md:h-128">
+                                <PhotoWithFallback
+                                    item={selectedService}
+                                    fallbackId={selectedService.id}
+                                    alt={selectedService.name || "Service image"}
+                                    className="absolute top-0 left-0 z-0 size-full object-cover"
+                                />
+
+                                <div className="z-10 flex w-full items-center justify-center p-3 md:p-4">
+                                    <div className="w-[70%] rounded-xl bg-primary/30 px-4 pt-5 pb-6 ring-1 ring-alpha-white/30 backdrop-blur-[10px] ring-inset">
+                                        <h3 className="text-xl font-semibold text-white">{selectedService.name}</h3>
+                                        {getServiceDescription(selectedService) && (
+                                            <p className="mt-2 text-md text-white/90">{getServiceDescription(selectedService)}</p>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};