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

src/app/page.tsx

@@ -12,6 +12,7 @@ import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { Sparkles, CheckCircle } from "lucide-react";
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function LandingPage() {
   return (
@@ -42,8 +43,8 @@ export default function LandingPage() {
 
       <div id="hero" data-section="hero">
         <HeroOverlay
-          title="Master Technology. Shape Your Future."
+          title="Launch Your Tech Career Today"
-          description="Join thousands of students learning cutting-edge IT skills through hands-on courses and expert instruction. Start your journey to a successful tech career today."
+          description="Enrollment deadline: 5 days left"
           tag="Premium Tech Education"
           tagIcon={Sparkles}
           imageSrc="http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg"
@@ -210,9 +211,21 @@ export default function LandingPage() {
           ]}
           useInvertedBackground="noInvert"
           animationType="slide-up"
+          ctaButtonTextClassName="animate-pulse"
         />
       </div>
 
+      <div id="contact_split_form" data-section="contact_split_form">
+        <ContactSplitForm
+          title="Connect with Us"
+          description="Get in touch to learn more about our programs and opportunities."
+          inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }, { name: "message", type: "textarea", placeholder: "Your Message", required: false }]}
+          textarea={{ name: "", placeholder: "" }}
+          useInvertedBackground="noInvert"
+          imageSrc="https://placehold.co/600x400"
+          mediaPosition="left"
+        />
+      </div>
       <div id="footer" data-section="footer">
         <FooterLogoEmphasis
           logoText="IT Academy"

src/components/sections/contact/ContactFaq.tsx

@@ -139,6 +139,8 @@ const ContactFaq = ({
                 ctaButtonTextClassName
               )}
             />
+
+            <button className="mt-4 bg-primary-cta text-secondary-cta px-4 py-2 rounded-md">Live Chat</button>
           </div>
 
           <div

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/hero/HeroOverlay.tsx

@@ -102,6 +102,13 @@ const HeroOverlay = ({
         textPosition === "center" ? "items-center justify-center" : "items-end pb-[var(--width-10)] md:pb-hero-page-padding",
         containerClassName
       )}>
+        <div className="mb-4">
+          <div className="bg-gray-200 rounded-full h-2">
+            <div style={{ width: "50%" }} className="bg-primary-cta h-2 rounded-full"></div>
+          </div>
+          <span className="block text-sm text-gray-500">500 Students Enrolled This Month</span>
+        </div>
+        <div className="text-2xl font-bold">03:14:07</div>
         <TextBox
           title={title}
           description={description}
