about akai

src/components/Title/Title.jsx

@@ -7,9 +7,9 @@ const alignments = {
   left: styles.left,
 };
 
-export default function Title({ children, alignment = "center" }) {
+export default function Title({ children, className, alignment = "center" }) {
   return (
-    <h2 className={classnames(styles.title, alignments[alignment])}>
+    <h2 className={classnames(styles.title, alignments[alignment], className)}>
       {children}
     </h2>
   );

src/components/Title/Title.module.scss

@@ -22,9 +22,15 @@
 }
 
 .left {
-  text-align: left;
+  @extend .center;
+}
 
-  &::after {
-    margin: 15px 0 25px;
+@media only screen and (min-width: $tablet) {
+  .left {
+    text-align: left;
+
+    &::after {
+      margin: 15px 0 25px;
+    }
   }
 }

src/pages/index.js

@@ -1,20 +1,17 @@
 import React from "react";
 import SEO from "../components/SEO";
 import Main from "../sections/Main";
+import About from "../sections/About";
 import LinkIcons from "../sections/LinkIcons";
 import JoinUs from "../sections/JoinUs";
 import Footer from "../sections/Footer";
-import Section from "../components/Section";
-import Title from "../components/Title";
 
 export default function Home() {
   return (
     <main>
       <SEO />
       <Main />
-      <Section>
-        <Title alignment="left">O AKAI</Title>
-      </Section>
+      <About />
       <LinkIcons />
       <JoinUs />
       <Footer />

src/sections/About/About.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Section from "../../components/Section";
+import Title from "../../components/Title";
+import styles from "./About.module.scss";
+
+export default function About() {
+  return (
+    <Section className={styles.section}>
+      <div className={styles.sectionDetails}>
+        <div className={styles.sectionColumn}>
+          <Title alignment="left">O AKAI</Title>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
+            repellendus laudantium earum rem repellat, quia atque quod
+            consectetur praesentium, harum accusamus voluptates dolore,
+            distinctio corporis nemo? Architecto modi suscipit rem facilis
+            tenetur id. Maxime incidunt, laborum tempore dolore at aliquam
+            accusantium exercitationem ex sed repellendus quibusdam aperiam
+            soluta commodi magnam! Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Aspernatur repellendus laudantium earum rem
+            repellat, quia atque quod consectetur praesentium, harum accusamus
+            voluptates dolore, distinctio corporis nemo? Architecto modi
+            suscipit rem facilis tenetur id. Maxime incidunt, laborum tempore
+            dolore at aliquam accusantium exercitationem ex sed repellendus
+            quibusdam aperiam soluta commodi magnam!
+          </p>
+        </div>
+        <div className={styles.sectionColumn}>
+          <img src="/img/section-design.jpg" className={styles.sectionImage} />
+        </div>
+      </div>
+    </Section>
+  );
+}

src/sections/About/About.module.scss

@@ -0,0 +1,47 @@
+@import "../../styles/vars.scss";
+
+.section {
+  p {
+    color: $text-color;
+  }
+}
+
+.title {
+  margin: 15px;
+}
+
+.sectionDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+}
+
+.sectionColumn {
+  flex: 1;
+  max-width: 500px;
+  margin: 0 15px;
+
+  & + & {
+    padding-top: 35px;
+  }
+}
+
+.sectionImage {
+  width: 100%;
+  box-shadow: 0 3px 30px -5px rgba(0, 0, 0, 0.75);
+}
+
+@media only screen and (min-width: $tablet) {
+  .sectionColumn {
+    & + & {
+      padding-top: 0px;
+    }
+  }
+
+  .sectionDetails {
+    flex-direction: row;
+    text-align: initial;
+  }
+}

src/sections/About/index.js

@@ -0,0 +1 @@
+export { default } from "./About.jsx";

src/sections/JoinUs/JoinUs.jsx

@@ -45,7 +45,7 @@ export default function JoinUs() {
             <img src={img} className={styles.sectionImage} />
           </div>
           <div className={styles.sectionColumn}>
-            <Title>{name}</Title>
+            <Title alignment="left">{name}</Title>
             <p>{description}</p>
           </div>
         </div>

src/sections/JoinUs/JoinUs.module.scss

@@ -50,6 +50,7 @@
 
   .sectionDetails {
     flex-direction: row;
+    text-align: initial;
 
     &:nth-of-type(even) {
       flex-direction: row-reverse;