Deployment

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "BuniTek",
+  "name": "buni-tek",
   "private": true,
   "description": "BuniTek frontend app",
   "version": "0.1.0",

src/assets/styles/pages/about.scss

@@ -116,14 +116,10 @@
         position: relative; 
         line-height: 1.5;
        @include mediaSm {
-        padding: 20px;
-        padding-bottom: 60px;
-    }
-    @include mediaMd {
-        padding: 0 40px;
-        padding-bottom: 60px;
 
+        padding-bottom: 60px;
     }
+
 
         @include mediaSm {
         margin: 5px;
@@ -222,7 +218,7 @@
         &.absolute-right {
             position: absolute;
             top: 0;
-            left: 40;
+            left: 40%;
             z-index: -1;
             &-third-section{
                 position: absolute;
@@ -271,7 +267,7 @@
         position: relative;
         top: 30px;
         @include mediaSm {
-            font-size: 2em;
+            font-size: 1.4em;
 
         }
     }
@@ -402,10 +398,10 @@ body{
     padding-top: 30px;
     list-style-image: url(../../images/plus-solid-6.png);
     span{
-        font-size: 20px;
+        font-size: 18px;
         font-family: $mincho-font !important;
         @include mediaSm{
-            font-size: 1.2rem;
+            font-size: 17px;
         }
     }
 }
@@ -459,6 +455,7 @@ li span{
 
 .company__name{
     font-family: 'Archivo Black', sans-serif !important; 
+    font-size: 20px;
     @include mediaSm {
         font-size: 17px;
 

src/assets/styles/pages/contact.scss

@@ -5,6 +5,15 @@
 .contact {
   margin: auto;
 
+  &__form {
+    width: 80%;
+
+    @include mediaSm {
+      width: 100%;
+      margin: auto 10%;
+    }
+  }
+
   &__social {
     display: flex;
     justify-content: flex-start;
@@ -39,6 +48,7 @@
   &__heading {
     font-size: 2rem;
     font-family: $title-font !important;
+    font-weight: bold;
     color: $h-color;
     @include mediaSm{
       font-size: 1.2rem;

src/assets/styles/pages/home.scss

@@ -136,12 +136,22 @@
   }
   &__second{
     background: $dark;
+    height: 60vh;
     padding: 5vh 5vw 10vh 5vw;
+    @include mediaMd{
+      height: 80vh;
+    }
+    @include mediaSm{
+      height: 100vh;
+    }
     &--title{
       font-size: 1.8rem;
       text-align: center;
       font-family: $title-font !important;
       color: $border-color;
+      @include mediaSm{
+        margin-top: 5vh;
+      }
     }
     &__container {
       display: grid;

src/assets/styles/utils.scss

@@ -15,7 +15,7 @@ body {
 		font-size: 18px;
 	}
 	@media (min-width: $desktop-max) {
-		font-size: 16px;
+		font-size: 13px;
 	}
 	@media (min-width: $desktop-umax) {
 		font-size: 20px;

src/components/Blog/BlogItem.jsx

@@ -2,19 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LinkAnchor from '../Link';
 
-import HeartIcon from '../../assets/images/heart-regular.png';
-
 import './blogitem.scss';
 
-const BlogItem = ({ title, description, readMore, featured }) => (
+const BlogItem = ({
+  title, description, readMore, featured,
+}) => (
   <div className="blog__item">
-    <div className={featured ? "blog__item--grid" : ""}>
+    <div className={featured ? 'blog__item--grid' : ''}>
       {featured && (
-          <div className="blog__item--grid-item">
-          <img className="blog__item--featured" src={featured} />
-        </div>
+      <div className="blog__item--grid-item">
+        <img className="blog__item--featured" src={featured} alt="Featured" />
+      </div>
       )}
-      
+
       <div className="blog__item--grid-item">
         <div className="blog__item--heading">
           <LinkAnchor to={readMore}>
@@ -34,13 +34,15 @@ const BlogItem = ({ title, description, readMore, featured }) => (
         </div>
       </div>
     </div>
-    
+
   </div>
 );
 
 BlogItem.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
+  readMore: PropTypes.string.isRequired,
+  featured: PropTypes.bool.isRequired,
 };
 
 export default BlogItem;

src/components/Blog/blogitem.scss

@@ -9,9 +9,10 @@
         border: 5px solid $border-color;
         margin: 50px 10%;
         padding: 0;
+        min-height: 300px;
 
-        @include mediaSm{
-
+        @include mediaMd{
+            min-height: 400px;
         }
 
         &:hover{

src/components/Button/Button.scss

@@ -3,15 +3,15 @@
 .button{
     position: relative;
     width: 80%;
-    height: 20%;
+    height: 50px;
     padding: 1.4rem 3rem;
     border: none;
     outline: none;
     color: $white;
-    font-size: 1.4em;
+    font-size: 1.2em;
     border-radius: 50px;
     cursor: pointer;
-    margin:0 auto;
+    margin: 30px 10%;
     font-family: $title-font !important;
 
     &.is-primary{

src/components/Button/index.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/button-has-type */
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -9,15 +10,15 @@ const Button = ({
   children,
   style,
   bgColor,
-  htmlType
+  htmlType,
 }) => (
   <button
     type={htmlType}
     className={`button is-${type} has-bg-${bgColor}`}
     onClick={onClick}
     style={style}
   >
-  <div className="btn__overlay"></div>
+    <div className="btn__overlay" />
     {children}
   </button>
 );
@@ -28,14 +29,14 @@ Button.propTypes = {
   children: PropTypes.node.isRequired,
   style: PropTypes.instanceOf(Object),
   bgColor: PropTypes.string,
-  htmlType: PropTypes.string
+  htmlType: PropTypes.string,
 };
 
 Button.defaultProps = {
   type: 'primary',
   style: {},
   bgColor: 'primary',
-  htmlType: 'button'
+  htmlType: 'button',
 };
 
 export default Button;

src/components/Header/index.jsx

@@ -1,19 +1,19 @@
-import React, { useState } from "react"
-import { useSelector } from "react-redux"
-import { Link } from "gatsby"
-import styled from "styled-components"
-import { MenuOutlined } from "@ant-design/icons"
-import "./index.scss"
-import Sidebar from "./Sidebar"
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from 'gatsby';
+import styled from 'styled-components';
+import { MenuOutlined } from '@ant-design/icons';
+import './index.scss';
+import Sidebar from './Sidebar';
 
 const Logo = styled.img`
   width: 5rem;
   height: auto;
-`
+`;
 
 const Header = () => {
-  const [open, setOpen] = useState(false)
-  const logoUrl = useSelector(state => state.ui.logoUrl)
+  const [open, setOpen] = useState(false);
+  const logoUrl = useSelector((state) => state.ui.logoUrl);
 
   return (
     <header>
@@ -75,7 +75,7 @@ const Header = () => {
       </nav>
       <Sidebar open={open} setOpen={setOpen} />
     </header>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;

src/components/Header/index.scss

@@ -20,8 +20,6 @@
     padding-top: 5%;
     list-style: none;
 
-
-
     &--item {
       margin-right: 30px;
       a {
@@ -60,16 +58,14 @@
 
 .nav-wrapper {
   background: transparent !important;
-  @include mediaSm{
+  @include mediaSm {
     margin-left: 4vw;
   }
   &__container {
     margin: 1vw 5vw;
-    @include mediaSm{
-
+    @include mediaSm {
     }
   }
-
 }
 
 nav {
@@ -87,8 +83,8 @@ nav {
 
   .brand-logo {
     left: 2rem;
-    @include mediaSm{
-      left:3rem;
+    @include mediaSm {
+      left: 3rem;
     }
   }
 }
@@ -105,9 +101,9 @@ nav {
 }
 
 .nav__active {
-  //color: #0066ff;
   border-bottom: solid 2px $dark;
   transition: border-width 0.1s ease-in-out;
-  height: 45px;
+  height: 55px;
   width: auto;
+  padding-bottom: 60px !important;
 }

src/components/Team/MemberInfo.jsx

@@ -9,6 +9,7 @@ const Title = styled.h3`
   &:hover {
     text-decoration: underline;
     cursor: pointer;
+    transition: 0.5s ease-out;
   }
 `;
 

src/components/Team/TeamMember.jsx

@@ -7,23 +7,19 @@ import MemberInfo from './MemberInfo';
 import defaultProfile from '../../assets/images/user-profile.png';
 import './TeamMember.scss';
 
-const TeamMember = ({
-  profileUrl,
-  titles,
-  name,
-}) => {
-  const content = (
-    <MemberInfo
-      name={name}
-      title={titles}
-    />
-  );
+const TeamMember = ({ profileUrl, titles, name }) => {
+  const content = <MemberInfo name={name} title={titles} />;
   return (
     <div className="team__member">
-      <Popover placement="bottom" trigger="hover" content={content} title={name}>
-        <Button className="avatar__button" type="link" >
-           <Avatar url={profileUrl} />
-        </Button>   
+      <Popover
+        placement="bottom"
+        trigger="hover"
+        content={content}
+        title={name}
+      >
+        <Button className="avatar__button" type="link">
+          <Avatar url={profileUrl} />
+        </Button>
       </Popover>
     </div>
   );
@@ -36,8 +32,7 @@ TeamMember.propTypes = {
 };
 
 TeamMember.defaultProps = {
-  profileUrl:
-    defaultProfile,
+  profileUrl: defaultProfile,
 };
 
 export default TeamMember;