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,61 +1,394 @@
 'use client';

-const PILLARS = [
-  { title: 'Artificial intelligence', body: 'AI applications tailored for UAE government and private sector clients.' },
-  { title: 'Robotics', body: 'Humanoid, quadruped, service, and delivery robotics deployed across Dubai and the UAE.' },
-  { title: 'Digital transformation', body: 'Automation systems and smart projects that modernize operations end to end.' },
-  { title: 'Training & enablement', body: 'Coding and robotics training programs that prepare the next generation of talent.' },
+import { Brain, Bot, Workflow, GraduationCap, Building2, BadgeCheck } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+type Pillar = {
+  num: string;
+  title: string;
+  body: string;
+  Icon: LucideIcon;
+  accent: string;
+};
+
+const PILLARS: Pillar[] = [
+  {
+    num: '01',
+    title: 'Artificial Intelligence',
+    body: 'AI applications tailored for UAE government and private sector.',
+    Icon: Brain,
+    accent: '#DEE0F0',
+  },
+  {
+    num: '02',
+    title: 'Robotics Deployment',
+    body: 'Humanoid, quadruped, service, and delivery robots across the UAE.',
+    Icon: Bot,
+    accent: '#3a55c4',
+  },
+  {
+    num: '03',
+    title: 'Digital Transformation',
+    body: 'Automation systems and smart projects that modernize operations.',
+    Icon: Workflow,
+    accent: '#BFC3E2',
+  },
+  {
+    num: '04',
+    title: 'Training & Enablement',
+    body: 'Coding and robotics programs preparing the next generation of UAE talent.',
+    Icon: GraduationCap,
+    accent: '#8891C7',
+  },
 ];

 export function CompanyStory() {
  return (
    <div
      style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))',
-        gap: 'clamp(2rem, 5vw, 3rem)',
-        alignItems: 'flex-start',
+        position: 'relative',
+        borderRadius: '2rem',
+        padding: 'clamp(1.75rem, 4vw, 3rem)',
+        overflow: 'hidden',
+        background:
+          'radial-gradient(ellipse 60% 80% at 100% 0%, rgba(58,85,196,0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(222,224,240,0.10), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.94), rgba(5,5,5,0.98))',
+        border: '1px solid rgba(222,224,240,0.12)',
+        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222,224,240,0.06)',
      }}
    >
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-        <span className="eyebrow">About YS Lootah Robotics</span>
-        <h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.03em' }}>
-          <span className="text-gradient" style={{ fontWeight: 500 }}>
-            A trusted UAE technology and robotics partner.
-          </span>
-        </h2>
-        <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
-          YS Lootah Robotics is part of the <strong style={{ color: '#DEE0F0' }}>Yousuf Saeed Lootah Investment Group</strong>. We help organizations innovate, automate, and deploy intelligent robotic solutions across artificial intelligence, robotics, digital transformation, automation systems, and smart projects — for government and private sector clients alike.
-        </p>
-        <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
-          Beyond hardware, we also run coding and robotics training programs that prepare the UAE&apos;s next generation of talent for an automated future.
-        </p>
-        <p style={{ margin: 0, color: '#8891C7', fontSize: '0.82rem', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 }}>
-          In Tech We Innovate · In Trust We Lead
-        </p>
+      {/* blueprint grid background */}
+      <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: '36px 36px',
+          maskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
+          WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      {/* subtle YS watermark */}
+      <div
+        aria-hidden
+        style={{
+          position: 'absolute',
+          top: '8%',
+          right: '6%',
+          fontSize: 'clamp(8rem, 18vw, 14rem)',
+          fontWeight: 800,
+          color: 'transparent',
+          WebkitTextStroke: '1px rgba(222,224,240,0.06)',
+          letterSpacing: '-0.06em',
+          lineHeight: 1,
+          pointerEvents: 'none',
+          userSelect: 'none',
+        }}
+      >
+        YS
      </div>

