feat(DEV-24): add section for not included

also add how-to import svg

README.md

@@ -25,5 +25,12 @@ All these tools are easy to configure. Please find their documentation below
 
 [Renovate Github App Installation](https://docs.renovatebot.com/install-github-app/)
 
+## How tos
+### How to import and use `SVG`?
+```tsx
+import Check from '../../../assets/check.svg'; // import
+<Check /> // use
+```
+
 ## Questions or Ideas?
 Please [start a new discussion](https://github.com/hhimanshu/create-react-ts-starter/discussions) 

src/components/Home/Discussion/index.tsx

@@ -9,7 +9,7 @@ export const Discussion = () => {
     );
 
   return (
-    <Section title={'Have ideas?'} bgColor={'#F9F8F8'}>
+    <Section title={'Have ideas?'}>
       <Button title={'Start a discussion'} onClick={openDiscussion} />
     </Section>
   );

src/components/Home/GetStarted/index.tsx

@@ -7,7 +7,7 @@ export const GetStarted = () => {
     window.open('https://github.com/hhimanshu/create-react-ts-starter#readme');
 
   return (
-    <Section title={'Ready to get started?'}>
+    <Section title={'Ready to get started?'} bgColor={'#F9F8F8'}>
       <Button title={'Follow README.md'} onClick={openReadMe} />
     </Section>
   );

src/components/Home/NotIncluded/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Section } from '../Section';
+
+export const NotIncluded = () => {
+  return (
+    <Section title={'Why no redux or CSS Framework included?'}>
+      <p>
+        When it comes to client state management or using a styling solution,
+        there are a lot of options available. Additionally, each team or
+        individual have their favorites tools or needs for the problem at hand.
+      </p>
+      <p>
+        This project does not assume or provides any opinion on those choices,
+        so you are free to bring your own solution!
+      </p>
+    </Section>
+  );
+};

src/components/Home/index.tsx

@@ -5,13 +5,15 @@ import { Why } from './Why';
 import { Features } from './Features';
 import { GetStarted } from './GetStarted';
 import { Discussion } from './Discussion';
+import { NotIncluded } from './NotIncluded';
 
 export const Home = () => {
   return (
     <Fragment>
       <Header />
       <Why />
       <Features />
+      <NotIncluded />
       <GetStarted />
       <Discussion />
     </Fragment>