refactor: update Hero3DRobotics and RoboticsSplineShowcase components for improved styling and layout

- Adjusted padding, opacity, and transform properties for robot images in Hero3DRobotics. - Updated sizes for images to enhance responsiveness. - Modified floor reflection styles for better visual consistency. - Refactored RoboticsSplineShowcase to use inline styles for layout and design consistency. - Enhanced text styles and button designs for better user experience. - Improved grid layout for better responsiveness across different screen sizes.
2026-05-20 17:56:07 +04:00
parent 461a00384c
commit d7c343ac7d
5 changed files with 1012 additions and 170 deletions
@@ -1,5 +1,6 @@
 'use client';

+import Image from 'next/image';
 import Link from 'next/link';
 import { PremiumButton } from '@/components/ui/PremiumButton';

@@ -9,12 +10,12 @@ export function ExclusiveAccessSection() {
      style={{
        position: 'relative',
        borderRadius: '2rem',
-        padding: 'clamp(2rem, 5vw, 4rem)',
+        padding: 'clamp(1.75rem, 4vw, 3rem)',
        overflow: 'hidden',
        background:
-          'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(222, 224, 240,0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(136, 145, 199,0.22), transparent 60%), linear-gradient(135deg, rgba(28, 27, 33,0.92), rgba(5,5,5,0.97))',
-        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.06)',
+          'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(222,224,240,0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(136,145,199,0.22), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.92), rgba(5,5,5,0.97))',
+        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.06)',
      }}
    >
      <div
@@ -23,7 +24,7 @@ export function ExclusiveAccessSection() {
          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)',
+            '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% 30%, #000 30%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)',
@@ -31,8 +32,12 @@ export function ExclusiveAccessSection() {
        }}
      />

