@codesinger0/shared-components 1.1.85 → 1.1.86

package/dist/components 2/FullscreenCarousel.jsx

@@ -1,292 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
-import Autoplay from 'embla-carousel-autoplay';
-
-const FullscreenCarousel = ({
-    slides = [],
-    desktopHeight = '100vh',
-    mobileHeight = '100vh',
-    autoplay = true,
-    scrollInterval = 5000,
-    loop = true,
-    showDots = true,
-    showArrows = true,
-    className = '',
-    ...props
-}) => {
-    const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
-    const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [scrollSnaps, setScrollSnaps] = useState([]);
-
-    // Embla carousel setup
-    const autoplayOptions = {
-        delay: scrollInterval,
-        stopOnInteraction: false,
-        stopOnMouseEnter: false,
-        rootNode: (emblaRoot) => emblaRoot.parentElement,
-    };
-
-    const plugins = autoplay ? [Autoplay(autoplayOptions)] : [];
-
-    const [emblaRef, emblaApi] = useEmblaCarousel(
-        {
-            loop: loop,
-            direction: 'rtl',
-            skipSnaps: false,
-        },
-        plugins
-    );
-
-    const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
-    const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
-    const scrollTo = useCallback((index) => emblaApi && emblaApi.scrollTo(index), [emblaApi]);
-
-    const onSelect = useCallback(() => {
-        if (!emblaApi) return;
-        setSelectedIndex(emblaApi.selectedScrollSnap());
-        setPrevBtnEnabled(emblaApi.canScrollPrev());
-        setNextBtnEnabled(emblaApi.canScrollNext());
-    }, [emblaApi]);
-
-    useEffect(() => {
-        if (!emblaApi) return;
-        onSelect();
-        setScrollSnaps(emblaApi.scrollSnapList());
-        emblaApi.on('select', onSelect);
-        emblaApi.on('reInit', onSelect);
-    }, [emblaApi, onSelect]);
-
-    if (!slides || slides.length === 0) {
-        return (
-            <div className="w-full flex items-center justify-center bg-gray-100" style={{ height: desktopHeight }}>
-                <p className="text-gray-500">No slides to display</p>
-            </div>
-        );
-    }
-
-    return (
-        <div className={`fullscreen-carousel-wrapper ${className}`} {...props}>
-            <div className="fullscreen-carousel" dir="rtl">
-                <div className="fullscreen-carousel__viewport" ref={emblaRef}>
-                    <div className="fullscreen-carousel__container">
-                        {slides.map((slide, index) => {
-                            const isSingleSlide = !slide.leftContent && !slide.rightContent;
-
-                            return (
-                                <div key={index} className="fullscreen-carousel__slide">
-                                    {isSingleSlide ? (
-                                        /* Single Slide Mode */
-                                        <div
-                                            className="w-full h-full"
-                                            style={{ height: desktopHeight }}
-                                        >
-                                            {slide.content}
-                                        </div>
-                                    ) : (
-                                        <>
-                                            {/* Desktop Layout - Horizontal Split */}
-                                            <div
-                                                className="hidden md:grid md:grid-cols-2 w-full h-full"
-                                                style={{ height: desktopHeight }}
-                                            >
-                                                <div className="w-full h-full">
-                                                    {slide.leftContent}
-                                                </div>
-                                                <div className="w-full h-full">
-                                                    {slide.rightContent}
-                                                </div>
-                                            </div>
-
-                                            {/* Mobile Layout - Vertical Split */}
-                                            <div
-                                                className="md:hidden grid grid-rows-2 w-full h-full"
-                                                style={{ height: mobileHeight }}
-                                            >
-                                                <div className="w-full h-full">
-                                                    {slide.leftContent}
-                                                </div>
-                                                <div className="w-full h-full">
-                                                    {slide.rightContent}
-                                                </div>
-                                            </div>
-                                        </>
-                                    )}
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-
-                {/* Dots indicator */}
-                {showDots && slides.length > 1 && (
-                    <div className="fullscreen-carousel__dots">
-                        {scrollSnaps.map((_, index) => (
-                            <button
-                                key={index}
-                                className={`fullscreen-carousel__dot ${index === selectedIndex ? 'fullscreen-carousel__dot--selected' : ''}`}
-                                onClick={() => scrollTo(index)}
-                                aria-label={`Go to slide ${index + 1}`}
-                            />
-                        ))}
-                    </div>
-                )}
-
-                {/* Navigation buttons */}
-                {showArrows && slides.length > 1 && (
-                    <>
-                        <button
-                            className="fullscreen-carousel__button fullscreen-carousel__button--prev"
-                            onClick={scrollPrev}
-                            disabled={!prevBtnEnabled}
-                            aria-label="Previous slide"
-                        >
-                            <svg className="fullscreen-carousel__button__svg" viewBox="0 0 24 24">
-                                <path d="M9 18l6-6-6-6" />
-                            </svg>
-                        </button>
-                        <button
-                            className="fullscreen-carousel__button fullscreen-carousel__button--next"
-                            onClick={scrollNext}
-                            disabled={!nextBtnEnabled}
-                            aria-label="Next slide"
-                        >
-                            <svg className="fullscreen-carousel__button__svg" viewBox="0 0 24 24">
-                                <path d="M15 18l-6-6 6-6" />
-                            </svg>
-                        </button>
-                    </>
-                )}
-            </div>
-
-            {/* Styles */}
-            <style jsx>{`
-        .fullscreen-carousel-wrapper {
-          position: relative;
-          width: 100%;
-          overflow: hidden;
-        }
-
-        .fullscreen-carousel {
-          position: relative;
-          width: 100%;
-        }
-        
-        .fullscreen-carousel__viewport {
-          overflow: hidden;
-          width: 100%;
-        }
-        
-        .fullscreen-carousel__container {
-          display: flex;
-          width: 100%;
-        }
-        
-        .fullscreen-carousel__slide {
-          flex: 0 0 100%;
-          min-width: 0;
-          position: relative;
-        }
-        
-        .fullscreen-carousel__button {
-          display: none;
-          background-color: rgba(255, 255, 255, 0.9);
-          color: #333;
-          border: none;
-          width: 3rem;
-          height: 3rem;
-          border-radius: 50%;
-          cursor: pointer;
-          align-items: center;
-          justify-content: center;
-          transition: all 0.2s ease;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          z-index: 10;
-        }
-
-        @media (min-width: 768px) {
-          .fullscreen-carousel__button {
-            display: flex;
-          }
-        }
-
-        .fullscreen-carousel__button--prev {
-          right: 2rem;
-        }
-
-        .fullscreen-carousel__button--next {
-          left: 2rem;
-        }
-        
-        .fullscreen-carousel__controls {
-          display: flex;
-          justify-content: center;
-          gap: 1rem;
-          position: absolute;
-          bottom: 4rem;
-          left: 50%;
-          transform: translateX(-50%);
-          z-index: 10;
-        }
-        
-        .fullscreen-carousel__button:hover:not(:disabled) {
-          background-color: rgba(255, 255, 255, 1);
-          transform: scale(1.1);
-          box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-        }
-        
-        .fullscreen-carousel__button:disabled {
-          opacity: 0.3;
-          cursor: not-allowed;
-        }
-        
-        .fullscreen-carousel__button__svg {
-          width: 1rem;
-          height: 1rem;
-          fill: none;
-          stroke: currentColor;
-          stroke-width: 2;
-          stroke-linecap: round;
-          stroke-linejoin: round;
-        }
-        
-        .fullscreen-carousel__dots {
-          display: flex;
-          justify-content: center;
-          gap: 0.5rem;
-          position: absolute;
-          bottom: 2rem;
-          left: 50%;
-          transform: translateX(-50%);
-          z-index: 10;
-        }
-        
-        .fullscreen-carousel__dot {
-          background-color: rgba(255, 255, 255, 0.5);
-          border: none;
-          width: 0.75rem;
-          height: 0.75rem;
-          border-radius: 50%;
-          cursor: pointer;
-          opacity: 0.5;
-          transition: all 0.2s ease;
-        }
-        
-        .fullscreen-carousel__dot--selected {
-          opacity: 1;
-          background-color: rgba(255, 255, 255, 1);
-          transform: scale(1.2);
-        }
-        
-        .fullscreen-carousel__dot:hover {
-          opacity: 0.8;
-        }
-      `}</style>
-        </div>
-    );
-};
-
-export default FullscreenCarousel;

package/dist/components 2/Hero.jsx

@@ -1,198 +0,0 @@
-import CTAButton from "./elements/CTAButton";
-import FixedWidthHeroVideo from "./elements/FixedWidthHeroVideo";
-import { ArrowDown } from 'lucide-react'
-import { motion } from "framer-motion";
-
-const Hero = ({
-    // Media props
-    mediaType = 'image', // 'video' or 'image'
-    videoId = '', // YouTube video ID
-    useYoutube = true, // Use YouTube or direct video
-    videoUrl = '', // Direct video URL (when useYoutube is false)
-    imageUrl = '', // Image URL for static background
-    mediaHeight = '70vh', // Height of the media section
-
-    // Overlay
-    opacity = 70,
-    overlayColor = 'white',
-
-    // Hero text props
-    title,
-    subtitle,
-    miniSubtitle,
-    additionalElements,
-    ctaText,
-    secondaryButtonLabel, // Optional secondary button label
-    onSecondaryClick, // Optional secondary button click handler
-    showArrow = true, // Show/hide animated arrow
-
-    // Introduction section props
-    showIntroSection,
-    introHeight = '40vh',
-    introTitle,
-    introContent,
-    introImage,
-    onCtaClick,
-
-    classNames = {}
-}) => {
-    const {
-        title: titleClass = 'main-title',
-        subtitle: subtitleClass = 'main-subtitle',
-        miniSubtitle: miniSubtitleClass = 'main-content',
-        cta: ctaClass = '',
-        introTitle: introTitleClass = 'title',
-        introContent: introContentClass = 'subtitle'
-    } = classNames;
-
-    const hexToRgba = (hex, alpha) => {
-        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})`;
-    };
-
-    return (
-        <>
-            <section className="hero-section relative w-full overflow-hidden" style={{ height: mediaHeight }}>
-                {/* Media Background Container */}
-                <div className="absolute inset-0 w-full h-full" aria-hidden="true">
-                    {mediaType === 'video' ? (
-                        <FixedWidthHeroVideo
-                            useYoutube={useYoutube}
-                            youtubeVideoId={videoId}
-                            videoUrl={videoUrl}
-                        />
-                    ) : (
-                        <div
-                            className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-                            style={{
-                                backgroundImage: `url(${imageUrl})`,
-                                backgroundColor: '#1a1a1a' // Fallback color
-                            }}
-                        />
-                    )}
-                </div>
-
-                {/* Content Overlay */}
-                <div
-                    className="relative z-10 flex items-center justify-center h-full"
-                    style={{
-                        background: overlayColor === 'white' ? `rgba(255, 255, 255, ${opacity / 100})` :
-                            overlayColor === 'black' ? `rgba(0, 0, 0, ${opacity / 100})` :
-                                overlayColor.startsWith('#') ? hexToRgba(overlayColor, opacity / 100) :
-                                    overlayColor.startsWith('rgb') ? overlayColor :
-                                        `rgba(255, 255, 255, ${opacity / 100})` // fallback to white
-                    }}
-                >
-                    <div className="text-center px-0">
-                        <motion.div
-                            initial={{ opacity: 0, y: 30 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            transition={{ duration: 0.8 }}
-                            className="mb-8"
-                        >
-                            <h1 className={titleClass + " mb-4"}>
-                                {title}
-                            </h1>
-                            <p className={subtitleClass + " mb-4"}>
-                                {subtitle}
-                            </p>
-                            <p className={miniSubtitleClass + " mb-12"}>
-                                {miniSubtitle}
-                            </p>
-                            {additionalElements}
-                            <div className="flex flex-wrap gap-4 justify-center items-center">
-                                {secondaryButtonLabel && onSecondaryClick && (
-                                    <button
-                                        onClick={onSecondaryClick}
-                                        className="px-6 py-3 border-2 border-primary text-primary bg-main font-normal hover:bg-primary hover:text-primary-dark transition-all duration-300 shadow-lg"
-                                    >
-                                        {secondaryButtonLabel}
-                                    </button>
-                                )}
-                                <CTAButton onClick={onCtaClick} className="shadow-lg">
-                                    {ctaText}
-                                </CTAButton>
-                            </div>
-                        </motion.div>
-                    </div>
-
-                    {showArrow && (
-                        <motion.div
-                            className="absolute"
-                            style={{
-                                bottom: '2rem',
-                                left: '50%',
-                                transform: 'translateX(-50%)',
-                                zIndex: 100
-                            }}
-                            animate={{ y: [0, 10, 0] }}
-                            transition={{ duration: 2, repeat: Infinity }}
-                        >
-                            <ArrowDown className="w-8 h-8 text-sky-600" />
-                        </motion.div>
-                    )}
-                </div>
-            </section>
-
-            {/* Introduction Section */}
-            {showIntroSection && (
-                <section className=" py-16 px-4" style={{ minHeight: introHeight }}>
-                    <div className="max-w-6xl mx-auto" dir="rtl">
-                        {introImage ? (
-                            /* Layout with image */
-                            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
-                                {/* Text Content */}
-                                <div className="text-center lg:text-right order-2 lg:order-1">
-                                    <h2 className={introTitleClass + " mb-6"}>
-                                        {introTitle}
-                                    </h2>
-                                    <p className={introContentClass + " leading-relaxed"} style={{ whiteSpace: 'pre-line' }}>
-                                        {introContent}
-                                    </p>
-                                </div>
-
-                                {/* Image */}
-                                <motion.div
-                                    key={'image'}
-                                    initial={{ opacity: 0, x: 50 }}
-                                    whileInView={{ opacity: 1, x: 0 }}
-                                    viewport={{ once: true }}
-                                    transition={{ delay: 1 * 0.5 }}
-                                    className="h-full"
-                                >
-                                    <div className="order-1 lg:order-2 flex justify-center lg:justify-end">
-                                        <div className="w-full max-w-md lg:max-w-lg">
-                                            <img
-                                                src={introImage}
-                                                alt={introTitle || "Introduction image"}
-                                                className="w-full h-auto rounded-lg shadow-lg object-cover"
-                                                onError={(e) => {
-                                                    e.target.style.display = 'none';
-                                                    console.warn('Failed to load intro image:', introImage);
-                                                }}
-                                            />
-                                        </div>
-                                    </div>
-                                </motion.div>
-                            </div>
-                        ) : (
-                            /* Text only layout (original) */
-                            <div className="text-center max-w-4xl mx-auto">
-                                <h2 className="title mb-6">
-                                    {introTitle}
-                                </h2>
-                                <p className="subtitle leading-relaxed" style={{ whiteSpace: 'pre-line' }}>
-                                    {introContent}
-                                </p>
-                            </div>
-                        )}
-                    </div>
-                </section>
-            )}
-        </>
-    );
-}
-
-export default Hero

package/dist/components 2/IconGrid.jsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import { Users, Monitor, Smartphone, ThumbsUp, Paintbrush } from 'lucide-react';
-
-const IconGrid = ({ items = [], className = '' }) => {
-  if (!items || items.length === 0) {
-    return null;
-  }
-
-  // Calculate rows distribution
-  const totalItems = items.length;
-  const isEven = totalItems % 2 === 0;
-  const itemsPerRow = Math.ceil(totalItems / 2);
-  
-  // Split items into rows
-  const topRowCount = isEven ? itemsPerRow : itemsPerRow;
-  const topRow = items.slice(0, topRowCount);
-  const bottomRow = items.slice(topRowCount);
-
-  const GridItem = ({ icon: Icon, text }) => (
-    <div className="flex flex-col items-center justify-center p-6 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl hover:shadow-lg transition-shadow duration-300">
-      <div className="w-20 h-20 mb-4 flex items-center justify-center">
-        <Icon className="w-full h-full text-main" strokeWidth={1.5} />
-      </div>
-      <p className="text-center text-gray-800 font-medium text-lg" dir="rtl">
-        {text}
-      </p>
-    </div>
-  );
-
-  return (
-    <div className={`w-full max-w-6xl mx-auto px-4 ${className}`}>
-      {/* Mobile: Single column */}
-      <div className="md:hidden space-y-4">
-        {items.map((item, index) => (
-          <GridItem key={index} {...item} />
-        ))}
-      </div>
-
-      {/* Desktop: Smart grid */}
-      <div className="hidden md:block space-y-4 mt-20 mb-20">
-        {/* Top row */}
-        <div 
-          className="grid gap-4 mb-4"
-          style={{
-            gridTemplateColumns: `repeat(${topRowCount}, 1fr)`,
-            justifyItems: 'center'
-          }}
-        >
-          {topRow.map((item, index) => (
-            <div key={index} className="w-full max-w-sm">
-              <GridItem {...item} />
-            </div>
-          ))}
-        </div>
-
-        {/* Bottom row - centered if fewer items */}
-        {bottomRow.length > 0 && (
-          <div 
-            className="grid gap-4"
-            style={{
-              gridTemplateColumns: `repeat(${bottomRow.length}, 1fr)`,
-              justifyItems: 'center',
-              maxWidth: bottomRow.length < topRowCount ? `${(bottomRow.length / topRowCount) * 100}%` : '100%',
-              margin: '0 auto'
-            }}
-          >
-            {bottomRow.map((item, index) => (
-              <div key={index} className="w-full max-w-sm">
-                <GridItem {...item} />
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// Demo
-const Demo = () => {
-  const demoItems = [
-    {
-      icon: Users,
-      text: 'מתאים לכל סוגי העסקים'
-    },
-    {
-      icon: Monitor,
-      text: 'חווית משתמש UX/UI'
-    },
-    {
-      icon: Smartphone,
-      text: 'התאמה מלאה לכל המסכים'
-    },
-    {
-      icon: ThumbsUp,
-      text: 'תמיכה מלאה'
-    },
-    {
-      icon: Paintbrush,
-      text: 'עיצוב יוצר נשימה'
-    }
-  ];
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-16">
-      <div className="max-w-7xl mx-auto px-4">
-        <h1 className="text-4xl font-bold text-center text-gray-800 mb-4" dir="rtl">
-          IconGrid Component
-        </h1>
-        <p className="text-center text-gray-600 mb-12" dir="rtl">
-          רכיב גריד חכם המתאים את עצמו למספר הפריטים
-        </p>
-
-        <IconGrid items={demoItems} />
-
-        <div className="mt-16 bg-white rounded-xl p-8 shadow-lg">
-          <h2 className="text-2xl font-bold mb-4" dir="rtl">תכונות:</h2>
-          <ul className="space-y-2 text-gray-700" dir="rtl">
-            <li>✅ מספר זוגי של פריטים - חלוקה שווה בין שורות</li>
-            <li>✅ מספר אי-זוגי - שורה עליונה עם פריט אחד נוסף, ממורכזת</li>
-            <li>✅ במובייל - עמודה אנכית בודדת</li>
-            <li>✅ תמיכה מלאה ב-RTL</li>
-            <li>✅ עיצוב רספונסיבי עם אנימציות</li>
-          </ul>
-
-          <h3 className="text-xl font-bold mt-6 mb-3" dir="rtl">דוגמת שימוש:</h3>
-          <pre className="bg-gray-50 p-4 rounded-lg overflow-x-auto text-sm">
-{`const items = [
-  { icon: Users, text: 'טקסט 1' },
-  { icon: Monitor, text: 'טקסט 2' },
-  { icon: Smartphone, text: 'טקסט 3' },
-  { icon: ThumbsUp, text: 'טקסט 4' },
-  { icon: Paintbrush, text: 'טקסט 5' }
-];
-
-<IconGrid items={items} />`}
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default IconGrid;