@codesinger0/shared-components 1.1.84 → 1.1.85

package/dist/components 2/FullscreenCarousel.jsx

@@ -0,0 +1,292 @@
+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

@@ -0,0 +1,198 @@
+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

@@ -0,0 +1,144 @@
+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;