873026a4a9
- Convert site from royal-blue theme to black/white monochrome (desaturate all blue-hued colors; keep WhatsApp green and error red) - Swap blue circular brand logo for mono YS mark; regenerate favicon/PWA icons - Add 6 Pudu robots (CC1 Pro, MT1 Max, MT1 Vac, T600, T600 Underride, BG1 Pro) - Fix favicon.ico to RGBA (Next 16 Turbopack decode) and Stripe apiVersion type Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
571 lines
22 KiB
TypeScript
571 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { PremiumButton } from '@/components/ui/PremiumButton';
|
|
import { CursorSpotlight } from '@/components/ui/CursorSpotlight';
|
|
import { FEATURED_ROBOTS } from '@/data/robots';
|
|
|
|
const HERO_STATS = [
|
|
{ value: 'UAE', label: 'Access' },
|
|
{ value: 'Unitree + Pudu', label: 'Premier brands' },
|
|
{ value: 'Dubai', label: 'Showroom & Demo' },
|
|
];
|
|
|
|
type LabelPos = {
|
|
text: string;
|
|
delay: number;
|
|
top?: string;
|
|
bottom?: string;
|
|
left?: string;
|
|
right?: string;
|
|
};
|
|
|
|
/* Labels keyed to active robot brand/category for accuracy */
|
|
function getLabelsFor(brand: string, category: string): LabelPos[] {
|
|
const brandLabel = brand === 'unitree' ? 'Unitree Robotics' : 'Pudu Robotics';
|
|
const categoryLabel =
|
|
category === 'humanoid'
|
|
? 'Humanoid Platform'
|
|
: category === 'quadruped'
|
|
? 'Quadruped Patrol'
|
|
: category === 'delivery'
|
|
? 'Delivery Automation'
|
|
: category === 'service'
|
|
? 'Service Robotics'
|
|
: category === 'cleaning'
|
|
? 'Cleaning Automation'
|
|
: 'Advanced Robotics';
|
|
return [
|
|
{ text: brandLabel, top: '11%', right: '4%', delay: 0.15 },
|
|
{ text: categoryLabel, bottom: '32%', left: '4%', delay: 0.4 },
|
|
{ text: 'Demo & Sales · Dubai', bottom: '11%', right: '6%', delay: 0.65 },
|
|
];
|
|
}
|
|
|
|
export function Hero3DRobotics() {
|
|
const wrapRef = useRef<HTMLDivElement | null>(null);
|
|
const [tilt, setTilt] = useState({ rx: 0, ry: 0 });
|
|
const [activeIdx, setActiveIdx] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
if (reduce) return;
|
|
const el = wrapRef.current;
|
|
if (!el) return;
|
|
const onMove = (e: MouseEvent) => {
|
|
const rect = el.getBoundingClientRect();
|
|
const x = (e.clientX - rect.left) / rect.width - 0.5;
|
|
const y = (e.clientY - rect.top) / rect.height - 0.5;
|
|
setTilt({ rx: -y * 8, ry: x * 12 });
|
|
};
|
|
const onLeave = () => setTilt({ rx: 0, ry: 0 });
|
|
el.addEventListener('mousemove', onMove);
|
|
el.addEventListener('mouseleave', onLeave);
|
|
return () => {
|
|
el.removeEventListener('mousemove', onMove);
|
|
el.removeEventListener('mouseleave', onLeave);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const t = setInterval(() => setActiveIdx((i) => (i + 1) % FEATURED_ROBOTS.length), 5600);
|
|
return () => clearInterval(t);
|
|
}, []);
|
|
|
|
const robot = FEATURED_ROBOTS[activeIdx];
|
|
const labels = getLabelsFor(robot.brand, robot.category);
|
|
|
|
return (
|
|
<section
|
|
style={{
|
|
position: 'relative',
|
|
minHeight: 'min(960px, 100svh)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
overflow: 'hidden',
|
|
paddingTop: 'clamp(6rem, 12vw, 9rem)',
|
|
paddingBottom: 'clamp(4rem, 8vw, 6rem)',
|
|
}}
|
|
>
|
|
<div className="hero-gradient" />
|
|
<div className="grid-overlay" />
|
|
<div className="light-sweep" />
|
|
<CursorSpotlight color="rgba(127, 127, 127, 0.28)" size={640} />
|
|
|
|
{/* Royal-blue beams */}
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
background:
|
|
'conic-gradient(from 220deg at 60% 50%, transparent 0deg, rgba(94, 94, 94, 0.10) 25deg, transparent 50deg, rgba(231, 231, 231, 0.06) 180deg, transparent 220deg, rgba(127, 127, 127, 0.10) 320deg, transparent 360deg)',
|
|
mixBlendMode: 'screen',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
|
|
<div className="container-wide" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr', gap: 'clamp(2rem, 5vw, 4rem)', alignItems: 'center', width: '100%' }}>
|
|
<div className="hero-grid" style={{ display: 'grid', gap: 'clamp(2rem, 6vw, 4rem)', alignItems: 'center' }}>
|
|
<div className="fade-in-up" style={{ display: 'flex', flexDirection: 'column', gap: '1.75rem' }}>
|
|
<span
|
|
className="eyebrow"
|
|
style={{
|
|
color: '#e7e7e7',
|
|
border: '1px solid rgba(168, 168, 168, 0.45)',
|
|
background: 'rgba(94, 94, 94, 0.10)',
|
|
padding: '0.5rem 0.9rem',
|
|
borderRadius: 999,
|
|
alignSelf: 'flex-start',
|
|
gap: '0.625rem',
|
|
}}
|
|
>
|
|
<span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#e7e7e7', boxShadow: '0 0 12px rgba(231, 231, 231, 0.9)' }} />
|
|
UAE Access · Dubai
|
|
</span>
|
|
|
|
<h1
|
|
style={{
|
|
margin: 0,
|
|
fontSize: 'clamp(2.6rem, 6.4vw, 4.6rem)',
|
|
lineHeight: 1.02,
|
|
letterSpacing: '-0.035em',
|
|
fontWeight: 300,
|
|
}}
|
|
>
|
|
<span style={{ display: 'block', color: '#fcfcfc', fontWeight: 200 }}>Advanced robotics.</span>
|
|
<span
|
|
style={{
|
|
display: 'block',
|
|
fontWeight: 600,
|
|
background:
|
|
'linear-gradient(110deg, #FFFFFF 0%, #e7e7e7 50%, #a8a8a8 100%)',
|
|
WebkitBackgroundClip: 'text',
|
|
backgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
color: 'transparent',
|
|
filter:
|
|
'drop-shadow(0 2px 12px rgba(231, 231, 231, 0.18)) drop-shadow(0 6px 28px rgba(127, 127, 127, 0.32))',
|
|
}}
|
|
>
|
|
UAE access.
|
|
</span>
|
|
</h1>
|
|
|
|
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(1rem, 2vw, 1.18rem)', lineHeight: 1.7, maxWidth: 600, fontWeight: 300 }}>
|
|
YS Lootah Robotics is the UAE sales destination for selected Unitree and Pudu Robotics solutions helping businesses explore, configure, book demos, and deploy advanced robots across Dubai and the UAE.
|
|
</p>
|
|
<p style={{ margin: 0, color: '#e1e1e1', fontSize: '0.78rem', letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 600 }}>
|
|
In Tech We Innovate · In Trust We Lead
|
|
</p>
|
|
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', marginTop: '0.5rem' }}>
|
|
<PremiumButton href="/robots/">Explore robots</PremiumButton>
|
|
<PremiumButton href="/book-demo/" variant="ghost">Book a demo</PremiumButton>
|
|
<PremiumButton href="/configure/" variant="outline">Configure your solution</PremiumButton>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
|
|
gap: 'clamp(0.75rem, 2.4vw, 1.75rem)',
|
|
paddingTop: '1.75rem',
|
|
paddingBottom: '0.5rem',
|
|
marginTop: '0.75rem',
|
|
marginBottom: 'clamp(0.5rem, 2vw, 1.5rem)',
|
|
borderTop: '1px solid rgba(168, 168, 168, 0.22)',
|
|
}}
|
|
>
|
|
{HERO_STATS.map((s) => (
|
|
<div key={s.label} style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
|
|
<span
|
|
className="text-gradient-accent"
|
|
style={{
|
|
fontSize: 'clamp(1.1rem, 2.2vw, 1.5rem)',
|
|
fontWeight: 700,
|
|
letterSpacing: '-0.01em',
|
|
lineHeight: 1.1,
|
|
}}
|
|
>
|
|
{s.value}
|
|
</span>
|
|
<span style={{ fontSize: '0.66rem', color: '#a8a8a8', letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 600 }}>
|
|
{s.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
ref={wrapRef}
|
|
style={{
|
|
position: 'relative',
|
|
perspective: '1600px',
|
|
minHeight: 'clamp(440px, 58vw, 660px)',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
{/* Outer blue glow */}
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
inset: '-3rem',
|
|
background:
|
|
`radial-gradient(ellipse 60% 50% at 50% 45%, ${robot.accent}55 0%, transparent 65%)`,
|
|
filter: 'blur(34px)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
|
|
{/* Floor halo */}
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '-2rem',
|
|
left: '8%',
|
|
right: '8%',
|
|
height: '8%',
|
|
background:
|
|
'radial-gradient(ellipse 50% 100% at 50% 100%, rgba(127, 127, 127, 0.5), transparent 75%)',
|
|
filter: 'blur(18px)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
className="float-y"
|
|
style={{
|
|
position: 'relative',
|
|
width: '100%',
|
|
height: '100%',
|
|
minHeight: 'clamp(440px, 58vw, 660px)',
|
|
borderRadius: '1.75rem',
|
|
background:
|
|
'linear-gradient(180deg, rgba(30, 30, 30, 0.78) 0%, rgba(11, 11, 11, 0.95) 100%)',
|
|
border: '1px solid rgba(168, 168, 168, 0.32)',
|
|
backdropFilter: 'blur(20px)',
|
|
boxShadow:
|
|
'0 30px 100px rgba(0,0,0,0.8), inset 0 1px 0 rgba(231, 231, 231, 0.1), 0 0 70px rgba(94, 94, 94, 0.22)',
|
|
transform: `rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
|
|
transition: 'transform 0.3s cubic-bezier(0.16,1,0.3,1)',
|
|
overflow: 'hidden',
|
|
transformStyle: 'preserve-3d',
|
|
}}
|
|
>
|
|
{/* Grid floor */}
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
background:
|
|
'linear-gradient(rgba(168, 168, 168, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 168, 168, 0.07) 1px, transparent 1px)',
|
|
backgroundSize: '40px 40px',
|
|
maskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
|
|
WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
|
|
{/* Royal-blue stage spotlight behind robot */}
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
top: '12%',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: '70%',
|
|
height: '70%',
|
|
background:
|
|
'radial-gradient(ellipse 60% 70% at 50% 35%, rgba(127, 127, 127, 0.45) 0%, rgba(94, 94, 94, 0.25) 35%, transparent 70%)',
|
|
filter: 'blur(14px)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
|
|
{/* Light beam from top */}
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: '60%',
|
|
height: '60%',
|
|
background:
|
|
'linear-gradient(180deg, rgba(231, 231, 231, 0.18) 0%, rgba(127, 127, 127, 0.12) 35%, transparent 75%)',
|
|
clipPath: 'polygon(35% 0, 65% 0, 90% 100%, 10% 100%)',
|
|
filter: 'blur(8px)',
|
|
mixBlendMode: 'screen',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
|
|
{/* Robot image main */}
|
|
{FEATURED_ROBOTS.map((r, idx) => (
|
|
<div
|
|
key={r.id}
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
display: 'flex',
|
|
alignItems: 'flex-end',
|
|
justifyContent: 'center',
|
|
paddingTop: 'clamp(2rem, 5vw, 3rem)',
|
|
paddingBottom: '36%',
|
|
paddingLeft: 'clamp(1rem, 4vw, 2rem)',
|
|
paddingRight: 'clamp(1rem, 4vw, 2rem)',
|
|
opacity: idx === activeIdx ? 1 : 0,
|
|
transform:
|
|
idx === activeIdx
|
|
? `translateY(0) translateX(${tilt.ry * 0.4}px) scale(1)`
|
|
: 'translateY(18px) scale(0.96)',
|
|
transformOrigin: 'center bottom',
|
|
transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
|
|
filter:
|
|
idx === activeIdx
|
|
? 'drop-shadow(0 26px 42px rgba(0,0,0,0.78)) drop-shadow(0 14px 22px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(127, 127, 127, 0.45))'
|
|
: 'none',
|
|
willChange: 'transform',
|
|
}}
|
|
aria-hidden={idx !== activeIdx}
|
|
>
|
|
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
|
|
<Image
|
|
src={r.image}
|
|
alt={`${r.brandLabel} ${r.name}`}
|
|
fill
|
|
sizes="(max-width: 768px) 90vw, 620px"
|
|
style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
|
|
priority={idx === 0}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Stronger drop-shadow ellipse under robot */}
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
left: '20%',
|
|
right: '20%',
|
|
bottom: '24%',
|
|
height: '5%',
|
|
background:
|
|
'radial-gradient(ellipse 60% 100% at 50% 100%, rgba(0,0,0,0.85), transparent 70%)',
|
|
filter: 'blur(10px)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
|
|
{/* Floor reflection (mirror image, faded) */}
|
|
{FEATURED_ROBOTS.map((r, idx) => (
|
|
<div
|
|
key={`reflect-${r.id}`}
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
left: 'clamp(1rem, 4vw, 2rem)',
|
|
right: 'clamp(1rem, 4vw, 2rem)',
|
|
bottom: '6%',
|
|
height: '22%',
|
|
opacity: idx === activeIdx ? 0.28 : 0,
|
|
transform: `scaleY(-1) translateX(${tilt.ry * 0.4}px)`,
|
|
transformOrigin: 'center top',
|
|
maskImage:
|
|
'linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 78%)',
|
|
WebkitMaskImage:
|
|
'linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 78%)',
|
|
transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
|
|
pointerEvents: 'none',
|
|
filter: 'blur(1.2px)',
|
|
}}
|
|
>
|
|
<Image
|
|
src={r.image}
|
|
alt=""
|
|
fill
|
|
sizes="(max-width: 768px) 90vw, 620px"
|
|
style={{ objectFit: 'contain', objectPosition: 'center top' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
|
|
{/* Floor line */}
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '28%',
|
|
height: 1,
|
|
background:
|
|
'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.6), transparent)',
|
|
pointerEvents: 'none',
|
|
filter: 'blur(0.3px)',
|
|
}}
|
|
/>
|
|
|
|
{/* Edge glass glare silver/blue rim light */}
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
borderRadius: '1.75rem',
|
|
background:
|
|
'linear-gradient(135deg, rgba(231, 231, 231, 0.18) 0%, transparent 18%, transparent 80%, rgba(127, 127, 127, 0.22) 100%)',
|
|
mixBlendMode: 'screen',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: '10%',
|
|
right: '10%',
|
|
height: '2px',
|
|
background:
|
|
'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.5), transparent)',
|
|
pointerEvents: 'none',
|
|
filter: 'blur(0.4px)',
|
|
}}
|
|
/>
|
|
|
|
{/* Floating labels keyed to active robot + parallax */}
|
|
<div className="hero-labels" aria-hidden>
|
|
{labels.map((l, i) => {
|
|
/* labels drift opposite to tilt for parallax depth */
|
|
const depth = (i + 1) * 0.6;
|
|
const dx = tilt.ry * depth;
|
|
const dy = tilt.rx * depth;
|
|
return (
|
|
<span
|
|
key={`${activeIdx}-${l.text}`}
|
|
style={{
|
|
position: 'absolute',
|
|
top: l.top,
|
|
bottom: l.bottom,
|
|
left: l.left,
|
|
right: l.right,
|
|
padding: '0.45rem 0.8rem',
|
|
borderRadius: 999,
|
|
background: 'rgba(16, 16, 16, 0.78)',
|
|
border: '1px solid rgba(168, 168, 168, 0.45)',
|
|
color: '#e7e7e7',
|
|
fontSize: '0.66rem',
|
|
letterSpacing: '0.22em',
|
|
textTransform: 'uppercase',
|
|
fontWeight: 600,
|
|
backdropFilter: 'blur(10px)',
|
|
animation: `floatY 6s ease-in-out ${l.delay}s infinite, fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) ${l.delay}s both`,
|
|
whiteSpace: 'nowrap',
|
|
boxShadow:
|
|
'0 10px 28px rgba(0,0,0,0.55), 0 0 18px rgba(127, 127, 127, 0.18), inset 0 1px 0 rgba(231, 231, 231, 0.08)',
|
|
transform: `translate3d(${dx}px, ${dy}px, 0)`,
|
|
transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1)',
|
|
willChange: 'transform',
|
|
}}
|
|
>
|
|
{l.text}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Featured card + dot nav */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '1.25rem',
|
|
left: '1.25rem',
|
|
right: '1.25rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: '1rem',
|
|
flexWrap: 'wrap',
|
|
zIndex: 5,
|
|
}}
|
|
>
|
|
<Link
|
|
href={`/robots/${robot.slug}/`}
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.75rem',
|
|
padding: '0.7rem 1.1rem',
|
|
borderRadius: 14,
|
|
background: 'rgba(16, 16, 16, 0.72)',
|
|
border: '1px solid rgba(168, 168, 168, 0.45)',
|
|
backdropFilter: 'blur(12px)',
|
|
color: '#fcfcfc',
|
|
textDecoration: 'none',
|
|
boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
|
|
}}
|
|
>
|
|
<span style={{ display: 'flex', flexDirection: 'column' }}>
|
|
<span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.24em', textTransform: 'uppercase' }}>
|
|
Featured · {robot.brandLabel}
|
|
</span>
|
|
<span style={{ fontSize: '0.95rem', fontWeight: 600 }}>{robot.name}</span>
|
|
</span>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e7e7e7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
<polyline points="12 5 19 12 12 19" />
|
|
</svg>
|
|
</Link>
|
|
<div style={{ display: 'flex', gap: '0.4rem' }}>
|
|
{FEATURED_ROBOTS.map((r, idx) => (
|
|
<button
|
|
key={r.id}
|
|
type="button"
|
|
onClick={() => setActiveIdx(idx)}
|
|
aria-label={`Show ${r.name}`}
|
|
style={{
|
|
width: idx === activeIdx ? 26 : 8,
|
|
height: 8,
|
|
borderRadius: 999,
|
|
border: 'none',
|
|
background: idx === activeIdx
|
|
? 'linear-gradient(90deg, #e7e7e7, #7f7f7f)'
|
|
: 'rgba(168, 168, 168, 0.4)',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.4s ease',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
@media (min-width: 1024px) {
|
|
.hero-grid {
|
|
grid-template-columns: 1.05fr 1fr !important;
|
|
}
|
|
}
|
|
.hero-labels { display: none; }
|
|
@media (min-width: 768px) {
|
|
.hero-labels { display: block; }
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
}
|