@codesinger0/shared-components 1.1.21 → 1.1.22

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-indigo-600" 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">
+        {/* 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/LargeItemCard.jsx

@@ -4,6 +4,9 @@ import { motion } from 'framer-motion'
 
 const LargeItemCard = ({
   imageUrl,
+  videoUrl,
+  contentType = 'image',
+  mediaScale = 1,
   title,
   subtitle,
   description,
@@ -12,7 +15,8 @@ const LargeItemCard = ({
   reverse = false,
   price,
   discountPrice,
-    amountAvailable,
+  amountAvailable,
+  absolutePosition = true,
   availableLabel = 'נותרו במלאי',
   soldOutLabel = 'אזל במלאי',
   icons = [],
@@ -26,14 +30,43 @@ const LargeItemCard = ({
     price: priceClass = 'text-price',
   } = classNames;
 
+  const MediaElement = ({ className, style }) => {
+    const scaleStyle = {
+      ...style,
+      transform: `scale(${mediaScale})`,
+      transformOrigin: 'center'
+    };
+    if (contentType === 'video') {
+      return (
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          className={`rounded-lg shadow-2xl border border-primary max-w-full ${className}`}
+          style={{ ...scaleStyle, objectFit: 'contain' }}
+        >
+          <source src={videoUrl} type="video/mp4" />
+        </video>
+      );
+    }
+    return (
+      <img
+        src={imageUrl}
+        alt={title}
+        className={className}
+        style={scaleStyle}
+      />
+    );
+  };
+
   return (
     <section className="relative w-full overflow-visible py-16 px-4">
       {/* Background Section with Text Content */}
       <div className="glass-card relative" style={{ minHeight: '48vh', overflow: 'visible' }}>
 
-        <div className="max-w-7xl mx-auto px-6 pt-16">
+        <div className="max-w-7xl mx-auto px-6 py-16">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-
             {/* Text Content */}
             <div
               className={`text-center lg:text-right space-y-6 ${reverse ? 'lg:order-2' : 'lg:order-1'}`}
@@ -85,13 +118,15 @@ const LargeItemCard = ({
                     {soldOutLabel}
                   </div>
                 ) : (
-                  <RoundButton
-                    variant="primary"
-                    onClick={onButtonClick}
-                    disabled={amountAvailable !== undefined && amountAvailable <= 0}
-                  >
-                    {buttonLabel}
-                  </RoundButton>
+                  buttonLabel && (
+                    <RoundButton
+                      variant="primary"
+                      onClick={onButtonClick}
+                      disabled={amountAvailable !== undefined && amountAvailable <= 0}
+                    >
+                      {buttonLabel}
+                    </RoundButton>
+                  )
                 )}
               </div>
 
@@ -107,70 +142,75 @@ const LargeItemCard = ({
               )}
             </div>
 
-            {/* Space for image positioning (desktop uses floating image, keep spacer) */}
-            <div className={`hidden lg:block relative lg:h-full ${reverse ? 'lg:order-1' : 'lg:order-2'}`}>
-              {/* reserved for absolutely positioned image on desktop */}
-            </div>
+            {/* Desktop image/video positioning */}
+            {!absolutePosition && (
+              <div className={`hidden lg:block ${reverse ? 'lg:order-1' : 'lg:order-2'}`}>
+                <motion.div
+                  key={'image'}
+                  initial={{ opacity: 0, x: reverse ? -50 : 50 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: 0.5 }}
+                  className="h-full flex items-center justify-center"
+                >
+                  <MediaElement
+                    className="rounded-lg shadow-2xl border border-primary max-w-full"
+                    style={{
+                      maxHeight: '450px',
+                      width: 'auto',
+                      height: 'auto'
+                    }}
+                  />
+                </motion.div>
+              </div>
+            )}
           </div>
-
         </div>
 
         {/* full-width mobile image */}
         <div className="block lg:hidden mt-8 w-full">
-          <motion.div
-            key={'image'}
-            initial={{ opacity: 0, y: 50 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ delay: 1 * 0.5 }}
-            className="h-full"
-          >
-            <img
-              src={imageUrl}
-              alt={title}
-              className="w-full h-auto rounded-none shadow-2xls"
-            />
-          </motion.div>
+          <MediaElement
+            className="w-full h-auto rounded-none shadow-2xls"
+          />
         </div>
       </div>
 
-      {/* Floating Image Container (desktop only, unchanged behavior) */}
-      <div
-        className="hidden lg:block absolute"
-        style={{
-          zIndex: 10,
-          width: '30vw',
-          maxWidth: '40vw',
-          top: '2rem',
-          left: reverse ? '4rem' : 'auto',
-          right: reverse ? 'auto' : '4rem',
-          transform: 'none'
-        }}
-      >
-        <div className="relative">
-          <motion.div
-            key={'image'}
-            initial={{ opacity: 0, x: reverse ? -50 : 50 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ delay: 1 * 0.5 }}
-            className="h-full"
-          >
-            <img
-              src={imageUrl}
-              alt={title}
-              className="rounded-lg shadow-2xl border border-primary"
-              style={{
-                maxHeight: '450px',
-                maxWidth: '100%',
-                width: 'auto',
-                height: 'auto',
-                objectFit: 'contain'
-              }}
-            />
-          </motion.div>
+      {/* Floating Image Container (desktop only, absolute positioned) */}
+      {absolutePosition && (
+        <div
+          className="hidden lg:block absolute"
+          style={{
+            zIndex: 10,
+            width: '30vw',
+            maxWidth: '40vw',
+            top: '2rem',
+            left: reverse ? '4rem' : 'auto',
+            right: reverse ? 'auto' : '4rem',
+            transform: 'none'
+          }}
+        >
+          <div className="relative">
+            <motion.div
+              key={'image'}
+              initial={{ opacity: 0, x: reverse ? -50 : 50 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.5 }}
+              className="h-full"
+            >
+              <MediaElement
+                className="rounded-lg shadow-2xl border border-primary"
+                style={{
+                  maxHeight: '450px',
+                  maxWidth: '100%',
+                  width: 'auto',
+                  height: 'auto'
+                }}
+              />
+            </motion.div>
+          </div>
         </div>
-      </div>
+      )}
     </section>
   );
 };

package/dist/components/VideoCard.jsx

@@ -30,7 +30,7 @@ export default function VideoCard({ videoUrl, title, description, index }) {
             onMouseLeave={() => setShowControls(false)}
         >
             {/* Video Container */}
-            <div className="max-h-20 overflow-hidden">
+            <div className="relative w-full aspect-video overflow-hidden">
                 <video
                     ref={videoRef}
                     autoPlay

package/dist/index.js

@@ -13,6 +13,7 @@ export { default as AdvantagesList } from './components/AdvantagesList'
 export { default as ShoppingCartModal } from './components/cart/ShoppingCartModal'
 export { default as FloatingCartButton } from './components/cart/FloatingCartButton'
 export { default as VideoCard } from './components/VideoCard'
+export { default as IconGrid } from './components/IconGrid'
 export { default as Menu } from './components/Menu'
 export { default as ProductsDisplay } from './components/products/ProductsDisplay'
 export { default as ProductsSidebar } from './components/products/ProductsSidebar'

package/package.json

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