461a00384c
- Introduced FounderSection component to highlight leadership and vision. - Created ServicesGrid component to display various robotics services offered. - Developed RoboticsScrollShowcase for showcasing robots with interactive elements. - Implemented RoboticsSplineShowcase featuring a 3D Spline scene for enhanced user experience. - Added reusable Card component for consistent styling across sections. - Integrated ContainerScroll for animated scrolling effects in the showcase. - Built SplineScene component for lazy loading Spline 3D scenes. - Added Spotlight component for interactive hover effects. - Created utility function for class name merging to streamline styling.
74 lines
3.2 KiB
TypeScript
74 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { INDUSTRIES, type Industry } from '@/data/industries';
|
|
|
|
const ICONS: Record<Industry['icon'], string> = {
|
|
building: 'M3 21V8l9-5 9 5v13h-6v-6h-6v6H3Z',
|
|
utensils: 'M4 2h2v9a2 2 0 1 1-4 0V2h2Zm9 0h2v7l2 2v11h-2v-9h-2Zm-3 0h2v9a2 2 0 1 1-4 0V2h2Z',
|
|
hotel: 'M2 21V7h20v14h-2v-3H4v3H2Zm5-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm5 0V8h8v6h-8Z',
|
|
'shopping-bag': 'M6 6V5a6 6 0 0 1 12 0v1h3v15H3V6h3Zm2 0h8V5a4 4 0 0 0-8 0v1Z',
|
|
'heart-pulse': 'M12 21s-7-4.5-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.5-9 9-9 9Zm-2-8 2-3 2 5 2-3h3',
|
|
'graduation-cap': 'M12 3 2 8l10 5 10-5-10-5Zm-7 7v4l7 3 7-3v-4l-7 3-7-3Z',
|
|
shield: 'M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3Z',
|
|
warehouse: 'M3 21V9l9-5 9 5v12H3Zm5-9h8v8H8v-8Z',
|
|
sparkles: 'M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6Zm7 12l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3Z',
|
|
landmark: 'M2 21v-2h20v2H2Zm2-4v-8h2v8H4Zm4 0v-8h2v8H8Zm4 0v-8h2v8h-2Zm4 0v-8h2v8h-2ZM12 2l10 5H2l10-5Z',
|
|
};
|
|
|
|
export function IndustryUseCases({ limit }: { limit?: number }) {
|
|
const list = limit ? INDUSTRIES.slice(0, limit) : INDUSTRIES;
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gap: '1rem',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))',
|
|
}}
|
|
>
|
|
{list.map((i) => (
|
|
<div key={i.id} className="card" style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.875rem',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 12,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: `${i.accent}1A`,
|
|
border: `1px solid ${i.accent}55`,
|
|
}}
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill={i.accent} aria-hidden="true">
|
|
<path d={ICONS[i.icon]} />
|
|
</svg>
|
|
</div>
|
|
<h3 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 600 }}>{i.name}</h3>
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
<div>
|
|
<div style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#6a73a5', marginBottom: 4 }}>Problem</div>
|
|
<p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.92rem', lineHeight: 1.55 }}>{i.problem}</p>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#6a73a5', marginBottom: 4 }}>Solution</div>
|
|
<p style={{ margin: 0, color: '#e8e0cf', fontSize: '0.92rem', lineHeight: 1.55 }}>{i.solution}</p>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: i.accent, marginBottom: 4 }}>Benefit</div>
|
|
<p style={{ margin: 0, color: '#ffffff', fontSize: '0.92rem', lineHeight: 1.55 }}>{i.benefit}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|