Merge pull request #61 from Groway-Studio/develop

Footer section updated

Author: cristiandelcidd

src/component/shared/footer.tsx

@@ -26,40 +26,39 @@ export default function Footer() {
             <a href="/#">Brochure</a>
           </span>
         </aside> */}
-        <aside className="sectionRight">
-          <aside className="ubication">
-            <article>
-              <strong>Perú</strong>
-              <p>
-                AV. El Derby 055 Edificio Cronos, Torre 1 Piso 7 Santiago de
-                Surco Lima - Perú
-              </p>
-            </article>
-          </aside>
-          <article className="socials">
-            <a
-              href="https://www.instagram.com/groway.studio"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <img src={igIlus} alt="Groway.Studio" />
-            </a>
-            <a
-              href="https://www.linkedin.com/company/growaystudio"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <img src={linkedinIlus} alt="Groway.Studio" />
-            </a>
-            <a
-              href="https://www.facebook.com/groway.studio"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <img src={fbIlus} alt="Groway.Studio" />
-            </a>
+
+        <aside className="ubication">
+          <article>
+            <strong>Perú</strong>
+            <p>
+              AV. El Derby 055 Edificio Cronos, Torre 1 Piso 7 Santiago de Surco
+              Lima - Perú
+            </p>
           </article>
         </aside>
+        <article className="socials">
+          <a
+            href="https://www.instagram.com/groway.studio"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img src={igIlus} alt="Groway.Studio" />
+          </a>
+          <a
+            href="https://www.facebook.com/groway.studio"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img src={fbIlus} alt="Groway.Studio" />
+          </a>
+          <a
+            href="https://www.linkedin.com/company/growaystudio"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img src={linkedinIlus} alt="Groway.Studio" />
+          </a>
+        </article>
       </section>
     </div>
   );

src/sass/shared/_footer.scss

@@ -10,19 +10,19 @@
     width: 90%;
     margin: 0 auto;
     padding: 30px 0;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    align-items: center;
 
     @include tablet {
-      max-width: $container-tablet;
-      width: 100%;
+      grid-template-columns: repeat(3, auto);
+      gap: 1rem;
     }
 
     @include phone {
       max-width: $container-phone;
+      grid-template-columns: 100%;
       padding: 70px 0;
-      width: 100%;
       display: grid;
     }
 
@@ -44,6 +44,7 @@
 
       @include tablet {
         margin: 0;
+        width: 100%;
       }
 
       .brandOne {
@@ -57,7 +58,7 @@
       }
 
       .brandTwo {
-        width: 30%;
+        width: 150px;
         margin-left: 14px;
         max-width: 200px;
 
@@ -112,55 +113,44 @@
         text-decoration: none;
       }
     }
-    .sectionRight {
-      width: 45%;
+
+    .socials {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      justify-content: right;
+      gap: 2.5rem;
+      margin: 0 0 0 auto;
+
+      a {
+        line-height: 0;
+      }
 
       @include phone {
         width: 100%;
+        justify-content: center;
+        gap: 2rem;
       }
 
       @include tablet {
-        position: relative;
-      }
-
-      .socials {
-        //width: 50%;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        justify-content: right;
-        padding-top: 12px;
-        gap: 2.5rem;
-
-        @include phone {
-          width: 100%;
-          justify-content: center;
-          gap: 2rem;
-        }
-
-        @include tablet {
-          position: absolute;
-          top: 50%;
-          left: 55%;
-          gap: 1rem;
-        }
+        // position: absolute;
+        // top: 50%;
+        // left: 55%;
+        gap: 1rem;
       }
     }
+
     .ubication {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+      display: none;
 
       @include tablet {
-        display: grid;
-        grid-template-columns: repeat(2, 50%);
+        display: block;
         gap: 10px;
       }
 
       @include phone {
-        display: grid;
+        display: block;
         gap: 1rem;
-        grid-template-columns: calc(60% - 0.5rem) calc(40% - 0.5rem);
       }
       article {
         &:first-child {