feat(DEV-21): add Features section scaffold

src/components/Home/Features/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Section } from '../Section';
+
+export const Features = () => {
+  return (
+    <Section title={'Features'} bgColor={'#F9F8F8'}>
+      <p>Coming soon!</p>
+    </Section>
+  );
+};

src/components/Home/Section/index.tsx

@@ -3,12 +3,17 @@ import './styles.css';
 
 interface SectionProps {
   title: string;
-  children: ReactElement[];
+  children: ReactElement | ReactElement[];
+  bgColor?: string;
 }
 
-export const Section = ({ title, children }: SectionProps) => {
+export const Section = ({
+  title,
+  children,
+  bgColor = '#FFFFFF',
+}: SectionProps) => {
   return (
-    <div className={'section'}>
+    <div className={'section'} style={{ backgroundColor: `${bgColor}` }}>
       <h2>{title}</h2>
       {children}
     </div>

src/components/Home/Section/styles.css

@@ -1,6 +1,6 @@
 .section {
-    display: flex;
-    flex-direction: column;
-    padding: 50px 20px;
-    border: 1px solid black;
-}
+  display: flex;
+  flex-direction: column;
+  padding: 50px;
+  border: 0px solid black;
+}

src/components/Home/index.tsx

@@ -3,12 +3,14 @@ import { Link } from 'react-router-dom';
 import './styles.css';
 import { Header } from './Header';
 import { Why } from './Why';
+import { Features } from './Features';
 
 export const Home = () => {
   return (
     <Fragment>
       <Header />
       <Why />
+      <Features />
     </Fragment>
   );
 };