docs(home): changes icons pics

This commit is contained in:
2025-08-27 07:38:03 -05:00
parent 045fd66832
commit 5d5401b248
7 changed files with 181 additions and 8 deletions

View File

@@ -12,7 +12,7 @@ type FeatureItem = {
const FeatureList: FeatureItem[] = [
{
title: "Install / Update",
Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
Svg: require("@site/static/img/install_update.svg").default,
description: (
<>
Installation of LST onto your server, including how to setup
@@ -22,7 +22,7 @@ const FeatureList: FeatureItem[] = [
},
{
title: "One Click Print",
Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
Svg: require("@site/static/img/one_click_print.svg").default,
description: (
<>
Full process on how the One click print flow and bussiness logic
@@ -32,7 +32,7 @@ const FeatureList: FeatureItem[] = [
},
{
title: "Logistics",
Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
Svg: require("@site/static/img/logistics.svg").default,
description: (
<>
All Logistcs topics sucks as "Fake Edi", LST-Datamart (items
@@ -43,12 +43,12 @@ const FeatureList: FeatureItem[] = [
},
{
title: "TMS intergration",
Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
Svg: require("@site/static/img/transport.svg").default,
description: <>The TMS intergration, how to setup and how to manage.</>,
},
{
title: "Notification System",
Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
Svg: require("@site/static/img/notification_system.svg").default,
description: (
<>
These are a set of notifications/alerts that have been defined
@@ -59,7 +59,7 @@ const FeatureList: FeatureItem[] = [
},
{
title: "Scanner app",
Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
Svg: require("@site/static/img/scanner_app.svg").default,
description: (
<>
The scanner app will be the same app with more limited features
@@ -73,9 +73,9 @@ const FeatureList: FeatureItem[] = [
function Feature({ title, Svg, description }: FeatureItem) {
return (
<div className={clsx("col col--4")}>
{/* <div className="text--center">
<div className="text--center">
<Svg className={styles.featureSvg} role="img" />
</div> */}
</div>
<div className="text--center padding-horiz--md">
<Heading as="h3">{title}</Heading>
<p>{description}</p>

View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="220"
height="180"
viewBox="0 0 220 180"
fill="none">
<!-- Server box -->
<rect x="20" y="40" width="180" height="90" rx="8" fill="#4F46E5"/>
<rect x="20" y="40" width="180" height="90" rx="8" stroke="#312E81" stroke-width="3"/>
<!-- Server indicator lights -->
<circle cx="40" cy="65" r="6" fill="#22C55E"/>
<circle cx="65" cy="65" r="6" fill="#FACC15"/>
<circle cx="90" cy="65" r="6" fill="#EF4444"/>
<!-- Text-like bars to represent config lines -->
<rect x="40" y="90" width="140" height="8" rx="2" fill="white" opacity="0.8"/>
<rect x="40" y="105" width="100" height="8" rx="2" fill="white" opacity="0.6"/>
<!-- Update arrow (circular) -->
<path d="M110 25a35 35 0 1 1 -24.75 10.25" stroke="#4F46E5" stroke-width="4" fill="none"/>
<path d="M85 35 L100 40 L95 25 Z" fill="#4F46E5"/>
</svg>

After

Width:  |  Height:  |  Size: 925 B

View File

@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="220"
height="180"
viewBox="0 0 220 180"
fill="none">
<!-- Box / Container -->
<rect x="60" y="60" width="100" height="70" rx="6" fill="#FACC15" stroke="#CA8A04" stroke-width="3"/>
<line x1="60" y1="95" x2="160" y2="95" stroke="#CA8A04" stroke-width="2"/>
<line x1="110" y1="60" x2="110" y2="130" stroke="#CA8A04" stroke-width="2"/>
<!-- Up arrow (inbound) -->
<path d="M50 80 L30 70 L30 90 Z" fill="#22C55E"/>
<rect x="30" y="70" width="10" height="20" fill="#22C55E"/>
<!-- Down arrow (outbound) -->
<path d="M190 100 L210 110 L210 90 Z" fill="#3B82F6"/>
<rect x="200" y="90" width="10" height="20" fill="#3B82F6"/>
<!-- Data lines under box (datamart metaphor) -->
<rect x="70" y="140" width="80" height="6" rx="2" fill="#4F46E5" opacity="0.8"/>
<rect x="85" y="150" width="50" height="6" rx="2" fill="#4F46E5" opacity="0.6"/>
</svg>

After

Width:  |  Height:  |  Size: 964 B

View File

@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="220"
height="180"
viewBox="0 0 220 180"
fill="none">
<!-- Bell body -->
<path d="M110 40
C90 40, 80 60, 80 80
V110
H140
V80
C140 60, 130 40, 110 40
Z"
fill="#4F46E5"
stroke="#312E81"
stroke-width="3"/>
<!-- Bell clapper -->
<circle cx="110" cy="115" r="8" fill="#FACC15" stroke="#CA8A04" stroke-width="2"/>
<!-- Notification alert bubble -->
<circle cx="145" cy="55" r="14" fill="#EF4444" stroke="#991B1B" stroke-width="3"/>
<text x="145" y="60" text-anchor="middle" font-size="12" font-family="Arial" fill="white">!</text>
<!-- Waves to show alert signal -->
<path d="M70 80 C60 70, 60 110, 70 100"
stroke="#4F46E5" stroke-width="3" fill="none" opacity="0.6"/>
<path d="M150 80 C160 70, 160 110, 150 100"
stroke="#4F46E5" stroke-width="3" fill="none" opacity="0.6"/>
</svg>

After

Width:  |  Height:  |  Size: 1008 B

View File

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="220"
height="180"
viewBox="0 0 220 180"
fill="none">
<!-- Printer body -->
<rect x="40" y="50" width="140" height="80" rx="8" fill="#4F46E5"/>
<rect x="40" y="50" width="140" height="80" rx="8" stroke="#312E81" stroke-width="3"/>
<!-- Paper slot -->
<rect x="60" y="40" width="100" height="20" rx="3" fill="white" stroke="#312E81" stroke-width="2"/>
<!-- Paper coming out -->
<rect x="70" y="110" width="80" height="40" rx="3" fill="white" stroke="#312E81" stroke-width="2"/>
<!-- "Label lines" on paper -->
<rect x="80" y="120" width="60" height="6" rx="2" fill="#4F46E5" opacity="0.8"/>
<rect x="80" y="132" width="40" height="6" rx="2" fill="#4F46E5" opacity="0.6"/>
<!-- Click circle -->
<circle cx="180" cy="40" r="16" fill="#22C55E" stroke="#065F46" stroke-width="3"/>
<path d="M176 35 L186 40 L176 45 Z" fill="white"/> <!-- "play"/click icon -->
</svg>

After

Width:  |  Height:  |  Size: 994 B

View File

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="220"
height="180"
viewBox="0 0 220 180"
fill="none">
<!-- Mobile device frame -->
<rect x="70" y="30" width="80" height="120" rx="12" fill="white" stroke="#312E81" stroke-width="3"/>
<rect x="70" y="30" width="80" height="120" rx="12" fill="#F3F4F6" opacity="0.5"/>
<!-- Screen inside -->
<rect x="78" y="45" width="64" height="90" rx="6" fill="white" stroke="#4F46E5" stroke-width="2"/>
<!-- Barcode lines -->
<rect x="86" y="65" width="4" height="50" fill="#4F46E5"/>
<rect x="94" y="65" width="2" height="50" fill="#4F46E5" opacity="0.6"/>
<rect x="102" y="65" width="6" height="50" fill="#4F46E5"/>
<rect x="112" y="65" width="3" height="50" fill="#4F46E5" opacity="0.8"/>
<rect x="120" y="65" width="5" height="50" fill="#4F46E5"/>
<rect x="130" y="65" width="2" height="50" fill="#4F46E5" opacity="0.6"/>
<rect x="136" y="65" width="4" height="50" fill="#4F46E5"/>
<!-- Scan highlight frame -->
<rect x="82" y="60" width="56" height="60" rx="4" stroke="#22C55E" stroke-width="3" stroke-dasharray="6 4"/>
<!-- App indicator light at bottom -->
<circle cx="110" cy="140" r="4" fill="#9CA3AF"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="260"
height="180"
viewBox="0 0 260 180"
fill="none">
<!-- Server box on left -->
<rect x="20" y="60" width="70" height="60" rx="6" fill="#4F46E5" stroke="#312E81" stroke-width="3"/>
<circle cx="40" cy="75" r="5" fill="#22C55E"/>
<circle cx="55" cy="75" r="5" fill="#FACC15"/>
<circle cx="70" cy="75" r="5" fill="#EF4444"/>
<!-- Connection line -->
<line x1="90" y1="90" x2="140" y2="90" stroke="#4F46E5" stroke-width="3" stroke-dasharray="6 4"/>
<!-- Truck body -->
<rect x="140" y="70" width="80" height="40" rx="4" fill="#F97316" stroke="#9A3412" stroke-width="3"/>
<!-- Truck cabin -->
<rect x="220" y="80" width="40" height="30" rx="3" fill="#FACC15" stroke="#CA8A04" stroke-width="3"/>
<!-- Truck wheels -->
<circle cx="160" cy="115" r="8" fill="#374151"/>
<circle cx="200" cy="115" r="8" fill="#374151"/>
<circle cx="235" cy="115" r="8" fill="#374151"/>
<!-- Integration arrows -->
<path d="M115 75 L125 90 L115 105" fill="none" stroke="#22C55E" stroke-width="3"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB