fix(marquee): remove white logo boxes, fix seamless loop, add grayscale hover (#648)

* fix(marquee): remove baked-in white backgrounds from Apple/Google logos

Apple and Google were the only two company logos with a hardcoded
<rect fill="white"> background, so they rendered as white cards on the
chalk marquee while every other logo was transparent. Removing the rect
makes them transparent and visually consistent with the rest.

* fix(marquee): seamless loop + grayscale hover treatment

Seamless loop: the track used space-x-6 (gap only *between* items, none
at the copy seam) plus a hand-computed width where itemWidth was 9.5rem
instead of the real 10.5rem (w-36 + 1.5rem gap). translateX(-50%) landed
~10rem short of one copy period every cycle, causing a visible jump.
Switch to flex w-max with a uniform mr-6 on every item so one copy is
exactly 10 units (168px each); -50% now equals one copy exactly
(measured seamless delta: 0px).

Upgrade: render logos muted grayscale (opacity-60) that colorize and
lift to full opacity on hover, so the strip reads as one cohesive set
regardless of each brand's native colors.

* fix(marquee): use logical margin me-6 and scoped transition

Author: aafre

resume-builder-ui/public/logos/apple.svg

@@ -44,8 +44,6 @@ export default function CompanyMarquee({
 
   // Duplicate companies for seamless loop
   const duplicatedCompanies = [...companies, ...companies];
-  const itemWidth = 9.5; // rem (w-38 equivalent)
-  const totalWidth = duplicatedCompanies.length * itemWidth;
 
   return (
     <div className={`relative overflow-hidden h-24 ${className}`}>
@@ -54,23 +52,22 @@ export default function CompanyMarquee({
       <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-chalk via-chalk/90 to-transparent z-10 pointer-events-none" />
 
       <div
-        className={`flex space-x-6 ${
+        className={`flex w-max ${
           pauseOnHover ? "hover:animation-pause" : ""
         }`}
         style={{
           animation: `marquee ${speed}s linear infinite`,
-          width: `${totalWidth}rem`,
         }}
       >
         {duplicatedCompanies.map((company, index) => (
           <div
             key={`${company.name}-${index}`}
-            className="flex-shrink-0 w-36 h-16 flex items-center justify-center group cursor-default"
+            className="flex-shrink-0 w-36 me-6 h-16 flex items-center justify-center group cursor-default"
           >
             <img
               src={company.logo}
               alt={company.alt}
-              className="w-28 h-10 object-contain transition-all duration-500"
+              className="w-28 h-10 object-contain grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100 transition duration-500"
               width="112"
               height="40"
               onError={(e) => {