/opt/canhelp/apps/web/src/components
Edit: /opt/canhelp/apps/web/src/components/HeroFloatingIcons.tsx (4378B)
const icons = [
{
// Wrench — repair
id: 'wrench',
path: 'M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z',
size: 38, left: '4%', top: '18%', opacity: 0.18,
animation: 'heroIconFloat 4.8s ease-in-out 0s infinite',
},
{
// Lightning bolt — electrician
id: 'bolt',
path: 'M7 2v11h3v9l7-12h-4l4-8z',
size: 30, left: '10%', top: '65%', opacity: 0.14,
animation: 'heroIconDrift 5.5s ease-in-out 0.8s infinite',
},
{
// Home — home repair
id: 'home',
path: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z',
size: 34, left: '5%', top: '82%', opacity: 0.16,
animation: 'heroIconSway 6s ease-in-out 1.5s infinite',
},
{
// Scissors — beauty
id: 'scissors',
path: 'M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z',
size: 42, left: '86%', top: '12%', opacity: 0.18,
animation: 'heroIconFloat 5.2s ease-in-out 0.3s infinite',
},
{
// Star — top-rated
id: 'star',
path: 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z',
size: 28, left: '80%', top: '55%', opacity: 0.15,
animation: 'heroIconDrift 4.3s ease-in-out 2s infinite',
},
{
// Laptop — IT
id: 'laptop',
path: 'M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z',
size: 36, left: '88%', top: '78%', opacity: 0.14,
animation: 'heroIconSway 7s ease-in-out 1s infinite',
},
{
// Camera — photography
id: 'camera',
path: 'M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z',
size: 32, left: '76%', top: '30%', opacity: 0.13,
animation: 'heroIconFloat 6.4s ease-in-out 2.5s infinite',
},
{
// Paintbrush — painting
id: 'brush',
path: 'M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z',
size: 30, left: '3%', top: '42%', opacity: 0.13,
animation: 'heroIconDrift 5.8s ease-in-out 3.2s infinite',
},
{
// Medical cross — healthcare
id: 'medical',
path: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z',
size: 26, left: '92%', top: '44%', opacity: 0.12,
animation: 'heroIconSway 5s ease-in-out 0.6s infinite',
},
{
// Car — transport
id: 'car',
path: 'M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z',
size: 34, left: '14%', top: '88%', opacity: 0.14,
animation: 'heroIconFloat 6.8s ease-in-out 1.8s infinite',
},
{
// Book — education
id: 'book',
path: 'M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z',
size: 28, left: '82%', top: '88%', opacity: 0.13,
animation: 'heroIconDrift 7.2s ease-in-out 4s infinite',
},
]
export function HeroFloatingIcons() {
return (
{icons.map((icon) => (
))}
)
}