feat: Header UI

deco-sites · Nov 13, 2024 · 9b162aa · 9b162aa
1 parent 330b02d
commit 9b162aa
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 61 deletions.
diff --git a/.deco/blocks/Header.json b/.deco/blocks/Header.json
@@ -21,6 +21,6 @@
     "buttons": []
   },
   "logo": {
-    "src": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/01c27184-1e86-442f-b399-26127b0aa401/LOGOCOMPLETA-SEMFUNDO.png"
+    "src": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/46316b91-d569-404a-b52e-1babd555037e/LOGOCOMPLETA-SEMFUNDO.svg"
   }
 }
diff --git a/.deco/blocks/Neutral.json b/.deco/blocks/Neutral.json
@@ -29,8 +29,36 @@
     "__resolveType": "website/loaders/fonts/googleFonts.ts",
     "fonts": [
       {
-        "variations": [],
-        "family": "Albert Sans"
+        "variations": [
+          {
+            "weight": "100"
+          },
+          {
+            "weight": "200"
+          },
+          {
+            "weight": "300"
+          },
+          {
+            "weight": "400"
+          },
+          {
+            "weight": "500"
+          },
+          {
+            "weight": "600"
+          },
+          {
+            "weight": "700"
+          },
+          {
+            "weight": "800"
+          },
+          {
+            "weight": "900"
+          }
+        ],
+        "family": "Poppins"
       }
     ]
   },

diff --git a/sections/Header.tsx b/sections/Header.tsx
@@ -19,14 +19,12 @@ export interface Nav {
       label?: string;
       url?: string;
     }[];
-    buttons: CTA[];
   };
 }
 
 export default function Header({
   logo = {
-    src:
-      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/1527/67120bcd-936a-4ea5-a760-02ed5c4a3d04",
+    src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/1527/67120bcd-936a-4ea5-a760-02ed5c4a3d04",
     alt: "Logo",
   },
   navigation = {
@@ -36,58 +34,45 @@ export default function Header({
       { label: "Princing", url: "/" },
       { label: "Contact", url: "/" },
     ],
-    buttons: [
-      { id: "change-me-1", href: "/", text: "Change me", outline: false },
-      { id: "change-me-2", href: "/", text: "Change me", outline: true },
-    ],
   },
 }: Nav) {
   return (
     <nav class="drawer drawer-end">
       <input id="mobile-drawer-nav" type="checkbox" class="drawer-toggle" />
 
       {/* main content */}
-      <div class="drawer-content container lg:px-0 px-4 flex gap-8 items-center justify-between py-4">
+      <div class="drawer-content container lg:px-0 px-4 flex gap-8 items-center justify-between pt-10 w-full">
         <a href="/">
-          <Image src={logo.src || ""} width={100} height={28} alt={logo.alt} />
+          <Image
+            src={logo.src || ""}
+            width={198}
+            height={47}
+            alt={logo.alt}
+            class="w-32 lg:w-48"
+          />
         </a>
 
-        <div class="hidden items-center justify-between lg:flex w-full">
+        <div class="hidden items-center justify-between lg:flex">
           <ul class="flex">
             {navigation.links.map((link) => (
-              <li>
+              <li class="group">
                 <a
                   href={link.url}
                   aria-label={link.label}
-                  class="link no-underline hover:underline p-4"
+                  class="link no-underline hover:underline p-4 text-secondary group-first:font-bold text-lg"
                 >
                   {link.label}
                 </a>
               </li>
             ))}
           </ul>
-          <ul class="flex gap-3">
-            {navigation.buttons?.map((item) => (
-              <a
-                key={item?.id}
-                id={item?.id}
-                href={item?.href ?? "#"}
-                target={item?.href.includes("http") ? "_blank" : "_self"}
-                class={`font-normal btn btn-primary ${
-                  item.outline && "btn-outline"
-                }`}
-              >
-                {item?.text}
-              </a>
-            ))}
-          </ul>
         </div>
 
         <label
           htmlFor="mobile-drawer-nav"
-          class="flex lg:hidden btn btn-ghost drawer-button"
+          class="flex lg:hidden btn btn-ghost drawer-button text-secondary"
         >
-          <Icon id="Bars3" size={24} strokeWidth={0.1} />
+          <Icon id="Bars3" size={24} strokeWidth={0.4} />
         </label>
       </div>
 
@@ -100,41 +85,24 @@ export default function Header({
           class="drawer-overlay"
         />
 
-        <div class="flex flex-col gap-8 min-h-full w-80 bg-base-100 text-base-content">
+        <div class="flex flex-col gap-8 min-h-full w-80 max-w-[80vw] bg-base-100 text-base-content">
           <a class="p-4" href="/">
-            <Image
-              src={logo.src || ""}
-              width={100}
-              height={28}
-              alt={logo.alt}
-            />
+            <Image src={logo.src || ""} width={98} height={23} alt={logo.alt} />
           </a>
 
           <ul class="menu">
             {navigation?.links.map((link) => (
-              <li>
-                <a href={link.url} aria-label={link.label}>
+              <li class="group">
+                <a
+                  href={link.url}
+                  aria-label={link.label}
+                  class="link no-underline hover:underline p-4 text-secondary group-first:font-bold text-lg"
+                >
                   {link.label}
                 </a>
               </li>
             ))}
           </ul>
-
-          <ul class="p-4 flex items-center gap-3">
-            {navigation.buttons?.map((item) => (
-              <a
-                key={item?.id}
-                id={item?.id}
-                href={item?.href ?? "#"}
-                target={item?.href.includes("http") ? "_blank" : "_self"}
-                class={`font-normal btn btn-primary ${
-                  item.outline && "btn-outline"
-                }`}
-              >
-                {item?.text}
-              </a>
-            ))}
-          </ul>
         </div>
       </aside>
     </nav>

diff --git a/static/tailwind.css b/static/tailwind.css
@@ -2906,6 +2906,9 @@ input.tab:checked + .tab-content,
 .w-2 {
   width: 0.5rem;
 }
+.w-32 {
+  width: 8rem;
+}
 .w-80 {
   width: 20rem;
 }
@@ -3006,6 +3009,9 @@ input.tab:checked + .tab-content,
 .max-w-\[80px\] {
   max-width: 80px;
 }
+.max-w-\[80vw\] {
+  max-width: 80vw;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -3400,10 +3406,6 @@ input.tab:checked + .tab-content,
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -3437,6 +3439,9 @@ input.tab:checked + .tab-content,
 .pr-4 {
   padding-right: 1rem;
 }
+.pt-10 {
+  padding-top: 2.5rem;
+}
 .pt-12 {
   padding-top: 3rem;
 }
@@ -3763,6 +3768,9 @@ input.tab:checked + .tab-content,
 .disabled\:hidden:disabled {
   display: none;
 }
+.group:first-child .group-first\:font-bold {
+  font-weight: 700;
+}
 .group[open] .group-open\:rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3909,6 +3917,10 @@ input.tab:checked + .tab-content,
     width: 40%;
   }
 
+  .lg\:w-48 {
+    width: 12rem;
+  }
+
   .lg\:w-\[40\%\] {
     width: 40%;
   }