wip

2025-04-21 12:17:14 -03:00
parent ae71d5a7ce
commit 24392f795b
12 changed files with 363 additions and 257 deletions
--- a/superpage/.prettierrc
+++ b/superpage/.prettierrc
@@ -1,5 +1,4 @@
 {
-  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
--- a/superpage/astro.config.mjs
+++ b/superpage/astro.config.mjs
@@ -5,6 +5,7 @@ import react from '@astrojs/react'
 import tailwindcss from '@tailwindcss/vite'
 import partytown from '@astrojs/partytown'
 import sitemap from '@astrojs/sitemap'
+import alpinejs from '@astrojs/alpinejs'
 import icon from 'astro-icon'

 // https://astro.build/config
@@ -14,6 +15,7 @@ export default defineConfig({
    react(),
    sitemap(),
    icon(),
+    alpinejs(),
    partytown({
      config: {
        forward: ['dataLayer.push', 'fbq'],
--- a/superpage/package-lock.json
+++ b/superpage/package-lock.json
@@ -8,6 +8,7 @@
      "name": "eduseg",
      "version": "0.0.1",
      "dependencies": {
+        "@astrojs/alpinejs": "^0.4.6",
        "@astrojs/partytown": "^2.1.4",
        "@astrojs/react": "^4.2.1",
        "@astrojs/sitemap": "^3.3.0",
@@ -16,8 +17,10 @@
        "@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",
@@ -72,6 +75,16 @@
        "url": "https://github.com/sponsors/antfu"
      }
    },
+    "node_modules/@astrojs/alpinejs": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/@astrojs/alpinejs/-/alpinejs-0.4.6.tgz",
+      "integrity": "sha512-uogG08bVN8ER8ANVAmfipUw3tZMk+SrZICtH5NMHmsDnSIuLSrXNa9+rCbAXHe/pbTfNUvlp5gE9jSxbd0KYFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/alpinejs": "^3.0.0",
+        "alpinejs": "^3.0.0"
+      }
+    },
    "node_modules/@astrojs/compiler": {
      "version": "2.11.0",
      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.11.0.tgz",
@@ -2233,6 +2246,12 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/@types/alpinejs": {
+      "version": "3.13.11",
+      "resolved": "https://registry.npmjs.org/@types/alpinejs/-/alpinejs-3.13.11.tgz",
+      "integrity": "sha512-3KhGkDixCPiLdL3Z/ok1GxHwLxEWqQOKJccgaQL01wc0EVM2tCTaqlC3NIedmxAXkVzt/V6VTM8qPgnOHKJ1MA==",
+      "license": "MIT"
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2409,6 +2428,21 @@
        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
      }
    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.1.5"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
+      "license": "MIT"
+    },
    "node_modules/acorn": {
      "version": "8.14.1",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -2421,6 +2455,15 @@
        "node": ">=0.4.0"
      }
    },
+    "node_modules/alpinejs": {
+      "version": "3.14.9",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.14.9.tgz",
+      "integrity": "sha512-gqSOhTEyryU9FhviNqiHBHzgjkvtukq9tevew29fTj+ofZtfsYriw4zPirHHOAy9bw8QoL3WGhyk7QqCh5AYlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "~3.1.1"
+      }
+    },
    "node_modules/ansi-align": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
--- a/superpage/package.json
+++ b/superpage/package.json
@@ -9,6 +9,7 @@
    "astro": "astro"
  },
  "dependencies": {
+    "@astrojs/alpinejs": "^0.4.6",
    "@astrojs/partytown": "^2.1.4",
    "@astrojs/react": "^4.2.1",
    "@astrojs/sitemap": "^3.3.0",
@@ -17,8 +18,10 @@
    "@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",
--- a/superpage/src/components/Accordion.astro
+++ b/superpage/src/components/Accordion.astro
@@ -0,0 +1,6 @@
+<details class="border border-transparent open:border-black/10 open:bg-gray-100 ..." open>
+    <summary class="text-sm leading-6 font-semibold text-gray-900 select-none">Why do they call it Ovaltine?</summary>
+    <div class="mt-3 text-sm leading-6 text-gray-600">
+        <p>The mug is round. The jar is round. They should call it Roundtine.</p>
+    </div>
+</details>
--- a/superpage/src/components/Carousel.astro
+++ b/superpage/src/components/Carousel.astro
@@ -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" key={idx}>
+                <div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0">
                    <Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
                </div>
            ))
--- a/superpage/src/components/HeaderNav.astro
+++ b/superpage/src/components/HeaderNav.astro
@@ -1,10 +1,23 @@
 ---
+import { Icon } from 'astro-icon/components'
 import Container from './Container.astro'
 ---

-<nav class="bg-lime-400 sticky top-0 z-10 py-3 drop-shadow shadow-sm">
+<nav
+    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"
+>
    <Container class="flex items-center">
-    <!-- <Menu recentCourses={courses} client:load /> -->
+        <button
+            class="text-black font-semibold cursor-pointer flex items-center gap-1 hover:outline-2 rounded"
+            x-bind:aria-expanded="open"
+            x-on:click="open = true"
+            aria-haspopup="true"
+        >
+            <div class="truncate max-w-36 sm:max-w-72 md:max-w-124">NR-18 PEMT Plataforma Móvel de Trabalho</div>
+            <Icon name="chevron" aria-hidden="true" class="w-4" />
+        </button>

        <button
            class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition duration-150"
