de25d774af
- about, brands, contact, industries, bu-sunaidah page copy polish - BuSunaidahSection content updates - accessories.ts: rich-content interfaces (highlights, featureSections, specGroups, paramsImage, footnotes, safetyNotice) + full Dex2-5, Dex3-1, Dex1-1, Dex5-1, Z1, D1-T, L2 data sourced from vendor pages Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
256 lines
11 KiB
TypeScript
256 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { BU_SUNAIDAH_URL, BU_SUNAIDAH_PORTRAIT } from '@/data/bu-sunaidah';
|
|
import { InstagramGlyph } from '@/components/icons/InstagramGlyph';
|
|
|
|
export function BuSunaidahSection() {
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'relative',
|
|
borderRadius: '2rem',
|
|
padding: 'clamp(2rem, 5vw, 3.5rem)',
|
|
overflow: 'hidden',
|
|
background:
|
|
'radial-gradient(ellipse 60% 80% at 0% 100%, rgba(39, 63, 148,0.18), transparent 65%), radial-gradient(ellipse 70% 60% at 100% 0%, rgba(222, 224, 240,0.12), transparent 60%), linear-gradient(135deg, rgba(28, 27, 33,0.95), rgba(5,5,5,0.98))',
|
|
border: '1px solid rgba(39, 63, 148,0.32)',
|
|
boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222, 224, 240,0.05)',
|
|
}}
|
|
>
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
background:
|
|
'linear-gradient(rgba(39, 63, 148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.05) 1px, transparent 1px)',
|
|
backgroundSize: '48px 48px',
|
|
maskImage: 'radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 80%)',
|
|
WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 80%)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
|
|
<div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))', gap: 'clamp(2rem, 5vw, 3.5rem)', alignItems: 'center' }}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
|
|
<span className="eyebrow" style={{ color: '#DEE0F0' }}>
|
|
Brand · Culture · Storytelling
|
|
</span>
|
|
<h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
|
|
<span className="text-gradient" style={{ fontWeight: 500 }}>
|
|
Meet Bu Sunaidah.
|
|
</span>
|
|
</h2>
|
|
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
|
|
An Emirati culture-inspired robotics character Bu Sunaidah is YS Lootah Robotics' community and storytelling ambassador. Designed to celebrate UAE heritage at media events, exhibitions, and innovation programs, Bu Sunaidah shows what intelligent automation looks like when it speaks the language of the region.
|
|
</p>
|
|
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
|
|
{[
|
|
'Emirati-inspired robotics persona',
|
|
'Media presence and event activations across the UAE',
|
|
'Community engagement and innovation storytelling',
|
|
'A modern face for advanced robotics in our region',
|
|
].map((b) => (
|
|
<li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#FBFBFD', fontSize: '0.95rem', lineHeight: 1.55 }}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
|
|
<path d="M20 6 9 17l-5-5" />
|
|
</svg>
|
|
{b}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', marginTop: '0.5rem' }}>
|
|
<a
|
|
className="btn btn-ghost"
|
|
href="https://www.instagram.com/bu.sunaidah"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
|
|
</svg>
|
|
Follow @bu.sunaidah
|
|
</a>
|
|
<a className="btn btn-outline" href="/contact/">
|
|
Book Bu Sunaidah for events
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
position: 'relative',
|
|
aspectRatio: '1 / 1',
|
|
maxWidth: 460,
|
|
margin: '0 auto',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
position: 'absolute',
|
|
inset: '-2rem',
|
|
background:
|
|
'radial-gradient(ellipse 60% 60% at 50% 60%, rgba(222, 224, 240,0.32), transparent 65%)',
|
|
filter: 'blur(28px)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
{(() => {
|
|
const cardStyle = {
|
|
position: 'relative' as const,
|
|
display: 'block' as const,
|
|
width: '100%',
|
|
height: '100%',
|
|
borderRadius: '1.75rem',
|
|
overflow: 'hidden' as const,
|
|
border: '1px solid rgba(39, 63, 148,0.35)',
|
|
background:
|
|
'radial-gradient(ellipse 70% 60% at 50% 55%, rgba(222, 224, 240,0.18), transparent 60%), linear-gradient(180deg, rgba(28, 27, 33,0.85), rgba(5,5,5,0.95))',
|
|
boxShadow: '0 30px 100px rgba(0,0,0,0.7)',
|
|
textDecoration: 'none' as const,
|
|
color: 'inherit' as const,
|
|
};
|
|
|
|
const chips = (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '1rem',
|
|
left: '1rem',
|
|
right: '1rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: '0.75rem',
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
padding: '0.4rem 0.75rem',
|
|
borderRadius: 999,
|
|
background: 'rgba(14, 13, 18,0.7)',
|
|
border: '1px solid rgba(39, 63, 148,0.35)',
|
|
color: '#DEE0F0',
|
|
fontSize: '0.66rem',
|
|
letterSpacing: '0.22em',
|
|
textTransform: 'uppercase',
|
|
fontWeight: 600,
|
|
backdropFilter: 'blur(8px)',
|
|
}}
|
|
>
|
|
Emirati-inspired persona
|
|
</span>
|
|
<span
|
|
style={{
|
|
padding: '0.35rem 0.65rem',
|
|
borderRadius: 999,
|
|
background: 'rgba(222, 224, 240,0.18)',
|
|
border: '1px solid rgba(222, 224, 240,0.4)',
|
|
color: '#FBFBFD',
|
|
fontSize: '0.7rem',
|
|
letterSpacing: '0.16em',
|
|
textTransform: 'uppercase',
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
Bu Sunaidah
|
|
</span>
|
|
</div>
|
|
);
|
|
|
|
if (BU_SUNAIDAH_PORTRAIT) {
|
|
return (
|
|
<Link href="/bu-sunaidah/" aria-label="Open the Bu Sunaidah page" style={cardStyle}>
|
|
<Image
|
|
src={BU_SUNAIDAH_PORTRAIT.src}
|
|
alt={BU_SUNAIDAH_PORTRAIT.alt}
|
|
fill
|
|
sizes="(max-width: 768px) 90vw, 460px"
|
|
style={{ objectFit: 'cover', objectPosition: 'center' }}
|
|
/>
|
|
{chips}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={BU_SUNAIDAH_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Open @bu.sunaidah on Instagram in a new tab"
|
|
style={cardStyle}
|
|
>
|
|
<span
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '1.1rem',
|
|
textAlign: 'center',
|
|
padding: 'clamp(1.25rem, 4vw, 2rem)',
|
|
background:
|
|
'radial-gradient(ellipse 60% 60% at 50% 35%, rgba(58, 85, 196, 0.25), transparent 65%)',
|
|
}}
|
|
>
|
|
<span
|
|
aria-hidden
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 78,
|
|
height: 78,
|
|
borderRadius: 22,
|
|
color: '#FFFFFF',
|
|
border: '1px solid rgba(222, 224, 240, 0.28)',
|
|
background:
|
|
'radial-gradient(ellipse 60% 60% at 30% 30%, rgba(255, 84, 165, 0.55), transparent 60%), radial-gradient(ellipse 60% 60% at 70% 70%, rgba(255, 165, 84, 0.45), transparent 60%), linear-gradient(135deg, rgba(58, 85, 196, 0.65), rgba(20, 20, 28, 0.85))',
|
|
boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
|
|
}}
|
|
>
|
|
<InstagramGlyph size={34} />
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontSize: '0.66rem',
|
|
letterSpacing: '0.28em',
|
|
textTransform: 'uppercase',
|
|
fontWeight: 700,
|
|
color: '#8891C7',
|
|
}}
|
|
>
|
|
Portrait coming soon
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontSize: '1.05rem',
|
|
fontWeight: 500,
|
|
letterSpacing: '-0.005em',
|
|
lineHeight: 1.4,
|
|
maxWidth: 280,
|
|
color: '#FBFBFD',
|
|
}}
|
|
>
|
|
View Bu Sunaidah's latest moments on Instagram
|
|
</span>
|
|
</span>
|
|
{chips}
|
|
</a>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|