Refactor ClientFocus component by renaming sections to 'Who We Serve' and 'Communities', and replacing community representation with an image of flags for enhanced visual appeal and inclusivity.

components/ClientFocus.tsx

@@ -5,6 +5,7 @@ import { useInView } from "framer-motion";
 import { useRef } from "react";
 import { Users, UserCheck, Globe } from "lucide-react";
 import { useAppTheme } from "@/components/ThemeProvider";
+import Image from "next/image";
 
 export function ClientFocus() {
   const ref = useRef(null);
@@ -94,7 +95,7 @@ export function ClientFocus() {
             animate={isInView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.8, delay: 0.2 }}
           >
-            Client Focus
+            Who We Serve
           </motion.h2>
         </motion.div>
 
@@ -154,49 +155,25 @@ export function ClientFocus() {
               <div className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl">
                 <Globe className="h-6 w-6 text-rose-600 dark:text-rose-400" />
               </div>
-              <h3 className="text-xl font-semibold text-foreground">Client Focus</h3>
+              <h3 className="text-xl font-semibold text-foreground">Communities</h3>
             </div>
             <div className="space-y-3">
-              <div className="flex flex-wrap gap-3 justify-center items-center">
+              <div className="flex justify-center items-center">
-                {[
+                <motion.div
-                  { flag: '🇭🇹', name: 'Haitian', type: 'emoji' },
+                  initial={{ opacity: 0, scale: 0.8 }}
-                  { flag: '🇯🇲', name: 'Jamaican', type: 'emoji' },
+                  animate={isInView ? { opacity: 1, scale: 1 } : {}}
-                  { flag: '🇧🇸', name: 'Bahamian', type: 'emoji' },
+                  transition={{ duration: 0.5, delay: 0.5 }}
-                  { flag: 'pan-african', name: 'Pan-African', type: 'css' },
+                  className="relative w-full max-w-md h-auto"
-                  { flag: '🇮🇱', name: 'Israeli', type: 'emoji' },
+                >
-                  { flag: '🇻🇪', name: 'Venezuelan', type: 'emoji' },
+                  <Image
-                  { flag: 'pride', name: 'LGBTQ+', type: 'css' },
+                    src="/flags.png"
-                ].map((community, index) => (
+                    alt="Organization of American States Flags"
-                  <motion.div
+                    width={400}
-                    key={community.name}
+                    height={267}
-                    initial={{ opacity: 0, scale: 0.8 }}
+                    className="w-full h-auto object-contain rounded-lg"
-                    animate={isInView ? { opacity: 1, scale: 1 } : {}}
+                    priority
-                    transition={{ duration: 0.3, delay: 0.5 + index * 0.05 }}
+                  />
-                    className="p-2 rounded-lg hover:bg-rose-50 dark:hover:bg-rose-900/20 transition-colors"
+                </motion.div>
-                    title={community.name}
-                  >
-                    {community.type === 'emoji' ? (
-                      <span className="text-2xl sm:text-3xl" role="img" aria-label={community.name}>
-                        {community.flag}
-                      </span>
-                    ) : community.flag === 'pan-african' ? (
-                      <div className="w-8 h-6 sm:w-10 sm:h-7 rounded border border-gray-300 dark:border-gray-600 overflow-hidden flex flex-col">
-                        <div className="h-1/3 bg-red-600"></div>
-                        <div className="h-1/3 bg-black"></div>
-                        <div className="h-1/3 bg-green-600"></div>
-                      </div>
-                    ) : community.flag === 'pride' ? (
-                      <div className="w-8 h-6 sm:w-10 sm:h-7 rounded border border-gray-300 dark:border-gray-600 overflow-hidden flex flex-col">
-                        <div className="h-1/6 bg-red-500"></div>
-                        <div className="h-1/6 bg-orange-500"></div>
-                        <div className="h-1/6 bg-yellow-400"></div>
-                        <div className="h-1/6 bg-green-500"></div>
-                        <div className="h-1/6 bg-blue-500"></div>
-                        <div className="h-1/6 bg-purple-600"></div>
-                      </div>
-                    ) : null}
-                  </motion.div>
-                ))}
               </div>
             </div>
           </motion.div>