Skip to content

S
sevenpro-frontend
Commit 2e987083 authored by Wellton Quirino's avatar Wellton Quirino
Browse files
Options

feat about and studanty pages

parent 17f4bc91
Show whitespace changes
Inline Side-by-side
Showing with 164 additions and 115 deletions
src/app/estudantes/page.tsx
View file @ 2e987083
import { Banner } from '@/components/banner' import { BannerCategory } from '@/components/banner-category'
import { NavLinkCategory } from '@/components/nav-link-category'
export default function Students() { export default function Students() {
return ( return (
<main> <main>
<Banner /> <BannerCategory />
<NavLinkCategory />
</main> </main>
) )
} }
src/app/sobre/page.tsx 0 → 100644
View file @ 2e987083
import { Hub } from '@/components/hub'
import { SignUp } from '@/components/sign-up'
export default function About() {
return (
<main>
<Hub />
<SignUp />
</main>
)
}
src/components/banner-category.tsx 0 → 100644
View file @ 2e987083
export function BannerCategory() {
return (
<div className=" h-[300px] flex items-center justify-end bg-green-900">
<div className="container">
<h1>ESTUDANTE</h1>
</div>
</div>
)
}
src/components/banner.tsx
View file @ 2e987083
...@@ -5,22 +5,25 @@ import banner from '../../public/images/banner.png' ...@@ -5,22 +5,25 @@ import banner from '../../public/images/banner.png'
export function Banner() { export function Banner() {
return ( return (
<div className="container h-[400px] flex items-center justify-end bg-gray-900"> <section>
<div className="container h-[400px] md:h-[700px] flex items-center justify-end bg-gray-900">
<div className="relative right-0"> <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-full 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" /> <div className="absolute h-full w-[200px] md:w-[500px] bg-gradient-to-r from-green-700 md:from-10% z-10" />
<h1 className="absolute z-20 font-thin text-lg md:text-4xl bottom-24 left-7 max-w-60 md:max-w-72 text-primary border-b-4 border-green-700 pb-4"> <h1 className="absolute z-20 font-thin text-lg md:text-4xl bottom-24 left-7 max-w-60 md:max-w-72 text-primary border-b-4 border-green-700 pb-4">
Transforme sua vida através do conhecimento Transforme sua vida através do conhecimento
</h1> </h1>
<Image <Image
src={banner} src={banner}
alt="Banner" alt="Banner"
className="h-[400px] object-cover" height={700}
className="h-full object-cover min-h-[400px] md:min-h-[700px]"
unoptimized unoptimized
/> />
<div className="absolute right-0 top-0 h-[400px] w-[200px] md:w-[500px] bg-gradient-to-l from-green-700 md:from-10% z-10" /> <div className="absolute right-0 top-0 h-full w-[200px] md:w-[500px] bg-gradient-to-l from-green-700 md:from-10% z-10" />
<div className="block absolute right-0 top-0 h-[400px] w-[200px] md:w-[600px] bg-gradient-to-l from-gray-900 md:from-20% z-20" /> <div className="block absolute right-0 top-0 h-full w-[200px] md:w-[600px] bg-gradient-to-l from-gray-900 md:from-20% z-20" />
</div> </div>
</div> </div>
</section>
) )
} }
src/components/course-details.tsx 0 → 100644
View file @ 2e987083
import { Calendar, Clock4, DollarSign, UserRound } from 'lucide-react'
export function CourseDetails() {
return (
<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>
</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 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} />
</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>
)
}
src/components/courses.tsx
View file @ 2e987083
...@@ -6,44 +6,14 @@ import { Input } from './ui/input' ...@@ -6,44 +6,14 @@ import { Input } from './ui/input'
import { Calendar, Clock4, Search, User } from 'lucide-react' import { Calendar, Clock4, Search, User } from 'lucide-react'
import ImageCoverCourse from '../../public/images/cover-course.png' import ImageCoverCourse from '../../public/images/cover-course.png'
import { NavLinkCategory } from './nav-link-category'
export function Courses() { export function Courses() {
return ( return (
<section className="py-10"> <section>
<div className="container flex flex-col"> <div className="container flex flex-col">
<ul className="flex flex-wrap justify-center items-center gap-8"> <NavLinkCategory />
<li> <div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
<Button asChild className="uppercase">
<Link href="#">Tecnologia</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Negócios</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Saúde</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Educação</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Comunicação</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Teologia</Link>
</Button>
</li>
</ul>
<div className="flex justify-center items-center w-full md:w-1/2 mx-auto my-8">
<Input placeholder="O que você quer aprender hoje?" /> <Input placeholder="O que você quer aprender hoje?" />
<Search /> <Search />
</div> </div>
......
src/components/footer.tsx
View file @ 2e987083
...@@ -39,7 +39,7 @@ export function Footer() { ...@@ -39,7 +39,7 @@ export function Footer() {
<nav className="py-8 hidden md:flex"> <nav className="py-8 hidden md:flex">
<ul className="flex flex-col gap-4"> <ul className="flex flex-col gap-4">
<li> <li>
<Button asChild variant="link" className="p-0"> <Button asChild variant="link" className="uppercase p-0">
<Link href="#"> <Link href="#">
Cursos rápidos{' '} Cursos rápidos{' '}
<ChevronRight className="text-yellow-100 ml-3" /> <ChevronRight className="text-yellow-100 ml-3" />
...@@ -47,7 +47,7 @@ export function Footer() { ...@@ -47,7 +47,7 @@ export function Footer() {
</Button> </Button>
</li> </li>
<li> <li>
<Button asChild variant="link" className="p-0"> <Button asChild variant="link" className="uppercase p-0">
<Link href="#"> <Link href="#">
Cursos de aprofundamento Cursos de aprofundamento
<ChevronRight className="text-yellow-100 ml-3" /> <ChevronRight className="text-yellow-100 ml-3" />
...@@ -55,13 +55,21 @@ export function Footer() { ...@@ -55,13 +55,21 @@ export function Footer() {
</Button> </Button>
</li> </li>
<li> <li>
<Button asChild variant="link" className="p-0"> <Button asChild variant="link" className="uppercase p-0">
<Link href="#" className="flex items-center"> <Link href="#" className="flex items-center">
Cursos corporativos Cursos corporativos
<ChevronRight className="text-yellow-100 ml-3" /> <ChevronRight className="text-yellow-100 ml-3" />
</Link> </Link>
</Button> </Button>
</li> </li>
<li>
<Button asChild variant="link" className="uppercase p-0">
<Link href="#" className="flex items-center">
Área Administrativa
<ChevronRight className="text-yellow-100 ml-3" />
</Link>
</Button>
</li>
</ul> </ul>
</nav> </nav>
<Image <Image
......
src/components/header.tsx
View file @ 2e987083
import Link from 'next/link'
import LogoComponent from './logo' import LogoComponent from './logo'
import { NavLink } from './nav-link' import { NavLink } from './nav-link'
...@@ -5,8 +6,9 @@ export function Header() { ...@@ -5,8 +6,9 @@ export function Header() {
return ( return (
<header className="w-full md:px-6 py-5"> <header className="w-full md:px-6 py-5">
<div className="container mx-auto flex justify-between gap-4"> <div className="container mx-auto flex justify-between gap-4">
<Link href="/">
<LogoComponent width={115} height={32} className="fill-primary" /> <LogoComponent width={115} height={32} className="fill-primary" />
</Link>
<NavLink /> <NavLink />
</div> </div>
</header> </header>
......
src/components/hub.tsx
View file @ 2e987083
import Image from 'next/image' import Image from 'next/image'
import globo from '../../public/images/globo.svg' import globo from '../../public/images/globo.svg'
import { Button } from './ui/button' import { Button } from './ui/button'
import { Calendar, Clock4, DollarSign, UserRound } from 'lucide-react'
import imgFooter from '../../public/images/img-footer.svg' import imgFooter from '../../public/images/img-footer.svg'
export function Hub() { export function Hub() {
return ( return (
<section className="flex flex-col py-20"> <section className="flex flex-col py-20">
<div className="container flex justify-center md:justify-around"> <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"> <div className="flex flex-col items-center justify-center max-w-[1152px] gap-10">
<Image src={globo} alt="Imagem demonstrativa de um globo" /> <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"> <p className="text-center text-2xl font-thin text-green-400 w-full">
Somos um <b className="text-3xl font-bold">hub</b> de inovação, Somos um <b className="text-3xl font-bold">hub</b> de inovação,
tecnologia e negócios tecnologia e negócios
</p> </p>
<p className="hidden md:block text-center max-w-96"> <p className="hidden md:block text-center">
Nós, na <b>Indústria Criativa</b>, oferecemos serviços educacionais Nós, na <b>Indústria Criativa</b>, oferecemos serviços educacionais
e assessoria profissional a instituições públicas e privadas. Nossa e assessoria profissional a instituições públicas e privadas. Nossa
meta é conectar pessoas, empresas e instituições por meio do meta é conectar pessoas, empresas e instituições por meio do
conhecimento técnico-científico aplicado aos negócios. conhecimento técnico-científico aplicado aos negócios.
</p> </p>
<Button variant="third" className="uppercase "> <Button className="uppercase ">Saiba mais</Button>
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>
</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 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} />
</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> </div>
</div> </div>
<div className="container hidden md:flex flex-col justify-center items-center gap-6 mt-8"> <div className="container hidden md:flex flex-col justify-center items-center gap-6 mt-10">
<h5 className="text-green-400 text-xl">Empresas Parceiras</h5> <h5 className="text-green-400 text-xl">Empresas Parceiras</h5>
<div className="flex flex-wrap justify-center gap-6"> <div className="flex flex-wrap justify-center gap-6">
<Image <Image
......
src/components/nav-link-category.tsx 0 → 100644
View file @ 2e987083
import Link from 'next/link'
import { Button } from './ui/button'
export function NavLinkCategory() {
return (
<div className="container my-10">
<ul className="flex flex-wrap justify-center items-center gap-8">
<li>
<Button asChild className="uppercase">
<Link href="#">Tecnologia</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Negócios</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Saúde</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Educação</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Comunicação</Link>
</Button>
</li>
<li>
<Button asChild className="uppercase">
<Link href="#">Teologia</Link>
</Button>
</li>
</ul>
</div>
)
}
src/components/nav-link.tsx
View file @ 2e987083
...@@ -10,7 +10,7 @@ export function NavLink() { ...@@ -10,7 +10,7 @@ export function NavLink() {
<div className="hidden lg:block"> <div className="hidden lg:block">
<nav className="flex items-start px-2 text-sm font-medium"> <nav className="flex items-start px-2 text-sm font-medium">
<Button asChild variant="ghost"> <Button asChild variant="ghost">
<Link href="#">Para estudantes</Link> <Link href="/estudantes">Para estudantes</Link>
</Button> </Button>
<Button asChild variant="ghost"> <Button asChild variant="ghost">
<Link href="#">Para profissionais</Link> <Link href="#">Para profissionais</Link>
...@@ -19,7 +19,7 @@ export function NavLink() { ...@@ -19,7 +19,7 @@ export function NavLink() {
<Link href="#">Para empresas</Link> <Link href="#">Para empresas</Link>
</Button> </Button>
<Button asChild variant="ghost"> <Button asChild variant="ghost">
<Link href="#">Conheça a SevenPro</Link> <Link href="/sobre">Conheça a SevenPro</Link>
</Button> </Button>
<Button asChild variant="ghost"> <Button asChild variant="ghost">
<Link href="#">Contato</Link> <Link href="#">Contato</Link>
......
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