Merge version_4_1777378490510 into main

Merge version_4_1777378490510 into main

src/components/sections/about/AboutFeaturesSplit.tsx

@@ -57,9 +57,18 @@ const AboutFeaturesSplit = ({
           <div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded">
             {items.map((item, index) => {
               const ItemIcon = resolveIcon(item.icon);
+              const isEthical = item.title.includes("Ethical Sourcing");
+              const isArtisan = item.title.includes("Artisan Craft");
+              const isExpert = item.title.includes("Expert Roasting");
+              
+              let bgClass = "";
+              if (isEthical) bgClass = "bg-purple-600 p-4 rounded-lg";
+              if (isArtisan) bgClass = "bg-red-600 p-4 rounded-lg";
+              if (isExpert) bgClass = "bg-yellow-500 p-4 rounded-lg";
+
               return (
               <div key={item.title}>
-                <div className="flex flex-col gap-2">
+                <div className={`flex flex-col gap-2 ${bgClass}`}>
                   <div className="flex items-center justify-center shrink-0 mb-1 size-10 primary-button rounded">
                     <ItemIcon className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
                   </div>
@@ -83,4 +92,4 @@ const AboutFeaturesSplit = ({
   );
 };
 
-export default AboutFeaturesSplit;
+export default AboutFeaturesSplit;