Merge branch 'main' into shana

SUGAM-ARORA · Aug 2, 2024 · 22e58e8 · 22e58e8
2 parents 2ce09b0 + c7fd38f
commit 22e58e8
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 1 deletion.
diff --git a/src/Components/Menu.js b/src/Components/Menu.js
@@ -91,7 +91,7 @@ function Menu() {
             { to: "/projects", icon: <FaList size={30} />, text: "My projects" },
             { to: "/Delicious", icon: <FaDelicious size={30} />, text: "Delicious" },
             { to: "/cart", icon: <FaShoppingCart size={30} />, text: "Cart" },
-            { to: "/", icon: <FaWallet size={30} />, text: "Wallet" },
+            { to: "/wallet", icon: <FaWallet size={30} />, text: "Wallet" },
             { to: "/Trending", icon: <FaChartLine size={30} />, text: "Trending" },
             { to: "#", icon: <FaRegClock size={30} />, text: "Speed", onClick: toggleStopwatch }
           ].map((item, index) => (

diff --git a/src/Components/footer_section/Pricing/pricing.css b/src/Components/footer_section/Pricing/pricing.css
@@ -92,6 +92,9 @@ li {
     font-size: 25px;
     display: flex;
     gap: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .topic_price {
@@ -121,6 +124,8 @@ li {
     width: 50px;
     text-align: center;
     font-style: oblique;
+    height: fit-content;
+    color: white;
 }
 
 /* Media Queries for Responsive Design */

diff --git a/src/Components/wallet/Wallet.css b/src/Components/wallet/Wallet.css
@@ -0,0 +1,115 @@
+.heading1Wallet {
+    font-size: 80px;
+    font-weight: 600;
+    max-width: 1000px;
+    width: 85vw;
+    margin: auto;
+    text-align: center;
+    margin-bottom: 20px;
+    color: #ff21bc;
+    font-weight: bold;
+    margin-bottom: 50px;
+    margin-top: 50px;
+}
+
+.pointsandrupees {
+    display: flex;
+    width: 60vw;
+    margin: auto;
+    border: 3px solid #ff21bc;
+    height: 150px;
+    margin-bottom: 50px;
+    border-radius: 50px;
+    font-size: 24px;
+}
+
+.iconsWallet {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.quantity {
+    font-weight: 800;
+}
+
+.value {
+    font-weight: 600;
+}
+
+.iconsWallet svg {
+    height: 100px;
+    width: 100px;
+}
+
+.infoWallet {
+    width: 70vw;
+    height: 150px;
+    background-color: rgba(15, 20, 114, 0.362);
+    border-radius: 50px;
+    margin: auto;
+    margin-bottom: 50px;
+    display: flex;
+}
+
+.feedbackTopic {
+    width: 30%;
+}
+
+.descWallet1 {
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    font-size: 20px;
+}
+
+.heading2Wallet {
+    font-size: 40px;
+    font-weight: bold;
+    text-align: center;
+    width: 75vw;
+    color: #ff21bc;
+    margin: auto;
+    margin-bottom: 50px;
+}
+
+.detailsPayment {
+    width: 75vw;
+    margin: auto;
+    outline: 2px solid #f72ab9;
+    margin-bottom: 50px;
+    display: flex;
+    margin-bottom: 35px;
+    padding: 20px;
+    border-radius: 30px;
+    transition: transform 0.15s ease-in-out;
+}
+
+.detailsPayment:hover {
+    transform: scale(1.08);
+    box-shadow: 0px 0px 11px 4px #ff21bc;
+}
+
+.detailsCardWallet {
+    width: 90%;
+    display: flex;
+    font-size: 20px;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.amountWallet {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: greenyellow;
+    font-size: 20px;
+    font-weight: 700;
+}
diff --git a/src/Components/wallet/Wallet.js b/src/Components/wallet/Wallet.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import './Wallet.css'
+
+const Wallet = () => {
+    return (
+        <div>
+            <div className="heading1Wallet">Balance and Rewards</div>
+            <div className='pointsandrupees'>
+                <div className='iconsWallet'>
+                    <div className='quantity'>5000</div>
+                    <div className='value'>Points</div>
+                </div>
+                <div className='iconsWallet'>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill='#ff21bc' viewBox="0 0 512 512"><path d="M406.6 374.6l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224l-293.5 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288l293.5 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z" /></svg>
+                </div>
+                <div className='iconsWallet'>
+                    <div className='quantity'>₹50</div>
+                    <div className='value'>Balance (in Rupees)</div>
+                </div>
+            </div>
+            <div className='infoWallet'>
+                <div className='topic_head feedbackTopic'>UniCollab <span className='Pro'>Pro</span></div>
+                <div className='descWallet1'>
+                    <div className='quantity'>Now, UniCollab Pro members will earn 50 ppoints</div>
+                    <div className='value'>On every ₹100 spent on UniCollab</div>
+                </div>
+            </div>
+            <div className="heading2Wallet">Points History</div>
+            <div className='detailsPayment'>
+                <div className='detailsCardWallet'>
+                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cumque eum. </div>
+                    <div>Credited On XX-XX-XXXX</div>
+                </div>
+                <div className='amountWallet'>+ 100 points</div>
+            </div>
+            <div className='detailsPayment'>
+                <div className='detailsCardWallet'>
+                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cumque eum. </div>
+                    <div>Credited On XX-XX-XXXX</div>
+                </div>
+                <div className='amountWallet'>+ 100 points</div>
+            </div>
+            <div className='detailsPayment'>
+                <div className='detailsCardWallet'>
+                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cumque eum. </div>
+                    <div>Credited On XX-XX-XXXX</div>
+                </div>
+                <div className='amountWallet'>+ 100 points</div>
+            </div>
+        </div>
+    )
+}
+
+export default Wallet
diff --git a/src/configs/router.js b/src/configs/router.js
@@ -29,9 +29,11 @@ import ShoppingCart from "../Components/cart/cart";
 import testimonials from "../Components/Testimonials/Testimonials";
 import Testimonials from "../Components/Testimonials/Testimonials";
 import Contributors from "../Components/Contributors";
+import Wallet from "../Components/wallet/Wallet";
 import Delicious from "../Components/Delicious/Delicious"
 import Trending from "../Components/Trending/Trending"
 
+
 const router = createBrowserRouter([
     { path: "*", element: <Error /> },
     { path: "/", element: <Container /> },
@@ -61,6 +63,7 @@ const router = createBrowserRouter([
     { path: "/cart", element: <ShoppingCart /> },
     { path: "/Testimonials", element: <Testimonials /> },
     { path: "/contributors", element: <Contributors /> },
+    { path: "/wallet", element: <Wallet /> },
     { path: "/Delicious", element: <Delicious /> },
     { path: "/Trending", element: <Trending /> },