Bob AI: change the hero title to "Launch Your Tech Career ...

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,7 +43,7 @@ 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."
           tag="Premium Tech Education"
           tagIcon={Sparkles}
@@ -213,6 +214,17 @@ export default function LandingPage() {
         />
       </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/product/ProductCardOne.tsx

@@ -23,41 +23,6 @@ type ProductCard = {
     isFavorited?: boolean;
 };
 
-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;
@@ -152,48 +117,50 @@ const ProductCardOne = ({
     const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
 
     return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant={gridVariant}
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            buttons={buttons}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
-            titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            ariaLabel={ariaLabel}
-        >
-            {products.map((product, index) => (
-                <ProductCardItem
-                    key={`${product.id}-${index}`}
-                    product={product}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    imageClassName={imageClassName}
-                    cardNameClassName={cardNameClassName}
-                    cardPriceClassName={cardPriceClassName}
-                />
-            ))}
-        </CardStack>
+        <>
+            <span className="inline-block px-3 py-1 text-sm font-medium rounded-full bg-primary-cta/10 text-primary-cta">New Course</span>
+            <CardStack
+                mode={carouselMode}
+                gridVariant={gridVariant}
+                uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+                animationType={animationType}
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                buttons={buttons}
+                textboxLayout={textboxLayout}
+                useInvertedBackground={useInvertedBackground}
+                className={className}
+                containerClassName={containerClassName}
+                gridClassName={gridClassName}
+                carouselClassName={carouselClassName}
+                controlsClassName={controlsClassName}
+                textBoxClassName={textBoxClassName}
+                titleClassName={textBoxTitleClassName}
+                titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+                titleImageClassName={textBoxTitleImageClassName}
+                descriptionClassName={textBoxDescriptionClassName}
+                tagClassName={textBoxTagClassName}
+                buttonContainerClassName={textBoxButtonContainerClassName}
+                buttonClassName={textBoxButtonClassName}
+                buttonTextClassName={textBoxButtonTextClassName}
+                ariaLabel={ariaLabel}
+            >
+                {products.map((product, index) => (
+                    <ProductCardItem
+                        key={`${product.id}-${index}`}
+                        product={product}
+                        shouldUseLightText={shouldUseLightText}
+                        cardClassName={cardClassName}
+                        imageClassName={imageClassName}
+                        cardNameClassName={cardNameClassName}
+                        cardPriceClassName={cardPriceClassName}
+                    />
+                ))}
+            </CardStack>
+        </>
     );
 };