@@ -12,4 +25,33 @@ import Container from './Container.astro'
            Contratar agora
        </button>
    </Container>
+
+    <div
+        x-cloak
+        x-show="open"
+        x-on:click.outside="open = false"
+        role="menu"
+        class="absolute top-0 bg-lime-400 w-full py-6 2xl:py-24 rounded-b-2xl drop-shadow shadow-sm"
+        style="display: none"
+    >
+        <Container class="text-black relative xl:w-10/12 2xl:w-5xl">
+            <button
+                class="absolute border border-black cursor-pointer rounded-full -top-3.5 2xl:-top-21.5 right-2.5"
+                title="Fechar"
+                aria-hidden={true}
+                x-on:click="open = false"
+            >
+                <Icon name="xmark" />
+            </button>
+
+            <div class="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
+                <span>Curso de formação</span>
+                <h1 class="text-xl lg:text-2xl">NR-18 PEMT Plataforma Elevatória Móvel de Trabalho</h1>
+            </div>
+
+            <div class="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
+                <h6 class="font-medium text-xl lg:text-2xl">Conheça outros cursos da EDUSEG&reg;</h6>
+            </div>
+        </Container>
+    </div>
 </nav>
--- a/superpage/src/icons/chevron.svg
+++ b/superpage/src/icons/chevron.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 22 13">
+    <path stroke-width="2" d="m1 1 10 10L21 1"/>
+</svg>
--- a/superpage/src/icons/xmark.svg
+++ b/superpage/src/icons/xmark.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="M6 18 18 6M6 6l12 12" />
+</svg>
--- a/superpage/src/pages/[slug].astro
+++ b/superpage/src/pages/[slug].astro
@@ -7,15 +7,16 @@ import { Icon } from 'astro-icon/components'
 import Layout from '~/layouts/Layout.astro'
 import Container from '~/components/Container.astro'
 import Carousel from '~/components/Carousel.astro'
-import placeholder from '~/assets/placeholder.png'
-import mulherdenegocios from '~/assets/mulher-de-negocios.png'
-import homemdenegocios from '~/assets/homem-de-negocios.png'
 import Kordsa from '~/components/logos/Kordsa.astro'
 import Semeq from '~/components/logos/Semeq.astro'
 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 { getCollection, getEntry } from 'astro:content'

 export async function getStaticPaths() {
@@ -143,11 +144,13 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu

                <div class="col-span-2 flex items-center">
                    <div class="xl:w-8/12 xl:mx-auto space-y-5 p-6">
-            <h3 class="text-pretty text-4xl font-semibold">Por que capacitar sua equipe com a EDUSEG&reg;</h3>
+                        <h3 class="text-pretty text-4xl font-semibold">
+                            Por que capacitar sua equipe com a EDUSEG&reg;
+                        </h3>
                        <p>
-              Nós cuidamos da burocracia, oferecemos uma plataforma completa para simplicar a gestão e capacitação em
-              larga escala de seus colaboradores. Com a EDUSEG&reg, sua empresa se beneficia de uma tecnologia eficiente
-              e confiável.
+                            Nós cuidamos da burocracia, oferecemos uma plataforma completa para simplicar a gestão e
+                            capacitação em larga escala de seus colaboradores. Com a EDUSEG&reg, sua empresa se
+                            beneficia de uma tecnologia eficiente e confiável.
                        </p>

                        <ul class="grid md:grid-cols-2 gap-1 lg:gap-2.5">
@@ -158,7 +161,9 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
                        </ul>

                        <div class="text-center">
-              <a href="#" class="text-blue-400 underline hover:no-underline"> Agendar uma demonstração </a>
+                            <a href="#" class="text-blue-400 underline hover:no-underline">
+                                Agendar uma demonstração
+                            </a>
                        </div>
                    </div>
                </div>
@@ -169,8 +174,8 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
            <div class="space-y-2.5">
                <h4 class="text-pretty text-4xl lg:text-5xl">Módulos deste curso</h4>
                <p class="text-base/6">
-          O curso é dividido em módulos para facilitar seu aprendizado e garantir que você domine todos os aspectos
-          teóricos e práticos.
+                    O curso é dividido em módulos para facilitar seu aprendizado e garantir que você domine todos os
+                    aspectos teóricos e práticos.
                </p>
            </div>
            <div class="lg:col-span-2 flex flex-col gap-1.5">
@@ -205,7 +210,7 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
                                        target="_blank"
                                        aria-label="LinkedIn"
                                    >
-                    <Icon name="LinkedIn" class="fill-white/70 size-5" />
+                                        <Icon name="linkedin" class="fill-white/70 size-5" />
                                    </a>
                                </div>
                            </div>
--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '~/layouts/Layout.astro'
-import Container from '~/components/Container'
+import Container from '~/components/Container.astro'

 let res = await fetch('https://betaeducacao.com.br/wp-json/wp/v2/posts')
 let posts = await res.json()