Feature/about us first section

.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/Nav.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/Title.js

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

components/ButtonLink.js → components/buttons/ButtonLink.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/Card.js → components/containers/Card.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/CardsColumns.js → components/containers/CardsColumns.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/Container.js → components/containers/Container.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 (

components/RevealContentContainer.js → components/containers/RevealContentContainer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useIntersect } from '../hooks/useIntersect';
-import styles from '../styles/RevealContainer.module.scss';
+import { useIntersect } from '@/hooks/useIntersect';
+import styles from '@/styles/RevealContainer.module.scss';
 
 const RevealContentContainer = ({ children }) => {
  const [ref, entry] = useIntersect({ threshold: 0.15 });

components/TwoColumn.js → components/containers/TwoColumn.js

@@ -1,7 +1,7 @@
 import Image from 'next/image';
-import ButtonLink from './ButtonLink';
-import Container from './Container';
-import styles from '../styles/TwoColumn.module.scss';
+import ButtonLink from '@/components/buttons/ButtonLink';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/TwoColumn.module.scss';
 
 export default function TwoColumn({
  image,
@@ -32,10 +32,12 @@ export default function TwoColumn({
  styles={{ flexDirection: rowOrder }}
  >
  <div className={styles.inner__content}>
- <h2 className={styles.title} style={{ color: color }}>
- {title}
- </h2>
- <p className={styles.content}>{content}</p>
+ {title && (
+ <h2 className={styles.title} style={{ color: color }}>
+ {title}
+ </h2>
+ )}
+ <div className={styles.content}>{content}</div>
  {link && (
  <ButtonLink link={link} customClassName={customBtnClass}>
  {linkText}
@@ -48,8 +50,7 @@ export default function TwoColumn({
  src={image}
  alt={altTag}
  className={styles.img}
- layout="fill"
- objectFit="cover"
+ layout='fill'
  priority
  />
  </div>

components/Bracket.js → components/decorations/Bracket.js

@@ -3,14 +3,14 @@ export default function Bracket(props) {
 
  return (
  <svg
- width="179"
- height="366"
- viewBox="0 0 179 366"
- xmlns="http://www.w3.org/2000/svg"
+ width='179'
+ height='366'
+ viewBox='0 0 179 366'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z"
+ d='M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z'
  fill={fill}
  />
  </svg>

components/Stick.js → components/decorations/Stick.js

@@ -3,14 +3,14 @@ export default function Stick(props) {
 
  return (
  <svg
- width="172"
- height="412"
- viewBox="0 0 172 412"
- xmlns="http://www.w3.org/2000/svg"
+ width='172'
+ height='412'
+ viewBox='0 0 172 412'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z"
+ d='M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z'
  fill={fill}
  />
  </svg>

components/Footer.js → components/layout/Footer.js

@@ -1,16 +1,16 @@
 import Link from 'next/link';
-import footerStyles from '../styles/Footer.module.scss';
-import { linksNav } from '../utils/links';
-import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
+import footerStyles from '@/styles/Footer.module.scss';
+import { linksNav } from '@/utils/links';
+import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
-import Container from './Container';
+import Container from '@/components/containers/Container';
 
 export default function Footer() {
  return (
  <footer className={footerStyles.footer}>
  <NewsletterSubscribe />
  <Container className={footerStyles.footer__inner}>
- <nav className={footerStyles.footer__nav} aria-label="Main">
+ <nav className={footerStyles.footer__nav} aria-label='Main'>
  <ul className={footerStyles.footer__navList}>
  {linksNav.map(link => (
  <li className={footerStyles.footer__navItem} key={link.text}>
@@ -21,13 +21,13 @@ export default function Footer() {
  ))}
  </ul>
  </nav>
- <Link href="/">
- <a className={footerStyles.footer__logo} title="Go to the Homepage">
+ <Link href='/'>
+ <a className={footerStyles.footer__logo} title='Go to the Homepage'>
  <Image
- src="/images/svg/logo.svg"
+ src='/images/svg/logo.svg'
  height={250}
  width={250}
- alt="Logo"
+ alt='Logo'
  />
  </a>
  </Link>

components/Hero.js → components/layout/Hero.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import Image from 'next/image';
-import Nav from './Nav';
-import Container from './Container';
-import styles from '../styles/Hero.module.scss';
+import Nav from '@/components/Nav';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/Hero.module.scss';
 
 export default function Hero({
  title,
@@ -29,9 +29,9 @@ export default function Hero({
  src={imgBg}
  alt={imgAlt}
  className={styles.imageBg}
- layout="fill"
- objectFit="cover"
- objectPosition="center"
+ layout='fill'
+ objectFit='cover'
+ objectPosition='center'
  priority
  />
  <Container className={styles.header__content}>

components/Layout.js → components/layout/Layout.js

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
-import { heroOptions } from '../utils/hero-options';
-import Hero from './Hero';
-import Meta from './Meta';
-import Footer from './Footer';
-import styles from '../styles/Layout.module.scss';
+import { heroOptions } from '@/utils/hero-options';
+import Hero from '@/components/layout/Hero';
+import Meta from '@/components/layout/Meta';
+import Footer from '@/components/layout/Footer';
+import styles from '@/styles/Layout.module.scss';
 
 export default function Layout({ children }) {
  const router = useRouter();

.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/Nav.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/Title.js

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

components/ButtonLink.js → components/buttons/ButtonLink.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/Card.js → components/containers/Card.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/CardsColumns.js → components/containers/CardsColumns.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/Container.js → components/containers/Container.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 (

components/RevealContentContainer.js → components/containers/RevealContentContainer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useIntersect } from '../hooks/useIntersect';
-import styles from '../styles/RevealContainer.module.scss';
+import { useIntersect } from '@/hooks/useIntersect';
+import styles from '@/styles/RevealContainer.module.scss';
 
 const RevealContentContainer = ({ children }) => {
  const [ref, entry] = useIntersect({ threshold: 0.15 });

components/TwoColumn.js → components/containers/TwoColumn.js

@@ -1,7 +1,7 @@
 import Image from 'next/image';
-import ButtonLink from './ButtonLink';
-import Container from './Container';
-import styles from '../styles/TwoColumn.module.scss';
+import ButtonLink from '@/components/buttons/ButtonLink';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/TwoColumn.module.scss';
 
 export default function TwoColumn({
  image,
@@ -32,10 +32,12 @@ export default function TwoColumn({
  styles={{ flexDirection: rowOrder }}
  >
  <div className={styles.inner__content}>
- <h2 className={styles.title} style={{ color: color }}>
- {title}
- </h2>
- <p className={styles.content}>{content}</p>
+ {title && (
+ <h2 className={styles.title} style={{ color: color }}>
+ {title}
+ </h2>
+ )}
+ <div className={styles.content}>{content}</div>
  {link && (
  <ButtonLink link={link} customClassName={customBtnClass}>
  {linkText}
@@ -48,8 +50,7 @@ export default function TwoColumn({
  src={image}
  alt={altTag}
  className={styles.img}
- layout="fill"
- objectFit="cover"
+ layout='fill'
  priority
  />
  </div>

components/Bracket.js → components/decorations/Bracket.js

@@ -3,14 +3,14 @@ export default function Bracket(props) {
 
  return (
  <svg
- width="179"
- height="366"
- viewBox="0 0 179 366"
- xmlns="http://www.w3.org/2000/svg"
+ width='179'
+ height='366'
+ viewBox='0 0 179 366'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z"
+ d='M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z'
  fill={fill}
  />
  </svg>

components/Stick.js → components/decorations/Stick.js

@@ -3,14 +3,14 @@ export default function Stick(props) {
 
  return (
  <svg
- width="172"
- height="412"
- viewBox="0 0 172 412"
- xmlns="http://www.w3.org/2000/svg"
+ width='172'
+ height='412'
+ viewBox='0 0 172 412'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z"
+ d='M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z'
  fill={fill}
  />
  </svg>

components/Footer.js → components/layout/Footer.js

@@ -1,16 +1,16 @@
 import Link from 'next/link';
-import footerStyles from '../styles/Footer.module.scss';
-import { linksNav } from '../utils/links';
-import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
+import footerStyles from '@/styles/Footer.module.scss';
+import { linksNav } from '@/utils/links';
+import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
-import Container from './Container';
+import Container from '@/components/containers/Container';
 
 export default function Footer() {
  return (
  <footer className={footerStyles.footer}>
  <NewsletterSubscribe />
  <Container className={footerStyles.footer__inner}>
- <nav className={footerStyles.footer__nav} aria-label="Main">
+ <nav className={footerStyles.footer__nav} aria-label='Main'>
  <ul className={footerStyles.footer__navList}>
  {linksNav.map(link => (
  <li className={footerStyles.footer__navItem} key={link.text}>
@@ -21,13 +21,13 @@ export default function Footer() {
  ))}
  </ul>
  </nav>
- <Link href="/">
- <a className={footerStyles.footer__logo} title="Go to the Homepage">
+ <Link href='/'>
+ <a className={footerStyles.footer__logo} title='Go to the Homepage'>
  <Image
- src="/images/svg/logo.svg"
+ src='/images/svg/logo.svg'
  height={250}
  width={250}
- alt="Logo"
+ alt='Logo'
  />
  </a>
  </Link>

components/Hero.js → components/layout/Hero.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import Image from 'next/image';
-import Nav from './Nav';
-import Container from './Container';
-import styles from '../styles/Hero.module.scss';
+import Nav from '@/components/Nav';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/Hero.module.scss';
 
 export default function Hero({
  title,
@@ -29,9 +29,9 @@ export default function Hero({
  src={imgBg}
  alt={imgAlt}
  className={styles.imageBg}
- layout="fill"
- objectFit="cover"
- objectPosition="center"
+ layout='fill'
+ objectFit='cover'
+ objectPosition='center'
  priority
  />
  <Container className={styles.header__content}>

components/Layout.js → components/layout/Layout.js

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
-import { heroOptions } from '../utils/hero-options';
-import Hero from './Hero';
-import Meta from './Meta';
-import Footer from './Footer';
-import styles from '../styles/Layout.module.scss';
+import { heroOptions } from '@/utils/hero-options';
+import Hero from '@/components/layout/Hero';
+import Meta from '@/components/layout/Meta';
+import Footer from '@/components/layout/Footer';
+import styles from '@/styles/Layout.module.scss';
 
 export default function Layout({ children }) {
  const router = useRouter();

.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/Nav.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/Title.js

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

components/ButtonLink.js → components/buttons/ButtonLink.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/Card.js → components/containers/Card.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/CardsColumns.js → components/containers/CardsColumns.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/Container.js → components/containers/Container.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 (

components/RevealContentContainer.js → components/containers/RevealContentContainer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useIntersect } from '../hooks/useIntersect';
-import styles from '../styles/RevealContainer.module.scss';
+import { useIntersect } from '@/hooks/useIntersect';
+import styles from '@/styles/RevealContainer.module.scss';
 
 const RevealContentContainer = ({ children }) => {
  const [ref, entry] = useIntersect({ threshold: 0.15 });

components/TwoColumn.js → components/containers/TwoColumn.js

@@ -1,7 +1,7 @@
 import Image from 'next/image';
-import ButtonLink from './ButtonLink';
-import Container from './Container';
-import styles from '../styles/TwoColumn.module.scss';
+import ButtonLink from '@/components/buttons/ButtonLink';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/TwoColumn.module.scss';
 
 export default function TwoColumn({
  image,
@@ -32,10 +32,12 @@ export default function TwoColumn({
  styles={{ flexDirection: rowOrder }}
  >
  <div className={styles.inner__content}>
- <h2 className={styles.title} style={{ color: color }}>
- {title}
- </h2>
- <p className={styles.content}>{content}</p>
+ {title && (
+ <h2 className={styles.title} style={{ color: color }}>
+ {title}
+ </h2>
+ )}
+ <div className={styles.content}>{content}</div>
  {link && (
  <ButtonLink link={link} customClassName={customBtnClass}>
  {linkText}
@@ -48,8 +50,7 @@ export default function TwoColumn({
  src={image}
  alt={altTag}
  className={styles.img}
- layout="fill"
- objectFit="cover"
+ layout='fill'
  priority
  />
  </div>

components/Bracket.js → components/decorations/Bracket.js

@@ -3,14 +3,14 @@ export default function Bracket(props) {
 
  return (
  <svg
- width="179"
- height="366"
- viewBox="0 0 179 366"
- xmlns="http://www.w3.org/2000/svg"
+ width='179'
+ height='366'
+ viewBox='0 0 179 366'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z"
+ d='M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z'
  fill={fill}
  />
  </svg>

components/Stick.js → components/decorations/Stick.js

@@ -3,14 +3,14 @@ export default function Stick(props) {
 
  return (
  <svg
- width="172"
- height="412"
- viewBox="0 0 172 412"
- xmlns="http://www.w3.org/2000/svg"
+ width='172'
+ height='412'
+ viewBox='0 0 172 412'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z"
+ d='M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z'
  fill={fill}
  />
  </svg>

components/Footer.js → components/layout/Footer.js

@@ -1,16 +1,16 @@
 import Link from 'next/link';
-import footerStyles from '../styles/Footer.module.scss';
-import { linksNav } from '../utils/links';
-import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
+import footerStyles from '@/styles/Footer.module.scss';
+import { linksNav } from '@/utils/links';
+import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
-import Container from './Container';
+import Container from '@/components/containers/Container';
 
 export default function Footer() {
  return (
  <footer className={footerStyles.footer}>
  <NewsletterSubscribe />
  <Container className={footerStyles.footer__inner}>
- <nav className={footerStyles.footer__nav} aria-label="Main">
+ <nav className={footerStyles.footer__nav} aria-label='Main'>
  <ul className={footerStyles.footer__navList}>
  {linksNav.map(link => (
  <li className={footerStyles.footer__navItem} key={link.text}>
@@ -21,13 +21,13 @@ export default function Footer() {
  ))}
  </ul>
  </nav>
- <Link href="/">
- <a className={footerStyles.footer__logo} title="Go to the Homepage">
+ <Link href='/'>
+ <a className={footerStyles.footer__logo} title='Go to the Homepage'>
  <Image
- src="/images/svg/logo.svg"
+ src='/images/svg/logo.svg'
  height={250}
  width={250}
- alt="Logo"
+ alt='Logo'
  />
  </a>
  </Link>

components/Hero.js → components/layout/Hero.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import Image from 'next/image';
-import Nav from './Nav';
-import Container from './Container';
-import styles from '../styles/Hero.module.scss';
+import Nav from '@/components/Nav';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/Hero.module.scss';
 
 export default function Hero({
  title,
@@ -29,9 +29,9 @@ export default function Hero({
  src={imgBg}
  alt={imgAlt}
  className={styles.imageBg}
- layout="fill"
- objectFit="cover"
- objectPosition="center"
+ layout='fill'
+ objectFit='cover'
+ objectPosition='center'
  priority
  />
  <Container className={styles.header__content}>

components/Layout.js → components/layout/Layout.js

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
-import { heroOptions } from '../utils/hero-options';
-import Hero from './Hero';
-import Meta from './Meta';
-import Footer from './Footer';
-import styles from '../styles/Layout.module.scss';
+import { heroOptions } from '@/utils/hero-options';
+import Hero from '@/components/layout/Hero';
+import Meta from '@/components/layout/Meta';
+import Footer from '@/components/layout/Footer';
+import styles from '@/styles/Layout.module.scss';
 
 export default function Layout({ children }) {
  const router = useRouter();

.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/Nav.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/Title.js

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

components/ButtonLink.js → components/buttons/ButtonLink.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/Card.js → components/containers/Card.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/CardsColumns.js → components/containers/CardsColumns.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/Container.js → components/containers/Container.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 (

components/RevealContentContainer.js → components/containers/RevealContentContainer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useIntersect } from '../hooks/useIntersect';
-import styles from '../styles/RevealContainer.module.scss';
+import { useIntersect } from '@/hooks/useIntersect';
+import styles from '@/styles/RevealContainer.module.scss';
 
 const RevealContentContainer = ({ children }) => {
  const [ref, entry] = useIntersect({ threshold: 0.15 });

components/TwoColumn.js → components/containers/TwoColumn.js

@@ -1,7 +1,7 @@
 import Image from 'next/image';
-import ButtonLink from './ButtonLink';
-import Container from './Container';
-import styles from '../styles/TwoColumn.module.scss';
+import ButtonLink from '@/components/buttons/ButtonLink';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/TwoColumn.module.scss';
 
 export default function TwoColumn({
  image,
@@ -32,10 +32,12 @@ export default function TwoColumn({
  styles={{ flexDirection: rowOrder }}
  >
  <div className={styles.inner__content}>
- <h2 className={styles.title} style={{ color: color }}>
- {title}
- </h2>
- <p className={styles.content}>{content}</p>
+ {title && (
+ <h2 className={styles.title} style={{ color: color }}>
+ {title}
+ </h2>
+ )}
+ <div className={styles.content}>{content}</div>
  {link && (
  <ButtonLink link={link} customClassName={customBtnClass}>
  {linkText}
@@ -48,8 +50,7 @@ export default function TwoColumn({
  src={image}
  alt={altTag}
  className={styles.img}
- layout="fill"
- objectFit="cover"
+ layout='fill'
  priority
  />
  </div>

components/Bracket.js → components/decorations/Bracket.js

@@ -3,14 +3,14 @@ export default function Bracket(props) {
 
  return (
  <svg
- width="179"
- height="366"
- viewBox="0 0 179 366"
- xmlns="http://www.w3.org/2000/svg"
+ width='179'
+ height='366'
+ viewBox='0 0 179 366'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z"
+ d='M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z'
  fill={fill}
  />
  </svg>

components/Stick.js → components/decorations/Stick.js

@@ -3,14 +3,14 @@ export default function Stick(props) {
 
  return (
  <svg
- width="172"
- height="412"
- viewBox="0 0 172 412"
- xmlns="http://www.w3.org/2000/svg"
+ width='172'
+ height='412'
+ viewBox='0 0 172 412'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z"
+ d='M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z'
  fill={fill}
  />
  </svg>

components/Footer.js → components/layout/Footer.js

@@ -1,16 +1,16 @@
 import Link from 'next/link';
-import footerStyles from '../styles/Footer.module.scss';
-import { linksNav } from '../utils/links';
-import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
+import footerStyles from '@/styles/Footer.module.scss';
+import { linksNav } from '@/utils/links';
+import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
-import Container from './Container';
+import Container from '@/components/containers/Container';
 
 export default function Footer() {
  return (
  <footer className={footerStyles.footer}>
  <NewsletterSubscribe />
  <Container className={footerStyles.footer__inner}>
- <nav className={footerStyles.footer__nav} aria-label="Main">
+ <nav className={footerStyles.footer__nav} aria-label='Main'>
  <ul className={footerStyles.footer__navList}>
  {linksNav.map(link => (
  <li className={footerStyles.footer__navItem} key={link.text}>
@@ -21,13 +21,13 @@ export default function Footer() {
  ))}
  </ul>
  </nav>
- <Link href="/">
- <a className={footerStyles.footer__logo} title="Go to the Homepage">
+ <Link href='/'>
+ <a className={footerStyles.footer__logo} title='Go to the Homepage'>
  <Image
- src="/images/svg/logo.svg"
+ src='/images/svg/logo.svg'
  height={250}
  width={250}
- alt="Logo"
+ alt='Logo'
  />
  </a>
  </Link>

components/Hero.js → components/layout/Hero.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import Image from 'next/image';
-import Nav from './Nav';
-import Container from './Container';
-import styles from '../styles/Hero.module.scss';
+import Nav from '@/components/Nav';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/Hero.module.scss';
 
 export default function Hero({
  title,
@@ -29,9 +29,9 @@ export default function Hero({
  src={imgBg}
  alt={imgAlt}
  className={styles.imageBg}
- layout="fill"
- objectFit="cover"
- objectPosition="center"
+ layout='fill'
+ objectFit='cover'
+ objectPosition='center'
  priority
  />
  <Container className={styles.header__content}>

components/Layout.js → components/layout/Layout.js

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
-import { heroOptions } from '../utils/hero-options';
-import Hero from './Hero';
-import Meta from './Meta';
-import Footer from './Footer';
-import styles from '../styles/Layout.module.scss';
+import { heroOptions } from '@/utils/hero-options';
+import Hero from '@/components/layout/Hero';
+import Meta from '@/components/layout/Meta';
+import Footer from '@/components/layout/Footer';
+import styles from '@/styles/Layout.module.scss';
 
 export default function Layout({ children }) {
  const router = useRouter();

.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/Nav.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/Title.js

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

components/ButtonLink.js → components/buttons/ButtonLink.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/Card.js → components/containers/Card.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/CardsColumns.js → components/containers/CardsColumns.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/Container.js → components/containers/Container.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 (

components/RevealContentContainer.js → components/containers/RevealContentContainer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useIntersect } from '../hooks/useIntersect';
-import styles from '../styles/RevealContainer.module.scss';
+import { useIntersect } from '@/hooks/useIntersect';
+import styles from '@/styles/RevealContainer.module.scss';
 
 const RevealContentContainer = ({ children }) => {
  const [ref, entry] = useIntersect({ threshold: 0.15 });

components/TwoColumn.js → components/containers/TwoColumn.js

@@ -1,7 +1,7 @@
 import Image from 'next/image';
-import ButtonLink from './ButtonLink';
-import Container from './Container';
-import styles from '../styles/TwoColumn.module.scss';
+import ButtonLink from '@/components/buttons/ButtonLink';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/TwoColumn.module.scss';
 
 export default function TwoColumn({
  image,
@@ -32,10 +32,12 @@ export default function TwoColumn({
  styles={{ flexDirection: rowOrder }}
  >
  <div className={styles.inner__content}>
- <h2 className={styles.title} style={{ color: color }}>
- {title}
- </h2>
- <p className={styles.content}>{content}</p>
+ {title && (
+ <h2 className={styles.title} style={{ color: color }}>
+ {title}
+ </h2>
+ )}
+ <div className={styles.content}>{content}</div>
  {link && (
  <ButtonLink link={link} customClassName={customBtnClass}>
  {linkText}
@@ -48,8 +50,7 @@ export default function TwoColumn({
  src={image}
  alt={altTag}
  className={styles.img}
- layout="fill"
- objectFit="cover"
+ layout='fill'
  priority
  />
  </div>

components/Bracket.js → components/decorations/Bracket.js

@@ -3,14 +3,14 @@ export default function Bracket(props) {
 
  return (
  <svg
- width="179"
- height="366"
- viewBox="0 0 179 366"
- xmlns="http://www.w3.org/2000/svg"
+ width='179'
+ height='366'
+ viewBox='0 0 179 366'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z"
+ d='M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z'
  fill={fill}
  />
  </svg>

components/Stick.js → components/decorations/Stick.js

@@ -3,14 +3,14 @@ export default function Stick(props) {
 
  return (
  <svg
- width="172"
- height="412"
- viewBox="0 0 172 412"
- xmlns="http://www.w3.org/2000/svg"
+ width='172'
+ height='412'
+ viewBox='0 0 172 412'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z"
+ d='M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z'
  fill={fill}
  />
  </svg>

components/Footer.js → components/layout/Footer.js

@@ -1,16 +1,16 @@
 import Link from 'next/link';
-import footerStyles from '../styles/Footer.module.scss';
-import { linksNav } from '../utils/links';
-import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
+import footerStyles from '@/styles/Footer.module.scss';
+import { linksNav } from '@/utils/links';
+import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
-import Container from './Container';
+import Container from '@/components/containers/Container';
 
 export default function Footer() {
  return (
  <footer className={footerStyles.footer}>
  <NewsletterSubscribe />
  <Container className={footerStyles.footer__inner}>
- <nav className={footerStyles.footer__nav} aria-label="Main">
+ <nav className={footerStyles.footer__nav} aria-label='Main'>
  <ul className={footerStyles.footer__navList}>
  {linksNav.map(link => (
  <li className={footerStyles.footer__navItem} key={link.text}>
@@ -21,13 +21,13 @@ export default function Footer() {
  ))}
  </ul>
  </nav>
- <Link href="/">
- <a className={footerStyles.footer__logo} title="Go to the Homepage">
+ <Link href='/'>
+ <a className={footerStyles.footer__logo} title='Go to the Homepage'>
  <Image
- src="/images/svg/logo.svg"
+ src='/images/svg/logo.svg'
  height={250}
  width={250}
- alt="Logo"
+ alt='Logo'
  />
  </a>
  </Link>

components/Hero.js → components/layout/Hero.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import Image from 'next/image';
-import Nav from './Nav';
-import Container from './Container';
-import styles from '../styles/Hero.module.scss';
+import Nav from '@/components/Nav';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/Hero.module.scss';
 
 export default function Hero({
  title,
@@ -29,9 +29,9 @@ export default function Hero({
  src={imgBg}
  alt={imgAlt}
  className={styles.imageBg}
- layout="fill"
- objectFit="cover"
- objectPosition="center"
+ layout='fill'
+ objectFit='cover'
+ objectPosition='center'
  priority
  />
  <Container className={styles.header__content}>

components/Layout.js → components/layout/Layout.js

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
-import { heroOptions } from '../utils/hero-options';
-import Hero from './Hero';
-import Meta from './Meta';
-import Footer from './Footer';
-import styles from '../styles/Layout.module.scss';
+import { heroOptions } from '@/utils/hero-options';
+import Hero from '@/components/layout/Hero';
+import Meta from '@/components/layout/Meta';
+import Footer from '@/components/layout/Footer';
+import styles from '@/styles/Layout.module.scss';
 
 export default function Layout({ children }) {
  const router = useRouter();

.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/Nav.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/Title.js

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

components/ButtonLink.js → components/buttons/ButtonLink.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/Card.js → components/containers/Card.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/CardsColumns.js → components/containers/CardsColumns.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/Container.js → components/containers/Container.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 (

components/RevealContentContainer.js → components/containers/RevealContentContainer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useIntersect } from '../hooks/useIntersect';
-import styles from '../styles/RevealContainer.module.scss';
+import { useIntersect } from '@/hooks/useIntersect';
+import styles from '@/styles/RevealContainer.module.scss';
 
 const RevealContentContainer = ({ children }) => {
  const [ref, entry] = useIntersect({ threshold: 0.15 });

components/TwoColumn.js → components/containers/TwoColumn.js

@@ -1,7 +1,7 @@
 import Image from 'next/image';
-import ButtonLink from './ButtonLink';
-import Container from './Container';
-import styles from '../styles/TwoColumn.module.scss';
+import ButtonLink from '@/components/buttons/ButtonLink';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/TwoColumn.module.scss';
 
 export default function TwoColumn({
  image,
@@ -32,10 +32,12 @@ export default function TwoColumn({
  styles={{ flexDirection: rowOrder }}
  >
  <div className={styles.inner__content}>
- <h2 className={styles.title} style={{ color: color }}>
- {title}
- </h2>
- <p className={styles.content}>{content}</p>
+ {title && (
+ <h2 className={styles.title} style={{ color: color }}>
+ {title}
+ </h2>
+ )}
+ <div className={styles.content}>{content}</div>
  {link && (
  <ButtonLink link={link} customClassName={customBtnClass}>
  {linkText}
@@ -48,8 +50,7 @@ export default function TwoColumn({
  src={image}
  alt={altTag}
  className={styles.img}
- layout="fill"
- objectFit="cover"
+ layout='fill'
  priority
  />
  </div>

components/Bracket.js → components/decorations/Bracket.js

@@ -3,14 +3,14 @@ export default function Bracket(props) {
 
  return (
  <svg
- width="179"
- height="366"
- viewBox="0 0 179 366"
- xmlns="http://www.w3.org/2000/svg"
+ width='179'
+ height='366'
+ viewBox='0 0 179 366'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z"
+ d='M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z'
  fill={fill}
  />
  </svg>

components/Stick.js → components/decorations/Stick.js

@@ -3,14 +3,14 @@ export default function Stick(props) {
 
  return (
  <svg
- width="172"
- height="412"
- viewBox="0 0 172 412"
- xmlns="http://www.w3.org/2000/svg"
+ width='172'
+ height='412'
+ viewBox='0 0 172 412'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z"
+ d='M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z'
  fill={fill}
  />
  </svg>

components/Footer.js → components/layout/Footer.js

@@ -1,16 +1,16 @@
 import Link from 'next/link';
-import footerStyles from '../styles/Footer.module.scss';
-import { linksNav } from '../utils/links';
-import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
+import footerStyles from '@/styles/Footer.module.scss';
+import { linksNav } from '@/utils/links';
+import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
-import Container from './Container';
+import Container from '@/components/containers/Container';
 
 export default function Footer() {
  return (
  <footer className={footerStyles.footer}>
  <NewsletterSubscribe />
  <Container className={footerStyles.footer__inner}>
- <nav className={footerStyles.footer__nav} aria-label="Main">
+ <nav className={footerStyles.footer__nav} aria-label='Main'>
  <ul className={footerStyles.footer__navList}>
  {linksNav.map(link => (
  <li className={footerStyles.footer__navItem} key={link.text}>
@@ -21,13 +21,13 @@ export default function Footer() {
  ))}
  </ul>
  </nav>
- <Link href="/">
- <a className={footerStyles.footer__logo} title="Go to the Homepage">
+ <Link href='/'>
+ <a className={footerStyles.footer__logo} title='Go to the Homepage'>
  <Image
- src="/images/svg/logo.svg"
+ src='/images/svg/logo.svg'
  height={250}
  width={250}
- alt="Logo"
+ alt='Logo'
  />
  </a>
  </Link>

components/Hero.js → components/layout/Hero.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import Image from 'next/image';
-import Nav from './Nav';
-import Container from './Container';
-import styles from '../styles/Hero.module.scss';
+import Nav from '@/components/Nav';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/Hero.module.scss';
 
 export default function Hero({
  title,
@@ -29,9 +29,9 @@ export default function Hero({
  src={imgBg}
  alt={imgAlt}
  className={styles.imageBg}
- layout="fill"
- objectFit="cover"
- objectPosition="center"
+ layout='fill'
+ objectFit='cover'
+ objectPosition='center'
  priority
  />
  <Container className={styles.header__content}>

components/Layout.js → components/layout/Layout.js

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
-import { heroOptions } from '../utils/hero-options';
-import Hero from './Hero';
-import Meta from './Meta';
-import Footer from './Footer';
-import styles from '../styles/Layout.module.scss';
+import { heroOptions } from '@/utils/hero-options';
+import Hero from '@/components/layout/Hero';
+import Meta from '@/components/layout/Meta';
+import Footer from '@/components/layout/Footer';
+import styles from '@/styles/Layout.module.scss';
 
 export default function Layout({ children }) {
  const router = useRouter();

.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/Nav.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/Title.js

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

components/ButtonLink.js → components/buttons/ButtonLink.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/Card.js → components/containers/Card.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/CardsColumns.js → components/containers/CardsColumns.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/Container.js → components/containers/Container.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 (

components/RevealContentContainer.js → components/containers/RevealContentContainer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useIntersect } from '../hooks/useIntersect';
-import styles from '../styles/RevealContainer.module.scss';
+import { useIntersect } from '@/hooks/useIntersect';
+import styles from '@/styles/RevealContainer.module.scss';
 
 const RevealContentContainer = ({ children }) => {
  const [ref, entry] = useIntersect({ threshold: 0.15 });

components/TwoColumn.js → components/containers/TwoColumn.js

@@ -1,7 +1,7 @@
 import Image from 'next/image';
-import ButtonLink from './ButtonLink';
-import Container from './Container';
-import styles from '../styles/TwoColumn.module.scss';
+import ButtonLink from '@/components/buttons/ButtonLink';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/TwoColumn.module.scss';
 
 export default function TwoColumn({
  image,
@@ -32,10 +32,12 @@ export default function TwoColumn({
  styles={{ flexDirection: rowOrder }}
  >
  <div className={styles.inner__content}>
- <h2 className={styles.title} style={{ color: color }}>
- {title}
- </h2>
- <p className={styles.content}>{content}</p>
+ {title && (
+ <h2 className={styles.title} style={{ color: color }}>
+ {title}
+ </h2>
+ )}
+ <div className={styles.content}>{content}</div>
  {link && (
  <ButtonLink link={link} customClassName={customBtnClass}>
  {linkText}
@@ -48,8 +50,7 @@ export default function TwoColumn({
  src={image}
  alt={altTag}
  className={styles.img}
- layout="fill"
- objectFit="cover"
+ layout='fill'
  priority
  />
  </div>

components/Bracket.js → components/decorations/Bracket.js

@@ -3,14 +3,14 @@ export default function Bracket(props) {
 
  return (
  <svg
- width="179"
- height="366"
- viewBox="0 0 179 366"
- xmlns="http://www.w3.org/2000/svg"
+ width='179'
+ height='366'
+ viewBox='0 0 179 366'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z"
+ d='M124.414 81.1248C124.414 23.5658 96.8124 2.33325e-05 40.1669 1.83804e-05C33.9874 1.78402e-05 28.4258 0.625658 23.8941 1.66838C7.20943 5.63078 1.11774e-07 15.641 -9.27436e-07 27.5282C-2.03957e-06 40.2496 5.76754 47.7573 17.3026 50.8855C19.7745 51.7197 22.4522 52.1368 25.13 52.3453C46.5524 54.8479 54.5857 64.6496 54.5857 89.4667L54.5857 125.754C54.5857 155.993 75.5961 175.179 113.085 179.35L113.085 187.067C75.5961 191.238 54.5857 210.424 54.5857 240.663L54.5857 276.533C54.5857 301.559 46.5523 311.361 25.13 313.655C22.2462 314.072 19.5684 314.697 17.0966 315.115C5.56154 318.451 -2.70171e-05 325.959 -2.8111e-05 338.472C-2.90955e-05 349.733 6.38547 359.535 21.2163 363.706C26.3659 365.166 32.7514 366 40.1668 366C96.8124 366 124.414 342.434 124.414 285.084L124.414 258.598C124.414 234.824 133.066 222.728 155.724 218.349C170.967 215.429 179 205.21 179 183.313C179 163.501 171.173 150.779 155.724 148.068C132.654 143.689 124.414 131.593 124.414 107.819L124.414 81.1248Z'
  fill={fill}
  />
  </svg>

components/Stick.js → components/decorations/Stick.js

@@ -3,14 +3,14 @@ export default function Stick(props) {
 
  return (
  <svg
- width="172"
- height="412"
- viewBox="0 0 172 412"
- xmlns="http://www.w3.org/2000/svg"
+ width='172'
+ height='412'
+ viewBox='0 0 172 412'
+ xmlns='http://www.w3.org/2000/svg'
  className={className}
  >
  <path
- d="M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z"
+ d='M36.5812 412C56.8032 412 68.1638 402.875 74.2985 382.343L169.955 49.0476C171.318 44.4851 172 40.1506 172 34.9037C172 13.9158 157.231 0 134.964 0C115.424 0 103.836 9.80952 97.4742 31.4817L2.04491 364.549C0.908851 368.656 0 373.446 0 378.921C0 397.172 12.9511 412 36.5812 412Z'
  fill={fill}
  />
  </svg>

components/Footer.js → components/layout/Footer.js

@@ -1,16 +1,16 @@
 import Link from 'next/link';
-import footerStyles from '../styles/Footer.module.scss';
-import { linksNav } from '../utils/links';
-import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
+import footerStyles from '@/styles/Footer.module.scss';
+import { linksNav } from '@/utils/links';
+import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
 import Image from 'next/image';
-import Container from './Container';
+import Container from '@/components/containers/Container';
 
 export default function Footer() {
  return (
  <footer className={footerStyles.footer}>
  <NewsletterSubscribe />
  <Container className={footerStyles.footer__inner}>
- <nav className={footerStyles.footer__nav} aria-label="Main">
+ <nav className={footerStyles.footer__nav} aria-label='Main'>
  <ul className={footerStyles.footer__navList}>
  {linksNav.map(link => (
  <li className={footerStyles.footer__navItem} key={link.text}>
@@ -21,13 +21,13 @@ export default function Footer() {
  ))}
  </ul>
  </nav>
- <Link href="/">
- <a className={footerStyles.footer__logo} title="Go to the Homepage">
+ <Link href='/'>
+ <a className={footerStyles.footer__logo} title='Go to the Homepage'>
  <Image
- src="/images/svg/logo.svg"
+ src='/images/svg/logo.svg'
  height={250}
  width={250}
- alt="Logo"
+ alt='Logo'
  />
  </a>
  </Link>

components/Hero.js → components/layout/Hero.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import Image from 'next/image';
-import Nav from './Nav';
-import Container from './Container';
-import styles from '../styles/Hero.module.scss';
+import Nav from '@/components/Nav';
+import Container from '@/components/containers/Container';
+import styles from '@/styles/Hero.module.scss';
 
 export default function Hero({
  title,
@@ -29,9 +29,9 @@ export default function Hero({
  src={imgBg}
  alt={imgAlt}
  className={styles.imageBg}
- layout="fill"
- objectFit="cover"
- objectPosition="center"
+ layout='fill'
+ objectFit='cover'
+ objectPosition='center'
  priority
  />
  <Container className={styles.header__content}>

components/Layout.js → components/layout/Layout.js

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
-import { heroOptions } from '../utils/hero-options';
-import Hero from './Hero';
-import Meta from './Meta';
-import Footer from './Footer';
-import styles from '../styles/Layout.module.scss';
+import { heroOptions } from '@/utils/hero-options';
+import Hero from '@/components/layout/Hero';
+import Meta from '@/components/layout/Meta';
+import Footer from '@/components/layout/Footer';
+import styles from '@/styles/Layout.module.scss';
 
 export default function Layout({ children }) {
  const router = useRouter();