Sharing is caring

deco-sites · Jan 7, 2024 · 4c5c91e · 4c5c91e
1 parent 77f2a8d
commit 4c5c91e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 47 deletions.
diff --git a/components/utils/Blog.ts b/components/utils/Blog.ts
@@ -44,6 +44,5 @@ export interface PostList {
 const BLOG_DEFAULT_LOCALE = "pt";
 
 export function getBlogPath(fname: string, locale?: string) {
-  console.log(`/${locale || BLOG_DEFAULT_LOCALE}/blog/${fname}`);
   return `/${locale || BLOG_DEFAULT_LOCALE}/blog/${fname}`;
 }
diff --git a/islands/NRF/Header.tsx b/islands/NRF/Header.tsx
@@ -54,9 +54,7 @@ function MobileMenuLink({
           {label}
         </a>
         <ul class="pl-[24px]">
-          {nested.map((item) => (
-            <MobileMenuLink {...item} />
-          ))}
+          {nested.map((item) => <MobileMenuLink {...item} />)}
         </ul>
       </li>
     );
@@ -167,12 +165,12 @@ export default function Header(props: Props) {
   const alerts = props.alerts;
 
   return (
-    <section class="lg:container rounded-full bg-white/5 backdrop-blur-xl fixed top-6 z-50 w-[calc(100vw-64px)] lg:w-full left-1/2 transform -translate-x-1/2 shadow-[0px_4px_16px_0px_rgba(0,0,0,0.10)]">
+    <section class="lg:container rounded-full bg-white/5 backdrop-blur-xl fixed top-2 lg:top-6 z-50 w-[calc(100vw-16px)] lg:w-full left-1/2 transform -translate-x-1/2 shadow-[0px_4px_16px_0px_rgba(0,0,0,0.10)]">
       <nav class="flex flex-row gap-16 items-center h-[63px] pb-[2px] max-w-screen-2xl m-auto relative">
         <ul class="h-full flex items-center">
           <li class="h-full">
             <a
-              class="flex items-center h-full pl-8 pb-[6px]"
+              class="flex items-center h-full pl-4 lg:pl-8 pb-[6px]"
               href={currentLanguageLink}
             >
               <svg
@@ -199,7 +197,7 @@ export default function Header(props: Props) {
             return <MenuLink key={index} {...link} />;
           })}
         </ul>
-        <ul class="ml-auto lg:hidden pr-8">
+        <ul class="ml-auto lg:hidden pr-4 lg:pr-8">
           <li class="grid items-center">
             <button class="focus:outline-none" onClick={() => setOpen(!open)}>
               <svg
@@ -254,11 +252,9 @@ export default function Header(props: Props) {
             </button>
           </li>
           <div
-            class={
-              open
-                ? "flex flex-col w-[calc(100vw-64px)] h-[calc(100vh-140px)] gap-[40px] fixed bg-[#1E1E1E] left-0 top-[80px] pt-[24px] z-50 px-3 lg:hidden rounded-[24px]"
-                : "hidden"
-            }
+            class={open
+              ? "flex flex-col w-[calc(100vw-64px)] h-[calc(100vh-140px)] gap-[40px] fixed bg-[#1E1E1E] left-0 top-[80px] pt-[24px] z-50 px-3 lg:hidden rounded-[24px]"
+              : "hidden"}
           >
             <ul class="flex flex-col divide-y divide-semi-white-13">
               {props.menuLinks.map((link) => {

diff --git a/sections/NRF/Hero.tsx b/sections/NRF/Hero.tsx
@@ -1,4 +1,6 @@
 import { HeroEditorTabbed } from "deco-sites/starting/islands/NRF/HeroEditorTabbed.tsx";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+
 interface CTA {
   href: string;
   text: string;
@@ -12,55 +14,60 @@ export interface Props {
   /**
    * @format html
    */
-  subtitle?: string; // Add subtitle property
+  subtitle?: string;
   cta?: CTA[];
   alert?: {
-    image?: string;
+    image?: ImageWidget;
     text?: string;
     href?: string;
   };
 }
 
 export default function Hero({ title, subtitle, cta, alert }: Props) {
   return (
-    <div id="hero" class="relative bg-black min-h-screen space-y-20">
-      <div class="max-w-fit mx-auto flex flex-col items-center gap-20">
+    <div
+      id="hero"
+      class="relative bg-black min-h-screen space-y-16 lg:space-y-20"
+    >
+      <div class="max-w-fit mx-auto flex flex-col items-center gap-16 lg:gap-20">
         {alert?.text && (
           <div class="rounded-[56px] border border-white/15 bg-white/5 py-2 px-4">
             {alert.text}
           </div>
         )}
-        <div
-          class="mt-48 inline-block text-[48px] lg:text-[104px] text-left leading-[100%] font-medium text-white max-w-lg lg:max-w-none"
-          dangerouslySetInnerHTML={{
-            __html: title,
-          }}
-        >
+        <div class="flex flex-col items-center gap-4">
+          <div
+            class="mt-36 lg:mt-48 mx-6 lg:mx-0 inline-block text-[36px] lg:text-[104px] text-center leading-[120%] lg:leading-[100%] font-medium text-white max-w-lg lg:max-w-none"
+            dangerouslySetInnerHTML={{
+              __html: title,
+            }}
+          >
+          </div>
+          {subtitle &&
+            (
+              <div
+                class="mx-11 inline-block lg:text-[24px] text-center leading-[150%] text-gray-400 max-w-lg lg:max-w-none"
+                dangerouslySetInnerHTML={{
+                  __html: subtitle,
+                }}
+              >
+              </div>
+            )}
+          {cta &&
+            cta?.map((item) => (
+              <a
+                href={item?.href}
+                target={item?.href.startsWith("http") ? "_blank" : "_self"}
+                class={`w-fit border-none rounded-full py-2 font-semibold px-6 transition-colors duration-200 cursor-pointer ${
+                  item?.variant === "Reverse"
+                    ? "border bg-[#113032] text-[#FFF]"
+                    : "border bg-[#02F67C] text-[#113032]"
+                }`}
+              >
+                {item?.text}
+              </a>
+            ))}
         </div>
-        {subtitle &&
-          (
-            <div
-              class="mt-4 inline-block text-[24px] lg:text-[48px] text-left leading-[100%] font-medium text-gray-400 max-w-lg lg:max-w-none"
-              dangerouslySetInnerHTML={{
-                __html: subtitle,
-              }}
-            >
-            </div>
-          )}
-        {cta &&
-          cta?.map((item) => (
-            <a
-              href={item?.href}
-              target={item?.href.startsWith("http") ? "_blank" : "_self"}
-              class={`border-none rounded-full text-[28px] py-3 px-8 transition-colors duration-200 cursor-pointer ${
-                item?.variant === "Reverse"
-                  ? "border bg-[#113032] text-[#FFF]"
-                  : "border bg-[#02F67C] text-[#113032]"
-              }`}
-            >
-              {item?.text}
-            </a>
-          ))}
       </div>
       <div class="mx-auto flex flex-col items-center">
         <HeroEditorTabbed />

diff --git a/static/tailwind.css b/static/tailwind.css