hazem/yslootahrobotics
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add robotics showcase components and UI enhancements
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source 
- 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.
This commit is contained in:
Najjar\NajjarV02
2026-05-20 17:46:36 +04:00
parent 92cf4aba3b
commit 461a00384c
73 changed files with 2041 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/brands/ys-lootah-robotics-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 356 KiB

public/images/robots/pudu-bellabot.svg
+17 -17
View File
@@ -1,20 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" role="img" aria-label="Pudu BellaBot delivery robot silhouette">
<defs>
<radialGradient id="bg" cx="50%" cy="45%" r="60%">
<stop offset="0%" stop-color="#c4a265" stop-opacity="0.35"/>
<stop offset="60%" stop-color="#0a0907" stop-opacity="0"/>
<stop offset="0%" stop-color="#3a55c4" stop-opacity="0.35"/>
<stop offset="60%" stop-color="#0a0a0c" stop-opacity="0"/>
</radialGradient>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5f1e8"/>
<stop offset="100%" stop-color="#94908a"/>
<stop offset="0%" stop-color="#FBFBFD"/>
<stop offset="100%" stop-color="#8891C7"/>
</linearGradient>
<linearGradient id="screen" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1f1a10"/>
<stop offset="100%" stop-color="#0a0907"/>
<stop offset="0%" stop-color="#1c1b21"/>
<stop offset="100%" stop-color="#0a0a0c"/>
</linearGradient>
<linearGradient id="accent" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e0c896"/>
<stop offset="100%" stop-color="#8b6f47"/>
<stop offset="0%" stop-color="#DEE0F0"/>
<stop offset="100%" stop-color="#273F94"/>
</linearGradient>
</defs>
<rect width="600" height="600" fill="url(#bg)"/>
@@ -22,18 +22,18 @@
<ellipse cx="0" cy="0" rx="160" ry="14" fill="#000" opacity="0.55"/>
</g>
<g transform="translate(300 100)">
<rect x="-120" y="0" width="240" height="120" rx="36" fill="url(#body)" stroke="#3a2f1c" stroke-width="2"/>
<rect x="-120" y="0" width="240" height="120" rx="36" fill="url(#body)" stroke="#3a3d52" stroke-width="2"/>
<rect x="-100" y="20" width="200" height="80" rx="22" fill="url(#screen)"/>
<circle cx="-44" cy="60" r="14" fill="url(#accent)"/>
<circle cx="44" cy="60" r="14" fill="url(#accent)"/>
<path d="M -30 88 Q 0 78 30 88" stroke="url(#accent)" stroke-width="4" fill="none" stroke-linecap="round"/>
<rect x="-140" y="140" width="280" height="14" rx="6" fill="#5a4a30"/>
<rect x="-128" y="170" width="256" height="50" rx="12" fill="url(#body)" stroke="#3a2f1c" stroke-width="2"/>
<rect x="-128" y="240" width="256" height="50" rx="12" fill="url(#body)" stroke="#3a2f1c" stroke-width="2"/>
<rect x="-128" y="310" width="256" height="50" rx="12" fill="url(#body)" stroke="#3a2f1c" stroke-width="2"/>
<rect x="-100" y="370" width="200" height="14" rx="6" fill="#3a2f1c"/>
<circle cx="-72" cy="384" r="20" fill="#0a0907" stroke="#5a4a30" stroke-width="2"/>
<circle cx="72" cy="384" r="20" fill="#0a0907" stroke="#5a4a30" stroke-width="2"/>
<rect x="-140" y="140" width="280" height="14" rx="6" fill="#5a5e7a"/>
<rect x="-128" y="170" width="256" height="50" rx="12" fill="url(#body)" stroke="#3a3d52" stroke-width="2"/>
<rect x="-128" y="240" width="256" height="50" rx="12" fill="url(#body)" stroke="#3a3d52" stroke-width="2"/>
<rect x="-128" y="310" width="256" height="50" rx="12" fill="url(#body)" stroke="#3a3d52" stroke-width="2"/>
<rect x="-100" y="370" width="200" height="14" rx="6" fill="#3a3d52"/>
<circle cx="-72" cy="384" r="20" fill="#0a0a0c" stroke="#5a5e7a" stroke-width="2"/>
<circle cx="72" cy="384" r="20" fill="#0a0a0c" stroke="#5a5e7a" stroke-width="2"/>
</g>
<text x="50%" y="96%" text-anchor="middle" fill="#94908a" font-family="Inter, sans-serif" font-size="20" letter-spacing="6">PUDU BELLABOT</text>
<text x="50%" y="96%" text-anchor="middle" fill="#8891C7" font-family="Inter, sans-serif" font-size="20" letter-spacing="6">PUDU BELLABOT</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