-      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))', gap: 'clamp(2rem, 4vw, 3rem)', alignItems: 'center' }}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+      <div
+        className="exa-grid"
+        style={{ position: 'relative', display: 'grid', gap: 'clamp(1.5rem, 3.5vw, 2.5rem)', alignItems: 'stretch' }}
+      >
+        {/* Left — copy */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', minWidth: 0 }}>
          <span
            style={{
              alignSelf: 'flex-start',
@@ -41,8 +46,8 @@ export function ExclusiveAccessSection() {
              gap: '0.6rem',
              padding: '0.5rem 0.9rem',
              borderRadius: 999,
-              border: '1px solid rgba(39, 63, 148,0.4)',
-              background: 'rgba(39, 63, 148,0.08)',
+              border: '1px solid rgba(39,63,148,0.45)',
+              background: 'rgba(39,63,148,0.10)',
              color: '#DEE0F0',
              fontSize: '0.7rem',
              letterSpacing: '0.24em',
@@ -50,29 +55,29 @@ export function ExclusiveAccessSection() {
              fontWeight: 700,
            }}
          >
-            <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0', boxShadow: '0 0 10px rgba(222, 224, 240,0.8)' }} />
+            <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0', boxShadow: '0 0 10px rgba(222,224,240,0.8)' }} />
            Exclusive UAE Access
          </span>

-          <h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
+          <h2 style={{ margin: 0, fontSize: 'clamp(1.7rem, 4vw, 2.6rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
            <span className="text-gradient" style={{ fontWeight: 500 }}>
-              The UAE&apos;s dedicated destination for selected Unitree and Pudu Robotics solutions.
+              The UAE&apos;s dedicated destination for Unitree and Pudu Robotics.
            </span>
          </h2>

-          <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
-            YS Lootah Robotics holds exclusive sales rights in the UAE for selected Unitree and Pudu Robotics solutions. We deliver advanced robots to businesses, venues, and innovators across Dubai and the UAE — from inquiry to live deployment.
+          <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.92rem, 1.8vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
+            Selected solutions delivered to UAE businesses, venues, and innovators — from inquiry to live deployment, fully supported in Dubai.
          </p>

-          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            {[
-              'Available exclusively in the UAE through YS Lootah Robotics.',
-              'Local Dubai team handles sales, demos, configuration, and deployment.',
-              'Curated portfolio across humanoid, quadruped, service, and delivery robots.',
+              'Exclusive UAE sales territory.',
+              'Local Dubai sales, demo, and deployment team.',
+              'Humanoid, quadruped, service, delivery, cleaning robots.',
              'End-to-end procurement, training, and ongoing support.',
            ].map((b) => (
-              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#FBFBFD', fontSize: '0.95rem', lineHeight: 1.55 }}>
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 3 }} aria-hidden="true">
+              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#FBFBFD', fontSize: '0.92rem', lineHeight: 1.5 }}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
                  <path d="M20 6 9 17l-5-5" />
                </svg>
                {b}
@@ -80,84 +85,340 @@ export function ExclusiveAccessSection() {
            ))}
          </ul>

-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', marginTop: '0.5rem' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', marginTop: '0.5rem' }}>
            <PremiumButton href="/robots/">Explore exclusive robots</PremiumButton>
            <PremiumButton href="/contact/" variant="ghost">Request UAE quotation</PremiumButton>
          </div>
        </div>

-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1rem' }}>
-          <BrandTile name="Unitree" sub="Quadruped · Humanoid" href="/brands/#unitree" accent="#DEE0F0" />
-          <BrandTile name="Pudu Robotics" sub="Service · Delivery · Cleaning" href="/brands/#pudu" accent="#8891C7" />
-          <Stat value="UAE" label="Exclusive sales territory" />
-          <Stat value="Dubai" label="Showroom & demo" />
+        {/* Right — premium showroom grid */}
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            gap: '0.875rem',
+            minWidth: 0,
+          }}
+        >
+          <BrandShowcaseTile
+            href="/brands/#unitree"
+            brand="Unitree"
+            tag="Quadruped · Humanoid"
+            accent="#DEE0F0"
+            primary={{ src: '/images/robots/unitree-g1.png', alt: 'Unitree G1 humanoid robot' }}
+            secondary={{ src: '/images/robots/unitree-go2.png', alt: 'Unitree Go2 quadruped robot' }}
+          />
+          <BrandShowcaseTile
+            href="/brands/#pudu"
+            brand="Pudu Robotics"
+            tag="Service · Delivery · Cleaning"
+            accent="#8891C7"
+            primary={{ src: '/images/robots/pudu-bellabot.svg', alt: 'Pudu BellaBot delivery robot' }}
+            secondary={{ src: '/images/robots/pudu-kettybot.svg', alt: 'Pudu KettyBot service robot' }}
+          />
+          <TerritoryTile />
+          <ShowroomTile />
        </div>
      </div>
+
+      <style jsx>{`
+        .exa-grid {
+          grid-template-columns: 1fr;
+        }
+        @media (min-width: 1024px) {
+          .exa-grid {
+            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+          }
+        }
+      `}</style>
    </div>
  );
 }

