From 262abf0d2d80ef0790c0abb6c6d0fbdb686f23d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Tue, 6 May 2025 16:23:28 -0300
Subject: [PATCH] finish

---
 .../src/components/Course/HeaderNav.astro     | 67 +++++++++----------
 .../_components => components}/Search.astro   |  8 +--
 superpage/src/components/Trends.astro         | 23 +++++++
 superpage/src/pages/index.astro               | 34 ++++------
 4 files changed, 71 insertions(+), 61 deletions(-)
 rename superpage/src/{pages/_components => components}/Search.astro (85%)
 create mode 100644 superpage/src/components/Trends.astro

diff --git a/superpage/src/components/Course/HeaderNav.astro b/superpage/src/components/Course/HeaderNav.astro
index cbeb8a7..bdf424b 100644
--- a/superpage/src/components/Course/HeaderNav.astro
+++ b/superpage/src/components/Course/HeaderNav.astro
@@ -2,6 +2,8 @@
 import { Icon } from "astro-icon/components";
 import Container from "../Container.astro";
 import BuyDropdown from "./BuyDropdown.astro";
+import Trends from "~/components/Trends.astro";
+import Search from "~/components/Search.astro";
 
 import { getCollection } from "astro:content";
 const courses = await getCollection(
@@ -12,8 +14,8 @@ const courses = await getCollection(
 const { title } = Astro.props;
 ---
 
-<nav class="sticky top-0 z-10 bg-lime-400 py-3 drop-shadow shadow-sm">
-    <Container class="flex items-center relative">
+<nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm">
+    <Container class="flex items-center relative py-3">
         <button
             data-toggle="menu"
             data-target="#heromenu"
@@ -26,40 +28,37 @@ const { title } = Astro.props;
         </button>
 
         <BuyDropdown class="ml-auto" {...Astro.props} />
-    </Container>
+        <dialog
+            id="heromenu"
+            class="absolute top-full translate-y-1 w-full bg-transparent max-lg:px-2.5"
+            closedby="any"
+        >
+            <div class="text-black bg-lime-400 rounded-xl lg:rounded-2xl">
+                <div class="lg:w-1/2 mx-auto p-5 lg:py-24">
+                    <search class="space-y-5">
+                        <label for="search" class="block">
+                            <h1
+                                class="text-pretty font-semibold text-3xl lg:text-4xl"
+                            >
+                                Digite o curso para ver todos detalhes
+                            </h1>
+                        </label>
 
-    <dialog
-        id="heromenu"
-        class="absolute text-black bg-lime-400 w-full inset-0 rounded-b-2xl h-fit overflow-hidden"
-        closedby="any"
-    >
-        <Container class="relative overflow-auto h-100">
-            <div class="sticky top-0 py-2.5 backdrop-blur-sm">
-                <h6 class="font-medium text-xl lg:text-2xl">
-                    Conheça outros cursos da EDUSEG&reg;
-                </h6>
+                        <Search />
+                    </search>
+
+                    <div class="space-y-1.5">
+                        <h2 class="font-bold text-xl flex gap-1">
+                            <Icon name="arrow-trending-up" class="size-6" />
+                            <span>Cursos mais procurados</span>
+                        </h2>
+
+                        <Trends />
+                    </div>
+                </div>
             </div>
-
-            <ul
-                class="list-disc list-inside max-lg:[&_li]:truncate font-medium"
-            >
-                {
-                    courses.map(({ data: { title, slug } }) => {
-                        return (
-                            <li>
-                                <a
-                                    href={`/${slug}`}
-                                    class=" hover:underline p-0.5"
-                                >
-                                    {title}
-                                </a>
-                            </li>
-                        );
-                    })
-                }
-            </ul>
-        </Container>
-    </dialog>
+        </dialog>
+    </Container>
 </nav>
 
 <script>
diff --git a/superpage/src/pages/_components/Search.astro b/superpage/src/components/Search.astro
similarity index 85%
rename from superpage/src/pages/_components/Search.astro
rename to superpage/src/components/Search.astro
index c0fa74f..c06ec5d 100644
--- a/superpage/src/pages/_components/Search.astro
+++ b/superpage/src/components/Search.astro
@@ -27,17 +27,13 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
             const bundlePath = selector.getAttribute("data-bundle-path");
             // Pagefind UI configuration options
             // https://pagefind.app/docs/ui/
-            const search = new PagefindUI({
+            new PagefindUI({
                 element,
                 bundlePath,
-                autofocus: true,
+                autofocus: false,
                 showImages: false,
                 pageSize: 5,
             });
-
-            console.log(search._pfs);
-            // search._pfs.$$set({ trigger_search_term: "aa" })
-            // console.log();
         }
     }
 
diff --git a/superpage/src/components/Trends.astro b/superpage/src/components/Trends.astro
new file mode 100644
index 0000000..c9da464
--- /dev/null
+++ b/superpage/src/components/Trends.astro
@@ -0,0 +1,23 @@
+---
+import { getEntries } from "astro:content";
+
+const trends = await getEntries([
+    { collection: "courses", id: "nr-18-plataforma-de-trabalho-aereo" },
+    { collection: "courses", id: "nr-10-basico" },
+    { collection: "courses", id: "cipa-grau-de-risco-3" },
+    {
+        collection: "courses",
+        id: "nr-35-seguranca-nos-trabalhos-em-altura-teorico",
+    },
+]);
+---
+
+<ul class="list-disc list-inside font-medium">
+    {
+        trends.map(({ data }) => (
+            <li>
+                <a href={data.slug}>{data.title}</a>
+            </li>
+        ))
+    }
+</ul>
diff --git a/superpage/src/pages/index.astro b/superpage/src/pages/index.astro
index 6ae965d..bdd1eef 100644
--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -6,20 +6,10 @@ import Container from "~/components/Container.astro";
 import Clients from "~/components/Clients.astro";
 import Stats from "~/components/Stats.astro";
 import Features from "~/components/Features.astro";
-import Search from "./_components/Search.astro";
-import { getEntries } from "astro:content";
+import Trends from "~/components/Trends.astro";
+import Search from "~/components/Search.astro";
 
 import mulhercomepi from "~/assets/mulher-com-epi.png";
-
-const trends = await getEntries([
-    { collection: "courses", id: "nr-18-plataforma-de-trabalho-aereo" },
-    { collection: "courses", id: "nr-10-basico" },
-    { collection: "courses", id: "cipa-grau-de-risco-3" },
-    {
-        collection: "courses",
-        id: "nr-35-seguranca-nos-trabalhos-em-altura-teorico",
-    },
-]);
 ---
 
 <Layout title="Educação que garante sua segurança">
@@ -49,15 +39,7 @@ const trends = await getEntries([
                                 <Icon name="arrow-trending-up" class="size-6" />
                                 <span>Cursos mais procurados</span>
                             </h2>
-                            <ul class="list-disc list-inside font-medium">
-                                {
-                                    trends.map(({ data }) => (
-                                        <li>
-                                            <a href={data.slug}>{data.title}</a>
-                                        </li>
-                                    ))
-                                }
-                            </ul>
+                            <Trends />
                         </div>
                     </div>
                 </div>
@@ -81,6 +63,16 @@ const trends = await getEntries([
 
         <Container>
             <section class="mx-auto lg:w-2/3 space-y-6 py-5 lg:py-24">
+                <h1 class="text-pretty text-3xl lg:text-5xl/14">
+                    <div>Conheça as vantagens de estar no</div>
+                    <span
+                        class="relative inline-block before:absolute before:inset-0 px-1 lg:px-5 lg:py-0.5 before:block before:-skew-x-16 before:bg-lime-400"
+                    >
+                        <span class="relative text-black font-medium uppercase">
+                            EDUSEG<sup>&reg;</sup> Flexível
+                        </span>
+                    </span>
+                </h1>
                 <div
                     class="grid lg:grid-cols-3 gap-2.5 lg:gap-5 *:border *:rounded-lg *:p-5 *:hover:scale-105 *:transition"
                 >