Refactor code structure for improved readability and maintainability
This commit is contained in:
Najjar\NajjarV02
parent
b5876aead5
commit
7c3b42e651
@ -1,7 +1,18 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(npx next *)"
|
||||
"Bash(npx next *)",
|
||||
"WebFetch(domain:www.unitree.com)",
|
||||
"WebFetch(domain:www.pudurobotics.com)",
|
||||
"WebFetch(domain:cdn.unitree.com)",
|
||||
"Bash(curl -s \"https://www.unitree.com/\")",
|
||||
"Bash(curl -sL \"https://www.unitree.com/\" -A \"Mozilla/5.0 \\(Windows NT 10.0; Win64; x64\\) AppleWebKit/537.36\")",
|
||||
"Bash(curl -sL \"https://www.unitree.com/\" -A \"Mozilla/5.0 \\(Windows NT 10.0; Win64; x64\\) AppleWebKit/537.36 \\(KHTML, like Gecko\\) Chrome/120.0.0.0 Safari/537.36\")",
|
||||
"Bash(curl -sL \"https://www.unitree.com/_nuxt/entry.DnivrlYq.css\" -A \"Mozilla/5.0\")",
|
||||
"Bash(curl -sL \"https://www.unitree.com/_nuxt/default.awSnd8AZ.css\" -A \"Mozilla/5.0\")",
|
||||
"Bash(curl -sL \"https://www.unitree.com/images/37d3d40c1272402a9c363a50b405276d.svg\" -A \"Mozilla/5.0\" -o \"C:\\\\Users\\\\NajjarV02\\\\Desktop\\\\yslootahrobotics\\\\public\\\\brands\\\\unitree-logo-white.svg\")",
|
||||
"Bash(curl -sL \"https://www.unitree.com/images/0079f8938336436e955ea3a98c4e1e59.svg\" -A \"Mozilla/5.0\" -o \"C:\\\\Users\\\\NajjarV02\\\\Desktop\\\\yslootahrobotics\\\\public\\\\brands\\\\unitree-logo-dark.svg\")",
|
||||
"PowerShell(Copy-Item *)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
17
public/brands/pudu-logo.svg
Normal file
17
public/brands/pudu-logo.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<svg width="98" height="26" viewBox="0 0 98 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_7615_2164)">
|
||||
<path d="M90.9858 21.7754C93.4836 21.7754 98.0003 20.6516 98.0003 14.5274V4.22375H94.6635V14.3776C94.6635 17.7951 92.1419 18.4216 90.7494 18.4216H90.1531C88.7591 18.4216 86.2391 17.7951 86.2391 14.3776V4.22375H82.9023V14.5274C82.9023 20.6532 87.419 21.7754 89.9168 21.7754H90.9858Z" fill="#FFFFFF"/>
|
||||
<path d="M43.2211 10.9441C43.2211 11.985 42.758 13.8659 40.2317 13.8659H34.7951V7.57755H40.2317C42.758 7.57755 43.2211 9.46007 43.2211 10.4994V10.9441ZM46.5579 10.2619C46.5579 8.11154 45.6 4.22375 40.3823 4.22375H31.46V21.6367H34.7967V17.2197H40.3823C45.6016 17.2197 46.5579 13.3319 46.5579 11.1816V10.2619Z" fill="#FFFFFF"/>
|
||||
<path d="M80.9788 13.5455C80.9788 16.4259 79.6958 21.6351 72.705 21.6351H72.3181H72.7463H65.8809V4.22375H72.7463H72.3181H72.705C79.6958 4.22375 80.9788 9.43298 80.9788 12.3133V13.5455ZM77.642 12.5509C77.642 10.7799 76.8538 7.57755 72.556 7.57755H69.2176V18.2813H72.556C76.8538 18.2813 77.642 15.079 77.642 13.308V12.5509Z" fill="#FFFFFF"/>
|
||||
<path d="M56.4887 21.7754C58.9865 21.7754 63.5032 20.6516 63.5032 14.5274V4.22375H60.1664V14.3776C60.1664 17.7951 57.6448 18.4216 56.2524 18.4216H55.6561C54.2621 18.4216 51.742 17.7951 51.742 14.3776V4.22375H48.4053V14.5274C48.4053 20.6532 52.922 21.7754 55.4198 21.7754H56.4887Z" fill="#FFFFFF"/>
|
||||
<path d="M0.114186 25.9884L6.14225 22.4912C6.18982 22.4641 6.21837 22.4131 6.21837 22.3589V0.0762157C6.21837 0.0172373 6.15493 -0.0194248 6.10418 0.0108613L0.0761239 3.50812C0.0285464 3.53521 0 3.58622 0 3.64042V25.9231C0 25.982 0.0634366 26.0187 0.114186 25.9884Z" fill="#FFFFFF"/>
|
||||
<path d="M16.5444 25.9884L22.5724 22.4912C22.62 22.4641 22.6485 22.4131 22.6485 22.3589V0.0762157C22.6485 0.0172373 22.5851 -0.0194248 22.5344 0.0108613L16.5063 3.50812C16.4587 3.53521 16.4302 3.58622 16.4302 3.64042V25.9231C16.4302 25.982 16.4936 26.0187 16.5444 25.9884Z" fill="#FFFFFF"/>
|
||||
<path d="M14.4332 3.64042V9.94791C14.4332 10.0021 14.4047 10.0531 14.3571 10.0802L8.32903 13.5775C8.27828 13.6062 8.21484 13.5695 8.21484 13.5121V0.0762157C8.21484 0.0172373 8.27828 -0.0194248 8.32903 0.0108613L14.3571 3.50812C14.4047 3.53521 14.4332 3.58622 14.4332 3.64042Z" fill="#FFFFFF"/>
|
||||
<path d="M8.21484 16.0514V22.3605C8.21484 22.4147 8.24339 22.4657 8.29097 22.4928L14.319 25.9901C14.3698 26.0188 14.4332 25.9821 14.4332 25.9247V12.4872C14.4332 12.4282 14.3698 12.3916 14.319 12.4219L8.29097 15.9191C8.24339 15.9462 8.21484 15.9972 8.21484 16.0514Z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_7615_2164">
|
||||
<rect width="98" height="26" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
44
public/brands/unitree-logo-dark.svg
Normal file
44
public/brands/unitree-logo-dark.svg
Normal file
@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 870.93 196.18" style="enable-background:new 0 0 870.93 196.18;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#040000;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#040000;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M336.28,15.85l-28.22,113.64c-1.5,6.05-2.68,8.25-4.43,10.48c-1.72,2.2-3.89,3.93-6.4,5.13
|
||||
c-2.51,1.18-4.86,1.81-10.92,1.81h-19.2l32.55-131.06C299.66,15.85,336.28,15.85,336.28,15.85z"/>
|
||||
<path class="st0" d="M144.8,50.55l-18.94,76.29c-1.73,6.98-3.07,9.5-5.1,12.07c-2.01,2.56-4.48,4.55-7.39,5.94
|
||||
c-2.9,1.35-5.61,2.08-12.58,2.08H29.16c-6.98,0-9.32-0.73-11.55-2.08c-2.22-1.39-3.71-3.37-4.44-5.94
|
||||
c-0.75-2.56-0.84-5.09,0.9-12.07l18.94-76.29h36.62l-18.11,72.91c-0.69,2.79-0.65,3.8-0.35,4.84c0.29,1.02,0.88,1.81,1.78,2.37
|
||||
c0.87,0.54,1.82,0.83,4.61,0.83h22.47c2.79,0,3.89-0.29,5.02-0.83c1.18-0.56,2.17-1.35,2.96-2.37c0.82-1.04,1.36-2.04,2.05-4.84
|
||||
l18.11-72.91C108.17,50.55,144.8,50.55,144.8,50.55z"/>
|
||||
<path class="st0" d="M587.04,147.17h-40.19l-29.7-57.44h30.11c2.79,0,3.87-0.29,5.02-0.83c0.48-0.23,0.93-0.5,1.34-0.81
|
||||
c0.61-0.44,1.15-0.96,1.62-1.56c0.79-1.02,1.34-2.04,2.03-4.84l1.79-7.21c0.69-2.79,0.65-3.8,0.37-4.82
|
||||
c-0.18-0.6-0.45-1.14-0.85-1.56c-0.25-0.33-0.56-0.6-0.94-0.81c-0.89-0.54-1.82-0.83-4.61-0.83h-30.11l-19.98,80.45h-36.62
|
||||
l23.93-96.37h94.23c6.07,0,8.1,0.62,10.02,1.79c1.92,1.19,3.22,2.93,3.85,5.15c0.11,0.35,0.19,0.71,0.25,1.08
|
||||
c0.39,1.93,0.24,4.3-1.02,9.39l-4.99,20.08c-1.26,5.09-2.3,7.46-3.64,9.39c-0.25,0.37-0.51,0.73-0.79,1.08
|
||||
c-1.73,2.22-3.89,3.95-6.4,5.15c-2.51,1.18-4.84,1.79-10.91,1.79h-7.79l0,0L587.04,147.17z"/>
|
||||
<path class="st0" d="M647.58,87.17h75.17l-4.31,17.35h-67.13c-2.79,0-3.87,0.29-5.02,0.83c-1.16,0.56-2.17,1.35-2.96,2.37
|
||||
c-0.81,1.02-1.36,2.04-2.05,4.84l-4.23,17.02h75.17l-4.31,17.35h-91.69c-7,0-9.34-0.73-11.55-2.08c-2.22-1.39-3.73-3.37-4.46-5.94
|
||||
c-0.73-2.56-0.84-5.09,0.9-12.07l14.62-58.88c1.5-6.05,2.68-8.25,4.43-10.47c1.73-2.22,3.89-3.95,6.4-5.15
|
||||
c2.51-1.18,4.86-1.79,10.91-1.79h94.36l-4.31,17.35H660.4c-2.79,0-3.87,0.29-5.02,0.83c-1.16,0.56-2.17,1.35-2.96,2.37
|
||||
c-0.81,1.02-1.36,2.04-2.05,4.84L647.58,87.17z"/>
|
||||
<path class="st0" d="M777.75,87.17h75.17l-4.31,17.35h-67.13c-2.79,0-3.89,0.29-5.04,0.83c-1.16,0.56-2.15,1.35-2.96,2.37
|
||||
c-0.79,1.02-1.34,2.04-2.03,4.84l-4.23,17.02h75.17l-4.31,17.35h-91.71c-7,0-9.34-0.73-11.55-2.08c-2.22-1.39-3.73-3.37-4.44-5.94
|
||||
c-0.75-2.56-0.84-5.09,0.9-12.07l14.62-58.88c1.5-6.05,2.67-8.25,4.41-10.47c1.73-2.22,3.89-3.95,6.42-5.15
|
||||
c2.49-1.18,4.84-1.79,10.89-1.79H862l-4.31,17.35h-67.13c-2.79,0-3.89,0.29-5.04,0.83c-1.16,0.56-2.15,1.35-2.96,2.37
|
||||
c-0.79,1.02-1.34,2.04-2.03,4.84L777.75,87.17z"/>
|
||||
<g>
|
||||
<path class="st1" d="M274.41,50.55l-23.93,96.37h-25.33c-6.07,0-8.09-0.64-10.02-1.81c-0.25-0.15-0.48-0.31-0.7-0.5
|
||||
c-1.3-0.96-2.27-2.25-2.88-3.78c0.01-0.04,0-0.06-0.02-0.08l-20.92-55.47l-15.31,61.64h-36.62l23.93-96.37h25.33
|
||||
c6.05,0,8.1,0.62,10.02,1.79c0.25,0.15,0.48,0.31,0.7,0.5c1.32,0.98,2.27,2.25,2.87,3.82c0.01,0.02,0.01,0.02,0.03,0.04
|
||||
l20.92,55.47l15.3-61.62H274.41z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon class="st0" points="473.07,50.55 468.52,68.86 422.27,68.86 394.27,181.61 357.65,181.61 385.64,68.86 339.39,68.86
|
||||
343.93,50.55 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
44
public/brands/unitree-logo-white.svg
Normal file
44
public/brands/unitree-logo-white.svg
Normal file
@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 870.93 196.18" style="enable-background:new 0 0 870.93 196.18;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M337,15.2l-27.95,112.55c-1.49,5.99-2.66,8.17-4.39,10.38c-1.7,2.18-3.85,3.89-6.34,5.08
|
||||
c-2.48,1.16-4.82,1.79-10.81,1.79h-19.01L300.73,15.2H337z"/>
|
||||
<path class="st0" d="M147.34,49.56l-18.76,75.56c-1.72,6.91-3.04,9.41-5.05,11.95c-1.99,2.54-4.44,4.51-7.32,5.88
|
||||
c-2.87,1.34-5.55,2.06-12.46,2.06H32.81c-6.91,0-9.23-0.73-11.44-2.06c-2.2-1.37-3.68-3.34-4.4-5.88
|
||||
c-0.74-2.54-0.83-5.04,0.89-11.95l18.76-75.56h36.27l-17.93,72.22c-0.69,2.77-0.65,3.76-0.35,4.79c0.28,1.01,0.87,1.79,1.77,2.35
|
||||
c0.86,0.53,1.8,0.82,4.57,0.82H83.2c2.77,0,3.85-0.29,4.98-0.82c1.17-0.55,2.15-1.34,2.93-2.35c0.81-1.03,1.34-2.02,2.03-4.79
|
||||
l17.93-72.22H147.34z"/>
|
||||
<path class="st0" d="M585.36,145.26h-39.8l-29.42-56.89h29.82c2.77,0,3.83-0.29,4.98-0.82c0.48-0.23,0.93-0.5,1.33-0.8
|
||||
c0.61-0.44,1.13-0.95,1.61-1.55c0.79-1.01,1.32-2.02,2.01-4.79l1.77-7.14c0.69-2.77,0.65-3.76,0.36-4.77
|
||||
c-0.18-0.59-0.45-1.13-0.84-1.55c-0.24-0.32-0.56-0.59-0.93-0.8c-0.88-0.53-1.8-0.82-4.57-0.82h-29.82l-19.79,79.68h-36.27
|
||||
l23.7-95.45h93.33c6.01,0,8.02,0.61,9.92,1.78c1.9,1.18,3.19,2.9,3.81,5.1c0.11,0.34,0.19,0.71,0.25,1.07
|
||||
c0.39,1.91,0.24,4.26-1.01,9.3l-4.94,19.89c-1.25,5.04-2.27,7.39-3.61,9.3c-0.24,0.36-0.5,0.73-0.78,1.07
|
||||
c-1.71,2.2-3.85,3.91-6.34,5.1c-2.48,1.16-4.79,1.78-10.81,1.78h-7.71l0,0L585.36,145.26z"/>
|
||||
<path class="st0" d="M645.32,85.83h74.45l-4.27,17.18h-66.49c-2.77,0-3.83,0.29-4.98,0.82c-1.15,0.55-2.15,1.34-2.93,2.35
|
||||
c-0.8,1.01-1.34,2.02-2.03,4.79l-4.19,16.86h74.45l-4.27,17.18h-90.81c-6.93,0-9.25-0.73-11.44-2.06c-2.2-1.37-3.69-3.34-4.42-5.88
|
||||
c-0.72-2.54-0.83-5.04,0.89-11.95l14.48-58.32c1.49-5.99,2.66-8.17,4.39-10.37c1.71-2.2,3.85-3.91,6.34-5.1
|
||||
c2.48-1.16,4.81-1.78,10.81-1.78h93.46l-4.27,17.18h-66.49c-2.77,0-3.83,0.29-4.98,0.82c-1.15,0.55-2.15,1.34-2.93,2.35
|
||||
c-0.8,1.01-1.34,2.02-2.03,4.79L645.32,85.83z"/>
|
||||
<path class="st0" d="M774.26,85.83h74.45l-4.27,17.18h-66.49c-2.77,0-3.85,0.29-5,0.82c-1.15,0.55-2.13,1.34-2.93,2.35
|
||||
c-0.79,1.01-1.32,2.02-2.01,4.79l-4.19,16.86h74.45l-4.27,17.18h-90.83c-6.93,0-9.25-0.73-11.44-2.06c-2.2-1.37-3.69-3.34-4.4-5.88
|
||||
c-0.74-2.54-0.83-5.04,0.89-11.95l14.48-58.32c1.49-5.99,2.64-8.17,4.37-10.37c1.71-2.2,3.85-3.91,6.36-5.1
|
||||
c2.47-1.16,4.79-1.78,10.79-1.78h93.48l-4.27,17.18h-66.49c-2.77,0-3.85,0.29-5,0.82c-1.15,0.55-2.13,1.34-2.93,2.35
|
||||
c-0.79,1.01-1.32,2.02-2.01,4.79L774.26,85.83z"/>
|
||||
<g>
|
||||
<path class="st1" d="M275.72,49.56l-23.7,95.45h-25.08c-6.01,0-8.01-0.63-9.92-1.79c-0.25-0.15-0.48-0.31-0.7-0.5
|
||||
c-1.29-0.95-2.25-2.23-2.85-3.74c0.01-0.04,0-0.06-0.02-0.08l-20.72-54.94l-15.16,61.05H141.3L165,49.56h25.08
|
||||
c5.99,0,8.02,0.61,9.92,1.78c0.25,0.15,0.48,0.31,0.7,0.5c1.3,0.97,2.25,2.23,2.84,3.78c0.01,0.02,0.01,0.02,0.03,0.04
|
||||
l20.72,54.94l15.16-61.03H275.72z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon class="st0" points="472.48,49.56 467.98,67.7 422.16,67.7 394.43,179.37 358.16,179.37 385.89,67.7 340.08,67.7
|
||||
344.58,49.56 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
44
public/brands/unitree-logo.svg
Normal file
44
public/brands/unitree-logo.svg
Normal file
@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 870.93 196.18" style="enable-background:new 0 0 870.93 196.18;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M337,15.2l-27.95,112.55c-1.49,5.99-2.66,8.17-4.39,10.38c-1.7,2.18-3.85,3.89-6.34,5.08
|
||||
c-2.48,1.16-4.82,1.79-10.81,1.79h-19.01L300.73,15.2H337z"/>
|
||||
<path class="st0" d="M147.34,49.56l-18.76,75.56c-1.72,6.91-3.04,9.41-5.05,11.95c-1.99,2.54-4.44,4.51-7.32,5.88
|
||||
c-2.87,1.34-5.55,2.06-12.46,2.06H32.81c-6.91,0-9.23-0.73-11.44-2.06c-2.2-1.37-3.68-3.34-4.4-5.88
|
||||
c-0.74-2.54-0.83-5.04,0.89-11.95l18.76-75.56h36.27l-17.93,72.22c-0.69,2.77-0.65,3.76-0.35,4.79c0.28,1.01,0.87,1.79,1.77,2.35
|
||||
c0.86,0.53,1.8,0.82,4.57,0.82H83.2c2.77,0,3.85-0.29,4.98-0.82c1.17-0.55,2.15-1.34,2.93-2.35c0.81-1.03,1.34-2.02,2.03-4.79
|
||||
l17.93-72.22H147.34z"/>
|
||||
<path class="st0" d="M585.36,145.26h-39.8l-29.42-56.89h29.82c2.77,0,3.83-0.29,4.98-0.82c0.48-0.23,0.93-0.5,1.33-0.8
|
||||
c0.61-0.44,1.13-0.95,1.61-1.55c0.79-1.01,1.32-2.02,2.01-4.79l1.77-7.14c0.69-2.77,0.65-3.76,0.36-4.77
|
||||
c-0.18-0.59-0.45-1.13-0.84-1.55c-0.24-0.32-0.56-0.59-0.93-0.8c-0.88-0.53-1.8-0.82-4.57-0.82h-29.82l-19.79,79.68h-36.27
|
||||
l23.7-95.45h93.33c6.01,0,8.02,0.61,9.92,1.78c1.9,1.18,3.19,2.9,3.81,5.1c0.11,0.34,0.19,0.71,0.25,1.07
|
||||
c0.39,1.91,0.24,4.26-1.01,9.3l-4.94,19.89c-1.25,5.04-2.27,7.39-3.61,9.3c-0.24,0.36-0.5,0.73-0.78,1.07
|
||||
c-1.71,2.2-3.85,3.91-6.34,5.1c-2.48,1.16-4.79,1.78-10.81,1.78h-7.71l0,0L585.36,145.26z"/>
|
||||
<path class="st0" d="M645.32,85.83h74.45l-4.27,17.18h-66.49c-2.77,0-3.83,0.29-4.98,0.82c-1.15,0.55-2.15,1.34-2.93,2.35
|
||||
c-0.8,1.01-1.34,2.02-2.03,4.79l-4.19,16.86h74.45l-4.27,17.18h-90.81c-6.93,0-9.25-0.73-11.44-2.06c-2.2-1.37-3.69-3.34-4.42-5.88
|
||||
c-0.72-2.54-0.83-5.04,0.89-11.95l14.48-58.32c1.49-5.99,2.66-8.17,4.39-10.37c1.71-2.2,3.85-3.91,6.34-5.1
|
||||
c2.48-1.16,4.81-1.78,10.81-1.78h93.46l-4.27,17.18h-66.49c-2.77,0-3.83,0.29-4.98,0.82c-1.15,0.55-2.15,1.34-2.93,2.35
|
||||
c-0.8,1.01-1.34,2.02-2.03,4.79L645.32,85.83z"/>
|
||||
<path class="st0" d="M774.26,85.83h74.45l-4.27,17.18h-66.49c-2.77,0-3.85,0.29-5,0.82c-1.15,0.55-2.13,1.34-2.93,2.35
|
||||
c-0.79,1.01-1.32,2.02-2.01,4.79l-4.19,16.86h74.45l-4.27,17.18h-90.83c-6.93,0-9.25-0.73-11.44-2.06c-2.2-1.37-3.69-3.34-4.4-5.88
|
||||
c-0.74-2.54-0.83-5.04,0.89-11.95l14.48-58.32c1.49-5.99,2.64-8.17,4.37-10.37c1.71-2.2,3.85-3.91,6.36-5.1
|
||||
c2.47-1.16,4.79-1.78,10.79-1.78h93.48l-4.27,17.18h-66.49c-2.77,0-3.85,0.29-5,0.82c-1.15,0.55-2.13,1.34-2.93,2.35
|
||||
c-0.79,1.01-1.32,2.02-2.01,4.79L774.26,85.83z"/>
|
||||
<g>
|
||||
<path class="st1" d="M275.72,49.56l-23.7,95.45h-25.08c-6.01,0-8.01-0.63-9.92-1.79c-0.25-0.15-0.48-0.31-0.7-0.5
|
||||
c-1.29-0.95-2.25-2.23-2.85-3.74c0.01-0.04,0-0.06-0.02-0.08l-20.72-54.94l-15.16,61.05H141.3L165,49.56h25.08
|
||||
c5.99,0,8.02,0.61,9.92,1.78c0.25,0.15,0.48,0.31,0.7,0.5c1.3,0.97,2.25,2.23,2.84,3.78c0.01,0.02,0.01,0.02,0.03,0.04
|
||||
l20.72,54.94l15.16-61.03H275.72z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon class="st0" points="472.48,49.56 467.98,67.7 422.16,67.7 394.43,179.37 358.16,179.37 385.89,67.7 340.08,67.7
|
||||
344.58,49.56 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
BIN
public/industries/education.jpg
Normal file
BIN
public/industries/education.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
public/industries/events.webp
Normal file
BIN
public/industries/events.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 494 KiB |
BIN
public/industries/government.jpg
Normal file
BIN
public/industries/government.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
public/industries/healthcare.webp
Normal file
BIN
public/industries/healthcare.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/industries/hospitality.webp
Normal file
BIN
public/industries/hospitality.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
BIN
public/industries/hotels-resorts.webp
Normal file
BIN
public/industries/hotels-resorts.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
public/industries/restaurants-cafes.webp
Normal file
BIN
public/industries/restaurants-cafes.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
BIN
public/industries/security-surveillance.jpg
Normal file
BIN
public/industries/security-surveillance.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
public/industries/shopping-malls.webp
Normal file
BIN
public/industries/shopping-malls.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
public/industries/smart-buildings.webp
Normal file
BIN
public/industries/smart-buildings.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
BIN
public/industries/warehouses-logistics.webp
Normal file
BIN
public/industries/warehouses-logistics.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
@ -15,6 +15,10 @@ import Bell from 'lucide-react/dist/esm/icons/bell';
|
||||
import UtensilsCrossed from 'lucide-react/dist/esm/icons/utensils-crossed';
|
||||
import ChevronRight from 'lucide-react/dist/esm/icons/chevron-right';
|
||||
import ArrowRight from 'lucide-react/dist/esm/icons/arrow-right';
|
||||
import Check from 'lucide-react/dist/esm/icons/check';
|
||||
import MapPin from 'lucide-react/dist/esm/icons/map-pin';
|
||||
import Headphones from 'lucide-react/dist/esm/icons/headphones';
|
||||
import PlayCircle from 'lucide-react/dist/esm/icons/play-circle';
|
||||
import { Navbar } from '@/components/Navbar';
|
||||
import { FooterAndContact } from '@/components/FooterAndContact';
|
||||
import { MotionSection } from '@/components/ui/MotionSection';
|
||||
@ -54,20 +58,18 @@ export async function generateMetadata({ params }: { params: Promise<Params> }):
|
||||
title: content.seoTitle,
|
||||
description: content.seoDescription,
|
||||
alternates: { canonical: url },
|
||||
openGraph: {
|
||||
title: content.seoTitle,
|
||||
description: content.seoDescription,
|
||||
url,
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: content.seoTitle,
|
||||
description: content.seoDescription,
|
||||
},
|
||||
openGraph: { title: content.seoTitle, description: content.seoDescription, url, type: 'website' },
|
||||
twitter: { card: 'summary_large_image', title: content.seoTitle, description: content.seoDescription },
|
||||
};
|
||||
}
|
||||
|
||||
const TRUST_DEFAULT = [
|
||||
{ icon: MapPin, label: 'UAE-ready', sub: 'Deployment across the UAE' },
|
||||
{ icon: Headphones, label: 'Dubai support', sub: 'Local robotics team' },
|
||||
{ icon: Bot, label: 'Robot families', sub: 'Pudu + Unitree' },
|
||||
{ icon: PlayCircle, label: 'Demo available', sub: 'Showroom or on-site' },
|
||||
];
|
||||
|
||||
export default async function IndustryDetailPage({ params }: { params: Promise<Params> }) {
|
||||
const { slug } = await params;
|
||||
const industry = getIndustryBySlug(slug);
|
||||
@ -76,13 +78,18 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
if (!content) notFound();
|
||||
|
||||
const accent = industry.accent;
|
||||
const ctaTitle = content.ctaTitle ?? 'Find the right robot for your venue.';
|
||||
const ctaBody =
|
||||
content.ctaBody ??
|
||||
'Tell us about your space, workflow, and goals. Our Dubai team will recommend the best-fit robotics solution and arrange a live demo or quotation.';
|
||||
const heroVisualRobots = content.suggestedRobots.slice(0, 3);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
|
||||
<main style={{ paddingTop: 'clamp(5rem, 9vw, 7rem)', paddingBottom: 'clamp(2rem, 5vw, 4rem)' }}>
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(2.5rem, 5vw, 4rem)' }}>
|
||||
<main className="ip-main">
|
||||
<div className="container-wide ip-stack">
|
||||
{/* BREADCRUMBS */}
|
||||
<nav aria-label="Breadcrumb" className="ip-breadcrumbs">
|
||||
<ol>
|
||||
@ -98,14 +105,28 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
<MotionSection>
|
||||
<section className="ip-hero" style={{ ['--acc' as string]: accent }}>
|
||||
<div className="ip-hero-glow" aria-hidden />
|
||||
<div className="ip-hero-glow-b" aria-hidden />
|
||||
<div className="ip-hero-grid" aria-hidden />
|
||||
|
||||
<div className="ip-hero-inner">
|
||||
<div className="ip-hero-copy">
|
||||
<span className="eyebrow">{industry.name}</span>
|
||||
<span className="eyebrow ip-hero-eyebrow">
|
||||
<span className="ip-dot" />
|
||||
Industry Solution · {industry.name}
|
||||
</span>
|
||||
<h1 className="ip-hero-title">
|
||||
<span className="text-gradient">{content.heroTitle}</span>
|
||||
</h1>
|
||||
<p className="ip-hero-sub">{content.heroSubtitle}</p>
|
||||
|
||||
{content.heroTags && content.heroTags.length > 0 && (
|
||||
<ul className="ip-hero-tags" role="list">
|
||||
{content.heroTags.map((t) => (
|
||||
<li key={t} className="ip-hero-tag">{t}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<div className="ip-hero-actions">
|
||||
<CTAButton href="/book-demo/" variant="primary" size="lg" arrow="up-right">
|
||||
Book a Demo
|
||||
@ -115,20 +136,55 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
</CTAButton>
|
||||
</div>
|
||||
</div>
|
||||
<aside className="ip-hero-card" aria-hidden>
|
||||
<div className="ip-hero-card-tag">YSL · UAE</div>
|
||||
<div className="ip-hero-card-icon">
|
||||
<Bot size={40} strokeWidth={1.4} />
|
||||
|
||||
{/* Right visual: stacked robot/family cards */}
|
||||
<aside className="ip-hero-visual" aria-hidden>
|
||||
<div className="ip-hero-visual-head">
|
||||
<span className="ip-mono">YSL · UAE</span>
|
||||
<span className="ip-mono ip-live">
|
||||
<span className="ip-live-dot" />Available
|
||||
</span>
|
||||
</div>
|
||||
<div className="ip-hero-card-meta">
|
||||
<span>Industry</span>
|
||||
<strong>{industry.name}</strong>
|
||||
<ul className="ip-hero-stack">
|
||||
{heroVisualRobots.map((r, i) => (
|
||||
<li key={i} className="ip-hero-stack-card">
|
||||
<span className="ip-hero-stack-icon">
|
||||
<Bot size={18} strokeWidth={1.5} />
|
||||
</span>
|
||||
<div className="ip-hero-stack-meta">
|
||||
<span className="ip-hero-stack-brand">{r.brand}</span>
|
||||
<span className="ip-hero-stack-family">{r.family}</span>
|
||||
</div>
|
||||
<ArrowRight size={14} strokeWidth={1.6} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="ip-hero-visual-foot">
|
||||
<span>Dubai Showroom · Live demo</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</MotionSection>
|
||||
|
||||
{/* TRUST ROW */}
|
||||
<MotionSection>
|
||||
<ul className="ip-trust" role="list">
|
||||
{TRUST_DEFAULT.map((t) => {
|
||||
const Icon = t.icon;
|
||||
return (
|
||||
<li key={t.label} className="ip-trust-card">
|
||||
<span className="ip-trust-icon"><Icon size={14} strokeWidth={1.7} /></span>
|
||||
<div>
|
||||
<span className="ip-trust-label">{t.label}</span>
|
||||
<span className="ip-trust-sub">{t.sub}</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</MotionSection>
|
||||
|
||||
{/* PROBLEM */}
|
||||
<MotionSection>
|
||||
<section className="ip-block">
|
||||
@ -164,6 +220,16 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
</span>
|
||||
<h3>{s.title}</h3>
|
||||
<p>{s.body}</p>
|
||||
{s.suitableFor && s.suitableFor.length > 0 && (
|
||||
<div className="ip-solution-tags">
|
||||
<span className="ip-tag-label">Suitable for</span>
|
||||
<ul role="list">
|
||||
{s.suitableFor.map((t) => (
|
||||
<li key={t}>{t}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
@ -181,7 +247,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
<ul className="ip-usecases" role="list">
|
||||
{content.useCases.map((u, i) => (
|
||||
<li key={i} className="ip-usecase">
|
||||
<span className="ip-usecase-bullet" aria-hidden />
|
||||
<span className="ip-usecase-num">{String(i + 1).padStart(2, '0')}</span>
|
||||
<span>{u}</span>
|
||||
</li>
|
||||
))}
|
||||
@ -199,6 +265,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
<div className="ip-benefits">
|
||||
{content.benefits.map((b, i) => (
|
||||
<div key={i} className="ip-benefit">
|
||||
<span className="ip-benefit-check"><Check size={12} strokeWidth={2.4} /></span>
|
||||
<h3>{b.title}</h3>
|
||||
<p>{b.body}</p>
|
||||
</div>
|
||||
@ -217,9 +284,19 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
<div className="ip-robots">
|
||||
{content.suggestedRobots.map((r, i) => (
|
||||
<article key={i} className="ip-robot">
|
||||
<div className="ip-robot-head">
|
||||
<span className="ip-robot-brand">{r.brand}</span>
|
||||
<span className="ip-robot-arrow"><ArrowRight size={14} strokeWidth={1.8} /></span>
|
||||
</div>
|
||||
<h3>{r.family}</h3>
|
||||
<p>{r.body}</p>
|
||||
{r.chips && r.chips.length > 0 && (
|
||||
<ul className="ip-robot-chips" role="list">
|
||||
{r.chips.map((c) => (
|
||||
<li key={c}>{c}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<Link href="/robots/" className="ip-robot-link">
|
||||
Browse robots <ArrowRight size={13} strokeWidth={2} />
|
||||
</Link>
|
||||
@ -233,13 +310,12 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
<MotionSection>
|
||||
<section className="ip-cta">
|
||||
<div className="ip-cta-glow" aria-hidden />
|
||||
<div className="ip-cta-grid" aria-hidden />
|
||||
<div className="ip-cta-inner">
|
||||
<div className="ip-cta-text">
|
||||
<span className="eyebrow">Next step</span>
|
||||
<h2 className="ip-cta-title">Find the right robot for your venue.</h2>
|
||||
<p>
|
||||
Tell us about your space, workflow, and goals. Our Dubai team will recommend the best-fit robotics solution and arrange a live demo or quotation.
|
||||
</p>
|
||||
<h2 className="ip-cta-title">{ctaTitle}</h2>
|
||||
<p>{ctaBody}</p>
|
||||
</div>
|
||||
<div className="ip-cta-actions">
|
||||
<CTAButton href="/book-demo/" variant="primary" size="lg" arrow="up-right">
|
||||
@ -268,6 +344,18 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
<FooterAndContact />
|
||||
|
||||
<style>{`
|
||||
.ip-main {
|
||||
padding-top: clamp(5rem, 9vw, 7rem);
|
||||
padding-bottom: clamp(2rem, 5vw, 4rem);
|
||||
}
|
||||
.ip-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(2.5rem, 5vw, 4.25rem);
|
||||
scroll-margin-top: clamp(80px, 12vh, 120px);
|
||||
}
|
||||
|
||||
/* BREADCRUMBS */
|
||||
.ip-breadcrumbs ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -276,16 +364,12 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #8891C7;
|
||||
}
|
||||
.ip-breadcrumbs a {
|
||||
color: #8891C7;
|
||||
text-decoration: none;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
.ip-breadcrumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
|
||||
.ip-breadcrumbs a:hover { color: #FFFFFF; }
|
||||
.ip-breadcrumbs li[aria-current="page"] { color: #FFFFFF; }
|
||||
.ip-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
|
||||
@ -294,28 +378,28 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
.ip-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(74, 102, 216, 0.18);
|
||||
border-radius: 26px;
|
||||
border: 1px solid rgba(74, 102, 216, 0.20);
|
||||
background:
|
||||
radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.18), transparent 55%),
|
||||
linear-gradient(135deg, rgba(14, 13, 22, 0.92), rgba(6, 6, 10, 0.97));
|
||||
radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.20), transparent 55%),
|
||||
radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.16), transparent 60%),
|
||||
linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
|
||||
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.ip-hero-glow {
|
||||
position: absolute;
|
||||
width: 520px;
|
||||
height: 520px;
|
||||
border-radius: 999px;
|
||||
top: -180px;
|
||||
right: -160px;
|
||||
background: radial-gradient(circle, color-mix(in srgb, var(--acc) 35%, transparent), transparent 70%);
|
||||
filter: blur(110px);
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
position: absolute; width: 540px; height: 540px; border-radius: 999px;
|
||||
top: -200px; right: -160px;
|
||||
background: radial-gradient(circle, color-mix(in srgb, var(--acc) 38%, transparent), transparent 70%);
|
||||
filter: blur(110px); opacity: 0.6; pointer-events: none;
|
||||
}
|
||||
.ip-hero-glow-b {
|
||||
position: absolute; width: 460px; height: 460px; border-radius: 999px;
|
||||
bottom: -200px; left: -150px;
|
||||
background: radial-gradient(circle, rgba(74, 102, 216, 0.32), transparent 70%);
|
||||
filter: blur(110px); opacity: 0.5; pointer-events: none;
|
||||
}
|
||||
.ip-hero-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
|
||||
@ -325,283 +409,353 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
pointer-events: none;
|
||||
}
|
||||
.ip-hero-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: clamp(1.5rem, 3vw, 2.5rem);
|
||||
position: relative; z-index: 1;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr);
|
||||
gap: clamp(1.5rem, 3vw, 2.75rem);
|
||||
padding: clamp(1.8rem, 4vw, 3.2rem);
|
||||
align-items: center;
|
||||
}
|
||||
.ip-hero-copy { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; }
|
||||
.ip-hero-copy { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; min-width: 0; }
|
||||
.ip-hero-eyebrow {
|
||||
display: inline-flex; align-items: center; gap: 0.55rem;
|
||||
width: fit-content;
|
||||
}
|
||||
.ip-dot {
|
||||
width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
|
||||
box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
|
||||
}
|
||||
.ip-hero-title {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 5vw, 3.2rem);
|
||||
line-height: 1.05;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.03em;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.05; font-weight: 300; letter-spacing: -0.03em; color: #FFFFFF;
|
||||
}
|
||||
.ip-hero-title .text-gradient { font-weight: 500; }
|
||||
.ip-hero-sub {
|
||||
margin: 0;
|
||||
color: #DEE0F0;
|
||||
font-size: clamp(0.95rem, 1.8vw, 1.1rem);
|
||||
line-height: 1.65;
|
||||
margin: 0; color: #DEE0F0;
|
||||
font-size: clamp(0.95rem, 1.8vw, 1.1rem); line-height: 1.65; max-width: 560px;
|
||||
}
|
||||
.ip-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.35rem; }
|
||||
.ip-hero-tags {
|
||||
list-style: none; margin: 0.25rem 0 0; padding: 0;
|
||||
display: flex; flex-wrap: wrap; gap: 0.4rem;
|
||||
}
|
||||
.ip-hero-tag {
|
||||
display: inline-flex; align-items: center; gap: 0.3rem;
|
||||
padding: 0.35rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(120, 140, 255, 0.28);
|
||||
background: rgba(58, 85, 196, 0.12);
|
||||
color: #DEE0F0;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.ip-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
|
||||
|
||||
.ip-hero-card {
|
||||
/* HERO RIGHT VISUAL */
|
||||
.ip-hero-visual {
|
||||
display: none;
|
||||
position: relative;
|
||||
padding: 1.1rem 1.2rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(74, 102, 216, 0.22);
|
||||
padding: 1.1rem 1.15rem 1.1rem;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(74, 102, 216, 0.24);
|
||||
background:
|
||||
radial-gradient(ellipse 80% 80% at 50% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, rgba(20, 19, 26, 0.85), rgba(8, 8, 12, 0.95));
|
||||
radial-gradient(ellipse 80% 80% at 50% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, rgba(20, 19, 26, 0.88), rgba(8, 8, 12, 0.96));
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.ip-hero-card-tag {
|
||||
.ip-hero-visual-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding-bottom: 0.75rem; margin-bottom: 0.85rem;
|
||||
border-bottom: 1px solid rgba(222, 224, 240, 0.08);
|
||||
}
|
||||
.ip-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.32em;
|
||||
font-weight: 800;
|
||||
color: #DEE0F0;
|
||||
font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 800; color: #DEE0F0;
|
||||
}
|
||||
.ip-hero-card-icon {
|
||||
display: flex;
|
||||
.ip-live { color: #7FD6D0; display: inline-flex; align-items: center; gap: 0.4rem; }
|
||||
.ip-live-dot {
|
||||
width: 7px; height: 7px; border-radius: 999px; background: #7FD6D0;
|
||||
box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
|
||||
}
|
||||
.ip-hero-stack {
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
display: flex; flex-direction: column; gap: 0.55rem;
|
||||
}
|
||||
.ip-hero-stack-card {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.2rem 0;
|
||||
color: color-mix(in srgb, var(--acc) 75%, white);
|
||||
gap: 0.7rem;
|
||||
padding: 0.7rem 0.85rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(222, 224, 240, 0.08);
|
||||
background: linear-gradient(135deg, rgba(22, 21, 30, 0.85), rgba(10, 10, 14, 0.92));
|
||||
color: #DEE0F0;
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
.ip-hero-card-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
padding-top: 0.6rem;
|
||||
.ip-hero-stack-card:hover {
|
||||
border-color: color-mix(in srgb, var(--acc) 40%, transparent);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.ip-hero-stack-icon {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 36px; height: 36px; border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--acc) 14%, rgba(14, 13, 18, 0.6));
|
||||
border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
|
||||
color: color-mix(in srgb, var(--acc) 78%, white);
|
||||
}
|
||||
.ip-hero-stack-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
|
||||
.ip-hero-stack-brand {
|
||||
font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--acc) 65%, white); font-weight: 800;
|
||||
}
|
||||
.ip-hero-stack-family {
|
||||
font-size: 0.92rem; font-weight: 600; color: #FFFFFF;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.ip-hero-visual-foot {
|
||||
margin-top: 0.85rem; padding-top: 0.7rem;
|
||||
border-top: 1px solid rgba(222, 224, 240, 0.08);
|
||||
font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
|
||||
color: #8891C7; font-weight: 700;
|
||||
}
|
||||
.ip-hero-card-meta span {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
color: #8891C7;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ip-hero-card-meta strong { color: #FFFFFF; font-size: 0.95rem; font-weight: 600; }
|
||||
|
||||
@media (min-width: 920px) {
|
||||
.ip-hero-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
|
||||
.ip-hero-card { display: block; }
|
||||
.ip-hero-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
|
||||
.ip-hero-visual { display: block; }
|
||||
}
|
||||
|
||||
/* TRUST ROW */
|
||||
.ip-trust {
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.ip-trust-card {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(120, 140, 255, 0.22);
|
||||
background: linear-gradient(135deg, rgba(80, 110, 255, 0.10), rgba(255, 255, 255, 0.03));
|
||||
align-items: center;
|
||||
}
|
||||
.ip-trust-icon {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 32px; height: 32px; border-radius: 10px;
|
||||
color: #DEE0F0;
|
||||
background: rgba(74, 102, 216, 0.18);
|
||||
border: 1px solid rgba(74, 102, 216, 0.45);
|
||||
}
|
||||
.ip-trust-label {
|
||||
display: block;
|
||||
font-size: 0.78rem; font-weight: 600; color: #FFFFFF;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.ip-trust-sub {
|
||||
display: block; font-size: 0.7rem; color: #8891C7; margin-top: 0.1rem;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.ip-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
|
||||
}
|
||||
|
||||
/* BLOCKS */
|
||||
.ip-block { display: flex; flex-direction: column; gap: clamp(1.1rem, 2vw, 1.5rem); }
|
||||
.ip-block-head { display: flex; flex-direction: column; gap: 0.5rem; max-width: 720px; }
|
||||
.ip-block { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.2vw, 1.75rem); }
|
||||
.ip-block-head { display: flex; flex-direction: column; gap: 0.55rem; max-width: 760px; }
|
||||
.ip-block-title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.5rem, 3vw, 2.1rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.15;
|
||||
font-size: clamp(1.55rem, 3vw, 2.1rem);
|
||||
font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.15;
|
||||
}
|
||||
|
||||
/* PROBLEMS */
|
||||
/* PROBLEM */
|
||||
.ip-problems {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem;
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.ip-problems { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
|
||||
}
|
||||
.ip-problem {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.85rem;
|
||||
padding: 1rem 1.1rem;
|
||||
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem;
|
||||
padding: 1.05rem 1.15rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(222, 224, 240, 0.08);
|
||||
background: linear-gradient(135deg, rgba(20, 19, 26, 0.72), rgba(10, 10, 14, 0.92));
|
||||
background: linear-gradient(135deg, rgba(20, 19, 26, 0.78), rgba(10, 10, 14, 0.94));
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
.ip-problem:hover { border-color: rgba(74, 102, 216, 0.32); transform: translateY(-2px); }
|
||||
.ip-problem-num {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.22em;
|
||||
font-weight: 800;
|
||||
color: #8891C7;
|
||||
padding-top: 0.15rem;
|
||||
}
|
||||
.ip-problem p {
|
||||
margin: 0;
|
||||
color: #DEE0F0;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.55;
|
||||
font-size: 0.7rem; letter-spacing: 0.22em; font-weight: 800;
|
||||
color: #8891C7; padding-top: 0.15rem;
|
||||
}
|
||||
.ip-problem p { margin: 0; color: #DEE0F0; font-size: 0.92rem; line-height: 1.55; }
|
||||
|
||||
/* SOLUTIONS */
|
||||
.ip-solutions {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
|
||||
}
|
||||
@media (min-width: 640px) { .ip-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1100px) { .ip-solutions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
|
||||
|
||||
@media (min-width: 1200px) { .ip-solutions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
|
||||
.ip-solution {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
padding: 1.1rem 1.15rem 1.15rem;
|
||||
border-radius: 16px;
|
||||
display: flex; flex-direction: column; gap: 0.65rem;
|
||||
padding: 1.2rem 1.2rem 1.25rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(222, 224, 240, 0.10);
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, rgba(22, 21, 30, 0.88), rgba(10, 10, 14, 0.95));
|
||||
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
|
||||
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.ip-solution:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(74, 102, 216, 0.4);
|
||||
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 22px rgba(58, 85, 196, 0.18);
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(74, 102, 216, 0.42);
|
||||
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(58, 85, 196, 0.18);
|
||||
}
|
||||
.ip-solution-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
color: color-mix(in srgb, var(--acc) 80%, white);
|
||||
border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
|
||||
background: color-mix(in srgb, var(--acc) 12%, rgba(14, 13, 18, 0.55));
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 40px; height: 40px; border-radius: 12px;
|
||||
color: color-mix(in srgb, var(--acc) 82%, white);
|
||||
border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
|
||||
background: color-mix(in srgb, var(--acc) 12%, rgba(14, 13, 18, 0.6));
|
||||
}
|
||||
.ip-solution h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: -0.005em;
|
||||
margin: 0; font-size: 1.02rem; font-weight: 600;
|
||||
color: #FFFFFF; letter-spacing: -0.005em;
|
||||
}
|
||||
.ip-solution p {
|
||||
margin: 0;
|
||||
color: #C9CCDE;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
.ip-solution p { margin: 0; color: #C9CCDE; font-size: 0.86rem; line-height: 1.55; flex: 1; }
|
||||
.ip-solution-tags {
|
||||
display: flex; flex-direction: column; gap: 0.4rem;
|
||||
padding-top: 0.7rem; border-top: 1px solid rgba(222, 224, 240, 0.07);
|
||||
}
|
||||
.ip-tag-label {
|
||||
font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase;
|
||||
font-weight: 800; color: #8891C7;
|
||||
}
|
||||
.ip-solution-tags ul {
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
display: flex; flex-wrap: wrap; gap: 0.3rem;
|
||||
}
|
||||
.ip-solution-tags li {
|
||||
font-size: 0.7rem; font-weight: 600; color: #DEE0F0;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(222, 224, 240, 0.10);
|
||||
background: rgba(20, 19, 26, 0.65);
|
||||
}
|
||||
|
||||
/* USE CASES */
|
||||
.ip-usecases {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.6rem;
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.ip-usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem;
|
||||
}
|
||||
@media (min-width: 640px) { .ip-usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } }
|
||||
@media (min-width: 1000px) { .ip-usecases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||
.ip-usecase {
|
||||
display: grid;
|
||||
grid-template-columns: 10px minmax(0, 1fr);
|
||||
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
padding: 0.85rem 1rem;
|
||||
padding: 0.95rem 1.05rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(222, 224, 240, 0.08);
|
||||
background: linear-gradient(135deg, rgba(18, 18, 26, 0.7), rgba(8, 8, 12, 0.88));
|
||||
color: #DEE0F0;
|
||||
font-size: 0.92rem;
|
||||
background: linear-gradient(135deg, rgba(18, 18, 26, 0.78), rgba(8, 8, 12, 0.92));
|
||||
color: #DEE0F0; font-size: 0.92rem; line-height: 1.45;
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
.ip-usecase-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #4a66d8;
|
||||
box-shadow: 0 0 12px rgba(74, 102, 216, 0.7);
|
||||
.ip-usecase:hover { border-color: rgba(74, 102, 216, 0.35); transform: translateX(2px); }
|
||||
.ip-usecase-num {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 800; color: #8891C7;
|
||||
}
|
||||
|
||||
/* BENEFITS */
|
||||
.ip-benefits {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.85rem;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem;
|
||||
}
|
||||
@media (min-width: 640px) { .ip-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1100px) { .ip-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1100px) { .ip-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||
.ip-benefit {
|
||||
padding: 1.1rem 1.15rem;
|
||||
position: relative;
|
||||
padding: 1.15rem 1.2rem 1.1rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(222, 224, 240, 0.08);
|
||||
background: linear-gradient(135deg, rgba(20, 19, 26, 0.78), rgba(10, 10, 14, 0.92));
|
||||
background: linear-gradient(135deg, rgba(20, 19, 26, 0.82), rgba(10, 10, 14, 0.94));
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
.ip-benefit:hover { border-color: rgba(74, 102, 216, 0.32); transform: translateY(-2px); }
|
||||
.ip-benefit-check {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 22px; height: 22px; border-radius: 999px;
|
||||
background: rgba(127, 214, 208, 0.18);
|
||||
border: 1px solid rgba(127, 214, 208, 0.4);
|
||||
color: #7FD6D0;
|
||||
margin-bottom: 0.55rem;
|
||||
}
|
||||
.ip-benefit h3 {
|
||||
margin: 0 0 0.4rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.ip-benefit p {
|
||||
margin: 0;
|
||||
color: #C9CCDE;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 0.35rem; font-size: 0.98rem; font-weight: 600; color: #FFFFFF;
|
||||
}
|
||||
.ip-benefit p { margin: 0; color: #C9CCDE; font-size: 0.86rem; line-height: 1.5; }
|
||||
|
||||
/* SUGGESTED ROBOTS */
|
||||
.ip-robots {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.95rem;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
|
||||
}
|
||||
@media (min-width: 720px) { .ip-robots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1100px) { .ip-robots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||
|
||||
.ip-robot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1.15rem 1.2rem 1.1rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(74, 102, 216, 0.22);
|
||||
display: flex; flex-direction: column; gap: 0.55rem;
|
||||
padding: 1.2rem 1.25rem 1.2rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(74, 102, 216, 0.24);
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.95));
|
||||
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
|
||||
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.ip-robot:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(74, 102, 216, 0.5);
|
||||
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 28px rgba(58, 85, 196, 0.22);
|
||||
}
|
||||
.ip-robot-head {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
|
||||
}
|
||||
.ip-robot-brand {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.3em;
|
||||
font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
|
||||
font-weight: 800; color: color-mix(in srgb, var(--acc) 72%, white);
|
||||
}
|
||||
.ip-robot-arrow {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 26px; height: 26px; border-radius: 999px;
|
||||
color: #DEE0F0;
|
||||
border: 1px solid rgba(222, 224, 240, 0.14);
|
||||
background: rgba(14, 13, 18, 0.6);
|
||||
}
|
||||
.ip-robot h3 { margin: 0; font-size: 1.08rem; font-weight: 600; color: #FFFFFF; }
|
||||
.ip-robot p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; flex: 1; }
|
||||
.ip-robot-chips {
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
display: flex; flex-wrap: wrap; gap: 0.3rem;
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
.ip-robot-chips li {
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
color: color-mix(in srgb, var(--acc) 70%, white);
|
||||
}
|
||||
.ip-robot h3 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.ip-robot p {
|
||||
margin: 0;
|
||||
color: #C9CCDE;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
flex: 1;
|
||||
font-weight: 700;
|
||||
padding: 0.25rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
|
||||
background: color-mix(in srgb, var(--acc) 10%, rgba(14, 13, 18, 0.55));
|
||||
color: #DEE0F0;
|
||||
}
|
||||
.ip-robot-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #DEE0F0;
|
||||
display: inline-flex; align-items: center; gap: 0.45rem;
|
||||
margin-top: 0.55rem; padding-top: 0.7rem;
|
||||
border-top: 1px solid rgba(222, 224, 240, 0.07);
|
||||
font-size: 0.8rem; font-weight: 600; color: #DEE0F0;
|
||||
text-decoration: none;
|
||||
transition: color 0.25s, gap 0.25s;
|
||||
}
|
||||
@ -609,54 +763,49 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
|
||||
/* CTA */
|
||||
.ip-cta {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(74, 102, 216, 0.22);
|
||||
position: relative; overflow: hidden;
|
||||
border-radius: 26px;
|
||||
border: 1px solid rgba(74, 102, 216, 0.26);
|
||||
background:
|
||||
radial-gradient(ellipse 60% 100% at 100% 0%, rgba(58, 85, 196, 0.18), transparent 60%),
|
||||
linear-gradient(135deg, rgba(18, 16, 28, 0.92), rgba(8, 8, 12, 0.96));
|
||||
radial-gradient(ellipse 60% 100% at 100% 0%, rgba(58, 85, 196, 0.22), transparent 60%),
|
||||
linear-gradient(135deg, rgba(18, 16, 28, 0.95), rgba(8, 8, 12, 0.97));
|
||||
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.ip-cta-glow {
|
||||
position: absolute;
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
border-radius: 999px;
|
||||
top: -160px;
|
||||
left: -160px;
|
||||
background: radial-gradient(circle, rgba(74, 102, 216, 0.4), transparent 70%);
|
||||
filter: blur(100px);
|
||||
opacity: 0.55;
|
||||
position: absolute; width: 480px; height: 480px; border-radius: 999px;
|
||||
top: -160px; left: -160px;
|
||||
background: radial-gradient(circle, rgba(74, 102, 216, 0.45), transparent 70%);
|
||||
filter: blur(100px); opacity: 0.55; pointer-events: none;
|
||||
}
|
||||
.ip-cta-grid {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.ip-cta-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: clamp(1.2rem, 3vw, 2rem);
|
||||
padding: clamp(1.6rem, 3.5vw, 2.6rem);
|
||||
position: relative; z-index: 1;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr);
|
||||
gap: clamp(1.3rem, 3vw, 2rem);
|
||||
padding: clamp(1.7rem, 3.6vw, 2.7rem);
|
||||
align-items: center;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.ip-cta-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
|
||||
}
|
||||
.ip-cta-text { display: flex; flex-direction: column; gap: 0.6rem; max-width: 560px; }
|
||||
.ip-cta-text { display: flex; flex-direction: column; gap: 0.65rem; max-width: 560px; }
|
||||
.ip-cta-title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.1;
|
||||
font-size: clamp(1.65rem, 3vw, 2.25rem);
|
||||
font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
|
||||
}
|
||||
.ip-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.6; }
|
||||
.ip-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
|
||||
.ip-cta-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.55rem;
|
||||
justify-content: flex-start;
|
||||
display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.ip-cta-actions { justify-content: flex-end; }
|
||||
|
||||
@ -6,6 +6,7 @@ import ArrowRight from 'lucide-react/dist/esm/icons/arrow-right';
|
||||
import { BRANDS, ROBOTS, type RobotBrand } from '@/data/robots';
|
||||
|
||||
type BrandVisual = {
|
||||
logo: { src: string; alt: string; width: number; height: number };
|
||||
description: string;
|
||||
chips: string[];
|
||||
primary: { src: string; alt: string };
|
||||
@ -14,6 +15,7 @@ type BrandVisual = {
|
||||
|
||||
const BRAND_VISUALS: Record<RobotBrand, BrandVisual> = {
|
||||
unitree: {
|
||||
logo: { src: '/brands/unitree-logo.svg', alt: 'Unitree Robotics logo', width: 170, height: 38 },
|
||||
description:
|
||||
'Quadruped and humanoid robotics platforms available in the UAE through YS Lootah Robotics.',
|
||||
chips: ['Quadruped', 'Humanoid', 'Inspection', 'Research'],
|
||||
@ -21,6 +23,7 @@ const BRAND_VISUALS: Record<RobotBrand, BrandVisual> = {
|
||||
secondary: { src: '/images/robots/unitree-go2.png', alt: 'Unitree Go2 quadruped robot' },
|
||||
},
|
||||
pudu: {
|
||||
logo: { src: '/brands/pudu-logo.svg', alt: 'Pudu Robotics logo', width: 121, height: 32 },
|
||||
description:
|
||||
'Service, delivery, cleaning, and hospitality robotics available in the UAE through YS Lootah Robotics.',
|
||||
chips: ['Service', 'Delivery', 'Cleaning', 'Hospitality'],
|
||||
@ -168,31 +171,30 @@ function BrandCard({
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
<div
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: 'clamp(1.4rem, 2.6vw, 1.85rem)',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '-0.01em',
|
||||
lineHeight: 1.1,
|
||||
color: '#FBFBFD',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
padding: '0.55rem 0.85rem',
|
||||
borderRadius: 14,
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
border: '1px solid rgba(255,255,255,0.10)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
WebkitBackdropFilter: 'blur(10px)',
|
||||
width: 'fit-content',
|
||||
}}
|
||||
>
|
||||
{brandWord}
|
||||
{brandRest && (
|
||||
<span
|
||||
style={{
|
||||
marginLeft: 8,
|
||||
background: `linear-gradient(110deg, #FBFBFD, ${accent})`,
|
||||
WebkitBackgroundClip: 'text',
|
||||
backgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
color: 'transparent',
|
||||
}}
|
||||
>
|
||||
{brandRest}
|
||||
</span>
|
||||
)}
|
||||
<Image
|
||||
src={visual.logo.src}
|
||||
alt={visual.logo.alt}
|
||||
width={visual.logo.width}
|
||||
height={visual.logo.height}
|
||||
style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<h3 style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', margin: 0 }}>
|
||||
{brand.name}
|
||||
</h3>
|
||||
|
||||
<p
|
||||
|
||||
@ -60,13 +60,14 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
|
||||
<motion.ul
|
||||
className="iu-stats"
|
||||
role="list"
|
||||
style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: '0.45rem', listStyle: 'none', margin: 0, padding: 0 }}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-10%' }}
|
||||
transition={{ duration: 0.6, ease }}
|
||||
>
|
||||
{STATS.map((s) => (
|
||||
<li key={s.label} className="iu-stat">
|
||||
<li key={s.label} className="iu-stat" style={{ flex: '1 1 0', minWidth: 0 }}>
|
||||
<span className="iu-stat-value">{s.value}</span>
|
||||
<span className="iu-stat-label">{s.label}</span>
|
||||
</li>
|
||||
|
||||
@ -10,6 +10,8 @@ export interface Industry {
|
||||
matchCategories: RobotCategory[];
|
||||
accent: string;
|
||||
icon: 'building' | 'utensils' | 'hotel' | 'shopping-bag' | 'heart-pulse' | 'graduation-cap' | 'shield' | 'warehouse' | 'sparkles' | 'landmark';
|
||||
image: string;
|
||||
imageAlt: string;
|
||||
}
|
||||
|
||||
export const INDUSTRIES: Industry[] = [
|
||||
@ -23,6 +25,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['hospitality', 'service', 'delivery'],
|
||||
accent: '#DEE0F0',
|
||||
icon: 'hotel',
|
||||
image: '/industries/hospitality.webp',
|
||||
imageAlt: 'Pudu service robot in a hospitality venue',
|
||||
},
|
||||
{
|
||||
id: 'restaurants',
|
||||
@ -34,6 +38,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['delivery', 'service', 'hospitality'],
|
||||
accent: '#8891C7',
|
||||
icon: 'utensils',
|
||||
image: '/industries/restaurants-cafes.webp',
|
||||
imageAlt: 'Pudu food delivery robot in a restaurant environment',
|
||||
},
|
||||
{
|
||||
id: 'hotels',
|
||||
@ -45,6 +51,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['delivery', 'hospitality', 'service'],
|
||||
accent: '#273F94',
|
||||
icon: 'hotel',
|
||||
image: '/industries/hotels-resorts.webp',
|
||||
imageAlt: 'Pudu delivery robot serving hotel guests',
|
||||
},
|
||||
{
|
||||
id: 'malls',
|
||||
@ -56,6 +64,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['cleaning', 'service', 'humanoid'],
|
||||
accent: '#DEE0F0',
|
||||
icon: 'shopping-bag',
|
||||
image: '/industries/shopping-malls.webp',
|
||||
imageAlt: 'Pudu service robot in a high-traffic retail environment',
|
||||
},
|
||||
{
|
||||
id: 'healthcare',
|
||||
@ -67,6 +77,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['delivery', 'service'],
|
||||
accent: '#273F94',
|
||||
icon: 'heart-pulse',
|
||||
image: '/industries/healthcare.webp',
|
||||
imageAlt: 'Pudu delivery robot for healthcare and care facilities',
|
||||
},
|
||||
{
|
||||
id: 'education',
|
||||
@ -78,6 +90,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['humanoid', 'service'],
|
||||
accent: '#8891C7',
|
||||
icon: 'graduation-cap',
|
||||
image: '/industries/education.jpg',
|
||||
imageAlt: 'Unitree humanoid robot for education and STEM research',
|
||||
},
|
||||
{
|
||||
id: 'security',
|
||||
@ -89,6 +103,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['quadruped', 'commercial'],
|
||||
accent: '#DEE0F0',
|
||||
icon: 'shield',
|
||||
image: '/industries/security-surveillance.jpg',
|
||||
imageAlt: 'Unitree quadruped robot on autonomous security patrol',
|
||||
},
|
||||
{
|
||||
id: 'warehouses',
|
||||
@ -100,6 +116,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['quadruped', 'delivery', 'commercial'],
|
||||
accent: '#273F94',
|
||||
icon: 'warehouse',
|
||||
image: '/industries/warehouses-logistics.webp',
|
||||
imageAlt: 'Pudu industrial delivery robot for warehouses and logistics',
|
||||
},
|
||||
{
|
||||
id: 'events',
|
||||
@ -111,6 +129,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['humanoid', 'quadruped'],
|
||||
accent: '#8891C7',
|
||||
icon: 'sparkles',
|
||||
image: '/industries/events.webp',
|
||||
imageAlt: 'Robotics activation for live events and brand experiences',
|
||||
},
|
||||
{
|
||||
id: 'smart-buildings',
|
||||
@ -122,6 +142,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['cleaning', 'commercial', 'delivery'],
|
||||
accent: '#DEE0F0',
|
||||
icon: 'building',
|
||||
image: '/industries/smart-buildings.webp',
|
||||
imageAlt: 'Pudu cleaning robot in a modern smart office building',
|
||||
},
|
||||
{
|
||||
id: 'government',
|
||||
@ -133,6 +155,8 @@ export const INDUSTRIES: Industry[] = [
|
||||
matchCategories: ['humanoid', 'quadruped', 'service'],
|
||||
accent: '#273F94',
|
||||
icon: 'landmark',
|
||||
image: '/industries/government.jpg',
|
||||
imageAlt: 'Unitree quadruped robots deployed for civic and emergency services',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -14,22 +14,27 @@ export type IndustrySolution = {
|
||||
| 'queue'
|
||||
| 'host'
|
||||
| 'tray';
|
||||
suitableFor?: string[];
|
||||
};
|
||||
|
||||
export type SuggestedRobot = {
|
||||
brand: 'Pudu' | 'Unitree';
|
||||
family: string;
|
||||
body: string;
|
||||
chips?: string[];
|
||||
};
|
||||
|
||||
export type IndustryPageContent = {
|
||||
heroTitle: string;
|
||||
heroSubtitle: string;
|
||||
heroTags?: string[];
|
||||
problemPoints: string[];
|
||||
solutions: IndustrySolution[];
|
||||
useCases: string[];
|
||||
benefits: { title: string; body: string }[];
|
||||
suggestedRobots: SuggestedRobot[];
|
||||
ctaTitle?: string;
|
||||
ctaBody?: string;
|
||||
seoTitle: string;
|
||||
seoDescription: string;
|
||||
};
|
||||
@ -230,35 +235,78 @@ export const INDUSTRY_PAGES: Record<string, IndustryPageContent> = {
|
||||
heroTitle: 'Hands-on robotics for STEM and innovation.',
|
||||
heroSubtitle:
|
||||
'Humanoid and quadruped robots that bring AI, programming, and modern robotics into UAE schools, universities, and innovation labs.',
|
||||
heroTags: ['STEM labs', 'Robotics clubs', 'Innovation programs', 'Research'],
|
||||
problemPoints: [
|
||||
'STEM curricula need tangible robotics platforms for AI and motion learning.',
|
||||
'Schools want flagship innovation moments and visible identity.',
|
||||
'Teachers need approachable platforms for hands-on labs.',
|
||||
'Recruiting top STEM students depends on signature equipment.',
|
||||
'Schools need hands-on robotics and AI learning tools.',
|
||||
'Students need practical exposure to emerging technologies.',
|
||||
'Institutions want modern STEM labs and innovation programs.',
|
||||
'Recruiting top STEM talent depends on signature equipment.',
|
||||
],
|
||||
solutions: [
|
||||
{ title: 'Humanoid robots', body: 'General-purpose platforms for AI, motion, and human-robot interaction labs.', iconKey: 'humanoid' },
|
||||
{ title: 'Quadruped robots', body: 'Programmable platforms for autonomy, locomotion, and research projects.', iconKey: 'quadruped' },
|
||||
{ title: 'STEM-ready kits', body: 'Course-aligned robotics hardware for school labs and clubs.', iconKey: 'platform' },
|
||||
{ title: 'Open SDK platforms', body: 'Hands-on coding access for advanced students and researchers.', iconKey: 'sensor' },
|
||||
{
|
||||
title: 'Humanoid robots',
|
||||
body: 'General-purpose platforms for AI, motion, and human-robot interaction labs.',
|
||||
iconKey: 'humanoid',
|
||||
suitableFor: ['Universities', 'AI labs', 'Research'],
|
||||
},
|
||||
{
|
||||
title: 'Quadruped robots',
|
||||
body: 'Programmable platforms for autonomy, locomotion, and research projects.',
|
||||
iconKey: 'quadruped',
|
||||
suitableFor: ['Engineering schools', 'Robotics clubs', 'Research'],
|
||||
},
|
||||
{
|
||||
title: 'STEM robotics kits',
|
||||
body: 'Course-aligned hardware platforms for school labs and after-school programs.',
|
||||
iconKey: 'platform',
|
||||
suitableFor: ['K–12 schools', 'STEM programs', 'Clubs'],
|
||||
},
|
||||
{
|
||||
title: 'Open SDK platforms',
|
||||
body: 'Hands-on coding access for advanced students and faculty research.',
|
||||
iconKey: 'sensor',
|
||||
suitableFor: ['Universities', 'AI / CS labs', 'Dissertations'],
|
||||
},
|
||||
],
|
||||
useCases: [
|
||||
'AI and motion programming labs',
|
||||
'Robotics clubs and competitions',
|
||||
'Open days, expos, and school showcases',
|
||||
'Faculty research and dissertation projects',
|
||||
'STEM labs and innovation centers',
|
||||
'AI and robotics workshops',
|
||||
'Student innovation programs',
|
||||
'University research demos',
|
||||
'Coding and robotics clubs',
|
||||
'Government innovation programs',
|
||||
],
|
||||
benefits: [
|
||||
{ title: 'Future-ready skills', body: 'Students learn real-world robotics on real platforms.' },
|
||||
{ title: 'Signature programs', body: 'Flagship robotics labs attract talent and partnerships.' },
|
||||
{ title: 'Research uplift', body: 'Quadruped and humanoid platforms support advanced research.' },
|
||||
{ title: 'Visible innovation', body: 'Robotics labs position the institution as forward-looking.' },
|
||||
{ title: 'Hands-on learning', body: 'Students work with real humanoid and quadruped platforms.' },
|
||||
{ title: 'Stronger engagement', body: 'Robotics labs raise student interest and retention.' },
|
||||
{ title: 'Future-ready STEM', body: 'Curricula stay aligned with current AI and robotics tools.' },
|
||||
{ title: 'Innovation positioning', body: 'Signature labs help institutions attract talent and partnerships.' },
|
||||
{ title: 'Demo-ready setups', body: 'Pre-configured units ready for open days and showcases.' },
|
||||
{ title: 'Local support', body: 'A UAE-based robotics team handles setup, training, and service.' },
|
||||
],
|
||||
suggestedRobots: [
|
||||
{ brand: 'Unitree', family: 'G1 humanoid', body: 'Research-friendly humanoid platform for education labs.' },
|
||||
{ brand: 'Unitree', family: 'Go2 / Go2 EDU', body: 'Programmable quadruped for autonomy and STEM coursework.' },
|
||||
{ brand: 'Unitree', family: 'B2 quadruped', body: 'Higher-capability platform for advanced research and projects.' },
|
||||
{
|
||||
brand: 'Unitree',
|
||||
family: 'G1 humanoid',
|
||||
body: 'Research-friendly humanoid platform for education and AI labs.',
|
||||
chips: ['Humanoid', 'AI', 'Research'],
|
||||
},
|
||||
{
|
||||
brand: 'Unitree',
|
||||
family: 'Go2 / Go2 EDU',
|
||||
body: 'Programmable quadruped for autonomy and STEM coursework.',
|
||||
chips: ['Quadruped', 'STEM', 'SDK'],
|
||||
},
|
||||
{
|
||||
brand: 'Unitree',
|
||||
family: 'B2 quadruped',
|
||||
body: 'Higher-capability platform for advanced research projects.',
|
||||
chips: ['Quadruped', 'Research', 'Outdoor'],
|
||||
},
|
||||
],
|
||||
ctaTitle: 'Build a future-ready robotics program.',
|
||||
ctaBody:
|
||||
'Tell us about your school, university, or innovation lab. Our Dubai team will recommend the right robotics setup and arrange a demo or quotation.',
|
||||
seoTitle: 'Education & STEM Robots in UAE | YS Lootah Robotics',
|
||||
seoDescription:
|
||||
'Humanoid and quadruped robots for UAE schools, universities, and innovation labs. Hands-on AI and robotics education with local Dubai support.',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user