Bob AI: Show course duration and difficulty level on hover...

src/components/sections/contact/ContactSplitForm.tsx

@@ -151,7 +151,11 @@ const ContactSplitForm = ({
                         <Textarea
                             placeholder={textarea.placeholder}
                             value={formData[textarea.name] || ""}
-                            onChange={(value) => setFormData({ ...formData, [textarea.name]: value })}
+                            onChange={(value) => {
+                                if (value.length <= 500) {
+                                    setFormData({ ...formData, [textarea.name]: value });
+                                }
+                            }}
                             required={textarea.required}
                             rows={textarea.rows || 5}
                             ariaLabel={textarea.placeholder}
@@ -159,6 +163,14 @@ const ContactSplitForm = ({
                         />
                     )}
 
+                    <div className="text-right">
+                        {textarea && (
+                            <span>
+                                {formData[textarea.name]?.length || 0}/500 characters
+                            </span>
+                        )}
+                    </div>
+
                     <Button
                         {...getButtonProps(
                             { text: buttonText, props: getButtonConfigProps() },

src/components/sections/product/ProductCardOne.tsx

@@ -21,6 +21,8 @@ type ProductCard = {
     onFavorite?: () => void;
     onProductClick?: () => void;
     isFavorited?: boolean;
+    duration: string;
+    difficulty: string;
 };
 
 interface ProductCardItemProps {
@@ -80,6 +82,11 @@ const ProductCardItem = memo(({
                     <ArrowUpRight className="h-4/10 text-background transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
                 </button>
             </div>
+
+            <div className="absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center opacity-0 transition-opacity group-hover:opacity-100">
+                <p className="text-sm text-center text-foreground/70">{product.duration}</p>
+                <p className="text-sm text-center text-foreground/70">{product.difficulty}</p>
+            </div>
         </article>
     );
 });

src/components/sections/team/TeamCardOne.tsx

@@ -17,6 +17,7 @@ type TeamMember = {
     role: string;
     imageSrc: string;
     imageAlt?: string;
+    rating: number;
 };
 
 interface TeamCardOneProps {
@@ -94,6 +95,14 @@ const TeamMemberCard = memo(({
                             {member.role}
                         </p>
                     </div>
+                    <div className="flex items-center gap-1">
+                        <Star className="w-4 h-4 text-yellow-400" />
+                        <Star className="w-4 h-4 text-yellow-400" />
+                        <Star className="w-4 h-4 text-yellow-400" />
+                        <Star className="w-4 h-4" />
+                        <Star className="w-4 h-4" />
+                        <span className="text-sm text-foreground">{member.rating}/5</span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -169,13 +178,6 @@ const TeamCardOne = ({
             buttonTextClassName={textBoxButtonTextClassName}
             ariaLabel={ariaLabel}
         >
-            <div className="flex items-center gap-1 mt-2">
-                <Star className="w-4 h-4 text-yellow-400" />
-                <Star className="w-4 h-4 text-yellow-400" />
-                <Star className="w-4 h-4 text-yellow-400" />
-                <Star className="w-4 h-4" />
-                <Star className="w-4 h-4" />
-            </div>
             {members.map((member, index) => (
                 <TeamMemberCard
                     key={`${member.id}-${index}`}