add accordtion

2025-04-21 13:51:29 -03:00
parent 4cd136ea04
commit 735e35ff71
17 changed files with 73 additions and 902 deletions
--- a/superpage/astro.config.mjs
+++ b/superpage/astro.config.mjs
@@ -1,7 +1,6 @@
 // @ts-check
 import { defineConfig } from 'astro/config'

-import react from '@astrojs/react'
 import tailwindcss from '@tailwindcss/vite'
 import partytown from '@astrojs/partytown'
 import sitemap from '@astrojs/sitemap'
@@ -12,7 +11,6 @@ import icon from 'astro-icon'
 export default defineConfig({
  site: 'https://eduseg.com.br',
  integrations: [
-    react(),
    sitemap(),
    icon(),
    alpinejs(),
--- a/superpage/package-lock.json
+++ b/superpage/package-lock.json
--- a/superpage/package.json
+++ b/superpage/package.json
@@ -11,24 +11,14 @@
  "dependencies": {
    "@astrojs/alpinejs": "^0.4.6",
    "@astrojs/partytown": "^2.1.4",
-    "@astrojs/react": "^4.2.1",
    "@astrojs/sitemap": "^3.3.0",
    "@fontsource/roboto": "^5.2.5",
-    "@headlessui/react": "^2.2.1",
-    "@heroicons/react": "^2.2.0",
    "@tailwindcss/vite": "^4.0.13",
-    "@tanstack/react-query": "^5.68.0",
    "@types/alpinejs": "^3.13.11",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
    "alpinejs": "^3.14.9",
    "astro": "^5.7.2",
    "astro-icon": "^1.1.5",
-    "axios": "^1.8.3",
    "clsx": "^2.1.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2",
    "tailwindcss": "^4.0.13"
  }
 }
--- a/superpage/src/components/Carousel.astro
+++ b/superpage/src/components/Carousel.astro
@@ -1,16 +1,16 @@
 ---
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid'
+import { Icon } from 'astro-icon/components'

 const { items = [] } = Astro.props
 ---

 <div id="carousel" class="relative">
-    <button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
-        <ChevronLeftIcon className="w-6" />
+    <button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-1">
+        <Icon name="chevron-left" class="size-6" />
    </button>

-    <button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
-        <ChevronRightIcon className="w-6" />
+    <button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-1">
+        <Icon name="chevron-right" class="size-6" />
    </button>

    <div
@@ -18,7 +18,7 @@ const { items = [] } = Astro.props
    >
        {
            items.map((Component, idx) => (
-                <div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0">
+                <div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center">
                    <Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
                </div>
            ))
@@ -31,7 +31,7 @@ const { items = [] } = Astro.props
    const slides = carousel.querySelectorAll('.snap-center')
    let currentIndex = 0

-    const scrollToSlide = (index) => {
+    const scrollToSlide = (index: number) => {
        if (index >= 0 && index < slides.length) {
            slides[index].scrollIntoView({
                behavior: 'smooth',
--- a/superpage/src/components/HeaderNav.astro
+++ b/superpage/src/components/HeaderNav.astro
@@ -4,7 +4,7 @@ import Container from './Container.astro'
 ---

 <nav
-    class="bg-lime-400 sticky top-0 z-20 py-3 drop-shadow shadow-sm"
+    class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm"
    x-data="{ open: false }"
    x-on:keydown.esc.prevent.stop="open = false"
 >
--- a/superpage/src/icons/check-badge.svg
+++ b/superpage/src/icons/check-badge.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+</svg>
--- a/superpage/src/icons/chevron-left.svg
+++ b/superpage/src/icons/chevron-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+</svg>
--- a/superpage/src/icons/chevron-right.svg
+++ b/superpage/src/icons/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+</svg>
--- a/superpage/src/icons/clock.svg
+++ b/superpage/src/icons/clock.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
--- a/superpage/src/icons/lock-closed.svg
+++ b/superpage/src/icons/lock-closed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
+</svg>
--- a/superpage/src/icons/star.svg
+++ b/superpage/src/icons/star.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
+</svg>
--- a/superpage/src/layouts/Layout.astro
+++ b/superpage/src/layouts/Layout.astro
@@ -1,8 +1,4 @@
 ---
-export interface Props {
-    title: string
-}
-
 import '@fontsource/roboto'
 import '~/styles/app.css'
 import Logo from '~/components/logos/Eduseg.astro'
@@ -13,7 +9,6 @@ import { Icon } from 'astro-icon/components'
 import { getCollection } from 'astro:content'
 const courses = await getCollection('courses', ({ data }) => data.draft != true)

-const { ...props } = Astro.props
 const year = new Date().getFullYear()
 ---

--- a/superpage/src/pages/[slug].astro
+++ b/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>
--- a/superpage/src/pages/_assets/homem-de-negocios.png
+++ b/superpage/src/pages/_assets/homem-de-negocios.png
--- a/superpage/src/pages/_assets/mulher-de-negocios.png
+++ b/superpage/src/pages/_assets/mulher-de-negocios.png
--- a/superpage/src/pages/_assets/placeholder.png
+++ b/superpage/src/pages/_assets/placeholder.png
--- a/superpage/src/pages/blog/[slug].astro
+++ b/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>