Skip to content

Commit 51dac63

Browse files
MatheusDamascenoDevMatheusDamascenoDev
authored
Merge branch 'main' into Ajustes-Remanecesntes
2 parents 6674601 + 58ca82c commit 51dac63

6 files changed

Lines changed: 124 additions & 143 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function Home() {
1919
<Navbar />
2020
<ScrollbarWrapper>
2121
<Content>
22-
<HeroSection/>
22+
<HeroSection />
2323
<TechnologyBanner id='technologies' />
2424
<TeamLecodeContainer
2525
id='team'

‎src/components/ContactButton/styles.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import styled from 'styled-components';
44
const poppins = Poppins({ weight: ['600'], style: ['normal'], subsets: ['latin'], display: 'swap' });
55

66
export const ContactButton = styled.button`
7-
display: flex;
7+
display: flex;
88
width: fit-content;
99
height: 3.25rem;
1010
padding: 1.5625rem 1.5rem;
@@ -14,7 +14,7 @@ display: flex;
1414
border-radius: 0.5rem;
1515
font-size: 1rem;
1616
border: none;
17-
background: ${({ theme }) => theme.gradients.CTA};
17+
background: ${({ theme }) => theme.colors.mainGreen};
1818
box-shadow: ${({ theme }) =>
1919
`0px 0px 8px 0px ${theme.colors.shadows.mainGreen}, 0px 0px 1.9px 0px ${theme.colors.shadows.white}`};
2020
cursor: pointer;
@@ -23,16 +23,17 @@ display: flex;
2323
font-family: ${poppins.style.fontFamily};
2424
2525
&:hover {
26-
background: ${({ theme }) => theme.gradients.secondary};
26+
background: ${({ theme }) => theme.colors.hover.mainGreen};
27+
transition: 0.3s;
2728
}
2829
29-
@media (max-width: 1200px) {
30+
@media (max-width: 1200px) {
3031
font-size: 0.9rem;
3132
height: 2.5rem;
3233
padding: 1rem 1.25rem;
3334
}
3435
35-
@media (max-width: 500px) {
36+
@media (max-width: 500px) {
3637
font-size: 0.5rem;
3738
height: 2.25rem;
3839
padding: 0.45rem 1rem;

‎src/components/HeroSection/hero-section.tsx‎

Lines changed: 98 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import Stroke from '../../images/stroke.svg';
1818
import Logo from '../../../public/lecode-logo.svg';
1919
import {
2020
AnimatedLogo,
21+
AnimatedLogoContainer,
2122
Card,
2223
CardDescription,
2324
CardTitle,
@@ -29,95 +30,29 @@ import {
2930
HeroGroupSecundaryImageRight,
3031
HeroImage,
3132
ImagesContainer,
32-
LogoContainer,
3333
RectangleWithGreenStroke,
3434
SectionContainer,
3535
SpanWithStroke,
3636
Title,
3737
TitleContainer,
3838
} from './styles';
3939

40-
const AnimatedImage = motion(Image);
41-
const AnimatedGroupImageLeft = motion(HeroGroupImageLeft);
42-
const AnimatedGroupSecundaryImageLeft = motion(HeroGroupSecundaryImageLeft);
43-
const AnimatedGroupImageRight = motion(HeroGroupImageRight);
44-
const AnimatedGroupSecundaryImageRight = motion(HeroGroupSecundaryImageRight);
45-
46-
const logoContainerVariants = {
47-
initial: { opacity: 1 },
48-
animate: { opacity: 0, transition: { duration: 0.5 } },
49-
};
50-
51-
const logoVariants = {
52-
initial: {
53-
opacity: 0,
54-
y: 0,
55-
},
56-
fadeIn: {
57-
opacity: 1,
58-
transition: { duration: 1, ease: 'easeInOut' },
59-
},
60-
animate: {
61-
opacity: 1,
62-
width: '9.28125rem', // 148.5px
63-
height: '5.22069rem', // 83.5px
64-
y: '-7.125rem', // -114px
65-
transition: { duration: 0.5 },
66-
},
67-
};
68-
69-
const titleContainerVariants = {
70-
hidden: { opacity: 0 },
71-
visible: { opacity: 1, transition: { duration: 1 } },
72-
};
73-
74-
const strokeVariants = {
75-
hidden: { opacity: 0 },
76-
visible: { opacity: 1, transition: { duration: 0.8 } },
77-
};
78-
79-
const titleVariants = {
80-
hidden: { y: 100, opacity: 1 },
81-
visible: { y: 0, opacity: 1, transition: { duration: 1 } },
82-
};
83-
84-
const imagesContainerVariants = {
85-
hidden: { y: 200, opacity: 0 },
86-
visible: { y: 0, opacity: 1, transition: { duration: 1 } },
87-
};
88-
89-
const cardsContainerVariants = {
90-
hidden: { y: 200, opacity: 0 },
91-
visible: { y: 0, opacity: 1, transition: { duration: 1 } },
92-
};
93-
94-
const groupImageLeftVariants = {
95-
hidden: { x: 200, y: 100, opacity: 0 },
96-
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
97-
};
98-
99-
const groupSecundaryImageLeftVariants = {
100-
hidden: { x: 200, y: 100, opacity: 0 },
101-
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
102-
};
103-
104-
const groupImageRightVariants = {
105-
hidden: { x: -200, y: 100, opacity: 0 },
106-
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
107-
};
108-
109-
const groupSecundaryImageRightVariants = {
110-
hidden: { x: -200, y: 100, opacity: 0 },
111-
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
112-
};
113-
114-
115-
export const HeroSection = () =>{
40+
export const HeroSection = () => {
11641
const { t, i18n } = useTranslation();
11742
const currentLanguage = i18n.language;
11843

11944
const [isLogoVisible, setIsLogoVisible] = useState(true);
12045

46+
const [isSmallScreen, setIsSmallScreen] = useState(false);
47+
48+
const [headerPosition, setHeaderPosition] = useState({ top: 0, left: 0, width: 0 });
49+
50+
const AnimatedImage = motion(Image);
51+
const AnimatedGroupImageLeft = motion(HeroGroupImageLeft);
52+
const AnimatedGroupSecundaryImageLeft = motion(HeroGroupSecundaryImageLeft);
53+
const AnimatedGroupImageRight = motion(HeroGroupImageRight);
54+
const AnimatedGroupSecundaryImageRight = motion(HeroGroupSecundaryImageRight);
55+
12156
const logoContainerControls = useAnimation();
12257
const logoControls = useAnimation();
12358
const titleContainerControls = useAnimation();
@@ -130,6 +65,88 @@ export const HeroSection = () =>{
13065
const groupImageRightControls = useAnimation();
13166
const groupSecundaryImageRightControls = useAnimation();
13267

68+
useEffect(() => {
69+
const handleResize = () => {
70+
const header = document.querySelector('header');
71+
if (header) {
72+
const rect = header.getBoundingClientRect();
73+
setHeaderPosition({ top: rect.top, left: rect.left, width: rect.width });
74+
}
75+
setIsSmallScreen(window.innerWidth <= 768);
76+
};
77+
78+
handleResize();
79+
window.addEventListener('resize', handleResize);
80+
return () => {
81+
window.removeEventListener('resize', handleResize);
82+
};
83+
}, []);
84+
85+
const logoContainerVariants = {
86+
initial: { opacity: 1, zIndex: 1000 },
87+
animate: { opacity: 0, zIndex: 0, transition: { duration: 0.5 } },
88+
};
89+
90+
const logoVariants = {
91+
initial: { opacity: 0, x: 0, y: 0, scale: 4 },
92+
fadeIn: {
93+
opacity: 1,
94+
transition: { duration: 1, ease: 'easeInOut' },
95+
},
96+
animate: {
97+
opacity: 0,
98+
x: isSmallScreen ? -window.innerWidth / 2 + 100 : (headerPosition.left + headerPosition.width / 2 - window.innerWidth / 2) + 10,
99+
y: isSmallScreen ? headerPosition.top - window.innerHeight / 2 + 33 : headerPosition.top - window.innerHeight / 2 + 55,
100+
scale: 1,
101+
transition: { duration: 1 },
102+
},
103+
};
104+
105+
const titleContainerVariants = {
106+
hidden: { opacity: 0 },
107+
visible: { opacity: 1, transition: { duration: 1 } },
108+
};
109+
110+
const strokeVariants = {
111+
hidden: { opacity: 0 },
112+
visible: { opacity: 1, transition: { duration: 0.8 } },
113+
};
114+
115+
const titleVariants = {
116+
hidden: { y: 100, opacity: 1 },
117+
visible: { y: 0, opacity: 1, transition: { duration: 1 } },
118+
};
119+
120+
const imagesContainerVariants = {
121+
hidden: { y: 200, opacity: 0 },
122+
visible: { y: 0, opacity: 1, transition: { duration: 1 } },
123+
};
124+
125+
const cardsContainerVariants = {
126+
hidden: { y: 200, opacity: 0 },
127+
visible: { y: 0, opacity: 1, transition: { duration: 1 } },
128+
};
129+
130+
const groupImageLeftVariants = {
131+
hidden: { x: 200, y: 100, opacity: 0 },
132+
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
133+
};
134+
135+
const groupSecundaryImageLeftVariants = {
136+
hidden: { x: 200, y: 100, opacity: 0 },
137+
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
138+
};
139+
140+
const groupImageRightVariants = {
141+
hidden: { x: -200, y: 100, opacity: 0 },
142+
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
143+
};
144+
145+
const groupSecundaryImageRightVariants = {
146+
hidden: { x: -200, y: 100, opacity: 0 },
147+
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
148+
};
149+
133150
useEffect(() => {
134151
async function sequence() {
135152
await logoControls.start('fadeIn'); // Fase de fadeIn do logo
@@ -150,7 +167,6 @@ export const HeroSection = () =>{
150167
groupSecundaryImageRightControls.start('visible'), // Animação da imagem do grupo secundário à direita
151168
]);
152169
}
153-
154170
sequence();
155171
}, [
156172
logoContainerControls,
@@ -169,7 +185,8 @@ export const HeroSection = () =>{
169185
return (
170186
<Container id='about'>
171187
<SectionContainer>
172-
{isLogoVisible ? <LogoContainer
188+
{isLogoVisible ? (
189+
<AnimatedLogoContainer
173190
initial='initial'
174191
animate={logoContainerControls}
175192
variants={logoContainerVariants}
@@ -181,7 +198,8 @@ export const HeroSection = () =>{
181198
animate={logoControls}
182199
variants={logoVariants}
183200
/>
184-
</LogoContainer> : null}
201+
</AnimatedLogoContainer>
202+
) : null}
185203
<TitleContainer
186204
as={motion.div}
187205
initial='hidden'

‎src/components/HeroSection/styles.tsx‎

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -13,62 +13,33 @@ const montserrat = Montserrat({ weight: ['700'], style: ['normal'], subsets: ['l
1313
const poppins = Poppins({ weight: ['400'], style: ['normal'], subsets: ['latin'], display: 'swap' });
1414

1515
export const Container = styled.section`
16+
position: relative;
1617
display: flex;
1718
flex-direction: column;
1819
justify-content: center;
1920
align-items: center;
2021
background-color: ${({ theme }) => theme.colors.white};
2122
width: 100%;
2223
padding-top: 8rem;
24+
25+
@media (${Styles.devices.tablet}) {
26+
padding-top: 6rem;
27+
}
2328
`;
2429

25-
export const LogoContainer = styled(motion.div)`
30+
export const AnimatedLogoContainer = styled(motion.div)`
31+
position: absolute;
2632
display: flex;
2733
justify-content: center;
2834
align-items: center;
2935
width: 100%;
30-
height: auto;
31-
position: absolute;
36+
height: 100vh;
3237
top: 0;
33-
left: 0;
34-
z-index: 1000;
3538
background-color: ${({ theme }) => theme.colors.white};
3639
`;
3740

3841
export const AnimatedLogo = styled(motion(Image))`
39-
position: relative;
40-
width: 42.88888rem; // 686px
41-
height: 24.125rem; // 386px
42-
top: 8rem; // 240px
43-
right: -0.3125rem; // -5px
44-
z-index: 1000;
45-
46-
@media (${Styles.devices.laptop}) {
47-
right: 0.875rem; // 14px
48-
}
49-
50-
@media (${Styles.devices.tablet}) {
51-
right: -4.9375rem; // -79px
52-
top: 6.5625rem; // 105px
53-
}
54-
55-
@media (${Styles.devices.mobileL}) {
56-
width: 29.625rem; // 474px
57-
height: 16.625rem; // 266px
58-
right: -2.6875rem; // -43px
59-
}
60-
61-
@media (${Styles.devices.mobileM}) {
62-
width: 27.75rem; // 444px
63-
height: 15.5625rem; // 249px
64-
right: -2.75rem; // -44px
65-
}
66-
67-
@media (${Styles.devices.mobileS}) {
68-
width: 25.875rem; // 414px
69-
height: 14.5rem; // 232px
70-
right: -3.125rem; // -50px
71-
}
42+
position: absolute;
7243
`;
7344

7445
export const SectionContainer = styled(motion.section)`

‎src/components/Navbar/navbar.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,13 @@ export const Navbar = () => {
1919
<Image
2020
alt='LeCode logo: green triangle with white Le and black code'
2121
src={lecodeLogo}
22-
/><TranslateButtonContainer>
23-
<ContactButton
24-
type='button'
25-
>
26-
<Link
27-
href='#contact'
28-
>
22+
/>
23+
<TranslateButtonContainer>
24+
<Link href='#contact'>
25+
<ContactButton type='button'>
2926
{t('contactUs.button')}
30-
</Link>
31-
32-
</ContactButton>
27+
</ContactButton>
28+
</Link>
3329
<Language />
3430
</TranslateButtonContainer>
3531
</NavbarContentContainer>

0 commit comments

Comments
 (0)