chore: last minute changes

Author: jgleal

src/components/Button/Button.styles.tsx

@@ -6,10 +6,11 @@ const getSize = (size?: 'small' | 'large') => ({
   default: '14px 30px 16px'
 })[size || 'default']
 
-export const StyledButton = styled.button<{ size?: 'small' | 'large' }>`
+export const StyledButton = styled.a<{ size?: 'small' | 'large' }>`
   line-height: 1;
   font-size: 15px;
   cursor: pointer;
+  text-decoration: none;
   font-weight: 700;
   display: inline-block;
   color: #1b116e;
@@ -20,6 +21,7 @@ export const StyledButton = styled.button<{ size?: 'small' | 'large' }>`
   padding: ${props => getSize(props.size)};
   &:hover {
     background-color: #55bd90;
+    color: #1b116e;
   };
   &:active {
     border: solid 2px #1b116e;

src/components/Hero/Hero.styles.tsx

@@ -55,12 +55,17 @@ export const HeroImage = styled.img`
   }
 `
 
-export const HeroButton = styled.button`
+export const HeroButton = styled.a`
   margin: auto;
   width: max-content;
   color: black;
+  cursor: pointer;
+  text-decoration: none;
   border-radius: 40px;
   border: 1px solid rgb(97, 218, 251);
   padding: 0.5rem 2rem;
   background: ${props => props.theme.colors.gradientButton};
+  &:hover {
+    color: black;
+  }
 `

src/components/Hero/Hero.tsx

@@ -23,7 +23,7 @@ export const Hero: React.FC = () => {
         </HeroTitle>
         <HeroSubtitle>{t('subtitle', { interpolation: { escapeValue: true } })}</HeroSubtitle>
         <HeroDescription>{t('description')}</HeroDescription>
-        <HeroButton>{t('button')}</HeroButton>
+        <HeroButton href='#startNow'>{t('button')}</HeroButton>
       </HeroContent>
       <HeroImage src={shieldjsLogo} alt="ShieldJS logo" />
     </HeroSection>

src/components/NavBar/NavBar.tsx

@@ -1,18 +1,16 @@
 import React, { useState } from 'react'
 import {
   StyledDesktopNav, StyledMobileNav,
-  StyledNav, StyledMobileNavMenu, StyledImage, StyledNavButton, StyledRightContainer
+  StyledNav, StyledMobileNavMenu, StyledImage, StyledRightContainer
 } from '@/components/NavBar/Navbar.styles'
 import shieldjsLogo from '@/assets/shieldjs.svg'
 import { Link } from 'react-router-dom'
 import { NavBarItems } from './components/NavBarItems/NavBarItems'
 import { HamburguerMenu } from './components/HamburguerMenu/HamburguerMenu'
 import { LanguageSelector } from './components/LanguageSelector'
-import { useTranslation } from 'react-i18next'
 
 export const NavBar: React.FC = () => {
   const [expanded, setExpanded] = useState(false)
-  const { t } = useTranslation('navBar')
 
   const handleToggleMenu = () => {
     setExpanded(!expanded)
@@ -38,9 +36,6 @@ export const NavBar: React.FC = () => {
 
       <StyledRightContainer>
         <LanguageSelector />
-        <StyledNavButton>
-          {t('startButton')}
-        </StyledNavButton>
       </StyledRightContainer>
 
     </StyledNav>

src/components/NavBar/Navbar.styles.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import { StyledButton } from '../Button/Button.styles'
 
 export const StyledNavMenu = styled.ul`
   display: flex;
@@ -24,14 +23,16 @@ export const StyledMobileNav = styled.div`
 `
 
 export const StyledNav = styled.nav`
+  position: sticky;
+  top: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #1E1E1E;
   padding: 1rem 2rem;
   width: 100vw;
   height: 6.6rem;
-  box-shadow: 0 0 5px rgba(0,0,0,.2);
+  box-shadow: 0 9px 15px rgba(0,0,0,0.4);
   ${props => props.theme.mediaQueries.sm} {
     padding: 1rem 2rem;
   }
@@ -63,6 +64,7 @@ export const StyledRightContainer = styled.div`
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  margin-left: auto;
 `
 
 export const StyledImage = styled.img`
@@ -71,19 +73,3 @@ export const StyledImage = styled.img`
     height: 3rem;
   }
 `
-
-export const StyledNavButton = styled(StyledButton)`
-  display: none;
-  color: black;
-  border-radius: 40px;
-  border: 1px solid rgb(97, 218, 251);
-  padding: 0.5rem 1rem;
-  min-width: auto;
-  background: ${props => props.theme.colors.gradientButton};
-  ${props => props.theme.mediaQueries.sm} {
-    display: flex;
-  }
-  &:hover {
-    background: ${props => props.theme.colors.gradientButton};
-  }
-`

src/components/Technologies/Technologies.tsx

@@ -12,7 +12,7 @@ export const Technologies: React.FC = () => {
         <TechnologiesTitle>{t('title')}</TechnologiesTitle>
         <TechnologiesSubtitle>{t('subtitle')}</TechnologiesSubtitle>
       </TechnologiesTextsContainer>
-      <TechnologiesList>
+      <TechnologiesList id="startNow">
         {technologiesImages.map(({ src, alt, key, href }) =>
         <TechnologiesListItem key={key}>
           <a href={href} target='_blank' rel="noreferrer">

src/index.css

@@ -26,6 +26,8 @@
     -webkit-text-size-adjust: 100%;
     max-width: 1280px;
     text-align: center;
+    scroll-behavior: smooth;
+
 }
 
 * {

src/layout/MainLayout/MainLayout.styles.tsx

@@ -5,6 +5,7 @@ export const MainWrapper = styled.div`
   flex-direction: column;
   min-height: 100vh;
   width: 100%;
+
 `
 
 export const Main = styled.main`

src/pages/About/About.styles.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const AboutWrapper = styled.div`
+  min-height: 100vh;
+  max-width: 1000px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+`

src/pages/About/About.tsx

@@ -1,19 +1,22 @@
 import { MainLayout } from '@/layout/MainLayout/MainLayout'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
+import { AboutWrapper } from './About.styles'
 
 export const About = () => {
   const { t } = useTranslation('about')
 
   return (
     <MainLayout>
-      <h1>{t('title')}</h1>
-      <h2>{t('subtitle')}</h2>
-      <p>{t('description.p1')}</p>
-      <p>{t('description.p2')}</p>
-      <p>{t('description.p3')}</p>
-      <h3>{t('conclusion')}</h3>
-      <Link to="/">{t('sendBack')}</Link>
+      <AboutWrapper>
+        <h1>{t('title')}</h1>
+        <h2>{t('subtitle')}</h2>
+        <p>{t('description.p1')}</p>
+        <p>{t('description.p2')}</p>
+        <p>{t('description.p3')}</p>
+        <h3>{t('conclusion')}</h3>
+        <Link to="/">{t('sendBack')}</Link>
+      </AboutWrapper>
     </MainLayout>
   )
 }