keystone-design-bootstrap 1.0.3

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

@@ -0,0 +1,132 @@
+"use client";
+
+import { PhotoWithFallback } from '../elements';
+import type { SocialPost } from '../../types/api/social-post';
+
+interface SocialMediaGridProps {
+  config: {
+    pages?: any[];
+  };
+  socialPosts?: SocialPost[] | null;
+  pageName?: string;
+  sectionKey?: string;
+}
+
+const formatDate = (dateString?: string) => {
+  if (!dateString) return 'Recent';
+  try {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  } catch {
+    return 'Recent';
+  }
+};
+
+const getPlatformColor = (platform?: string) => {
+  const platformLower = platform?.toLowerCase() || '';
+  const colors: Record<string, string> = {
+    facebook: '#1877F2',
+    instagram: '#E4405F',
+    twitter: '#1DA1F2',
+    linkedin: '#0A66C2',
+    youtube: '#FF0000',
+  };
+  return colors[platformLower] || '#6B625E';
+};
+
+export const SocialMediaGrid = ({
+  config,
+  socialPosts: postsData,
+  pageName = 'SocialMedia',
+  sectionKey = 'social_media_page_section_2_posts',
+}: SocialMediaGridProps) => {
+  const posts = Array.isArray(postsData) ? postsData : [];
+  const title = 'Latest Posts';
+  const subtitle = '';
+
+  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>
+          {subtitle && (
+            <p className="mt-4 font-display text-lg leading-relaxed text-tertiary md:text-xl max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          )}
+        </div>
+
+        {posts.length > 0 ? (
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {posts.map((post: any) => {
+              const images = post.media_urls?.images || [];
+              const firstImage = images[0] || post.image_url;
+              const content = post.content_markdown?.replace(/[#*\[\]()]/g, '').trim() || post.caption || '';
+              const platform = post.social_profile?.platform || 'social';
+              const platformColor = getPlatformColor(platform);
+              
+              return (
+                <div key={post.id} className="flex flex-col bg-white overflow-hidden">
+                  {firstImage && (
+                    <div className="w-full h-64 overflow-hidden">
+                      <PhotoWithFallback
+                        photoUrl={firstImage}
+                        photoAlt={content.substring(0, 50) || 'Social post'}
+                        fallbackId={post.id}
+                        className="w-full h-full object-cover"
+                      />
+                    </div>
+                  )}
+                  
+                  <div className="p-6 flex flex-col flex-grow">
+                    <div className="flex items-center justify-between mb-4">
+                      <span 
+                        className="text-xs font-body uppercase tracking-wide px-2 py-1 rounded text-white"
+                        style={{ backgroundColor: platformColor }}
+                      >
+                        {platform}
+                      </span>
+                      <span className="text-xs font-body" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                        {formatDate(post.posted_at)}
+                      </span>
+                    </div>
+
+                    {content && (
+                      <p className="font-body text-sm text-tertiary mb-4 flex-grow line-clamp-4">
+                        {content}
+                      </p>
+                    )}
+
+                    {post.external_url && (
+                      <a
+                        href={post.external_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="font-body text-sm underline underline-offset-4 hover:no-underline mt-auto transition-colors"
+                        style={{ color: 'var(--color-text-brand-accent)' }}
+                      >
+                        View on {platform.charAt(0).toUpperCase() + platform.slice(1)}
+                      </a>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="font-body text-base text-tertiary">No posts available</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('social-media-grid', 'aman', SocialMediaGrid);

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

@@ -0,0 +1,189 @@
+"use client";
+
+import React, { useState } from 'react';
+import { ArrowLeft, ArrowRight } from '@untitledui/icons';
+import { Carousel } from '../elements/carousel/carousel-base';
+import { Button, PaginationPageMinimalCenter, PhotoWithFallback, RoundButton } from '../elements';
+import { cx } from '../../utils/cx';
+import type { SocialPost } from '../../types/api/social-post';
+
+interface SocialMediaGridProps {
+    config: {
+        pages?: any[];
+    };
+    socialPosts?: SocialPost[] | null;
+}
+
+const getPlatformBadge = (platform?: string) => {
+    const platformLower = platform?.toLowerCase() || 'social';
+    const colors: Record<string, string> = {
+        facebook: 'bg-blue-600',
+        instagram: 'bg-pink-600',
+        twitter: 'bg-blue-400',
+        linkedin: 'bg-blue-700',
+        youtube: 'bg-red-600',
+    };
+    return colors[platformLower] || 'bg-gray-600';
+};
+
+const formatDate = (dateString?: string) => {
+    if (!dateString) return 'Recent';
+    try {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    } catch {
+        return 'Recent';
+    }
+};
+
+
+export const SocialMediaGrid = ({
+    config,
+    socialPosts: postsData,
+}: SocialMediaGridProps) => {
+    const posts = Array.isArray(postsData) ? postsData : [];
+    
+    const title = undefined;
+    const subtitle = undefined;
+    const postsPerPage = 8;
+    const backgroundColor = "bg-primary";
+    const className = "";
+    
+    const [currentPage, setCurrentPage] = useState(1);
+    
+    const totalPages = Math.ceil(posts.length / postsPerPage);
+    const startIndex = (currentPage - 1) * postsPerPage;
+    const endIndex = startIndex + postsPerPage;
+    const paginatedPosts = posts.slice(startIndex, endIndex);
+
+    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>
+                )}
+
+                {paginatedPosts.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 xl:grid-cols-4">
+                            {paginatedPosts.map((post, index) => {
+                                const images = post.media_urls?.images || [];
+                                const hasMultipleImages = images.length > 1;
+                                const firstImage = images[0];
+                                const content = post.content_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+                                
+                                return (
+                                    <li key={post.id || index} className="flex flex-col gap-5 md:gap-6">
+                                        <div className="relative h-78 w-full overflow-hidden md:h-74">
+                                            {firstImage ? (
+                                                hasMultipleImages ? (
+                                                    <Carousel.Root
+                                                        opts={{ align: "start" }}
+                                                        className="h-full w-full"
+                                                    >
+                                                        <Carousel.Content className="h-full">
+                                                            {images.map((imgUrl: string, imgIndex: number) => (
+                                                                <Carousel.Item key={imgIndex} className="h-full">
+                                                                    <img 
+                                                                        src={imgUrl} 
+                                                                        alt={`${post.platform} post image ${imgIndex + 1}`}
+                                                                        className="size-full object-cover"
+                                                                    />
+                                                                </Carousel.Item>
+                                                            ))}
+                                                        </Carousel.Content>
+                                                        <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2">
+                                                            <Carousel.PrevTrigger asChild>
+                                                                <RoundButton icon={ArrowLeft} />
+                                                            </Carousel.PrevTrigger>
+                                                            <Carousel.NextTrigger asChild>
+                                                                <RoundButton icon={ArrowRight} />
+                                                            </Carousel.NextTrigger>
+                                                        </div>
+                                                    </Carousel.Root>
+                                                ) : (
+                                                    <PhotoWithFallback
+                                                        photoUrl={firstImage}
+                                                        photoAlt={`${post.platform} post`}
+                                                        fallbackId={`social-post-${post.id || index}`}
+                                                        className="size-full object-cover"
+                                                    />
+                                                )
+                                            ) : (
+                                                <PhotoWithFallback
+                                                    photoUrl={undefined}
+                                                    photoAlt={`${post.platform} post`}
+                                                    fallbackId={`social-post-${post.id || index}`}
+                                                    className="size-full object-cover"
+                                                />
+                                            )}
+                                            
+                                            {post.platform && (
+                                                <div className={cx(
+                                                    "absolute top-4 right-4 rounded-full px-3 py-1.5 text-sm font-semibold text-white",
+                                                    getPlatformBadge(post.platform)
+                                                )}>
+                                                    {post.platform.charAt(0).toUpperCase() + post.platform.slice(1)}
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className="flex flex-col gap-4">
+                                            <div className="flex items-center justify-between">
+                                                <span className="text-sm text-tertiary">{formatDate(post.posted_at)}</span>
+                                            </div>
+                                            
+                                            {content && (
+                                                <p className="text-md text-tertiary line-clamp-4">
+                                                    {content}
+                                                </p>
+                                            )}
+                                            
+                                            <Button 
+                                                href={`https://${post.platform.toLowerCase()}.com`}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                color="link-color"
+                                                size="md"
+                                            >
+                                                View on {post.platform}
+                                            </Button>
+                                        </div>
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                        
+                        {totalPages > 1 && (
+                            <div className="mt-12">
+                                <PaginationPageMinimalCenter
+                                    page={currentPage}
+                                    total={totalPages}
+                                    onPageChange={setCurrentPage}
+                                />
+                            </div>
+                        )}
+                    </>
+                ) : (
+                    <div className="text-center py-12">
+                        <p className="text-gray-500">No social media posts available</p>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};

package/src/design_system/sections/statistics-section.aman.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+interface StatisticsSectionProps {
+  config?: {
+    pages?: any[];
+  };
+  pageName?: string;
+  sectionKey?: string;
+  title?: string;
+  subtitle?: string;
+  statistics?: Array<{
+    number?: string;
+    value?: string;
+    label: string;
+  }>;
+}
+
+export const StatisticsSection = ({
+  config,
+  pageName = 'Testimonials',
+  sectionKey = 'testimonials_page_section_3_stats',
+  title: titleProp,
+  subtitle: subtitleProp,
+  statistics: statisticsProp,
+}: StatisticsSectionProps) => {
+  // Get section config
+  const pageConfig = config?.pages?.find((p: any) => 
+    p.library_reference_name === pageName
+  );
+  const sectionConfig = pageConfig?.sections?.[sectionKey];
+  
+  // Use props, then config, then defaults
+  const title = titleProp || sectionConfig?.title || '*TR* By the Numbers';
+  const subtitle = subtitleProp || sectionConfig?.subtitle || '*TR* Our track record speaks for itself';
+  const statistics = statisticsProp || sectionConfig?.statistics || [
+    { number: '*TR* 500+', label: '*TR* Happy Clients' },
+    { number: '*TR* 5.0', label: '*TR* Average Rating' },
+    { number: '*TR* 98%', label: '*TR* Would Recommend' },
+  ];
+
+  return (
+    <section>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        {(title || subtitle) && (
+          <div className="mb-12 text-center">
+            {title && (
+              <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+                {title}
+              </h2>
+            )}
+            {subtitle && (
+              <p className="mt-4 font-body text-lg leading-relaxed text-tertiary md:text-xl max-w-3xl mx-auto">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        )}
+
+        {statistics.length > 0 && (
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-3 justify-items-center">
+            {statistics.map((stat: any, i: number) => (
+              <div key={i} className="text-center max-w-xs w-full">
+                <div className="font-display text-5xl font-normal text-fg-primary mb-2">
+                  {stat.number || stat.value}
+                </div>
+                <p className="text-xs font-body uppercase tracking-widest" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                  {stat.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('statistics-section', 'aman', StatisticsSection);

package/src/design_system/sections/statistics-section.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import type { FC } from "react";
+import { mapIcon } from '../utils/icon-mapping';
+
+interface StatisticsSectionProps {
+    config?: {
+        pages?: any[];
+    };
+    pageName?: string;
+    sectionKey?: string;
+    title?: string;
+    subtitle?: string;
+    statistics?: Array<{
+        number?: string;
+        value?: string;
+        label: string;
+        icon?: string;
+        description?: string;
+    }>;
+}
+
+export const StatisticsSection = ({
+    config,
+    pageName = 'Testimonials',
+    sectionKey = 'testimonials_page_section_3_stats',
+    title: titleProp,
+    subtitle: subtitleProp,
+    statistics: statisticsProp,
+}: StatisticsSectionProps) => {
+    // Get section config
+    const pageConfig = config?.pages?.find((p: any) => 
+        p.library_reference_name === pageName
+    );
+    const sectionConfig = pageConfig?.sections?.[sectionKey];
+    
+    // Use props, then config, then defaults
+    const title = titleProp || sectionConfig?.title || '*TR* By the Numbers';
+    const subtitle = subtitleProp || sectionConfig?.subtitle || '*TR* Our track record speaks for itself';
+    const statsArray = statisticsProp || sectionConfig?.statistics || [
+        { number: '*TR* 500+', label: '*TR* Happy Clients', icon: 'Users01' },
+        { number: '*TR* 5.0', label: '*TR* Average Rating', icon: 'Star01' },
+        { number: '*TR* 98%', label: '*TR* Would Recommend', icon: 'Heart' },
+    ];
+    
+    const stats = statsArray.map((stat: any) => ({
+        number: stat.number || stat.value || stat.title,
+        label: stat.label || stat.subtitle,
+        icon: stat.icon,
+        description: stat.description,
+    }));
+
+    const backgroundColor = "bg-secondary";
+    
+    return (
+        <section className={`${backgroundColor} py-16 md:py-24`}>
+            <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>
+                )}
+                
+                <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+                    {stats.map((stat: { number: string | number; label: string; icon?: string | FC<{ className?: string }> }, index: number) => {
+                        const IconComponent = mapIcon(stat.icon);
+                        
+                        return (
+                            <div key={index} className="text-center">
+                                <div className="flex items-center justify-center gap-2">
+                                    {IconComponent && (
+                                        <div className="size-6 shrink-0">
+                                            <IconComponent className="w-full h-full text-brand-secondary" />
+                                        </div>
+                                    )}
+                                    <div className="text-display-lg font-semibold text-primary md:text-display-xl">
+                                        {stat.number}
+                                    </div>
+                                </div>
+                                <div className="mt-2 text-lg text-tertiary">{stat.label}</div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </section>
+    );
+};

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

@@ -0,0 +1,85 @@
+"use client";
+
+import { PhotoWithFallback } from '../elements';
+import type { TeamMember } from '../../types/api/team-member';
+
+interface TeamGridProps {
+    config: {
+        pages?: any[];
+    };
+    teamMembers?: TeamMember[] | null;
+    pageName?: string;
+    sectionKey?: string;
+}
+
+export const TeamGrid = ({
+    config,
+    teamMembers: membersData,
+    pageName = 'Team',
+    sectionKey = 'team_page_section_2_team',
+}: TeamGridProps) => {
+    const members = Array.isArray(membersData) ? membersData : [];
+    
+    const title = 'Our Team';
+    const subtitle = '';
+    const maxMembers = 8;
+    
+    const displayMembers = members.slice(0, maxMembers);
+
+    return (
+        <section>
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                {title && (
+                    <div className="mb-12 text-center">
+                        <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+                            {title}
+                        </h2>
+                        {subtitle && (
+                            <p className="mt-4 font-body text-lg text-tertiary">
+                                {subtitle}
+                            </p>
+                        )}
+                    </div>
+                )}
+
+                {displayMembers.length > 0 ? (
+                    <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+                        {displayMembers.map((member: any) => {
+                            const bio = member.bio_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+                            
+                            return (
+                                <div key={member.id}>
+                                    <div className="aspect-[3/4] w-full mb-6">
+                                        <PhotoWithFallback
+                                            item={member}
+                                            fallbackId={member.id}
+                                            className="w-full h-full object-cover"
+                                        />
+                                    </div>
+                                    <h3 className="font-display text-xl font-normal text-fg-primary">
+                                        {member.name}
+                                    </h3>
+                                    <p className="mt-2 font-body text-sm" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                                        {member.position}
+                                    </p>
+                                    {bio && (
+                                        <p className="mt-4 font-body text-sm leading-relaxed text-tertiary">
+                                            {bio}
+                                        </p>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <div className="text-center py-12">
+                        <p className="font-body text-base text-tertiary">No team members available</p>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('team-grid', 'aman', TeamGrid);

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

@@ -0,0 +1,88 @@
+"use client";
+
+import React from 'react';
+import { PhotoWithFallback } from '../elements';
+import type { TeamMember } from '../../types/api/team-member';
+
+interface TeamGridProps {
+    config: {
+        pages?: any[];
+    };
+    teamMembers?: TeamMember[] | null;
+    pageName?: string;
+    sectionKey?: string;
+}
+
+export const TeamGrid = ({
+    config,
+    teamMembers: membersData,
+    pageName = 'Team',
+    sectionKey = 'team_page_section_2_team',
+}: TeamGridProps) => {
+    const members = Array.isArray(membersData) ? membersData : [];
+    
+    const title = "Leadership";
+    const subtitle = "Our philosophy is simple—hire a team of diverse, passionate people and foster a culture of service.";
+    const maxMembers = 8;
+    const backgroundColor = "bg-primary";
+    const className = "";
+    
+    const displayMembers = members.slice(0, maxMembers);
+
+    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>
+                )}
+
+                {displayMembers.length > 0 ? (
+                    <div className="mt-12 md:mt-16">
+                        <ul className="grid w-full grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 md:gap-y-12 lg:grid-cols-3 xl:grid-cols-4">
+                            {displayMembers.map((member, index) => {
+                                const bio = member.bio_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+                                
+                                return (
+                                    <li key={member.id || index} className="flex flex-col gap-5 md:gap-6">
+                                        <PhotoWithFallback
+                                            item={member}
+                                            fallbackId={member.id || index}
+                                            alt={member.name || 'Team member'}
+                                            className="h-78 w-full object-cover md:h-74 rounded-2xl"
+                                        />
+                                        <div>
+                                            <h3 className="text-lg font-semibold text-primary md:text-xl">{member.name}</h3>
+                                            <p className="text-md text-brand-secondary md:mt-0.5 md:text-lg">
+                                                {member.position}
+                                            </p>
+                                            {bio && (
+                                                <p className="mt-4 text-md text-tertiary line-clamp-3">
+                                                    {bio}
+                                                </p>
+                                            )}
+                                        </div>
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                    </div>
+                ) : (
+                    <div className="text-center mt-12">
+                        <p className="text-gray-500">No team members available</p>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};