Merge pull request #107 from Web-Dev-Path/feature/about-us-first-section

Feature/about us first section

Author: cherylli

.gitignore

@@ -1,4 +1,5 @@
 .next
+.idea
 node_modules
 .env
 .DS_Store

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
+  "jsxSingleQuote": true,
   "arrowParens": "avoid"
 }

CHANGELOG.md

@@ -44,4 +44,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
+- About page content (first section)
+
 ### Fixed
+
+- component file structure
+
+### Changed 
+
+- components folder structure
+- relative to absolute imports with aliases

components/Meta.js

@@ -1,10 +1,10 @@
 import { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import Container from './Container';
-import styles from '../styles/Nav.module.scss';
-import { linksNav } from '../utils/links';
 import { useRouter } from 'next/router';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/Nav.module.scss';
+import { linksNav } from '@/utils/links';
 
 export default function Nav() {
   const router = useRouter();
@@ -45,14 +45,14 @@ export default function Nav() {
         <div ref={containerRef}>
           <nav className={styles.nav}>
             <div className={styles.nav__logo}>
-              <Link href="/" passHref>
+              <Link href='/' passHref>
                 <a>
                   <Image
-                    src="/images/svg/logo.svg"
+                    src='/images/svg/logo.svg'
                     height={115}
                     width={180}
-                    alt="Logo"
-                    title="Go to the Homepage"
+                    alt='Logo'
+                    title='Go to the Homepage'
                   />
                 </a>
               </Link>
@@ -79,12 +79,12 @@ export default function Nav() {
                 }
               })}
               <li className={styles.nav__item}>
-                <Link href="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email">
+                <Link href='https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email'>
                   <a
                     className={`${styles.nav__button} ${
                       active ? styles.active : ''
                     }`}
-                    title="Join us"
+                    title='Join us'
                   >
                     Join us
                   </a>
@@ -96,7 +96,7 @@ export default function Nav() {
                 active ? styles.active : ''
               }`}
               onClick={() => setActive(active => !active)}
-              aria-label="toggle navigation"
+              aria-label='toggle navigation'
             >
               <span className={styles.nav__hamburger__bar}></span>
               <span className={styles.nav__hamburger__bar}></span>

components/Nav.js

@@ -0,0 +1,5 @@
+const Title = ({ title }) => {
+  return <h2>{title}</h2>;
+};
+
+export default Title;

components/Title.js

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import btnStyles from '../styles/ButtonLink.module.scss';
+import btnStyles from '@/styles/ButtonLink.module.scss';
 
 export default function ButtonLink({
   customClassName,

components/ButtonLink.js renamed to components/buttons/ButtonLink.js

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import styles from '../styles/Card.module.scss';
+import styles from '@/styles/Card.module.scss';
 
 export default function Card({
   image,
@@ -17,8 +17,8 @@ export default function Card({
           src={image}
           alt={altTag}
           className={styles.img}
-          layout="fill"
-          objectFit="cover"
+          layout='fill'
+          objectFit='cover'
         />
       </div>
       <h2 className={styles.title}>{title}</h2>

components/Card.js renamed to components/containers/Card.js

@@ -3,9 +3,9 @@ import { Pagination, Navigation } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
-import Card from './Card';
-import Container from './Container';
-import styles from '../styles/CardsColumns.module.scss';
+import Card from '@/components/containers/Card';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/CardsColumns.module.scss';
 
 export default function CardsColumns({
   images,

components/CardsColumns.js renamed to components/containers/CardsColumns.js

@@ -1,4 +1,4 @@
-import containerStyles from '../styles/Container.module.scss';
+import containerStyles from '@/styles/Container.module.scss';
 
 export default function Container({ className, children, styles }) {
   return (