@bailierich/booking-components 2.0.0

package/components/Sections/BeforeAfter.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+export interface Comparison {
+  id: string | number;
+  title?: string;
+  beforeImage?: string;
+  afterImage?: string;
+}
+
+export interface BeforeAfterProps {
+  title?: string;
+  comparisons?: Comparison[];
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function BeforeAfter({
+  title,
+  comparisons = [],
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: BeforeAfterProps) {
+  const mockComparisons = comparisons.length > 0 ? comparisons : [
+    { id: 1, title: 'Hair Transformation', beforeImage: '', afterImage: '' }
+  ];
+
+  return (
+    <section className="py-16 px-6">
+      <div className="max-w-7xl mx-auto">
+        <h2
+          className="text-3xl md:text-4xl font-bold text-center mb-12"
+          style={{ fontFamily: typography.headingFont, color: colors.text }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.title'
+          })}
+        >
+          {title || 'Results'}
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {mockComparisons.map((comparison, index) => (
+            <div key={comparison.id || index} className="space-y-4">
+              {comparison.title && (
+                <h3
+                  className="text-xl font-semibold text-center"
+                  style={{ color: colors.text }}
+                >
+                  {comparison.title}
+                </h3>
+              )}
+              <div className="relative aspect-[4/3] rounded-lg overflow-hidden">
+                <div
+                  className="absolute inset-0"
+                  style={{ backgroundColor: colors.primary, opacity: 0.1 }}
+                />
+                <div className="absolute top-4 left-4 bg-black/50 text-white px-3 py-1 rounded text-sm">
+                  Before
+                </div>
+                <div className="absolute top-4 right-4 bg-black/50 text-white px-3 py-1 rounded text-sm">
+                  After
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default BeforeAfter;

package/components/Sections/BookingSection.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+export interface BookingConfig {
+  theme?: {
+    colors?: {
+      primary: string;
+      secondary: string;
+      text: string;
+      bookingText?: string;
+    };
+    typography?: {
+      headingFont?: string;
+      bodyFont?: string;
+      bodySize?: string;
+    };
+  };
+  bookingSettings?: any; // Full booking flow configuration
+}
+
+export interface BookingSectionProps {
+  config: BookingConfig;
+  colors: {
+    primary: string;
+    secondary: string;
+    text: string;
+    bookingText?: string;
+  };
+  // Optional: If you want to pass a custom BookingFlow component
+  BookingFlowComponent?: React.ComponentType<any>;
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function BookingSection({
+  config,
+  colors,
+  BookingFlowComponent,
+  enableInlineEditing = false,
+  sectionId = ''
+}: BookingSectionProps) {
+  // This is a wrapper component that can render any booking flow
+  // If a custom component is provided, use it; otherwise show a placeholder
+
+  if (BookingFlowComponent) {
+    return (
+      <div className="container mx-auto px-4 py-16">
+        <BookingFlowComponent config={config} colors={colors} />
+      </div>
+    );
+  }
+
+  // Placeholder when no BookingFlow component is provided
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="max-w-4xl mx-auto text-center">
+        <div
+          className="p-12 rounded-2xl border-2 border-dashed"
+          style={{ borderColor: colors.primary, opacity: 0.5 }}
+        >
+          <div className="text-6xl mb-4">📅</div>
+          <h3
+            className="text-2xl font-bold mb-3"
+            style={{ color: colors.text }}
+          >
+            Booking Flow
+          </h3>
+          <p className="text-base opacity-70" style={{ color: colors.text }}>
+            Pass a BookingFlowComponent prop to render your custom booking flow here.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default BookingSection;

package/components/Sections/Contact.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+export interface ContactProps {
+  title?: string;
+  email?: string;
+  phone?: string;
+  address?: string;
+  showForm?: boolean;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function Contact({
+  title,
+  email = 'contact@example.com',
+  phone = '(555) 123-4567',
+  address = '123 Main Street, City, State 12345',
+  showForm = true,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: ContactProps) {
+  return (
+    <section className="py-16 px-6">
+      <div className="max-w-7xl mx-auto">
+        <h2
+          className="text-3xl md:text-4xl font-bold text-center mb-12"
+          style={{ fontFamily: typography.headingFont, color: colors.text }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.title'
+          })}
+        >
+          {title || 'Get In Touch'}
+        </h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <div className="space-y-6">
+            <div className="flex items-center gap-4">
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.primary }}>
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+              <span style={{ color: colors.text }}>{email}</span>
+            </div>
+            <div className="flex items-center gap-4">
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.primary }}>
+                <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>
+              <span style={{ color: colors.text }}>{phone}</span>
+            </div>
+            <div className="flex items-start gap-4">
+              <svg className="w-6 h-6 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.primary }}>
+                <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>
+              <span style={{ color: colors.text }}>{address}</span>
+            </div>
+          </div>
+
+          {showForm && (
+            <form className="space-y-4">
+              <input
+                type="text"
+                placeholder="Name"
+                className="w-full px-4 py-3 rounded-lg bg-white/10 backdrop-blur-sm border border-white/20"
+                style={{ color: colors.text }}
+              />
+              <input
+                type="email"
+                placeholder="Email"
+                className="w-full px-4 py-3 rounded-lg bg-white/10 backdrop-blur-sm border border-white/20"
+                style={{ color: colors.text }}
+              />
+              <textarea
+                placeholder="Message"
+                rows={4}
+                className="w-full px-4 py-3 rounded-lg bg-white/10 backdrop-blur-sm border border-white/20"
+                style={{ color: colors.text }}
+              />
+              <button
+                type="submit"
+                className="w-full px-6 py-3 rounded-lg font-semibold transition-all hover:scale-105"
+                style={{ backgroundColor: colors.primary, color: '#FFFFFF' }}
+              >
+                Send Message
+              </button>
+            </form>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Contact;

package/components/Sections/FAQSection.tsx

@@ -0,0 +1,239 @@
+'use client';
+
+import { useState } from 'react';
+
+export interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+export interface FAQSectionProps {
+  title?: string;
+  faqs: FAQItem[];
+  layout?: 'accordion' | 'stacked';
+  maxWidth?: 'full' | 'large' | 'medium' | 'small';
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography?: {
+    headingFont?: string;
+    bodyFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+function FAQAccordionItem({
+  faq,
+  index,
+  colors,
+  typography,
+  enableInlineEditing,
+  sectionId
+}: {
+  faq: FAQItem;
+  index: number;
+  colors: any;
+  typography: any;
+  enableInlineEditing: boolean;
+  sectionId: string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div
+      className="border-b border-opacity-10"
+      style={{ borderColor: colors.text }}
+    >
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full py-4 px-6 flex items-center justify-between text-left hover:bg-opacity-5 transition-colors"
+        style={{
+          backgroundColor: isOpen ? `${colors.primary}10` : 'transparent'
+        }}
+      >
+        <span
+          className="font-semibold text-lg pr-4"
+          style={{
+            color: colors.text,
+            fontFamily: typography?.headingFont || 'inherit'
+          }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': `settings.faqs.${index}.question`
+          })}
+        >
+          {faq.question || 'Add question...'}
+        </span>
+        <svg
+          className="w-5 h-5 flex-shrink-0 transition-transform"
+          style={{
+            color: colors.primary,
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
+          }}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+      {isOpen && (
+        <div
+          className="px-6 pb-4 pt-2"
+          style={{
+            color: colors.text,
+            opacity: 0.8,
+            fontFamily: typography?.bodyFont || 'inherit'
+          }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': `settings.faqs.${index}.answer`
+          })}
+        >
+          {faq.answer || 'Add answer...'}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FAQSection({
+  title = 'Frequently Asked Questions',
+  faqs = [],
+  layout = 'accordion',
+  maxWidth = 'large',
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: FAQSectionProps) {
+  // Max width classes
+  const maxWidthMap = {
+    full: 'max-w-full',
+    large: 'max-w-4xl',
+    medium: 'max-w-3xl',
+    small: 'max-w-2xl'
+  };
+
+  return (
+    <div className="container mx-auto px-4">
+      <div className={`${maxWidthMap[maxWidth]} mx-auto`}>
+        {/* Title */}
+        {title && (
+          <h2
+            className="text-3xl font-bold text-center mb-8"
+            style={{
+              color: colors.text,
+              fontFamily: typography?.headingFont || 'inherit'
+            }}
+            {...(enableInlineEditing && {
+              'data-editable': true,
+              'data-section-id': sectionId,
+              'data-field-path': 'settings.title'
+            })}
+          >
+            {title}
+          </h2>
+        )}
+
+        {/* FAQ Items */}
+        {faqs.length > 0 ? (
+          <div
+            className="rounded-lg overflow-hidden"
+            style={{
+              border: `1px solid ${colors.text}20`,
+              backgroundColor: `${colors.primary}05`
+            }}
+          >
+            {faqs.map((faq, index) => (
+              layout === 'accordion' ? (
+                <FAQAccordionItem
+                  key={index}
+                  faq={faq}
+                  index={index}
+                  colors={colors}
+                  typography={typography}
+                  enableInlineEditing={enableInlineEditing}
+                  sectionId={sectionId}
+                />
+              ) : (
+                // Stacked layout (always expanded)
+                <div
+                  key={index}
+                  className="border-b border-opacity-10 last:border-b-0 p-6"
+                  style={{ borderColor: colors.text }}
+                >
+                  <h3
+                    className="font-semibold text-lg mb-2"
+                    style={{
+                      color: colors.text,
+                      fontFamily: typography?.headingFont || 'inherit'
+                    }}
+                    {...(enableInlineEditing && {
+                      'data-editable': true,
+                      'data-section-id': sectionId,
+                      'data-field-path': `settings.faqs.${index}.question`
+                    })}
+                  >
+                    {faq.question || 'Add question...'}
+                  </h3>
+                  <p
+                    style={{
+                      color: colors.text,
+                      opacity: 0.8,
+                      fontFamily: typography?.bodyFont || 'inherit'
+                    }}
+                    {...(enableInlineEditing && {
+                      'data-editable': true,
+                      'data-section-id': sectionId,
+                      'data-field-path': `settings.faqs.${index}.answer`
+                    })}
+                  >
+                    {faq.answer || 'Add answer...'}
+                  </p>
+                </div>
+              )
+            ))}
+          </div>
+        ) : (
+          // Empty state
+          <div
+            className="p-12 rounded-lg border-2 border-dashed text-center"
+            style={{
+              borderColor: `${colors.primary}30`,
+              backgroundColor: `${colors.primary}05`
+            }}
+          >
+            <svg
+              className="w-12 h-12 mx-auto mb-4"
+              fill="none"
+              stroke={colors.primary}
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <p style={{ color: colors.text, opacity: 0.6 }}>
+              Add FAQ items to get started
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FAQSection;

package/components/Sections/FeatureContent.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+export interface FeatureContentProps {
+  headline?: string;
+  description?: string;
+  image?: string;
+  buttonText?: string;
+  buttonUrl?: string;
+  layout?: 'image-left' | 'image-right' | 'image-top';
+  showButton?: boolean;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function FeatureContent({
+  headline,
+  description,
+  image,
+  buttonText,
+  buttonUrl,
+  layout = 'image-right',
+  showButton = true,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: FeatureContentProps) {
+  const imageSection = (
+    <div className="w-full h-full aspect-video rounded-lg overflow-hidden bg-gray-100">
+      {image ? (
+        <img
+          src={image}
+          alt={headline || 'Feature image'}
+          className="w-full h-full object-cover"
+        />
+      ) : (
+        <div
+          className="w-full h-full flex items-center justify-center"
+          style={{ backgroundColor: colors.primary, opacity: 0.2 }}
+        >
+          <span className="text-sm opacity-50">Add image</span>
+        </div>
+      )}
+    </div>
+  );
+
+  const contentSection = (
+    <div className="space-y-4">
+      <h2
+        className="text-3xl font-bold"
+        style={{
+          fontFamily: typography.headingFont,
+          color: colors.text
+        }}
+        {...(enableInlineEditing && {
+          'data-editable': true,
+          'data-section-id': sectionId,
+          'data-field-path': 'settings.headline'
+        })}
+      >
+        {headline || 'Feature Headline'}
+      </h2>
+      <p
+        className="text-lg opacity-80"
+        style={{ color: colors.text }}
+        {...(enableInlineEditing && {
+          'data-editable': true,
+          'data-section-id': sectionId,
+          'data-field-path': 'settings.description'
+        })}
+      >
+        {description || 'Feature description goes here...'}
+      </p>
+      {showButton && (
+        <a
+          href={buttonUrl || '#'}
+          className="inline-block px-6 py-3 rounded-lg font-semibold transition-all hover:scale-105"
+          style={{
+            backgroundColor: colors.primary,
+            color: '#FFFFFF'
+          }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.buttonText'
+          })}
+        >
+          {buttonText || 'Learn More'}
+        </a>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className={`grid md:grid-cols-2 gap-12 items-center ${layout === 'image-top' ? 'grid-cols-1' : ''}`}>
+        {layout === 'image-left' && imageSection}
+        {contentSection}
+        {layout === 'image-right' && imageSection}
+        {layout === 'image-top' && imageSection}
+      </div>
+    </div>
+  );
+}
+
+export default FeatureContent;