fix(apps): corrects fylo landing page images

Author: eriandev

apps/fylo-landing-page-with-two-column-layout/src/components/FirstContact.astro

@@ -6,7 +6,7 @@ import Button from '@/components/Button.astro'
 
 <section
   id="first-contact"
-  class="container flex flex-wrap-reverse items-center justify-center py-12 lg:flex-wrap lg:pb-0"
+  class="container flex flex-wrap-reverse items-center justify-center pb-12 pt-0 lg:flex-wrap lg:pb-0"
 >
   <div class="w-full text-center lg:w-1/2 lg:text-left">
     <h2 class="py-2 font-raleway text-3xl font-bold [text-wrap:balance] lg:text-5xl">
@@ -32,6 +32,6 @@ import Button from '@/components/Button.astro'
   </div>
 
   <div class="w-full pb-12 sm:w-2/3 lg:w-5/12">
-    <Icon name="illustration-1" />
+    <Icon name="illustration-1" class="mx-auto h-96 w-full" />
   </div>
 </section>

apps/fylo-landing-page-with-two-column-layout/src/components/Header.astro

@@ -3,16 +3,16 @@ import Icon from 'shared/components/Icon.astro'
 import Link from 'shared/components/Link.astro'
 ---
 
-<header class="container flex flex-wrap items-center justify-center py-12">
-  <div class="w-1/2">
+<header class="container flex flex-wrap items-center justify-center py-0 sm:py-12">
+  <div class="w-full sm:w-1/2">
     <Icon name="logo" width={166} />
   </div>
 
-  <nav class="invisible w-5/12 sm:visible">
-    <ul class="flex flex-wrap justify-center text-center align-middle text-sm md:text-base">
-      <li class="w-1/4"><Link to="#">Features</Link></li>
-      <li class="w-1/4"><Link to="#">Team</Link></li>
-      <li class="w-1/4"><Link to="#">Sign In</Link></li>
+  <nav class="hidden w-5/12 sm:block">
+    <ul class="flex flex-wrap justify-end text-center align-middle text-sm md:text-base">
+      <li class="w-1/3 text-right md:w-1/4"><Link to="#">Features</Link></li>
+      <li class="w-1/3 text-right md:w-1/4"><Link to="#">Team</Link></li>
+      <li class="w-1/3 text-right md:w-1/4"><Link to="#">Sign In</Link></li>
     </ul>
   </nav>
 </header>

apps/fylo-landing-page-with-two-column-layout/src/components/Testimonial.astro

@@ -66,8 +66,8 @@ const imageSrc = '/frontendmentor/fylo-landing-page-with-two-column-layout/image
       </article>
     </div>
 
-    <div class="mb-12 w-full sm:w-2/3 lg:mb-24 lg:w-5/12">
-      <Icon name="illustration-2" />
+    <div class="mb-12 w-full sm:w-2/3 lg:w-5/12">
+      <Icon name="illustration-2" class="mx-auto h-96 w-full" />
     </div>
   </div>
 </section>

apps/fylo-landing-page-with-two-column-layout/src/icons/facebook.svg

@@ -3,6 +3,14 @@ import type { Config } from 'shared/config/tailwindcss'
 const config: Config = {
   content: ['./src/**/*.{astro,html}', './node_modules/shared/components/*.astro'],
   theme: {
+    screens: {
+      xs: '320px',
+      sm: '576px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
+
     container: {
       center: true,
       padding: '2rem',