From 51e0e6e6b89c756ded8bba0e4524c5926ae8b761 Mon Sep 17 00:00:00 2001
From: therealwolf42 <76-therealwolf42@users.noreply.gitlab.syncad.com>
Date: Tue, 2 Dec 2025 22:53:22 +0100
Subject: [PATCH] styling fixes

---
 apps/web/src/app/[locale]/page.tsx           |  5 +++--
 apps/web/src/components/cards/TokenCard.tsx  |  8 ++++----
 apps/web/src/components/footer/Footer.tsx    |  4 ++--
 apps/web/src/components/root/LogoMarquee.tsx | 10 +++++-----
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index c4c2416..11515a1 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -232,8 +232,9 @@ export default function HomePage() {
                     </svg>
                   ),
                   text: (
-                    <span className="flex items-center gap-2">
-                      Up to <span className="text-2xl font-bold mt-[-2px] text-hive-red">20%</span> Staking Rewards
+                    <span className="flex items-center gap-2 flex-wrap">
+                      <span className="whitespace-nowrap flex items-center gap-2">Up to <span className="text-2xl font-bold mt-[-2px] text-hive-red">20%</span></span>
+                      <span className="whitespace-nowrap">Staking Rewards</span>
                     </span>
                   ),
                 },
diff --git a/apps/web/src/components/cards/TokenCard.tsx b/apps/web/src/components/cards/TokenCard.tsx
index 25809dc..6f949b1 100644
--- a/apps/web/src/components/cards/TokenCard.tsx
+++ b/apps/web/src/components/cards/TokenCard.tsx
@@ -50,7 +50,7 @@ export const TokenCard = forwardRef<HTMLDivElement, TokenCardProps>(
     return (
       <div
         ref={ref}
-        className="group relative rounded-3xl p-10 overflow-hidden transition-all duration-500"
+        className="group relative rounded-3xl p-5 sm:p-10 overflow-hidden transition-all duration-500"
         style={{
           background: `linear-gradient(to bottom right, ${color}1a, ${color}0d)`,
           border: `1px solid ${color}4d`,
@@ -79,7 +79,7 @@ export const TokenCard = forwardRef<HTMLDivElement, TokenCardProps>(
           <div className="flex-1">
             {/* Token icon and name */}
             <div className="flex items-center gap-6 mb-8">
-              <div className="relative">
+              <div className="relative flex-shrink-0">
                 <div
                   className="absolute inset-0 rounded-full blur-xl opacity-30 group-hover:opacity-50 transition-opacity"
                   style={{ backgroundColor: color }}
@@ -87,7 +87,7 @@ export const TokenCard = forwardRef<HTMLDivElement, TokenCardProps>(
                 <img
                   src={iconSrc}
                   alt={name}
-                  className="relative w-20 h-20 drop-shadow-lg"
+                  className="relative w-20 h-20 min-w-20 min-h-20 drop-shadow-lg object-contain"
                 />
               </div>
               <div>
@@ -129,7 +129,7 @@ export const TokenCard = forwardRef<HTMLDivElement, TokenCardProps>(
               {features.map((feature, index) => (
                 <div key={index} className="flex items-center gap-4">
                   <div
-                    className="flex items-center justify-center w-10 h-10 rounded-full"
+                    className="flex items-center justify-center w-10 h-10 min-w-10 min-h-10 rounded-full flex-shrink-0"
                     style={{ backgroundColor: `${color}33` }}
                   >
                     <div style={{ color }}>{feature.icon}</div>
diff --git a/apps/web/src/components/footer/Footer.tsx b/apps/web/src/components/footer/Footer.tsx
index aeae5cd..513fb49 100644
--- a/apps/web/src/components/footer/Footer.tsx
+++ b/apps/web/src/components/footer/Footer.tsx
@@ -14,7 +14,7 @@ export const Footer: React.FC<FooterProps> = ({ items = [], className, ...props
       <div className="max-w-screen-2xl mx-auto flex flex-row justify-between max-[1000px]:flex-col max-[1000px]:items-center">
         <div className="flex flex-col max-[1000px]:items-center">
           <Logo className="h-[30px] w-[132px] max-[1000px]:mb-[15px]" dark={true} />
-          <div className="flex flex-row items-center gap-3 mt-8 mb-6 max-[1000px]:mb-8">
+          <div className="flex flex-row items-center gap-3 mt-8 mb-6 max-[1000px]:mb-8 md:flex-nowrap flex-wrap max-w-[200px] md:max-w-[1500px]">
             {SOCIAL_MEDIAS.map((social, index) => (
               <React.Fragment key={social.icon}>
                 <a
@@ -35,7 +35,7 @@ export const Footer: React.FC<FooterProps> = ({ items = [], className, ...props
             ))}
           </div>
         </div>
-        <div className="flex flex-row flex-wrap justify-end w-full ml-[15px] max-[1000px]:mt-5 max-[1000px]:ml-0">
+        <div className="flex flex-row flex-wrap justify-center w-full ml-[15px] max-[1000px]:mt-5 max-[1000px]:ml-0">
           {items.map((subItems, index) => (
             <FooterNavigation
               key={index}
diff --git a/apps/web/src/components/root/LogoMarquee.tsx b/apps/web/src/components/root/LogoMarquee.tsx
index f6cb0eb..899663a 100644
--- a/apps/web/src/components/root/LogoMarquee.tsx
+++ b/apps/web/src/components/root/LogoMarquee.tsx
@@ -289,21 +289,21 @@ export const LogoMarquee: React.FC<LogoMarqueeProps> = ({ className, compact = f
   const columns = buildColumns();
 
   return (
-    <div className={`w-full bg-gradient-to-b from-gray-900 to-black ${compact ? 'py-0' : 'py-24'} overflow-hidden ${className || ''}`}>
+    <div className={`w-full bg-gradient-to-b from-gray-900 to-black ${compact ? 'py-0' : 'py-12 sm:py-24'} overflow-hidden ${className || ''}`}>
       {showTitle && (
-        <div className="max-w-screen-2xl mx-auto mb-16">
-          <h2 className="text-5xl md:text-6xl font-bold text-white text-center">
+        <div className="max-w-screen-2xl mx-auto mb-8 sm:mb-16">
+          <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white text-center">
             Join a Thriving Community<span className="text-[#e31337]">.</span>
           </h2>
         </div>
       )}
 
       {/* Animated Marquee - full width, shows ~half of one set at a time */}
-      <div className={`relative overflow-hidden ${compact ? 'flex items-center' : ''}`} style={{ height: totalHeight }}>
+      <div className={`relative overflow-hidden ${compact ? 'flex items-center' : 'max-h-[280px] sm:max-h-none'}`} style={{ height: compact ? totalHeight : undefined }}>
         {/* Dark overlay for compact mode */}
         {compact && <div className="absolute inset-0 bg-black/15 z-10 pointer-events-none" />}
         <div
-          className={`flex ${compact ? 'justify-center w-full' : ''}`}
+          className={`flex ${compact ? 'justify-center w-full' : 'origin-top-left scale-[0.5] sm:scale-100'}`}
           style={{
             animation: !compact && contentWidth ? `marquee ${80}s linear infinite` : 'none',
             ['--content-width' as string]: `${contentWidth}px`,
-- 
GitLab