Create about us page

components/AboutUsInfoComponent.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import styled, { useTheme, keyframes, FontType, css } from 'styled-components'
+import { fontTypeCss } from '@/styles/sample-rhdevs-website/index.styled'
+
+const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`
+
+const InfoComponentText = styled.div<{ hasAnimation?: boolean; fontType: FontType }>`
+  ${fontTypeCss}
+  margin-top: 20px;
+  color: ${(props) => props.theme.palette.common.black};
+  ${(props) =>
+    props.hasAnimation &&
+    css`
+      animation-name: ${fadeIn};
+      animation-delay: 1s;
+      animation-duration: 1.5s;
+      animation-fill-mode: both;
+    `}
+`
+
+const InfoComponentTitle = styled.label<{ fontType: FontType }>`
+  ${fontTypeCss}
+  color: ${(props) => props.theme.palette.common.black};
+  background-color: ${(props) => props.theme.palette.common.white};
+  transition: background-image 0.4s ease-in-out;
+  width: fit-content;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+const InfoComponentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) => props.theme.palette.common.white};
+  cursor: default;
+  flex: 1 1 100%;
+  margin: 0 0 3% 0;
+`
+
+type Props = {
+  title: string
+  text: string
+  hasAnimation?: boolean
+  onClick?: React.MouseEventHandler<HTMLDivElement>
+}
+
+const defaultProps = {
+  hasAnimation: false,
+  onClick: undefined,
+}
+
+const InfoComponent = (props: Props) => {
+  const theme = useTheme()
+  const { h4, previewTitle } = { ...theme.typography.fontSize }
+  return (
+    <InfoComponentWrapper onClick={props.onClick}>
+      <InfoComponentTitle fontType={previewTitle}>{props.title}</InfoComponentTitle>
+      <InfoComponentText fontType={h4} hasAnimation={props.hasAnimation}>
+        {props.text}
+      </InfoComponentText>
+    </InfoComponentWrapper>
+  )
+}
+
+InfoComponent.defaultProps = defaultProps
+
+export default InfoComponent

components/NavBar.tsx

@@ -58,7 +58,7 @@ function NavBar() {
               key={index}
               text={item}
               isActive={item.toLowerCase() === pageName || (item === 'Home' && pageName === '')}
-              href={item === 'Home' ? '/' : `/${item.toLowerCase()}`}
+              href={item === 'Home' ? '/' : `/${item.toLowerCase().replace(/ /g, '')}`}
             />
           ))}
         </NavItemContainer>

components/SocialMediaLinks.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+
+const SocialMediaLinksContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin: 5px 100px 20px 100px;
+`
+const Icon = styled.div`
+  background-color: ${(props) => props.theme.palette.common.gray};
+  border-radius: 50%;
+  margin-left: 20px;
+  width: 50px;
+  height: 50px;
+`
+
+const StyledText = styled.text`
+  color: ${(props) => props.theme.palette.common.black};
+`
+
+const SocialMediaLinks = () => (
+  <SocialMediaLinksContainer>
+    <StyledText>Follow Us</StyledText>
+    <Icon />
+    <Icon />
+    <Icon />
+  </SocialMediaLinksContainer>
+)
+
+export default SocialMediaLinks

components/sample-rhdevs-website/PageSection.tsx

@@ -28,11 +28,9 @@ export const MainContainer = styled.div<{
   grid-template-columns: ${(props) => props.imgPosition && 'auto'} auto;
   grid-template-areas: '${(props) => props.imgPosition === 'left' && 'image'} text ${(props) =>
     props.imgPosition === 'right' && 'image'}';
-
   @media screen and (min-width: 700px) {
     gap: 5rem;
   }
-
   @media screen and (max-width: 700px) {
     display: flex;
     flex-direction: ${(props) => (props.responsiveReverse ? 'column-reverse' : 'column')};
@@ -48,7 +46,6 @@ export const ImageContainer = styled(Image)`
   max-height: 350px;
   max-width: 350px;
   grid-area: image;
-
   @media screen and (max-width: 700px) {
     margin: 0 0 40px 0;
     width: 80%;

components/sample-rhdevs-website/ProjectPreview.tsx

@@ -27,8 +27,8 @@ const PreviewText = styled.div<{ hasAnimation?: boolean; fontType: FontType }>`
 
 const PreviewTitle = styled.label<{ fontType: FontType }>`
   ${fontTypeCss}
-  color: ${(props) => props.theme.palette.common.white};
-  background-color: ${(props) => props.theme.palette.common.black};
+  color: ${(props) => props.theme.palette.common.black};
+  background-color: ${(props) => props.theme.palette.common.white};
   transition: background-image 0.4s ease-in-out;
   width: fit-content;
   &:hover {
@@ -39,7 +39,7 @@ const PreviewTitle = styled.label<{ fontType: FontType }>`
 const PreviewWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  background-color: ${(props) => props.theme.palette.common.black};
+  background-color: ${(props) => props.theme.palette.common.white};
   cursor: default;
   flex: 1 1 100%;
   margin: 0 0 3% 0;