diff --git a/src/app/globals.css b/src/app/globals.css index bc40ed9..c2a52b5 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -696,3 +696,46 @@ html { } html, body { overflow-x: hidden; max-width: 100vw; } + +/* === GLOBAL RESPONSIVE GUARDS === */ + +/* Anchor scroll never lands behind fixed navbar */ +[id] { scroll-margin-top: clamp(80px, 12vh, 120px); } + +/* No element overflows viewport horizontally */ +img, video, svg, canvas { max-width: 100%; height: auto; } + +/* Grid/flex children should be allowed to shrink below content width to prevent overflow */ +.container-wide > * { min-width: 0; } + +/* Tap targets: minimum 44x44 for interactive elements on touch screens */ +@media (hover: none) and (pointer: coarse) { + a, button, [role='button'] { min-height: 44px; } + .cta-link { min-height: 32px; } +} + +/* Mobile section padding tighter */ +@media (max-width: 600px) { + .container-wide { + padding-left: 1rem; + padding-right: 1rem; + } + .eyebrow { + font-size: 0.68rem; + letter-spacing: 0.28em; + } + .cta-lg { padding: 0.85rem 1.25rem; font-size: 0.72rem; letter-spacing: 0.2em; } + .cta-md { padding: 0.8rem 1.15rem; font-size: 0.68rem; } +} + +/* WhatsApp floating button: lift above safe-area on iOS, keep clear of footer content */ +.wa-fab { + bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important; +} +@media (max-width: 600px) { + .wa-fab { + width: 52px !important; + height: 52px !important; + bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 87db86c..221d8cc 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -67,7 +67,7 @@ export default function RootLayout({ {children} {/* WhatsApp Floating Button */} - + diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index dcc7e74..d0f5481 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -34,6 +34,15 @@ export function Navbar() { }; }, [mobileOpen]); + useEffect(() => { + if (!mobileOpen) return; + const onKey = (e: KeyboardEvent) => { + if (e.key === 'Escape') setMobileOpen(false); + }; + window.addEventListener('keydown', onKey); + return () => window.removeEventListener('keydown', onKey); + }, [mobileOpen]); + const isActive = (href: string) => { if (href === '/') return pathname === '/' || pathname === ''; return pathname.startsWith(href.replace(/\/$/, '')); diff --git a/src/components/robotics/IndustryUseCases.tsx b/src/components/robotics/IndustryUseCases.tsx index 3882f7e..c2a8b13 100644 --- a/src/components/robotics/IndustryUseCases.tsx +++ b/src/components/robotics/IndustryUseCases.tsx @@ -34,7 +34,7 @@ const ICON_MAP: Record = { }; const SHORT_COPY: Record = { - hospitality: 'Service and delivery robots that help hotels, lounges, and guest venues operate smoothly.', + hospitality: 'Service and delivery robots for hotels, lounges, and guest venues.', restaurants: 'Delivery robots that support faster table service and reduce staff walking time.', hotels: 'Autonomous delivery and concierge-style robotics for premium guest experiences.', malls: 'Cleaning, service, and activation robots for high-traffic retail environments.', @@ -58,7 +58,7 @@ export function IndustryUseCases({ limit }: { limit?: number }) { return (
- {/* STATS ROW */} + {/* STATS — compact dark chips */} @@ -169,9 +203,8 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
- + - {industry.name}
@@ -192,38 +225,47 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number } display: flex; flex-direction: column; height: 100%; - background: #FFFFFF; - border: 1px solid rgba(16, 22, 46, 0.06); border-radius: 18px; overflow: hidden; text-decoration: none; - color: inherit; - box-shadow: 0 4px 14px rgba(8, 12, 28, 0.04); + color: #FFFFFF; + border: 1px solid rgba(222, 224, 240, 0.10); + background: + radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), + linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96)); + box-shadow: + 0 1px 0 rgba(222, 224, 240, 0.04) inset, + 0 14px 28px rgba(0, 0, 0, 0.36); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s, border-color 0.4s; } .ic:hover, .ic:focus-visible { transform: translateY(-3px); - border-color: rgba(74, 102, 216, 0.28); - box-shadow: 0 18px 36px rgba(8, 12, 28, 0.10), 0 2px 6px rgba(8, 12, 28, 0.04); + border-color: rgba(74, 102, 216, 0.42); + box-shadow: + 0 1px 0 rgba(222, 224, 240, 0.08) inset, + 0 24px 52px rgba(0, 0, 0, 0.55), + 0 0 0 1px rgba(74, 102, 216, 0.22), + 0 0 28px rgba(58, 85, 196, 0.22); } .ic:focus-visible { - outline: 2px solid #4a66d8; + outline: 2px solid rgba(74, 102, 216, 0.75); outline-offset: 3px; } - /* MEDIA AREA */ + /* MEDIA */ .ic-media { position: relative; aspect-ratio: 16 / 10; background: - radial-gradient(ellipse 70% 80% at 30% 20%, color-mix(in srgb, var(--accent) 35%, white) 0%, transparent 60%), - linear-gradient(135deg, #EEF1F6 0%, #DDE3EE 100%); + radial-gradient(ellipse 70% 80% at 30% 30%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%), + linear-gradient(135deg, rgba(20, 22, 36, 0.95) 0%, rgba(10, 11, 18, 0.98) 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; + border-bottom: 1px solid rgba(222, 224, 240, 0.06); } .ic-media-glow { position: absolute; @@ -232,16 +274,16 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number } left: 20%; top: 10%; border-radius: 999px; - background: radial-gradient(circle at 50% 50%, rgba(74, 102, 216, 0.16), transparent 65%); - filter: blur(20px); + background: radial-gradient(circle at 50% 50%, rgba(74, 102, 216, 0.22), transparent 65%); + filter: blur(22px); pointer-events: none; } .ic-media-grid { position: absolute; inset: 0; background-image: - linear-gradient(rgba(16, 22, 46, 0.05) 1px, transparent 1px), - linear-gradient(90deg, rgba(16, 22, 46, 0.05) 1px, transparent 1px); + linear-gradient(rgba(222, 224, 240, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(222, 224, 240, 0.05) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%); @@ -253,54 +295,44 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number } display: inline-flex; align-items: center; justify-content: center; - width: 88px; - height: 88px; - border-radius: 22px; - color: #273F94; - background: rgba(255, 255, 255, 0.85); - border: 1px solid rgba(16, 22, 46, 0.06); - box-shadow: 0 8px 22px rgba(8, 12, 28, 0.08); - transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); + width: 72px; + height: 72px; + border-radius: 18px; + color: color-mix(in srgb, var(--accent) 80%, white); + background: + radial-gradient(ellipse 60% 60% at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), + rgba(14, 13, 18, 0.65); + border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); + box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); + transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), + box-shadow 0.4s, border-color 0.4s; } .ic:hover .ic-media-icon, .ic:focus-visible .ic-media-icon { - transform: scale(1.06); - } - .ic-media-tag { - position: absolute; - left: 14px; - bottom: 12px; - z-index: 2; - padding: 0.32rem 0.65rem; - border-radius: 999px; - font-size: 0.62rem; - letter-spacing: 0.2em; - text-transform: uppercase; - font-weight: 700; - color: #273F94; - background: rgba(255, 255, 255, 0.85); - border: 1px solid rgba(39, 63, 148, 0.18); + transform: scale(1.08); + border-color: color-mix(in srgb, var(--accent) 60%, transparent); + box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); } /* BODY */ .ic-body { display: flex; flex-direction: column; - gap: 0.55rem; - padding: 1.1rem 1.15rem 1.15rem; + gap: 0.5rem; + padding: 1.05rem 1.15rem 1.1rem; flex: 1; } .ic-title { margin: 0; - font-size: 1.1rem; + font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; - color: #0F1116; + color: #FFFFFF; } .ic-desc { margin: 0; - color: #4a4f63; - font-size: 0.9rem; + color: #C9CCDE; + font-size: 0.88rem; line-height: 1.55; flex: 1; display: -webkit-box; @@ -312,11 +344,15 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number } display: inline-flex; align-items: center; gap: 0.45rem; - margin-top: 0.4rem; - font-size: 0.82rem; + margin-top: 0.35rem; + font-size: 0.78rem; font-weight: 600; - color: #273F94; + letter-spacing: 0.02em; + color: #DEE0F0; + transition: color 0.3s; } + .ic:hover .ic-cta, + .ic:focus-visible .ic-cta { color: #FFFFFF; } .ic-cta-arrow { display: inline-flex; align-items: center;