FM / components

/opt/canhelp/apps/web/src/components

Name	Size	Mode	Actions
AdminRolePreview.tsx	4928	0644	edit dl rm
BecomeSpecialistButton.tsx	702	0644	edit dl rm
CategoryIcon.tsx	1576	0644	edit dl rm
FaqAccordion.tsx	1500	0644	edit dl rm
FavoriteSpecialistButton.tsx	1464	0644	edit dl rm
Footer.tsx	3019	0644	edit dl rm
Header.tsx	30479	0644	edit dl rm
HeroFloatingIcons.tsx	4378	0644	edit dl rm
HeroSearch.tsx	1611	0644	edit dl rm
HomeCategoryGrid.tsx	4625	0644	edit dl rm
HomeCityCloud.tsx	1790	0644	edit dl rm
HomeCityPicker.tsx	5490	0644	edit dl rm
HomeSectionArt.tsx	5912	0644	edit dl rm
LanguageSwitcher.tsx	2438	0644	edit dl rm
PlanBadge.tsx	3100	0644	edit dl rm
PromoCountdown.tsx	3483	0644	edit dl rm
ScrollToTopButton.tsx	818	0644	edit dl rm
Section.tsx	252	0644	edit dl rm
ShareButton.tsx	1041	0644	edit dl rm
SocialIcons.tsx	6871	0644	edit dl rm
SpecialistsFiltersClient.tsx	6461	0644	edit dl rm
SpecialistTaskCard.tsx	2837	0644	edit dl rm
SupportModal.tsx	6195	0644	edit dl rm
TaskCategoryPicker.tsx	11117	0644	edit dl rm
TaskLocationPicker.tsx	11038	0644	edit dl rm
Turnstile.tsx	651	0644	edit dl rm
UpgradePrompt.tsx	3427	0644	edit dl rm
UsageMeter.tsx	1602	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/components/HomeSectionArt.tsx (5912B)

const P = '#6366f1'
const A = '#f59e0b'
const B = '#f1f5f9'

export function HeroArt({ className = '' }: { className?: string }) {
  return (
    <svg viewBox="0 0 480 360" fill="none" aria-hidden="true" className={className}>
      {/* App window frame */}
      <rect x="30" y="20" width="420" height="300" rx="16" fill="#fff" />
      <path d="M30 36c0-8.837 7.163-16 16-16h388c8.837 0 16 7.163 16 16v28H30V36Z" fill={P} />
      <circle cx="56" cy="42" r="5" fill={A} />
      <circle cx="74" cy="42" r="5" fill="#fff" opacity=".4" />
      <circle cx="92" cy="42" r="5" fill="#fff" opacity=".4" />

{/* Search bar */}
      <rect x="60" y="84" width="360" height="40" rx="10" fill={B} />
      <circle cx="84" cy="104" r="8" stroke={P} strokeWidth="2.5" />
      <line x1="90" y1="110" x2="97" y2="117" stroke={P} strokeWidth="2.5" strokeLinecap="round" />
      <rect x="108" y="100" width="120" height="8" rx="4" fill={P} opacity=".15" />

{/* Service card 1 */}
      <rect x="60" y="144" width="170" height="148" rx="12" fill={B} />
      <rect x="72" y="156" width="56" height="56" rx="10" fill={P} opacity=".12" />
      <circle cx="100" cy="184" r="14" fill={P} />
      <rect x="72" y="224" width="120" height="8" rx="4" fill={P} opacity=".15" />
      <rect x="72" y="240" width="80" height="6" rx="3" fill={P} opacity=".08" />
      <rect x="72" y="258" width="52" height="22" rx="6" fill={A} />

{/* Service card 2 */}
      <rect x="250" y="144" width="170" height="148" rx="12" fill={B} />
      <rect x="262" y="156" width="56" height="56" rx="10" fill={A} opacity=".15" />
      <circle cx="290" cy="184" r="14" fill={A} />
      <rect x="262" y="224" width="110" height="8" rx="4" fill={P} opacity=".15" />
      <rect x="262" y="240" width="70" height="6" rx="3" fill={P} opacity=".08" />
      <rect x="262" y="258" width="52" height="22" rx="6" fill={P} />

{/* Decorative dots */}
      <circle cx="16" cy="100" r="8" fill={P} opacity=".2" />
      <circle cx="464" cy="280" r="6" fill={A} opacity=".25" />
      <circle cx="10" cy="260" r="4" fill={A} opacity=".15" />
    </svg>
  )
}

