sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add pages

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-22 13:17:17 -03:00
parent 3c36b5f9ad
commit 4b054fb75e
10 changed files with 795 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
superpage/src/components/Form.tsx
View File

@@ -1,79 +0,0 @@
import { useForm } from 'react-hook-form'
import { useMutation } from 'node_modules/@tanstack/react-query/build/legacy'
import { queryClient } from '../queryClient'
import axios from 'axios'
import { createElement } from 'react'
import clsx from 'clsx'
interface IFormInput {
name: string
email: string
message: string
}
export function Form() {
const { register, handleSubmit, reset, formState } = useForm<IFormInput>()
const { mutateAsync } = useMutation(
{
mutationFn: async (data: IFormInput) => {
return await axios.post('https://n8n.vps.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562', data)
},
onSuccess: () => {
reset()
},
},
queryClient,
)
const onSubmit = async (data: IFormInput) => {
await mutateAsync(data)
}
return (
<form onSubmit={handleSubmit(onSubmit)} className="lg:w-6/12 mx-auto flex flex-col gap-2.5">
{formState.isSubmitSuccessful && <p className="bg-green-700 text-white p-3 rounded-lg">OK!</p>}
<Label>
<span className="lg:w-14">Nome</span>
<Input {...register('name')} />
</Label>
<Label>
<span className="lg:w-14">Email</span>
<Input {...register('email')} />
</Label>
<Label className="flex-col !items-start !gap-1">
<span>Mensagem</span>
<Input as="textarea" className="h-26" {...register('message')} />
</Label>
<button type="submit" className="">
Enviar
</button>
</form>
)
}
interface IInput extends React.HTMLAttributes<HTMLElement> {
as?: string
className?: string | undefined
}
export function Input({ as = 'input', className, ...props }: IInput) {
return createElement(as, {
className: clsx(
'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-none transition duration-150',
className,
),
...props,
})
}
interface ILabel extends React.HTMLAttributes<HTMLElement> {
className?: string | undefined
}
function Label({ children, className }: ILabel) {
return <label className={clsx('flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5', className)}>{children}</label>
}

74
superpage/src/pages/[slug].astro
View File

