@bailierich/booking-components 2.0.0

package/components/Sections/MinimalNavigation.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+export interface NavLink {
+  id: string;
+  label: string;
+  url: string;
+  linkType?: 'internal' | 'external';
+}
+
+export interface MinimalNavigationProps {
+  links: NavLink[];
+  style?: 'horizontal' | 'vertical';
+  colors: {
+    text: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function MinimalNavigation({
+  links,
+  style = 'horizontal',
+  colors,
+  enableInlineEditing = false,
+  sectionId = ''
+}: MinimalNavigationProps) {
+  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, url: string) => {
+    if (url.startsWith('#')) {
+      e.preventDefault();
+      const sectionId = url.substring(1);
+      const element = document.querySelector(`[data-section-id="${sectionId}"]`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  };
+
+  return (
+    <nav className="container mx-auto px-4 py-4">
+      <div className={`flex ${style === 'vertical' ? 'flex-col space-y-2' : 'flex-row space-x-6 justify-center'}`}>
+        {links.map((link, index) => (
+          <a
+            key={link.id}
+            href={link.url}
+            onClick={(e) => handleNavClick(e, link.url)}
+            className="text-base font-medium transition-colors hover:opacity-70"
+            style={{ color: colors.text }}
+            {...(link.linkType === 'external' && !link.url.startsWith('#') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+            {...(enableInlineEditing && {
+              'data-editable': true,
+              'data-section-id': sectionId,
+              'data-field-path': `settings.links.${index}.label`
+            })}
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
+export default MinimalNavigation;

package/components/Sections/Navbar.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export interface NavbarLink {
+  id: string;
+  label: string;
+  url: string;
+  linkType?: 'internal' | 'external';
+}
+
+export interface NavbarProps {
+  brandName?: string;
+  logoUrl?: string;
+  showLogo?: boolean;
+  showBrandName?: boolean;
+  links: NavbarLink[];
+  ctaText?: string;
+  ctaUrl?: string;
+  sticky?: boolean;
+  transparentOnTop?: boolean;
+  colors: {
+    primary: string;
+    text: string;
+    buttonText?: string;
+  };
+  typography?: {
+    headingFont?: string;
+    bodyFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function Navbar({
+  brandName = 'Your Brand',
+  logoUrl,
+  showLogo = true,
+  showBrandName = true,
+  links = [],
+  ctaText,
+  ctaUrl,
+  sticky = true,
+  transparentOnTop = false,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: NavbarProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const [activeSection, setActiveSection] = useState('');
+
+  // Handle scroll for sticky navbar effects
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Track active section for navigation highlighting
+  useEffect(() => {
+    const handleScroll = () => {
+      const sections = links
+        .filter(link => link.url.startsWith('#'))
+        .map(link => document.querySelector(`[data-section-id="${link.url.substring(1)}"]`))
+        .filter(Boolean);
+
+      let currentSection = '';
+      sections.forEach((section) => {
+        if (section) {
+          const rect = section.getBoundingClientRect();
+          if (rect.top <= 100 && rect.bottom >= 100) {
+            currentSection = section.getAttribute('data-section-id') || '';
+          }
+        }
+      });
+
+      setActiveSection(currentSection);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [links]);
+
+  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, url: string) => {
+    if (url.startsWith('#')) {
+      e.preventDefault();
+      const sectionId = url.substring(1);
+      const element = document.querySelector(`[data-section-id="${sectionId}"]`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+      setMobileMenuOpen(false);
+    }
+  };
+
+  const isTransparent = transparentOnTop && !scrolled;
+  const navbarBg = isTransparent
+    ? 'bg-transparent'
+    : sticky
+    ? 'bg-white/80 backdrop-blur-md border-b'
+    : 'bg-white border-b';
+
+  return (
+    <nav
+      className={`${sticky ? 'sticky top-0 z-50' : ''} ${navbarBg} transition-all duration-300`}
+      style={{
+        borderColor: isTransparent ? 'transparent' : `${colors.primary}20`
+      }}
+    >
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16 md:h-20">
+          {/* Logo & Brand */}
+          <div className="flex items-center gap-3">
+            {showLogo && logoUrl && (
+              <img
+                src={logoUrl}
+                alt={brandName}
+                className="h-8 md:h-10 w-auto object-contain"
+              />
+            )}
+            {showBrandName && (
+              <h1
+                className="text-xl md:text-2xl font-bold"
+                style={{
+                  fontFamily: typography?.headingFont || 'inherit',
+                  color: colors.text
+                }}
+                {...(enableInlineEditing && {
+                  'data-editable': true,
+                  'data-section-id': sectionId,
+                  'data-field-path': 'settings.brandName'
+                })}
+              >
+                {brandName}
+              </h1>
+            )}
+          </div>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-8">
+            {links.map((link, index) => {
+              const isActive = link.url.startsWith('#') && link.url.substring(1) === activeSection;
+              return (
+                <a
+                  key={link.id}
+                  href={link.url}
+                  onClick={(e) => handleNavClick(e, link.url)}
+                  className="relative text-base font-medium transition-colors group"
+                  style={{
+                    color: isActive ? colors.primary : colors.text,
+                    fontFamily: typography?.bodyFont || 'inherit'
+                  }}
+                  {...(link.linkType === 'external' && !link.url.startsWith('#') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                  {...(enableInlineEditing && {
+                    'data-editable': true,
+                    'data-section-id': sectionId,
+                    'data-field-path': `settings.links.${index}.label`
+                  })}
+                >
+                  {link.label}
+                  {/* Active indicator */}
+                  <span
+                    className={`absolute -bottom-1 left-0 h-0.5 transition-all ${isActive ? 'w-full' : 'w-0 group-hover:w-full'}`}
+                    style={{ backgroundColor: colors.primary }}
+                  />
+                </a>
+              );
+            })}
+
+            {/* CTA Button */}
+            {ctaText && ctaUrl && (
+              <a
+                href={ctaUrl}
+                className="px-6 py-2.5 rounded-full font-semibold transition-all hover:opacity-90 hover:scale-105"
+                style={{
+                  backgroundColor: colors.primary,
+                  color: colors.buttonText || '#FFFFFF',
+                  fontFamily: typography?.bodyFont || 'inherit'
+                }}
+              >
+                {ctaText}
+              </a>
+            )}
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            className="md:hidden p-2 rounded-lg transition-colors hover:bg-black/5"
+            aria-label="Toggle menu"
+          >
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              stroke={colors.text}
+              viewBox="0 0 24 24"
+            >
+              {mobileMenuOpen ? (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              )}
+            </svg>
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        <div
+          className={`md:hidden overflow-hidden transition-all duration-300 ${mobileMenuOpen ? 'max-h-96 pb-4' : 'max-h-0'}`}
+        >
+          <div className="flex flex-col space-y-3 pt-4 border-t" style={{ borderColor: `${colors.primary}20` }}>
+            {links.map((link, index) => {
+              const isActive = link.url.startsWith('#') && link.url.substring(1) === activeSection;
+              return (
+                <a
+                  key={link.id}
+                  href={link.url}
+                  onClick={(e) => handleNavClick(e, link.url)}
+                  className="text-base font-medium py-2 px-4 rounded-lg transition-colors"
+                  style={{
+                    color: isActive ? colors.primary : colors.text,
+                    backgroundColor: isActive ? `${colors.primary}10` : 'transparent',
+                    fontFamily: typography?.bodyFont || 'inherit'
+                  }}
+                  {...(link.linkType === 'external' && !link.url.startsWith('#') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                >
+                  {link.label}
+                </a>
+              );
+            })}
+
+            {/* Mobile CTA Button */}
+            {ctaText && ctaUrl && (
+              <a
+                href={ctaUrl}
+                className="px-6 py-3 rounded-full font-semibold text-center transition-all hover:opacity-90"
+                style={{
+                  backgroundColor: colors.primary,
+                  color: colors.buttonText || '#FFFFFF',
+                  fontFamily: typography?.bodyFont || 'inherit'
+                }}
+              >
+                {ctaText}
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;

package/components/Sections/PricingTable.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+export interface PricingPlan {
+  id: string | number;
+  name: string;
+  price: number;
+  features: string[];
+  featured?: boolean;
+}
+
+export interface PricingTableProps {
+  title?: string;
+  plans?: PricingPlan[];
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function PricingTable({
+  title,
+  plans = [],
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: PricingTableProps) {
+  const mockPlans = plans.length > 0 ? plans : [
+    { id: 1, name: 'Basic', price: 50, features: ['Service 1', 'Service 2'] },
+    { id: 2, name: 'Premium', price: 100, features: ['Service 1', 'Service 2', 'Service 3'], featured: true },
+    { id: 3, name: 'Deluxe', price: 150, features: ['All Services', 'Priority Booking'] }
+  ];
+
+  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 || 'Pricing'}
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {mockPlans.map((plan) => (
+            <div
+              key={plan.id}
+              className={`p-8 rounded-lg border-2 ${
+                plan.featured ? 'scale-105 shadow-xl' : ''
+              }`}
+              style={{
+                borderColor: plan.featured ? colors.primary : 'rgba(255,255,255,0.1)',
+                backgroundColor: plan.featured ? `${colors.primary}15` : 'rgba(255,255,255,0.05)'
+              }}
+            >
+              <h3
+                className="text-2xl font-bold mb-2 text-center"
+                style={{ color: colors.text }}
+              >
+                {plan.name}
+              </h3>
+              <div className="text-center mb-6">
+                <span
+                  className="text-4xl font-bold"
+                  style={{ color: colors.primary }}
+                >
+                  ${plan.price}
+                </span>
+              </div>
+              <ul className="space-y-3 mb-6">
+                {plan.features.map((feature, i) => (
+                  <li key={i} className="flex items-center gap-2">
+                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.primary }}>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span style={{ color: colors.text }}>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <button
+                className="w-full px-6 py-3 rounded-lg font-semibold transition-all hover:scale-105"
+                style={{
+                  backgroundColor: plan.featured ? colors.primary : 'rgba(255,255,255,0.1)',
+                  color: plan.featured ? '#FFFFFF' : colors.text
+                }}
+              >
+                Choose Plan
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default PricingTable;

package/components/Sections/ScrollingTextDivider.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useState } from 'react';
+
+export interface ScrollingTextDividerProps {
+  text: string;
+  scrollDirection?: 'left' | 'right';
+  scrollSpeed?: 'slow' | 'medium' | 'fast' | number;
+  orientation?: 'horizontal' | 'diagonal-left' | 'diagonal-right';
+  dividerIcon?: 'bullet' | 'star' | 'diamond' | 'custom' | 'none';
+  customIcon?: string;
+  textSize?: 'small' | 'medium' | 'large' | 'xl';
+  textColor?: string;
+  fontWeight?: 'light' | 'normal' | 'bold';
+  backgroundColor?: string;
+  backgroundGradient?: string;
+  pauseOnHover?: boolean;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography?: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function ScrollingTextDivider({
+  text = 'SCROLL TEXT',
+  scrollDirection = 'left',
+  scrollSpeed = 'medium',
+  orientation = 'horizontal',
+  dividerIcon = 'bullet',
+  customIcon,
+  textSize = 'medium',
+  textColor,
+  fontWeight = 'bold',
+  backgroundColor,
+  backgroundGradient,
+  pauseOnHover = true,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: ScrollingTextDividerProps) {
+  const [isPaused, setIsPaused] = useState(false);
+
+  // Icon mapping
+  const iconMap = {
+    bullet: '•',
+    star: '★',
+    diamond: '◆',
+    custom: customIcon || '•',
+    none: ''
+  };
+
+  const icon = iconMap[dividerIcon];
+
+  // Speed mapping (duration in seconds)
+  const speedMap = {
+    slow: 60,
+    medium: 30,
+    fast: 15
+  };
+
+  const duration = typeof scrollSpeed === 'number' ? scrollSpeed : speedMap[scrollSpeed];
+
+  // Text size mapping
+  const textSizeMap = {
+    small: 'text-xl md:text-2xl',
+    medium: 'text-2xl md:text-4xl',
+    large: 'text-3xl md:text-5xl',
+    xl: 'text-4xl md:text-6xl'
+  };
+
+  // Font weight mapping
+  const fontWeightMap = {
+    light: 'font-light',
+    normal: 'font-normal',
+    bold: 'font-bold'
+  };
+
+  // Orientation angle
+  const rotationMap = {
+    horizontal: '0deg',
+    'diagonal-left': '-5deg',
+    'diagonal-right': '5deg'
+  };
+
+  // Create repeating text with icons
+  const repeatingText = icon
+    ? `${text} ${icon} `.repeat(20)
+    : `${text} `.repeat(20);
+
+  // Background style
+  const bgStyle = backgroundGradient
+    ? { background: backgroundGradient }
+    : { backgroundColor: backgroundColor || 'transparent' };
+
+  return (
+    <div
+      className="relative overflow-hidden py-3"
+      style={{
+        ...bgStyle,
+        transform: `rotate(${rotationMap[orientation]})`
+      }}
+      onMouseEnter={() => pauseOnHover && setIsPaused(true)}
+      onMouseLeave={() => pauseOnHover && setIsPaused(false)}
+    >
+      <style>{`
+        @keyframes scroll-${scrollDirection} {
+          0% {
+            transform: translateX(${scrollDirection === 'left' ? '0%' : '-50%'});
+          }
+          100% {
+            transform: translateX(${scrollDirection === 'left' ? '-50%' : '0%'});
+          }
+        }
+      `}</style>
+
+      <div
+        className={`flex items-center whitespace-nowrap ${textSizeMap[textSize]} ${fontWeightMap[fontWeight]} uppercase tracking-wider`}
+        style={{
+          fontFamily: typography?.headingFont || 'inherit',
+          color: textColor || colors.text,
+          animation: `scroll-${scrollDirection} ${duration}s linear infinite`,
+          animationPlayState: isPaused ? 'paused' : 'running'
+        }}
+      >
+        <span className="inline-block">{repeatingText}</span>
+        <span className="inline-block" aria-hidden="true">{repeatingText}</span>
+      </div>
+    </div>
+  );
+}
+
+export default ScrollingTextDivider;

package/components/Sections/ScrollingTextDivider.tsx.bak

@@ -0,0 +1,138 @@
+'use client';
+
+import { useState } from 'react';
+
+export interface ScrollingTextDividerProps {
+  text: string;
+  scrollDirection?: 'left' | 'right';
+  scrollSpeed?: 'slow' | 'medium' | 'fast' | number;
+  orientation?: 'horizontal' | 'diagonal-left' | 'diagonal-right';
+  dividerIcon?: 'bullet' | 'star' | 'diamond' | 'custom' | 'none';
+  customIcon?: string;
+  textSize?: 'small' | 'medium' | 'large' | 'xl';
+  textColor?: string;
+  fontWeight?: 'light' | 'normal' | 'bold';
+  backgroundColor?: string;
+  backgroundGradient?: string;
+  pauseOnHover?: boolean;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography?: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function ScrollingTextDivider({
+  text = 'SCROLL TEXT',
+  scrollDirection = 'left',
+  scrollSpeed = 'medium',
+  orientation = 'horizontal',
+  dividerIcon = 'bullet',
+  customIcon,
+  textSize = 'medium',
+  textColor,
+  fontWeight = 'bold',
+  backgroundColor,
+  backgroundGradient,
+  pauseOnHover = true,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: ScrollingTextDividerProps) {
+  const [isPaused, setIsPaused] = useState(false);
+
+  // Icon mapping
+  const iconMap = {
+    bullet: '"',
+    star: '',
+    diamond: '�',
+    custom: customIcon || '"',
+    none: ''
+  };
+
+  const icon = iconMap[dividerIcon];
+
+  // Speed mapping (duration in seconds)
+  const speedMap = {
+    slow: 60,
+    medium: 30,
+    fast: 15
+  };
+
+  const duration = typeof scrollSpeed === 'number' ? scrollSpeed : speedMap[scrollSpeed];
+
+  // Text size mapping
+  const textSizeMap = {
+    small: 'text-xl md:text-2xl',
+    medium: 'text-2xl md:text-4xl',
+    large: 'text-3xl md:text-5xl',
+    xl: 'text-4xl md:text-6xl'
+  };
+
+  // Font weight mapping
+  const fontWeightMap = {
+    light: 'font-light',
+    normal: 'font-normal',
+    bold: 'font-bold'
+  };
+
+  // Orientation angle
+  const rotationMap = {
+    horizontal: '0deg',
+    'diagonal-left': '-5deg',
+    'diagonal-right': '5deg'
+  };
+
+  // Create repeating text with icons
+  const repeatingText = icon
+    ? `${text} ${icon} `.repeat(20)
+    : `${text} `.repeat(20);
+
+  // Background style
+  const bgStyle = backgroundGradient
+    ? { background: backgroundGradient }
+    : { backgroundColor: backgroundColor || 'transparent' };
+
+  return (
+    <div
+      className="relative overflow-hidden py-3"
+      style={{
+        ...bgStyle,
+        transform: `rotate(${rotationMap[orientation]})`
+      }}
+      onMouseEnter={() => pauseOnHover && setIsPaused(true)}
+      onMouseLeave={() => pauseOnHover && setIsPaused(false)}
+    >
+      <style>{`
+        @keyframes scroll-${scrollDirection} {
+          0% {
+            transform: translateX(${scrollDirection === 'left' ? '0%' : '-50%'});
+          }
+          100% {
+            transform: translateX(${scrollDirection === 'left' ? '-50%' : '0%'});
+          }
+        }
+      `}</style>
+
+      <div
+        className={`flex items-center whitespace-nowrap ${textSizeMap[textSize]} ${fontWeightMap[fontWeight]} uppercase tracking-wider`}
+        style={{
+          fontFamily: typography?.headingFont || 'inherit',
+          color: textColor || colors.text,
+          animation: `scroll-${scrollDirection} ${duration}s linear infinite`,
+          animationPlayState: isPaused ? 'paused' : 'running'
+        }}
+      >
+        <span className="inline-block">{repeatingText}</span>
+        <span className="inline-block" aria-hidden="true">{repeatingText}</span>
+      </div>
+    </div>
+  );
+}
+
+export default ScrollingTextDivider;