school page plans table initial versions

claushaas · Jul 29, 2024 · 5c1059f · 5c1059f
1 parent 8ab0dc5
commit 5c1059f
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 2 deletions.
diff --git a/app/components/school-plans-dialog.tsx b/app/components/school-plans-dialog.tsx
@@ -0,0 +1,139 @@
+import {
+	XMarkIcon,
+	CheckCircleIcon,
+	HeartIcon,
+	BookmarkIcon,
+	VideoCameraIcon,
+	PlayIcon,
+	UserGroupIcon,
+	XCircleIcon,
+} from '@heroicons/react/24/outline';
+import * as Dialog from '@radix-ui/react-dialog';
+
+type SchoolPlansDialogProperties = {
+	readonly isOpen: boolean;
+	readonly onOpenChange: (open: boolean) => void;
+};
+
+export default function SchoolPlansDialog({isOpen, onOpenChange}: SchoolPlansDialogProperties) {
+	return (
+		<Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
+			<Dialog.Portal>
+				<Dialog.Overlay className='bg-mauvea-12 fixed inset-0'/>
+
+				<Dialog.Content className='fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] p-4 max-w-screen-lg w-[90%] bg-mauve-2 dark:bg-mauvedark-2 rounded-xl overflow-y-auto max-h-[90%]'>
+					<h1>Escolha seu plano e comece agora mesmo:</h1>
+
+					<div className='flex justify-center gap-8'>
+						<div className='basis-80 p-4 bg-purplea-4 rounded-2xl'>
+							<h3>Mensal</h3>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>7 Dias Gratuitos</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Cancele quando quiser</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Mais de 1.500 aulas</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Aulas Teóricas</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Treinos de Respiratórios</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Treinos de Ásanas</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Treinos de Meditação</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Treinos de Relaxamento</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Suporte com Professores</p>
+							</div>
+						</div>
+
+						<div className='basis-80 p-4 bg-purplea-4 rounded-2xl'>
+							<h3>Anual</h3>
+
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Todos Benefícios do Plano Mensal</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Alimentação Vegetariana</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Anatomia Aplicada ao Yoga</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Caminhos para Orgasmo e Feminilidade</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Congresso Semana Sem Carnes</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Culinária Vegetariana</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Jejum Intermitente</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso A Respiração do Yoga</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Saúde e Longevidade</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Sámkhya</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Yoga Sutra de Patáñjali</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Yoga e Hinduismo</p>
+							</div>
+							<div className='flex justify-start gap-1 items-center mb-1'>
+								<CheckCircleIcon className='size-4 stroke-grass-10 shrink-0'/>
+								<p>Curso Saúde Através do Yoga</p>
+							</div>
+						</div>
+					</div>
+
+					<Dialog.Close asChild>
+						<button
+							type='button'
+							className='absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center outline-none'
+							aria-label='Close'
+						>
+							<XMarkIcon aria-label='Close' className='hover:pointer absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px]'/>
+						</button>
+					</Dialog.Close>
+				</Dialog.Content>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}
diff --git a/app/routes/escola-online.tsx b/app/routes/escola-online.tsx
@@ -10,12 +10,14 @@ import {
 } from '@heroicons/react/24/outline';
 import {Image} from '@unpic/react';
 import * as Accordion from '@radix-ui/react-accordion';
+import {useState} from 'react';
 import {Button, ButtonPreset, ButtonType} from '~/components/button.js';
 import {Testimonies} from '~/layouts/testimonies.js';
 import {History} from '~/layouts/yem-history.js';
 import {buildImgSource} from '~/utils/build-cloudflare-image-source.js';
 import {PlaylistCard} from '~/components/playlist-card.js';
 import {AccordionItem} from '~/components/accordion.js';
+import SchoolPlansDialog from '~/components/school-plans-dialog';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => [
 	{title: 'Escola Online - Yoga em Movimento'},
@@ -28,6 +30,7 @@ export const loader = ({request}: LoaderFunctionArgs) => json<{meta: Array<{tagN
 });
 
 export default function EscolaOnline() {
+	const [isSchoolPlansDialogOpen, setIsSchoolPlansDialogOpen] = useState<boolean>(false);
 	return (
 		<>
 			<header className='max-xs:max-w-[95%] max-w-[90%] mx-auto my-4 flex justify-between items-center w-[-webkit-fill-available]'>
@@ -38,7 +41,13 @@ export default function EscolaOnline() {
 					<Link to='/login' aria-label='Entrar na plataforma do Yoga em Movimento'>
 						<Button type={ButtonType.Button} preset={ButtonPreset.Secondary} text='Entrar'/>
 					</Link>
-					<Button type={ButtonType.Button} preset={ButtonPreset.Primary} text='Começar Agora'/>
+					<Button
+						type={ButtonType.Button}
+						preset={ButtonPreset.Primary}
+						text='Começar Agora'
+						onClick={() => {
+							setIsSchoolPlansDialogOpen(true);
+						}}/>
 				</div>
 			</header>
 			<main>
@@ -50,7 +59,13 @@ export default function EscolaOnline() {
 						<h3 className='text-purple-12 dark:text-purple-4'>Viva os benefícios do Yoga para o seu Corpo, Mente e Emoções.<br/>Transforme-se na Sua Melhor Versão.</h3>
 					</div>
 					<div className='w-fit mx-auto'>
-						<Button type={ButtonType.Button} preset={ButtonPreset.Primary} text='Praticar 7 Dias Grátis'/>
+						<Button
+							type={ButtonType.Button}
+							preset={ButtonPreset.Primary}
+							text='Praticar 7 Dias Grátis'
+							onClick={() => {
+								setIsSchoolPlansDialogOpen(true);
+							}}/>
 						<p className='text-center text-sm mt-1.5'>cancele quando quiser</p>
 					</div>
 				</section>
@@ -706,6 +721,8 @@ export default function EscolaOnline() {
 					</Accordion.Root>
 				</section>
 			</main>
+
+			<SchoolPlansDialog isOpen={isSchoolPlansDialogOpen} onOpenChange={setIsSchoolPlansDialogOpen}/>
 		</>
 	);
 }