-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(180px, 100%), 1fr))', gap: '1rem' }}>
-        {PILLARS.map((p, i) => (
-          <div
-            key={p.title}
-            className="card"
+      <div
+        className="cs-grid"
+        style={{
+          position: 'relative',
+          display: 'grid',
+          gap: 'clamp(1.5rem, 3.5vw, 2.5rem)',
+          alignItems: 'stretch',
+        }}
+      >
+        {/* Left — narrative */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', minWidth: 0 }}>
+          <span className="eyebrow">About YS Lootah Robotics</span>
+
+          <h2
            style={{
-              padding: '1.5rem',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.5rem',
-              minHeight: 160,
+              margin: 0,
+              fontSize: 'clamp(1.7rem, 4vw, 2.6rem)',
+              fontWeight: 300,
+              lineHeight: 1.1,
+              letterSpacing: '-0.03em',
            }}
          >
-            <span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7', fontWeight: 700 }}>
-              0{i + 1}
+            <span className="text-gradient" style={{ fontWeight: 500 }}>
+              A trusted UAE technology and robotics partner.
            </span>
-            <h3 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 600, color: '#FBFBFD' }}>{p.title}</h3>
-            <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.55, fontSize: '0.88rem' }}>{p.body}</p>
+          </h2>
+
+          <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.92rem, 1.7vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
+            YS Lootah Robotics is part of the{' '}
+            <span style={{ color: '#FBFBFD', fontWeight: 600 }}>Yousuf Saeed Lootah Investment Group</span>.
+            We deliver AI, robotics, digital transformation, smart projects, and training programs to government and private sector clients across the UAE.
+          </p>
+
+          {/* Group credibility row */}
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '0.25rem' }}>
+            <CredibilityBadge Icon={Building2} text="Yousuf Saeed Lootah Investment Group" />
+            <CredibilityBadge Icon={BadgeCheck} text="Trusted UAE Partner" />
          </div>
-        ))}
+
+          {/* Pull-quote card */}
+          <div
+            style={{
+              marginTop: '0.5rem',
+              padding: '1.25rem 1.25rem 1.25rem 1.5rem',
+              borderRadius: 18,
+              background:
+                'linear-gradient(135deg, rgba(39,63,148,0.18) 0%, rgba(28,27,33,0.7) 60%)',
+              border: '1px solid rgba(222,224,240,0.16)',
+              position: 'relative',
+              overflow: 'hidden',
+            }}
+          >
+            <span
+              aria-hidden
+              style={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                bottom: 0,
+                width: 3,
+                background: 'linear-gradient(180deg, #DEE0F0, #3a55c4)',
+                boxShadow: '0 0 16px rgba(58,85,196,0.7)',
+              }}
+            />
+            <p
+              style={{
+                margin: 0,
+                fontSize: 'clamp(1rem, 1.8vw, 1.15rem)',
+                fontStyle: 'italic',
+                lineHeight: 1.5,
+                color: '#FBFBFD',
+                fontWeight: 300,
+              }}
+            >
+              In Tech We Innovate.
+              <br />
+              <span className="text-gradient-accent" style={{ fontWeight: 600, fontStyle: 'normal' }}>
+                In Trust We Lead.
+              </span>
+            </p>
+            <p
+              style={{
+                margin: '0.6rem 0 0',
+                fontSize: '0.65rem',
+                letterSpacing: '0.28em',
+                textTransform: 'uppercase',
+                color: '#8891C7',
+                fontWeight: 700,
+              }}
+            >
+              YS Lootah Robotics · Dubai · UAE
+            </p>
+          </div>
+        </div>
+
+        {/* Right — capability modules */}
+        <div
+          style={{
+            position: 'relative',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            gap: '0.875rem',
+            minWidth: 0,
+          }}
+        >
+          {/* connector lines */}
+          <div
+            aria-hidden
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '8%',
+              right: '8%',
+              height: 1,
+              background:
+                'linear-gradient(90deg, transparent, rgba(58,85,196,0.45), rgba(222,224,240,0.45), transparent)',
+              filter: 'blur(0.3px)',
+              pointerEvents: 'none',
+            }}
+          />
+          <div
+            aria-hidden
+            style={{
+              position: 'absolute',
+              left: '50%',
+              top: '8%',
+              bottom: '8%',
+              width: 1,
+              background:
+                'linear-gradient(180deg, transparent, rgba(222,224,240,0.4), rgba(58,85,196,0.5), transparent)',
+              filter: 'blur(0.3px)',
+              pointerEvents: 'none',
+            }}
+          />
+
+          {PILLARS.map((p, i) => (
+            <CapabilityTile key={p.num} pillar={p} offset={i % 2 === 1 ? 'down' : 'up'} />
+          ))}
+        </div>
      </div>
