ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Enhance ClientFocus component by renaming section to 'Client Focus' and adding a diverse community representation with flags and colors, improving inclusivity and visual appeal.

Browse Source
This commit is contained in:
iamkiddy 2025-11-21 23:47:53 +00:00
parent 6ed23f1573
commit 24c62510a9
1 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
components/ClientFocus.tsx
View File

@ -154,9 +154,51 @@ 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">Communities</h3>
<h3 className="text-xl font-semibold text-foreground">Client Focus</h3>
</div>
<div className="space-y-3">
<div className="flex flex-wrap gap-3 justify-center items-center">
{[
{ flag: '🇭🇹', name: 'Haitian', type: 'emoji' },
{ flag: '🇯🇲', name: 'Jamaican', type: 'emoji' },
{ flag: '🇧🇸', name: 'Bahamian', type: 'emoji' },
{ flag: 'pan-african', name: 'Pan-African', type: 'css' },
{ flag: '🇮🇱', name: 'Israeli', type: 'emoji' },
{ flag: '🇻🇪', name: 'Venezuelan', type: 'emoji' },
{ flag: 'pride', name: 'LGBTQ+', type: 'css' },
].map((community, index) => (
<motion.div
key={community.name}
initial={{ opacity: 0, scale: 0.8 }}
animate={isInView ? { opacity: 1, scale: 1 } : {}}
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"
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>
<p className="text-muted-foreground">Black and African American</p>
</motion.div>
</div>
</div>