Skip to content

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

feat: add banners home page and header adjustments

parent 5df64f10
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 140 deletions
package-lock.json
View file @ 7a2873b6
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"embla-carousel-react": "^8.1.5", "embla-carousel-autoplay": "^8.1.8",
"embla-carousel-react": "^8.1.8",
"lucide-react": "^0.383.0", "lucide-react": "^0.383.0",
"next": "14.2.3", "next": "14.2.3",
"next-themes": "^0.3.0", "next-themes": "^0.3.0",
...@@ -4123,28 +4124,36 @@ ...@@ -4123,28 +4124,36 @@
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==" "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
}, },
"node_modules/embla-carousel": { "node_modules/embla-carousel": {
"version": "8.1.5", "version": "8.1.8",
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.5.tgz", "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.8.tgz",
"integrity": "sha512-R6xTf7cNdR2UTNM6/yUPZlJFRmZSogMiRjJ5vXHO65II5MoUlrVYUAP0fHQei/py82Vf15lj+WI+QdhnzBxA2g==" "integrity": "sha512-KuHPA8qcAts6YE6ELtt38XYAb26hnKw8Ga0lSXmrhm1oI97t6oACFkqSsy33dfeZQEhaZB6VwWvaWQJRJVgSgA=="
},
"node_modules/embla-carousel-autoplay": {
"version": "8.1.8",
"resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.1.8.tgz",
"integrity": "sha512-H3vVKt4HR2PGeMlCutE3+a8wv7Jq1rg31Fjb8ZDZaiuSnT/1XTwA83KpkJ02BdImVJci9RS0uEBiXBax2kfnMQ==",
"peerDependencies": {
"embla-carousel": "8.1.8"
}
}, },
"node_modules/embla-carousel-react": { "node_modules/embla-carousel-react": {
"version": "8.1.5", "version": "8.1.8",
"resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.1.5.tgz", "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.1.8.tgz",
"integrity": "sha512-xFmfxgJd7mpWDHQ4iyK1Qs+5BTTwu4bkn+mSROKiUH9nKpPHTeilQ+rpeQDCHRrAPeshD67aBk0/p6FxWxXsng==", "integrity": "sha512-b8DcmC+j1vqVWSM6rU/GYGyY6Kp9LX8OoikZPBKmV6qL8s94sSPGl6jtDLLUtV8TTIQGMYOlOKUgoMAt/0TwOQ==",
"dependencies": { "dependencies": {
"embla-carousel": "8.1.5", "embla-carousel": "8.1.8",
"embla-carousel-reactive-utils": "8.1.5" "embla-carousel-reactive-utils": "8.1.8"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.8.0 || ^17.0.1 || ^18.0.0" "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
} }
}, },
"node_modules/embla-carousel-reactive-utils": { "node_modules/embla-carousel-reactive-utils": {
"version": "8.1.5", "version": "8.1.8",
"resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.5.tgz", "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.8.tgz",
"integrity": "sha512-76uZTrSaEGGta+qpiGkMFlLK0I7N04TdjZ2obrBhyggYIFDWlxk1CriIEmt2lisLNsa1IYXM85kr863JoCMSyg==", "integrity": "sha512-bwV/23WD3Ecm0YuQ4I6Syzs3tdVJw0Oj3VCZlEODv1kH8LZ5kNDLgX2Uvx5brvoe2hpifBHPBQ8gYlxNL5kMPA==",
"peerDependencies": { "peerDependencies": {
"embla-carousel": "8.1.5" "embla-carousel": "8.1.8"
} }
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
......
src/components/banner.tsx
View file @ 7a2873b6
import Image from 'next/image' 'use client'
import Autoplay from 'embla-carousel-autoplay'
import React from 'react' import React from 'react'
import banner from '../../public/images/banner.png' import { BannersHome } from '@/utils/banners'
import Image from 'next/image'
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from './ui/carousel'
export function Banner() { export function Banner() {
const plugin = React.useRef(
Autoplay({ delay: 5000, stopOnInteraction: true }),
)
return ( return (
<section> <section>
<div className="container h-[400px] md:h-[700px] flex items-center justify-end bg-gray-900"> <Carousel
<div className="relative right-0"> plugins={[plugin.current]}
<div className="absolute h-full w-[400px] bg-gradient-to-r from-gray-900 md:from-30% z-20" /> className="w-full"
<div className="absolute h-full w-[200px] md:w-[500px] bg-gradient-to-r from-green-700 md:from-10% z-10" /> // onMouseEnter={plugin.current.stop}
<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"> onMouseLeave={plugin.current.reset}
Transforme sua vida através do conhecimento >
</h1> <CarouselContent>
<Image {BannersHome.map((item) => (
src={banner} <CarouselItem key={item.id}>
alt="Banner" <Image
height={700} src={item.desktop.src}
className="h-full object-cover min-h-[400px] md:min-h-[700px]" alt="Banner"
unoptimized width={item.desktop.width}
/> height={item.desktop.height}
<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" /> // className="h-full object-cover min-h-[400px] md:min-h-[700px]"
<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" /> unoptimized
</div> />
</div> </CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</section> </section>
) )
} }
src/components/header.tsx
View file @ 7a2873b6
...@@ -13,111 +13,114 @@ import { NavLink } from './nav-link' ...@@ -13,111 +13,114 @@ import { NavLink } from './nav-link'
export function Header() { export function Header() {
return ( return (
<header className="w-full md:px-6 py-5"> <>
<div className="container mx-auto flex justify-between gap-4"> <div className="absolute h-[200px] w-full bg-gradient-to-b from-gray-900 from-5% z-10" />
<Link href="/"> <header className="w-full md:px-6 py-5 absolute z-50">
<LogoComponent width={115} height={32} className="fill-primary" /> <div className="container mx-auto flex justify-between gap-4">
</Link> <Link href="/">
<div className="flex items-center flex-1 lg:flex-none"> <LogoComponent width={115} height={32} className="fill-primary" />
<div className="hidden lg:block"> </Link>
<nav className="flex items-start px-2 text-sm font-medium"> <div className="flex items-center flex-1 lg:flex-none">
<NavLink variant="ghost" href="/estudantes"> <div className="hidden lg:block">
Para estudantes <nav className="flex items-start px-2 text-sm font-medium">
</NavLink> <NavLink variant="ghost" href="/estudantes">
<NavLink variant="ghost" href="/profissionais"> Para estudantes
Para profissionais </NavLink>
</NavLink> <NavLink variant="ghost" href="/profissionais">
Para profissionais
</NavLink>
<NavLink variant="ghost" href="/empresas"> <NavLink variant="ghost" href="/empresas">
Para empresas Para empresas
</NavLink> </NavLink>
<NavLink variant="ghost" href="/sobre"> <NavLink variant="ghost" href="/sobre">
Conheça a SevenPro Conheça a SevenPro
</NavLink> </NavLink>
<NavLink variant="ghost" href="/contato"> <NavLink variant="ghost" href="/contato">
Contato Contato
</NavLink> </NavLink>
</nav> </nav>
</div> </div>
<div className="w-full flex items-center gap-4"> <div className="w-full flex items-center gap-4">
<Button <Button
asChild asChild
variant="secondary" variant="secondary"
className="uppercase text-sm mx-auto" className="uppercase text-sm mx-auto"
> >
<Link href="/inscricao">Inscreva-se</Link> <Link href="/inscricao">Inscreva-se</Link>
</Button> </Button>
<ThemeSwitcher /> <ThemeSwitcher />
<div className="flex flex-col"> <div className="flex flex-col">
<Sheet> <Sheet>
<SheetTrigger asChild> <SheetTrigger asChild>
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
className="shrink-0 lg:hidden" className="shrink-0 lg:hidden"
>
<Menu className="h-5 w-5" />
</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">
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/estudantes"
> >
<SheetClose className="uppercase"> <Menu className="h-5 w-5" />
Para estudantes </Button>
</SheetClose> </SheetTrigger>
</NavLink> <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">
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/estudantes"
>
<SheetClose className="uppercase">
Para estudantes
</SheetClose>
</NavLink>
<NavLink <NavLink
className="hover:bg-gray-50/10" className="hover:bg-gray-50/10"
variant="ghost" variant="ghost"
href="/profissionais" href="/profissionais"
> >
<SheetClose className="uppercase"> <SheetClose className="uppercase">
Para profissionais Para profissionais
</SheetClose> </SheetClose>
</NavLink> </NavLink>
<NavLink <NavLink
className="hover:bg-gray-50/10" className="hover:bg-gray-50/10"
variant="ghost" variant="ghost"
href="/empresas" href="/empresas"
> >
<SheetClose className="uppercase"> <SheetClose className="uppercase">
Para empresas Para empresas
</SheetClose> </SheetClose>
</NavLink> </NavLink>
<NavLink <NavLink
className="hover:bg-gray-50/10" className="hover:bg-gray-50/10"
variant="ghost" variant="ghost"
href="/sobre" href="/sobre"
> >
<SheetClose className="uppercase"> <SheetClose className="uppercase">
Conheça a SevenPro Conheça a SevenPro
</SheetClose> </SheetClose>
</NavLink> </NavLink>
<NavLink <NavLink
className="hover:bg-gray-50/10" className="hover:bg-gray-50/10"
variant="ghost" variant="ghost"
href="/contato" href="/contato"
> >
<SheetClose className="uppercase">Contato</SheetClose> <SheetClose className="uppercase">Contato</SheetClose>
</NavLink> </NavLink>
</nav> </nav>
</SheetContent> </SheetContent>
</Sheet> </Sheet>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </header>
</header> </>
) )
} }
src/components/theme-switcher.tsx
View file @ 7a2873b6
...@@ -13,11 +13,11 @@ export function ThemeSwitcher() { ...@@ -13,11 +13,11 @@ export function ThemeSwitcher() {
<div> <div>
{hasMounted && theme === 'dark' ? ( {hasMounted && theme === 'dark' ? (
<Button variant="ghost" onClick={() => setTheme('light')}> <Button variant="ghost" onClick={() => setTheme('light')}>
<Moon /> <Sun />
</Button> </Button>
) : ( ) : (
<Button variant="ghost" onClick={() => setTheme('dark')}> <Button variant="ghost" onClick={() => setTheme('dark')}>
<Sun /> <Moon />
</Button> </Button>
)} )}
</div> </div>
......
src/components/ui/button.tsx
View file @ 7a2873b6
...@@ -18,7 +18,7 @@ const buttonVariants = cva( ...@@ -18,7 +18,7 @@ const buttonVariants = cva(
'bg-destructive text-destructive-foreground hover:bg-destructive/90', 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground', 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
ghost: 'hover:bg-accent hover:text-accent-foreground', ghost: 'hover:bg-white/10 hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline', link: 'text-primary underline-offset-4 hover:underline',
}, },
size: { size: {
......
src/components/ui/carousel.tsx
View file @ 7a2873b6
'use client' 'use client'
import * as React from 'react'
import useEmblaCarousel, { import useEmblaCarousel, {
type UseEmblaCarouselType, type UseEmblaCarouselType,
} from 'embla-carousel-react' } from 'embla-carousel-react'
import { ChevronLeft, ChevronRight } from 'lucide-react' import { ChevronLeft, ChevronRight } from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
type CarouselApi = UseEmblaCarouselType[1] type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel> type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
...@@ -253,10 +253,7 @@ const CarouselNext = React.forwardRef< ...@@ -253,10 +253,7 @@ const CarouselNext = React.forwardRef<
CarouselNext.displayName = 'CarouselNext' CarouselNext.displayName = 'CarouselNext'
export { export {
type CarouselApi,
Carousel, Carousel,
CarouselContent, CarouselContent,
CarouselItem, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi
CarouselPrevious,
CarouselNext,
} }
src/utils/banners.ts 0 → 100644
View file @ 7a2873b6
import BannerDesktop01 from '../../public/images/banners/banner-1-desktop.jpg'
import BannerDesktop02 from '../../public/images/banners/banner-2-desktop.jpg'
import BannerDesktop03 from '../../public/images/banners/banner-3-desktop.jpg'
import BannerDesktop04 from '../../public/images/banners/banner-4-desktop.jpg'
import BannerMobile01 from '../../public/images/banners/banner-1-mobile.jpg'
import BannerMobile02 from '../../public/images/banners/banner-2-mobile.jpg'
import BannerMobile03 from '../../public/images/banners/banner-3-mobile.jpg'
import BannerMobile04 from '../../public/images/banners/banner-4-mobile.jpg'
// type CoursesCardTypes = {
// desktop:
// }
export const BannersHome = [
{
id: '1',
desktop: BannerDesktop01,
mobile: BannerMobile01,
},
{
id: '2',
desktop: BannerDesktop02,
mobile: BannerMobile02,
},
{
id: '3',
desktop: BannerDesktop03,
mobile: BannerMobile03,
},
{
id: '4',
desktop: BannerDesktop04,
mobile: BannerMobile04,
},
]
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