@codesinger0/shared-components 1.0.25 → 1.0.27

package/dist/components/Hero.jsx

@@ -86,7 +86,13 @@ const Hero = ({
                     </div>
 
                     <motion.div
-                        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-100"
+                        className="absolute"
+                        style={{
+                            bottom: '2rem',
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                            zIndex: 100
+                        }}
                         animate={{ y: [0, 10, 0] }}
                         transition={{ duration: 2, repeat: Infinity }}
                     >

package/dist/components/LargeItemCard.jsx

@@ -12,12 +12,21 @@ const LargeItemCard = ({
   reverse = false,
   price,
   discountPrice,
-  icons = []
+  icons = [],
+  classNames = {}
 }) => {
+  const {
+    card: cardClass = 'glass-card',
+    title: titleClass = 'title',
+    subtitle: subtitleClass = 'subtitle',
+    content: contentClass = 'content-text',
+    price: priceClass = 'text-price',
+  } = classNames;
+
   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={cardClass + " relative"} style={{ minHeight: '48vh', overflow: 'visible' }}>
         <div className="max-w-7xl mx-auto px-6 pt-16">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 
@@ -26,9 +35,9 @@ const LargeItemCard = ({
               className={`text-center lg:text-right space-y-6 ${reverse ? 'lg:order-2' : 'lg:order-1'}`}
               dir="rtl"
             >
-              <h2 className="title">{title}</h2>
-              <h3 className="subtitle">{subtitle}</h3>
-              <p className="content-text max-w-md mx-auto lg:mx-0">{description}</p>
+              <h2 className={titleClass}>{title}</h2>
+              <h3 className={subtitleClass}>{subtitle}</h3>
+              <p className={contentClass + " max-w-md mx-auto lg:mx-0"}>{description}</p>
 
               {/* Price Section */}
               {price && (
@@ -36,7 +45,7 @@ const LargeItemCard = ({
                   {discountPrice && discountPrice < price ? (
                     <div className="space-y-1">
                       <div className="flex items-center justify-center lg:justify-start gap-2">
-                        <span className="text-2xl font-bold text-price">
+                        <span className={"text-2xl font-bold " + priceClass}>
                           ₪{discountPrice}
                         </span>
                         <span className="text-sm content-text line-through">
@@ -51,7 +60,7 @@ const LargeItemCard = ({
                       </div>
                     </div>
                   ) : (
-                    <span className="text-2xl font-bold text-price">
+                    <span className={"text-2xl font-bold " + priceClass}>
                       ₪{price}
                     </span>
                   )}
@@ -68,7 +77,7 @@ const LargeItemCard = ({
               {icons.length > 0 && (
                 <div className="flex flex-wrap justify-center lg:justify-start gap-10 mt-6">
                   {icons.map((icon, index) => (
-                    <div key={index} className="flex flex-col items-center justify-center content-text rounded-lg shadow-sm pb-10">
+                    <div key={index} className={contentClass + "flex flex-col items-center justify-center rounded-lg shadow-sm pb-10"}>
                       {icon}
                     </div>
                   ))}
@@ -105,11 +114,16 @@ const LargeItemCard = ({
 
       {/* Floating Image Container (desktop only, unchanged behavior) */}
       <div
-        className={`hidden lg:block absolute transform -translate-x-1/2 left-1/2 lg:top-8 ${reverse
-          ? 'lg:left-16 lg:transform-none lg:translate-x-0'
-          : 'lg:left-auto lg:right-16 lg:transform-none lg:translate-x-0'
-          }`}
-        style={{ zIndex: 10, width: '600px', maxWidth: '90vw' }}
+        className="hidden lg:block absolute"
+        style={{
+          zIndex: 10,
+          width: '600px',
+          maxWidth: '90vw',
+          top: '2rem',
+          left: reverse ? '4rem' : 'auto',
+          right: reverse ? 'auto' : '4rem',
+          transform: 'none'
+        }}
       >
         <div className="relative">
           <motion.div

package/package.json

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