From 6aa3c8d7f3f6a68c05cd9079c044bc3c9cb8b5f4 Mon Sep 17 00:00:00 2001
From: pinokokol <pino.kokol@gmail.com>
Date: Mon, 23 Sep 2024 21:59:05 +0200
Subject: [PATCH] Fixes

---
 src/pages/ai/ai-page.scss |  49 +++++++++---
 src/pages/ai/index.js     | 158 +++++++++++++++++++++++---------------
 static/locales/en/ai.json |   2 +-
 3 files changed, 134 insertions(+), 75 deletions(-)

diff --git a/src/pages/ai/ai-page.scss b/src/pages/ai/ai-page.scss
index 907db91..0eea5dc 100644
--- a/src/pages/ai/ai-page.scss
+++ b/src/pages/ai/ai-page.scss
@@ -8,7 +8,7 @@ $phone-width: 90%;
 .ai {
   .header {
     width: 100%;
-    padding-top: 40px;
+    padding-top: 60px;
     padding-bottom: 40px;
     background-color: $blue-300;
 
@@ -62,7 +62,7 @@ $phone-width: 90%;
         display: flex;
         justify-content: space-between;
         align-items: stretch;
-        border: 1px solid black;
+        border: 2px solid black;
 
         .content {
           padding: 1rem;
@@ -71,7 +71,7 @@ $phone-width: 90%;
         }
 
         .table-separator {
-          width: 1px;
+          width: 2px;
           background-color: black;
         }
 
@@ -94,7 +94,7 @@ $phone-width: 90%;
       }
 
       .table-end {
-        border: 1px solid black;
+        border: 2px solid black;
         border-top: none;
         font-size: 18px;
         font-weight: 600;
@@ -155,10 +155,11 @@ $phone-width: 90%;
       padding-top: 40px;
 
       .content-body {
-        width: $pc-width;
+        width: $phone-width;
         display: flex;
         margin-left: -15px;
         margin-right: -15px;
+        gap: 2rem;
       }
 
       .mobile-image {
@@ -276,6 +277,18 @@ $phone-width: 90%;
   }
 }
 
+@include device-specific($media-xs) {
+  .ai {
+    .main-content {
+      .index-content-component {
+        .items-margin-top {
+          margin-top: 0 !important;
+        }
+      }
+    }
+  }
+}
+
 
 @include device-specific($media-phone) {
   .ai {
@@ -341,7 +354,7 @@ $phone-width: 90%;
 
     .index-content-component {
       .content-body {
-        width: $phone-width;
+        width: $phone-width !important;
         flex-wrap: wrap;
         display: flex;
         margin-left: -15px;
@@ -360,10 +373,6 @@ $phone-width: 90%;
         margin-top: 40px;
       }
 
-      .items-margin-top {
-        margin-top: 0;
-      }
-
       .points {
         padding-left: 15px;
       }
@@ -440,6 +449,18 @@ $phone-width: 90%;
     .beige-arrow-reversed {
       border-width: 0 100vw 120px 0;
     }
+
+    .main-content {
+      .index-content-component {
+        .content-body {
+          width: $tablet-width;
+        }
+
+        .items-margin-top {
+          margin-top: 40px !important;
+        }
+      }
+    }
   }
 
 }
@@ -472,6 +493,14 @@ $phone-width: 90%;
     .beige-arrow-reversed {
       border-width: 0 100vw 240px 0;
     }
+
+    .main-content {
+      .index-content-component {
+        .content-body {
+          width: $pc-width;
+        }
+      }
+    }
   }
 
 }
\ No newline at end of file
diff --git a/src/pages/ai/index.js b/src/pages/ai/index.js
index fbb5a60..f287f84 100644
--- a/src/pages/ai/index.js
+++ b/src/pages/ai/index.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import Link from "gatsby-link";
 import { translate } from "react-i18next";
 import { Helmet } from "react-helmet";
 import { Footer } from "../../components/shared/footer/footer";
