From a9e4171a7ffd6d3835a260e54a148cecf8884e5e Mon Sep 17 00:00:00 2001 From: teetangh Date: Wed, 7 Jun 2023 01:58:23 +0530 Subject: [PATCH 1/2] improved the footer and pricing page --- .../src/pages/info/pricing/PricingPage.jsx | 78 ++++++- .../src/pages/info/pricing/PricingPage.scss | 172 ++++++++++++++ .../src/pages/landing/img3/apple-store.svg | 25 ++ .../src/pages/landing/img3/google-play.svg | 1 + .../pages/landing/landingcomponents/Footer.js | 219 +++++++++++------- 5 files changed, 403 insertions(+), 92 deletions(-) create mode 100644 frontend/src/pages/landing/img3/apple-store.svg create mode 100644 frontend/src/pages/landing/img3/google-play.svg diff --git a/frontend/src/pages/info/pricing/PricingPage.jsx b/frontend/src/pages/info/pricing/PricingPage.jsx index e8e117e..273e6ab 100644 --- a/frontend/src/pages/info/pricing/PricingPage.jsx +++ b/frontend/src/pages/info/pricing/PricingPage.jsx @@ -1,16 +1,76 @@ -import React from "react"; +import React, { useState } from "react"; +import "./PricingPage.scss"; const PricingPage = () => { + const [isAnnual, setIsAnnual] = useState(true); + + const toggleSubscription = () => { + setIsAnnual(!isAnnual); + }; + return ( -
- {/* apply margin top */} -
-

Pricing

+
+
+

Pricing

+

Affordable prices for everyone

+
+
+

{isAnnual ? "Annual" : "Monthly"}

+
+
+
+
+
Engineering Bundle
+
+
    +
  • Feature 1: Lorem ipsum dolor sit amet.
    • +
  • Feature 2: Consectetur adipiscing elit.
    • +
  • Feature 3: Sed do eiusmod tempor incididunt.
    • +
  • Feature 4: Ut labore et dolore magna aliqua.
    • +
+
+

{isAnnual ? "$100/year" : "$10/month"}

+ +
+
+
+
+
Arts Bundle
+
+
    +
  • Feature 1: Lorem ipsum dolor sit amet.
    • +
  • Feature 2: Consectetur adipiscing elit.
    • +
  • Feature 3: Sed do eiusmod tempor incididunt.
    • +
  • Feature 4: Ut labore et dolore magna aliqua.
    • +
+
+

{isAnnual ? "$120/year" : "$12/month"}

+ +
+
+
+
+
Commerce Bundle
+
+
    +
  • Feature 1: Lorem ipsum dolor sit amet.
    • +
  • Feature 2: Consectetur adipiscing elit.
    • +
  • Feature 3: Sed do eiusmod tempor incididunt.
    • +
  • Feature 4: Ut labore et dolore magna aliqua.
    • +
+
+

{isAnnual ? "$150/year" : "$15/month"}

+ +
+
+
- Pricing Page for Bundles of packages -
1) Engineering Bundle
-
2) Arts Bundle
-
3) Commerce Bundle
); }; diff --git a/frontend/src/pages/info/pricing/PricingPage.scss b/frontend/src/pages/info/pricing/PricingPage.scss index e69de29..5755240 100644 --- a/frontend/src/pages/info/pricing/PricingPage.scss +++ b/frontend/src/pages/info/pricing/PricingPage.scss @@ -0,0 +1,172 @@ +.content { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-top: 80px; +} + +.d-flex { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + width: 85%; + height: 80vh; +} +.header { + text-align: center; + + h1 { + font-size: 3rem; + margin-bottom: 0.5rem; + } + + .motto { + font-size: 1.5rem; + font-style: italic; + } +} + +.toggle-container { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; +} + +.toggle-label { + font-size: 1.2rem; + margin-right: 1rem; +} + +.slider { + position: relative; + width: 50px; + height: 25px; + border-radius: 50px; + background-color: #6a11cb; + cursor: pointer; + + &::before { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 21px; + height: 21px; + border-radius: 50%; + background-color: #fff; + transition: 0.3s; + } + + &.monthly { + background-color: #2575fc; + + &::before { + transform: translateX(25px); + } + } +} + +.pricing-card { + position: relative; + width: 80%; + height: 70%; + margin-bottom: 200px; + border-radius: 20px; + box-shadow: -8px -8px 16px rgba(255, 255, 255, 0.8), + inset -8px -8px 16px rgba(255, 255, 255, 0.5), + 8px 8px 16px rgba(0, 0, 0, 0.1), inset 8px 8px 16px rgba(0, 0, 0, 0.1); + + .card-header { + text-align: center; + font-size: 1.5rem; + font-weight: 600; + padding: 1rem; + color: #fff; + } + + .card-body { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 100%; + border-radius: 20px; + + ul { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + li { + list-style: none; + + &:before { + content: "➤"; + margin-right: 0.5rem; + } + } + } + + .price-add-to-cart { + display: flex; + flex-direction: column; + align-items: center; + width: 90%; + + p { + margin-bottom: 0.5rem; + } + + .add-to-cart-btn { + border-radius: 0.5rem; + position: relative; + bottom: 10px; + width: 100%; + height: 50px; + background-color: #0087f7; + } + } + } +} + +.engineering-card { + box-shadow: -8px -8px 16px rgba(255, 255, 255, 0.8), + inset -8px -8px 16px rgba(255, 255, 255, 0.5), + inset -4px -4px 10px rgba(0, 0, 0, 0.05), -4px 4px 10px rgba(0, 0, 0, 0.05); + margin-right: -50px; +} + +.arts-card { + box-shadow: -8px -8px 16px rgba(255, 255, 255, 0.8), + inset -8px -8px 16px rgba(255, 255, 255, 0.5), + inset -4px -4px 10px rgba(0, 0, 0, 0.05); + z-index: 1; +} + +.commerce-card { + box-shadow: -8px -8px 16px rgba(255, 255, 255, 0.8), + inset -8px -8px 16px rgba(255, 255, 255, 0.5), + inset -4px -4px 10px rgba(0, 0, 0, 0.05), 4px 4px 10px rgba(0, 0, 0, 0.05); + margin-left: -50px; +} + +.btn-primary { + background-image: linear-gradient(to right, #6a11cb, #2575fc); +} + +.card-header { + background-image: linear-gradient(to right, #6a11cb, #2575fc); + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +.card-body { + background-image: linear-gradient(to bottom right, #f8f8f8, #e6e6e6); +} diff --git a/frontend/src/pages/landing/img3/apple-store.svg b/frontend/src/pages/landing/img3/apple-store.svg new file mode 100644 index 0000000..ed1a7ef --- /dev/null +++ b/frontend/src/pages/landing/img3/apple-store.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/pages/landing/img3/google-play.svg b/frontend/src/pages/landing/img3/google-play.svg new file mode 100644 index 0000000..7543126 --- /dev/null +++ b/frontend/src/pages/landing/img3/google-play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/pages/landing/landingcomponents/Footer.js b/frontend/src/pages/landing/landingcomponents/Footer.js index 0a88fbf..b32693f 100755 --- a/frontend/src/pages/landing/landingcomponents/Footer.js +++ b/frontend/src/pages/landing/landingcomponents/Footer.js @@ -1,96 +1,149 @@ -import React from 'react'; -import styled from 'styled-components'; -import { InnerLayout } from '../styles/Layouts'; -import logo from '../img/logo.svg'; +import React from "react"; +import styled from "styled-components"; +import { InnerLayout } from "../styles/Layouts"; +import logo from "../img/logo.svg"; +import appleStore from "../img3/apple-store.svg"; +import googlePlay from "../img3/google-play.svg"; function Footer() { - return ( - - -
-
-
- -

- Copyright @2021 LoremIpsum.
- All rights reserved. -

-
-
- -
- - - ) + return ( + + +
+
+ +
+

+ Copyright @2021 LoremIpsum.
+ All rights reserved. +

+
+
+ + + {/* Add office address */} +
+ Kings & Queens Studio Rooms, Spice Garden, Marathahalli, Bengaluru, + Karnataka - 560037, India +
+ + {/* Add icons for downloading from Apple and Android stores */} +
+ Download on the Apple Store + Get it on Google Play +
+
+ + + ); } const FooterStyled = styled.footer` - padding: 0 18rem; - background-color: #DCE2F0; - @media screen and (max-width: 1347px){ - padding: 5rem 14rem; - } - @media screen and (max-width: 1186px){ - padding: 5rem 8rem; - } - @media screen and (max-width: 990px){ - padding: 5rem 4rem; - } - .footer-con{ - display: grid; - grid-template-columns: repeat(2, 1fr); + padding: 2rem 18rem; + background-color: #dce2f0; + background-image: linear-gradient( + to right, + #e0b0ff, + #ff69b4, + #9370db, + #4b0082 + ); + color: white; + + @media screen and (max-width: 1347px) { + padding: 2rem 14rem; + } + @media screen and (max-width: 1186px) { + padding: 2rem 8rem; + } + @media screen and (max-width: 990px) { + padding: 2rem 4rem; + } + + .footer-con { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; + align-items: center; + justify-content: center; + + .logo-con { + display: flex; + align-items: center; + + img { + width: 90px; + margin-right: 0.5rem; + } } - .logo-con{ - display: flex; - align-items: center; - img{ - width: 90px; + .botton-nav { + display: flex; + justify-content: space-between; + + li { + padding: 0.5rem 0.5rem; + color: white; + + a { + color: white; + font-size: 1.2rem; } + } } - .botton-nav{ - display: flex; - justify-content: space-between; - li{ - padding: 2rem 0; - color: #16194F; - } + address { + font-style: normal; + text-align: center; + margin-top: 1rem; + font-size: 1.2rem; + } + + .download-icons { + display: flex; + justify-content: center; + align-items: center; + + img { + width: 100px; + margin: 0.5rem; + } } + } `; -export default Footer +export default Footer; From 782fa75f48078c4e0199a5f126aaf16e03b1cd2f Mon Sep 17 00:00:00 2001 From: teetangh Date: Wed, 7 Jun 2023 03:41:43 +0530 Subject: [PATCH 2/2] improved the navbar --- frontend/src/components/navbar/NavBar.jsx | 26 ++-- frontend/src/components/navbar/NavBar.scss | 168 ++++++++++++--------- 2 files changed, 105 insertions(+), 89 deletions(-) diff --git a/frontend/src/components/navbar/NavBar.jsx b/frontend/src/components/navbar/NavBar.jsx index b06ae82..7a9c094 100644 --- a/frontend/src/components/navbar/NavBar.jsx +++ b/frontend/src/components/navbar/NavBar.jsx @@ -1,5 +1,5 @@ import Box from "@mui/material/Box"; -import { useEffect, useState } from "react"; +import { useState, useEffect } from "react"; import { FaBars, FaTimes } from "react-icons/fa"; import { useDispatch, useSelector } from "react-redux"; import { Link, useLocation, useNavigate } from "react-router-dom"; @@ -9,14 +9,12 @@ import { defaultState } from "../../redux/slices/AuthSlice"; import "./NavBar.scss"; const NavBar = () => { - // const { isLoading, error } = useAuth0(); - // Navbar Visibility - const [click, setClick] = useState(false); - const handleClick = () => { - setClick(!click); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const handleMenuClick = () => { + setIsMenuOpen(!isMenuOpen); }; - const [navVisibility, setNavVisibility] = useState(false); + const [isNavBarVisible, setIsNavBarVisible] = useState(false); const location = useLocation(); @@ -24,12 +22,12 @@ const NavBar = () => { const changeBackground = () => { if (location.pathname === "/") { if (window.scrollY >= 700) { - setNavVisibility(true); + setIsNavBarVisible(true); } else { - setNavVisibility(false); + setIsNavBarVisible(false); } } else { - setNavVisibility(true); + setIsNavBarVisible(true); } }; changeBackground(); @@ -61,14 +59,14 @@ const NavBar = () => { }; return ( - +