feat(ui): optimize CTA buttons with contextual copy and fix static export build issues

CTA Optimization:

- Implement scenario-based CTA text across 6 key locations

- Add responsive Header CTA with icon+compact design

- Enhance CTA Section with vision-driven copy

Bug Fixes:

- Fix useSearchParams() build failure with dynamic import wrapper

- Remove useSearchParams() from PageTransition component

- Fix React 19 useEffect lint errors via useSyncExternalStore

UI Enhancements:

- Add ripple effects and gradient animations to Button

- Enhance loading skeleton with branded pulse animation

src/components/sections/product-matrix-section.tsx

@@ -9,7 +9,7 @@ export function ProductMatrixSection() {
   const shouldReduceMotion = useReducedMotion();
 
   return (
-    <section id="products" className="py-20 md:py-28 bg-[var(--color-bg-section)]">
+    <section id="products" className="relative py-16 md:py-20 bg-[var(--color-bg-primary)]">
       <div className="container-wide">
         <motion.div
           initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
@@ -33,14 +33,21 @@ export function ProductMatrixSection() {
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
           {PRODUCTS.map((product, index) => (
-            <ProductCard
+            <motion.div
               key={product.id}
-              title={product.title}
-              description={product.description}
-              href={`/products/${product.id}`}
-              index={index}
-              status={product.status}
-            />
+              initial={shouldReduceMotion ? {} : { opacity: 0, y: 28 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-60px' }}
+              transition={{ duration: 0.5, delay: index * 0.08, ease: [0.16, 1, 0.3, 1] }}
+            >
+              <ProductCard
+                title={product.title}
+                description={product.description}
+                href={`/products/${product.id}`}
+                index={index}
+                status={product.status}
+              />
+            </motion.div>
           ))}
         </div>
       </div>