feat: feature section

src/App.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { Header } from "./components";
+import { Features, Header, Jumbotron } from "./components";
 
 function App() {
   return (
     <div>
       <Header />
+      <Jumbotron />
+      <Features />
     </div>
   );
 }

src/Components/Features/Features.tsx

@@ -0,0 +1,11 @@
+export const Features = () => {
+  return (
+    <div className="feature-section wrapper">
+      <div className="body">
+        <div className="feature-section-content content">
+          <h2 className="title">Features</h2>
+        </div>
+      </div>
+    </div>
+  );
+};

src/Components/Jumbortron/Jumbotron.tsx

@@ -0,0 +1,23 @@
+import CoinChums from "../../assets/images/logo.png";
+
+export const Jumbotron = () => {
+  return (
+    <div className="jumbotron-section wrapper">
+      <h2 className="title">All New</h2>
+      <img className="logo" src={CoinChums} alt="coinchums" />
+      <p className="text">Smart Tracking and Savvy Settlements</p>
+      <span className="description">
+        Streamline your Expense Management by tracking finances, and simplified
+        settlements.
+      </span>
+      <ul className="links">
+        <li>
+          <button className="button">Coming soon!</button>
+        </li>
+        <li className="link">Learn more</li>
+      </ul>
+      <img className="logo" src={CoinChums} alt="coinchums" />
+      {/* TODO: CHANGE LOGO */}
+    </div>
+  );
+};

src/Components/index.ts

@@ -1 +1,3 @@
+export * from "./Features/Features";
 export * from "./Header/Header";
+export * from "./Jumbortron/Jumbotron";

src/index.css

@@ -72,3 +72,179 @@ nav .link-styled {
   height: 44px;
   color: #000000cc;
 }
+
+.jumbotron-section.wrapper {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 980px;
+  width: 100%;
+  box-sizing: border-box;
+  height: calc(100vh - 40px);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 60px;
+  position: relative;
+  z-index: 1;
+  min-height: 830px;
+}
+
+.jumbotron-section .title {
+  color: #86868b;
+  font-size: 17px;
+  font-weight: 400;
+  letter-spacing: -0.022em;
+}
+
+.jumbotron-section .logo {
+  width: 140px;
+}
+
+.jumbotron-section .text {
+  display: inline-block;
+  color: transparent;
+  background-image: linear-gradient(180deg, #ffb6ff, #b344ff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  padding-top: 0.5px;
+  margin-top: 16px;
+  font-size: 48px;
+  font-weight: 600;
+  margin-bottom: 18px;
+}
+
+.jumbotron-section .description {
+  font-size: 21px;
+  font-weight: 400;
+}
+
+.jumbotron-section .links {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+  align-items: center;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.jumbotron-section .button {
+  background: #0071e3;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  font-size: 17px;
+  font-weight: 400;
+  min-width: 28px;
+  padding: 8px 16px;
+  border-radius: 980px;
+  margin: 0 14px;
+}
+
+.jumbotron-section .link {
+  text-decoration: none;
+  color: #2997ff;
+  font-size: 21px;
+  font-weight: 400;
+  margin: 0 14px;
+  cursor: pointer;
+}
+
+.jumbotron-section .iphone-img {
+  margin-right: -400px;
+  height: 516px;
+  position: absolute;
+  bottom: 0;
+}
+
+.feature-section.wrapper {
+  width: 100%;
+  color: #1d1d1f;
+  background-color: #fbfbfd;
+  height: 100vh;
+}
+
+.feature-section .body {
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.feature-section .content {
+  max-width: 490px;
+  width: 100%;
+  padding: 200px 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  opacity: 0;
+}
+
+.feature-section .title {
+  color: #1d1d1f;
+  font-size: 17px;
+  font-weight: 400;
+  margin-bottom: 0;
+}
+
+.feature-section .text {
+  display: inline-block;
+  color: transparent;
+  background-image: linear-gradient(
+    90deg,
+    #1e3791 0%,
+    #2948b1 40%,
+    #3153c6 55%,
+    #385fda 60%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  padding-top: 0.5px;
+  margin-top: 16px;
+  font-size: 48px;
+  font-weight: 600;
+  margin-bottom: 18px;
+}
+
+.feature-section .description {
+  font-size: 21px;
+  font-weight: 400;
+}
+
+.feature-section .links {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+  align-items: center;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.feature-section .button {
+  background: #0071e3;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  font-size: 17px;
+  font-weight: 400;
+  min-width: 28px;
+  padding: 8px 16px;
+  border-radius: 980px;
+  margin: 0 14px;
+  border: none;
+}
+
+.feature-section .link {
+  text-decoration: none;
+  color: #2997ff;
+  font-size: 21px;
+  font-weight: 400;
+  margin: 0 14px;
+  cursor: pointer;
+}