Bob AI: Add star rating display (4.8/5) next to each instr...

src/app/page.tsx

@@ -211,6 +211,7 @@ export default function LandingPage() {
           ]}
           useInvertedBackground="noInvert"
           animationType="slide-up"
+          ctaButtonTextClassName="animate-pulse"
         />
       </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

@@ -139,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

@@ -40,6 +40,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)}
@@ -57,6 +58,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>

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>