feat: add robotics showcase components and UI enhancements

- Introduced FounderSection component to highlight leadership and vision. - Created ServicesGrid component to display various robotics services offered. - Developed RoboticsScrollShowcase for showcasing robots with interactive elements. - Implemented RoboticsSplineShowcase featuring a 3D Spline scene for enhanced user experience. - Added reusable Card component for consistent styling across sections. - Integrated ContainerScroll for animated scrolling effects in the showcase. - Built SplineScene component for lazy loading Spline 3D scenes. - Added Spotlight component for interactive hover effects. - Created utility function for class name merging to streamline styling.
2026-05-20 17:46:36 +04:00
parent 92cf4aba3b
commit 461a00384c
73 changed files with 2041 additions and 582 deletions
@@ -0,0 +1,88 @@
+'use client';
+
+export function FounderSection() {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        borderRadius: '2rem',
+        padding: 'clamp(2rem, 5vw, 3.5rem)',
+        overflow: 'hidden',
+        background:
+          'radial-gradient(ellipse 50% 70% at 100% 0%, rgba(222, 224, 240,0.15), 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.28)',
+        boxShadow: '0 30px 100px rgba(0,0,0,0.7)',
+      }}
+    >
+      <div
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background:
+            'linear-gradient(rgba(39, 63, 148,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.04) 1px, transparent 1px)',
+          backgroundSize: '48px 48px',
+          maskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%)',
+          WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <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: '1rem' }}>
+          <span className="eyebrow">Leadership · YS Lootah Group</span>
+          <h2 style={{ margin: 0, fontSize: 'clamp(1.6rem, 3.8vw, 2.4rem)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
+            <span className="text-gradient" style={{ fontWeight: 500 }}>
+              Mr. Yousif Bin Saeed Al Lootah
+            </span>
+          </h2>
+          <p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.85rem', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600 }}>
+            Founder · Yousuf Saeed Lootah Investment Group
+          </p>
+          <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
+            Under the leadership of Mr. Yousif Bin Saeed Al Lootah, the group has championed innovation, trust, and long-term value creation across the UAE — from technology and robotics to investment and enterprise. YS Lootah Robotics carries that vision into the future of intelligent automation.
+          </p>
+          <p style={{ margin: 0, color: '#8891C7', lineHeight: 1.7, fontSize: '0.92rem' }}>
+            <em>“Innovating today for a smarter tomorrow.”</em>
+          </p>
+        </div>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: '1rem',
+          }}
+        >
+          <Pillar value="Group" label="Yousuf Saeed Lootah Investment Group" />
+          <Pillar value="AI" label="Artificial intelligence & automation" />
+          <Pillar value="UAE" label="Trusted technology partner" />
+          <Pillar value="Future" label="Smart, autonomous, intelligent" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Pillar({ value, label }: { value: string; label: string }) {
+  return (
+    <div
+      style={{
+        padding: '1.25rem',
+        borderRadius: 14,
+        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)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.4rem',
+        minHeight: 110,
+        justifyContent: 'center',
+      }}
+    >
+      <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.2rem, 2.2vw, 1.5rem)', fontWeight: 700, letterSpacing: '-0.01em' }}>
+        {value}
+      </span>
+      <span style={{ fontSize: '0.72rem', color: '#8891C7', letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.45 }}>{label}</span>
+    </div>
+  );
+}