Skip to content

Landing Page #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
200 changes: 98 additions & 102 deletions app/auth/page.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
'use client';
import { DefaultButton } from '@/components/buttons';
import { HorizontalLogo } from '@/components/logo';
import { LoginForm, RegisterForm } from '@/components/sign-up-forms';
import { TermsOfService } from '@/components/terms-of-service';

import Image from 'next/image';
import { useState } from 'react';
import Link from 'next/link';
import { createContext, useState } from 'react';
import { MdClose } from 'react-icons/md';

export const TosVisibleContext = createContext();

/**
* Página de Login
*
@@ -26,123 +30,115 @@ const Auth = () => {
const [tosVisible, setTosVisible] = useState(false);

return (
<div className='relative flex w-screen h-screen text-text-900 bg-background-100 overflow-hidden'>
{/* Termos de Serviço */}
<div
className={`absolute flex items-center justify-center w-screen h-screen
transition-all bg-black bg-opacity-20 ${!tosVisible && 'invisible'}`}>
<TermsOfService>
{/* Botão de fechar o Termos de Serviço */}
<MdClose
size={45}
className='absolute right-4 top-4 cursor-pointer'
onClick={() => setTosVisible(false)}
/>
</TermsOfService>
</div>
<div
className='relative flex w-screen h-screen max-h-screen max-w-screen
text-text-900 bg-background-100 overflow-clip'>
<TosVisibleContext.Provider value={{ tosVisible, setTosVisible }}>
<div className='flex flex-col overflow-auto w-full h-full px-8 py-2'>
<nav className='flex flex-row w-full md:justify-between justify-center items-center'>
{/* Logo Icon */}
<Link href='/'>
<HorizontalLogo className='text-primary-400' />
</Link>

{/* Register/Login Button */}
<DefaultButton
className={`invisible md:visible overflow-hidden h-0 w-0
md:h-max md:w-max px-8 py-1`}
onClick={() => setIsRegister((prev) => !prev)}>
{isRegister ? 'Fazer Login' : 'Registrar'}
</DefaultButton>
</nav>

<div className='flex flex-col overflow-auto w-full h-full px-8 py-4'>
<nav className='flex flex-row w-full md:justify-between justify-center'>
{/* Logo Icon */}
<div className='flex flex-row gap-4 items-center'>
{/* Login Form */}
<div className='flex flex-col w-full h-full justify-center items-center gap-0'>
{/* Chameleon Icon */}
<Image
src={'./assets/icons/login-page-icon/logo-icon.svg'}
alt='logo'
width={60}
height={45}
className='w-[60px] h-[45px] md:w-[120px] md:h-[90px]'
src={
'/assets/icons/login-page-icon/hide-chameleon.svg'
}
width={80}
height={80}
className='w-20 mt-[-10px] mb-[-5px] md:w-60 md:-mb-[15px] z-10'
alt='Camaleão olhando por cima da tela de login'
/>
<h1 className='text-2xl md:text-4xl font-bolder text-purple-100'>
ProgQuest
</h1>
</div>

{/* Register/Login Button */}
<DefaultButton
className={`invisible md:visible overflow-hidden h-0 w-0
md:h-max md:w-max py-2 px-8`}
onClick={() => setIsRegister((prev) => !prev)}>
{isRegister ? 'Fazer Login' : 'Registrar'}
</DefaultButton>
</nav>

{/* Login Form */}
<div className='flex flex-col w-full h-full justify-center items-center gap-0'>
{/* Chameleon Icon */}
<Image
src={'/assets/icons/login-page-icon/hide-chameleon.svg'}
width={80}
height={80}
className='w-20 mt-[-10px] mb-[-5px] md:w-60 md:-mb-[15px] z-10'
alt='Camaleão olhando por cima da tela de login'
/>
<div
className='flex flex-col w-[90%] md:w-[60%] lg:w-[35%]
<div
className='flex flex-col w-[90%] md:w-[60%] lg:w-[35%]
place-content-center border border-background-200 rounded-xl
bg-pink-100 p-5'>
{/* Form de Registro/Login */}
{isRegister ? (
<RegisterForm setTosVisible={setTosVisible} />
) : (
<LoginForm />
)}
{/* Form de Registro/Login */}
{isRegister ? <RegisterForm /> : <LoginForm />}

