From cc64551d2df0eb2a38f8a3097d6e614f517262a0 Mon Sep 17 00:00:00 2001
From: gauravk-io <gauravkr7265@gmail.com>
Date: Fri, 26 Dec 2025 20:21:40 +0530
Subject: [PATCH] style: refine brands statistics section UI layout

---
 .../components/landing-sections/Brands.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/landing-sections/Brands.tsx b/apps/web/src/components/landing-sections/Brands.tsx
index 2437f035..c3dba93d 100644
--- a/apps/web/src/components/landing-sections/Brands.tsx
+++ b/apps/web/src/components/landing-sections/Brands.tsx
@@ -24,17 +24,17 @@ const Brands = () => {
     : "0+";
 
   return (
-    <div id="Stats" className="flex flex-col">
+    <div id="Stats" className="flex flex-col overflow-hidden">
       <Header title="Statistics" />
-      <div className="border-b border flex items-center w-full">
-        <div className="relative [box-shadow:0_0_100px_-10px_#14111C_inset] flex items-center justify-center bg-surface-primary w-full border-r border flex-col p-10 md:text-5xl">
+      <div className="border-b flex flex-row items-center w-full">
+        <div className="relative [box-shadow:0_0_100px_-10px_#14111C_inset] flex items-center justify-center bg-surface-primary w-1/2 border-r flex-col px-2 py-8 md:p-10 md:text-5xl">
           {queryLoading ? (
-            <span className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl text-[clamp(1.5rem,10vw,6rem)] font-mono tracking-tighter font-medium text-purple-400 animate-pulse">
+            <span className="md:text-8xl md:text-[80px] text-xl sm:text-5xl text-[clamp(1rem,8vw,6rem)] font-mono tracking-tighter font-medium text-purple-400 animate-pulse">
               Loading...
             </span>
           ) : (
             <span
-              className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1.5rem,10vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
+              className="md:text-8xl md:text-[80px] text-xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1rem,8vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
               style={{
                 textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
               }}
@@ -44,17 +44,17 @@ const Brands = () => {
           )}
           <span
             style={{ "--text": "Opensox" } as any}
-            className=" relative pointer-events-none text-center before:bg-gradient-to-b before:from-brand-purple before:to-[#321D76] before:to-80% before:bg-clip-text before:text-transparent before:content-['Queries'] after:absolute after:inset-0 after:bg-purple-600 after:bg-clip-text after:text-transparent after:mix-blend-lighten after:content-['Queries'] after:[text-shadow:0_1px_0_black] overflow-hidden font-mono tracking-tighter font-medium text-3xl md:text-5xl"
+            className=" relative pointer-events-none text-center before:bg-gradient-to-b before:from-brand-purple before:to-[#321D76] before:to-80% before:bg-clip-text before:text-transparent before:content-['Queries'] after:absolute after:inset-0 after:bg-purple-600 after:bg-clip-text after:text-transparent after:mix-blend-lighten after:content-['Queries'] after:[text-shadow:0_1px_0_black] overflow-hidden font-mono tracking-tighter font-medium text-lg sm:text-3xl md:text-5xl"
           ></span>
         </div>
-        <div className="relative flex [box-shadow:0_0_0px_-10px_#14111C_inset] items-center justify-center bg-surface-primary w-full border flex-col p-10 md:text-5xl">
+        <div className="relative flex [box-shadow:0_0_0px_-10px_#14111C_inset] items-center justify-center bg-surface-primary w-1/2 flex-col px-2 py-8 md:p-10 md:text-5xl">
           {userLoading ? (
-            <span className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl text-[clamp(1.5rem,10vw,6rem)] font-mono tracking-tighter font-medium text-purple-400 animate-pulse">
+            <span className="md:text-8xl md:text-[80px] text-xl sm:text-5xl text-[clamp(1rem,8vw,6rem)] font-mono tracking-tighter font-medium text-purple-400 animate-pulse">
               Loading...
             </span>
           ) : (
             <span
-              className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1.5rem,10vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
+              className="md:text-8xl md:text-[80px] text-xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1rem,8vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
               style={{
                 textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
               }}
@@ -64,7 +64,7 @@ const Brands = () => {
           )}
           <span
             style={{ "--text": "Opensox" } as any}
-            className=" relative pointer-events-none text-center before:bg-gradient-to-b before:from-brand-purple before:to-[#321D76] before:to-80% before:bg-clip-text before:text-transparent before:content-['Users'] after:absolute after:inset-0 after:bg-purple-600 after:bg-clip-text after:text-transparent after:mix-blend-lighten after:content-['Users'] after:[text-shadow:0_1px_0_black] overflow-hidden font-mono tracking-tighter font-medium text-3xl md:text-5xl"
+            className=" relative pointer-events-none text-center before:bg-gradient-to-b before:from-brand-purple before:to-[#321D76] before:to-80% before:bg-clip-text before:text-transparent before:content-['Users'] after:absolute after:inset-0 after:bg-purple-600 after:bg-clip-text after:text-transparent after:mix-blend-lighten after:content-['Users'] after:[text-shadow:0_1px_0_black] overflow-hidden font-mono tracking-tighter font-medium text-lg sm:text-3xl md:text-5xl"
           ></span>
         </div>
       </div>