keystone-design-bootstrap 1.0.3

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

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState } from 'react';
+import { Form, PhotoWithFallback } from '../elements';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+
+interface ContactSectionProps {
+    config?: any;
+    pageName?: string;
+    sectionKey?: string;
+    websitePhotos?: WebsitePhotos | null;
+    title?: string;
+    subtitle?: string;
+}
+
+const ContactSection = ({ 
+    config,
+    pageName,
+    sectionKey,
+    websitePhotos,
+    title,
+    subtitle,
+}: ContactSectionProps) => {
+    const [selectedCountryPhone, setSelectedCountryPhone] = useState("US");
+
+    // Get section config for custom title/subtitle
+    const pageConfig = config?.pages?.find((p: any) => 
+        p.library_reference_name === pageName || 
+        p.library_reference_name === 'Home' || 
+        p.slug === 'home'
+    );
+    const contactSection = sectionKey 
+        ? pageConfig?.sections?.[sectionKey] 
+        : pageConfig?.sections?.home_page_section_7_contact || pageConfig?.sections?.home_page_section_6_contact;
+    
+    // Use config values, then props, then defaults
+    const displayTitle = title || contactSection?.title || '*TR* Get in Touch';
+    const displaySubtitle = subtitle || contactSection?.subtitle || '*TR* We would love to hear from you';
+
+    const contactPhoto = websitePhotos?.contact;
+    const contactImageUrl = contactPhoto?.url;
+    const finalContactImage = contactImageUrl && contactImageUrl.trim() !== "" ? contactImageUrl : undefined;
+    const finalContactImageAlt = contactPhoto?.alt || "Contact image";
+
+    return (
+        <section>
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                <div className="grid grid-cols-1 gap-12 md:gap-16 lg:grid-cols-2">
+                    {/* Form Side */}
+                    <div className="flex w-full flex-col">
+                        <div className="mb-8">
+                            <h2 className="font-display text-4xl font-normal leading-tight text-fg-primary md:text-5xl">
+                                {displayTitle}
+                            </h2>
+                            <p className="mt-4 font-body text-lg leading-relaxed text-tertiary">
+                                {displaySubtitle}
+                            </p>
+                        </div>
+
+                        <Form
+                            onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                                e.preventDefault();
+                                const data = Object.fromEntries(new FormData(e.currentTarget));
+                                console.log("Form data:", data);
+                            }}
+                            className="flex flex-col gap-6"
+                        >
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label className="block text-xs font-body uppercase tracking-widest text-secondary mb-2">
+                                        First name *
+                                    </label>
+                                    <input
+                                        required
+                                        type="text"
+                                        name="firstName"
+                                        placeholder="First name"
+                                        className="w-full px-4 py-3 bg-white border border-secondary rounded-sm font-body text-base text-fg-primary placeholder:text-secondary focus:outline-none focus:ring-2 focus:ring-focus-ring"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-xs font-body uppercase tracking-widest text-secondary mb-2">
+                                        Last name *
+                                    </label>
+                                    <input
+                                        required
+                                        type="text"
+                                        name="lastName"
+                                        placeholder="Last name"
+                                        className="w-full px-4 py-3 bg-white border border-secondary rounded-sm font-body text-base text-fg-primary placeholder:text-secondary focus:outline-none focus:ring-2 focus:ring-focus-ring"
+                                    />
+                                </div>
+                            </div>
+
+                            <div>
+                                <label className="block text-xs font-body uppercase tracking-widest text-secondary mb-2">
+                                    Email *
+                                </label>
+                                <input
+                                    required
+                                    type="email"
+                                    name="email"
+                                    placeholder="you@company.com"
+                                    className="w-full px-4 py-3 bg-white border border-secondary rounded-sm font-body text-base text-fg-primary placeholder:text-secondary focus:outline-none focus:ring-2 focus:ring-focus-ring"
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-xs font-body uppercase tracking-widest text-secondary mb-2">
+                                    Phone number
+                                </label>
+                                <input
+                                    type="tel"
+                                    name="phone"
+                                    placeholder="(555) 000-0000"
+                                    className="w-full px-4 py-3 bg-white border border-secondary rounded-sm font-body text-base text-fg-primary placeholder:text-secondary focus:outline-none focus:ring-2 focus:ring-focus-ring"
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-xs font-body uppercase tracking-widest text-secondary mb-2">
+                                    Message *
+                                </label>
+                                <textarea
+                                    required
+                                    name="message"
+                                    rows={4}
+                                    placeholder="Leave us a message..."
+                                    className="w-full px-4 py-3 bg-white border border-secondary rounded-sm font-body text-base text-fg-primary placeholder:text-secondary focus:outline-none focus:ring-2 focus:ring-focus-ring resize-none"
+                                />
+                            </div>
+
+                            <div className="flex items-start gap-3">
+                                <input
+                                    type="checkbox"
+                                    name="privacy"
+                                    required
+                                    className="mt-1 w-4 h-4 border-secondary rounded focus:ring-focus-ring"
+                                />
+                                <label className="font-body text-sm text-tertiary">
+                                    You agree to our friendly privacy policy. *
+                                </label>
+                            </div>
+
+                            <button
+                                type="submit"
+                                className="w-full font-body text-base uppercase tracking-wide py-3 px-6 rounded-sm hover:opacity-90 transition-opacity"
+                                style={{ backgroundColor: '#1E1E1E', color: '#FFFFFF' }}
+                            >
+                                Send message
+                            </button>
+                        </Form>
+                    </div>
+
+                    {/* Image Side */}
+                    <div className="w-full h-96 md:h-full overflow-hidden">
+                        <PhotoWithFallback
+                            photoUrl={finalContactImage || ''}
+                            photoAlt={finalContactImageAlt}
+                            fallbackId="contact-image"
+                            className="w-full h-full object-cover min-h-[300px]"
+                        />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ContactSection;
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('contact-section', 'aman', ContactSection);

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