{/* Botões OAuth */}
<div className='grid grid-cols-2 gap mx-2.5 -mt-6 md:-mt-2'>
{/* Divisor */}
<hr
className='border border-gray-500
{/* Botões OAuth */}
<div className='grid grid-cols-2 gap mx-2.5 -mt-6 md:-mt-2'>
{/* Divisor */}
<hr
className='border border-gray-500
col-span-2 mt-2.5 mx-2.5 rounded-full'
/>

{/* Google Login */}
<DefaultButton className='col-span-2 md:col-span-1'>
<Image
src={'/assets/icons/misc/logo-google.svg'}
width={20}
height={20}
alt='Google Logo'
/>
Google
</DefaultButton>

{/* Github Login */}
<DefaultButton className='col-span-2 md:col-span-1'>
<Image
src={'/assets/icons/misc/logo-github.svg'}
width={20}
height={20}
alt='Github Logo'
/>
Github
</DefaultButton>
</div>
{/* Google Login */}
<DefaultButton className='col-span-2 md:col-span-1'>
<Image
src={
'/assets/icons/misc/logo-google.svg'
}
width={20}
height={20}
alt='Google Logo'
/>
Google
</DefaultButton>

{/* Link de cadastro/login */}
<div
className='visible md:invisible overflow-hidden md:-my-6
flex flex-col w-full text-center justify-center p-6 gap-1/2'>
<p>{isRegister ? 'Já' : 'Não'} tem uma conta?</p>
<div
onClick={() => setIsRegister((prev) => !prev)}
className='font-bold text-sm text-purple-200 hover:underline
decoration-purple-200 cursor-pointer'>
{isRegister ? 'Entre' : 'Cadastre'} aqui!
{/* Github Login */}
<DefaultButton className='col-span-2 md:col-span-1'>
<Image
src={
'/assets/icons/misc/logo-github.svg'
}
width={20}
height={20}
alt='Github Logo'
/>
Github
</DefaultButton>
</div>
</div>

{/* Termos e Condições */}
{!isRegister && (
{/* Link de cadastro/login */}
<div
onClick={() => setTosVisible(true)}
className='text-center hover:underline
decoration-purple-200 text-sm cursor-pointer'>
Termos e condições de uso
className='visible md:invisible overflow-hidden md:-my-6
flex flex-col w-full text-center justify-center p-6 gap-1/2'>
<p>
{isRegister ? 'Já' : 'Não'} tem uma conta?
</p>
<button
onClick={() =>
setIsRegister((prev) => !prev)
}
className='font-bold text-sm text-primary-400 hover:underline
decoration-primary-400 cursor-pointer'>
{isRegister ? 'Entre' : 'Cadastre'} aqui!
</button>
</div>
)}

{/* Termos e Condições */}
{!isRegister && (
<button
onClick={(e) => {
e.preventDefault();
setTosVisible(true);
}}
className='text-primary-400 hover:scale-[1.01] text-center
active:scale-100 transition-all cursor-pointer
mx-2.5'>
Termos e condições de uso
</button>
)}
</div>
</div>
</div>
</div>
<TermsOfService />
</TosVisibleContext.Provider>
</div>
);
};
110 changes: 102 additions & 8 deletions app/page.jsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,112 @@
import { DefaultButton } from '@/components/buttons';
import Link from 'next/link';
'use client';
import { SecondaryButton } from '@/components/buttons';
import { CreatorsCarousel } from '@/components/misc';
import { Navigation } from '@/components/nav-bar';

