keystone-design-bootstrap 1.0.3

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

@@ -0,0 +1,115 @@
+import type { FC } from "react";
+import { ArrowRight } from "@untitledui/icons";
+import { Button } from '../elements';
+import { FeatureTextFeaturedIconCard } from './feature-text';
+import { mapIcon } from '../utils/icon-mapping';
+import type { CompanyInformation } from '../../types/api/company-information';
+
+interface Value {
+    id?: string;
+    title: string;
+    description: string;
+    icon: string | FC<{ className?: string }>;
+    href?: string;
+}
+
+interface AboutHomeProps {
+    config: {
+        pages?: any[];
+    };
+    companyInformation?: CompanyInformation | null;
+}
+
+
+export const AboutHome = ({
+    config,
+    companyInformation,
+}: AboutHomeProps) => {
+    // Extract values from config
+    const title = '';
+    const subtitle = undefined;
+    const description = (companyInformation as any)?.about_text_markdown || '';
+    const values = (undefined || []).map((v: any, index: number) => ({
+        id: index.toString(),
+        title: v.title,
+        description: v.description,
+        icon: v.icon,
+    }));
+    const ctaText = undefined;
+    
+    const firstValue = values && values.length > 0 ? values[0] : null;
+    const FirstValueIcon = firstValue?.icon ? mapIcon(firstValue.icon) : null;
+
+    return (
+        <section className="bg-primary py-16 md:py-24">
+            <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                <div className="grid grid-cols-1 gap-12 md:gap-16 lg:grid-cols-3">
+                    {/* Left column */}
+                    <div className="max-w-3xl lg:col-span-1">
+                        {FirstValueIcon && (
+                            <div className="hidden md:flex">
+                                <FirstValueIcon className="size-14 text-brand-secondary" />
+                            </div>
+                        )}
+                        {FirstValueIcon && (
+                            <div className="flex md:hidden">
+                                <FirstValueIcon className="size-12 text-brand-secondary" />
+                            </div>
+                        )}
+                        <h2 className="mt-5 text-display-sm font-semibold text-primary md:text-display-md">
+                            {title}
+                        </h2>
+                        <p className="mt-4 text-lg text-tertiary md:mt-5">
+                            {description || subtitle}
+                        </p>
+                        {ctaText && (
+                            <Button
+                                href="/about"
+                                color="link-color"
+                                size="lg"
+                                className="mt-8"
+                                iconTrailing={ArrowRight}
+                            >
+                                {ctaText}
+                            </Button>
+                        )}
+                    </div>
+
+                    {/* Right column - Feature cards */}
+                    {values && values.length > 0 && (
+                        <div className="lg:col-span-2">
+                            <ul className="grid w-full grid-cols-1 gap-x-8 gap-y-6 sm:grid-flow-col sm:grid-cols-2 sm:grid-rows-2 md:gap-y-8 lg:grid-cols-2">
+                                {values.map((value: Value, index: number) => {
+                                    const IconComponent = mapIcon(value.icon);
+                                    if (!IconComponent) return null;
+                                    
+                                    return (
+                                        <li key={value.id || index}>
+                                            <FeatureTextFeaturedIconCard
+                                                icon={IconComponent}
+                                                title={value.title}
+                                                subtitle={value.description}
+                                                footer={
+                                                    value.href ? (
+                                                        <Button 
+                                                            color="link-color" 
+                                                            size="lg" 
+                                                            href={value.href}
+                                                            iconTrailing={ArrowRight}
+                                                        >
+                                                            Learn more
+                                                        </Button>
+                                                    ) : undefined
+                                                }
+                                            />
+                                        </li>
+                                    );
+                                })}
+                            </ul>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};