feat: add CTAButton component with customizable variants, sizes, and arrows

src/app/page.tsx

@@ -4,7 +4,7 @@ import { FooterAndContact } from '@/components/FooterAndContact';
 import { Hero3DRobotics } from '@/components/robotics/Hero3DRobotics';
 import { BrandShowcase } from '@/components/robotics/BrandShowcase';
 import { CategoryShowcaseScroll } from '@/components/robotics/CategoryShowcaseScroll';
-import { RobotProductCard } from '@/components/robotics/RobotProductCard';
+import { FeaturedRobotsShowcase } from '@/components/robotics/FeaturedRobotsShowcase';
 import { IndustryUseCases } from '@/components/robotics/IndustryUseCases';
 import { DemoCTA } from '@/components/robotics/DemoCTA';
 import { ConfigureCTA } from '@/components/robotics/ConfigureCTA';
@@ -83,7 +83,7 @@ export default function HomePage() {
           </div>
         </MotionSection>
 
-        <MotionSection style={{ padding: 'clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem)' }} id="categories">
+        <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="categories">
           <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
             <SectionHeading
               eyebrow="Robot categories"
@@ -97,21 +97,11 @@ export default function HomePage() {
         <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="featured">
           <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
             <SectionHeading
-              eyebrow="Featured robots"
-              title="Available exclusively in the UAE through YS Lootah Robotics."
-              description="A live snapshot of robots ready to demo at our Dubai showroom or deploy at your venue. Request a UAE quotation or book a live demo."
+              eyebrow="Dubai showroom"
+              title="Robots you can see, test, and deploy now."
+              description="Four exhibits on our Dubai showroom floor — step in, request a live demo, or ask for a price."
             />
-            <div
-              style={{
-                display: 'grid',
-                gap: '1.25rem',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))',
-              }}
-            >
-              {FEATURED_ROBOTS.map((r, idx) => (
-                <RobotProductCard key={r.id} robot={r} priority={idx === 0} />
-              ))}
-            </div>
+            <FeaturedRobotsShowcase robots={FEATURED_ROBOTS} />
           </div>
         </MotionSection>
 
@@ -124,9 +114,9 @@ export default function HomePage() {
         <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="services">
           <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
             <SectionHeading
-              eyebrow="Our solutions"
-              title="Intelligent robotics across the full lifecycle."
-              description="From autonomous robotics and intelligent automation to motion programming, SDKs, and remote diagnostics a complete robotics partner for UAE businesses."
+              eyebrow="UAE deployment"
+              title="Real robots, deployed and supported across the UAE."
+              description="From Dubai showroom demo to live venue deployment — procurement, configuration, installation, training, and ongoing support, handled by one local team."
             />
             <ServicesGrid />
           </div>
@@ -147,9 +137,9 @@ export default function HomePage() {
         <MotionSection style={{ padding: 'clamp(3rem, 6vw, 5rem) 0' }} id="how-it-works">
           <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
             <SectionHeading
-              eyebrow="How we work"
-              title="From inquiry to live deployment."
-              description="Three steps from your first message to a robot running in your venue fully supported by our Dubai team."
+              eyebrow="Deployment timeline"
+              title="Five steps from procurement to support."
+              description="The robotics implementation journey — what changes at every stage, in order."
             />
             <HowItWorks />
           </div>