From 55d6f26542564fc9764151d6ead655909246ed81 Mon Sep 17 00:00:00 2001
From: edmishchenko <87074420+edmishchenko@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:06:09 +0100
Subject: [PATCH] Update getStarted files

---
 docs/css/getStarted.css | 36 ++++++++++++++++++----
 docs/getStarted.html    | 68 ++++++++++++++++++++++-------------------
 2 files changed, 67 insertions(+), 37 deletions(-)

diff --git a/docs/css/getStarted.css b/docs/css/getStarted.css
index c67af99..7fe5269 100644
--- a/docs/css/getStarted.css
+++ b/docs/css/getStarted.css
@@ -12,6 +12,9 @@ body {
 
 header {
     padding: 40px 5%;
+    width: 100%;
+    margin: 0 auto;
+    max-width: 1400px;
     display: flex;
     justify-content: space-between;
     align-content: end;
@@ -104,6 +107,8 @@ header .logo-red {
 
 main {
     padding: 20px 5%;
+    margin: 0 auto;
+    max-width: 1400px;
     display: flex;
 }
 
@@ -115,13 +120,16 @@ main .second-column {
     width: 70%;
     padding-right: 5%;
     margin-left: 22%;
-    font-family: 'Inter', sans-serif;
+    font-family: 'Mona Sans', sans-serif;
 }
 
 main .third-column {
     width: 20%;
+    max-width: 500px;
     display: flex;
     position: fixed;
+    font-family: 'Mona Sans', sans-serif;
+    font-weight: 400;
 }
 
 main .third-column .tree-container {
@@ -131,30 +139,32 @@ main .third-column .tree-container {
     font-weight: 400;
     color: rgba(130, 130, 130, 1);
     line-height: 38px;
+    font-family: 'Mona Sans', sans-serif;
 }
 
 main .third-column .tree-container p {
     line-height: 30px;
+    font-family: 'Mona-Sans', sans-serif;
+    font-weight: 400;
 }
 
 main .third-column .tree-container p a{
     font-weight: 400;
     margin: 0 0 18px;
     color: rgba(81, 81, 81, 1);
-    padding-left: 16px;
+
 }
 
 main .third-column .tree-container p a .current-dot {
-    position: absolute;
-    left: 0;
     padding-top: 5px;
+    padding-right: 12px;
     color: transparent;
 }
 
 main .third-column .tree-container a {
     text-decoration: none;
     font-size: 16px;
-    font-family: 'Inter', sans-serif;
+    font-family: 'Mona Sans', sans-serif;
     font-weight: 500;
     line-height: 19px;
     color: rgba(51, 51, 51, 1);
@@ -330,6 +340,8 @@ main .second-column .container .article-block{
     border-radius: 12px;
     margin-bottom: 16px;
     margin-right: 16px;
+    display: flex;
+    flex-direction: column;
 }
 
 main .second-column .container .article-block img {
@@ -344,7 +356,8 @@ main .second-column .container .article-block p {
     font-size: 20px;
     line-height: 24px;
     margin-top: 0;
-    margin-bottom: 38px;
+    padding-bottom: 28px;
+    margin-bottom: auto;
 }
 
 main .second-column .container .article-block button {
@@ -358,6 +371,8 @@ main .second-column .container .article-block button {
     line-height: 19px;
     width: 100%;
     font-family: 'Inter', sans-serif;
+    margin-top: auto;
+    margin-bottom: 18px;
 }
 
 main .second-column .container .article-block button:hover {
@@ -427,7 +442,16 @@ footer .social-media-container svg {
         box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04);
         transition: opacity 0.5s ease, transform 0.5s ease;
         display: block;
+        margin-left: -5%;
+        padding-left: 5%;
+    }
+
+    main .third-column .tree-container {
+        padding-left: 15%;
+    }
 
+    main .third-column .tree-container p a {
+        line-height: 50px;
     }
 
     main .second-column .container {
diff --git a/docs/getStarted.html b/docs/getStarted.html
index 1abcf87..1237ab7 100644
--- a/docs/getStarted.html
+++ b/docs/getStarted.html
@@ -40,9 +40,9 @@ <h3 id="prerequisites">1. Prerequisites</h3>
         <ol>
             <li>Xcode (For macOS): <span class="inter-regular">If you don't have Xcode installed, it is recommended to install it from the Mac App Store. Xcode includes Swift, and the installation of Xcode will automatically include Swift as part of the development tools.</span></li>
             <li>Android Studio: <span class="inter-regular">Android Studio is the official integrated development environment (IDE) for Android app development. You can download Android Studio from the official website: <a
-                    href=""> Android Studio Download.</a></span></li>
+                    href="https://developer.android.com/studio"> Android Studio Download.</a></span></li>
             <li>SCADE IDE <span class="inter-regular">(Optional): If you are interested in using Scade for Swift development, you can download it from SCADE's official website: <a
-                    href="">Scade Download.</a></span></li>
+                    href="https://www.scade.io/download">Scade Download.</a></span></li>
         </ol>
         <h3 id="install">2. How to Install Swift for Android</h3>
         <h4>For macOS</h4>
@@ -57,7 +57,7 @@ <h4>For macOS</h4>
             <li class="inter-regular">Run the downloaded installer and follow the setup instructions.</li>
             <li class="inter-regular">Launch Android Studio eand complete the initial configuration, including the installation of the Android SDK.</li>
             <li class="inter-regular">Install Android NDK, by clicking on Tools -> SDK Manager -> SDK Tools tab. Select the NDK(side by side) and CMake checkboxes. Click OK to download and install.</li>
-            <li class="inter-regular">Install Android Emulator if you want to run on Android emulators</li>
+            <li class="inter-regular"><a href="https://developer.android.com/studio/run/emulator">Install Android Emulator</a> if you want to run on Android emulators</li>
         </ol>
 
         <ol class="dots">
@@ -88,7 +88,7 @@ <h4>For Linux</h4>
         <pre>Currently Swift for Android is available for macOS only. It will be available for Linux very soon.</pre>
 
         <h3>3. Next Steps: Create a Hello World App on Android Studio using Swift</h3>
-        <pre class="bottom-border">Refer <a href="">here</a> to quickly create and run the app on Android Studio using Swift.</pre>
+        <pre class="bottom-border">Refer <a href="https://github.com/6vedant/swift-for-android-docs/blob/main/HowToCreateHelloWorldApp.md">here</a> to quickly create and run the app on Android Studio using Swift.</pre>
 
         <h2 id="helloWorld">How to Create a Hello World Application</h2>
         <ol class="dots">
@@ -337,7 +337,7 @@ <h3>Run the Hello World App</h3>
 
         <img src="img/mobile-code-example.jpg" alt="" class="mobile-code-example">
 
-        <p>Source Code: Please find the source code of Hello World App(Swift for Android) <a href="">here</a></p>
+        <p>Source Code: Please find the source code of Hello World App(Swift for Android) <a href="https://github.com/6vedant/swift-for-android-hello-world">here</a></p>
         <div class="bottom-border"></div>
 
         <h2 id="goFurther">Go Further</h2>
@@ -347,38 +347,44 @@ <h2 id="goFurther">Go Further</h2>
             <div class="article-block">
                 <img src="img/article-image.jpg" alt="">
                 <p>Implement RecyclerView using Swift PM libraries</p>
-                <button>
-                    Read article
-                </button>
+                <a href="https://medium.com/@SCADE/implement-recyclerview-using-swift-pm-libraries-eacc1efd48af">
+                    <button>
+                        Read article
+                    </button>
+                </a>
             </div>
             <div class="article-block">
                 <img src="img/article-image.jpg" alt="">
-                <p>Implement RecyclerView using Swift PM libraries</p>
-                <button>
-                    Read article
-                </button>
-            </div>
-            <div class="article-block">
-                <img src="img/article-image.jpg" alt="">
-                <p>Implement RecyclerView using Swift PM libraries</p>
-                <button>
-                    Read article
-                </button>
+                <p>Swift for Android: How to use Swift-Crypto with Android Studio</p>
+                <a href="https://medium.com/@SCADE/swift-for-android-how-to-use-swift-crypto-with-android-studio-5dd7ecaf47ac">
+                    <button>
+                        Read article
+                    </button>
+                </a>
             </div>
             <div class="article-block">
                 <img src="img/article-image.jpg" alt="">
-                <p>Implement RecyclerView using Swift PM libraries</p>
-                <button>
-                    Read article
-                </button>
-            </div>
-            <div class="article-block">
-                <img src="img/article-image.jpg" alt="">
-                <p>Implement RecyclerView using Swift PM libraries</p>
-                <button>
-                    Read article
-                </button>
+                <p>Using Swift PM libraries in the Android Studio projects</p>
+                <a href="https://medium.com/@SCADE/using-swift-pm-libraries-in-the-android-studio-projects-7cef47c300bf">
+                    <button>
+                        Read article
+                    </button>
+                </a>
             </div>
+<!--            <div class="article-block">-->
+<!--                <img src="img/article-image.jpg" alt="">-->
+<!--                <p>Implement RecyclerView using Swift PM libraries</p>-->
+<!--                <button>-->
+<!--                    Read article-->
+<!--                </button>-->
+<!--            </div>-->
+<!--            <div class="article-block">-->
+<!--                <img src="img/article-image.jpg" alt="">-->
+<!--                <p>Implement RecyclerView using Swift PM libraries</p>-->
+<!--                <button>-->
+<!--                    Read article-->
+<!--                </button>-->
+<!--            </div>-->
         </div>
     </div>
     <div class="first-column"></div>
@@ -532,7 +538,7 @@ <h2 id="goFurther">Go Further</h2>
         const targetId = link.getAttribute('href').substring(1);
         const targetElement = document.getElementById(targetId);
         if (targetElement) {
-            observer = new IntersectionObserver(handleIntersection, { threshold: 0.5 });
+            observer = new IntersectionObserver(handleIntersection, { threshold: 1 });
             observer.observe(targetElement);
         }