feat: add robotics components and data structures
- Introduced RobotProductCard component for displaying robot details. - Added WhyUs component highlighting key reasons for choosing our robotics solutions. - Implemented CursorSpotlight for enhanced user interaction. - Created GlassPanel for a stylish UI element. - Developed MotionSection for animated section visibility. - Added PremiumButton for versatile button options. - Established data structures for industries and robots, including detailed specifications and use cases. - Included utility functions for retrieving robots by slug and category.
This commit is contained in:
Najjar\NajjarV02
@@ -0,0 +1,216 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { Robot, CATEGORY_LABELS } from '@/data/robots';
|
||||
|
||||
type Props = {
|
||||
robot: Robot;
|
||||
priority?: boolean;
|
||||
};
|
||||
|
||||
export function RobotProductCard({ robot, priority = false }: Props) {
|
||||
const detailHref = `/robots/${robot.slug}/`;
|
||||
|
||||
return (
|
||||
<article
|
||||
className="card"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
color: '#f5f1e8',
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href={detailHref}
|
||||
aria-label={`View details for ${robot.brandLabel} ${robot.name}`}
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
aspectRatio: '1 / 1',
|
||||
background:
|
||||
`radial-gradient(ellipse 70% 50% at 50% 60%, ${robot.accent}26 0%, transparent 60%), linear-gradient(180deg, rgba(15, 12, 8,0.7), rgba(5, 5, 5,0.95))`,
|
||||
overflow: 'hidden',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(196, 162, 101,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 162, 101,0.05) 1px, transparent 1px)',
|
||||
backgroundSize: '32px 32px',
|
||||
maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
|
||||
WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
<Image
|
||||
src={robot.image}
|
||||
alt={`${robot.brandLabel} ${robot.name}`}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
padding: '2rem',
|
||||
transition: 'transform 0.6s cubic-bezier(0.16,1,0.3,1)',
|
||||
}}
|
||||
priority={priority}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '1rem',
|
||||
left: '1rem',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: '0.4rem 0.7rem',
|
||||
borderRadius: '999px',
|
||||
background: 'rgba(5, 5, 5,0.7)',
|
||||
border: `1px solid ${robot.accent}55`,
|
||||
fontSize: '0.7rem',
|
||||
letterSpacing: '0.18em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#e8e0cf',
|
||||
backdropFilter: 'blur(8px)',
|
||||
}}
|
||||
>
|
||||
<span style={{ width: 6, height: 6, borderRadius: 999, background: robot.accent }} />
|
||||
{robot.brandLabel}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '1rem',
|
||||
right: '1rem',
|
||||
padding: '0.35rem 0.7rem',
|
||||
borderRadius: '999px',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
border: '1px solid rgba(196, 162, 101,0.2)',
|
||||
fontSize: '0.66rem',
|
||||
letterSpacing: '0.18em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#cbc4b3',
|
||||
backdropFilter: 'blur(8px)',
|
||||
}}
|
||||
>
|
||||
{CATEGORY_LABELS[robot.category]}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '0.75rem', flex: 1 }}>
|
||||
<h3 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 600, letterSpacing: '-0.01em' }}>
|
||||
<Link href={detailHref} style={{ color: '#f5f1e8', textDecoration: 'none' }}>
|
||||
{robot.name}
|
||||
</Link>
|
||||
</h3>
|
||||
<p style={{ margin: 0, color: '#94908a', fontSize: '0.88rem', lineHeight: 1.55, flex: 1 }}>
|
||||
{robot.shortDescription}
|
||||
</p>
|
||||
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexWrap: 'wrap', gap: '0.35rem' }}>
|
||||
{robot.useCases.slice(0, 2).map((u) => (
|
||||
<li
|
||||
key={u}
|
||||
style={{
|
||||
fontSize: '0.7rem',
|
||||
color: '#94908a',
|
||||
padding: '0.2rem 0.5rem',
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(196, 162, 101,0.18)',
|
||||
background: 'rgba(15, 12, 8,0.5)',
|
||||
letterSpacing: '0.04em',
|
||||
}}
|
||||
>
|
||||
{u}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
paddingTop: '0.75rem',
|
||||
borderTop: '1px solid rgba(196, 162, 101,0.1)',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '0.4rem',
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href={detailHref}
|
||||
className="card-cta card-cta-primary"
|
||||
style={{
|
||||
flex: '1 1 auto',
|
||||
minWidth: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.4rem',
|
||||
padding: '0.55rem 0.75rem',
|
||||
borderRadius: 10,
|
||||
background: `${robot.accent}1F`,
|
||||
border: `1px solid ${robot.accent}66`,
|
||||
color: robot.accent,
|
||||
fontSize: '0.72rem',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
View details
|
||||
</Link>
|
||||
<Link
|
||||
href={`${detailHref}#inquire`}
|
||||
style={{
|
||||
flex: '1 1 auto',
|
||||
minWidth: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '0.55rem 0.75rem',
|
||||
borderRadius: 10,
|
||||
background: 'transparent',
|
||||
border: '1px solid rgba(196, 162, 101,0.2)',
|
||||
color: '#cbc4b3',
|
||||
fontSize: '0.72rem',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
Request price
|
||||
</Link>
|
||||
<Link
|
||||
href="/book-demo/"
|
||||
style={{
|
||||
flex: '1 1 auto',
|
||||
minWidth: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '0.55rem 0.75rem',
|
||||
borderRadius: 10,
|
||||
background: 'transparent',
|
||||
border: '1px solid rgba(196, 162, 101,0.2)',
|
||||
color: '#cbc4b3',
|
||||
fontSize: '0.72rem',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
Book demo
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user