From c610210649d1d9e13586ed6259a7392798ccd165 Mon Sep 17 00:00:00 2001
From: Aanchal <aanchalgaurh2608@gmail.com>
Date: Tue, 31 Aug 2021 13:21:18 +0530
Subject: [PATCH] New page added

---
 src/App.js            | 24 +++++++++++-
 src/Header.js         |  7 +++-
 src/Screens/Plans.css | 91 +++++++++++++++++++++++++++++++++++++++++++
 src/Screens/Plans.js  | 65 +++++++++++++++++++++++++++++++
 4 files changed, 183 insertions(+), 4 deletions(-)
 create mode 100644 src/Screens/Plans.css
 create mode 100644 src/Screens/Plans.js

diff --git a/src/App.js b/src/App.js
index bc5adf0..b3cce3f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,8 @@ import Player from "./Player";
 import { getTokenFromResponse } from "./spotify";
 import "./App.css";
 import Login from "./Login";
+import {BrowserRouter as Router , Route, Switch} from "react-router-dom"
+import Plans from './Screens/Plans';
 
 const s = new SpotifyWebApi();
 
@@ -62,8 +64,26 @@ function App() {
 
   return (
     <div className="app">
-      {!token && <Login />}
-      {token && <Player spotify={s} />}
+      {
+        !token && <Login />}
+      <Router>
+      {
+      token ? (
+        <Switch>
+          
+          <Route path="/plans">
+            <Plans/>
+          </Route>
+          <Route exact path="/">
+            <Player spotify={spotify}/>
+          </Route>
+          
+        </Switch>
+        ):(
+          <Login/>
+        )
+      }
+      </Router>
     </div>
   );
 }
diff --git a/src/Header.js b/src/Header.js
index 13440c9..bba968f 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -4,10 +4,13 @@ import { useStateValue } from "./StateProvider";
 import { Avatar } from "@material-ui/core";
 import SearchIcon from "@material-ui/icons/Search";
 import { useEffect } from "react";
+import { Avatar } from "@material-ui/core"
+import { useHistory } from 'react-router'
+
 
 function Header({ spotify }) {
   const [{ user }, dispatch] = useStateValue();
-
+  const his = useHistory();
   return (
     <div className="header">
       <div className="header__left">
@@ -17,7 +20,7 @@ function Header({ spotify }) {
           type="text"
         />
       </div>
-      <div className="header__right">
+      <div className="header__right" onClick={()=>his.push('/plans')}>
         <Avatar alt={user?.display_name} src={user?.images[0].url} />
         <h4>{user?.display_name}</h4>
       </div>
diff --git a/src/Screens/Plans.css b/src/Screens/Plans.css
new file mode 100644
index 0000000..52935db
--- /dev/null
+++ b/src/Screens/Plans.css
@@ -0,0 +1,91 @@
+.plans{
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(rgba(91,87,115),rgb(0,0,0,1));
+    height: 100vh;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+}
+.pricing-plan{
+    width: 300px;
+    border-radius: 25px;
+    box-shadow: 0 0 5px rgba(0,0,0,0.2);
+    overflow: hidden;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #555555;
+    margin: 15px;
+}
+.pricing-plan_header{
+    padding: 25px;
+    background-color: rgb(30,50,100);
+    color: #ffffff;
+
+}
+.pricing_title{
+    margin: 0;
+    text-align: center;
+    font-size: 1.5em;
+    font-weight: 400;
+}
+.pricing-plan_summary{
+    margin: 0;
+    text-align: center;
+    font-size: 1em;
+    font-weight: 300;
+}
+.description{
+    padding: 25px;
+    background: white;
+}
+.list{
+    padding: 0;
+    margin: 0;
+}
+.feature{
+    list-style: none;
+    margin: 0;
+    padding-left: 25px;
+    position: relative;
+    font-size: 0.9em;
+}
+.feature:not(:last-child){
+    margin-bottom: 0.5em;
+}
+.feature::before{
+    content: "\2714";
+    color: #009578;
+    position: absolute;
+    left: 0;
+}
+.actions{
+    background: white;
+    padding: 25px;
+    border-top: 1px solid #eeeeee;
+    display: flex;
+    flex-direction: column;
+}
+.button{
+    display: inline-block;
+    margin: 15px auto;
+    padding: 8px 20px;
+    text-decoration: none;
+    color: #009578;
+    background: #ffffff;
+    border-radius: 5px;
+    border: 1px solid #009578;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    font-weight: bold;
+}
+.cost{
+    margin: 0;
+    text-align: center;
+    font-size: 2em;
+    color: #000;
+}
+.text{
+    margin: 0;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/Screens/Plans.js b/src/Screens/Plans.js
new file mode 100644
index 0000000..64e159e
--- /dev/null
+++ b/src/Screens/Plans.js
@@ -0,0 +1,65 @@
+import React from 'react'
+import "./Plans.css"
+
+function Plans() {
+    return (
+    <div className="plans">
+        <section className="pricing-plan">
+            <div className="pricing-plan_header">
+                <h1 className="pricing_title">Individual</h1>
+                <h2 className="pricing-plan_summary">One-time plans from ₹129. Auto-renew plans temporarily unavailable.</h2>
+            </div>
+            <div className="description">
+                <ul className="list">
+                    <li className="feature">Listen to music ad-free</li>
+                    <li className="feature">Group Session</li>
+                    <li className="feature">Download 10k songs on 5 devices</li>
+                </ul>
+            </div>
+            <div className="actions">
+                <p className="cost">₹129</p>
+                <p className="text">per month</p>
+                <a href="./" className="button">Purchase</a>
+            </div>
+        </section>
+        <section className="pricing-plan">
+            <div className="pricing-plan_header">
+                <h1 className="pricing_title">Duo</h1>
+                <h2 className="pricing-plan_summary">One-time plans from ₹165. Auto-renew plans temporarily unavailable.</h2>
+            </div>
+            <div className="description">
+                <ul className="list">
+                    <li className="feature">For couples who live together</li>
+                    <li className="feature">Listen to music ad-free</li>
+                    <li className="feature">Group Session</li>
+                </ul>
+            </div>
+            <div className="actions">
+                <p className="cost">₹165</p>
+                <p className="text">per month</p>
+                <a href="./" className="button">Purchase</a>
+            </div>
+        </section>
+        <section className="pricing-plan">
+            <div className="pricing-plan_header">
+                <h1 className="pricing_title">Family</h1>
+                <h2 className="pricing-plan_summary">One-time plans from ₹199. Auto-renew plans temporarily unavailable.</h2>
+            </div>
+            <div className="description">
+                <ul className="list">
+                    <li className="feature">For family who live together</li>
+                    <li className="feature">Block explicit music</li>
+                    <li className="feature">Listen to music ad-free</li>
+                </ul>
+            </div>
+            <div className="actions">
+                <p className="cost">₹199</p>
+                <p className="text">per month</p>
+                <a href="./" className="button">Purchase</a>
+            </div>
+        </section>
+    </div>
+    )
+}
+
+export default Plans