Added Compatible with Dark Mode into Feature

client/src/components/landing.component.js

@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'
 import Skeleton from '@material-ui/lab/Skeleton'
 import { CardActionArea } from '@material-ui/core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDraftingCompass, faFingerprint, faSyncAlt } from '@fortawesome/free-solid-svg-icons'
+import { faDraftingCompass, faFingerprint, faMoon, faSyncAlt } from '@fortawesome/free-solid-svg-icons'
 
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
 
@@ -221,6 +221,15 @@ const Landing = () => {
                         <p className="raleway mt-10 p-12">Simply drag the task and drop onto the desired position!</p>
                     </div>
                 </div>
+                <div className="m-10">
+                    <div className="projects__card">
+                        <div className="blue-text flex">
+                            <FontAwesomeIcon className="col isCentered blue-text" icon={faMoon} size="3x" />
+                            <p className="h2 col monospace m-auto">Light and Dark UI</p>
+                        </div>
+                        <p className="raleway mt-10 p-12">Choose how Otlio looks to you, smoothly switch between light and dark mode.</p>
+                    </div>
+                </div>
             </div>
             <footer className="footer">
 				<div>