@@ -72,15 +73,15 @@ export default class ThanksPage extends Component {
           <div className="index-content-component">
             <div className="flex-column d-flex align-items-center">
               <div className="flex-column d-flex align-items-center" style={{ marginTop: "60px" }}>
-                <div className="mt-5 content-body">
-                  <Col md={6}>
+                <Row className="mt-5 content-body">
+                  <Col>
                     <img
                       src={stockAi}
-                      style={{ width: "100%", borderRadius: "16px", border: "8px solid #DCDCDC" }}
+                      style={{ width: "100%", minWidth: "300px", borderRadius: "16px", border: "8px solid #DCDCDC" }}
                       alt="stock-ai-form"
                     />
                   </Col>
-                  <Col md={6}>
+                  <Col>
                     <div className="title">
                       <h2>{t("services.item1.title")}</h2>
                       <div className="title-underline" />
@@ -88,93 +89,113 @@ export default class ThanksPage extends Component {
                     <h3>{t("services.item1.subtitle")}</h3>
                     <p>{t("services.item1.description")}</p>
                     <div>
-                      <Col ms={12}>
-                        <div className="d-flex">
-                          <Col md="6">
+                      <Col>
+                        <div className="d-flex flex-column flex-sm-row">
+                          <Col>
                             <Itemized label={t("services.item1.items.item1")} />
                           </Col>
-                          <Col md="6">
+                          <Col>
                             <Itemized label={t("services.item1.items.item2")} />
                           </Col>
                         </div>
-                        <div className="items-margin-top d-flex">
-                          <Col md="6">
+                        <div className="items-margin-top d-flex flex-column flex-sm-row">
+                          <Col>
                             <Itemized label={t("services.item1.items.item3")} />
                           </Col>
-                          <Col md="6">
+                          <Col>
                             <Itemized label={t("services.item1.items.item4")} />
                           </Col>
                         </div>
                       </Col>
                     </div>
+                    <Col className="mt-5">
+                      <a
+                        href="https://sunesis.si/services/ai"
+                        className="mt-5"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <span className="overview-btn">{t("services.learn-more")}</span>
+                      </a>
+                    </Col>
                   </Col>
-                </div>
+                </Row>
 
-                <div className="space-top content-body">
-                  <Col md={6} className="mobile-image">
+                <Row className="space-top content-body">
+                  <Col className="mobile-image">
                     <img
                       src={stockKnowledge}
-                      style={{ width: "100%", borderRadius: "16px", border: "8px solid #DCDCDC" }}
+                      style={{ width: "100%", minWidth: "300px", borderRadius: "16px", border: "8px solid #DCDCDC" }}
                       alt="stock-architecture"
                     />
                   </Col>
 
-                  <Col md={6}>
+                  <Col>
                     <h3 style={{ marginBottom: 0 }}>{t("services.item2.above-title")}</h3>
                     <div className="title" style={{ marginBottom: "30px" }}>
-                      <h2>{t("services.item2.title")}</h2>
+                      <h2 style={{ margin: 0 }}>{t("services.item2.title")}</h2>
                       <div className="title-underline" />
                     </div>
                     <p>{t("services.item2.description")}</p>
                     <p>{t("services.item2.description2")}</p>
-                    <div>
-                      <Col ms={12}>
-                        <div className="d-flex">
-                          <Col md="6">
+                    <Row>
+                      <Col>
+                        <div className="d-flex flex-column flex-sm-row">
+                          <Col>
                             <Itemized label={t("services.item2.items.item1")} />
                           </Col>
-                          <Col md="6">
+                          <Col>
                             <Itemized label={t("services.item2.items.item2")} />
                           </Col>
                         </div>
-                        <div className="items-margin-top d-flex">
-                          <Col md="6">
+                        <div className="items-margin-top d-flex flex-column flex-sm-row">
+                          <Col>
                             <Itemized label={t("services.item2.items.item3")} />
                           </Col>
-                          <Col md="6">
+                          <Col>
                             <Itemized label={t("services.item2.items.item4")} />
                           </Col>
                         </div>
-                        <div className="items-margin-top d-flex">
-                          <Col md="6">
+                        <div className="items-margin-top d-flex flex-column flex-sm-row">
+                          <Col>
                             <Itemized label={t("services.item2.items.item5")} />
                           </Col>
                         </div>
                       </Col>
-                    </div>
+                    </Row>
+                    <Col className="mt-5">
+                      <a
+                        href="https://sunesis.si/products/ai-smart-assistant"
+                        className="mt-5"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <span className="overview-btn">{t("services.learn-more")}</span>
+                      </a>
+                    </Col>
                   </Col>
-                  <Col md={6} className="mobile-image-hidden">
+                  <Col className="mobile-image-hidden">
                     <img
                       src={stockKnowledge}
-                      style={{ width: "100%", borderRadius: "16px", border: "8px solid #DCDCDC" }}
+                      style={{ width: "100%", minWidth: "300px", borderRadius: "16px", border: "8px solid #DCDCDC" }}
                       alt="stock-architecture"
                     />
                   </Col>
-                </div>
+                </Row>
               </div>
             </div>
 
             <div className="flex-column d-flex align-items-center">
               <div className="flex-column d-flex align-items-center">
-                <div className="mt-5 content-body">
-                  <Col md={6}>
+                <Row className="mt-5 content-body">
+                  <Col>
                     <img
                       src={stockSmartAssistant}
-                      style={{ width: "100%", borderRadius: "16px", border: "8px solid #DCDCDC" }}
+                      style={{ width: "100%", minWidth: "300px", borderRadius: "16px", border: "8px solid #DCDCDC" }}
                       alt="stock-security"
                     />
                   </Col>
-                  <Col md={6}>
+                  <Col>
                     <div className="title">
                       <h2>{t("services.item3.title")}</h2>
                       <div className="title-underline" />
@@ -182,36 +203,45 @@ export default class ThanksPage extends Component {
                     <h3>{t("services.item3.subtitle")}</h3>
                     <p>{t("services.item3.description")}</p>
                     <p>{t("services.item3.description2")}</p>
-                    <div>
-                      <Col ms={12}>
-                        <div className="d-flex">
-                          <Col md="6">
-                            <Itemized label={t("services.item3.items.item1")} />
-                          </Col>
-                          <Col md="6">
-                            <Itemized label={t("services.item3.items.item2")} />
-                          </Col>
-                        </div>
-                        <div className="items-margin-top d-flex">
-                          <Col md="6">
-                            <Itemized label={t("services.item3.items.item3")} />
-                          </Col>
-                          <Col md="6">
-                            <Itemized label={t("services.item3.items.item4")} />
-                          </Col>
-                        </div>
-                        <div className="items-margin-top d-flex">
-                          <Col md="6">
-                            <Itemized label={t("services.item3.items.item5")} />
-                          </Col>
-                          <Col md="6">
-                            <Itemized label={t("services.item3.items.item6")} />
-                          </Col>
-                        </div>
-                      </Col>
-                    </div>
+                    <Col>
+                      <div className="d-flex flex-column flex-sm-row">
+                        <Col>
+                          <Itemized label={t("services.item3.items.item1")} />
+                        </Col>
+                        <Col>
+                          <Itemized label={t("services.item3.items.item2")} />
+                        </Col>
+                      </div>
+                      <div className="items-margin-top d-flex flex-column flex-sm-row">
+                        <Col>
+                          <Itemized label={t("services.item3.items.item3")} />
+                        </Col>
+                        <Col>
+                          <Itemized label={t("services.item3.items.item4")} />
+                        </Col>
+                      </div>
+                      <div className="items-margin-top d-flex flex-column flex-sm-row">
+                        <Col>
+                          <Itemized label={t("services.item3.items.item5")} />
+                        </Col>
+                        <Col>
+                          <Itemized label={t("services.item3.items.item6")} />
+                        </Col>
+                      </div>
+                    </Col>
+
+                    <Col className="mt-5 mb-5">
+                      <a
+                        href="https://sunesis.si/products/ai-knowledge-mentor"
+                        className="mt-5"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <span className="overview-btn">{t("services.learn-more")}</span>
+                      </a>
+                    </Col>
                   </Col>
-                </div>
+                </Row>
               </div>
             </div>
           </div>
diff --git a/static/locales/en/ai.json b/static/locales/en/ai.json
index b90b84d..04e9644 100644
--- a/static/locales/en/ai.json
+++ b/static/locales/en/ai.json
@@ -2,7 +2,7 @@
   "meta": {
     "title": "Kumuluz"
   },
-  "title": "Unlock innovation , efficiency and growth with AI and GPT",
+  "title": "Unlock innovation, efficiency and growth with AI and GPT",
   "block1": "We specialize in embedding cutting-edge AI technologies into your existing enterprise applications by leveraging Open AI services, including OpenAI's GPT models, AI search and others.",
   "block2": "With focus on data security, privacy, seamless integration of conversational user interfaces with business applications and cost efficiency.",
   "item1": "Development of new AI applications for your business",