@@ -0,0 +1,143 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Checkbox, Form, Input, InputGroup, NativeSelect, Textarea, PhotoWithFallback, Button } from '../elements';
+import countries, { phoneCodeOptions } from '../../utils/countries';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+
+
+interface ContactSectionProps {
+    websitePhotos?: WebsitePhotos | null;
+    title?: string;
+    subtitle?: string;
+}
+
+const ContactSection = ({ 
+    websitePhotos,
+    title = "Contact us",
+    subtitle = "Our friendly team would love to hear from you.",
+}: ContactSectionProps) => {
+    const [selectedCountryPhone, setSelectedCountryPhone] = useState("US");
+    
+    // Get contact photo from props
+    const contactPhoto = websitePhotos?.contact;
+    const contactImageUrl = contactPhoto?.url;
+    const finalContactImage = contactImageUrl && contactImageUrl.trim() !== "" ? contactImageUrl : undefined;
+    const finalContactImageAlt = contactPhoto?.alt || "Contact image";
+
+    return (
+        <section className="bg-primary py-16 md:pt-16 md:pb-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-2">
+                    <div className="flex w-full flex-col gap-12">
+                        <div className="flex flex-col">
+                            <h2 className="text-display-md font-semibold text-primary">
+                                {title}
+                            </h2>
+                            {subtitle && (
+                                <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
+                                    {subtitle}
+                                </p>
+                            )}
+                        </div>
+                        <Form
+                            onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                                e.preventDefault();
+                                const data = Object.fromEntries(new FormData(e.currentTarget));
+                                console.log("Form data:", data);
+                            }}
+                            className="flex flex-col gap-8"
+                        >
+                            <div className="flex flex-col gap-6">
+                                <div className="flex flex-col gap-x-8 gap-y-6 md:flex-row">
+                                    <Input 
+                                        isRequired 
+                                        size="md" 
+                                        name="firstName" 
+                                        label="First name" 
+                                        placeholder="First name" 
+                                        wrapperClassName="flex-1" 
+                                    />
+                                    <Input 
+                                        isRequired 
+                                        size="md" 
+                                        name="lastName" 
+                                        label="Last name" 
+                                        placeholder="Last name" 
+                                        wrapperClassName="flex-1" 
+                                    />
+                                </div>
+                                <Input 
+                                    isRequired 
+                                    size="md" 
+                                    name="email" 
+                                    label="Email" 
+                                    type="email" 
+                                    placeholder="you@company.com" 
+                                />
+                                <InputGroup
+                                    size="md"
+                                    name="phone"
+                                    label="Phone number"
+                                    leadingAddon={
+                                        <NativeSelect
+                                            aria-label="Country code"
+                                            value={selectedCountryPhone}
+                                            onChange={(value: any) => setSelectedCountryPhone(value.currentTarget.value)}
+                                            options={phoneCodeOptions.map((item: any) => ({
+                                                label: item.label as string,
+                                                value: item.id as string,
+                                            }))}
+                                        />
+                                    }
+                                >
+                                    <Input
+                                        type="tel"
+                                        placeholder={countries.find((country: any) => country.code === selectedCountryPhone)?.phoneMask?.replaceAll("#", "0")}
+                                    />
+                                </InputGroup>
+                                <Textarea 
+                                    isRequired 
+                                    name="message"
+                                    label="Message" 
+                                    placeholder="Leave us a message..." 
+                                    rows={4} 
+                                />
+                                <Checkbox
+                                    name="privacy"
+                                    size="md"
+                                    hint={
+                                        <>
+                                            You agree to our friendly{" "}
+                                            <a
+                                                href="#"
+                                                className="rounded-xs underline underline-offset-3 outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                                            >
+                                                privacy policy.
+                                            </a>
+                                        </>
+                                    }
+                                />
+                            </div>
+
+                            <Button type="submit" size="xl">
+                                Send message
+                            </Button>
+                        </Form>
+                    </div>
+
+                    <div className="max-lg:hidden lg:h-200">
+                        <PhotoWithFallback
+                            photoUrl={finalContactImage}
+                            photoAlt={finalContactImageAlt}
+                            fallbackId="contact-section-image"
+                            className="size-full object-cover"
+                        />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ContactSection;

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

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from 'react';
+import type { FaqQuestion } from '../../types/api/faq';
+
+interface FAQGridProps {
+  config: {
+    pages?: any[];
+  };
+  faqs: FaqQuestion[];
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const FAQGrid = ({
+  config,
+  faqs: faqsData,
+  pageName = 'FAQ',
+  sectionKey = 'faq_page_section_2_faqs',
+}: FAQGridProps) => {
+  const faqs = Array.isArray(faqsData) ? faqsData : [];
+  
+  const title = 'Frequently Asked Questions';
+  const maxItems = undefined;
+  const displayFaqs = maxItems ? faqs.slice(0, maxItems) : faqs;
+  
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <section>
+      <div className="mx-auto max-w-3xl 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>
+
+        {displayFaqs.length > 0 ? (
+          <div className="space-y-4">
+            {displayFaqs.map((faq: any, i: number) => {
+              const isOpen = openIndex === i;
+              const answer = faq.answer_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+              
+              return (
+                <div key={faq.id} className="border-b border-secondary">
+                  <button
+                    onClick={() => setOpenIndex(isOpen ? null : i)}
+                    className="flex w-full items-center justify-between py-4 text-left"
+                  >
+                    <h3 className="font-display text-xl font-normal text-fg-primary">
+                      {faq.question}
+                    </h3>
+                    <span className="ml-4 text-fg-primary">
+                      {isOpen ? '−' : '+'}
+                    </span>
+                  </button>
+                  {isOpen && (
+                    <div className="pb-4">
+                      <p className="font-body text-base leading-relaxed text-tertiary">
+                        {answer}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="font-body text-base text-tertiary">No FAQs available</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('faq-grid', 'aman', FAQGrid);

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

@@ -0,0 +1,102 @@
+"use client";
+
+import React from 'react';
+import { Button } from '../elements';
+import type { FaqQuestion } from '../../types/api/faq';
+
+interface FAQGridProps {
+    config: {
+        pages?: any[];
+    };
+    faqs?: FaqQuestion[] | null;
+}
+
+// Simple markdown renderer - converts basic markdown to HTML
+const renderMarkdown = (content: string) => {
+    let html = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-brand-secondary underline">$1</a>');
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    html = html.replace(/_([^_]+)_/g, '<em>$1</em>');
+    html = html.replace(/\n/g, '<br />');
+    return html;
+};
+
+export const FAQGrid = ({
+    config,
+    faqs: faqsData,
+}: FAQGridProps) => {
+    const faqs = Array.isArray(faqsData) ? faqsData : [];
+    
+    const title = "Frequently asked questions";
+    const subtitle = "";
+    const ctaTitle = "Still have questions?";
+    const ctaSubtitle = "Can't find the answer you're looking for? Please chat to our friendly team.";
+    const ctaButtonText = "Get in touch";
+    const ctaButtonHref = "/contact";
+    const backgroundColor = "bg-primary";
+    const className = "";
+    
+    return (
+        <section className={`${backgroundColor} py-16 md:py-24 ${className}`} id="faq">
+            <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                <div className="flex w-full max-w-3xl flex-col">
+                    <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>
+
+                {faqs.length > 0 && (
+                    <div className="mt-12 md:mt-16">
+                        <dl className="grid w-full grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 md:gap-y-16 lg:grid-cols-3">
+                            {faqs.map((faq: FaqQuestion, index: number) => {
+                                const answerContent = faq.answer_markdown || '';
+                                const answerHtml = renderMarkdown(answerContent);
+                                
+                                return (
+                                    <div key={faq.id || index}>
+                                        <div className="flex max-w-sm flex-col">
+                                            <dt className="text-md font-semibold text-primary">{faq.question}</dt>
+                                            <dd 
+                                                className="mt-1 text-md text-tertiary"
+                                                dangerouslySetInnerHTML={{ __html: answerHtml }}
+                                            />
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </dl>
+                    </div>
+                )}
+
+                {(ctaTitle || ctaSubtitle || ctaButtonText) && (
+                    <div className="mt-12 flex flex-col items-start justify-between gap-6 rounded-2xl bg-secondary px-5 py-8 md:mt-16 md:flex-row md:gap-8 md:p-8">
+                        <div className="w-full max-w-3xl">
+                            {ctaTitle && (
+                                <h4 className="text-xl font-semibold text-primary">{ctaTitle}</h4>
+                            )}
+                            {ctaSubtitle && (
+                                <p className="mt-2 text-md text-tertiary md:text-lg">
+                                    {ctaSubtitle}
+                                </p>
+                            )}
+                        </div>
+                        {ctaButtonText && (
+                            <Button 
+                                size="xl" 
+                                href={ctaButtonHref}
+                            >
+                                {ctaButtonText}
+                            </Button>
+                        )}
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};

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

@@ -0,0 +1,92 @@
+"use client";
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+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 faqs = Array.isArray(faqsData) ? faqsData : [];
+  
+  const faqSection = pageName === 'Home' 
+  const title = 'Frequently Asked Questions';
+  const maxItems = undefined;
+  const displayFaqs = maxItems ? faqs.slice(0, maxItems) : faqs;
+  
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <section>
+      <div className="mx-auto max-w-3xl 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>
+
+        {displayFaqs.length > 0 ? (
+          <div className="space-y-4">
+            {displayFaqs.map((faq: any, i: number) => {
+              const isOpen = openIndex === i;
+              const answer = faq.answer_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+              
+              return (
+                <div key={faq.id} className="border-b border-secondary">
+                  <button
+                    onClick={() => setOpenIndex(isOpen ? null : i)}
+                    className="flex w-full items-center justify-between py-4 text-left"
+                  >
+                    <h3 className="font-display text-xl font-normal text-fg-primary">
+                      {faq.question}
+                    </h3>
+                    <span className="ml-4 text-fg-primary">
+                      {isOpen ? '−' : '+'}
+                    </span>
+                  </button>
+                  <motion.div
+                    initial={false}
+                    animate={{
+                      height: isOpen ? 'auto' : 0,
+                      opacity: isOpen ? 1 : 0,
+                    }}
+                    transition={{
+                      duration: 0.3,
+                      ease: [0.4, 0.0, 0.2, 1],
+                    }}
+                    style={{ overflow: 'hidden' }}
+                  >
+                    <div className="pb-4">
+                      <p className="font-body text-base leading-relaxed text-tertiary">
+                        {answer}
+                      </p>
+                    </div>
+                  </motion.div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="font-body text-base text-tertiary">No FAQs available</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('faq-home', 'aman', FAQHome);