@@ -132,6 +139,9 @@ const HeroOverlay = ({
           buttonTextClassName={cls("text-base", buttonTextClassName)}
           center={textPosition === "center"}
         />
+        <div className="mt-4">
+          <button className="bg-primary-cta text-secondary-cta px-4 py-2 rounded-full">Enroll Now</button>
+        </div>
       </div>
     </section>
   );

src/components/sections/product/ProductCardOne.tsx

@@ -21,43 +21,10 @@ type ProductCard = {
     onFavorite?: () => void;
     onProductClick?: () => void;
     isFavorited?: boolean;
+    duration: string;
+    difficulty: string;
 };
 
-interface ProductCardOneProps {
-    products: ProductCard[];
-    carouselMode?: "auto" | "buttons";
-    gridVariant: ProductCardOneGridVariant;
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    buttons?: ButtonConfig[];
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    imageClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    cardNameClassName?: string;
-    cardPriceClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
-}
-
 interface ProductCardItemProps {
     product: ProductCard;
     shouldUseLightText: boolean;
@@ -75,6 +42,7 @@ const ProductCardItem = memo(({
     cardNameClassName = "",
     cardPriceClassName = "",
 }: ProductCardItemProps) => {
+    const priceNumber = parseFloat(product.price.replace(/[^0-9.-]+/g, ""));
     return (
         <article
             className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
@@ -92,6 +60,12 @@ const ProductCardItem = memo(({
 
             <div className="relative z-1 flex items-center justify-between gap-4">
                 <div className="flex-1 min-w-0">
+                    {product.name?.includes("Data Science") && (
+                        <span className="inline-block px-3 py-1 text-sm font-medium rounded-full bg-primary-cta/10 text-primary-cta">Most Popular</span>
+                    )}
+                    {priceNumber < 14000 && (
+                        <span className="inline-block px-3 py-1 text-sm font-medium rounded-full bg-warning-cta/10 text-warning-cta">Limited Seats</span>
+                    )}
                     <h3 className={cls("text-base font-medium truncate leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
                         {product.name}
                     </h3>
@@ -108,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>
     );
 });
@@ -152,48 +131,50 @@ const ProductCardOne = ({
     const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
 
     return (
-        <CardStack
+        <>
-            mode={carouselMode}
+            <span className="inline-block px-3 py-1 text-sm font-medium rounded-full bg-primary-cta/10 text-primary-cta">New Course</span>
-            gridVariant={gridVariant}
+            <CardStack
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+                mode={carouselMode}
-            animationType={animationType}
+                gridVariant={gridVariant}
-            
+                uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            title={title}
+                animationType={animationType}
-            titleSegments={titleSegments}
+                title={title}
-            description={description}
+                titleSegments={titleSegments}
-            tag={tag}
+                description={description}
-            tagIcon={tagIcon}
+                tag={tag}
-            buttons={buttons}
+                tagIcon={tagIcon}
-            textboxLayout={textboxLayout}
+                buttons={buttons}
-            useInvertedBackground={useInvertedBackground}
+                textboxLayout={textboxLayout}
-            className={className}
+                useInvertedBackground={useInvertedBackground}
-            containerClassName={containerClassName}
+                className={className}
-            gridClassName={gridClassName}
+                containerClassName={containerClassName}
-            carouselClassName={carouselClassName}
+                gridClassName={gridClassName}
-            controlsClassName={controlsClassName}
+                carouselClassName={carouselClassName}
-            textBoxClassName={textBoxClassName}
+                controlsClassName={controlsClassName}
-            titleClassName={textBoxTitleClassName}
+                textBoxClassName={textBoxClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+                titleClassName={textBoxTitleClassName}
-            titleImageClassName={textBoxTitleImageClassName}
+                titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            descriptionClassName={textBoxDescriptionClassName}
+                titleImageClassName={textBoxTitleImageClassName}
-            tagClassName={textBoxTagClassName}
+                descriptionClassName={textBoxDescriptionClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
+                tagClassName={textBoxTagClassName}
-            buttonClassName={textBoxButtonClassName}
+                buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
+                buttonClassName={textBoxButtonClassName}
-            ariaLabel={ariaLabel}
+                buttonTextClassName={textBoxButtonTextClassName}
-        >
+                ariaLabel={ariaLabel}
-            {products.map((product, index) => (
+            >
-                <ProductCardItem
+                {products.map((product, index) => (
-                    key={`${product.id}-${index}`}
+                    <ProductCardItem
-                    product={product}
+                        key={`${product.id}-${index}`}
-                    shouldUseLightText={shouldUseLightText}
+                        product={product}
-                    cardClassName={cardClassName}
+                        shouldUseLightText={shouldUseLightText}
-                    imageClassName={imageClassName}
+                        cardClassName={cardClassName}
-                    cardNameClassName={cardNameClassName}
+                        imageClassName={imageClassName}
-                    cardPriceClassName={cardPriceClassName}
+                        cardNameClassName={cardNameClassName}
-                />
+                        cardPriceClassName={cardPriceClassName}
-            ))}
+                    />
-        </CardStack>
+                ))}
+            </CardStack>
+        </>
     );
 };
 

src/components/sections/team/TeamCardOne.tsx

@@ -7,6 +7,7 @@ import { cls } from "@/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import { Star } from "lucide-react";
 
 type TeamCardOneGridVariant = Exclude<GridVariant, "timeline">;
 
@@ -16,6 +17,7 @@ type TeamMember = {
     role: string;
     imageSrc: string;
     imageAlt?: string;
+    rating: number;
 };
 
 interface TeamCardOneProps {
@@ -93,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>

src/components/sections/testimonial/TestimonialCardFive.tsx

@@ -2,7 +2,6 @@
 
 import { memo } from "react";
 
-
 import FullWidthCarousel from "@/components/cardStack/layouts/carousels/FullWidthCarousel";
 import MediaContent from "@/components/shared/MediaContent";
 import Tag from "@/components/shared/Tag";
@@ -11,6 +10,7 @@ import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+import { Star } from "lucide-react";
 
 type Testimonial = {
     id: string;
@@ -204,6 +204,13 @@ const TestimonialCardFive = ({
             buttonTextClassName={textBoxButtonTextClassName}
             ariaLabel={ariaLabel}
         >
+            <div className="flex items-center mb-4">
+                <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 text-gray-300" />
+                <Star className="w-4 h-4 text-gray-300" />
+            </div>
             {testimonials.map((testimonial, index) => (
                 <TestimonialCard
                     key={`${testimonial.id}-${index}`}