Change footer

AfipSDK · Nov 27, 2024 · 685511d · 685511d
1 parent b45c6e6
commit 685511d
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 58 deletions.
diff --git a/src/components/layout/footer.astro b/src/components/layout/footer.astro
@@ -3,69 +3,95 @@ import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
 import { Icon } from "astro-icon/components";
 import { buttonVariants } from "@/components/ui/button";
+import { navMenuConfig } from "@/config/nav-menu";
 
 type Props = {
   className?: string;
 };
 
 const { className } = Astro.props;
----
 
-<footer class={cn(className, "border-t")}>
-  <div
-    class="container flex flex-col items-center justify-between gap-4 py-10 md:h-24 md:flex-row md:py-0"
-  >
-    <div
-      class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0"
-    >
-      <a href="/" aria-label="Astronomy homepage">
-        <Icon name="logo" class="size-8" />
-      </a>
+navMenuConfig.pagesNav
 
-      <p class="text-center text-sm leading-loose md:text-left balance-text">
-        © 2024 DUI LLC, Todos los derechos reservados 
-      </p>
-    </div>
-    <div class="text-center md:text-right">
-        <a
-          href={`mailto:${siteConfig.contact}`}
-          target="_blank"
-          rel="noreferrer"
-          aria-label="contacto"
-          class={cn(buttonVariants({ size: "sm", variant: 'link' }))}
-        >
-          Contacto
-        </a>
-        <a
-          href="/blog/"
-          class={cn(buttonVariants({ size: "sm", variant: 'link' }))}
-        >
-          Blog
-        </a>
-        <a
-          href={siteConfig.links.docs}
-          target="_blank"
-          rel="noreferrer"
-          aria-label="documentacion"
-          class={cn(buttonVariants({ size: "sm", variant: 'link' }))}
-        >
-          Documentacion
-        </a>
-        <a
-          href={siteConfig.links.discord}
-          target="_blank"
-          rel="noreferrer"
-          aria-label="documentacion"
-          class={cn(buttonVariants({ size: "sm", variant: 'link' }))}
-        >
-          Comunidad
-        </a>
-        <a
-          href="/pricing"
-          class={cn(buttonVariants({ size: "sm", variant: 'link' }))}
-        >
-          Precio
-        </a>
-    </div>
+const sections = [
+  {
+    title: 'Industrias',
+    links: [
+    // navMenuConfig.pagesNav[2].title
+      { name: 'Overview', href: '#' },
+      { name: 'Pricing', href: '#' },
+      { name: 'Marketplace', href: '#' },
+      { name: 'Features', href: '#' },
+      { name: 'Integrations', href: '#' },
+      { name: 'Pricing', href: '#' },
+    ],
+  },
+  {
+    title: 'Company',
+    links: [
+      { name: 'About', href: '#' },
+      { name: 'Team', href: '#' },
+      { name: 'Blog', href: '#' },
+      { name: 'Careers', href: '#' },
+      { name: 'Contact', href: '#' },
+      { name: 'Privacy', href: '#' },
+    ],
+  },
+  {
+    title: 'Resources',
+    links: [
+      { name: 'Help', href: '#' },
+      { name: 'Sales', href: '#' },
+      { name: 'Advertise', href: '#' },
+    ],
+  },
+  {
+    title: 'Social',
+    links: [
+      { name: 'Twitter', href: '#' },
+      { name: 'Instagram', href: '#' },
+      { name: 'LinkedIn', href: '#' },
+    ],
+  },
+];
+---
+<section class={cn(className, "pt-32 pb-10 border-t")}>
+  <div class="container">
+    <footer>
+      <div class="grid grid-cols-2 gap-8 lg:grid-cols-6">
+        <div class="col-span-2 mb-8 lg:mb-0">
+          <a href="/" aria-label="Afip SDK homepage" class="mb-4 inline-block">
+            <Icon name="logo" class="size-8 inline align-middle mr-2" />
+            <span class="font-bold align-middle">Afip SKD</span>
+          </a>
+          <p class="text-muted-foreground">Conectate a AFIP facilmente.</p>
+        </div>
+        {navMenuConfig.pagesNav.map((section) => (
+          <div>
+            <h3 class="mb-4 font-bold">{section.title}</h3>
+            <ul class="space-y-4 text-muted-foreground">
+              {section.items!.map((link) => (
+                <li
+                  class="font-medium"
+                >
+                  <a href={link.href} class="hover:text-primary" target={link.external ? "_blank" : "_self"}>{link.title}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+      <div class="mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center">
+        <p>© 2024 DUI LLC, Todos los derechos reservados.</p>
+        <!-- <ul class="flex gap-4">
+          <li class="underline hover:text-primary">
+            <a href="#"> Terms and Conditions</a>
+          </li>
+          <li class="underline hover:text-primary">
+            <a href="#"> Privacy Policy</a>
+          </li>
+        </ul> -->
+      </div>
+    </footer>
   </div>
-</footer>
+</section>
diff --git a/src/config/nav-menu.ts b/src/config/nav-menu.ts
@@ -5,7 +5,7 @@ import { getIndustries } from "@/lib/fetchers";
 export const navMenuConfig: NavMenuConfig = {
   pagesNav: [
     {
-      title: "Menu",
+      title: "Recursos",
       items: [
         {
           title: "Blog",
@@ -18,19 +18,35 @@ export const navMenuConfig: NavMenuConfig = {
           href: siteConfig.links.docs,
           description: "",
           image: "",
+          external: true
         },
         {
           title: "Comunidad",
           href: siteConfig.links.discord,
           description: "",
           image: "",
+          external: true
         },
         {
           title: "Precio",
           href: "/pricing",
           description: "",
           image: "",
         },
+        {
+          title: "Contacto",
+          href: "mailto:[email protected]",
+          description: "",
+          image: "",
+          external: true
+        },
+        {
+          title: "Github",
+          href: siteConfig.links.github,
+          description: "",
+          image: "",
+          external: true
+        },
       ],
     },
     {