+
+      <style jsx>{`
+        .cs-grid {
+          grid-template-columns: 1fr;
+        }
+        @media (min-width: 1024px) {
+          .cs-grid {
+            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+          }
+        }
+      `}</style>
    </div>
  );
 }
+
+function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'down' }) {
+  const { num, title, body, Icon, accent } = pillar;
+  return (
+    <article
+      className="cap-tile"
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.75rem',
+        padding: '1.25rem',
+        borderRadius: 18,
+        background:
+          'linear-gradient(135deg, rgba(28,27,33,0.78), rgba(8,8,10,0.94))',
+        border: '1px solid rgba(222,224,240,0.10)',
+        color: '#FBFBFD',
+        overflow: 'hidden',
+        minHeight: 200,
+        boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+        transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease',
+        transform: offset === 'down' ? 'translateY(8px)' : 'translateY(0)',
+      }}
+    >
+      {/* gradient border ring */}
+      <div
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: 0,
+          borderRadius: 18,
+          padding: 1,
+          background: `linear-gradient(135deg, ${accent}55, transparent 50%, ${accent}33)`,
+          WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+          WebkitMaskComposite: 'xor',
+          maskComposite: 'exclude',
+          pointerEvents: 'none',
+        }}
+      />
+      {/* hover glow */}
+      <span
+        className="cap-tile-glow"
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: '-20%',
+          background: `radial-gradient(circle at 50% 0%, ${accent}33, transparent 60%)`,
+          opacity: 0,
+          transition: 'opacity 0.4s ease',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span
+          style={{
+            width: 42,
+            height: 42,
+            borderRadius: 12,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: `${accent}1A`,
+            border: `1px solid ${accent}55`,
+            boxShadow: `0 0 18px ${accent}33`,
+          }}
+        >
+          <Icon size={20} style={{ color: accent }} />
+        </span>
+        <span
+          style={{
+            fontSize: '0.7rem',
+            fontWeight: 800,
+            letterSpacing: '0.18em',
+            color: '#8891C7',
+            padding: '0.25rem 0.55rem',
+            borderRadius: 999,
+            border: '1px solid rgba(136,145,199,0.3)',
+            background: 'rgba(14,13,18,0.6)',
+          }}
+        >
+          {num}
+        </span>
+      </div>
+
+      <h3
+        style={{
+          margin: 0,
+          fontSize: 'clamp(1.05rem, 1.8vw, 1.2rem)',
+          fontWeight: 600,
+          letterSpacing: '-0.01em',
+          lineHeight: 1.2,
+          position: 'relative',
+        }}
+      >
+        {title}
+      </h3>
+
+      <p
+        style={{
+          margin: 0,
+          fontSize: '0.88rem',
+          lineHeight: 1.55,
+          color: '#BFC3E2',
+          position: 'relative',
+        }}
+      >
+        {body}
+      </p>
+
+      <style jsx>{`
+        .cap-tile:hover {
+          transform: translateY(${offset === 'down' ? '2px' : '-6px'});
+          border-color: ${accent}66;
+          box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7), 0 0 30px ${accent}33;
+        }
+        .cap-tile:hover .cap-tile-glow {
+          opacity: 1;
+        }
+      `}</style>
+    </article>
+  );
+}
+
+function CredibilityBadge({ Icon, text }: { Icon: LucideIcon; text: string }) {
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        padding: '0.45rem 0.8rem',
+        borderRadius: 999,
+        background: 'rgba(14,13,18,0.7)',
+        border: '1px solid rgba(222,224,240,0.18)',
+        color: '#DEE0F0',
+        fontSize: '0.7rem',
+        fontWeight: 700,
+        letterSpacing: '0.16em',
+        textTransform: 'uppercase',
+      }}
+    >
+      <Icon size={13} style={{ color: '#DEE0F0' }} />
+      {text}
+    </span>
+  );
+}