style: 💄 footer part 1 and some small bugs fixes

Qompa-Fi · Oct 17, 2024 · 642568a · 642568a
1 parent 7db265a
commit 642568a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 34 deletions.
diff --git a/src/components/widgets/Brands.astro b/src/components/widgets/Brands.astro
@@ -29,7 +29,7 @@ const {
           (image) =>
             image.src && (
               <div class="flex w-full justify-center sm:w-full md:w-auto col-span-1 my-2 lg:my-4 py-1 px-3 rounded-m">
-                <Image src={image.src} alt={image.alt || ''} class="max-h-12" width={120} height={48} layout="fixed" />
+                <Image src={image.src} alt={image.alt || ''} class="max-h-12" width={200} height={148} layout="fixed" />
               </div>
             )
         )

diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro
@@ -29,12 +29,12 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
 
 <footer class:list={[{ dark: theme === 'dark' }, 'relative border-t dark:border-gray-200 border-slate-800 not-prose']}>
   <div class="dark:bg-lime absolute inset-0 pointer-events-none" aria-hidden="true"></div>
-  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-dark-lime">
-    <div class="grid grid-cols-12 gap-2 gap-y-4 sm:gap-4 py-6 md:py-10">
-      <div class="col-span-12 lg:col-span-4">
+  <div class="relative mx-auto px-4 sm:px-6 dark:text-dark-lime">
+    <div class="grid grid-cols-1 md:grid-cols-12 gap-2 gap-y-4 sm:gap-4 py-6 md:py-10">
+      <div class="col-span-12 md:col-span-3 flex justify-center">
         <div class="mb-2">
           <a class="inline-block font-bold text-xl" href={getHomePermalink()}>
-            <Image src="~/assets/images/qompa-text.png" alt="App Store Image" width={100} />
+            <Image src="~/assets/images/qompa-text.png" alt="Qompa" width={180} />
           </a>
         </div>
         <div class="text-sm text-muted flex gap-1">
@@ -54,12 +54,12 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
       </div>
       {
         links.map(({ title, links }) => (
-          <div class="col-span-6 md:col-span-3 lg:col-span-2">
+          <div class="col-span-12 md:col-span-3 lg:col-span-2 flex justify-center">
             <div class="dark:text-dark-lime font-medium mb-2">{title}</div>
             {links && Array.isArray(links) && links.length > 0 && (
               <ul class="text-sm">
                 {links.map(({ text, href, ariaLabel }) => (
-                  <li class="mb-2">
+                  <li class="my-3">
                     <a
                       class="text-muted hover:text-gray-700 hover:underline dark:text-dark-lime transition duration-150 ease-in-out"
                       href={href}
@@ -74,31 +74,31 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
           </div>
         ))
       }
-    </div>
-    <div class="md:flex md:items-center md:justify-between py-6 md:py-8">
-      {
-        socialLinks?.length ? (
-          <ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0 rtl:ml-0 rtl:-mr-2 rtl:md:ml-0 rtl:md:mr-4">
-            {socialLinks.map(({ ariaLabel, href, text, icon }) => (
-              <li>
-                <a
-                  class="text-muted dark:text-dark-lime hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none dark:hover:text-lime focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
-                  aria-label={ariaLabel}
-                  href={href}
-                >
-                  {icon && <Icon name={icon} class="w-5 h-5" />}
-                  <Fragment set:html={text} />
-                </a>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          ''
-        )
-      }
-
-      <div class="text-sm mr-4 dark:text-muted">
-        <Fragment set:html={footNote} />
+      
+      <div class="col-span-12 md:col-span-3 lg:col-span-2 flex justify-center mt-5">
+        <div class="col-span-12">
+          <p class="flex w-full md:text-xs whitespace-nowrap">Encuéntranos en nuestras redes</p>
+          {
+            socialLinks?.length ? (
+              <ul class="flex w-full mb-4 justify-center">
+                {socialLinks.map(({ ariaLabel, href, text, icon }) => (
+                  <li>
+                    <a
+                      class="text-muted dark:text-dark-lime hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none dark:hover:text-lime focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+                      aria-label={ariaLabel}
+                      href={href}
+                    >
+                      {icon && <Icon name={icon} class="w-8 h-8" />}
+                      <Fragment set:html={text} />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              ''
+            )
+          }
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/components/widgets/Pricing.astro b/src/components/widgets/Pricing.astro
@@ -87,7 +87,7 @@ const {
                       </div>
                       {!items && disclaimer && (
                         <div class={`${disclaimer.cardColor} p-5 rounded-xl self-end`}>
-                          <h3 class="font-heading text-3xl mb-3">{disclaimer.title}</h3>
+                          <h3 class="font-heading text-5xl mb-3">{disclaimer.title}</h3>
                           <p class="text-sm space-x-3 leading-5">{disclaimer.text}</p>
                         </div>
                       )}

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -486,7 +486,7 @@ const metadata = {
     }}
   >
     <Fragment slot="content">
-      <h2 class="text-5xl md:text-6xl font-heading font-bold tracking-tight dark:text-lime mb-1">
+      <h2 class="text-5xl xl:text-6xl font-heading font-bold tracking-tight dark:text-lime mb-1">
         ¿Quieres ser parte de nuestros primeros usuarios?
       </h2>
       <p class="mt-10 dark:text-lime">