@codesinger0/shared-components 1.0.21 → 1.0.23

package/dist/components/QAAccordion.jsx

@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const QAAccordion = ({
+  title = "שאלות נפוצות",
+  subtitle = "מענה לשאלות הנפוצות ביותר",
+  qaItems = [],
+  className = ""
+}) => {
+  const [openIndex, setOpenIndex] = useState(null);
+
+  const toggleAccordion = (index) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  // Default Q&A items for demo
+  const defaultQAItems = [
+    {
+      question: "מהי טרופיקל ג’אר ומה הסיפור שמאחוריה?",
+      answer: "טרופיקל ג’אר היא מותג של רטבים מותססים טבעיים בעבודת יד, שנולדה מתוך אהבה לתסיסה, לטעמים טרופיים ולבריאות. אנו משלבים מסורת קולינרית עם יצירתיות מודרנית, כדי להביא לשולחן שלכם משהו חדש ומרגש."
+    },
+    {
+      question: "מה זה רוטב מותסס?",
+      answer: "רוטב מותסס הוא רוטב שעובר תהליך טבעי שבו מיקרואורגניזמים ידידותיים מפרקים את הסוכרים בירקות ובפירות. התוצאה היא עומק טעמים ייחודי, עיכול קל יותר ויתרונות בריאותיים — בלי חומרים משמרים."
+    },
+    {
+      question: "מה המרכיבים ברטבים שלכם?",
+      answer: "כל רוטב מיוצר מירקות ופירות טריים, תבלינים איכותיים, מלח ים ומים. בלי חומרים מלאכותיים, בלי צבעי מאכל ובלי קיצורי דרך — רק חומרי גלם טבעיים שמביאים לידי ביטוי את הטבע."
+    },
+    {
+      question: "איך הכי מומלץ להשתמש ברטבים?",
+      answer: "הרטבים שלנו מתאימים כמעט לכל דבר: כתוספת לסלטים, כמטבל לירקות, לשדרוג סנדוויצ'ים, כתיבול לבשרים ולדגים, או אפילו כתיבול עדין לאורז ופסטה. הם מוסיפים נגיעה טרופית ובריאה לכל מנה."
+    },
+    {
+      question: "איך לשמור את הרטבים אחרי פתיחה?",
+      answer: "לאחר פתיחה יש לשמור במקרר ולוודא שהצנצנת סגורה היטב. התסיסה ממשיכה גם אחרי הפתיחה, לכן ייתכנו שינויים קלים בטעם או בבועות טבעיות — זה חלק מהקסם!"
+    },
+    {
+      question: "האם הרטבים מתאימים לטבעונים?",
+      answer: "כן, כל הרטבים שלנו 100% טבעוניים וצמחיים. הם מיוצרים ללא מוצרים מן החי ומתאימים לכל מי שמחפש תיבול אותנטי, טבעי ובריא."
+    },
+    {
+      question: "האם הרטבים חריפים?",
+      answer: "הסדרה שלנו כוללת גם רטבים עדינים וגם רטבים חריפים יותר. בכל מוצר מצוין רמת החריפות כדי שתוכלו לבחור את מה שהכי מתאים לטעם האישי שלכם."
+    },
+    {
+      question: "האם אפשר להזמין משלוחים?",
+      answer: "כן! אנו מבצעים משלוחים לכל הארץ. ניתן לבחור משלוח עד הבית או נקודת איסוף, והזמנה מגיעה לרוב תוך 3–5 ימי עסקים."
+    },
+    {
+      question: "האם אפשר לרכוש בחנויות פיזיות?",
+      answer: "נכון לעכשיו, הרטבים זמינים בעיקר כאן באתר. בהמשך נוסיף נקודות מכירה נבחרות ונעדכן באתר וברשתות החברתיות."
+    },
+    {
+      question: "כמה זמן מחזיקים הרטבים?",
+      answer: "בזכות התסיסה הטבעית, חיי המדף ארוכים יותר מרטבים רגילים. כל צנצנת מגיעה עם תאריך עדיף להשתמש עד, ולאחר פתיחה מומלץ לצרוך תוך מספר שבועות."
+    },
+    {
+      question: "מה היתרונות הבריאותיים של רטבים מותססים?",
+      answer: "התסיסה מייצרת חיידקים פרוביוטיים טובים ותורמת לעיכול בריא. בנוסף, היא מעצימה את הטעמים באופן טבעי ומפחיתה צורך בתוספים מלאכותיים."
+    },
+    {
+      question: "איך אני יודע איזה רוטב לבחור?",
+      answer: "אם אתם אוהבים טעמים עדינים – התחילו ברטבים הפירותיים והמתונים. אם אתם חובבי חריף – נסו את הגרסאות החריפות יותר. תמיד כדאי להתחיל מצנצנת אחת ולגלות את הסגנון האהוב עליכם."
+    }
+  ];
+
+
+  const items = qaItems.length > 0 ? qaItems : defaultQAItems;
+
+  return (
+    <section className={`py-16 px-4 bg-main ${className}`} dir="rtl">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h2 className="title mb-4">{title}</h2>
+          <p className="subtitle">{subtitle}</p>
+        </div>
+
+        {/* Accordion */}
+        <div className="space-y-4">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
+            >
+              {/* Question Header */}
+              <button
+                onClick={() => toggleAccordion(index)}
+                className="w-full px-6 py-5 text-right flex items-center justify-between hover:bg-gray-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20"
+              >
+                <span className="subtitle font-semibold text-gray-800 flex-1">
+                  {item.question}
+                </span>
+
+                {/* Animated Arrow */}
+                <motion.div
+                  animate={{ rotate: openIndex === index ? 180 : 0 }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 25
+                  }}
+                  className="mr-4 flex-shrink-0"
+                >
+                  <svg
+                    className="w-5 h-5 text-primary"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M19 9l-7 7-7-7"
+                    />
+                  </svg>
+                </motion.div>
+              </button>
+
+              {/* Answer Content with Animation */}
+              <AnimatePresence initial={false}>
+                {openIndex === index && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{
+                      height: "auto",
+                      opacity: 1,
+                      transition: {
+                        height: {
+                          type: "spring",
+                          stiffness: 300,
+                          damping: 30,
+                          mass: 0.8
+                        },
+                        opacity: {
+                          duration: 0.25,
+                          delay: 0.1
+                        }
+                      }
+                    }}
+                    exit={{
+                      height: 0,
+                      opacity: 0,
+                      transition: {
+                        height: {
+                          type: "spring",
+                          stiffness: 300,
+                          damping: 30,
+                          mass: 0.8
+                        },
+                        opacity: {
+                          duration: 0.15
+                        }
+                      }
+                    }}
+                    className="overflow-hidden"
+                  >
+                    <div className="px-6 pb-5 border-t border-gray-100">
+                      <motion.p
+                        initial={{ y: -10, opacity: 0 }}
+                        animate={{
+                          y: 0,
+                          opacity: 1,
+                          transition: {
+                            type: "spring",
+                            stiffness: 300,
+                            damping: 25,
+                            delay: 0.1
+                          }
+                        }}
+                        className="content-text text-gray-700 leading-relaxed pt-4"
+                      >
+                        {item.answer}
+                      </motion.p>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          ))}
+        </div>
+
+        {/* Optional CTA */}
+        <div className="text-center mt-12">
+          <p className="content-text mb-4">
+            לא מצאתם את התשובה שחיפשתם?
+          </p>
+          <button className="btn-primary">
+            צרו קשר
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default QAAccordion;

