Commit 9b4f5ba1 authored by Wellton Quirino's avatar Wellton Quirino

feat: create card components, create pages contact, about, professional, companies...

parent d5052390
import { About } from '@/components/about'
import { Banner } from '@/components/banner'
import { CourseCategory } from '@/components/course-category'
import { Courses } from '@/components/courses'
import { Differences } from '@/components/differences'
import { SignUp } from '@/components/sign-up'
import { Hub } from '../../components/hub'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
// import { ThemeSwitcher } from '@/components/theme-switcher'
export default function Home() {
......@@ -17,7 +20,20 @@ export default function Home() {
<CourseCategory />
<Differences />
<SignUp />
<Hub hasHomePage />
<About.Root>
<About.Globo>
<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 className="uppercase">
<Link href="/sobre">Saiba mais</Link>
</Button>
</About.Globo>
<About.Companies className="hidden md:flex" />
</About.Root>
</main>
</>
)
......
import { Button } from '@/components/ui/button'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Clock4, Mail, Smartphone } from 'lucide-react'
export default function Contact() {
return (
<main className="container flex flex-col justify-center items-center py-20">
<h1 className="text-center font-normal md:font-extrabold text-green-800 text-2xl md:text-4xl">
Fale com a SevenPro
</h1>
<div className="flex flex-col md:flex-row justify-between w-full mt-10 gap-10 md:gap-4">
<div className="w-full md:w-1/2">
<h2 className="text-green-800 text-xl md:text-2xl">
Atendimento aos alunos e parceiros
</h2>
<ul className="flex flex-col gap-4 mt-6">
<li className="flex items-center gap-4">
<Clock4 className="text-green-800" />
<span>De XXh à XXh</span>
</li>
<li className="flex items-center gap-4">
<Smartphone className="text-green-800" />
<span>Telefones: (XX) XXXX-XXXX</span>
</li>
<li className="flex items-center gap-4">
<Mail className="text-green-800" />
<span>E-mail: sevenpro@sevenpro.com.br</span>
</li>
</ul>
</div>
<div className="w-full md:w-1/2">
<h2 className="text-green-800 text-xl md:text-2xl">
Envie uma mensagem
</h2>
<form action="" className="mt-6 flex flex-col gap-6">
<label htmlFor="name" className="relative w-full">
<input
id="name"
type="text"
className="px-4 py-2 text-lg outline-none w-full border border-gray-50 rounded-sm hover:border-1 duration-200 peer focus:border-green-800 bg-inherit"
/>
<span className="absolute left-0 top-2 px-1 text-lg bg-gray-900 tracking-wide peer-focus:text-green-800 pointer-events-none duration-200 peer-focus:text-sm peer-focus:-translate-y-5 ml-2 peer-valid:text-sm peer-valid:-translate-y-5">
Nome completo
</span>
</label>
<label htmlFor="mensage" className="relative w-full">
<textarea
id="mensage"
className="px-4 py-2 text-lg h-36 outline-none w-full border border-gray-50 rounded-sm hover:border-1 duration-200 peer focus:border-green-800 bg-inherit"
/>
<span className="absolute left-0 top-2 px-1 text-lg bg-gray-900 tracking-wide peer-focus:text-green-800 pointer-events-none duration-200 peer-focus:text-sm peer-focus:-translate-y-5 ml-2 peer-valid:text-sm peer-valid:-translate-y-5">
Mensagem
</span>
</label>
<Select>
<SelectTrigger className="border-x border-y rounded-sm focus-visible:border-green-800">
<SelectValue placeholder="Assunto" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="recent">Mais recentes</SelectItem>
<SelectItem value="fast">Cursos rápidos</SelectItem>
<SelectItem value="students">Estudantes</SelectItem>
<SelectItem value="immediate">Início imediato</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<div className="flex">
<Button type="submit" className="w-auto">
Enviar
</Button>
</div>
</form>
</div>
</div>
</main>
)
}
import { About } from '@/components/about'
import { BannerCategory } from '@/components/banner-category'
import { Card } from '@/components/card'
import { Differences } from '@/components/differences'
import { NavLinkCategory } from '@/components/nav-link-category'
import { PaginationComponent } from '@/components/pagination-component'
import SearchFilter from '@/components/search-filter'
import { SignUp } from '@/components/sign-up'
import { Calendar, Clock4, User } from 'lucide-react'
import banner from '../../../public/images/banner.png'
import ImageCoverCourse from '../../../public/images/cover-course.png'
type CoursesCardTypes = {
id: string
image: { src: string; width: number; height: number }
title: string
hours: string
category: string
calender: string
}
const coursesCard: CoursesCardTypes[] = [
{
id: '1',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '2',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '3',
image: banner,
title: 'Gestão em Projetos',
hours: '30 h / Curso rápido',
category: 'Estudante',
calender: 'Início imediato',
},
{
id: '4',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '5',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '6',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '7',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '8',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '9',
image: banner,
title: 'Gestão em Projetos',
hours: '30 h / Curso rápido',
category: 'Estudante',
calender: 'Início imediato',
},
{
id: '10',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
]
export default function Companies() {
return (
<main>
<BannerCategory title="Empresas" />
<NavLinkCategory />
<SearchFilter />
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid-rows-3 lg:grid-rows-2 gap-4 md:gap-6 p-6">
{coursesCard.map((course) => (
<div className="flex justify-center" key={course.id}>
<Card.Root link={`${course.category}/${course.id}`}>
<Card.Image image={course.image.src} width="273" height="365">
<Card.Title title={course.title} />
</Card.Image>
<Card.Content description={course.hours}>
<Card.Icon icon={Clock4} />
</Card.Content>
<Card.Content description={course.category}>
<Card.Icon icon={User} />
</Card.Content>
<Card.Content description={course.calender}>
<Card.Icon icon={Calendar} />
</Card.Content>
</Card.Root>
</div>
))}
</div>
<div className="my-6">
<PaginationComponent pageIndex={0} totalCount={105} perPage={10} />
</div>
<Differences />
<SignUp />
<About.Root>
<About.Globo>
<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>
</About.Globo>
<About.Companies />
</About.Root>
</main>
)
}
import { About } from '@/components/about'
import { BannerCategory } from '@/components/banner-category'
import { Card } from '@/components/card'
import { Differences } from '@/components/differences'
import { Hub } from '@/components/hub'
import { NavLinkCategory } from '@/components/nav-link-category'
import { PaginationComponent } from '@/components/pagination-component'
import SearchFilter from '@/components/search-filter'
......@@ -133,7 +133,17 @@ export default function Students() {
</div>
<Differences />
<SignUp />
<Hub />
<About.Root>
<About.Globo>
<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>
</About.Globo>
<About.Companies />
</About.Root>
</main>
)
}
import { About } from '@/components/about'
import { BannerCategory } from '@/components/banner-category'
import { Card } from '@/components/card'
import { Differences } from '@/components/differences'
import { NavLinkCategory } from '@/components/nav-link-category'
import { PaginationComponent } from '@/components/pagination-component'
import SearchFilter from '@/components/search-filter'
import { SignUp } from '@/components/sign-up'
import { Calendar, Clock4, User } from 'lucide-react'
import banner from '../../../public/images/banner.png'
import ImageCoverCourse from '../../../public/images/cover-course.png'
type CoursesCardTypes = {
id: string
image: { src: string; width: number; height: number }
title: string
hours: string
category: string
calender: string
}
const coursesCard: CoursesCardTypes[] = [
{
id: '1',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '2',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '3',
image: banner,
title: 'Gestão em Projetos',
hours: '30 h / Curso rápido',
category: 'Estudante',
calender: 'Início imediato',
},
{
id: '4',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '5',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '6',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '7',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '8',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
{
id: '9',
image: banner,
title: 'Gestão em Projetos',
hours: '30 h / Curso rápido',
category: 'Estudante',
calender: 'Início imediato',
},
{
id: '10',
image: ImageCoverCourse,
title: 'Gestão em Saúde',
hours: '30 h / Curso rápido',
category: 'estudante',
calender: 'Início imediato',
},
]
export default function Professionals() {
return (
<main>
<BannerCategory title="Profissionais" />
<NavLinkCategory />
<SearchFilter />
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid-rows-3 lg:grid-rows-2 gap-4 md:gap-6 p-6">
{coursesCard.map((course) => (
<div className="flex justify-center" key={course.id}>
<Card.Root link={`${course.category}/${course.id}`}>
<Card.Image image={course.image.src} width="273" height="365">
<Card.Title title={course.title} />
</Card.Image>
<Card.Content description={course.hours}>
<Card.Icon icon={Clock4} />
</Card.Content>
<Card.Content description={course.category}>
<Card.Icon icon={User} />
</Card.Content>
<Card.Content description={course.calender}>
<Card.Icon icon={Calendar} />
</Card.Content>
</Card.Root>
</div>
))}
</div>
<div className="my-6">
<PaginationComponent pageIndex={0} totalCount={105} perPage={10} />
</div>
<Differences />
<SignUp />
<About.Root>
<About.Globo>
<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>
</About.Globo>
<About.Companies />
</About.Root>
</main>
)
}
import { Hub } from '@/components/hub'
import { About } from '@/components/about'
import { SignUp } from '@/components/sign-up'
export default function About() {
export default function AboutPage() {
return (
<main>
<Hub />
<About.Root>
<About.Globo>
<p>
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>
<p>
Lorem ipsum dolor sit amet consectetur. Dignissim at ac lacus at eu
iaculis. Iaculis id ut interdum elit ac imperdiet feugiat proin
ornare. Lorem ipsum dolor sit amet consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur. Dignissim at ac lacus at eu
iaculis. Iaculis id ut interdum elit ac imperdiet feugiat proin
ornare. Lorem ipsum dolor sit amet consectetur.
</p>
</About.Globo>
<About.Companies className="hidden" />
</About.Root>
<SignUp />
</main>
)
......
import Image from 'next/image'
import Link from 'next/link'
import globo from '../../public/images/globo.svg'
import imgFooter from '../../public/images/img-footer.svg'
import { Button } from './ui/button'
import { Button } from '../ui/button'
export function Hub({ hasHomePage = false }) {
export function AboutComponent() {
return (
<section className="flex flex-col py-20">
<div className="container flex justify-center md:justify-around">
......@@ -14,22 +15,22 @@ export function Hub({ hasHomePage = false }) {
Somos um <b className="text-3xl font-bold">hub</b> de inovação,
tecnologia e negócios
</p>
<p
className={`${hasHomePage ? 'hidden' : 'block'} md:block text-center`}
>
<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 className="uppercase ">Saiba mais</Button>
<Button className="uppercase">
<Link href="/sobre">Saiba mais</Link>
</Button>
</div>
</div>
<div
className={`${hasHomePage ? 'hidden' : 'flex'} container flex-col md:flex justify-center items-center gap-6 mt-10`}
>
<h5 className="text-green-400 text-xl">Empresas Parceiras</h5>
<div className="container flex-col md:flex justify-center items-center gap-6 mt-10">
<h5 className="text-green-400 text-xl flex justify-center my-4">
Empresas Parceiras
</h5>
<div className="flex flex-wrap justify-center gap-6">
<Image src={imgFooter} alt="Educação Adventista" />
<Image src={imgFooter} alt="Educação Adventista" />
......
import Image from 'next/image'
import { ReactNode } from 'react'
import globo from '../../../public/images/globo.svg'
type AboutGloboProps = {
children: ReactNode
}
export function AboutGlobo({ children }: AboutGloboProps) {
return (
<div className="container flex justify-center md:justify-around">
<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">
Somos um <b className="text-3xl font-bold">hub</b> de inovação,
tecnologia e negócios
</p>
{children}
</div>
</div>
)
}
import { cn } from '@/lib/utils'
import { cva } from 'class-variance-authority'
import Image from 'next/image'
import imgFooter from '../../../public/images/img-footer.svg'
type AboutPatnerCompaniesProps = {
className?: React.HTMLProps<HTMLElement>['className']
}
const containerVariants = cva(
'container flex-col justify-center items-center gap-6 mt-10',
)
export function AboutPatnerCompanies({ className }: AboutPatnerCompaniesProps) {
return (
<div className={cn(containerVariants(), className)}>
<h5 className="text-green-400 text-xl flex justify-center my-4">
Empresas Parceiras
</h5>
<div className="flex flex-wrap justify-center gap-6">
<Image src={imgFooter} alt="Educação Adventista" />
<Image src={imgFooter} alt="Educação Adventista" />
<Image src={imgFooter} alt="Educação Adventista" />
<Image src={imgFooter} alt="Educação Adventista" />
<Image src={imgFooter} alt="Educação Adventista" />
<Image src={imgFooter} alt="Educação Adventista" />
</div>
</div>
)
}
import { ReactNode } from 'react'
type AboutRootProps = {
children: ReactNode
}
export function AboutRoot({ children }: AboutRootProps) {
return <section className="flex flex-col py-20">{children}</section>
}
import { AboutGlobo } from './about-globo'
import { AboutPatnerCompanies } from './about-partner-companies'
import { AboutRoot } from './about-root'
export const About = {
Root: AboutRoot,
Globo: AboutGlobo,
Companies: AboutPatnerCompanies,
}
......@@ -5,10 +5,7 @@ type CardContentProps = {
children: ReactNode
}
export default function CardContent({
description,
children,
}: CardContentProps) {
export function CardContent({ description, children }: CardContentProps) {
return (
<div className="flex items-center gap-2 p-2">
{children}
......
......@@ -8,20 +8,15 @@ type CardImageProps = {
height: string
}
export default function CardImage({
children,
image,
width,
height,
}: CardImageProps) {
export function CardImage({ children, image, width, height }: CardImageProps) {
return (
<div className={`relative w-[${width}px]`}>
<div className={`relative w-[${width}px] `}>
<Image
src={image}
width={Number(width)}
height={Number(height)}
alt="Capa do curso"
className={`object-cover rounded-lg w-full h-[${height}px]`}
className={`object-cover rounded-lg h-[320px]`}
/>
<div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end rounded-b-lg">
{children}
......
import CardContent from './card-content'
import { CardContent } from './card-content'
import { CardIcon } from './card-icon'
import CardImage from './card-image'
import { CardImage } from './card-image'
import { CardRoot } from './card-root'
import { CardTitle } from './card-title'
......
import { Calendar, Clock4, User } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
type CardDetailsTypes = {
details: {
id: string
image: { src: string; width: number; height: number }
title: string
hours: string
category: string
calender: string
}
imageWidth: number
imageHeight: number
}
export function Card({ details, imageWidth, imageHeight }: CardDetailsTypes) {
return (
<div
className={`bg-green-50 md:w-[${imageWidth.toString()}px] pl-0 rounded-lg`}
>
<Link className="lowercase " href={`${details.category}/${details.id}`}>
<div className="relative">
<Image
src={details.image.src}
width={imageWidth}
height={imageHeight}
alt="Capa do curso"
className={`object-cover rounded-lg w-full h-[274px] md:h-[${imageHeight.toString()}px] `}
/>
<div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end rounded-b-lg">
<span className="text-center text-lg lg:text-2xl px-1 pb-8">
{details.title}
</span>
</div>
</div>
<div className="flex items-center gap-2 p-2">
<Clock4 size={16} />
<span className="text-xs lg:text-sm">{details.hours}</span>
</div>
<div className="flex items-center gap-2 p-2">
<User size={16} />
<span className="text-xs lg:text-sm capitalize">
{details.category}
</span>
</div>
<div className="flex items-center gap-2 p-2">
<Calendar size={16} />
<span className="text-xs lg:text-sm capitalize">
{details.calender}
</span>
</div>
</Link>
</div>
)
}
......@@ -13,16 +13,16 @@ export function NavLink() {
<Link href="/estudantes">Para estudantes</Link>
</Button>
<Button asChild variant="ghost">
<Link href="#">Para profissionais</Link>
<Link href="/profissionais">Para profissionais</Link>
</Button>
<Button asChild variant="ghost">
<Link href="#">Para empresas</Link>
<Link href="/empresas">Para empresas</Link>
</Button>
<Button asChild variant="ghost">
<Link href="/sobre">Conheça a SevenPro</Link>
</Button>
<Button asChild variant="ghost">
<Link href="#">Contato</Link>
<Link href="/contato">Contato</Link>
</Button>
</nav>
</div>
......@@ -43,25 +43,24 @@ export function NavLink() {
className="shrink-0 lg:hidden"
>
<Menu className="h-5 w-5" />
<span className="sr-only">Toggle navigation menu</span>
</Button>
</SheetTrigger>
<SheetContent side="right" className="flex flex-col bg-green-700">
<nav className="flex flex-col items-end gap-2 mt-4 text-lg font-light uppercase">
<Button asChild variant="ghost" className="hover:bg-gray-50/10">
<Link href="#">Para estudantes</Link>
<Link href="/estudantes">Para estudantes</Link>
</Button>
<Button asChild variant="ghost" className="hover:bg-gray-50/10">
<Link href="#">Para profissionais</Link>
<Link href="/profissionais">Para profissionais</Link>
</Button>
<Button asChild variant="ghost" className="hover:bg-gray-50/10">
<Link href="#">Para empresas</Link>
<Link href="/empresas">Para empresas</Link>
</Button>
<Button asChild variant="ghost" className="hover:bg-gray-50/10">
<Link href="#">Conheça a SevenPro</Link>
<Link href="/sobre">Conheça a SevenPro</Link>
</Button>
<Button asChild variant="ghost" className="hover:bg-gray-50/10">
<Link href="#">Contato</Link>
<Link href="/contato">Contato</Link>
</Button>
</nav>
</SheetContent>
......
"use client"
'use client'
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import * as LabelPrimitive from '@radix-ui/react-label'
import { cva, type VariantProps } from 'class-variance-authority'
import * as React from 'react'
import { cn } from "@/lib/utils"
import { cn } from '@/lib/utils'
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
)
const Label = React.forwardRef<
......
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