/**
* Componete da Página inicial do site
* @returns {JSX.Element} Next Component: 'Home Page'
*/
const Home = () => {
return (
<h1>
Landing Page
<Link href={'/auth'}>
<DefaultButton>Login Page</DefaultButton>
</Link>
</h1>
<div className='bg-white w-full h-max text-sm'>
<Navigation />
{/* Banner */}
<div
className='w-full bg-primary-300 rounded-b-[4rem] flex flex-col
lg:flex-row'
id='home'>
<div
className='p-20 pb-10 md:pb-20 flex flex-col items-center
lg:items-start text-center lg:text-left'>
<h1
className='text-4xl text-black mt-8
sm:text-5xl'>
ProgQuest: <br /> Mais alguma.
</h1>
<p className='text-xl mt-8 font-semibold pr-5 '>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, magni nemo ipsum autem ullam id, culpa minima
sunt numquam blanditiis ex, assumenda deleniti. Quis
aliquid deserunt, excepturi incidunt doloremque ut.
</p>
<SecondaryButton
onClick={() => {}}
className='mt-8 text-2xl mx-2 p-6 px-12'>
Acessar
</SecondaryButton>
</div>
<div className='p-16 pt-2 md:pt-24 flex justify-center items-center'>
<div
className='bg-gray-300 rounded-[4rem]
min-w-[25rem] min-h-[25rem]'></div>
</div>
</div>
{/* Hero Section */}
<div
className='w-full flex flex-col-reverse lg:flex-row pt-20'
id='about'>
<div className='p-12 flex justify-center items-center'>
<div
className='bg-gray-300 rounded-[4rem]
min-w-[25rem] min-h-[25rem]'></div>
</div>
<div
className='p-12 flex flex-col items-center
lg:items-end text-center lg:text-right'>
<h1 className='text-4xl text-black sm:text-5xl'>
Por dentro <br /> dessa viagem
</h1>
<p className='text-xl mt-8 font-semibold pl-5'>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, magni nemo ipsum autem ullam id, culpa minima
sunt numquam blanditiis ex, assumenda deleniti. Quis
aliquid deserunt, excepturi incidunt doloremque ut.
</p>
<SecondaryButton
onClick={() => {}}
className='mt-8 text-2xl mx-2 p-6 px-12
bg-purple-500 hover:bg-purple-400 focus:bg-purple-400'>
Acessar
</SecondaryButton>
</div>
</div>
{/* Knowlage Section */}
<div
className='w-full flex flex-col mt-8 min-h-[35rem] pt-20'
id='knowlage'>
<div className='flex justify-center items-center p-3'>
<h1 className='text-4xl text-black sm:text-5xl text-center md:max-w-2xl'>
Níveis de Conhecimento
</h1>
</div>
<div
className='grid grid-cols-2
lg:flex flex-row justify-evenly px-10 flex-grow'>
<div
className='bg-gray-300 rounded-[4rem]
flex-grow m-5'></div>
<div
className='bg-gray-300 rounded-[4rem]
flex-grow m-5'></div>
<div
className='bg-gray-300 rounded-[4rem]
flex-grow m-5 col-span-2'></div>
</div>
</div>
{/* Creators Carrousel */}
<div
className='w-full flex flex-col pt-20 mb-20'
id='contact'>
<h1 className='text-4xl text-black sm:text-5xl text-center m-10'>
Desenvolvedores
</h1>

<CreatorsCarousel />
</div>
{/* Footer */}
<div className='h-20 bg-background-200'></div>
</div>
);
};

