@codesinger0/shared-components 1.1.11 → 1.1.13

package/dist/components/ArticlesList.jsx

@@ -0,0 +1,237 @@
+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/TextListCards.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Check } from 'lucide-react';
+
+const TextListCards = ({
+  title,
+  subtitle,
+  items = [],
+  className = '',
+  ...props
+}) => {
+  if (!items || items.length === 0) {
+    return (
+      <section className={`py-20 bg-main ${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>
+    );
+  }
+
+  return (
+    <section className={`py-20 ${className}`} {...props}>
+      <div className="max-w-7xl mx-auto px-6">
+        {/* Header Section */}
+        {(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>
+            )}
+            
+            {/* Decorative Line */}
+            <div className="w-20 h-1 bg-gradient-to-r from-primary to-primary-bright mx-auto mb-4"></div>
+            
+            {subtitle && (
+              <p className="subtitle max-w-3xl mx-auto mt-6">
+                {subtitle}
+              </p>
+            )}
+          </motion.div>
+        )}
+
+        {/* Cards Grid */}
+        <div className="grid lg:grid-cols-3 gap-8">
+          {items.map((item, index) => (
+            <motion.div
+              key={item.title || index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.2 }}
+              className="h-full"
+            >
+              <div className="glass-card h-full p-8 text-center hover:scale-105 transition-all duration-300">
+                {/* Icon */}
+                {item.icon && (
+                  <div className="w-16 h-16 bg-gradient-to-br from-primary to-primary-bright rounded-full flex items-center justify-center mx-auto mb-6">
+                    <item.icon className="w-8 h-8 text-white" />
+                  </div>
+                )}
+                
+                {/* Title */}
+                <h3 className="subtitle font-semibold mb-6" dir="rtl">
+                  {item.title}
+                </h3>
+                
+                {/* Points List */}
+                {item.points && item.points.length > 0 && (
+                  <ul className="space-y-3 text-right leading-relaxed" dir="rtl">
+                    {item.points.map((point, i) => (
+                      <li key={i} className="flex items-start">
+                        <Check className="w-5 h-5 text-primary mt-1 mr-3 flex-shrink-0" />
+                        <span className="content-text">{point}</span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      {/* Custom Styles */}
+      <style jsx>{`
+        .from-primary {
+          --tw-gradient-from: var(--primary);
+          --tw-gradient-to: rgb(0 153 255 / 0);
+          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+        }
+        
+        .to-primary-bright {
+          --tw-gradient-to: var(--primary-bright);
+        }
+      `}</style>
+    </section>
+  );
+};
+
+export default TextListCards;

package/dist/index.js

@@ -5,6 +5,8 @@ export { default as LargeItemCard } from './components/LargeItemCard';
 export { default as SmallItemsGrid } from './components/SmallItemsGrid';
 export { default as SmallItemCard } from './components/SmallItemCard';
 export { default as MasonryItemCard } from './components/MasonryItemCard';
+export { default as TextListCards } from './components/TextListCards';
+export { default as ArticlesList } from './components/ArticlesList';
 export { default as Hero } from './components/Hero'
 export { default as QAAccordion } from './components/QAAccordion'
 export { default as AdvantagesList } from './components/AdvantagesList'
@@ -27,4 +29,5 @@ export { CartProvider, useCart } from './context/CartContext'
 export { default as useScrollLock } from './hooks/useScrollLock'
 
 // Utils
-export { default as ScrollToTop } from './utils/ScrollToTop'
+export { default as ScrollToTop } from './utils/ScrollToTop'
+export { useScrollToAnchor } from './utils/ScrollManager'

package/dist/utils/ScrollManager.jsx

@@ -0,0 +1,85 @@
+import { useCallback } from 'react';
+
+/**
+ * Custom hook for smooth scrolling to anchors
+ * @param {Object} options - Configuration options
+ * @param {string} options.behavior - Scroll behavior ('smooth', 'instant', 'auto')
+ * @param {string} options.block - Vertical alignment ('start', 'center', 'end', 'nearest')
+ * @param {number} options.offset - Additional offset in pixels (useful for fixed headers)
+ * @returns {Function} scrollToAnchor function
+ */
+export const useScrollToAnchor = (options = {}) => {
+  const {
+    behavior = 'smooth',
+    block = 'start',
+    offset = 0
+  } = options;
+
+  const scrollToAnchor = useCallback((anchorId) => {
+    // Remove # if provided
+    const cleanAnchorId = anchorId.replace('#', '');
+    
+    // Find the element
+    const element = document.getElementById(cleanAnchorId);
+    
+    if (!element) {
+      console.warn(`Element with id "${cleanAnchorId}" not found`);
+      return;
+    }
+
+    // If offset is needed, calculate position manually
+    if (offset !== 0) {
+      const elementPosition = element.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.pageYOffset - offset;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: behavior
+      });
+    } else {
+      // Use native scrollIntoView
+      element.scrollIntoView({
+        behavior: behavior,
+        block: block,
+        inline: 'nearest'
+      });
+    }
+  }, [behavior, block, offset]);
+
+  return scrollToAnchor;
+};
+
+// Alternative hook that also handles URL hash updates
+export const useScrollToAnchorWithHash = (options = {}) => {
+  const scrollToAnchor = useScrollToAnchor(options);
+
+  const scrollToAnchorWithHash = useCallback((anchorId) => {
+    const cleanAnchorId = anchorId.replace('#', '');
+    
+    // Update URL hash without triggering page reload
+    history.pushState(null, null, `#${cleanAnchorId}`);
+    
+    // Scroll to the element
+    scrollToAnchor(cleanAnchorId);
+  }, [scrollToAnchor]);
+
+  return scrollToAnchorWithHash;
+};
+
+// Hook that automatically scrolls to hash on page load
+export const useScrollToHashOnLoad = (options = {}) => {
+  const scrollToAnchor = useScrollToAnchor(options);
+
+  React.useEffect(() => {
+    // Check if there's a hash in the URL when component mounts
+    const hash = window.location.hash;
+    if (hash) {
+      // Small delay to ensure page is fully loaded
+      setTimeout(() => {
+        scrollToAnchor(hash);
+      }, 100);
+    }
+  }, [scrollToAnchor]);
+
+  return scrollToAnchor;
+};

package/package.json

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