OPS-833: Add extra logos to finance page

Author: carlosabadia

assets/companies/light/antgroup.svg

@@ -22,4 +22,5 @@ def logos_carousel(logos: list[str]) -> rx.Component:
         class_name="h-[10.75rem] w-full overflow-hidden",
         gradient_width=0,
         speed=50,
+        pause_on_hover=False,
     )

assets/companies/light/spglobal.svg

@@ -1,14 +1,35 @@
 import reflex as rx
+import reflex_ui as ui
 
-from pcweb.pages.use_cases.common.social_proof import first_card, social_proof_card
+from pcweb.pages.use_cases.common.logos_carousel import logos_carousel
+
+LOGOS = [
+    "man_group",
+    "world_bank",
+    "credit_agricole",
+    "bayesline",
+    "antgroup",
+    "spglobal",
+]
+
+
+def first_card(title: str) -> rx.Component:
+    return rx.el.div(
+        ui.icon(
+            "CheckmarkBadge02Icon",
+            class_name="text-m-slate-11 dark:text-m-slate-9 shrink-0",
+        ),
+        rx.el.span(
+            title,
+            class_name="text-m-slate-11 dark:text-m-slate-9 text-sm font-medium text-wrap",
+        ),
+        class_name="flex flex-row gap-2.5 items-center max-lg:justify-center lg:col-span-2 px-10 h-full max-lg:h-[10.75rem] max-lg:w-full w-full lg:border-r",
+    )
 
 
 def social_proof() -> rx.Component:
     return rx.el.div(
         first_card("Trusted by innovative finance teams"),
-        social_proof_card("man_group"),
-        social_proof_card("world_bank"),
-        social_proof_card("credit_agricole"),
-        social_proof_card("bayesline"),
-        class_name="grid lg:grid-cols-6 grid-cols-1 justify-center items-center mx-auto w-full max-w-[64.19rem] lg:border-x border-slate-3 lg:divide-x divide-slate-3 lg:border-t max-lg:divide-y",
+        logos_carousel(LOGOS),
+        class_name="flex lg:flex-row flex-col justify-center items-center mx-auto w-full max-w-[64.19rem] lg:border border-slate-3 h-[10.75rem] z-1",
     )