export function SpecialistArt({ className = '' }: { className?: string }) {
  return (
    <svg viewBox="0 0 320 380" fill="none" aria-hidden="true" className={className}>
      {/* Card */}
      <rect x="30" y="20" width="260" height="340" rx="20" fill="#fff" />
      <rect x="30" y="20" width="260" height="340" rx="20" stroke={P} strokeWidth="1" opacity=".15" />

{/* Avatar circle */}
      <circle cx="160" cy="100" r="50" fill={P} opacity=".1" />
      <circle cx="160" cy="88" r="15" fill={P} opacity=".4" />
      <ellipse cx="160" cy="118" rx="22" ry="14" fill={P} opacity=".4" />

{/* Verified badge */}
      <circle cx="200" cy="62" r="18" fill={A} />
      <path d="M192 62l5 5 11-10" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />

{/* Name */}
      <rect x="100" y="170" width="120" height="10" rx="5" fill={P} opacity=".2" />

{/* Rating dots */}
      <circle cx="120" cy="200" r="6" fill={A} />
      <circle cx="138" cy="200" r="6" fill={A} />
      <circle cx="156" cy="200" r="6" fill={A} />
      <circle cx="174" cy="200" r="6" fill={A} />
      <circle cx="192" cy="200" r="6" fill={A} opacity=".3" />

{/* Description lines */}
      <rect x="70" y="226" width="180" height="8" rx="4" fill={P} opacity=".1" />
      <rect x="85" y="244" width="150" height="8" rx="4" fill={P} opacity=".06" />

{/* Skill tags */}
      <rect x="60" y="272" width="70" height="28" rx="14" fill={P} opacity=".1" />
      <rect x="78" y="282" width="34" height="8" rx="4" fill={P} />
      <rect x="140" y="272" width="56" height="28" rx="14" fill={A} opacity=".15" />
      <rect x="152" y="282" width="32" height="8" rx="4" fill={A} />
      <rect x="206" y="272" width="64" height="28" rx="14" fill={P} opacity=".1" />
      <rect x="220" y="282" width="36" height="8" rx="4" fill={P} />

{/* CTA button */}
      <rect x="80" y="318" width="160" height="28" rx="14" fill={P} />
    </svg>
  )
}

export function CommunityArt({ className = '' }: { className?: string }) {
  return (
    <svg viewBox="0 0 400 260" fill="none" aria-hidden="true" className={className}>
      {/* Connection lines */}
      <line x1="110" y1="100" x2="175" y2="55" stroke={P} strokeWidth="2" strokeDasharray="6 4" opacity=".25" />
      <line x1="225" y1="55" x2="290" y2="100" stroke={P} strokeWidth="2" strokeDasharray="6 4" opacity=".25" />
      <line x1="115" y1="115" x2="285" y2="115" stroke={A} strokeWidth="2" strokeDasharray="6 4" opacity=".3" />

{/* Person 1 — left */}
      <circle cx="80" cy="100" r="34" fill={P} opacity=".15" />
      <circle cx="80" cy="88" r="11" fill={P} opacity=".5" />
      <ellipse cx="80" cy="110" rx="16" ry="10" fill={P} opacity=".5" />

{/* Person 2 — top center */}
      <circle cx="200" cy="44" r="34" fill={A} opacity=".2" />
      <circle cx="200" cy="32" r="11" fill={A} opacity=".6" />
      <ellipse cx="200" cy="54" rx="16" ry="10" fill={A} opacity=".6" />

{/* Person 3 — right */}
      <circle cx="320" cy="100" r="34" fill={P} opacity=".15" />
      <circle cx="320" cy="88" r="11" fill={P} opacity=".5" />
      <ellipse cx="320" cy="110" rx="16" ry="10" fill={P} opacity=".5" />

{/* Connection symbol — overlapping circles */}
      <circle cx="192" cy="180" r="14" stroke={P} strokeWidth="2" fill="none" opacity=".3" />
      <circle cx="208" cy="180" r="14" stroke={A} strokeWidth="2" fill="none" opacity=".4" />

{/* Decorative dots */}
      <circle cx="40" cy="180" r="5" fill={P} opacity=".15" />
      <circle cx="360" cy="180" r="5" fill={A} opacity=".2" />
      <circle cx="140" cy="210" r="3" fill={P} opacity=".1" />
      <circle cx="260" cy="210" r="3" fill={A} opacity=".1" />
    </svg>
  )
}

const P = '#6366f1' const A = '#f59e0b' const B = '#f1f5f9' export function HeroArt({ className = '' }: { className?: string }) { return ( ) } export function SpecialistArt({ className = '' }: { className?: string }) { return ( ) } export function CommunityArt({ className = '' }: { className?: string }) { return ( ) }