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 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"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",
"next": "14.2.3",
"next-themes": "^0.3.0",
......@@ -4123,28 +4124,36 @@
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
},
"node_modules/embla-carousel": {
"version": "8.1.5",
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.5.tgz",
"integrity": "sha512-R6xTf7cNdR2UTNM6/yUPZlJFRmZSogMiRjJ5vXHO65II5MoUlrVYUAP0fHQei/py82Vf15lj+WI+QdhnzBxA2g=="
"version": "8.1.8",
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.8.tgz",
"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": {
"version": "8.1.5",
"resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.1.5.tgz",
"integrity": "sha512-xFmfxgJd7mpWDHQ4iyK1Qs+5BTTwu4bkn+mSROKiUH9nKpPHTeilQ+rpeQDCHRrAPeshD67aBk0/p6FxWxXsng==",
"version": "8.1.8",
"resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.1.8.tgz",
"integrity": "sha512-b8DcmC+j1vqVWSM6rU/GYGyY6Kp9LX8OoikZPBKmV6qL8s94sSPGl6jtDLLUtV8TTIQGMYOlOKUgoMAt/0TwOQ==",
"dependencies": {
"embla-carousel": "8.1.5",
"embla-carousel-reactive-utils": "8.1.5"
"embla-carousel": "8.1.8",
"embla-carousel-reactive-utils": "8.1.8"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.1 || ^18.0.0"
}
},
"node_modules/embla-carousel-reactive-utils": {
"version": "8.1.5",
"resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.5.tgz",
"integrity": "sha512-76uZTrSaEGGta+qpiGkMFlLK0I7N04TdjZ2obrBhyggYIFDWlxk1CriIEmt2lisLNsa1IYXM85kr863JoCMSyg==",
"version": "8.1.8",
"resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.8.tgz",
"integrity": "sha512-bwV/23WD3Ecm0YuQ4I6Syzs3tdVJw0Oj3VCZlEODv1kH8LZ5kNDLgX2Uvx5brvoe2hpifBHPBQ8gYlxNL5kMPA==",
"peerDependencies": {
"embla-carousel": "8.1.5"
"embla-carousel": "8.1.8"
}
},
"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 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() {
const plugin = React.useRef(
Autoplay({ delay: 5000, stopOnInteraction: true }),
)
return (
<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>
<Carousel
plugins={[plugin.current]}
className="w-full"
// onMouseEnter={plugin.current.stop}
onMouseLeave={plugin.current.reset}
>
<CarouselContent>
{BannersHome.map((item) => (
<CarouselItem key={item.id}>
<Image
src={item.desktop.src}
alt="Banner"
width={item.desktop.width}
height={item.desktop.height}
// className="h-full object-cover min-h-[400px] md:min-h-[700px]"
unoptimized
/>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</section>
)
}
src/components/header.tsx
View file @ 7a2873b6
......@@ -13,111 +13,114 @@ import { NavLink } from './nav-link'
export function Header() {
return (
<header className="w-full md:px-6 py-5">
<div className="container mx-auto flex justify-between gap-4">
<Link href="/">
<LogoComponent width={115} height={32} className="fill-primary" />
</Link>
<div className="flex items-center flex-1 lg:flex-none">
<div className="hidden lg:block">
<nav className="flex items-start px-2 text-sm font-medium">
<NavLink variant="ghost" href="/estudantes">
Para estudantes
</NavLink>
<NavLink variant="ghost" href="/profissionais">
Para profissionais
</NavLink>
<>
<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">
<div className="container mx-auto flex justify-between gap-4">
<Link href="/">
<LogoComponent width={115} height={32} className="fill-primary" />
</Link>
<div className="flex items-center flex-1 lg:flex-none">
<div className="hidden lg:block">
<nav className="flex items-start px-2 text-sm font-medium">
<NavLink variant="ghost" href="/estudantes">
Para estudantes
</NavLink>
<NavLink variant="ghost" href="/profissionais">
Para profissionais
</NavLink>
<NavLink variant="ghost" href="/empresas">
Para empresas
</NavLink>
<NavLink variant="ghost" href="/sobre">
Conheça a SevenPro
</NavLink>
<NavLink variant="ghost" href="/contato">
Contato
</NavLink>
</nav>
</div>
<div className="w-full flex items-center gap-4">
<Button
asChild
variant="secondary"
className="uppercase text-sm mx-auto"
>
<Link href="/inscricao">Inscreva-se</Link>
</Button>
<ThemeSwitcher />
<div className="flex flex-col">
<Sheet>
<SheetTrigger asChild>
<Button
variant="outline"
size="icon"
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"
<NavLink variant="ghost" href="/empresas">
Para empresas
</NavLink>
<NavLink variant="ghost" href="/sobre">
Conheça a SevenPro
</NavLink>
<NavLink variant="ghost" href="/contato">
Contato
</NavLink>
</nav>
</div>
<div className="w-full flex items-center gap-4">
<Button
asChild
variant="secondary"
className="uppercase text-sm mx-auto"
>
<Link href="/inscricao">Inscreva-se</Link>
</Button>
<ThemeSwitcher />
<div className="flex flex-col">
<Sheet>
<SheetTrigger asChild>
<Button
variant="outline"
size="icon"
className="shrink-0 lg:hidden"
>
<SheetClose className="uppercase">
Para estudantes
</SheetClose>
</NavLink>
<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">
Para estudantes
</SheetClose>
</NavLink>
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/profissionais"
>
<SheetClose className="uppercase">
Para profissionais
</SheetClose>
</NavLink>
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/profissionais"
>
<SheetClose className="uppercase">
Para profissionais
</SheetClose>
</NavLink>
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/empresas"
>
<SheetClose className="uppercase">
Para empresas
</SheetClose>
</NavLink>
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/empresas"
>
<SheetClose className="uppercase">
Para empresas
</SheetClose>
</NavLink>
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/sobre"
>
<SheetClose className="uppercase">
Conheça a SevenPro
</SheetClose>
</NavLink>
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/sobre"
>
<SheetClose className="uppercase">
Conheça a SevenPro
</SheetClose>
</NavLink>
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/contato"
>
<SheetClose className="uppercase">Contato</SheetClose>
</NavLink>
</nav>
</SheetContent>
</Sheet>
<NavLink
className="hover:bg-gray-50/10"
variant="ghost"
href="/contato"
>
<SheetClose className="uppercase">Contato</SheetClose>
</NavLink>
</nav>
</SheetContent>
</Sheet>
</div>
</div>
</div>
</div>
</div>
</header>
</header>
</>
)
}
src/components/theme-switcher.tsx
View file @ 7a2873b6
......@@ -13,11 +13,11 @@ export function ThemeSwitcher() {
<div>
{hasMounted && theme === 'dark' ? (
<Button variant="ghost" onClick={() => setTheme('light')}>
<Moon />
<Sun />
</Button>
) : (
<Button variant="ghost" onClick={() => setTheme('dark')}>
<Sun />
<Moon />
</Button>
)}
</div>
......
src/components/ui/button.tsx
View file @ 7a2873b6
......@@ -18,7 +18,7 @@ const buttonVariants = cva(
'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-accent hover:text-accent-foreground',
ghost: 'hover:bg-white/10 hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
......
src/components/ui/carousel.tsx
View file @ 7a2873b6
'use client'
import * as React from 'react'
import useEmblaCarousel, {
type UseEmblaCarouselType,
} from 'embla-carousel-react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
......@@ -253,10 +253,7 @@ const CarouselNext = React.forwardRef<
CarouselNext.displayName = 'CarouselNext'
export {
type CarouselApi,
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi
}
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