@codesinger0/shared-components 1.1.56 → 1.1.58

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.1.56",
+  "version": "1.1.58",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [

package/dist/components/AdvantagesList.jsx

@@ -1,89 +0,0 @@
-const AdvantagesList = ({
-    points = [],
-    title,
-    subtitle,
-    className = '',
-    classNames = {},
-    ...props
-}) => {
-    const {
-        title: titleClass = 'main-title',
-        subtitle: subtitleClass = 'main-subtitle',
-        content: contentClass = 'content-text'
-    } = classNames;
-
-    if (!points || points.length === 0) {
-        return (
-            <section className={`py-16 px-4 ${className}`} {...props} dir="rtl">
-                <div className="max-w-6xl mx-auto text-center">
-                    {title && <h2 className={titleClass + " mb-4"}>{title}</h2>}
-                    {subtitle && <h3 className={subtitleClass + " mb-8 whitespace-pre-line"}>{subtitle}</h3>}
-                    <p className={contentClass}>אין נקודות להצגה</p>
-                </div>
-            </section>
-        );
-    }
-
-    return (
-        <section className={`py-16 px-4 bg-main ${className}`} {...props} dir="rtl">
-            <div className="max-w-6xl mx-auto">
-                {/* Header */}
-                {(title || subtitle) && (
-                    <div className="text-center mb-12">
-                        {title && <h2 className={titleClass + " mb-4"}>{title}</h2>}
-                        {subtitle && <h3 className={subtitleClass}>{subtitle}</h3>}
-                    </div>
-                )}
-
-                {/* Points Grid */}
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    {points.map((point, index) => (
-                        <div key={index} className="glass-card p-6 hover:scale-105 transition-transform duration-200">
-                            {/* Desktop Layout - Horizontal */}
-                            <div className="hidden lg:flex items-start gap-4">
-                                <div className="flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-primary">
-                                    <point.icon size={24} />
-                                </div>
-                                <div className="flex-1">
-                                    <span className='content-text leading-relaxed font-semibold'>{point.bold}</span>
-                                    <p className="content-text leading-relaxed" style={{ whiteSpace: 'pre-line' }}>{point.text}</p>
-                                    {point.subs && point.subs.length > 0 && (
-                                        <ul className="mt-3 space-y-2 list-disc list-inside">
-                                            {point.subs.map((sub, subIndex) => (
-                                                <li key={subIndex} className="subtitle leading-relaxed text-sm">
-                                                    {sub}
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    )}
-                                </div>
-                            </div>
-
-                            {/* Mobile Layout - Vertical */}
-                            <div className="lg:hidden text-center space-y-2">
-                                <div className="flex justify-center">
-                                    <div className="w-14 h-10 rounded-full flex items-center justify-center text-primary">
-                                        <point.icon size={26} />
-                                    </div>
-                                </div>
-                                <span className='content-text leading-relaxed font-semibold'>{point.bold}</span>
-                                <p className="content-text leading-relaxed" style={{ whiteSpace: 'pre-line' }}>{point.text}</p>
-                                {point.subs && point.subs.length > 0 && (
-                                    <ul className="mt-3 space-y-2 list-disc list-inside text-right">
-                                        {point.subs.map((sub, subIndex) => (
-                                            <li key={subIndex} className="subtitle leading-relaxed text-sm">
-                                                {sub}
-                                            </li>
-                                        ))}
-                                    </ul>
-                                )}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default AdvantagesList;

package/dist/components/ArticlesList.jsx

@@ -1,237 +0,0 @@
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { BookOpen, ArrowDown, X } from 'lucide-react';
-import useScrollLock from '../hooks/useScrollLock';
-
-const ArticlesList = ({
-  title,
-  subtitle,
-  articles = [],
-  className = '',
-  ...props
-}) => {
-  const [selectedArticle, setSelectedArticle] = useState(null);
-
-  useScrollLock(selectedArticle !== null);
-
-  if (!articles || articles.length === 0) {
-    return (
-      <section className={`py-20 ${className}`} {...props}>
-        <div className="max-w-7xl mx-auto px-6 text-center" dir="rtl">
-          {title && <h2 className="title mb-4">{title}</h2>}
-          {subtitle && <p className="subtitle">{subtitle}</p>}
-          <p className="content-text mt-8">אין מאמרים להצגה</p>
-        </div>
-      </section>
-    );
-  }
-
-  // Function to get first 3 lines of text
-  const getExcerpt = (text) => {
-    const lines = text?.trim().split('\n').filter(line => line.trim());
-    return lines?.slice(0, 3).join('\n') + (lines?.length > 3 ? '...' : '');
-  };
-
-  return (
-    <>
-      <section className={`py-20 bg-white ${className}`} {...props} id="articles">
-        <div className="max-w-7xl mx-auto px-6">
-          {/* Header */}
-          {(title || subtitle) && (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              className="text-center mb-16"
-              dir="rtl"
-            >
-              {title && (
-                <h2 className="title mb-6">
-                  {title}
-                </h2>
-              )}
-              
-              <div className="w-20 h-1 bg-gradient-to-r from-primary to-primary-bright mx-auto mb-6"></div>
-              
-              {subtitle && (
-                <p className="subtitle max-w-3xl mx-auto">
-                  {subtitle}
-                </p>
-              )}
-            </motion.div>
-          )}
-
-          {/* Articles Grid */}
-          <div className="grid lg:grid-cols-2 gap-8" dir="rtl">
-            {articles.map((article, index) => {
-              const isEven = index % 2 === 0;
-              const cardBg = isEven ? 'bg-gradient-to-br from-white to-green-50' : 'bg-gradient-to-br from-white to-sky-50';
-              const iconGradient = isEven ? 'from-green-500 to-green-600' : 'from-sky-400 to-sky-500';
-              const textHover = isEven ? 'group-hover:text-green-700' : 'group-hover:text-sky-700';
-              const textColor = isEven ? 'text-green-600' : 'text-sky-600';
-
-              return (
-                <motion.div
-                  key={article.id || index}
-                  initial={{ opacity: 0, y: 20 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ delay: index * 0.1 }}
-                >
-                  <div 
-                    className={`h-full cursor-pointer border-none shadow-lg hover:shadow-xl transition-all duration-300 ${cardBg} group rounded-xl`}
-                    onClick={() => setSelectedArticle(article)}
-                  >
-                    <div className="p-6 pb-4">
-                      <div className="flex items-start gap-4">
-                        <div className={`w-12 h-12 bg-gradient-to-br ${iconGradient} rounded-full flex items-center justify-center flex-shrink-0`}>
-                          {article.icon ? (
-                            <article.icon className="w-6 h-6 text-white" />
-                          ) : (
-                            <BookOpen className="w-6 h-6 text-white" />
-                          )}
-                        </div>
-                        <div className="flex-1">
-                          <h3 className={`text-xl font-semibold text-green-900 leading-tight ${textHover} transition-colors`} dir="rtl">
-                            {article.title}
-                          </h3>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="px-6 pb-6">
-                      <p className="text-gray-600 leading-relaxed whitespace-pre-line" dir="rtl">
-                        {article.excerpt}
-                      </p>
-                      <div className="mt-6">
-                        <span className={`inline-flex items-center ${textColor} font-medium ${textHover} transition-colors`}>
-                          קרא עוד
-                          <ArrowDown className="w-4 h-4 mr-2 rotate-180 group-hover:transform group-hover:-translate-y-1 transition-transform" />
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* Article Modal */}
-      <AnimatePresence>
-        {selectedArticle && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center supports-[height:100dvh]:h-[100dvh]">
-            {/* Backdrop */}
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"
-              onClick={() => setSelectedArticle(null)}
-            />
-
-            {/* Modal Content */}
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9, y: 20 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.9, y: 20 }}
-              transition={{ type: "spring", stiffness: 300, damping: 30 }}
-              className="relative w-full max-w-4xl mx-4 max-h-[90vh] bg-white rounded-xl shadow-2xl overflow-hidden"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {/* Close Button */}
-              <button
-                onClick={() => setSelectedArticle(null)}
-                className="absolute top-4 left-4 z-10 bg-white hover:bg-gray-100 text-gray-700 p-2 rounded-full shadow-lg transition-colors duration-200"
-                aria-label="סגור"
-              >
-                <X size={24} />
-              </button>
-
-              {/* Scrollable Content */}
-              <div className="overflow-y-auto max-h-[90vh] p-8 md:p-12" dir="rtl">
-                {/* Article Header */}
-                <div className="mb-8">
-                  <div className="flex items-center gap-4 mb-6">
-                    <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center flex-shrink-0">
-                      {selectedArticle.icon ? (
-                        <selectedArticle.icon className="w-8 h-8 text-white" />
-                      ) : (
-                        <BookOpen className="w-8 h-8 text-white" />
-                      )}
-                    </div>
-                    <h2 className="text-3xl md:text-4xl font-bold text-green-900">
-                      {selectedArticle.title}
-                    </h2>
-                  </div>
-                  <div className="w-20 h-1 bg-gradient-to-r from-green-500 to-sky-400"></div>
-                </div>
-
-                {/* Article Content */}
-                <div className="prose prose-lg max-w-none">
-                  <ArticleFormatter text={selectedArticle.content} />
-                </div>
-              </div>
-            </motion.div>
-          </div>
-        )}
-      </AnimatePresence>
-
-      {/* Custom Styles */}
-      <style jsx>{`
-        .from-primary {
-          --tw-gradient-from: var(--primary);
-        }
-        
-        .to-primary-bright {
-          --tw-gradient-to: var(--primary-bright);
-        }
-      `}</style>
-    </>
-  );
-};
-
-const ArticleFormatter = ({ text }) => {
-  // Split the text into logical sections. A section is typically a heading followed by its text.
-  // We assume sections are separated by two or more newlines.
-  const sections = text.trim().split(/\n\s*\n+/);
-
-  return (
-    <>
-      {sections.map((section, index) => {
-        // Find the first newline to separate a potential heading from its paragraph
-        const firstNewlineIndex = section.indexOf('\n');
-        
-        let heading = '';
-        let paragraph = '';
-
-        // Heuristic: If the first line is short and there's more content, it's a heading.
-        if (firstNewlineIndex > 0 && firstNewlineIndex < 80) {
-          heading = section.substring(0, firstNewlineIndex).trim();
-          paragraph = section.substring(firstNewlineIndex + 1).trim();
-        } else {
-          // Otherwise, treat the whole block as a single paragraph
-          paragraph = section.trim();
-        }
-
-        return (
-          <div key={index} className="mb-6">
-            {heading && (
-              <h2 className="text-2xl font-semibold text-green-800 mt-10 mb-4 pb-2 border-b border-sky-200">
-                {heading}
-              </h2>
-            )}
-            {paragraph && (
-              <p className="text-gray-700 leading-relaxed text-lg whitespace-pre-line">
-                {paragraph}
-              </p>
-            )}
-          </div>
-        );
-      })}
-    </>
-  );
-};
-
-export default ArticlesList;

package/dist/components/DualTextCard.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-
-const DualTextCard = ({
-  // First card props
-  title1,
-  subtitle1,
-  text1,
-  
-  // Second card props
-  title2,
-  subtitle2,
-  text2,
-  
-  // Layout options
-  reverse = false,
-  
-  // Custom class names
-  classNames = {},
-  className = '',
-  
-  ...props
-}) => {
-  const {
-    card: cardClass = 'glass-card',
-    title: titleClass = 'title',
-    subtitle: subtitleClass = 'subtitle',
-    content: contentClass = 'content-text',
-  } = classNames;
-
-  return (
-    <section className={`relative w-full overflow-visible py-16 px-4 ${className}`} {...props}>
-      {/* Background Section with Text Content */}
-      <div className={cardClass + " relative"} style={{ minHeight: '48vh', overflow: 'visible' }}>
-        <div className="max-w-7xl mx-auto px-6 py-16">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
-            
-            {/* First Text Block */}
-            <motion.div
-              initial={{ opacity: 0, x: reverse ? 50 : -50 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.2 }}
-              className={`text-center lg:text-right space-y-6 ${reverse ? 'lg:order-2' : 'lg:order-1'}`}
-              dir="rtl"
-            >
-              <h2 className={titleClass}>{title1}</h2>
-              <h3 className={subtitleClass}>{subtitle1}</h3>
-              <p className={contentClass + " max-w-md mx-auto lg:mx-0"} style={{ whiteSpace: 'pre-line' }}>{text1}</p>
-            </motion.div>
-
-            {/* Second Text Block */}
-            <motion.div
-              initial={{ opacity: 0, x: reverse ? -50 : 50 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.4 }}
-              className={`text-center lg:text-right space-y-6 ${reverse ? 'lg:order-1' : 'lg:order-2'}`}
-              dir="rtl"
-            >
-              <h2 className={titleClass}>{title2}</h2>
-              <h3 className={subtitleClass}>{subtitle2}</h3>
-              <p className={contentClass + " max-w-md mx-auto lg:mx-0"} style={{ whiteSpace: 'pre-line' }}>{text2}</p>
-            </motion.div>
-
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default DualTextCard;

package/dist/components/FloatingWhatsAppButton.jsx

@@ -1,180 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { MessageCircle } from 'lucide-react';
-
-const FloatingWhatsAppButton = ({
-    phoneNumber,
-    message = 'שלום, אשמח לקבל מידע נוסף',
-    position = 'bottom-left', // 'bottom-left' or 'bottom-right'
-    bottomOffset = '1.5rem', // distance from bottom
-    sideOffset = '1.5rem', // distance from left/right edge
-    size = 'large', // 'small', 'medium', 'large'
-    className = '',
-    onBeforeOpen = null, // callback before opening WhatsApp
-    ...props
-}) => {
-    // Size configurations
-    const sizeClasses = {
-        small: 'w-12 h-12',
-        medium: 'w-14 h-14',
-        large: 'w-16 h-16'
-    };
-
-    const iconSizes = {
-        small: 20,
-        medium: 24,
-        large: 28
-    };
-
-    // Position styles
-    const positionStyles = {
-        'bottom-left': {
-            bottom: bottomOffset,
-            left: sideOffset,
-            right: 'auto'
-        },
-        'bottom-right': {
-            bottom: bottomOffset,
-            right: sideOffset,
-            left: 'auto'
-        }
-    };
-
-    const openWhatsApp = () => {
-        // Call the callback if provided (e.g., for analytics)
-        if (onBeforeOpen) {
-            onBeforeOpen();
-        }
-
-        // Format phone number (remove any non-digits, ensure international format)
-        const cleanPhone = phoneNumber.replace(/\D/g, '');
-        const encodedMessage = encodeURIComponent(message);
-
-        // Open WhatsApp in new tab
-        window.open(
-            `https://wa.me/${cleanPhone}?text=${encodedMessage}`,
-            '_blank'
-        );
-    };
-
-    return (
-        <motion.button
-            onClick={openWhatsApp}
-            className={`fixed z-50 bg-green-500 hover:bg-green-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center ${sizeClasses[size]} ${className}`}
-            style={positionStyles[position]}
-            initial={{ scale: 0, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            whileHover={{ scale: 1.1 }}
-            whileTap={{ scale: 0.9 }}
-            transition={{
-                type: "spring",
-                stiffness: 300,
-                damping: 25
-            }}
-            aria-label="פתח WhatsApp"
-            {...props}
-        >
-            <MessageCircle size={iconSizes[size]} />
-        </motion.button>
-    );
-};
-
-// Demo Component
-const Demo = () => {
-    const handleBeforeOpen = () => {
-        console.log('WhatsApp button clicked - you can add analytics here');
-    };
-
-    return (
-        <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8" dir="rtl">
-            <div className="max-w-4xl mx-auto">
-                <h1 className="text-4xl font-bold text-gray-800 mb-6 text-center">
-                    WhatsApp Floating Button Demo
-                </h1>
-
-                <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
-                    <h2 className="text-2xl font-semibold mb-4">תכונות:</h2>
-                    <ul className="space-y-2 text-gray-700">
-                        <li>✅ מיקום גמיש (שמאל/ימין למטה)</li>
-                        <li>✅ שליטה מלאה על המרחקים מהקצוות</li>
-                        <li>✅ 3 גדלים: small, medium, large</li>
-                        <li>✅ הודעה מותאמת אישית</li>
-                        <li>✅ Callback לפני פתיחה (לאנליטיקס)</li>
-                        <li>✅ אנימציות חלקות עם Framer Motion</li>
-                    </ul>
-                </div>
-
-                <div className="bg-white rounded-xl shadow-lg p-8">
-                    <h2 className="text-2xl font-semibold mb-4">דוגמאות שימוש:</h2>
-
-                    <div className="space-y-4 text-sm bg-gray-50 p-4 rounded-lg font-mono text-left" dir="ltr">
-                        <div className="bg-white p-3 rounded border">
-                            <div className="text-gray-500 mb-2">// Bottom Left (default)</div>
-                            <code className="text-blue-600">
-                                {`<FloatingWhatsAppButton
-  phoneNumber="972542397230"
-  message="שלום, אני מעוניין לקבוע פגישה"
-  position="bottom-left"
-/>`}
-                            </code>
-                        </div>
-
-                        <div className="bg-white p-3 rounded border">
-                            <div className="text-gray-500 mb-2">// Bottom Right with custom offsets</div>
-                            <code className="text-blue-600">
-                                {`<FloatingWhatsAppButton
-  phoneNumber="972542397230"
-  position="bottom-right"
-  bottomOffset="2rem"
-  sideOffset="2rem"
-  size="medium"
-/>`}
-                            </code>
-                        </div>
-
-                        <div className="bg-white p-3 rounded border">
-                            <div className="text-gray-500 mb-2">// With analytics callback</div>
-                            <code className="text-blue-600">
-                                {`<FloatingWhatsAppButton
-  phoneNumber="972542397230"
-  onBeforeOpen={() => {
-    // Send analytics event
-    sendAdsConversion({...});
-  }}
-/>`}
-                            </code>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="mt-8 text-center text-gray-600">
-                    <p>גלול למטה כדי לראות את הכפתור בפעולה! 👇</p>
-                    <div className="mt-4 h-96"></div>
-                </div>
-            </div>
-
-            {/* Demo Buttons */}
-            <FloatingWhatsAppButton
-                phoneNumber="972542397230"
-                message="שלום, אני מעוניין לקבוע פגישה לטיפול פסיכולוגי"
-                position="bottom-left"
-                bottomOffset="1.5rem"
-                sideOffset="1.5rem"
-                size="large"
-                onBeforeOpen={handleBeforeOpen}
-            />
-
-            <FloatingWhatsAppButton
-                phoneNumber="972542397230"
-                message="היי! רציתי לשאול משהו"
-                position="bottom-right"
-                bottomOffset="1.5rem"
-                sideOffset="1.5rem"
-                size="medium"
-                onBeforeOpen={handleBeforeOpen}
-            />
-        </div>
-    );
-};
-
-export default FloatingWhatsAppButton;