8 changes: 5 additions & 3 deletions components/buttons/DefaultButton.jsx
Original file line number Diff line number Diff line change
@@ -4,17 +4,19 @@ import React from 'react';
/**
* Um botão padronizado com os estilos adequados
*
* Sombra, cor e cor de text pre selecionadas
* Sombra, cor e cor de texto pre selecionadas
* @returns Um botão padronizado
*/
const DefaultButton = ({ className = '', children, ...props }) => {
return (
<button
{...props}
className={`flex flex-row justify-center items-center
p-2.5 gap-2.5 bg-purple-200 shadow-button-default active:shadow-button-active
p-2.5 gap-2.5 bg-primary-400 shadow-primary-500 active:shadow-primary-500
shadow-button-default active:shadow-button-active
rounded-2xl m-2.5 text-white text-md lg:text-xl active:translate-y-[4px]
font-semibold mouse-pointer hover:underline transition-all
font-semibold mouse-pointer transition-all hover:bg-purple-500 focus:outline-none
focus:bg-purple-500 focus:text-gray-200 hover:text-gray-200
${className}`}>
{children}
</button>
27 changes: 27 additions & 0 deletions components/buttons/SecondaryButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/**
* Um botão
*
* Diferent do DefaultButton, esse botão é mais plano
* e tem uma cor de fundo padrão verde, porem pode ser alterado com
* tailwind adicional.
*
* @param {string} [className] - Tailwind adicional.
* @param {*} children - O que vai dentro do botão.
* @param {Object} props - Propriedades adicionais para passar ao botão.
* @returns {ReactElement} Um botão.
*/
const SecondaryButton = ({ className = '', children, ...props }) => {
return (
<button
{...props}
className={`flex flex-row justify-center items-center
bg-lime-500 hover:bg-lime-400 focus:bg-lime-400
shadow-md hover:-translate-y-1 active:translate-y-0 focus:-translate-y-1
rounded-full text-white font-semibold mouse-pointer transition-all
${className}`}>
{children}
</button>
);
};

export default SecondaryButton;
1 change: 1 addition & 0 deletions components/buttons/index.js
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { default as DefaultButton } from './DefaultButton';
export { default as SecondaryButton } from './SecondaryButton';
28 changes: 28 additions & 0 deletions components/logo/HorizontalLogo.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
'use client';
import Image from 'next/image';

/**
* Componente da Logo Horizontal
* @param {string} [className] - Classes tailwind adicionais
* @param {object} [props] - Propiedades adicionais
* @returns {JSX.Element} A Logo Horizontal
*/
const HorizontalLogo = ({ className = '', ...props }) => {
return (
<div
className={`flex flex-row gap-4 items-center
text-3xl font-extrabold ${className}`}
{...props}>
<Image
src={'./assets/icons/login-page-icon/logo-icon.svg'}
alt='logo'
width={60}
height={45}
className='w-[60px] h-[45px]'
/>
ProgQuest
</div>
);
};

export default HorizontalLogo;
1 change: 1 addition & 0 deletions components/logo/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as HorizontalLogo } from './HorizontalLogo';
79 changes: 79 additions & 0 deletions components/misc/CreatorsCarousel.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
'use client';
import Image from 'next/image';
import { useState } from 'react';
import { MdArrowLeft, MdArrowRight } from 'react-icons/md';

const creatorsData = require('./creators-data.json').creators;

const CreatorsCarousel = () => {
const [currentSlide, setCurrentSlide] = useState(0);

const prev = () =>
setCurrentSlide((curr) =>
curr === 0 ? creatorsData.length - 1 : curr - 1
);
const next = () =>
setCurrentSlide((curr) =>
curr === creatorsData.length - 1 ? 0 : curr + 1
);

return (
<div
className='max-w-md overflow-hidden relative mx-auto
sm:max-w-xl md:max-w-2xl lg:max-w-4xl xl:max-w-6xl'>
<div
className='relative flex transition-transform ease-out duration-500'
style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
{creatorsData.map((data, index) => {
const { image, name, position, description } = data;
return (
<div
key={index}
className='relative min-w-full aspect-[30/3]
flex justify-between items-center text-white'>
<div
className='bg-purple-300 w-[90%] mx-auto my-[3%]
rounded-[4rem] px-[5%] py-[8%] pl-[36%]'>
<h1
className='mb-4 text-[1.5rem] leading-[1.51rem]
lg:text-4xl'>
{name}
</h1>
<h2
className='mb-4 text-[1.5rem] leading-[1.51rem]
lg:text-4xl'>
{position}
</h2>
<p>{description}</p>
</div>
<Image
src={image}
alt={`Foto de ${name}`}
width={300}
height={400}
className='absolute top-1/2 left-[10%] -translate-y-1/2
rounded-[1.5rem] md:rounded-[4rem] aspect-[3/4] w-[27%]'
/>
</div>
);
})}
</div>
<div className='absolute inset-0 flex items-center justify-between p-4'>
<button
onClick={prev}
className='p-1 rounded-full shadow bg-white/80
text-gray-800 hover:bg-white focus:bg-white'>
<MdArrowLeft size={40} />
</button>
<button
onClick={next}
className='p-1 rounded-full shadow bg-white/80
text-gray-800 hover:bg-white focus:bg-white'>
<MdArrowRight size={40} />
</button>
</div>
</div>
);
};

export default CreatorsCarousel;
34 changes: 34 additions & 0 deletions components/misc/creators-data.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"creators": [
{
"name": "Rian Moreira",
"image": "https://picsum.photos/seed/sl1/300/400",
"position": "Product Owner",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti ad sequi quos itaque odit, quisquam"
},
{
"name": "Pedro Lucas",
"image": "https://picsum.photos/seed/sl1/300/400",
"position": "Desenvolvedor",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti ad sequi quos itaque odit, quisquam"
},
{
"name": "Kodie Sales",
"image": "https://picsum.photos/seed/sl1/300/400",
"position": "Desenvolvedor (Out Sourcing)",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti ad sequi quos itaque odit, quisquam"
},
{
"name": "Taís Gomes",
"image": "https://picsum.photos/seed/sl1/300/400",
"position": "Design (Out Sourcing)",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti ad sequi quos itaque odit, quisquam"
},
{
"name": "Shyanne Soares",
"image": "https://picsum.photos/seed/sl1/300/400",
"position": "UX Designer (Out Sourcing)",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti ad sequi quos itaque odit, quisquam"
}
]
}
1 change: 1 addition & 0 deletions components/misc/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as CreatorsCarousel } from './CreatorsCarousel';
41 changes: 41 additions & 0 deletions components/nav-bar/HamburgerNavbar.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
'use client';
import { useState } from 'react';
import { MdClose, MdDensityMedium } from 'react-icons/md';
import { NavigationItems } from '@/components/nav-bar';

