finish

superpage/src/pages/_components/Search.astro

@@ -1,51 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
----
-
-<div
-    class="border border-black bg-white w-full rounded-lg h-10 lg:h-12 relative"
->
-    <Icon
-        name="magnifying-glass"
-        class="absolute size-5 top-1/2 -translate-y-1/2 left-3"
-    />
-    <div id="pagefind-ui" class="pagefind-init" data-bundle-path={bundlePath}>
-    </div>
-</div>
-
-<script>
-    window.dataLayer = window.dataLayer || [];
-
-    import { PagefindUI } from "@pagefind/default-ui";
-
-    const element = "#pagefind-ui";
-    const selector = document.querySelector(element);
-
-    async function initPagefindUI() {
-        if (selector) {
-            const bundlePath = selector.getAttribute("data-bundle-path");
-            // Pagefind UI configuration options
-            // https://pagefind.app/docs/ui/
-            const search = new PagefindUI({
-                element,
-                bundlePath,
-                autofocus: true,
-                showImages: false,
-                pageSize: 5,
-            });
-
-            console.log(search._pfs);
-            // search._pfs.$$set({ trigger_search_term: "aa" })
-            // console.log();
-        }
-    }
-
-    window.addEventListener("astro:page-load", initPagefindUI);
-
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", initPagefindUI);
-    } else {
-        initPagefindUI();
-    }
-</script>

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"
                 >