@bailierich/booking-components 2.0.0

package/components/Sections/FeaturedLink.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+export interface FeaturedLinkProps {
+  text?: string;
+  url?: string;
+  style?: 'gradient' | 'solid' | 'outline';
+  size?: 'small' | 'medium' | 'large';
+  colors: {
+    primary: string;
+    secondary: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function FeaturedLink({
+  text,
+  url,
+  style = 'gradient',
+  size = 'large',
+  colors,
+  enableInlineEditing = false,
+  sectionId = ''
+}: FeaturedLinkProps) {
+  const getClassName = () => {
+    let sizeClasses = '';
+    switch (size) {
+      case 'small':
+        sizeClasses = 'p-3 text-base';
+        break;
+      case 'medium':
+        sizeClasses = 'p-4 text-lg';
+        break;
+      case 'large':
+        sizeClasses = 'p-5 text-xl';
+        break;
+      default:
+        sizeClasses = 'p-5 text-xl';
+    }
+
+    let styleClasses = '';
+    switch (style) {
+      case 'gradient':
+        styleClasses = 'rounded-full';
+        break;
+      case 'solid':
+        styleClasses = 'rounded-lg';
+        break;
+      case 'outline':
+        styleClasses = 'rounded-full border-2';
+        break;
+      default:
+        styleClasses = 'rounded-full';
+    }
+
+    return `block max-w-2xl mx-auto ${sizeClasses} ${styleClasses} text-center font-semibold transition-all hover:scale-105 hover:shadow-xl`;
+  };
+
+  const getStyle = () => {
+    switch (style) {
+      case 'gradient':
+        return {
+          background: `linear-gradient(135deg, ${colors.primary} 0%, ${colors.secondary} 100%)`,
+          color: '#FFFFFF'
+        };
+      case 'solid':
+        return {
+          backgroundColor: colors.primary,
+          color: '#FFFFFF'
+        };
+      case 'outline':
+        return {
+          backgroundColor: 'transparent',
+          borderColor: colors.primary,
+          color: colors.primary
+        };
+      default:
+        return {
+          backgroundColor: colors.primary,
+          color: '#FFFFFF'
+        };
+    }
+  };
+
+  return (
+    <div className="container mx-auto px-4">
+      <a
+        href={url || '/book'}
+        className={getClassName()}
+        style={getStyle()}
+        {...(enableInlineEditing && {
+          'data-editable': true,
+          'data-section-id': sectionId,
+          'data-field-path': 'settings.text'
+        })}
+      >
+        {text || '💅 Book Now'}
+      </a>
+    </div>
+  );
+}
+
+export default FeaturedLink;

package/components/Sections/FixedInfoCard.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+export interface CardLink {
+  id: string;
+  label: string;
+  url: string;
+}
+
+export interface FixedInfoCardProps {
+  name?: string;
+  subheading?: string;
+  bio?: string;
+  links?: CardLink[];
+  bookingButtonText?: string;
+  bookingButtonUrl?: string;
+  showBookingButton?: boolean;
+  position?: 'bottom-left' | 'bottom-right' | 'bottom-center';
+  cardWidth?: 'small' | 'medium' | 'large';
+  cardColor?: string;
+  colors: {
+    primary: string;
+    text: string;
+    buttonText?: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function FixedInfoCard({
+  name,
+  subheading,
+  bio,
+  links = [],
+  bookingButtonText,
+  bookingButtonUrl,
+  showBookingButton = true,
+  position = 'bottom-left',
+  cardWidth = 'medium',
+  cardColor = '#FFFFFF',
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: FixedInfoCardProps) {
+  const hexToRgba = (hex: string, alpha: number) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  };
+
+  const widthMap = {
+    small: '280px',
+    medium: '320px',
+    large: '400px'
+  };
+
+  const positionClasses = {
+    'bottom-left': 'bottom-0 left-0',
+    'bottom-right': 'bottom-0 right-0',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2'
+  };
+
+  const textAlignClass = position === 'bottom-left' ? 'text-left' : position === 'bottom-right' ? 'text-right' : 'text-center';
+  const subheadingAlign = position === 'bottom-left' ? 'justify-start' : position === 'bottom-right' ? 'justify-end' : 'justify-center';
+
+  const getRoundedClass = () => {
+    if (position === 'bottom-left') {
+      return 'rounded-tr-3xl rounded-tl-none';
+    } else if (position === 'bottom-right') {
+      return 'rounded-tl-3xl rounded-tr-none';
+    } else {
+      return 'rounded-t-3xl';
+    }
+  };
+
+  return (
+    <div
+      className={`fixed z-50 ${positionClasses[position]}`}
+      style={{ width: widthMap[cardWidth] }}
+    >
+      <div
+        className={`${getRoundedClass()} shadow-2xl border-t border-x`}
+        style={{
+          backgroundColor: hexToRgba(cardColor, 0.9),
+          borderColor: hexToRgba(cardColor, 0.3),
+          boxShadow: '0 -10px 40px rgba(0, 0, 0, 0.1)'
+        }}
+      >
+        <div className={`px-8 pt-8 pb-3 ${textAlignClass}`}>
+          <h3
+            className="text-2xl font-bold"
+            style={{
+              fontFamily: typography.headingFont,
+              color: colors.text
+            }}
+            {...(enableInlineEditing && {
+              'data-editable': true,
+              'data-section-id': sectionId,
+              'data-field-path': 'settings.name'
+            })}
+          >
+            {name || 'Your Name'}
+          </h3>
+        </div>
+
+        <div className="mb-6">
+          {subheading ? (
+            <div className={`flex items-center gap-3 px-8 ${subheadingAlign}`}>
+              <span
+                className="text-xs font-medium whitespace-nowrap"
+                style={{ color: colors.primary }}
+                {...(enableInlineEditing && {
+                  'data-editable': true,
+                  'data-section-id': sectionId,
+                  'data-field-path': 'settings.subheading'
+                })}
+              >
+                {subheading}
+              </span>
+              <div className="flex-1 h-px" style={{ backgroundColor: colors.primary, opacity: 0.3 }} />
+            </div>
+          ) : (
+            <div className="w-full h-px" style={{ backgroundColor: colors.primary, opacity: 0.3 }} />
+          )}
+        </div>
+
+        <div className={`px-8 pb-8 ${textAlignClass}`}>
+          <p
+            className="text-sm opacity-80 mb-4"
+            style={{ color: colors.text }}
+            {...(enableInlineEditing && {
+              'data-editable': true,
+              'data-section-id': sectionId,
+              'data-field-path': 'settings.bio'
+            })}
+          >
+            {bio || 'Transforming beauty, one client at a time ✨'}
+          </p>
+
+          {links.length > 0 && (
+            <div className="space-y-2 mb-4">
+              {links.map((link, index) => (
+                <a
+                  key={link.id}
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block text-sm font-medium hover:opacity-70 transition-opacity"
+                  style={{ color: colors.primary }}
+                  {...(enableInlineEditing && {
+                    'data-editable': true,
+                    'data-section-id': sectionId,
+                    'data-field-path': `settings.links.${index}.label`
+                  })}
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          )}
+
+          {showBookingButton && (
+            <a
+              href={bookingButtonUrl || '/book'}
+              className="block w-full py-3 px-4 rounded-xl text-center font-semibold transition-all hover:scale-105 hover:shadow-lg"
+              style={{
+                backgroundColor: colors.primary,
+                color: colors.buttonText || '#FFFFFF'
+              }}
+              {...(enableInlineEditing && {
+                'data-editable': true,
+                'data-section-id': sectionId,
+                'data-field-path': 'settings.bookingButtonText'
+              })}
+            >
+              {bookingButtonText || 'Book Appointment'}
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FixedInfoCard;

package/components/Sections/Gallery.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+export interface GalleryImage {
+  id: string | number;
+  url?: string;
+  alt?: string;
+}
+
+export interface GalleryProps {
+  title?: string;
+  images?: GalleryImage[];
+  columns?: 2 | 3 | 4;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function Gallery({
+  title,
+  images = [],
+  columns = 3,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: GalleryProps) {
+  const galleryGridMap = {
+    2: 'grid-cols-2',
+    3: 'grid-cols-2 md:grid-cols-3',
+    4: 'grid-cols-2 md:grid-cols-4'
+  };
+
+  const imagesToShow = images.length > 0 ? images : [1, 2, 3, 4, 5, 6].map(i => ({ id: i, url: undefined }));
+
+  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 || 'Gallery'}
+        </h2>
+        <div className={`grid ${galleryGridMap[columns]} gap-4`}>
+          {imagesToShow.map((img, i) => (
+            <div
+              key={img.id || i}
+              className="relative aspect-square overflow-hidden rounded-lg group"
+            >
+              {img.url ? (
+                <img
+                  src={img.url}
+                  alt={img.alt || ''}
+                  className="w-full h-full object-cover transition-transform group-hover:scale-110"
+                />
+              ) : (
+                <div
+                  className="w-full h-full flex items-center justify-center transition-transform group-hover:scale-110"
+                  style={{ backgroundColor: colors.primary, opacity: 0.2 }}
+                >
+                  <span className="text-sm opacity-50">Add image</span>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Gallery;

package/components/Sections/Header.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+export interface HeaderProps {
+  name?: string;
+  title?: string;
+  bio?: string;
+  showName?: boolean;
+  showTitle?: boolean;
+  showBio?: boolean;
+  colors: {
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function Header({
+  name,
+  title,
+  bio,
+  showName = true,
+  showTitle = true,
+  showBio = true,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: HeaderProps) {
+  return (
+    <div className="container mx-auto px-4 text-center">
+      {showName && (
+        <h1
+          className="text-4xl font-bold mb-3"
+          style={{
+            fontFamily: typography.headingFont,
+            color: colors.text
+          }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.name'
+          })}
+        >
+          {name || 'Your Name'}
+        </h1>
+      )}
+      {showTitle && (
+        <p
+          className="text-lg opacity-80 mb-2"
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.title'
+          })}
+        >
+          {title || 'Beauty Professional'}
+        </p>
+      )}
+      {showBio && (
+        <p
+          className="text-base opacity-70 max-w-md mx-auto"
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.bio'
+          })}
+        >
+          {bio || 'Transform your look ✨'}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default Header;

package/components/Sections/Hero.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+export interface HeroProps {
+  headline?: string;
+  subheadline?: string;
+  heroImage?: string;
+  ctaButton?: {
+    text: string;
+    url: string;
+  };
+  layout?: 'split' | 'full';
+  imagePosition?: 'left' | 'right';
+  contentDisplay?: 'side' | 'overlay';
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function Hero({
+  headline,
+  subheadline,
+  heroImage,
+  ctaButton,
+  layout = 'split',
+  imagePosition = 'right',
+  contentDisplay = 'side',
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: HeroProps) {
+  const heroContent = (
+    <div className={layout === 'full' ? 'text-center max-w-4xl z-10' : 'text-left'}>
+      <h1
+        className={layout === 'full' ? 'text-5xl md:text-6xl font-bold mb-6' : 'text-5xl font-bold mb-4'}
+        style={{
+          fontFamily: typography.headingFont,
+          color: layout === 'full' && heroImage ? '#FFFFFF' : colors.text,
+          textShadow: layout === 'full' && heroImage ? '0 2px 10px rgba(0,0,0,0.3)' : 'none'
+        }}
+        {...(enableInlineEditing && {
+          'data-editable': true,
+          'data-section-id': sectionId,
+          'data-field-path': 'settings.headline'
+        })}
+      >
+        {headline || 'Welcome'}
+      </h1>
+      {subheadline && (
+        <p
+          className={layout === 'full' ? 'text-xl md:text-2xl opacity-90 mb-12' : 'text-xl opacity-80 mb-8'}
+          style={{
+            color: layout === 'full' && heroImage ? '#FFFFFF' : colors.text,
+            textShadow: layout === 'full' && heroImage ? '0 2px 10px rgba(0,0,0,0.3)' : 'none'
+          }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.subheadline'
+          })}
+        >
+          {subheadline}
+        </p>
+      )}
+      {ctaButton && (
+        <a
+          href={ctaButton.url || '#'}
+          className="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition-all hover:scale-105 shadow-lg"
+          style={{
+            backgroundColor: colors.primary,
+            color: '#FFFFFF'
+          }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.ctaButton.text'
+          })}
+        >
+          {ctaButton.text || 'Get Started'}
+        </a>
+      )}
+    </div>
+  );
+
+  const heroImageElement = heroImage ? (
+    <div className="w-full h-full rounded-2xl overflow-hidden">
+      <img
+        src={heroImage}
+        alt={headline || 'Hero'}
+        className="w-full h-full object-cover"
+      />
+    </div>
+  ) : (
+    <div
+      className="w-full h-full rounded-2xl flex items-center justify-center"
+      style={{ backgroundColor: colors.primary, opacity: 0.1 }}
+    >
+      <span className="text-sm opacity-50">Add hero image</span>
+    </div>
+  );
+
+  if (layout === 'full') {
+    return (
+      <div
+        className="relative py-20 md:py-24 px-4 flex items-center justify-center"
+        style={{
+          backgroundImage: heroImage ? `url(${heroImage})` : 'none',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundColor: !heroImage ? colors.primary : 'transparent',
+          opacity: !heroImage ? 0.1 : 1
+        }}
+      >
+        {heroImage && (
+          <div className="absolute inset-0 bg-black/40" />
+        )}
+        {heroContent}
+      </div>
+    );
+  }
+
+  if (contentDisplay === 'overlay') {
+    return (
+      <div className="container mx-auto px-4 py-16">
+        <div className="relative max-w-6xl mx-auto rounded-2xl overflow-hidden" style={{ height: '500px' }}>
+          {heroImage ? (
+            <img
+              src={heroImage}
+              alt={headline || 'Hero'}
+              className="absolute inset-0 w-full h-full object-cover"
+            />
+          ) : (
+            <div
+              className="absolute inset-0"
+              style={{ backgroundColor: colors.primary, opacity: 0.1 }}
+            />
+          )}
+          <div className="absolute inset-0 bg-gradient-to-r from-black/60 to-black/20" />
+          <div
+            className={`relative h-full flex items-center ${imagePosition === 'left' ? 'justify-end' : 'justify-start'} px-12`}
+          >
+            <div className="max-w-lg" style={{ color: '#FFFFFF', textShadow: '0 2px 10px rgba(0,0,0,0.3)' }}>
+              {heroContent}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
+        {imagePosition === 'left' && (
+          <div className="aspect-[4/3]">
+            {heroImageElement}
+          </div>
+        )}
+        <div>
+          {heroContent}
+        </div>
+        {imagePosition === 'right' && (
+          <div className="aspect-[4/3]">
+            {heroImageElement}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Hero;