/**
* HamburgerNavbar component
*
* Esse componente é uma navigation mobile que pode ser aberta ou fechada.
* Contem uma lista de links, e um botão para abrir e fechar.
*
* @returns {JSX.Element}
*/
const HamburgerNavbar = () => {
const [visible, setVisible] = useState(false);

return (
<>
<button
onClick={() => setVisible((prev) => !prev)}
className={`${visible ? 'text-black' : 'text-white'}
cursor-pointer hover:scale-105 transition-all
focus:scale-105 active:scale-100 z-20 relative md:hidden`}>
{visible ? (
<MdClose size={32} />
) : (
<MdDensityMedium size={32} />
)}
</button>
<div
className={`absolute top-0 right-0 max-w-md bg-background-100
p-12 flex flex-col z-[19] md:hidden transition-all rounded-b-3xl
items-end
${visible ? 'translate-x-0' : 'translate-x-full'}`}>
<NavigationItems className='text-black text-2xl text-center' />
</div>
</>
);
};

export default HamburgerNavbar;
39 changes: 39 additions & 0 deletions components/nav-bar/Navigation.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
'use client';
import Link from 'next/link';
import { HorizontalLogo } from '@/components/logo';
import { HamburgerNavbar, NavigationItems } from '@/components/nav-bar';

/**
* Um elemento de barra de navegação que está sempre no topo da página.
*
* Essa barra de navegação tem um logotipo da ProgQuest, e
* duas listas de navegação.
* Uma que apenas aparece em telas pequenas com o menu hamburger,
* e outra de maneira horizontal com cada link relevante
*
* @returns {JSX.Element} A barra de navegação
*/
const Navigation = () => {
return (
<header
className='fixed top-0 left-0 w-full px-5 py-4 bg-primary-300
flex justify-between items-center z-10'>
{/* Logo */}
<Link
href='/'
className='group relative'>
<HorizontalLogo
className='text-white transition-all group-active:translate-y-0
max-w-[50%]
group-hover:-translate-y-[2px] group-focus-within:-translate-y-[2px]'
/>
</Link>
{/* Menu Hamburger */}
<HamburgerNavbar />
{/* Links de Navegação */}
<NavigationItems className='hidden md:flex text-white' />
</header>
);
};

export default Navigation;
62 changes: 62 additions & 0 deletions components/nav-bar/NavigationItems.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
'use client';
import Link from 'next/link';

/**
* Um componente que renderiza uma navegação com links para Home, About, Contact e Sign-Up.
*
* @param {string} [className] - Classes tailwind adicionais.
* @returns {JSX.Element} O componente de navegação.
*/
const NavigationItems = ({ className = '' }) => {
return (
<nav className={className}>
<Link
href='#home'
className='relative text-md font-medium mx-5 transition-all
flex flex-col group'>
Home
<div
className='transition-all h-[2px] w-0 bg-current
group-hover:w-full group-focus-within:w-full'></div>
</Link>
<Link
href='#about'
className='relative text-md font-medium mx-5 transition-all
flex flex-col group'>
Sobre
<div
className='transition-all h-[2px] w-0 bg-current
group-hover:w-full group-focus-within:w-full'></div>
</Link>
<Link
href='#knowlage'
className='relative text-md font-medium mx-5 transition-all
flex flex-col group'>
Conhecimento
<div
className='transition-all h-[2px] w-0 bg-current
group-hover:w-full group-focus-within:w-full'></div>
</Link>
<Link
href='#contact'
className='relative text-md font-medium mx-5 transition-all
flex flex-col group'>
Contatos
<div
className='transition-all h-[2px] w-0 bg-current
group-hover:w-full group-focus-within:w-full'></div>
</Link>
<Link
href='/auth'
className='relative text-md font-medium mx-5 transition-all
flex flex-col group'>
Fazer Login
<div
className='transition-all h-[2px] w-0 bg-current
group-hover:w-full group-focus-within:w-full'></div>
</Link>
</nav>
);
};