public/images/robots/pudu-cc1.svg
+15 -15
View File
@@ -1,31 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" role="img" aria-label="Pudu CC1 cleaning robot silhouette">
<defs>
<radialGradient id="bg" cx="50%" cy="55%" r="60%">
<stop offset="0%" stop-color="#c4a265" stop-opacity="0.32"/>
<stop offset="60%" stop-color="#0a0907" stop-opacity="0"/>
<stop offset="0%" stop-color="#3a55c4" stop-opacity="0.32"/>
<stop offset="60%" stop-color="#0a0a0c" stop-opacity="0"/>
</radialGradient>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5f1e8"/>
<stop offset="100%" stop-color="#94908a"/>
<stop offset="0%" stop-color="#FBFBFD"/>
<stop offset="100%" stop-color="#8891C7"/>
</linearGradient>
<linearGradient id="accent" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e0c896"/>
<stop offset="100%" stop-color="#8b6f47"/>
<stop offset="0%" stop-color="#DEE0F0"/>
<stop offset="100%" stop-color="#273F94"/>
</linearGradient>
</defs>
<rect width="600" height="600" fill="url(#bg)"/>
<g transform="translate(300 360)">
<ellipse cx="0" cy="120" rx="200" ry="20" fill="#000" opacity="0.55"/>
<rect x="-180" y="-180" width="360" height="240" rx="40" fill="url(#body)" stroke="#3a2f1c" stroke-width="2"/>
<rect x="-160" y="-160" width="160" height="100" rx="18" fill="#0a0907"/>
<rect x="-180" y="-180" width="360" height="240" rx="40" fill="url(#body)" stroke="#3a3d52" stroke-width="2"/>
<rect x="-160" y="-160" width="160" height="100" rx="18" fill="#0a0a0c"/>
<rect x="-150" y="-150" width="140" height="14" rx="6" fill="url(#accent)" opacity="0.9"/>
<rect x="-150" y="-130" width="100" height="10" rx="4" fill="#5a4a30"/>
<rect x="-150" y="-110" width="120" height="10" rx="4" fill="#5a4a30"/>
<circle cx="120" cy="-110" r="34" fill="#1f1a10" stroke="#5a4a30" stroke-width="2"/>
<rect x="-150" y="-130" width="100" height="10" rx="4" fill="#5a5e7a"/>
<rect x="-150" y="-110" width="120" height="10" rx="4" fill="#5a5e7a"/>
<circle cx="120" cy="-110" r="34" fill="#1c1b21" stroke="#5a5e7a" stroke-width="2"/>
<circle cx="120" cy="-110" r="14" fill="url(#accent)"/>
<rect x="-170" y="80" width="340" height="30" rx="8" fill="#0a0907"/>
<circle cx="-130" cy="110" r="22" fill="#0a0907" stroke="#5a4a30" stroke-width="2"/>
<circle cx="130" cy="110" r="22" fill="#0a0907" stroke="#5a4a30" stroke-width="2"/>
<rect x="-170" y="80" width="340" height="30" rx="8" fill="#0a0a0c"/>
<circle cx="-130" cy="110" r="22" fill="#0a0a0c" stroke="#5a5e7a" stroke-width="2"/>
<circle cx="130" cy="110" r="22" fill="#0a0a0c" stroke="#5a5e7a" stroke-width="2"/>
</g>
<text x="50%" y="96%" text-anchor="middle" fill="#94908a" font-family="Inter, sans-serif" font-size="20" letter-spacing="6">PUDU CC1 CLEANING ROBOT</text>
<text x="50%" y="96%" text-anchor="middle" fill="#8891C7" font-family="Inter, sans-serif" font-size="20" letter-spacing="6">PUDU CC1 CLEANING ROBOT</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

public/images/robots/pudu-kettybot.svg
+14 -14
View File
@@ -1,35 +1,35 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" role="img" aria-label="Pudu KettyBot service robot silhouette">
<defs>
<radialGradient id="bg" cx="50%" cy="45%" r="60%">
<stop offset="0%" stop-color="#c4a265" stop-opacity="0.32"/>
<stop offset="60%" stop-color="#0a0907" stop-opacity="0"/>
<stop offset="0%" stop-color="#3a55c4" stop-opacity="0.32"/>
<stop offset="60%" stop-color="#0a0a0c" stop-opacity="0"/>
</radialGradient>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5f1e8"/>
<stop offset="100%" stop-color="#94908a"/>
<stop offset="0%" stop-color="#FBFBFD"/>
<stop offset="100%" stop-color="#8891C7"/>
</linearGradient>
<linearGradient id="screen" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#0a0907"/>
<stop offset="100%" stop-color="#3a2f1c"/>
<stop offset="0%" stop-color="#0a0a0c"/>
<stop offset="100%" stop-color="#3a3d52"/>
</linearGradient>
<linearGradient id="accent" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e0c896"/>
<stop offset="100%" stop-color="#c4a265"/>
<stop offset="0%" stop-color="#DEE0F0"/>
<stop offset="100%" stop-color="#3a55c4"/>
</linearGradient>
</defs>
<rect width="600" height="600" fill="url(#bg)"/>
<g transform="translate(300 110)">
<rect x="-110" y="0" width="220" height="280" rx="28" fill="url(#body)" stroke="#3a2f1c" stroke-width="2"/>
<rect x="-110" y="0" width="220" height="280" rx="28" fill="url(#body)" stroke="#3a3d52" stroke-width="2"/>
<rect x="-92" y="22" width="184" height="240" rx="18" fill="url(#screen)"/>
<g transform="translate(0 110)">
<circle cx="-30" cy="0" r="12" fill="url(#accent)"/>
<circle cx="30" cy="0" r="12" fill="url(#accent)"/>
<path d="M -22 30 Q 0 18 22 30" stroke="url(#accent)" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
<rect x="-130" y="300" width="260" height="14" rx="6" fill="#5a4a30"/>
<path d="M -120 320 L 120 320 L 100 460 L -100 460 Z" fill="url(#body)" stroke="#3a2f1c" stroke-width="2"/>
<circle cx="-70" cy="460" r="22" fill="#0a0907" stroke="#5a4a30" stroke-width="2"/>
<circle cx="70" cy="460" r="22" fill="#0a0907" stroke="#5a4a30" stroke-width="2"/>
<rect x="-130" y="300" width="260" height="14" rx="6" fill="#5a5e7a"/>
<path d="M -120 320 L 120 320 L 100 460 L -100 460 Z" fill="url(#body)" stroke="#3a3d52" stroke-width="2"/>
<circle cx="-70" cy="460" r="22" fill="#0a0a0c" stroke="#5a5e7a" stroke-width="2"/>
<circle cx="70" cy="460" r="22" fill="#0a0a0c" stroke="#5a5e7a" stroke-width="2"/>
</g>
<text x="50%" y="96%" text-anchor="middle" fill="#94908a" font-family="Inter, sans-serif" font-size="20" letter-spacing="6">PUDU KETTYBOT</text>
<text x="50%" y="96%" text-anchor="middle" fill="#8891C7" font-family="Inter, sans-serif" font-size="20" letter-spacing="6">PUDU KETTYBOT</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

