add accordtion

superpage/src/pages/[slug].astro

@@ -1,8 +1,5 @@
 ---
 import { Picture } from 'astro:assets'
-import { Faq } from '~/components/Faq'
-import { StarIcon, ClockIcon } from '@heroicons/react/24/outline'
-import { CheckBadgeIcon, LockClosedIcon } from '@heroicons/react/24/solid'
 import { Icon } from 'astro-icon/components'
 import Layout from '~/layouts/Layout.astro'
 import Container from '~/components/Container.astro'
@@ -13,9 +10,9 @@ import Natura from '~/components/logos/Natura.astro'
 import Nissan from '~/components/logos/Nissan.astro'
 import Manserv from '~/components/logos/Manserv.astro'
 
-import placeholder from '~/assets/placeholder.png'
-import mulherdenegocios from '~/assets/mulher-de-negocios.png'
-import homemdenegocios from '~/assets/homem-de-negocios.png'
+import placeholder from './_assets/placeholder.png'
+import mulherdenegocios from './_assets/mulher-de-negocios.png'
+import homemdenegocios from './_assets/homem-de-negocios.png'
 
 import { getCollection, getEntry } from 'astro:content'
 
@@ -42,7 +39,7 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
 </Fragment>
 
 <Layout>
-    <div class="space-y-6 lg:space-y-24">
+    <section class="space-y-6 lg:space-y-24">
         <Container class="lg:flex items-center justify-start gap-6 max-lg:pt-6">
             <Picture
                 src={data?.img ? data.img : placeholder}
@@ -66,12 +63,12 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
                     </p>
                     <ul class="lg:flex gap-3">
                         <li class="flex gap-1">
-                            <ClockIcon className="w-5" />
+                            <Icon name="clock" class="size-5" />
                             <span>Carga horária de {data.course.hours} horas</span>
                         </li>
 
                         <li class="flex gap-1">
-                            <CheckBadgeIcon className="w-5 fill-blue-400" />
+                            <Icon name="check-badge" class="size-5 text-blue-400" />
                             <span>
                                 Certificado com assinatura digital
                                 <a href="#certificado" class="text-blue-400 *:hover:underline">
@@ -90,25 +87,25 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
                         </a>
                         <a
                             href="http://bit.ly/3RlROu6"
-                            class="flex flex-col hover:outline rounded outline-offset-3"
+                            class="flex flex-col hover:outline rounded outline-offset-2"
                             target="_blank"
                         >
                             <div class="flex items-center gap-1">
                                 <span class="font-bold">4.7</span>
                                 <ul class="flex">
                                     <li>
-                                        <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
+                                        <Icon name="star" class="size-4 text-yellow-500" />
                                     </li>
                                     <li>
-                                        <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
+                                        <Icon name="star" class="size-4 text-yellow-500" />
                                     </li>
                                     <li>
-                                        <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
+                                        <Icon name="star" class="size-4 text-yellow-500" />
                                     </li>
                                     <li>
-                                        <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
+                                        <Icon name="star" class="size-4 text-yellow-500" />
                                     </li>
-                                    <li><StarIcon className="w-4" /></li>
+                                    <li><Icon name="star" class="size-4 text-gray-500" /></li>
                                 </ul>
                             </div>
                             <span>66 avaliações no Google</span>
@@ -170,6 +167,7 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
             </div>
         </Container>
 
+        <!-- Course Modules -->
         <Container id="modulos" class="grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6">
             <div class="space-y-2.5">
                 <h4 class="text-pretty text-4xl lg:text-5xl">Módulos deste curso</h4>
@@ -179,10 +177,35 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
                 </p>
             </div>
             <div class="lg:col-span-2 flex flex-col gap-1.5">
-                <Faq topics={data.course.modules} client:load />
+                {
+                    data.course.modules.map((summary) => (
+                        <details class="bg-white/10 rounded-lg w-full px-5 py-3 open:bg-white/15 open:[&_svg]:-rotate-180">
+                            <summary class="cursor-pointer flex items-center justify-between">
+                                <span>{summary}</span>
+                                <Icon
+                                    name="chevron"
+                                    class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0"
+                                />
+                            </summary>
+                            <div class="text-sm/6 text-white/70 space-y-2 mt-2">
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque id
+                                    libero semper vulputate a ut ex. Pellentesque semper ultrices mi in efficitur.
+                                </p>
+                                <p>
+                                    Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu commodo sem.
+                                    Suspendisse ac lobortis massa, ac mattis mauris. Integer malesuada bibendum ante,
+                                    sed consequat augue convallis et.
+                                </p>
+                            </div>
+                        </details>
+                    ))
+                }
             </div>
         </Container>
+        <!-- Course Modules End -->
 
+        <!-- Trainer -->
         {
             trainer && (
                 <Container>
@@ -219,12 +242,14 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
                 </Container>
             )
         }
+        <!-- Trainer End -->
 
+        <!-- Cert -->
         <Container id="certificado">
             <div
                 class="text-black bg-linear-to-t from-lime-600 to-lime-400 border border-lime-400 p-5 lg:py-36 rounded-2xl relative overflow-hidden"
             >
-                <LockClosedIcon className="w-96 absolute -right-16 -bottom-16 text-black/10 max-lg:hidden" />
+                <Icon name="lock-closed" class="w-96 absolute -right-16 -bottom-16 text-black/10 max-lg:hidden" />
 
                 <div class="lg:w-8/12 2xl:w-6/14 mx-auto space-y-5">
                     <h6 class="text-4xl lg:text-6xl/14 lg:font-black">
@@ -238,7 +263,6 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
                 </div>
             </div>
         </Container>
-
-        <!-- <Form client:load /> -->
-    </div>
+        <!-- Cert End -->
+    </section>
 </Layout>

superpage/src/pages/blog/[slug].astro

@@ -15,7 +15,9 @@ export async function getStaticPaths() {
 const { post } = Astro.props
 ---
 
-<title slot="head">{post.title.rendered}</title>
+<Fragment slot="head">
+    <title>{post.title.rendered}</title>
+</Fragment>
 
 <Layout>
     <Container>