Mobile design

assets/styles/components/_hero.scss

@@ -0,0 +1,65 @@
+@import "../modules/variables";
+@import "../modules/breakpoints";
+@import "../modules/mixins";
+
+.header-container {
+    margin-top: 100px;
+    margin-bottom: 100px;
+
+    @include viewport-medium {
+        text-align: center;
+        padding: 50px 120px;
+        margin: 100px auto;
+    }
+
+    &__hero {
+        display: grid;
+        gap: 30px;
+
+        @include viewport-large {
+            text-align: center;
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        &__home {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            padding-left: 20px;
+            align-items: left;
+
+            @include viewport-medium {
+                align-items: center;
+            }
+
+            &__icon-title {
+                display: flex;
+                flex-direction: row;
+                /* justify-content: left; */
+
+                ion-icon {
+                    position: relative;
+                    width: 42px;
+                    margin-right: 15px;
+                    top: 7px;
+                    font-size: 40px;
+                }
+            }
+
+            h1 {
+                font-family: $title-font;
+                font-size: 40px;
+                font-weight: 600;
+            }
+
+            p {
+                margin: 10px;
+                font-family: $title-font;
+                font-size: 25px;
+                font-weight: 300;
+            }
+
+        }
+
+    }
+}

assets/styles/components/_main.scss

@@ -0,0 +1,139 @@
+@import "../modules/variables";
+@import "../modules/breakpoints";
+@import "../modules/mixins";
+
+
+.main-container {
+    margin: 0;
+    padding: 0;
+
+    &__use-container {
+        padding-top: 100px;
+        padding-bottom: 100px;
+        background-color: $background;
+        text-align: center;
+
+        @include viewport-large {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+        }
+
+        &__first-section {
+
+            @include viewport-large {
+                width: 45%;
+            }
+
+            h2 {
+                font-size: 36px;
+                margin-bottom: 18px;
+            }
+
+            p {
+                font-size: 16px;
+                line-height: 1.6em;
+            }
+
+            &__light-container {
+                @extend %light-container;
+
+                &__link-a {
+                    @extend %link-a;
+                }
+            }
+        }
+
+    }
+
+    &__opt-container {
+        margin: 0;
+        padding-top: 100px;
+        padding-bottom: 100px;
+
+        /* display: flex;
+        flex-direction: column;
+        justify-content: center; */
+
+
+        &__article-container {
+            padding-top: 100px;
+            padding-bottom: 100px;
+            display: grid;
+            place-items: center;
+
+            @include viewport-large {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                grid-template-areas: "text image";
+                place-items: center;
+
+                padding: 100px 50px;
+
+                &:nth-child(even) {
+                    .main-container__opt-container__article-container__image {
+                        grid-area: text;
+                    }
+                }
+
+            }
+
+            &__info {
+                text-align: left;
+                padding: 0 16px;
+
+                h2 {
+                    margin-bottom: 18px;
+                }
+
+                p {
+                    font-size: 16px;
+                    line-height: 1.6em;
+                }
+
+                &__dark-container {
+                    @extend %dark-container;
+
+                    a {
+                        @extend %link-a;
+                    }
+
+                    code {
+                        color: $colorDark;
+                    }
+                }
+            }
+
+
+            &__image {
+
+                padding: 1rem;
+
+                @include viewport-medium {
+                    width: 70%;
+                }
+
+                @include viewport-large {
+                    width: 80%;
+                    padding: 0;
+                }
+            }
+        }
+    }
+}
+
+
+.footer-section {
+    width: 100%;
+    height: 24rem;
+    background-color: $colorDark;
+    padding: 100px 0;
+    margin-top: 100px;
+
+    &__text {
+        text-align: center;
+        padding: 30px 50px;
+        color: $colorLight;
+    }
+
+}

assets/styles/modules/_app.scss

@@ -6,3 +6,20 @@
   text-decoration: none;
   text-rendering: optimizeLegibility;
 }
+
+img {
+  width: 100%;
+  border-radius: 10px;
+  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
+}
+
+code {
+  border-radius: 5px;
+  padding: 3px;
+  background-color: #F2F2F2;
+  color: #3C3C3C;
+}
+
+header, main {
+  padding: 20px;
+}

assets/styles/modules/_breakpoints.scss

@@ -1,8 +1,13 @@
 //BREAKPOINTS MOBILE FIRST
-@import "variables";
 
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) {}
+@mixin viewport-medium {
+    @media(min-width: 768px) {
+        @content;
+    }
+}
 
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) {}
+@mixin viewport-large {
+    @media(min-width: 1366px) {
+        @content;
+    }
+}

assets/styles/modules/_mixins.scss

@@ -0,0 +1,31 @@
+@mixin text($size, $color, $weight) {
+    font-size: $size;
+    color: $color;
+    font-weight: $weight;
+}
+
+%link-a {
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+}
+
+%light-container {
+    width: 100%;
+    font-size: 14px;
+    border-radius: 4px;
+    padding: 1em;
+    margin-top: 1em;
+    margin-bottom: 2em;
+    background: white;
+    padding: 10px auto;
+}
+
+%dark-container {
+    width: 100%;
+    font-size: 14px;
+    border-radius: 4px;
+    padding: 1em;
+    margin-top: 1em;
+    margin-bottom: 2em;
+    background: #EBEEF0;
+    padding: 10px auto;
+}

assets/styles/modules/_typography.scss

@@ -1,5 +1,9 @@
 @import url('https://rsms.me/inter/inter.css');
 html { font-family: 'Inter', sans-serif; }
+
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700&display=swap');
+$title-font: 'Work Sans', sans-serif;
+
 @supports (font-variation-settings: normal) {
   html { font-family: 'Inter var', sans-serif; }
 }

assets/styles/modules/_variables.scss

@@ -1,2 +1,4 @@
 $colorLight: #fff;
 $colorDark: #000;
+
+$background: #F4F7FC;