package/dist/components/ToastProvider.jsx

@@ -0,0 +1,38 @@
+// components/ToastProvider.jsx
+import { createContext, useContext, useState, useCallback } from 'react';
+import Toast from './elements/Toast';
+
+const ToastContext = createContext();
+
+export const useToast = () => useContext(ToastContext);
+
+export const ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+
+  const addToast = useCallback((message, variant, duration) => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message, duration, variant }]);
+  }, []);
+
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={addToast}>
+      {children}
+      <div className="fixed bottom-5 left-0 right-0 flex flex-col items-center space-y-2 z-50">
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            id={toast.id}
+            message={toast.message}
+            duration={toast.duration}
+            variant={toast.variant}
+            onClose={removeToast}
+          />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};

package/dist/components/elements/Toast.jsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+const variantStyles = {
+  success: 'bg-green-500 text-white',
+  error: 'bg-red-500 text-white',
+  info: 'bg-blue-500 text-white',
+  warning: 'bg-yellow-400 text-black',
+};
+
+const Toast = ({ id, message, onClose, duration = 3000, variant = 'info' }) => {
+  const [show, setShow] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShow(false);
+      setTimeout(() => onClose(id), 300); // match transition duration
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [id, onClose, duration]);
+
+  return (
+    <div
+      className={`fixed bottom-5 left-1/2 transform -translate-x-1/2
+                  px-4 py-2 rounded-lg shadow-lg
+                  text-sm sm:text-base md:text-lg
+                  max-w-xs sm:max-w-sm md:max-w-md
+                  transition-all duration-300
+                  ${variantStyles[variant]}
+                  ${show ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'}`}
+    >
+      {message}
+    </div>
+  );
+};
+
+export default Toast;

package/dist/index.js

@@ -5,12 +5,14 @@ export { default as LargeItemCard } from './components/LargeItemCard';
 export { default as SmallItemsGrid } from './components/SmallItemsGrid';
 export { default as SmallItemCard } from './components/SmallItemCard';
 export { default as Hero } from './components/Hero'
+export { default as QAAccordion } from './components/QAAccordion'
 
 // Modals
 export { default as ItemDetailsModal } from './components/modals/ItemDetailsModal'
 
 // Context
 export { ItemModalProvider, useItemModal } from './context/ItemModalContext';
+export { ToastProvider, useToast } from './components/ToastProvider'
 
 // Hooks
 export { default as useScrollLock } from './hooks/useScrollLock'

package/package.json

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