Add Home Page 🏠

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "antd": "^4.17.3",
+    "aos": "^2.3.4",
     "immutability-helper": "^3.1.1",
     "query-string": "^7.0.1",
     "react": "^17.0.2",

public/index.html

@@ -11,6 +11,10 @@
     />
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;500;700;800;900&family=Poppins:wght@100;300;500;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
     <title>Codedigger</title>
   </head>

src/components/ActionButton/ActionButton.js

@@ -0,0 +1,10 @@
+import styles from './ActionButton.module.css'
+const ActionButton = ({ className, onClick, children }) => {
+  return (
+    <button className={`${styles.button} ${className}`} onClick={onClick}>
+      {children}
+    </button>
+  )
+}
+
+export default ActionButton

src/components/ActionButton/ActionButton.module.css

@@ -0,0 +1,10 @@
+.button {
+  width: 200px;
+  height: 50px;
+  padding: 10px 50px;
+  background-color: #35ae9a;
+  border: none;
+  color: #fff;
+  font-family: 'Poppins';
+  font-size: 16px;
+}

src/components/HomeInfo/HomeInfo.js

@@ -0,0 +1,13 @@
+import ActionButton from '../ActionButton/ActionButton'
+import styles from './HomeInfo.module.css'
+const HomeInfo = (props) => {
+  return (
+    <>
+      <h2 className={styles.featTitle}>{props.heading}</h2>
+      <p className={styles.featDesc}>{props.description}</p>
+      <ActionButton>Learn More</ActionButton>
+    </>
+  )
+}
+
+export default HomeInfo

src/components/HomeInfo/HomeInfo.module.css

@@ -0,0 +1,35 @@
+.featTitle {
+  background-image: linear-gradient(
+    90deg,
+    #35ae9a 25.41%,
+    rgba(0, 135, 169, 0.6) 103.95%
+  );
+  background-clip: text;
+  color: transparent;
+  font-size: 58px;
+  text-align: left;
+  margin-bottom: 5px;
+  line-height: 62px;
+  width: 80%;
+  height: auto;
+  padding-bottom: 10px;
+  font-weight: 700;
+}
+
+.featDesc {
+  font-family: 'Poppins';
+  font-size: 18px;
+  font-weight: 300;
+  text-align: left;
+  color: #fff;
+  width: 70%;
+}
+
+@media screen and (max-width: 1600px) {
+  .featTitle {
+    width: 100%;
+  }
+  .featDesc {
+    width: 100%;
+  }
+}

src/index.css

@@ -5,6 +5,9 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #121212;
+  color: #fff;
+  overflow-x: hidden;
 }
 
 code {