export default NavigationItems;
3 changes: 3 additions & 0 deletions components/nav-bar/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { default as Navigation } from './Navigation';
export { default as HamburgerNavbar } from './HamburgerNavbar';
export { default as NavigationItems } from './NavigationItems';
2 changes: 1 addition & 1 deletion components/sign-up-forms/LoginForm.jsx
Original file line number Diff line number Diff line change
@@ -52,7 +52,7 @@ const LoginForm = () => {
<Link
href={'#'}
className='text-right hover:underline mx-2.5
decoration-purple-200 text-sm md:text-md'>
decoration-primary-400 text-sm md:text-md'>
Esqueceu a senha?
</Link>
{/* Entrar */}
23 changes: 16 additions & 7 deletions components/sign-up-forms/RegisterForm.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { MdLock, MdPerson, MdMail } from 'react-icons/md';
import { DefaultButton } from '@/components/buttons';

import { TosVisibleContext } from '@/app/auth/page';
import { useContext } from 'react';

/**
* Um quadro com forms de cadastro para credenciais e OAuth
*
@@ -10,7 +13,8 @@ import { DefaultButton } from '@/components/buttons';
* TODO: Fazer a autenticação funcional
* @returns {JSX.Element}
*/
const RegisterForm = ({ setTosVisible = () => {} }) => {
const RegisterForm = () => {
const { setTosVisible } = useContext(TosVisibleContext);
return (
<form className='flex flex-col w-full h-full gap-2 p-2'>
{/* Register Form */}
@@ -61,20 +65,25 @@ const RegisterForm = ({ setTosVisible = () => {} }) => {
/>
</div>
{/* Termos de Uso */}
<div className='flex text-center mx-2.5 align-center justify-center text-sm md:text-lg'>
<div
className='flex text-center mx-2.5
items-center justify-center text-sm'>
<input
type='checkbox'
name='tos'
className='mx-2.5 w-4 h-4'
required
/>
Aceito os
<div
onClick={() => setTosVisible(true)}
className='text-purple-200 hover:underline
decoration-black ml-1 cursor-pointer'>
<button
onClick={(e) => {
e.preventDefault();
setTosVisible(true);
}}
className='text-primary-400 hover:scale-[1.01]
active:scale-100 transition-all ml-1 cursor-pointer'>
Termos e condições de uso
</div>
</button>
</div>
{/* Registrar */}
<DefaultButton type='submit'>Registrar</DefaultButton>
234 changes: 129 additions & 105 deletions components/terms-of-service/TermsOfService.jsx
Original file line number Diff line number Diff line change
@@ -1,124 +1,148 @@
'use client';

import { useContext } from 'react';
import { TosVisibleContext } from '@/app/auth/page';
import { MdClose } from 'react-icons/md';

/**
* Um painel com os termos de serviço da plataforma
* @returns {JSX.Element} Um painel com os termos de serviço da plataforma
*/
const TermsOfService = ({ children }) => {
const TermsOfService = () => {
const { tosVisible, setTosVisible } = useContext(TosVisibleContext);

return (
<div
className='relative z-30 max-w-4xl bg-pink-100 p-12 md:px-36 md:py-20
max-h-[90vh] overflow-scroll mx-14 my-30'>
{children}
<div>
<h1>Termos e Condições de Uso - ProgQuest</h1>
<br />
<p>
Bem-vindo(a) ao ProgQuest, sua plataforma interativa de
aprendizado de programação com um toque de cultura pop!
Antes de embarcar nesta jornada educacional emocionante, é
essencial entender e concordar com os Termos e Condições que
regem a utilização dos nossos serviços.
</p>
<br />
<p>
Ao acessar e utilizar o ProgQuest, você concorda em cumprir
e estar vinculado aos seguintes termos e condições. A nossa
missão é proporcionar uma experiência educacional inovadora
e envolvente, e esses termos visam garantir a segurança, a
integridade e o respeito em nossa comunidade de aprendizes
de programação.
</p>
<br />
<p>
Por favor, leia atentamente os Termos e Condições a seguir.
Se tiver alguma dúvida ou preocupação, não hesite em entrar
em contato conosco (email de alguém). Ao continuar a
utilizar o ProgQuest, você reconhece que compreendeu e
concorda com os termos estabelecidos.
</p>
<br />
<ol>
<li>
<h2>1. Aceitação dos Termos:</h2>
</li>
<p>
Ao acessar e utilizar o ProgQuest, você automaticamente
concorda com estes Termos e Condições. Se não concordar
com algum aspecto destes termos, pedimos que não utilize
nossos serviços.
</p>
<br />
<li>
<h2>2. Uso Responsável:</h2>
</li>
<p>
Compromete-se a utilizar o ProgQuest de maneira
responsável, respeitando outros usuários e cumprindo
todas as leis e regulamentos aplicáveis.
</p>
<br />
<li>
<h2>3. Conta do Usuário:</h2>
</li>
<p>
Ao criar uma conta no ProgQuest, somos responsáveis por
manter a confidencialidade de suas credenciais e
informações de sua conta.
</p>
<br />
<li>
<h2>4. Propriedade Intelectual:</h2>
</li>
<p>
Reconhecemos que todos os direitos autorais, marcas
registradas e outros direitos de propriedade intelectual
relacionados às franquias referenciadas em nossa
plataforma são de propriedade intelectual exclusivas das
respectivas empresas detentoras. Reiteramos que a
plataforma não possui fins lucrativos, apenas
educacionais, portanto não há ganhos derivados da
utilização de propriedade intelectual de outrem.
Buscamos utilizar as personagens de maneira respeitosa e
meramente ilustrativa.
</p>
<br />
<li>
<h2>5. Privacidade e Dados Pessoais:</h2>
</li>
<p>
Entende e concorda com a nossa Política de Privacidade,
que descreve como coletamos, usamos e protegemos suas
informações pessoais.
</p>
<br />
<li>
<h2>6. Alterações nos Termos:</h2>
</li>
className={`absolute top-0 z-30 w-screen h-screen flex items-center
justify-center transition-all bg-black bg-opacity-20 p-20
max-h-screen left-0 ${!tosVisible && 'hidden'}`}>
<div
className='relative max-w-4xl bg-pink-100 p-12 md:px-36 md:py-15
m-auto rounded-md animate-fade-in-up flex max-h-[90vh]
flex-col justify-center items-center'>
<button
autoFocus={tosVisible}
onClick={() => setTosVisible(false)}
className='absolute right-4 top-4'>
<MdClose
size={45}
className='hover:scale-105 transition-all focus:scale-105
active:scale-[0.9]'
/>
</button>
<h1 classname='text-md lg:text-lg'>
Termos e Condições de Uso - ProgQuest
</h1>
<div className='overflow-scroll w-full h-full'>
<p>
Reconhece que os Termos e Condições podem ser
atualizados periodicamente, e concorda em revisá-los
regularmente.
Bem-vindo(a) ao ProgQuest, sua plataforma interativa de
aprendizado de programação com um toque de cultura pop!
Antes de embarcar nesta jornada educacional emocionante,
é essencial entender e concordar com os Termos e
Condições que regem a utilização dos nossos serviços.
</p>
<br />
<li>
<h2>7. Encerramento da Conta:</h2>
</li>
<p>
Reservamo-nos o direito de encerrar ou suspender sua
conta, a nosso critério, caso haja violação destes
Termos e Condições.
Ao acessar e utilizar o ProgQuest, você concorda em
cumprir e estar vinculado aos seguintes termos e
condições. A nossa missão é proporcionar uma experiência
educacional inovadora e envolvente, e esses termos visam
garantir a segurança, a integridade e o respeito em
nossa comunidade de aprendizes de programação.
</p>
<br />
<p>
Agradecemos por utilizar o ProgQuest como sua plataforma
de aprendizado. Estamos empolgados em tê-lo(a) conosco
nessa jornada educacional única. Se precisar de
esclarecimentos adicionais ou tiver alguma preocupação,
entre em contato conosco.
Por favor, leia atentamente os Termos e Condições a
seguir. Se tiver alguma dúvida ou preocupação, não
hesite em entrar em contato conosco (email de alguém).
Ao continuar a utilizar o ProgQuest, você reconhece que
compreendeu e concorda com os termos estabelecidos.
</p>
<br />
<p>Seja bem-vindo(a) ao ProgQuest!</p>
</ol>
<ol>
<li>
<h2>1. Aceitação dos Termos:</h2>
</li>
<p>
Ao acessar e utilizar o ProgQuest, você
automaticamente concorda com estes Termos e
Condições. Se não concordar com algum aspecto destes
termos, pedimos que não utilize nossos serviços.
</p>
<br />
<li>
<h2>2. Uso Responsável:</h2>
</li>
<p>
Compromete-se a utilizar o ProgQuest de maneira
responsável, respeitando outros usuários e cumprindo
todas as leis e regulamentos aplicáveis.
</p>
<br />
<li>
<h2>3. Conta do Usuário:</h2>
</li>
<p>
Ao criar uma conta no ProgQuest, somos responsáveis
por manter a confidencialidade de suas credenciais e
informações de sua conta.
</p>
<br />
<li>
<h2>4. Propriedade Intelectual:</h2>
</li>
<p>
Reconhecemos que todos os direitos autorais, marcas
registradas e outros direitos de propriedade
intelectual relacionados às franquias referenciadas
em nossa plataforma são de propriedade intelectual
exclusivas das respectivas empresas detentoras.
Reiteramos que a plataforma não possui fins
lucrativos, apenas educacionais, portanto não há
ganhos derivados da utilização de propriedade
intelectual de outrem. Buscamos utilizar as
personagens de maneira respeitosa e meramente
ilustrativa.
</p>
<br />
<li>
<h2>5. Privacidade e Dados Pessoais:</h2>
</li>
<p>
Entende e concorda com a nossa Política de
Privacidade, que descreve como coletamos, usamos e
protegemos suas informações pessoais.
</p>
<br />
<li>
<h2>6. Alterações nos Termos:</h2>
</li>
<p>
Reconhece que os Termos e Condições podem ser
atualizados periodicamente, e concorda em revisá-los
regularmente.
</p>
<br />
<li>
<h2>7. Encerramento da Conta:</h2>
</li>
<p>
Reservamo-nos o direito de encerrar ou suspender sua
conta, a nosso critério, caso haja violação destes
Termos e Condições.
</p>
<br />
<p>
Agradecemos por utilizar o ProgQuest como sua
plataforma de aprendizado. Estamos empolgados em
tê-lo(a) conosco nessa jornada educacional única. Se
precisar de esclarecimentos adicionais ou tiver
alguma preocupação, entre em contato conosco.
</p>
<br />
<p>Seja bem-vindo(a) ao ProgQuest!</p>
</ol>
</div>
</div>
</div>
);
12 changes: 8 additions & 4 deletions next.config.mjs
Original file line number Diff line number Diff line change
@@ -3,12 +3,16 @@ const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "lh3.googleusercontent.com",
protocol: 'https',
hostname: 'lh3.googleusercontent.com',
},
{
protocol: "https",
hostname: "ui-avatars.com",
protocol: 'https',
hostname: 'ui-avatars.com',
},
{
protocol: 'https',
hostname: 'picsum.photos',
},
],
},
40 changes: 27 additions & 13 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -8,8 +8,8 @@ module.exports = {
theme: {
extend: {
boxShadow: {
'button-default': '0px 10px 0px var(--purple-300)',
'button-active': '0px 6px 0px var(--purple-300)',
'button-default': '0px 10px 0px',
'button-active': '0px 6px 0px',
},
colors: {
text: {
@@ -19,27 +19,41 @@ module.exports = {
100: 'var(--background-100)',
200: 'var(--background-200)',
},
purple: {
100: 'var(--purple-100)',
200: 'var(--purple-200)',
300: 'var(--purple-300)',
primary: {
100: '#dbc9f3',
200: '#ad9ad7',
300: '#a47fff',
400: '#8b52fe',
500: '#452d66',
},
pink: {
100: 'var(--pink-100)',
200: 'var(--pink-200)',
},
green: {
100: 'var(--green-100)',
200: 'var(--green-200)',
secondary: {
100: '#81c784',
200: '#4caf50',
},
},
screens: {
tn: '320px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
keyframes: {
'fade-in-up': {
'0%': {
opacity: 0,
transform: 'translateY(20px)',
},
'100%': {
opacity: 1,
transform: 'translateY(0px)',
},
},
},
animation: {
'fade-in-up': 'fade-in-up 0.5s ease-out',
},
},
},
plugins: [],