feat: enhance LogoCarousel to include 'coming soon' labels for specific logos

Author: enzosakamoto

src/features/home/pages/home-page.tsx

@@ -142,11 +142,26 @@ const owners = [
 
 function LogoCarousel() {
   const logos = [
-    'https://store-images.s-microsoft.com/image/apps.22898.1ee6619e-8cd6-4c91-a459-3abe6a6cf7b3.84da202a-9b47-4a76-be2c-79f143c64050.21add500-ed5b-42ee-b87d-ee415ae071fc',
-    'https://play-lh.googleusercontent.com/d2zqBFBEymSZKaVg_dRo1gh3hBFn7_Kl9rO74xkDmnJeLgDW0MoJD3cUx0QzZN6jdsg=w240-h480-rw',
-    'https://t2.tudocdn.net/716766?w=824&h=494',
-    'https://static.vecteezy.com/system/resources/previews/019/136/322/non_2x/amazon-logo-amazon-icon-free-free-vector.jpg',
-    'https://azure.microsoft.com/en-us/blog/wp-content/uploads/2024/02/MSFT_Azure_FEB12_319938_Blog_BlogHeader_240226_600x600_V1.jpg'
+    {
+      url: 'https://store-images.s-microsoft.com/image/apps.22898.1ee6619e-8cd6-4c91-a459-3abe6a6cf7b3.84da202a-9b47-4a76-be2c-79f143c64050.21add500-ed5b-42ee-b87d-ee415ae071fc',
+      comingSoon: true
+    }, // Meta
+    {
+      url: 'https://play-lh.googleusercontent.com/d2zqBFBEymSZKaVg_dRo1gh3hBFn7_Kl9rO74xkDmnJeLgDW0MoJD3cUx0QzZN6jdsg=w240-h480-rw',
+      comingSoon: true
+    }, // Deep Seek
+    {
+      url: 'https://static.vecteezy.com/system/resources/previews/019/136/322/non_2x/amazon-logo-amazon-icon-free-free-vector.jpg',
+      comingSoon: false
+    }, // Amazon
+    {
+      url: 'https://t2.tudocdn.net/716766?w=824&h=494',
+      comingSoon: true
+    }, // Claude Sonnet
+    {
+      url: 'https://azure.microsoft.com/en-us/blog/wp-content/uploads/2024/02/MSFT_Azure_FEB12_319938_Blog_BlogHeader_240226_600x600_V1.jpg',
+      comingSoon: false
+    } // Mistral
   ]
   const allLogos = [...logos, ...logos, ...logos, ...logos]
   return (
@@ -171,13 +186,18 @@ function LogoCarousel() {
         }}
       >
         {allLogos.map((logo, idx) => (
-          <div key={idx} className="h-26 w-26 flex-shrink-0">
+          <div key={idx} className="relative h-26 w-26 flex-shrink-0">
             <img
-              src={logo}
+              src={logo.url}
               alt="Logo de modelo Bedrock"
               draggable={false}
               className="h-26 w-26 rounded-md bg-white object-cover shadow-lg select-none"
             />
+            {logo.comingSoon && (
+              <span className="bg-primary/90 absolute right-1 bottom-1 rounded-xl px-2 py-1 text-[8px] font-medium text-white">
+                Em breve
+              </span>
+            )}
           </div>
         ))}
       </motion.div>