Skip to content

Commit 9f3a801

Browse files
KaiqueNoronhaKaiqueNoronha
committed
CarroselMobile
1 parent 12b89bc commit 9f3a801

6 files changed

Lines changed: 177 additions & 0 deletions

File tree

‎src/app/[locale]/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Clients } from '@/components/Clients';
1010
import { HeroSection } from '@/components/HeroSection';
1111
import { TeamMembers } from '@/app/(data)/(mock)/team-members';
1212
import { ProcessProgress } from '@/components/ProcessProgress';
13+
import { NewCarousel } from '@/components/NewCarousel';
1314
import { TeamLecodeContainer } from '../(components)/(team)/team-member-container';
1415

1516
export default function Home() {
@@ -27,6 +28,7 @@ export default function Home() {
2728
/>
2829
<ProcessProgress/>
2930
<Clients />
31+
<NewCarousel/>
3032
{/* <TestimonyContainer testimonies={TestimonyData} /> */}
3133
<Form />
3234
<Footer />

‎src/components/NewCarousel/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './new-carousel'

‎src/components/NewCarousel/new-carousel.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
'use client'
2+
3+
import { useState, useRef } from 'react'
4+
import Image from 'next/image';
5+
import SetaEsquerda from '../../images/seta-esquerda.svg';
6+
import SetaDireita from '../../images/seta-direita.svg';
7+
import novoLogo from '../../../public/clients/novoLogo.svg'
8+
import autonomyLogo from '../../../public/clients/autonomyLogo.svg'
9+
import ethicsNetLogo from '../../../public/clients/ethicsNetLogo.svg'
10+
import falconsLogo from '../../../public/clients/falconsLogo.svg'
11+
import scouthubLogo from '../../../public/clients/scouthubLogo.svg'
12+
import workStory from '../../../public/clients/workStory.svg'
13+
import synergyLogo from '../../../public/clients/synergyLogo.svg'
14+
import {
15+
CarouselContainer,
16+
CarouselWrapper,
17+
CarouselSlide,
18+
NavigationButton,
19+
DotsContainer,
20+
Dot
21+
} from './styles'
22+
23+
const logos = [
24+
{ src: novoLogo, alt: 'Novo Logo' },
25+
{ src: autonomyLogo, alt: 'Autonomy Logo' },
26+
{ src: ethicsNetLogo, alt: 'EthicsNet Logo' },
27+
{ src: falconsLogo, alt: 'Falcons Logo' },
28+
{ src: scouthubLogo, alt: 'Scouthub Logo' },
29+
{ src: workStory, alt: 'Work Story Logo' },
30+
{ src: synergyLogo, alt: 'Synergy Logo' },
31+
]
32+
33+
export function NewCarousel () {
34+
const [currentIndex, setCurrentIndex] = useState(0)
35+
const slideRef = useRef<HTMLDivElement>(null)
36+
37+
const nextSlide = () => {
38+
setCurrentIndex((prevIndex) =>
39+
prevIndex + 2 >= logos.length ? 0 : prevIndex + 2
40+
)
41+
}
42+
43+
const prevSlide = () => {
44+
setCurrentIndex((prevIndex) =>
45+
prevIndex - 2 < 0 ? logos.length - 2 : prevIndex - 2
46+
)
47+
}
48+
49+
const goToSlide = (index: number) => {
50+
setCurrentIndex(index * 2)
51+
}
52+
53+
const totalDots = Math.ceil(logos.length / 2)
54+
55+
return (
56+
<CarouselContainer>
57+
<CarouselWrapper>
58+
<NavigationButton direction="left" onClick={prevSlide}>
59+
<Image alt='setaEsquerda'src={SetaEsquerda}/>
60+
</NavigationButton>
61+
62+
<CarouselSlide ref={slideRef} style={{
63+
transform: `translateX(-${currentIndex * 50}%)`
64+
}}>
65+
{logos.map((logo, index) => (
66+
<Image
67+
key={index}
68+
src={logo.src}
69+
alt={logo.alt}
70+
width={200}
71+
height={100}
72+
style={{
73+
width: '50%',
74+
flexShrink: 0,
75+
padding: '0 1rem',
76+
objectFit: 'contain'
77+
}}
78+
/>
79+
))}
80+
</CarouselSlide>
81+
82+
<NavigationButton direction="right" onClick={nextSlide}>
83+
<Image alt='setaDireita'src={SetaDireita} />
84+
</NavigationButton>
85+
</CarouselWrapper>
86+
87+
<DotsContainer>
88+
{Array.from({ length: totalDots }).map((_, index) => (
89+
<Dot
90+
key={index}
91+
active={Math.floor(currentIndex / 2) === index}
92+
onClick={() => { goToSlide(index); }}
93+
/>
94+
))}
95+
</DotsContainer>
96+
</CarouselContainer>
97+
)
98+
};

‎src/components/NewCarousel/styles.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import styled from 'styled-components'
2+
3+
export const CarouselContainer = styled.div`
4+
display: block;
5+
width: 100%;
6+
position: relative;
7+
margin: 2rem 0;
8+
9+
@media (min-width: 1024px) {
10+
display: none;
11+
}
12+
`
13+
14+
export const CarouselWrapper = styled.div`
15+
position: relative;
16+
width: 100%;
17+
overflow: hidden;
18+
display: flex;
19+
align-items: center;
20+
`
21+
22+
export const CarouselSlide = styled.div`
23+
display: flex;
24+
transition: transform 0.5s ease;
25+
width: 100%;
26+
`
27+
28+
export const NavigationButton = styled.button<{ direction: 'left' | 'right' }>`
29+
position: absolute;
30+
top: 50%;
31+
transform: translateY(-50%);
32+
${({ direction }) => direction === 'left' ? 'left: 0;' : 'right: 0;'}
33+
background: rgba(255, 255, 255, 0.8);
34+
border: none;
35+
border-radius: 50%;
36+
width: 40px;
37+
height: 40px;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
cursor: pointer;
42+
z-index: 2;
43+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
44+
45+
&:hover {
46+
background: rgba(255, 255, 255, 1);
47+
}
48+
`
49+
50+
export const DotsContainer = styled.div`
51+
display: flex;
52+
justify-content: center;
53+
gap: 0.5rem;
54+
margin-top: 1rem;
55+
`
56+
57+
export const Dot = styled.button<{ active: boolean }>`
58+
width: 8px;
59+
height: 8px;
60+
border-radius: 50%;
61+
border: none;
62+
background-color: ${({ active }) => active ? '#000' : '#ccc'};
63+
cursor: pointer;
64+
padding: 0;
65+
transition: background-color 0.3s ease;
66+
67+
&:hover {
68+
background-color: ${({ active }) => active ? '#000' : '#999'};
69+
}
70+
`

‎src/images/seta-direita.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)