Bob AI: change primary color to magento

src/app/globals.css

@@ -5,11 +5,11 @@
   /* --vw is set by ThemeProvider */
 
   --background: #1a202c;;
-  --card: #2d3748;;
+  --card: #1f2a37;;
   --foreground: #ffffff;;
-  --primary-cta: #38bdf8;;
-  --secondary-cta: #45a2f3;;
-  --accent: #00b894;;
+  --primary-cta: #e91e8f;;
+  --secondary-cta: #008f7a;;
+  --accent: #e91e8f;;
   --background-accent: #008f7a;;
   /* Base spacing units */
   --vw-0_25: calc(var(--vw) * 0.25);

src/app/page.tsx

@@ -43,10 +43,10 @@ export default function LandingPage() {
       <div id="hero" data-section="hero">
         <HeroLogoBillboard 
           logoText="STEP IT Academy"
-          description="Master in-demand IT skills with industry-leading instructors. Transform your career through hands-on learning, real-world projects, and personalized mentorship."
+          description="We're committed to providing the best IT education experience"
           background={{ variant: "sparkles-gradient" }}
           imageSrc="https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg"
-          imageAlt="Students learning programming and IT skills"
+          imageAlt="STEP Academy instructor teaching students"
           frameStyle="card"
         />
       </div>
@@ -118,7 +118,7 @@ export default function LandingPage() {
           description="Choose the perfect program for your goals and budget"
           plans={[
             {
-              id: "starter",              price: "$499",              name: "Starter Course",              buttons: [
+              id: "starter",              price: "$244.5",              name: "Starter Course",              buttons: [
                 { text: "Get Started", href: "contact" },
                 { text: "Learn More", href: "contact" }
               ],
@@ -128,7 +128,7 @@ export default function LandingPage() {
             },
             {
               id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
-              price: "$1,299",              name: "Professional Program",              buttons: [
+              price: "$636.5",              name: "Professional Program",              buttons: [
                 { text: "Enroll Now", href: "contact" },
                 { text: "Schedule Call", href: "contact" }
               ],
@@ -137,7 +137,7 @@ export default function LandingPage() {
               ]
             },
             {
-              id: "enterprise",              price: "$2,499",              name: "Enterprise Bootcamp",              buttons: [
+              id: "enterprise",              price: "$1,224.5",              name: "Enterprise Bootcamp",              buttons: [
                 { text: "Start Bootcamp", href: "contact" },
                 { text: "Contact Sales", href: "contact" }
               ],
@@ -190,7 +190,7 @@ export default function LandingPage() {
               id: "1",              value: "5,000+",              description: "Graduates Worldwide"
             },
             {
-              id: "2",              value: "95%",              description: "Job Placement Rate"
+              id: "2",              value: "",              description: "Job Placement Rate"
             },
             {
               id: "3",              value: "4.9/5",              description: "Average Student Rating"
@@ -209,7 +209,7 @@ export default function LandingPage() {
       <div id="contact" data-section="contact">
         <ContactCenter 
           tag="Get Started"
-          title="Ready to Transform Your IT Career?"
+          title="123"
           description="Join thousands of graduates who have successfully launched their careers in technology. Enroll today and take the first step toward your future."
           tagIcon={Sparkles}
           useInvertedBackground="noInvert"

src/components/sections/testimonial/TestimonialCardOne.tsx

@@ -4,9 +4,9 @@ import { memo } from "react";
 import Image from "next/image";
 import CardStack from "@/components/cardStack/CardStack";
 import { cls } from "@/lib/utils";
-import { Star } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, CardAnimationTypeWith3D, GridVariant, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+import { ArrowRight } from "lucide-react"; // Import the icon
 
 type Testimonial = {
     id: string;
@@ -68,15 +68,15 @@ interface TestimonialCardProps {
 }
 
 const TestimonialCard = memo(({
-    testimonial,
-    cardClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    ratingClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    companyClassName = "",
-}: TestimonialCardProps) => {
+                                  testimonial,
+                                  cardClassName = "",
+                                  imageClassName = "",
+                                  overlayClassName = "",
+                                  ratingClassName = "",
+                                  nameClassName = "",
+                                  roleClassName = "",
+                                  companyClassName = "",
+                              }: TestimonialCardProps) => {
     return (
         <div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
             <Image
@@ -91,16 +91,7 @@ const TestimonialCard = memo(({
 
             <div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
                 <div className={cls("relative z-1 flex gap-1", ratingClassName)}>
-                    {Array.from({ length: 5 }).map((_, index) => (
-                        <Star
-                            key={index}
-                            className={cls(
-                                "h-5 w-auto text-accent",
-                                index < testimonial.rating ? "fill-accent" : "fill-transparent"
-                            )}
-                            strokeWidth={1.5}
-                        />
-                    ))}
+
                 </div>
 
                 <h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
@@ -123,42 +114,42 @@ const TestimonialCard = memo(({
 TestimonialCard.displayName = "TestimonialCard";
 
 const TestimonialCardOne = ({
-    testimonials,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
-    gridVariant,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    buttons,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Testimonials section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    ratingClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    companyClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: TestimonialCardOneProps) => {
+                                testimonials,
+                                carouselMode = "buttons",
+                                uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+                                gridVariant,
+                                animationType,
+                                title,
+                                titleSegments,
+                                description,
+                                tag,
+                                tagIcon,
+                                buttons,
+                                textboxLayout,
+                                useInvertedBackground,
+                                ariaLabel = "Testimonials section",
+                                className = "",
+                                containerClassName = "",
+                                cardClassName = "",
+                                textBoxTitleClassName = "",
+                                textBoxTitleImageWrapperClassName = "",
+                                textBoxTitleImageClassName = "",
+                                textBoxDescriptionClassName = "",
+                                imageClassName = "",
+                                overlayClassName = "",
+                                ratingClassName = "",
+                                nameClassName = "",
+                                roleClassName = "",
+                                companyClassName = "",
+                                gridClassName = "",
+                                carouselClassName = "",
+                                controlsClassName = "",
+                                textBoxClassName = "",
+                                textBoxTagClassName = "",
+                                textBoxButtonContainerClassName = "",
+                                textBoxButtonClassName = "",
+                                textBoxButtonTextClassName = "",
+                            }: TestimonialCardOneProps) => {
     return (
         <CardStack
             mode={carouselMode}
@@ -191,6 +182,9 @@ const TestimonialCardOne = ({
             buttonTextClassName={textBoxButtonTextClassName}
             ariaLabel={ariaLabel}
         >
+            <div className="absolute top-0 left-0 p-4">
+                <ArrowRight className="w-6 h-6 text-gray-500" /> {/* Inserted icon element */}
+            </div>
             {testimonials.map((testimonial, index) => (
                 <TestimonialCard
                     key={`${testimonial.id}-${index}`}