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,61 @@
+'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.' },
+];
+
+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',
+      }}
+    >
+      <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>
+      </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"
+            style={{
+              padding: '1.5rem',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.5rem',
+              minHeight: 160,
+            }}
+          >
+            <span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7', fontWeight: 700 }}>
+              0{i + 1}
+            </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>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}