intials app

lstDocs/src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import Heading from "@theme/Heading";
+import styles from "./styles.module.css";
+
+type FeatureItem = {
+    title: string;
+    Svg: React.ComponentType<React.ComponentProps<"svg">>;
+    description: ReactNode;
+};
+
+const FeatureList: FeatureItem[] = [
+    {
+        title: "Install / Update",
+        Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
+        description: (
+            <>
+                Installation of LST onto your server, including how to setup
+                IIS, Windows Service. Also update process and flow
+            </>
+        ),
+    },
+    {
+        title: "One Click Print",
+        Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
+        description: (
+            <>
+                Full process on how the One click print flow and bussiness logic
+                works
+            </>
+        ),
+    },
+    {
+        title: "Logistics",
+        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+        description: (
+            <>
+                All Logistcs topics sucks as "Fake Edi", LST-Datamart (items
+                that are not included in alplamart but utlized in our day to
+                day)
+            </>
+        ),
+    },
+    {
+        title: "TMS intergration",
+        Svg: require("@site/static/img/undraw_docusaurus_react.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,
+        description: (
+            <>
+                These are a set of notifications/alerts that have been defined
+                useful, each one will be explaind how it works, and how to
+                subscript
+            </>
+        ),
+    },
+    {
+        title: "Scanner app",
+        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+        description: (
+            <>
+                The scanner app will be the same app with more limited features
+                in it, dedicated more to the type of scanner your are working
+                with to not flood the screen.
+            </>
+        ),
+    },
+];
+
+function Feature({ title, Svg, description }: FeatureItem) {
+    return (
+        <div className={clsx("col col--4")}>
+            <div className="text--center">
+                <Svg className={styles.featureSvg} role="img" />
+            </div>
+            <div className="text--center padding-horiz--md">
+                <Heading as="h3">{title}</Heading>
+                <p>{description}</p>
+            </div>
+        </div>
+    );
+}
+
+export default function HomepageFeatures(): ReactNode {
+    return (
+        <section className={styles.features}>
+            <div className="container">
+                <div className="row">
+                    {FeatureList.map((props, idx) => (
+                        <Feature key={idx} {...props} />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

lstDocs/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}