keystone-design-bootstrap 1.0.3

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

@@ -0,0 +1,134 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "motion/react";
+import { cx } from '../../utils/cx';
+import type { FaqQuestion } from '../../types/api/faq';
+
+
+interface FAQHomeProps {
+    config: {
+        pages?: any[];
+    };
+    faqs: FaqQuestion[];
+    pageName?: string;
+    sectionKey?: string;
+}
+
+export const FAQHome = ({
+    config,
+    faqs: faqsData,
+    pageName = 'Home',
+    sectionKey = 'home_page_section_4_faq',
+}: FAQHomeProps) => {
+    const items = Array.isArray(faqsData) ? faqsData : [];
+    
+    // Extract values from config
+    const faqSection = pageName === 'Home' 
+    const title = "Frequently asked questions";
+    const subtitle = "";
+    const maxItems = undefined;
+    const [openQuestions, setOpenQuestions] = useState<Set<number>>(new Set([0]));
+
+    const handleToggle = (index: number) => {
+        const newSet = new Set(openQuestions);
+        if (newSet.has(index)) {
+            newSet.delete(index);
+        } else {
+            newSet.add(index);
+        }
+        setOpenQuestions(newSet);
+    };
+
+    const displayItems = maxItems ? items.slice(0, maxItems) : items;
+
+    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">
+                    <h2 className="text-display-sm font-semibold text-primary md:text-display-md">
+                        {title}
+                    </h2>
+                    <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
+                        {subtitle}
+                    </p>
+                </div>
+
+                {displayItems && displayItems.length > 0 ? (
+                    <div className="mx-auto mt-12 max-w-3xl md:mt-16">
+                        <div className="flex flex-col gap-4">
+                            {displayItems.map((faq, index) => (
+                                <div
+                                    key={faq.id || index}
+                                    className={cx(
+                                        "rounded-2xl bg-transparent p-5 transition duration-300 ease-in-out md:p-6",
+                                        openQuestions.has(index) && "bg-secondary",
+                                    )}
+                                >
+                                    <h3>
+                                        <button
+                                            onClick={() => handleToggle(index)}
+                                            className="flex w-full cursor-pointer gap-2 rounded-md text-left outline-focus-ring select-none focus-visible:outline-2 focus-visible:outline-offset-2 md:flex-row-reverse md:gap-4"
+                                        >
+                                            <span className="flex-1 text-md font-semibold text-primary">{faq.question}</span>
+                                            <span aria-hidden="true" className="flex size-6 items-center text-fg-quaternary">
+                                                <svg
+                                                    width="24"
+                                                    height="24"
+                                                    viewBox="0 0 24 24"
+                                                    fill="none"
+                                                    stroke="currentColor"
+                                                    strokeWidth="2"
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                >
+                                                    <circle cx="12" cy="12" r="10"></circle>
+                                                    <line
+                                                        className={cx(
+                                                            "origin-center rotate-0 transition duration-150 ease-out",
+                                                            openQuestions.has(index) && "-rotate-90",
+                                                        )}
+                                                        x1="12"
+                                                        y1="8"
+                                                        x2="12"
+                                                        y2="16"
+                                                    ></line>
+                                                    <line x1="8" y1="12" x2="16" y2="12"></line>
+                                                </svg>
+                                            </span>
+                                        </button>
+                                    </h3>
+
+                                    <motion.div
+                                        className="overflow-hidden"
+                                        initial={false}
+                                        animate={{
+                                            height: openQuestions.has(index) ? "auto" : 0,
+                                            opacity: openQuestions.has(index) ? 1 : 0,
+                                        }}
+                                        transition={{
+                                            type: "spring",
+                                            damping: 24,
+                                            stiffness: 240,
+                                            bounce: 0.4,
+                                        }}
+                                    >
+                                        <div className="pt-1 pr-8 md:pr-0 md:pl-10">
+                                            <div className="text-md text-tertiary">
+                                                {faq.answer_markdown || ''}
+                                            </div>
+                                        </div>
+                                    </motion.div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ) : (
+                    <div className="text-center mt-12">
+                        <p className="text-gray-500">No FAQ items available</p>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};

package/src/design_system/sections/feature-tab.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { cx } from '../../utils/cx';
+
+interface FeatureTabProps {
+    title: string;
+    subtitle: string;
+    footer?: ReactNode;
+    isCurrent?: boolean;
+}
+
+export const FeatureTabVertical = ({ title, subtitle, footer, isCurrent }: FeatureTabProps) => (
+    <div
+        className={cx(
+            "relative flex max-w-[405px] cursor-pointer flex-col items-center gap-4 border-t-4 border-tertiary pt-5 text-center transition duration-100 ease-linear hover:border-brand md:gap-5 md:px-4",
+            isCurrent && "border-brand",
+        )}
+    >
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+export const FeatureTabHorizontal = ({ title, subtitle, footer, isCurrent }: FeatureTabProps) => (
+    <div
+        className={cx(
+            "relative flex cursor-pointer flex-col items-start gap-4 border-l-4 border-tertiary py-4 pl-5 transition duration-100 ease-linear hover:border-brand",
+            isCurrent && "border-brand",
+        )}
+    >
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);

package/src/design_system/sections/feature-text.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import type { FC } from "react";
+import { type ReactNode } from "react";
+import { FeaturedIcon } from '../elements';
+
+interface TextCentered {
+    title: string;
+    subtitle: string;
+    footer?: ReactNode;
+}
+
+export const FeatureTextCentered = ({ title, subtitle, footer }: TextCentered) => (
+    <div className="flex max-w-sm flex-col items-center gap-4 text-center">
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+export const FeatureTextLeft = ({ title, subtitle, footer }: TextCentered) => (
+    <div className="flex max-w-sm flex-col gap-4">
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+interface FeatureTextIcon extends TextCentered {
+    icon: FC<{ className?: string }>;
+}
+
+export const FeatureTextIconTopCentered = ({ icon: Icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="flex max-w-sm flex-col items-center gap-3 text-center md:gap-4">
+        <Icon className="size-6 text-icon-fg-brand" />
+
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+export const FeatureTextIconTopLeft = ({ icon: Icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="flex max-w-sm flex-col gap-4">
+        <Icon className="size-6 text-icon-fg-brand" />
+
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+export const FeatureTextIconLeft = ({ icon: Icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="flex max-w-140 gap-4">
+        <Icon className="size-6 shrink-0 text-icon-fg-brand" />
+
+        <div className="flex flex-col gap-4">
+            <div>
+                <h3 className="text-lg font-semibold text-primary">{title}</h3>
+                <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+            </div>
+
+            {footer}
+        </div>
+    </div>
+);
+
+export const FeatureTextFeaturedIconTopCentered = ({
+    color = "gray",
+    theme = "modern",
+    icon,
+    title,
+    subtitle,
+    footer,
+}: FeatureTextIcon & {
+    color?: "brand" | "gray" | "success" | "warning" | "error";
+    theme?: "light" | "gradient" | "dark" | "outline" | "modern";
+}) => (
+    <div className="flex max-w-sm flex-col items-center gap-4 text-center">
+        <FeaturedIcon icon={icon} size="lg" color={color} theme={theme} className="hidden md:inline-flex" />
+        <FeaturedIcon icon={icon} size="md" color={color} theme={theme} className="inline-flex md:hidden" />
+
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+export const FeatureTextFeaturedIconTopLeft = ({ icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="flex max-w-sm flex-col gap-4">
+        <FeaturedIcon icon={icon} size="lg" color="gray" theme="modern" className="hidden md:inline-flex" />
+        <FeaturedIcon icon={icon} size="md" color="gray" theme="modern" className="inline-flex md:hidden" />
+
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+export const FeatureTextFeaturedIconLeft = ({ icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="flex max-w-140 gap-4">
+        <FeaturedIcon icon={icon} size="lg" color="gray" theme="modern" className="hidden md:inline-flex" />
+        <FeaturedIcon icon={icon} size="md" color="gray" theme="modern" className="inline-flex md:hidden" />
+
+        <div className="flex flex-col items-start gap-4">
+            <div>
+                <h3 className="mt-1.5 text-lg font-semibold text-primary md:mt-2.5">{title}</h3>
+                <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+            </div>
+
+            {footer}
+        </div>
+    </div>
+);
+
+export const FeatureTextFeaturedIconBox = ({ icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="mt-6 flex max-w-sm flex-col items-center gap-4 rounded-2xl bg-secondary px-6 pb-8 text-center">
+        <FeaturedIcon icon={icon} size="lg" color="gray" theme="modern" className="-mt-6" />
+
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+interface FeatureTextIntegrationIcon extends TextCentered {
+    imgUrl: string;
+}
+
+export const FeatureTextIntegrationIconTopCentered = ({ imgUrl, title, subtitle, footer }: FeatureTextIntegrationIcon) => (
+    <div className="flex max-w-sm flex-col items-center gap-4 text-center">
+        <span className="flex size-13 shrink-0 items-center justify-center rounded-lg bg-primary shadow-xs ring-1 ring-secondary ring-inset md:size-16 md:rounded-xl">
+            <img alt={title} src={imgUrl} className="size-12 md:size-14" />
+        </span>
+
+        <div className="5 flex flex-col items-center gap-4">
+            <div>
+                <h3 className="text-lg font-semibold text-primary">{title}</h3>
+                <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+            </div>
+
+            {footer}
+        </div>
+    </div>
+);
+
+export const FeatureTextIntegrationIconTopLeft = ({ imgUrl, title, subtitle, footer }: FeatureTextIntegrationIcon) => (
+    <div className="flex max-w-sm flex-col gap-4">
+        <span className="flex size-13 shrink-0 items-center justify-center rounded-lg bg-primary shadow-xs ring-1 ring-secondary ring-inset md:size-16 md:rounded-xl">
+            <img alt={title} src={imgUrl} className="size-12 md:size-14" />
+        </span>
+
+        <div className="flex flex-col gap-4">
+            <div>
+                <h3 className="text-lg font-semibold text-primary">{title}</h3>
+                <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+            </div>
+
+            {footer}
+        </div>
+    </div>
+);
+
+export const FeatureTextIntegrationIconLeft = ({ imgUrl, title, subtitle, footer }: FeatureTextIntegrationIcon) => (
+    <div className="flex max-w-140 gap-4">
+        <span className="flex size-13 shrink-0 items-center justify-center rounded-lg bg-primary shadow-xs ring-1 ring-secondary ring-inset md:size-16 md:rounded-xl">
+            <img alt={title} src={imgUrl} className="size-12 md:size-14" />
+        </span>
+
+        <div className="flex flex-col gap-4">
+            <div>
+                <h3 className="mt-2.5 text-lg font-semibold text-primary md:mt-4">{title}</h3>
+                <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+            </div>
+
+            {footer}
+        </div>
+    </div>
+);
+
+export const FeatureTextIntegrationIconBox = ({ imgUrl, title, subtitle, footer }: FeatureTextIntegrationIcon) => (
+    <div className="mt-6 flex max-w-sm flex-col items-center gap-4 rounded-2xl bg-secondary px-6 pb-8 text-center">
+        <span className="-mt-[26px] flex size-13 shrink-0 items-center justify-center rounded-lg bg-primary shadow-xs ring-1 ring-secondary ring-inset md:-mt-8 md:size-16 md:rounded-xl">
+            <img alt={title} src={imgUrl} className="size-12 md:size-14" />
+        </span>
+
+        <div>
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+export const FeatureTextIconCard = ({ icon: Icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="flex flex-col gap-8 bg-secondary p-5 md:max-w-71.5 md:gap-12 md:p-6">
+        <Icon className="size-6 text-icon-fg-brand" />
+
+        <div className="flex flex-col gap-4">
+            <div>
+                <h3 className="text-lg font-semibold text-primary">{title}</h3>
+                <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+            </div>
+
+            {footer}
+        </div>
+    </div>
+);
+
+export const FeatureTextFeaturedIconCard = ({ icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="flex flex-col gap-12 bg-secondary p-5 md:inline-flex md:gap-16 md:p-6">
+        <FeaturedIcon icon={icon} size="lg" color="gray" theme="light" />
+
+        <div className="flex flex-col gap-4">
+            <div>
+                <h3 className="text-lg font-semibold text-primary">{title}</h3>
+                <p className="mt-1 text-md text-tertiary">{subtitle}</p>
+            </div>
+
+            {footer}
+        </div>
+    </div>
+);
+
+export const FeatureTextLeftBrand = ({ title, subtitle, footer }: TextCentered) => (
+    <div className="flex max-w-sm flex-col gap-4">
+        <div>
+            <h3 className="text-lg font-semibold text-primary_on-brand">{title}</h3>
+            <p className="mt-1 text-md text-tertiary_on-brand">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+export const FeatureTextFeaturedIconTopCenteredBrand = ({ icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="flex max-w-sm flex-col items-center gap-4 text-center">
+        <FeaturedIcon icon={icon} size="lg" color="brand" theme="dark" className="hidden md:inline-flex" />
+        <FeaturedIcon icon={icon} size="md" color="brand" theme="dark" className="inline-flex md:hidden" />
+
+        <div>
+            <h3 className="text-lg font-semibold text-primary_on-brand">{title}</h3>
+            <p className="mt-1 text-md text-tertiary_on-brand">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);
+
+export const FeatureTextFeaturedIconTopLeftBrand = ({ icon, title, subtitle, footer }: FeatureTextIcon) => (
+    <div className="flex max-w-sm flex-col gap-4">
+        <FeaturedIcon icon={icon} size="lg" color="brand" theme="dark" className="hidden md:inline-flex" />
+        <FeaturedIcon icon={icon} size="md" color="brand" theme="dark" className="inline-flex md:hidden" />
+
+        <div>
+            <h3 className="text-lg font-semibold text-primary_on-brand">{title}</h3>
+            <p className="mt-1 text-md text-tertiary_on-brand">{subtitle}</p>
+        </div>
+
+        {footer}
+    </div>
+);

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

@@ -0,0 +1,62 @@
+"use client";
+
+import Link from "next/link";
+import type { CompanyInformation } from '../../types/api/company-information';
+import type { SiteConfig } from '../../types/config';
+
+interface FooterHomeProps {
+    config?: SiteConfig;
+    companyInformation?: CompanyInformation | null;
+}
+
+const COLUMN_TITLES = ['Home', 'Services', 'Locations', 'About Us'];
+
+export const FooterHome = ({
+    config,
+    companyInformation,
+}: FooterHomeProps) => {
+    const currentYear = new Date().getFullYear();
+    const apiCompanyInfo = companyInformation as any;
+    
+    // Get footer navigation from config
+    const footerColumns = config?.navigation?.footer || [];
+    
+    const companyName = apiCompanyInfo?.company_name || '';
+
+    return (
+        <footer className="bg-primary border-t border-secondary py-12 md:py-16">
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                <div className="grid grid-cols-1 gap-12 md:grid-cols-4">
+                    {footerColumns.map((column, i) => (
+                        <div key={i}>
+                            <h4 className="font-body text-sm font-medium uppercase tracking-wide text-fg-primary mb-4">
+                                {COLUMN_TITLES[i] || `Column ${i + 1}`}
+                            </h4>
+                            <ul className="space-y-2">
+                                {column.map((link, j) => (
+                                    <li key={j}>
+                                        <Link
+                                            href={link.href}
+                                            className="font-body text-sm text-tertiary hover:underline"
+                                        >
+                                            {link.label}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+                </div>
+                
+                <div className="mt-12 pt-8 border-t border-secondary text-center">
+                    <p className="font-body text-sm text-tertiary">
+                        © {currentYear} {companyName || 'Company Name'}. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('footer-home', 'aman', FooterHome);