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
Hide 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() {
return (
<main>
<Banner />
<BannerCategory />
<NavLinkCategory />
</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'
export function Banner() {
return (
<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" />
<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
</h1>
<Image
src={banner}
alt="Banner"
className="h-[400px] object-cover"
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="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" />
<section>
<div className="container h-[400px] md:h-[700px] flex items-center justify-end bg-gray-900">
<div className="relative right-0">
<div className="absolute h-full w-[400px] bg-gradient-to-r from-gray-900 md:from-30% z-20" />
<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">
Transforme sua vida através do conhecimento
</h1>
<Image
src={banner}
alt="Banner"
height={700}
className="h-full object-cover min-h-[400px] md:min-h-[700px]"
unoptimized
/>
<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-full w-[200px] md:w-[600px] bg-gradient-to-l from-gray-900 md:from-20% z-20" />
</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'
import { Calendar, Clock4, Search, User } from 'lucide-react'
import ImageCoverCourse from '../../public/images/cover-course.png'
import { NavLinkCategory } from './nav-link-category'
export function Courses() {
return (
<section className="py-10">
<section>
<div className="container flex flex-col">
<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 className="flex justify-center items-center w-full md:w-1/2 mx-auto my-8">
<NavLinkCategory />
<div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
<Input placeholder="O que você quer aprender hoje?" />
<Search />
</div>
......
src/components/footer.tsx
View file @ 2e987083
......@@ -39,7 +39,7 @@ export function Footer() {
<nav className="py-8 hidden md:flex">
<ul className="flex flex-col gap-4">
<li>
<Button asChild variant="link" className="p-0">
<Button asChild variant="link" className="uppercase p-0">
<Link href="#">
Cursos rápidos{' '}
<ChevronRight className="text-yellow-100 ml-3" />
......@@ -47,7 +47,7 @@ export function Footer() {
</Button>
</li>
<li>
<Button asChild variant="link" className="p-0">
<Button asChild variant="link" className="uppercase p-0">
<Link href="#">
Cursos de aprofundamento
<ChevronRight className="text-yellow-100 ml-3" />
......@@ -55,13 +55,21 @@ export function Footer() {
</Button>
</li>
<li>
<Button asChild variant="link" className="p-0">
<Button asChild variant="link" className="uppercase p-0">
<Link href="#" className="flex items-center">
Cursos corporativos
<ChevronRight className="text-yellow-100 ml-3" />
</Link>
</Button>
</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>
</nav>
<Image
......
src/components/header.tsx
View file @ 2e987083
import Link from 'next/link'
import LogoComponent from './logo'
import { NavLink } from './nav-link'
......@@ -5,8 +6,9 @@ export function Header() {
return (
<header className="w-full md:px-6 py-5">
<div className="container mx-auto flex justify-between gap-4">
<LogoComponent width={115} height={32} className="fill-primary" />
<Link href="/">
<LogoComponent width={115} height={32} className="fill-primary" />
</Link>
<NavLink />
</div>
</header>
......
src/components/hub.tsx
View file @ 2e987083
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 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">
<div className="flex flex-col items-center justify-center max-w-[1152px] 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">
<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,
tecnologia e negócios
</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
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="third" className="uppercase ">
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>
<Button className="uppercase ">Saiba mais</Button>
</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>
<div className="flex flex-wrap justify-center gap-6">
<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() {
<div className="hidden lg:block">
<nav className="flex items-start px-2 text-sm font-medium">
<Button asChild variant="ghost">
<Link href="#">Para estudantes</Link>
<Link href="/estudantes">Para estudantes</Link>
</Button>
<Button asChild variant="ghost">
<Link href="#">Para profissionais</Link>
......@@ -19,7 +19,7 @@ export function NavLink() {
<Link href="#">Para empresas</Link>
</Button>
<Button asChild variant="ghost">
<Link href="#">Conheça a SevenPro</Link>
<Link href="/sobre">Conheça a SevenPro</Link>
</Button>
<Button asChild variant="ghost">
<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