490 lines
16 KiB
TypeScript
490 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { MapPin, FileText, Clock, Sparkles } from 'lucide-react';
|
|
import { CTAButton } from '@/components/ui/CTAButton';
|
|
|
|
const ease = [0.16, 1, 0.3, 1] as const;
|
|
|
|
type Props = {
|
|
title?: string;
|
|
description?: string;
|
|
primaryHref?: string;
|
|
primaryLabel?: string;
|
|
secondaryHref?: string;
|
|
secondaryLabel?: string;
|
|
};
|
|
|
|
const CHIPS = [
|
|
{ Icon: MapPin, label: 'Dubai showroom' },
|
|
{ Icon: Sparkles, label: 'Live demo' },
|
|
{ Icon: FileText, label: 'UAE quotation' },
|
|
{ Icon: Clock, label: 'Fast response' },
|
|
];
|
|
|
|
export function DemoCTA({
|
|
title = 'Talk to our robotics team.',
|
|
description = 'See the robots in action at our Dubai showroom or request a UAE-ready quotation. Our team responds within one business day.',
|
|
primaryHref = '/book-demo/',
|
|
primaryLabel = 'Book a live demo',
|
|
secondaryHref = '/contact/',
|
|
secondaryLabel = 'Talk to our team',
|
|
}: Props) {
|
|
return (
|
|
<motion.section
|
|
className="dcta"
|
|
aria-label="Book a demo or contact the robotics team"
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-10%' }}
|
|
transition={{ duration: 0.7, ease }}
|
|
>
|
|
<div className="dcta-glow dcta-glow-a" aria-hidden />
|
|
<div className="dcta-glow dcta-glow-b" aria-hidden />
|
|
<div className="dcta-grid" aria-hidden />
|
|
<div className="dcta-scan" aria-hidden />
|
|
|
|
<div className="dcta-inner">
|
|
{/* LEFT — copy + actions */}
|
|
<div className="dcta-text">
|
|
<span className="dcta-eyebrow">
|
|
<span className="dcta-eyebrow-dot" />
|
|
Book a demo · Dubai showroom
|
|
</span>
|
|
|
|
<h2 className="dcta-title">
|
|
<span className="text-gradient">{title}</span>
|
|
</h2>
|
|
|
|
<p className="dcta-desc">{description}</p>
|
|
|
|
<ul className="dcta-chips" role="list">
|
|
{CHIPS.map((c) => (
|
|
<li key={c.label} className="dcta-chip">
|
|
<span className="dcta-chip-icon" aria-hidden>
|
|
<c.Icon size={12} />
|
|
</span>
|
|
<span>{c.label}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="dcta-actions">
|
|
<CTAButton
|
|
href={primaryHref}
|
|
variant="primary"
|
|
size="lg"
|
|
arrow="up-right"
|
|
ariaLabel={`${primaryLabel} at the Dubai showroom`}
|
|
>
|
|
{primaryLabel}
|
|
</CTAButton>
|
|
<CTAButton
|
|
href={secondaryHref}
|
|
variant="secondary"
|
|
size="lg"
|
|
arrow="right"
|
|
ariaLabel={`${secondaryLabel} via contact form`}
|
|
>
|
|
{secondaryLabel}
|
|
</CTAButton>
|
|
</div>
|
|
|
|
<div className="dcta-meta" aria-hidden>
|
|
<span className="dcta-meta-dot" />
|
|
<span>UAE-based robotics team · Replies within 1 business day</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* RIGHT — status module (desktop only) */}
|
|
<aside className="dcta-panel" aria-hidden>
|
|
<div className="dcta-panel-head">
|
|
<span className="dcta-panel-tag">YSL · LIVE</span>
|
|
<span className="dcta-panel-live">
|
|
<span className="dcta-panel-live-dot" />
|
|
Online
|
|
</span>
|
|
</div>
|
|
|
|
<div className="dcta-orbit">
|
|
<svg viewBox="0 0 220 220" role="img" aria-hidden="true" className="dcta-orbit-svg">
|
|
<defs>
|
|
<radialGradient id="dcta-core" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stopColor="#FFFFFF" />
|
|
<stop offset="55%" stopColor="#DEE0F0" />
|
|
<stop offset="100%" stopColor="#4a66d8" />
|
|
</radialGradient>
|
|
<linearGradient id="dcta-route" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor="rgba(222, 224, 240, 0.0)" />
|
|
<stop offset="50%" stopColor="rgba(222, 224, 240, 0.55)" />
|
|
<stop offset="100%" stopColor="rgba(74, 102, 216, 0.0)" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<circle cx="110" cy="110" r="42" fill="none" stroke="rgba(74,102,216,0.45)" strokeWidth="1" strokeDasharray="3 4" />
|
|
<circle cx="110" cy="110" r="70" fill="none" stroke="rgba(222,224,240,0.18)" strokeWidth="1" strokeDasharray="2 6" />
|
|
<circle cx="110" cy="110" r="96" fill="none" stroke="rgba(74,102,216,0.22)" strokeWidth="1" />
|
|
|
|
<circle cx="110" cy="110" r="42" fill="none" stroke="rgba(74,102,216,0.7)" strokeWidth="1.2">
|
|
<animate attributeName="r" values="42;96;42" dur="4.8s" repeatCount="indefinite" />
|
|
<animate attributeName="opacity" values="0.7;0;0.7" dur="4.8s" repeatCount="indefinite" />
|
|
</circle>
|
|
|
|
<g>
|
|
<circle cx="110" cy="110" r="14" fill="url(#dcta-core)" />
|
|
<circle cx="110" cy="110" r="18" fill="none" stroke="rgba(222,224,240,0.55)" strokeWidth="1" />
|
|
</g>
|
|
|
|
<g transform="translate(110 110)">
|
|
<g>
|
|
<circle r="3" cx="70" cy="0" fill="#DEE0F0">
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="9s" repeatCount="indefinite" />
|
|
</circle>
|
|
</g>
|
|
<g>
|
|
<circle r="2.5" cx="-96" cy="0" fill="#A6B2D8">
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="14s" repeatCount="indefinite" />
|
|
</circle>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
<span className="dcta-orbit-label">Dubai · 25.20°N</span>
|
|
</div>
|
|
|
|
<div className="dcta-panel-rows">
|
|
<div className="dcta-row">
|
|
<span className="dcta-row-k">Showroom</span>
|
|
<span className="dcta-row-v">Dubai · By appointment</span>
|
|
</div>
|
|
<div className="dcta-row">
|
|
<span className="dcta-row-k">Coverage</span>
|
|
<span className="dcta-row-v">UAE-wide</span>
|
|
</div>
|
|
<div className="dcta-row">
|
|
<span className="dcta-row-k">Response</span>
|
|
<span className="dcta-row-v">≤ 1 business day</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.dcta {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(74, 102, 216, 0.18);
|
|
background:
|
|
radial-gradient(ellipse 60% 100% at 0% 0%, rgba(58, 85, 196, 0.16), transparent 55%),
|
|
radial-gradient(ellipse 60% 100% at 100% 100%, rgba(136, 145, 199, 0.14), transparent 55%),
|
|
linear-gradient(135deg, rgba(14, 13, 22, 0.92), rgba(6, 6, 10, 0.97));
|
|
box-shadow:
|
|
0 30px 90px rgba(0, 0, 0, 0.55),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
}
|
|
.dcta-glow {
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
filter: blur(110px);
|
|
pointer-events: none;
|
|
}
|
|
.dcta-glow-a {
|
|
width: 520px;
|
|
height: 520px;
|
|
top: -180px;
|
|
left: -160px;
|
|
background: rgba(58, 85, 196, 0.42);
|
|
opacity: 0.55;
|
|
animation: dcta-drift 16s ease-in-out infinite alternate;
|
|
}
|
|
.dcta-glow-b {
|
|
width: 480px;
|
|
height: 480px;
|
|
bottom: -200px;
|
|
right: -160px;
|
|
background: rgba(136, 145, 199, 0.32);
|
|
opacity: 0.45;
|
|
animation: dcta-drift 22s ease-in-out infinite alternate-reverse;
|
|
}
|
|
@keyframes dcta-drift {
|
|
0% { transform: translate(0, 0); }
|
|
100% { transform: translate(24px, -16px); }
|
|
}
|
|
.dcta-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(rgba(74, 102, 216, 0.06) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(74, 102, 216, 0.06) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
|
|
-webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
|
|
pointer-events: none;
|
|
}
|
|
.dcta-scan {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(
|
|
180deg,
|
|
transparent 0,
|
|
transparent 3px,
|
|
rgba(222, 224, 240, 0.018) 3px,
|
|
rgba(222, 224, 240, 0.018) 4px
|
|
);
|
|
mix-blend-mode: overlay;
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dcta-inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: clamp(1.5rem, 3vw, 2.5rem);
|
|
padding: clamp(1.6rem, 3.8vw, 2.8rem);
|
|
align-items: center;
|
|
}
|
|
|
|
.dcta-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
max-width: 640px;
|
|
}
|
|
.dcta-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
font-size: 0.6rem;
|
|
letter-spacing: 0.32em;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
color: #8891C7;
|
|
width: fit-content;
|
|
}
|
|
.dcta-eyebrow-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: #DEE0F0;
|
|
box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
|
|
animation: dcta-pulse 2.2s ease-in-out infinite;
|
|
}
|
|
@keyframes dcta-pulse {
|
|
0%, 100% { opacity: 0.45; transform: scale(0.85); }
|
|
50% { opacity: 1; transform: scale(1.12); }
|
|
}
|
|
|
|
.dcta-title {
|
|
margin: 0;
|
|
font-size: clamp(1.8rem, 4.2vw, 2.8rem);
|
|
line-height: 1.05;
|
|
font-weight: 300;
|
|
letter-spacing: -0.03em;
|
|
color: #FFFFFF;
|
|
}
|
|
.dcta-title :global(.text-gradient) { font-weight: 500; }
|
|
|
|
.dcta-desc {
|
|
margin: 0;
|
|
color: #DEE0F0;
|
|
font-size: clamp(0.95rem, 1.8vw, 1.05rem);
|
|
line-height: 1.65;
|
|
max-width: 540px;
|
|
}
|
|
|
|
.dcta-chips {
|
|
list-style: none;
|
|
margin: 0.25rem 0 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
}
|
|
.dcta-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
padding: 0.4rem 0.7rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(222, 224, 240, 0.12);
|
|
background: rgba(20, 19, 26, 0.55);
|
|
color: #DEE0F0;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
transition: border-color 0.3s, background 0.3s, color 0.3s;
|
|
}
|
|
.dcta-chip:hover {
|
|
border-color: rgba(74, 102, 216, 0.45);
|
|
background: rgba(58, 85, 196, 0.14);
|
|
color: #FFFFFF;
|
|
}
|
|
.dcta-chip-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 999px;
|
|
color: #DEE0F0;
|
|
background: rgba(74, 102, 216, 0.22);
|
|
border: 1px solid rgba(74, 102, 216, 0.45);
|
|
}
|
|
|
|
.dcta-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.6rem;
|
|
margin-top: 0.35rem;
|
|
}
|
|
|
|
.dcta-meta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
margin-top: 0.4rem;
|
|
color: #8891C7;
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.dcta-meta-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 999px;
|
|
background: #7FD6D0;
|
|
box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
|
|
animation: dcta-pulse 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
/* RIGHT PANEL */
|
|
.dcta-panel {
|
|
display: none;
|
|
position: relative;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(74, 102, 216, 0.22);
|
|
background:
|
|
radial-gradient(ellipse 80% 80% at 50% 30%, rgba(58, 85, 196, 0.18), transparent 65%),
|
|
linear-gradient(180deg, rgba(14, 13, 22, 0.75), rgba(6, 6, 10, 0.92));
|
|
padding: 1rem 1.1rem 1.1rem;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
overflow: hidden;
|
|
}
|
|
.dcta-panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.dcta-panel-tag {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.32em;
|
|
color: #DEE0F0;
|
|
font-weight: 800;
|
|
}
|
|
.dcta-panel-live {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.22em;
|
|
font-weight: 700;
|
|
color: #7FD6D0;
|
|
text-transform: uppercase;
|
|
}
|
|
.dcta-panel-live-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 999px;
|
|
background: #7FD6D0;
|
|
box-shadow: 0 0 10px rgba(127, 214, 208, 0.75);
|
|
animation: dcta-pulse 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.dcta-orbit {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(222, 224, 240, 0.06);
|
|
background:
|
|
radial-gradient(ellipse 80% 80% at 50% 50%, rgba(58, 85, 196, 0.18), transparent 70%),
|
|
linear-gradient(180deg, rgba(10, 10, 14, 0.6), rgba(6, 6, 10, 0.9));
|
|
overflow: hidden;
|
|
}
|
|
.dcta-orbit-svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.dcta-orbit-label {
|
|
position: absolute;
|
|
left: 12px;
|
|
bottom: 10px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.18em;
|
|
color: #8891C7;
|
|
}
|
|
|
|
.dcta-panel-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-top: 0.85rem;
|
|
}
|
|
.dcta-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 0.55rem 0.7rem;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(222, 224, 240, 0.06);
|
|
background: rgba(10, 10, 14, 0.55);
|
|
}
|
|
.dcta-row-k {
|
|
font-size: 0.6rem;
|
|
letter-spacing: 0.26em;
|
|
font-weight: 800;
|
|
color: #8891C7;
|
|
text-transform: uppercase;
|
|
}
|
|
.dcta-row-v {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* DESKTOP */
|
|
@media (min-width: 980px) {
|
|
.dcta-inner {
|
|
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
|
|
gap: clamp(1.8rem, 3vw, 3rem);
|
|
padding: clamp(2rem, 3.6vw, 3rem);
|
|
}
|
|
.dcta-panel { display: block; }
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.dcta-actions :global(.cta-btn) {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dcta-glow-a, .dcta-glow-b, .dcta-eyebrow-dot, .dcta-meta-dot, .dcta-panel-live-dot {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
`}</style>
|
|
</motion.section>
|
|
);
|
|
}
|