-function BrandTile({ name, sub, href, accent }: { name: string; sub: string; href: string; accent: string }) {
+function BrandShowcaseTile({
+  href,
+  brand,
+  tag,
+  accent,
+  primary,
+  secondary,
+}: {
+  href: string;
+  brand: string;
+  tag: string;
+  accent: string;
+  primary: { src: string; alt: string };
+  secondary: { src: string; alt: string };
+}) {
  return (
    <Link
      href={href}
      style={{
+        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
-        justifyContent: 'space-between',
-        gap: '0.6rem',
-        padding: '1.25rem',
-        borderRadius: 16,
-        background: `linear-gradient(135deg, rgba(28, 27, 33,0.85), rgba(5,5,5,0.95))`,
+        gap: '0.5rem',
+        padding: '1rem',
+        borderRadius: 18,
+        background:
+          `radial-gradient(ellipse 80% 60% at 30% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))`,
        border: `1px solid ${accent}44`,
        color: '#FBFBFD',
        textDecoration: 'none',
-        position: 'relative',
        overflow: 'hidden',
-        minHeight: 130,
+        minHeight: 220,
+        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
      }}
    >
-      <span
-        aria-hidden
+      {/* product visual area */}
+      <div
        style={{
-          position: 'absolute',
-          top: '-1rem',
-          right: '-1rem',
-          width: 80,
-          height: 80,
-          borderRadius: '50%',
-          background: `radial-gradient(circle, ${accent}33, transparent 70%)`,
-          pointerEvents: 'none',
+          position: 'relative',
+          flex: 1,
+          minHeight: 130,
+          borderRadius: 12,
+          background:
+            `radial-gradient(ellipse 60% 50% at 50% 60%, ${accent}1A 0%, transparent 65%), linear-gradient(180deg, rgba(28,27,33,0.7), rgba(10,10,12,0.95))`,
+          overflow: 'hidden',
+          border: '1px solid rgba(222,224,240,0.08)',
        }}
-      />
-      <span style={{ fontSize: '1.05rem', fontWeight: 600, letterSpacing: '-0.01em' }}>{name}</span>
-      <span style={{ fontSize: '0.72rem', color: '#8891C7', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{sub}</span>
-      <span style={{ fontSize: '0.68rem', color: accent, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, marginTop: 'auto' }}>
-        Available in UAE
-      </span>
+      >
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundImage:
+              'linear-gradient(rgba(191,195,226,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(191,195,226,0.06) 1px, transparent 1px)',
+            backgroundSize: '24px 24px',
+            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',
+          }}
+        />
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            top: '8%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: '70%',
+            height: '70%',
+            background:
+              'radial-gradient(ellipse 60% 70% at 50% 30%, rgba(58,85,196,0.35) 0%, transparent 65%)',
+            filter: 'blur(8px)',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* secondary robot — back-left */}
+        <div
+          style={{
+            position: 'absolute',
+            left: '6%',
+            bottom: '8%',
+            width: '46%',
+            height: '78%',
+            opacity: 0.7,
+            filter: 'drop-shadow(0 12px 20px rgba(0,0,0,0.6))',
+            transform: 'scale(0.88)',
+            transformOrigin: 'bottom left',
+          }}
+        >
+          <Image
+            src={secondary.src}
+            alt={secondary.alt}
+            fill
+            sizes="220px"
+            style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
+          />
+        </div>
+
+        {/* primary robot — front-right, slightly larger */}
+        <div
+          style={{
+            position: 'absolute',
+            right: '4%',
+            bottom: '6%',
+            width: '62%',
+            height: '90%',
+            filter:
+              'drop-shadow(0 16px 28px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(58,85,196,0.4))',
+          }}
+        >
+          <Image
+            src={primary.src}
+            alt={primary.alt}
+            fill
+            sizes="280px"
+            style={{ objectFit: 'contain', objectPosition: 'center bottom' }}
+          />
+        </div>
+
+        <span
+          style={{
+            position: 'absolute',
+            top: '0.5rem',
+            right: '0.5rem',
+            padding: '0.25rem 0.55rem',
+            borderRadius: 999,
+            background: 'rgba(14,13,18,0.7)',
+            border: `1px solid ${accent}55`,
+            color: accent,
+            fontSize: '0.55rem',
+            fontWeight: 700,
+            letterSpacing: '0.22em',
+            textTransform: 'uppercase',
+            backdropFilter: 'blur(6px)',
+          }}
+        >
+          UAE
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '0.25rem 0.25rem 0' }}>
+        <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
+          {tag}
+        </span>
+        <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
+          <span style={{ fontSize: '1rem', fontWeight: 700, letterSpacing: '-0.01em' }}>{brand}</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={accent} 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>
+        </span>
+      </div>
    </Link>
  );
 }

