Skip to content

S
sevenpro-frontend
Commit 1bc81bb2 authored by Wellton Quirino's avatar Wellton Quirino
Browse files
Options

create register component

parent 9eb362a1
Hide whitespace changes
Inline Side-by-side
Showing with 416 additions and 73 deletions
package-lock.json
View file @ 1bc81bb2
......@@ -9,6 +9,8 @@
"version": "0.1.0",
"dependencies": {
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
......@@ -594,6 +596,81 @@
}
}
},
"node_modules/@radix-ui/react-label": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
"integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
"dependencies": {
"@radix-ui/react-primitive": "2.0.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
"integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
"integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
"dependencies": {
"@radix-ui/react-slot": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-slot": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
"integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-portal": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
......@@ -664,6 +741,81 @@
}
}
},
"node_modules/@radix-ui/react-separator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
"integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
"dependencies": {
"@radix-ui/react-primitive": "2.0.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
"integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
"integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
"dependencies": {
"@radix-ui/react-slot": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-slot": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
"integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slot": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
......
src/app/(home)/page.tsx
View file @ 1bc81bb2
import { Banner } from '@/components/banner'
import { Footer } from '@/components/footer'
import { Header } from '@/components/header'
import { Hub } from '@/components/hub'
import { SignUp } from '../../components/sign-up'
import { Hub } from '../../components/hub'
// import { ThemeSwitcher } from '@/components/theme-switcher'
export default function Home() {
return (
<>
<Header />
<main className="max-w-7xl mx-auto">
<main className="">
<Banner />
{/* <ThemeSwitcher /> */}
<SignUp />
<Hub />
</main>
<Footer />
......
src/components/banner.tsx
View file @ 1bc81bb2
......@@ -5,10 +5,7 @@ import banner from '../../public/images/banner.png'
export function Banner() {
return (
<div className="h-[400px] flex items-center justify-end bg-gray-900">
{/* <h1 className="font-thin text-4xl bottom-36 left-96 max-w-72 text-primary">
Transforme sua vida através do conhecimento
</h1> */}
<div className="container h-[400px] flex items-center justify-end bg-gray-900">
<div className="relative right-0">
<div className="absolute h-[400px] w-[400px] bg-gradient-to-r from-gray-900 md:from-30% z-20" />
<div className="absolute h-[400px] w-[200px] md:w-[500px] bg-gradient-to-r from-green-700 md:from-10% z-10" />
......
src/components/footer.tsx
View file @ 1bc81bb2
......@@ -10,7 +10,7 @@ import LogoComponent from './logo'
export function Footer() {
return (
<footer className="px-6 py-10 bg-green-700">
<div className="max-w-7xl mx-auto flex gap-3 justify-center md:justify-between items-center">
<div className="container mx-auto flex gap-3 justify-center md:justify-between items-center">
<div className="md:flex items-center justify-center gap-2 md:gap-6">
<Image src={imgLogoFooter} alt="PRO" className="hidden md:flex" />
<LogoComponent
......
src/components/header.tsx
View file @ 1bc81bb2
......@@ -4,7 +4,7 @@ import { NavLink } from './nav-link'
export function Header() {
return (
<header className="w-full px-6 py-5">
<div className="max-w-7xl mx-auto flex justify-between ">
<div className="container mx-auto flex justify-between ">
<LogoComponent width={115} height={32} className="fill-primary" />
<NavLink />
......
src/components/hub.tsx
View file @ 1bc81bb2
......@@ -2,76 +2,115 @@ import Image from 'next/image'
import globo from '../../public/images/globo.svg'
import { Button } from './ui/button'
import { Calendar, Clock4, DollarSign, UserRound } from 'lucide-react'
import imgFooter from '../../public/images/img-footer.svg'
export function Hub() {
return (
<section className="flex justify-around p-20">
<div className="flex flex-col items-center justify-center w-72 md:w-6/12 gap-10">
<Image src={globo} alt="Imagem demonstrativa de um Globo" />
<p className="text-center text-2xl font-thin text-green-400 w-full md:max-w-96">
Somos um <b className="text-md">hub</b> de inovação, tecnologia e
negócios
</p>
<p className="hidden md:block text-center max-w-96">
Nós, na <b>Indústria Criativa</b>, oferecemos serviços educacionais e
assessoria profissional a instituições públicas e privadas. Nossa meta
é conectar pessoas, empresas e instituições por meio do conhecimento
técnico-científico aplicado aos negócios.
</p>
<Button
variant="outline"
className="uppercase rounded-sm bg-green-400/10 text-sm text-green-400 font-thin hover:bg-green-400/5 hover:text-green-400"
>
Saiba mais
</Button>
</div>
<div className="hidden md:flex items-center justify-center w-6/12">
<ul className="flex flex-col gap-8">
<li className="flex items-center gap-4">
<div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
<Clock4 size={35} />
<section className="flex flex-col py-20">
<div className="container flex justify-center md:justify-around">
<div className="flex flex-col items-center justify-center w-72 md:w-6/12 gap-10">
<Image src={globo} alt="Imagem demonstrativa de um globo" />
<p className="text-center text-2xl font-thin text-green-400 w-full md:max-w-96">
Somos um <b className="text-3xl font-bold">hub</b> de inovação,
tecnologia e negócios
</p>
<p className="hidden md:block text-center max-w-96">
Nós, na <b>Indústria Criativa</b>, oferecemos serviços educacionais
e assessoria profissional a instituições públicas e privadas. Nossa
meta é conectar pessoas, empresas e instituições por meio do
conhecimento técnico-científico aplicado aos negócios.
</p>
<Button
variant="outline"
className="uppercase rounded-sm bg-green-400/10 text-sm text-green-400 font-thin hover:bg-green-400/5 hover:text-green-400"
>
Saiba mais
</Button>
</div>
<div className="hidden md:flex items-center justify-center w-6/12">
<ul className="flex flex-col gap-8">
<li className="flex items-center gap-4">
<div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
<Clock4 size={35} />
</div>
</div>
<div className="flex flex-col gap-2">
<span className="font-thin">Duração:</span>
<span className="text-xl">30 Hrs/Curso Rápido</span>
</div>
</li>
<li className="flex items-center gap-4">
<div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
<UserRound size={35} />
</div>
</div>
<div className="flex flex-col gap-2">
<span className="font-thin">Indicado para:</span>
<span className="text-xl">Estudantes</span>
</div>
</div>
<div className="flex flex-col gap-2">
<span className="font-thin">Duração:</span>
<span className="text-xl">30 Hrs/Curso Rápido</span>
</div>
</li>
<li className="flex items-center gap-4">
<div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
<UserRound size={35} />
</li>
<li className="flex items-center gap-4">
<div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
<Calendar size={35} />
</div>
</div>
</div>
<div className="flex flex-col gap-2">
<span className="font-thin">Indicado para:</span>
<span className="text-xl">Estudantes</span>
</div>
</li>
<li className="flex items-center gap-4">
<div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
<Calendar size={35} />
<div className="flex flex-col gap-2">
<span className="font-thin">Início:</span>
<span className="text-xl">Imediato</span>
</div>
</div>
<div className="flex flex-col gap-2">
<span className="font-thin">Início:</span>
<span className="text-xl">Imediato</span>
</div>
</li>
<li className="flex items-center gap-4">
<div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
<DollarSign size={35} />
</li>
<li className="flex items-center gap-4">
<div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
<DollarSign size={35} />
</div>
</div>
</div>
<div className="flex flex-col gap-2">
<span className="font-thin">Investimento:</span>
<span className="text-xl">R$200,00</span>
</div>
</li>
</ul>
<div className="flex flex-col gap-2">
<span className="font-thin">Investimento:</span>
<span className="text-xl">R$200,00</span>
</div>
</li>
</ul>
</div>
</div>
<div className="container hidden md:flex flex-col justify-center items-center gap-6 mt-8">
<h5 className="text-green-400 text-xl">Empresas Parceiras</h5>
<div className="flex flex-wrap justify-center gap-6">
<Image
src={imgFooter}
alt="Educação Adventista"
className="hidden md:flex"
/>
<Image
src={imgFooter}
alt="Educação Adventista"
className="hidden md:flex"
/>
<Image
src={imgFooter}
alt="Educação Adventista"
className="hidden md:flex"
/>
<Image
src={imgFooter}
alt="Educação Adventista"
className="hidden md:flex"
/>
<Image
src={imgFooter}
alt="Educação Adventista"
className="hidden md:flex"
/>
<Image
src={imgFooter}
alt="Educação Adventista"
className="hidden md:flex"
/>
</div>
</div>
</section>
)
......
src/components/sign-up.tsx 0 → 100644
View file @ 1bc81bb2
import Image from 'next/image'
import signUpImage from '../../public/images/sign-up.png'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
export function SignUp() {
return (
<section className="w-full bg-gradient-to-r from-green-700 to-green-50 pb-6 md:py-6 md:pb-0">
<div className="container overflow-hidden relative h-auto flex flex-col md:flex-row gap-2 justify-between items-center ">
<p className="max-w-[268px] my-6 md:max-w-[420px] text-xl md:text-2xl lg:text-3xl text-center order-3 md:order-1">
Inscreva-se e receba novidades sobre cursos ou areas de interesse
</p>
<Image
src={signUpImage}
height={450}
width={331}
alt="Imagem demonstrativa de uma pessoa se cadastrando na plataforma"
className="mt-auto md:min-h-[550px] object-cover order-1 md:order-2"
/>
<Separator className="h-2 w-screen order-2 md:hidden -mt-3 bg-yellow-100" />
<form
action=""
className="w-full md:w-[600px] flex flex-col gap-8 order-4"
>
<div>
<Label htmlFor="name" className="text-gray-300 text-xs">
Nome
</Label>
<Input type="text" id="name" placeholder="Digite aqui" />
</div>
<div>
<Label htmlFor="email" className="text-gray-300 text-xs">
E-mail
</Label>
<Input type="email" id="email" placeholder="Digite aqui" />
</div>
<div>
<Label htmlFor="whatsapp" className="text-gray-300 text-xs">
Whatsapp
</Label>
<Input type="number" id="whatsapp" placeholder="Digite aqui" />
</div>
<div>
<Label htmlFor="interest" className="text-gray-300 text-xs">
Área de interesse
</Label>
<Input type="text" id="interest" placeholder="Digite aqui" />
</div>
<div>
<Label htmlFor="course" className="text-gray-300 text-xs">
Curso desejado
</Label>
<Input type="text" id="course" placeholder="Digite aqui" />
</div>
<Button
variant="secondary"
className="uppercase max-w-32 mx-auto md:mb-6"
>
Inscrever
</Button>
</form>
</div>
</section>
)
}
src/components/ui/button.tsx
View file @ 1bc81bb2
......@@ -9,9 +9,9 @@ const buttonVariants = cva(
{
variants: {
variant: {
default: 'bg-green-700 text-primary hover:bg-green-700/90',
default: 'bg-green-700 text-primary hover:bg-green-800',
secondary:
'bg-purple-100 text-secondary-foreground hover:bg-purple-100/90',
'bg-purple-100 text-secondary-foreground hover:bg-purple-200',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
......
src/components/ui/input.tsx 0 → 100644
View file @ 1bc81bb2
import * as React from 'react'
import { cn } from '@/lib/utils'
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
'flex h-10 w-full border border-t-0 border-x-0 border-gray-300 px-2 py-2 text-md text-white ile:border-0 bg-transparent file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 focus-visible:outline-none focus-visible:border-b-white disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
ref={ref}
{...props}
/>
)
},
)
Input.displayName = 'Input'
export { Input }
src/components/ui/label.tsx 0 → 100644
View file @ 1bc81bb2
"use client"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }
src/components/ui/separator.tsx 0 → 100644
View file @ 1bc81bb2
"use client"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }
tailwind.config.ts
View file @ 1bc81bb2
......@@ -37,6 +37,7 @@ const config = {
gray: {
50: '#F9F9F9',
100: '#3C3C3C',
300: '#DADADA',
900: '#1C1C1C',
},
red: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment