Skip to content
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.

Sign up for GitHub

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

Landing Page #2

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Landing Page #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e8f65de
adicionando navbar
kodiitulip Sep 9, 2024
b4f06eb
iniciando navbar e ajustes de acessibilidade
kodiitulip Sep 9, 2024
e97a5a7
melhorando termos de serviço
kodiitulip Sep 12, 2024
edb05b9
Refatoramento da Navbar e criar o menu hamburger
kodiitulip Sep 14, 2024
b7a6858
Criando segundo tipo de botão, possivelmente irá se tornar o default
kodiitulip Sep 14, 2024
9beb9f4
pequenas correções nos forms de login e registro e correções no tailwind
kodiitulip Sep 14, 2024
d9b0912
Finalmente o começo da landing page
kodiitulip Sep 14, 2024
ab18c1a
adicionando mais seções
kodiitulip Sep 14, 2024
e72458f
iniciando o carrossel de imagens
kodiitulip Sep 14, 2024
4bd2075
finalmente finalizando o carrossel
kodiitulip Sep 17, 2024
c27c2e3
concertando um erro de hierarquia
kodiitulip Sep 17, 2024
c81bf2f
pequenos ajustes
kodiitulip Sep 22, 2024
ab1c3f0
adicionando 'target links' para as sessoes da landing page
kodiitulip Sep 26, 2024
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
View file
Open in desktop
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
*
Expand All @@ -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>
);
};
Expand Down
110 changes: 102 additions & 8 deletions app/page.jsx
View file
Open in desktop
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>
);
};

Expand Down
8 changes: 5 additions & 3 deletions components/buttons/DefaultButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading