update

superpage/src/pages/index.astro

@@ -1,21 +1,93 @@
 ---
-import Layout from '~/layouts/Layout.astro'
-import Container from '~/components/Container.astro'
+import { Picture } from "astro:assets";
+import { Icon } from "astro-icon/components";
+import Layout from "~/layouts/Layout.astro";
+import Container from "~/components/Container.astro";
+import { Clients } from "~/components/Course";
 
-let res = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
-let posts = await res.json()
+import mulhercomepi from "~/assets/mulher-com-epi.png";
+
+let res = await fetch("https://betaeducacao.com.br/wp-json/wp/v2/posts");
+let posts = await res.json();
 ---
 
 <Layout>
-    <Container>
-        {
-            posts.map((post) => (
-                <article>
-                    <h2>
-                        <a href={`/blog/${post.slug}`} set:html={post.title.rendered} />
-                    </h2>
-                </article>
-            ))
-        }
-    </Container>
+    <div class="space-y-6 lg:space-y-12">
+        <Container>
+            <nav
+                class="text-black bg-linear-to-b from-lime-400/90 to-lime-400 border border-lime-400 rounded-2xl lg:grid grid-cols-6"
+            >
+                <div class="col-span-4 flex items-center justify-center">
+                    <div class="lg:w-4/6 max-lg:p-5 space-y-10">
+                        <form class="space-y-1.5">
+                            <label for="search" class="block">
+                                <h1 class="text-pretty font-semibold text-3xl">
+                                    Digite o curso para ver todos detalhes
+                                </h1>
+                            </label>
+
+                            <div
+                                class="flex gap-2.5 border border-black bg-white w-full rounded-lg"
+                            >
+                                <label for="search" class="py-3.5 pl-3">
+                                    <Icon
+                                        name="magnifying-glass"
+                                        class="size-6"
+                                    />
+                                </label>
+                                <input
+                                    id="search"
+                                    class="focus:outline-none w-full pr-5 py-3.5"
+                                />
+                            </div>
+                        </form>
+
+                        <div>
+                            <h2 class="font-bold text-xl flex gap-1">
+                                <Icon name="arrow-trending-up" class="size-6" />
+                                <span>Cursos mais procurados</span>
+                            </h2>
+                            <ul class="list-disc list-inside">
+                                <li>CIPA</li>
+                                <li>Lei Lucas</li>
+                                <li>Noções em Primeiros Socorros</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-span-2 relative h-116 -m-px max-lg:hidden">
+                    <Picture
+                        alt="Mulher com EPI"
+                        formats={["webp"]}
+                        src={mulhercomepi}
+                        class="w-86 left-0 bottom-0 absolute"
+                    />
+                </div>
+            </nav>
+        </Container>
+
+        <Clients class="py-6" />
+
+        <Container>
+            <section>
+                <h1 class="text-pretty font-semibold text-4xl">
+                    Últimos posts
+                </h1>
+
+                {
+                    posts.map((post) => (
+                        <article>
+                            <h2>
+                                <a
+                                    href={`/blog/${post.slug}`}
+                                    set:html={post.title.rendered}
+                                />
+                            </h2>
+                        </article>
+                    ))
+                }
+            </section>
+        </Container>
+    </div>
 </Layout>