-function Stat({ value, label }: { value: string; label: string }) {
+function TerritoryTile() {
  return (
    <div
      style={{
-        padding: '1.25rem',
-        borderRadius: 16,
-        background: 'linear-gradient(135deg, rgba(28, 27, 33,0.7), rgba(5,5,5,0.92))',
-        border: '1px solid rgba(39, 63, 148,0.22)',
+        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
-        gap: '0.4rem',
-        minHeight: 130,
-        justifyContent: 'center',
+        justifyContent: 'space-between',
+        padding: '1rem',
+        borderRadius: 18,
+        background:
+          'radial-gradient(ellipse 80% 80% at 100% 0%, rgba(58,85,196,0.30), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))',
+        border: '1px solid rgba(58,85,196,0.45)',
+        color: '#FBFBFD',
+        overflow: 'hidden',
+        minHeight: 170,
+        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
      }}
    >
-      <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.5rem, 2.6vw, 1.9rem)', fontWeight: 700, letterSpacing: '-0.02em' }}>
-        {value}
+      {/* abstract UAE "territory" graphic — ring map style */}
+      <svg
+        aria-hidden
+        viewBox="0 0 220 140"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          opacity: 0.4,
+        }}
+      >
+        <defs>
+          <radialGradient id="terr-glow" cx="50%" cy="50%" r="60%">
+            <stop offset="0%" stopColor="#3a55c4" stopOpacity="0.8" />
+            <stop offset="100%" stopColor="#3a55c4" stopOpacity="0" />
+          </radialGradient>
+        </defs>
+        <circle cx="155" cy="55" r="42" fill="url(#terr-glow)" />
+        <circle cx="155" cy="55" r="32" fill="none" stroke="#DEE0F0" strokeOpacity="0.45" strokeDasharray="2 4" />
+        <circle cx="155" cy="55" r="22" fill="none" stroke="#DEE0F0" strokeOpacity="0.65" />
+        <circle cx="155" cy="55" r="3.5" fill="#DEE0F0" />
+        <text x="160" y="44" fontFamily="Inter, sans-serif" fontSize="8" letterSpacing="3" fill="#BFC3E2" textAnchor="start">DXB</text>
+      </svg>
+      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
+          Sales Territory
+        </span>
+        <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.6rem, 2.8vw, 2rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
+          UAE
+        </span>
+      </div>
+      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#DEE0F0', lineHeight: 1.4, marginTop: 'auto' }}>
+        Exclusive sales rights — selected Unitree & Pudu solutions.
+      </span>
+    </div>
+  );
+}
+
+function ShowroomTile() {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '1rem',
+        borderRadius: 18,
+        background:
+          'radial-gradient(ellipse 80% 80% at 0% 100%, rgba(222,224,240,0.18), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))',
+        border: '1px solid rgba(222,224,240,0.22)',
+        color: '#FBFBFD',
+        overflow: 'hidden',
+        minHeight: 170,
+        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+      }}
+    >
+      <svg
+        aria-hidden
+        viewBox="0 0 220 140"
+        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.38 }}
+      >
+        <defs>
+          <linearGradient id="show-floor" x1="0" y1="1" x2="0" y2="0">
+            <stop offset="0%" stopColor="#3a55c4" stopOpacity="0.6" />
+            <stop offset="100%" stopColor="#3a55c4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        {/* perspective floor */}
+        {[0, 1, 2, 3, 4].map((i) => (
+          <line
+            key={i}
+            x1={20 - i * 5}
+            x2={200 + i * 5}
+            y1={70 + i * 14}
+            y2={70 + i * 14}
+            stroke="#DEE0F0"
+            strokeOpacity={0.35 - i * 0.06}
+          />
+        ))}
+        {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+          <line
+            key={`v-${i}`}
+            x1={30 + i * 27}
+            y1={70}
+            x2={30 + i * 36 - 30}
+            y2={140}
+            stroke="#DEE0F0"
+            strokeOpacity={0.2}
+          />
+        ))}
+        <rect x="60" y="40" width="100" height="55" fill="url(#show-floor)" />
+        <rect x="60" y="40" width="100" height="55" fill="none" stroke="#DEE0F0" strokeOpacity="0.4" />
+        <circle cx="110" cy="68" r="6" fill="#DEE0F0" />
+      </svg>
+      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
+          Showroom & Demo
+        </span>
+        <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.4rem, 2.6vw, 1.85rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
+          Dubai
+        </span>
+      </div>
+      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#DEE0F0', lineHeight: 1.4, marginTop: 'auto' }}>
+        Live demos · City Bay Business Center.
      </span>
-      <span style={{ fontSize: '0.7rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase' }}>{label}</span>
    </div>
  );
 }