@@ -9,7 +9,7 @@ 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 Contact from './_components/Contact.astro'
import Contact from './_components/Contact.jsx'
import placeholder from './_assets/placeholder.png'
import mulherdenegocios from './_assets/mulher-de-negocios.png'
@@ -121,6 +121,24 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
<Carousel items={[Natura, Kordsa, Semeq, Nissan, Manserv]} />
</Container>
<div class="bg-white/10 py-12 lg:py-24">
<Container class="flex justify-between lg:w-6/12">
<ul class="space-y-2.5">
<li class="text-5xl">+ 100k</li>
<li class="uppercase font-bold text-white/50">Profissionais capacitados</li>
</ul>
<ul class="space-y-2.5">
<li class="text-5xl">+ 5k</li>
<li class="uppercase font-bold text-white/50">Empresas atendidas</li>
</ul>
<ul class="space-y-2.5">
<li class="text-5xl">12 anos</li>
<li class="uppercase font-bold text-white/50">de experiência</li>
</ul>
</Container>
</div>
<Container>
<div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">
<div
@@ -153,13 +171,13 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
<ul class="grid md:grid-cols-2 gap-1 lg:gap-2.5">
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Centralização de todos os certificados</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Ágilidade na liberação de cursos</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Agilidade na liberação de cursos</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Agendamento para liberação de cursos</li>
<li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">Aviso de vencimento para certificados</li>
</ul>
<div class="text-center">
<a href="#" class="text-blue-400 underline hover:no-underline">
<a href="#contato" class="text-blue-400 underline hover:no-underline">
Agendar uma demonstração
</a>
</div>
@@ -218,6 +236,27 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
</Container>
<!-- Course Modules 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"
>
<Icon name="lock-closed" class="size-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">
<h5 class="text-4xl lg:text-6xl/14 lg:font-black">
Certificados digitais com respaldo legal e gestão completa
</h5>
<ul class="lg:text-lg list-disc list-inside">
<li>Certificado com assinatura digital conforme o padrão ICP-Brasil</li>
<li>Tudo digital e salvo para sempre na núvem</li>
<li>Alertas automáticos de vencimento</li>
</ul>
</div>
</div>
</Container>
<!-- Cert End -->
<!-- Trainer -->
{
trainer && (
@@ -233,8 +272,8 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
/>
</div>
<div class="space-y-2.5">
<h5 class="text-xl text-pretty">Quem é o(a) instrutor(a)?</h5>
<h5 class="text-4xl lg:text-5xl text-pretty">{trainer.data.name}</h5>
<h6 class="text-xl text-pretty">Quem é o(a) instrutor(a)?</h6>
<p class="text-4xl lg:text-5xl text-pretty">{trainer.data.name}</p>
{trainer.data.bio.split(/\r?\n/).map((x) => (
<p class="text-sm/6 text-white/70">{x}</p>
@@ -257,30 +296,9 @@ const trainer = data.course?.trainer ? await getEntry(data.course?.trainer) : nu
}
<!-- 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"
>
<Icon name="lock-closed" class="size-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">
Certificados digitais com respaldo legal e gestão completa
</h6>
<ul class="lg:text-lg list-disc list-inside">
<li>Certificado com assinatura digital conforme o padrão ICP-Brasil</li>
<li>Tudo digital e salvo para sempre na núvem</li>
<li>Alertas automáticos de vencimento</li>
</ul>
</div>
</div>
</Container>
<!-- Cert End -->
<!-- Contact Form -->
<Container>
<Contact />
<Container id="contato">
<Contact client:load />
</Container>
<!-- Contact Form End -->
</section>

35
superpage/src/pages/_components/Contact.Astro
View File

@@ -1,35 +0,0 @@
---
import Label from './_label.astro'
import Input from './_input.astro'
import Textarea from './_textarea.astro'
// https://n8n.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562
if (Astro.request.method === 'POST') {
try {
const data = await Astro.request.formData()
console.log(data)
} catch (error) {
if (error instanceof Error) {
console.error(error.message)
}
}
}
---
<form method="POST" class="lg:w-6/12 mx-auto flex flex-col gap-2.5">
<Label>
<span class="lg:w-14">Nome</span>
<Input name="name" />
</Label>
<Label>
<span class="lg:w-14">Email</span>
<Input name="email" />
</Label>
<Label class="flex-col !items-start !gap-1">
<span>Mensagem</span>
<Textarea name="message" class="h-26" />
</Label>
<button type="submit">Enviar</button>
</form>

81
superpage/src/pages/_components/Contact.jsx Normal file
View File

@@ -0,0 +1,81 @@
import { Form, useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { createElement } from 'react'
import clsx from 'clsx'
import { z } from 'zod'
const schema = z.object({
name: z.string().nonempty({ message: 'Deve preencher o nome' }),
email: z.string().nonempty({ message: 'Deve preencher o email' }).email({ message: 'Deve ser um email válido' }),
message: z.string().nonempty({ message: 'Deve preencher a mensagem' }),
})
export default function Contact() {
const { register, formState, control, reset } = useForm({ resolver: zodResolver(schema) })
return (
<Form
action="https://n8n.eduseg.com.br/webhook/a377b3e0-b159-4536-98ab-e13822b60562"
onSuccess={() => reset()}
control={control}
className="lg:w-6/12 mx-auto flex flex-col gap-2.5"
>
{formState.isSubmitSuccessful && (
<p className="border border-lime-400 text-white bg-lime-400/25 p-5 rounded-xl font-semibold">
Sua mensagem foi enviada com sucesso.
</p>
)}
<div>
<Label>
<span className="lg:w-14">Nome</span>
<Input aria-invalid={!!formState.errors?.name} {...register('name')} />
</Label>
<Error>{formState.errors.name?.message}</Error>
</div>
<div>
<Label>
<span className="lg:w-14">Email</span>
<Input aria-invalid={!!formState.errors?.name} {...register('email')} />
</Label>
<Error>{formState.errors.email?.message}</Error>
</div>
<div>
<Label className="flex-col !items-start !gap-1">
<span>Mensagem</span>
<Input as="textarea" className="h-28" aria-invalid={!!formState.errors?.message} {...register('message')} />
</Label>
<Error className="lg:!pl-0">{formState.errors.message?.message}</Error>
</div>
<button type="submit" className="p-2.5 border border-lime-400/50 rounded-xl cursor-pointer transition">
Enviar
</button>
</Form>
)
}
export function Input({ as = 'input', className, ...props }) {
return createElement(as, {
className: clsx(
'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-0 transition duration-150',
'aria-invalid:outline-2 aria-invalid:outline-red-600',
className,
),
...props,
})
}
function Label({ children, className }) {
return <label className={clsx('flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5', className)}>{children}</label>
}
function Error({ children, className }) {
if (children) {
return <p className={clsx('text-sm text-red-500 lg:pl-16', className)}>{children}</p>
}
return null
}

7
superpage/src/pages/_components/_input.astro
View File

@@ -1,7 +0,0 @@
<input
class:list={[
'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-none transition duration-150',
Astro.props.class,
]}
{...Astro.props}
/>

3
superpage/src/pages/_components/_label.astro
View File

@@ -1,3 +0,0 @@
<label class:list={['flex max-lg:flex-col lg:items-center gap-1 lg:gap-2.5', Astro.props.class]}>
<slot />
</label>

8
superpage/src/pages/_components/_textarea.astro
View File

@@ -1,8 +0,0 @@
<textarea
class:list={[
'bg-white/10 focus:bg-white focus:text-black rounded-xl p-4 w-full focus:outline-none transition duration-150',
Astro.props.class,
]}
{...Astro.props}
>
</textarea>