From 22b0ccb81638cfa249e6df15ad7156f882dfb659 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Mon, 22 Dec 2025 19:20:31 -0300
Subject: [PATCH 1/4] Refactor SupportedBySection layout in Hero3D component

- Streamlined the structure of the SupportedBySection by removing unnecessary fragments and improving the layout for better readability.
- Adjusted mobile carousel styling for enhanced responsiveness and visual consistency.
- Maintained existing functionality while improving code clarity and maintainability.
---
 apps/app/src/components/custom-ui/hero-3d.tsx | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index 2ba51bf..936cf1f 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -135,25 +135,23 @@ export function SupportedBySection() {
   const duplicatedLogos = [...SUPPORTED_BY_LOGOS, ...SUPPORTED_BY_LOGOS]
 
   return (
-    <>
-      <motion.section
-        className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-16"
-        initial="hidden"
-        animate={isMounted ? "visible" : "hidden"}
-        variants={fadeUp}
-      >
-        <div className="flex flex-col items-start space-y-4">
-          <HighlighterText>SUPPORTED BY</HighlighterText>
-          
-          {/* Desktop: flex-wrap layout */}
-          <div className="hidden md:flex flex-wrap gap-3">
-            {SUPPORTED_BY_LOGOS.map((logo) => renderLogo(logo))}
-          </div>
+    <motion.section
+      className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-16"
+      initial="hidden"
+      animate={isMounted ? "visible" : "hidden"}
+      variants={fadeUp}
+    >
+      <div className="flex flex-col items-start space-y-4">
+        <HighlighterText>SUPPORTED BY</HighlighterText>
+        
+        {/* Desktop: flex-wrap layout */}
+        <div className="hidden md:flex flex-wrap gap-3">
+          {SUPPORTED_BY_LOGOS.map((logo) => renderLogo(logo))}
         </div>
-      </motion.section>
+      </div>
 
       {/* Mobile: auto-scrolling carousel - full width to edge */}
-      <div className="md:hidden -mt-4 overflow-hidden" style={{ width: '100vw', marginLeft: 'calc(-50vw + 50%)', marginRight: 'calc(-50vw + 50%)' }}>
+      <div className="md:hidden -mx-4 sm:-mx-6 -mb-8 sm:-mb-16 mt-4 overflow-hidden">
         <div
           className="flex gap-3"
           style={{
@@ -164,7 +162,7 @@ export function SupportedBySection() {
           {duplicatedLogos.map((logo, index) => renderLogo(logo, index))}
         </div>
       </div>
-    </>
+    </motion.section>
   )
 }
 

From b2f9d18dcde24c52c53e972419f79adb11e44560 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Mon, 22 Dec 2025 19:29:52 -0300
Subject: [PATCH 2/4] Refactor mobile carousel in SupportedBySection of Hero3D
 component

- Simplified the mobile carousel layout by removing unnecessary elements and adjusting styling for better responsiveness.
- Enhanced the structure for improved readability while maintaining existing functionality.
- Updated animation properties for a smoother user experience on mobile devices.
---
 apps/app/src/components/custom-ui/hero-3d.tsx | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index 936cf1f..6c04bf2 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -148,18 +148,17 @@ export function SupportedBySection() {
         <div className="hidden md:flex flex-wrap gap-3">
           {SUPPORTED_BY_LOGOS.map((logo) => renderLogo(logo))}
         </div>
-      </div>
 
-      {/* Mobile: auto-scrolling carousel - full width to edge */}
-      <div className="md:hidden -mx-4 sm:-mx-6 -mb-8 sm:-mb-16 mt-4 overflow-hidden">
-        <div
-          className="flex gap-3"
-          style={{
-            width: 'max-content',
-            animation: prefersReduced ? 'none' : 'scroll-carousel 25s linear infinite',
-          }}
-        >
-          {duplicatedLogos.map((logo, index) => renderLogo(logo, index))}
+        {/* Mobile: auto-scrolling carousel */}
+        <div className="md:hidden overflow-hidden mt-4 -mx-4 sm:-mx-6">
+          <div
+            className="flex gap-3 inline-flex"
+            style={{
+              animation: prefersReduced ? 'none' : 'scroll-carousel 25s linear infinite',
+            }}
+          >
+            {duplicatedLogos.map((logo, index) => renderLogo(logo, index))}
+          </div>
         </div>
       </div>
     </motion.section>

From 1b8894f4ded70f987595b821af691b4c2c9c6271 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Mon, 22 Dec 2025 19:43:31 -0300
Subject: [PATCH 3/4] Refactor SupportedBySection layout in Hero3D component

- Updated the logo display to use a grid layout for both desktop and mobile views, enhancing visual consistency and responsiveness.
- Changed the section title from "SUPPORTED BY" to "BACKED BY" for improved clarity.
- Removed the duplicated logos logic for a more streamlined implementation, simplifying the rendering process.
---
 apps/app/src/components/custom-ui/hero-3d.tsx | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index 6c04bf2..d28d9ce 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -83,7 +83,7 @@ const renderLogo = (logo: typeof SUPPORTED_BY_LOGOS[number], index?: number) =>
     >
       <div
         className={cn(
-          "h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300 min-w-[140px]",
+          "h-10 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300 min-w-[140px] w-full",
           logo.name === "colosseum" 
             ? "bg-[#1C2123] dark:bg-[#D8DDDF] group-hover:opacity-90"
             : "bg-muted/50 group-hover:bg-muted"
@@ -131,9 +131,6 @@ export function SupportedBySection() {
     [prefersReduced]
   )
 
-  // Duplicate logos for seamless infinite scroll (exactly 2 copies for -50% animation)
-  const duplicatedLogos = [...SUPPORTED_BY_LOGOS, ...SUPPORTED_BY_LOGOS]
-
   return (
     <motion.section
       className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-16"
@@ -142,23 +139,23 @@ export function SupportedBySection() {
       variants={fadeUp}
     >
       <div className="flex flex-col items-start space-y-4">
-        <HighlighterText>SUPPORTED BY</HighlighterText>
+        <HighlighterText>BACKED BY</HighlighterText>
         
-        {/* Desktop: flex-wrap layout */}
-        <div className="hidden md:flex flex-wrap gap-3">
+        {/* Desktop: grid layout - equal width logos */}
+        <div className="hidden md:grid md:grid-cols-5 gap-3 w-full">
           {SUPPORTED_BY_LOGOS.map((logo) => renderLogo(logo))}
         </div>
 
-        {/* Mobile: auto-scrolling carousel */}
-        <div className="md:hidden overflow-hidden mt-4 -mx-4 sm:-mx-6">
-          <div
-            className="flex gap-3 inline-flex"
-            style={{
-              animation: prefersReduced ? 'none' : 'scroll-carousel 25s linear infinite',
-            }}
-          >
-            {duplicatedLogos.map((logo, index) => renderLogo(logo, index))}
-          </div>
+        {/* Mobile: grid layout - 2 columns, Colosseum spans full width */}
+        <div className="md:hidden grid grid-cols-2 gap-3 w-full mt-4">
+          {SUPPORTED_BY_LOGOS.map((logo, index) => (
+            <div
+              key={logo.name}
+              className={logo.name === "colosseum" ? "col-span-2" : ""}
+            >
+              {renderLogo(logo)}
+            </div>
+          ))}
         </div>
       </div>
     </motion.section>

From 13b5fbaa9a39077b76df1fb125c820813ed66525 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Mon, 22 Dec 2025 19:48:01 -0300
Subject: [PATCH 4/4] Add ArrowUpRight icon to logo display in Hero3D component

- Introduced the ArrowUpRight icon to enhance visual feedback on logo hover states.
- Updated logo container to improve layout and responsiveness, ensuring a smoother user experience.
- Adjusted styling for the icon to maintain consistency with existing design elements.
---
 apps/app/src/components/custom-ui/hero-3d.tsx | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index d28d9ce..562f016 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import HighlighterText from "./highlighter-text"
 import Logo3D from "./logo-3d"
+import { ArrowUpRight } from "lucide-react"
 import {
   motion,
   useReducedMotion,
@@ -83,22 +84,32 @@ const renderLogo = (logo: typeof SUPPORTED_BY_LOGOS[number], index?: number) =>
     >
       <div
         className={cn(
-          "h-10 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300 min-w-[140px] w-full",
+          "h-10 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300 min-w-[140px] w-full relative overflow-hidden",
           logo.name === "colosseum" 
             ? "bg-[#1C2123] dark:bg-[#D8DDDF] group-hover:opacity-90"
             : "bg-muted/50 group-hover:bg-muted"
         )}
       >
-        <div
-          className={cn(
-            "transition-all duration-300",
-            logoSize.className,
-            logo.name === "colosseum"
-              ? "[background-color:var(--background)] dark:[background-color:var(--background)]"
-              : "opacity-70 group-hover:opacity-100 [background-color:var(--foreground)]"
-          )}
-          style={getMaskStyle(logo.src)}
-        />
+        <span className="relative inline-flex items-center transition-transform duration-300 ease-out group-hover:-translate-x-1">
+          <div
+            className={cn(
+              "transition-all duration-300",
+              logoSize.className,
+              logo.name === "colosseum"
+                ? "[background-color:var(--background)] dark:[background-color:var(--background)]"
+                : "opacity-70 group-hover:opacity-100 [background-color:var(--foreground)]"
+            )}
+            style={getMaskStyle(logo.src)}
+          />
+          <ArrowUpRight 
+            className={cn(
+              "absolute left-full ml-2 h-3.5 w-3.5 shrink-0 opacity-0 -translate-x-2 transition-all duration-300 ease-out group-hover:opacity-100 group-hover:translate-x-0",
+              logo.name === "colosseum"
+                ? "[color:var(--background)] dark:[color:var(--background)]"
+                : "text-foreground"
+            )}
+          />
+        </span>
         <Image
           src={logo.src}
           alt={`${logo.name} logo`}