public/images/robots/pudu-pudubot.svg
+14 -14
View File
@@ -1,29 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" role="img" aria-label="Pudu D-Series industrial delivery robot silhouette">
<defs>
<radialGradient id="bg" cx="50%" cy="55%" r="60%">
<stop offset="0%" stop-color="#c4a265" stop-opacity="0.32"/>
<stop offset="60%" stop-color="#0a0907" stop-opacity="0"/>
<stop offset="0%" stop-color="#3a55c4" stop-opacity="0.32"/>
<stop offset="60%" stop-color="#0a0a0c" stop-opacity="0"/>
</radialGradient>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5f1e8"/>
<stop offset="100%" stop-color="#6b6862"/>
<stop offset="0%" stop-color="#FBFBFD"/>
<stop offset="100%" stop-color="#6a73a5"/>
</linearGradient>
<linearGradient id="accent" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e0c896"/>
<stop offset="100%" stop-color="#c4a265"/>
<stop offset="0%" stop-color="#DEE0F0"/>
<stop offset="100%" stop-color="#3a55c4"/>
</linearGradient>
</defs>
<rect width="600" height="600" fill="url(#bg)"/>
<g transform="translate(300 380)">
<ellipse cx="0" cy="120" rx="200" ry="18" fill="#000" opacity="0.55"/>
<rect x="-180" y="-220" width="360" height="320" rx="36" fill="url(#body)" stroke="#3a2f1c" stroke-width="2"/>
<rect x="-160" y="-200" width="320" height="40" rx="10" fill="#0a0907"/>
<rect x="-160" y="-140" width="320" height="80" rx="12" fill="#1f1a10"/>
<rect x="-160" y="-40" width="320" height="80" rx="12" fill="#1f1a10"/>
<rect x="-180" y="-220" width="360" height="320" rx="36" fill="url(#body)" stroke="#3a3d52" stroke-width="2"/>
<rect x="-160" y="-200" width="320" height="40" rx="10" fill="#0a0a0c"/>
<rect x="-160" y="-140" width="320" height="80" rx="12" fill="#1c1b21"/>
<rect x="-160" y="-40" width="320" height="80" rx="12" fill="#1c1b21"/>
<rect x="-160" y="60" width="320" height="30" rx="10" fill="url(#accent)" opacity="0.85"/>
<rect x="-180" y="100" width="360" height="20" rx="8" fill="#0a0907"/>
<circle cx="-130" cy="120" r="26" fill="#0a0907" stroke="#5a4a30" stroke-width="2"/>
<circle cx="130" cy="120" r="26" fill="#0a0907" stroke="#5a4a30" stroke-width="2"/>
<rect x="-180" y="100" width="360" height="20" rx="8" fill="#0a0a0c"/>
<circle cx="-130" cy="120" r="26" fill="#0a0a0c" stroke="#5a5e7a" stroke-width="2"/>
<circle cx="130" cy="120" r="26" fill="#0a0a0c" stroke="#5a5e7a" stroke-width="2"/>
</g>
<text x="50%" y="96%" text-anchor="middle" fill="#94908a" font-family="Inter, sans-serif" font-size="20" letter-spacing="6">PUDU D-SERIES</text>
<text x="50%" y="96%" text-anchor="middle" fill="#8891C7" font-family="Inter, sans-serif" font-size="20" letter-spacing="6">PUDU D-SERIES</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB