@codesinger0/shared-components 1.1.58 → 1.1.61

package/dist/components/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;

package/dist/components/IntroSection.jsx

@@ -0,0 +1,74 @@
+import { motion } from "framer-motion";
+
+const IntroSection = ({
+    introHeight = '40vh',
+    introTitle,
+    introContent,
+    introImage,
+    classNames = {}
+}) => {
+    const {
+        introTitle: introTitleClass = 'title',
+        introContent: introContentClass = 'subtitle'
+    } = classNames;
+
+    return (
+        <>
+            {/* Introduction Section */}
+            <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 IntroSection

package/dist/components/Menu.jsx

@@ -0,0 +1,268 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { useMediaQuery } from "react-responsive";
+import useScrollLock from '../hooks/useScrollLock';
+
+const Menu = ({
+  // Business info
+  businessInfo = {},
+
+  // Navigation items
+  navigationItems = [],
+
+  // Auth/Action buttons component
+  AuthButtonsComponent = null,
+
+  // User context (for admin check)
+  isAdmin = false,
+
+  // Customization
+  mobileBreakpoint = 900,
+  logoClassName = '',
+  menuItemClassName = '',
+  sidebarWidth = 'w-80',
+
+  // Callbacks
+  onMenuItemClick = () => { },
+
+  // Children to display above menu items
+  children = null,
+}) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });
+
+  // Close sidebar when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (isSidebarOpen && !event.target.closest('.sidebar') && !event.target.closest('.hamburger')) {
+        setIsSidebarOpen(false);
+      }
+    };
+
+    if (isSidebarOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isSidebarOpen]);
+
+  useScrollLock(isSidebarOpen && isMobile);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const handleMenuItemClick = (item) => {
+    setIsSidebarOpen(false);
+    onMenuItemClick(item);
+  };
+
+  const DesktopMenu = () => (
+    <nav className="sticky top-0 z-50 bg-menu border-b-2 border-primary">
+      {/* Parent container with two vertically stacked sections */}
+      <div className="w-full">
+
+        {/* Top section - Logo and Children content */}
+        {children && (<div className="w-full flex items-center py-4 px-6">
+          {/* Logo - takes only required space */}
+          <Link to="/" className={`flex-shrink-0 ${logoClassName}`}>
+            <div className="relative w-24 h-12 lg:w-32 lg:h-16 overflow-hidden flex items-center justify-center">
+              <img
+                src={businessInfo.logo}
+                alt={businessInfo.name}
+                className="relative z-10 w-full h-full object-contain"
+                onError={(e) => {
+                  e.target.style.display = 'none';
+                  e.target.nextElementSibling.style.display = 'flex';
+                }}
+              />
+              {/* Fallback text */}
+              <div
+                className="relative z-10 w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                style={{ display: 'none' }}
+              >
+                {businessInfo.name?.slice(0, 2) || ''}
+              </div>
+            </div>
+          </Link>
+
+          {/* Children - grows to fill available space */}
+          <div className="flex-grow">
+            {children}
+          </div>
+        </div>
+        )}
+
+        {/* Bottom section - Menu navigation bar */}
+        <div className="w-full px-6 py-4 flex justify-between items-center">
+          {/* Left side - Auth buttons */}
+          <div className="flex items-center">
+            {AuthButtonsComponent && <AuthButtonsComponent />}
+          </div>
+
+          {/* Center / Right side - Menu items */}
+          <div className="flex-1 flex justify-center">
+            <div className="flex items-center space-x-6 space-x-reverse" dir="rtl">
+              {navigationItems.map((item, index) => (
+                item.adminRoute && !isAdmin ? null : (
+                  <Link
+                    key={index}
+                    to={item.href}
+                    onClick={() => handleMenuItemClick(item)}
+                    className={`subtitle font-normal cursor-pointer menu-item-hover px-4 py-2 rounded-md text transition-colors duration-500 ease-in-out hover:text-primary ${menuItemClassName}`}
+                  >
+                    {item.label}
+                  </Link>
+                )
+              ))}
+            </div>
+          </div>
+
+          {/* Right Side Render logo here if no children */}
+          {!children && (
+            <Link to="/" className={`flex-shrink-0 ${logoClassName}`}>
+              <div className="relative w-24 h-12 lg:w-32 lg:h-16 overflow-hidden flex items-center justify-center">
+                <img
+                  src={businessInfo.logo}
+                  alt={businessInfo.name}
+                  className="relative z-10 w-full h-full object-contain"
+                  onError={(e) => {
+                    e.target.style.display = 'none';
+                    e.target.nextElementSibling.style.display = 'flex';
+                  }}
+                />
+                {/* Fallback text */}
+                <div
+                  className="relative z-10 w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                  style={{ display: 'none' }}
+                >
+                  {businessInfo.name?.slice(0, 2) || ''}
+                </div>
+              </div>
+            </Link>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+
+  // Mobile Menu Component
+  const MobileMenu = () => (
+    <>
+      <nav className="sticky top-0 z-50 bg-menu px-4 py-2">
+        <div className="flex justify-between items-center">
+          {AuthButtonsComponent && <AuthButtonsComponent isMobile={true} />}
+
+          {/* Mobile Logo */}
+          <Link to="/" className={`text-primary font-bold text-xl ${logoClassName}`}>
+            <div className="text-primary font-bold text-lg">
+              <div className="w-25 h-12 overflow-hidden flex items-center justify-center">
+                <img
+                  src={businessInfo.logo}
+                  alt={businessInfo.name}
+                  className="w-full h-full object-contain"
+                  onError={(e) => {
+                    e.target.style.display = 'none';
+                    e.target.nextElementSibling.style.display = 'flex';
+                  }}
+                />
+                {/* Fallback text */}
+                <div
+                  className="w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                  style={{ display: 'none' }}
+                >
+                  {businessInfo.name?.slice(0, 2) || ''}
+                </div>
+              </div>
+            </div>
+          </Link>
+
+          {/* Children next to logo */}
+          {children && (
+            <div>
+              {children}
+            </div>
+          )}
+
+          {/* Hamburger button */}
+          <button
+            className="hamburger flex flex-col justify-center items-center w-8 h-8 focus:outline-none text-main"
+            onClick={toggleSidebar}
+            aria-label="תפריט"
+          >
+            <span className={`hamburger-line block w-6 h-0.5 mb-1 ${isSidebarOpen ? 'rotate-45 translate-y-1.5' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+            <span className={`hamburger-line block w-6 h-0.5 mb-1 ${isSidebarOpen ? 'opacity-0' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+            <span className={`hamburger-line block w-6 h-0.5 ${isSidebarOpen ? '-rotate-45 -translate-y-1.5' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+          </button>
+        </div>
+      </nav>
+
+      {/* Overlay + Sidebar (animated) */}
+      <AnimatePresence>
+        {isSidebarOpen && (
+          <>
+            {/* Overlay fade */}
+            <motion.div
+              key="overlay"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 0.5 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="fixed inset-0 bg-black z-40 supports-[height:100dvh]:h-[100dvh]"
+              onClick={() => setIsSidebarOpen(false)}
+              aria-hidden="true"
+            />
+
+            {/* Sidebar spring slide */}
+            <motion.aside
+              key="sidebar"
+              initial={{ x: '100%' }}
+              animate={{ x: 0 }}
+              exit={{ x: '100%' }}
+              transition={{ type: 'spring', stiffness: 320, damping: 28, mass: 0.9 }}
+              className={`sidebar fixed top-0 right-0 h-full ${sidebarWidth} bg-white shadow-lg z-50`}
+              role="dialog"
+              aria-label="תפריט צד"
+            >
+              <div className="p-6">
+                {/* Close button */}
+                <div className="flex justify-start mb-8">
+                  <button
+                    onClick={() => setIsSidebarOpen(false)}
+                    className="text-black hover:text-gray-700 text-2xl"
+                    aria-label="סגור תפריט"
+                  >
+                    ×
+                  </button>
+                </div>
+
+                {/* Menu items */}
+                <div className="flex flex-col space-y-3">
+                  {navigationItems.map((item, index) => (
+                    item.adminRoute && !isAdmin ? null : (
+                      <Link
+                        key={index}
+                        to={item.href}
+                        onClick={() => handleMenuItemClick(item)}
+                        className={`text-lg py-3 px-2 text-black text-right ${menuItemClassName}`}
+                      >
+                        {item.label}
+                      </Link>
+                    )
+                  ))}
+                </div>
+              </div>
+            </motion.aside>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+
+  return isMobile ? <MobileMenu /> : <DesktopMenu />;
+};
+
+export default Menu;

package/dist/components/{QAAccordion 2.jsx → QAAccordion.jsx}

@@ -5,8 +5,8 @@ const QAAccordion = ({
   title = "שאלות נפוצות",
   subtitle = "מענה לשאלות הנפוצות ביותר",
   qaItems = [],
-  showBottomCTA = true,
   onClickCta = () => { },
+  showCTA = true,
   className = ""
 }) => {
   const [openIndex, setOpenIndex] = useState(null);
@@ -184,7 +184,7 @@ const QAAccordion = ({
         </div>
 
         {/* Optional CTA */}
-        {showBottomCTA && (
+        {showCTA && (
           <div className="text-center mt-12">
             <p className="content-text mb-4">
               לא מצאתם את התשובה שחיפשתם?
@@ -192,7 +192,8 @@ const QAAccordion = ({
             <button className="btn-primary" onClick={onClickCta}>
               צרו קשר
             </button>
-          </div>)}
+          </div>
+        )}
       </div>
     </section>
   );