Skip to content

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

feat: home screen adjustments

parent 4c5d46bc
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 111 deletions
package-lock.json
View file @ a9158151
......@@ -33,6 +33,7 @@
"react-day-picker": "^8.10.1",
"react-dom": "^18",
"react-hook-form": "^7.52.2",
"react-input-mask": "^2.0.4",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.23.8"
......@@ -42,6 +43,7 @@
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react-input-mask": "^3.0.5",
"eslint": "^8.57.0",
"eslint-config-next": "14.2.3",
"postcss": "^8",
......@@ -3048,6 +3050,15 @@
"@types/react": "*"
}
},
"node_modules/@types/react-input-mask": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.5.tgz",
"integrity": "sha512-vQ1x6ykwjDrDrJZq1zw5/uQ+nqGHUV6bWscsVZJ/qsNwNXWxZm7KRBHLJ5k6TQt3MHjhpoYHzPH6FwjVSZODHA==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-transition-group": {
"version": "4.4.10",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
......@@ -6878,6 +6889,19 @@
"react": "^16.8.0 || ^17 || ^18 || ^19"
}
},
"node_modules/react-input-mask": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
"integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
"dependencies": {
"invariant": "^2.2.4",
"warning": "^4.0.2"
},
"peerDependencies": {
"react": ">=0.14.0",
"react-dom": ">=0.14.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
......@@ -7892,6 +7916,14 @@
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
},
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
......
src/app/(home)/page.tsx
View file @ a9158151
......@@ -3,10 +3,11 @@ import { Banner } from '@/components/banner'
import { CarouselComponent } from '@/components/corousel-component'
import { CourseCategory } from '@/components/course-category'
import { Differences } from '@/components/differences'
import { StyledInputs } from '@/components/mui/styled-inputs'
import { NavLinkCategory } from '@/components/nav-link-category'
import { SignUp } from '@/components/sign-up'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { TextField } from '@mui/material'
import { Search } from 'lucide-react'
import Link from 'next/link'
......@@ -19,7 +20,13 @@ export default function Home() {
<div className="container flex flex-col">
<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?" />
<TextField
label="O que você quer aprender hojeaa?"
variant="standard"
type="text"
className="w-full"
sx={StyledInputs({ color: '#fafafa' })}
/>
<Search size={24} />
</div>
<CarouselComponent />
......
src/components/banner.tsx
View file @ a9158151
......@@ -14,17 +14,20 @@ import {
} from './ui/carousel'
export function Banner() {
const plugin = React.useRef(
const pluginDesktop = React.useRef(
Autoplay({ delay: 5000, stopOnInteraction: true }),
)
const pluginMobile = React.useRef(
Autoplay({ delay: 5000, stopOnInteraction: true }),
)
return (
<section>
<Carousel
plugins={[plugin.current]}
className="w-full"
// onMouseEnter={plugin.current.stop}
onMouseLeave={plugin.current.reset}
plugins={[pluginDesktop.current]}
className="w-full hidden xs:flex"
// onMouseEnter={pluginDesktop.current.stop}
onMouseLeave={pluginDesktop.current.reset}
>
<CarouselContent>
{BannersHome.map((item) => (
......@@ -34,7 +37,30 @@ export function Banner() {
alt="Banner"
width={item.desktop.width}
height={item.desktop.height}
// className="h-full object-cover min-h-[400px] md:min-h-[700px]"
className="min-h-[400px] w-screen object-cover object-left"
unoptimized
/>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
<Carousel
plugins={[pluginMobile.current]}
className="w-full flex xs:hidden"
// onMouseEnter={pluginMobile.current.stop}
onMouseLeave={pluginMobile.current.reset}
>
<CarouselContent>
{BannersHome.map((item) => (
<CarouselItem key={item.id}>
<Image
src={item.mobile.src}
alt="Banner"
width={item.mobile.width}
height={item.mobile.height}
unoptimized
/>
</CarouselItem>
......
src/components/card/card-root.tsx
View file @ a9158151
......@@ -8,8 +8,11 @@ type CardRootProps = {
export function CardRoot({ children, link }: CardRootProps) {
return (
<Link className="lowercase" href={link}>
<div className={`bg-green-50 pl-0 rounded-lg max-w-[273px]`}>
<Link
className="lowercase transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow"
href={link}
>
<div className={`border border-gray-100 pl-0 rounded-lg max-w-[273px] `}>
{children}
</div>
</Link>
......
src/components/card/card-title.tsx
View file @ a9158151
......@@ -4,6 +4,8 @@ type CardTitleProps = {
export function CardTitle({ title }: CardTitleProps) {
return (
<span className="text-center text-lg lg:text-2xl px-1 pb-8">{title}</span>
<span className="text-center text-lg text-gray-50 lg:text-2xl px-1 pb-8">
{title}
</span>
)
}
src/components/corousel-component.tsx
View file @ a9158151
......@@ -20,7 +20,7 @@ export function CarouselComponent() {
key={course.id}
className="sm:basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5 flex justify-center"
>
<Card.Root link={`${course.id}`}>
<Card.Root link={`curso/${course.id}`}>
<Card.Image image={course.image.src} width="240" height="320">
<Card.Title title={course.title} />
</Card.Image>
......
src/components/course-category.tsx
View file @ a9158151
import Image from 'next/image'
import ImageFast from '../../public/images/fast.png'
import ImageDeepen from '../../public/images/deepen.png'
import ImageCorporate from '../../public/images/corporate.png'
import Link from 'next/link'
import ImageCorporate from '../../public/images/corporate.png'
import ImageDeepen from '../../public/images/deepen.png'
import ImageFast from '../../public/images/fast.png'
export function CourseCategory() {
return (
<section className="hidden md:block">
<div className="h-auto flex justify-center items-center my-20 px-6">
<ul className="flex justify-center items-center gap-4">
<li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
<Link href="#" className="flex flex-col gap-4">
<ul className="flex justify-center items-center gap-4 text-gray-50">
<li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50 rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
<Link href="#" className="flex flex-col gap-4 p-2">
<Image
src={ImageFast}
alt="Rápido"
className="rounded-t-lg object-cover"
className="rounded-lg object-cover"
/>
<h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
Rápido
......@@ -25,12 +25,12 @@ export function CourseCategory() {
</p>
</Link>
</li>
<li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
<Link href="#" className="flex flex-col gap-4">
<li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50 rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
<Link href="#" className="flex flex-col gap-4 p-2">
<Image
src={ImageDeepen}
alt="Aprofundamento"
className="rounded-t-lg object-cover"
className="rounded-lg object-cover"
/>
<h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
Aprofundamento
......@@ -40,12 +40,12 @@ export function CourseCategory() {
</p>
</Link>
</li>
<li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
<Link href="#" className="flex flex-col gap-4">
<li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50 rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
<Link href="#" className="flex flex-col gap-4 p-2">
<Image
src={ImageCorporate}
alt="Corporativos"
className="rounded-t-lg object-cover"
className="rounded-lg object-cover"
/>
<h4 className="text-center uppercase font-extrabold text-2xl lg:text-3xl">
Corporativos
......
src/components/course-details.tsx
View file @ a9158151
......@@ -5,7 +5,7 @@ export function CourseDetails() {
<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">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] dark:bg-gray-900 bg-gray-50">
<Clock4 size={35} />
</div>
</div>
......@@ -16,7 +16,7 @@ export function CourseDetails() {
</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">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] dark:bg-gray-900 bg-gray-50">
<UserRound size={35} />
</div>
</div>
......@@ -27,7 +27,7 @@ export function CourseDetails() {
</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">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] dark:bg-gray-900 bg-gray-50">
<Calendar size={35} />
</div>
</div>
......@@ -38,7 +38,7 @@ export function CourseDetails() {
</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">
<div className="rounded-full flex items-center justify-center w-[57px] h-[57px] dark:bg-gray-900 bg-gray-50">
<DollarSign size={35} />
</div>
</div>
......
src/components/differences.tsx
View file @ a9158151
......@@ -7,26 +7,26 @@ import tableClock from '../../public/images/table-clock.svg'
export function Differences() {
return (
<section className="flex">
<div className="container py-20 flex flex-col gap-20">
<div className="container pt-10 pb-20 flex flex-col gap-16">
<h2 className="hidden md:flex justify-center text-3xl">
Conheça os nossos diferenciais:
</h2>
<ul className="flex flex-col md:flex-row h-full justify-around items-center gap-8 md:gap-4">
<li className="flex flex-col items-center gap-4">
<Image width={72} src={schoolOnline} alt="100% online" />
<span className="text-gray-50 md:font-extrabold text-xl md:text-3xl">
<span className="text-foreground md:font-extrabold text-xl md:text-3xl">
100% online
</span>
</li>
<li className="flex flex-col items-center gap-4">
<Image width={72} src={tableClock} alt="Prazos flexíveis" />
<span className="text-gray-50 md:font-extrabold text-xl md:text-3xl">
<span className="text-foreground md:font-extrabold text-xl md:text-3xl">
Prazos flexíveis
</span>
</li>
<li className="flex flex-col items-center gap-4">
<Image width={72} src={certificateOutline} alt="Certificados" />
<span className="text-gray-50 md:font-extrabold text-xl md:text-3xl">
<span className="text-foreground md:font-extrabold text-xl md:text-3xl">
Certificados
</span>
</li>
......
src/components/footer.tsx
View file @ a9158151
......@@ -18,7 +18,7 @@ export function Footer() {
height={80}
className="fill-gray-900 flex md:hidden"
/>
<ul className="text-center md:text-start">
<ul className="text-center text-gray-50 md:text-start">
<li>Plataforma de Cursos Livres</li>
<li>HUB - Indústria Criativa</li>
<li className="hidden md:flex">
......@@ -39,7 +39,11 @@ export function Footer() {
<nav className="py-8 hidden md:flex">
<ul className="flex flex-col gap-4">
<li>
<Button asChild variant="link" className="uppercase p-0">
<Button
asChild
variant="link"
className="uppercase p-0 text-gray-50"
>
<Link href="#">
Cursos rápidos{' '}
<ChevronRight className="text-yellow-100 ml-3" />
......@@ -47,7 +51,11 @@ export function Footer() {
</Button>
</li>
<li>
<Button asChild variant="link" className="uppercase p-0">
<Button
asChild
variant="link"
className="uppercase p-0 text-gray-50"
>
<Link href="#">
Cursos de aprofundamento
<ChevronRight className="text-yellow-100 ml-3" />
......@@ -55,7 +63,11 @@ export function Footer() {
</Button>
</li>
<li>
<Button asChild variant="link" className="uppercase p-0">
<Button
asChild
variant="link"
className="uppercase p-0 text-gray-50"
>
<Link href="#" className="flex items-center">
Cursos corporativos
<ChevronRight className="text-yellow-100 ml-3" />
......@@ -63,7 +75,11 @@ export function Footer() {
</Button>
</li>
<li>
<Button asChild variant="link" className="uppercase p-0">
<Button
asChild
variant="link"
className="uppercase p-0 text-gray-50"
>
<Link href="/login" className="flex items-center">
Área Administrativa
<ChevronRight className="text-yellow-100 ml-3" />
......
src/components/header.tsx
View file @ a9158151
......@@ -15,7 +15,7 @@ export function Header() {
return (
<>
<div className="absolute h-[200px] w-full bg-gradient-to-b from-gray-900 from-5% z-10" />
<header className="w-full md:px-6 py-5 absolute z-50">
<header className="w-full md:px-6 py-5 absolute z-50 overflow-hidden">
<div className="container mx-auto flex justify-between gap-4">
<Link href="/">
<LogoComponent width={115} height={32} className="fill-primary" />
......@@ -54,7 +54,7 @@ export function Header() {
<Sheet>
<SheetTrigger asChild>
<Button
variant="outline"
variant="ghost"
size="icon"
className="shrink-0 lg:hidden"
>
......
src/components/nav-link.tsx
View file @ a9158151
......@@ -26,7 +26,7 @@ export function NavLink(props: NavLinkProps) {
return (
<Button
data-current={pathname === props.href}
className={`data-[current=true]:font-semibold ${props.className}`}
className={`data-[current=true]:font-semibold text-gray-50 ${props.className}`}
variant={props.variant}
asChild
>
......
src/components/search-filter.tsx
View file @ a9158151
import { TextField } from '@mui/material'
import { Search } from 'lucide-react'
import { Input } from './ui/input'
import { StyledInputs } from './mui/styled-inputs'
import { Label } from './ui/label'
import {
Select,
......@@ -14,7 +15,13 @@ export default function SearchFilter() {
return (
<div className="container grid md:grid-cols-2 gap-8 items-end mb-8">
<div className="flex items-center max-w-[712px] flex-1">
<Input className="pr-8" placeholder="O que você quer aprender hoje?" />
<TextField
label="O que você quer aprender hoje?"
variant="standard"
type="text"
className="w-full"
sx={StyledInputs({ color: '#fafafa' })}
/>
<Search size={24} className="-ml-6" />
</div>
<div>
......
src/components/sign-up.tsx
View file @ a9158151
'use client'
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'
import { TextField } from '@mui/material'
import Image from 'next/image'
import { SubmitHandler, useForm } from 'react-hook-form'
import signUpImage from '../../public/images/sign-up.png'
import { StyledInputs } from './mui/styled-inputs'
type FormSignUpTypes = {
name: string
......@@ -18,14 +17,14 @@ type FormSignUpTypes = {
}
export function SignUp() {
const { register, handleSubmit } = useForm<FormSignUpTypes>()
const { handleSubmit } = useForm<FormSignUpTypes>()
const onSubmit: SubmitHandler<FormSignUpTypes> = (data) => console.log(data)
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">
<p className="max-w-[268px] my-6 md:max-w-[420px] text-xl text-gray-50 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
......@@ -40,61 +39,36 @@ export function SignUp() {
onSubmit={handleSubmit(onSubmit)}
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"
{...register('name')}
/>
</div>
<div>
<Label htmlFor="email" className="text-gray-300 text-xs">
E-mail
</Label>
<Input
type="email"
id="email"
placeholder="Digite aqui"
{...register('email')}
/>
</div>
<div>
<Label htmlFor="whatsapp" className="text-gray-300 text-xs">
Whatsapp
</Label>
<Input
type="number"
id="whatsapp"
placeholder="Digite aqui"
{...register('whatsapp')}
/>
</div>
<div>
<Label htmlFor="interest" className="text-gray-300 text-xs">
Área de interesse
</Label>
<Input
type="text"
id="interest"
placeholder="Digite aqui"
{...register('interest')}
/>
</div>
<div>
<Label htmlFor="course" className="text-gray-300 text-xs">
Curso desejado
</Label>
<Input
type="text"
id="course"
placeholder="Digite aqui"
{...register('course')}
/>
</div>
<TextField
label="Nome"
variant="standard"
type="text"
sx={StyledInputs({ color: '#fafafa' })}
/>
<TextField
label="Whatsapp"
variant="standard"
type="number"
sx={StyledInputs({ color: '#fafafa' })}
/>
<TextField
label="Área de interesse"
variant="standard"
type="text"
sx={StyledInputs({ color: '#fafafa' })}
/>
<TextField
label="E-mail"
variant="standard"
type="text"
sx={StyledInputs({ color: '#fafafa' })}
/>
<TextField
label="Curso desejado"
variant="standard"
type="text"
sx={StyledInputs({ color: '#fafafa' })}
/>
<Button
type="submit"
variant="secondary"
......
src/components/theme-switcher.tsx
View file @ a9158151
......@@ -10,13 +10,21 @@ export function ThemeSwitcher() {
const hasMounted = useHasMounted()
return (
<div>
<div className="hidden sm:block">
{hasMounted && theme === 'dark' ? (
<Button variant="ghost" onClick={() => setTheme('light')}>
<Button
variant="ghost"
className="p-2 text-gray-50"
onClick={() => setTheme('light')}
>
<Sun />
</Button>
) : (
<Button variant="ghost" onClick={() => setTheme('dark')}>
<Button
variant="ghost"
className="p-2 text-gray-50"
onClick={() => setTheme('dark')}
>
<Moon />
</Button>
)}
......
src/components/ui/button.tsx
View file @ a9158151
......@@ -9,16 +9,19 @@ const buttonVariants = cva(
{
variants: {
variant: {
default: 'bg-green-700 text-primary hover:bg-green-800',
default:
'bg-gradient-to-r from-green-700 to-green-700/50 text-gray-50 hover:opacity-75',
// 'bg-green-700 text-primary hover:bg-green-800',
secondary:
'bg-purple-100 text-secondary-foreground hover:bg-purple-200',
'text-gray-50 bg-gradient-to-r from-purple-100 to-purple-200 hover:bg-purple-200 hover:opacity-75',
// 'bg-purple-100 text-secondary-foreground hover:bg-purple-200',
third:
'rounded-sm bg-green-400/10 text-sm text-green-400 font-thin hover:bg-green-400/5 hover:text-green-400',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
ghost: 'hover:bg-white/10 hover:text-accent-foreground',
ghost: 'hover:bg-white/10 hover:text-gray-50',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
......
tailwind.config.ts
View file @ a9158151
......@@ -18,6 +18,9 @@ const config = {
},
},
extend: {
screens: {
xs: '390px',
},
colors: {
green: {
50: '#6CB876',
......
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