From 2ce09b07194953960063dfda13f33922006aba49 Mon Sep 17 00:00:00 2001
From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com>
Date: Sat, 3 Aug 2024 01:09:05 +0530
Subject: [PATCH] Trending Now Page

---
 src/Components/Menu.js               |   2 +-
 src/Components/Trending/Trending.css |  93 +++++++++++++++
 src/Components/Trending/Trending.js  | 171 +++++++++++++++++++++++++++
 src/configs/router.js                |   3 +-
 4 files changed, 267 insertions(+), 2 deletions(-)
 create mode 100644 src/Components/Trending/Trending.css
 create mode 100644 src/Components/Trending/Trending.js

diff --git a/src/Components/Menu.js b/src/Components/Menu.js
index 80d75124..cc2f9241 100644
--- a/src/Components/Menu.js
+++ b/src/Components/Menu.js
@@ -92,7 +92,7 @@ function Menu() {
             { to: "/Delicious", icon: <FaDelicious size={30} />, text: "Delicious" },
             { to: "/cart", icon: <FaShoppingCart size={30} />, text: "Cart" },
             { to: "/", icon: <FaWallet size={30} />, text: "Wallet" },
-            { to: "/", icon: <FaChartLine size={30} />, text: "Trending" },
+            { to: "/Trending", icon: <FaChartLine size={30} />, text: "Trending" },
             { to: "#", icon: <FaRegClock size={30} />, text: "Speed", onClick: toggleStopwatch }
           ].map((item, index) => (
             <li key={index} style={{ padding: '1rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
diff --git a/src/Components/Trending/Trending.css b/src/Components/Trending/Trending.css
new file mode 100644
index 00000000..f030d914
--- /dev/null
+++ b/src/Components/Trending/Trending.css
@@ -0,0 +1,93 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Pacifico&display=swap');
+
+body {
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #1f1c35;
+  color: white;
+}
+
+.trending-page {
+  text-align: center;
+  margin-top: 50px;
+}
+
+.header {
+  margin-bottom: 40px;
+  color: #fff;
+}
+
+.header h1 {
+  font-size: 3em;
+  margin: 10px 0;
+  color: #ff21bc;
+  font-family: 'Pacifico', cursive;
+}
+
+.header p {
+  font-size: 1.4em;
+  color: #bbb;
+}
+
+.items-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.item-card {
+  background-color: #2a2551;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  margin: 20px;
+  padding: 20px;
+  width: 300px;
+  color: white;
+  text-align: center;
+  position: relative;
+  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  gap: 10px;
+  text-decoration: none;
+}
+
+.item-card:hover {
+  box-shadow: 7px 7px 32px 20px #362c9f;
+  transform: scale(1.09);
+}
+
+.item-card img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 10px 10px 0 0;
+}
+
+.item-info {
+  padding: 10px 0;
+}
+
+.item-name {
+  font-size: 1.8em;
+  margin: 10px 0;
+  color: #ff21bc;
+  font-family: 'Pacifico', cursive;
+}
+
+.item-price {
+  font-size: 1.4em;
+  color: #ff21bc;
+  margin-bottom: 10px;
+}
+
+.item-sold,
+.item-purchases,
+.item-likes {
+  font-size: 1.1em;
+  color: #bbb;
+  margin-bottom: 5px;
+}
+
+.item-icon {
+  margin-right: 5px;
+}
diff --git a/src/Components/Trending/Trending.js b/src/Components/Trending/Trending.js
new file mode 100644
index 00000000..4bde5b01
--- /dev/null
+++ b/src/Components/Trending/Trending.js
@@ -0,0 +1,171 @@
+import React, { useEffect } from 'react';
+import { Link } from "react-router-dom";
+import homeIcon from '../../img/homeicon.png';
+import Card1 from "../../img/card1.jpg";
+import Card2 from "../../img/card2.jpg";
+import Card3 from "../../img/card3.jpg";
+import Card4 from "../../img/card4.jpg";
+import Card5 from "../../img/card5.jpg";
+import Card6 from "../../img/card6.jpg";
+import './Trending.css';
+
+const Trending = () => {
+  const items = [
+    { id: 1, name: 'StockIT', price: 10, image: Card1, soldInRegion: 'most of the times', purchases: 125, likes: 300, icon: '📈' },
+    { id: 2, name: 'TakeNote', price: 12, image: Card2, soldInRegion: 'often', purchases: 150, likes: 350, icon: '📝' },
+    { id: 3, name: 'TaRct', price: 21, image: Card3, soldInRegion: 'sometimes', purchases: 75, likes: 200, icon: '🔍' },
+    { id: 4, name: 'To Do', price: 13, image: Card4, soldInRegion: 'often', purchases: 140, likes: 320, icon: '✅' },
+    { id: 5, name: 'ArchiTect', price: 15, image: Card5, soldInRegion: 'most of the times', purchases: 180, likes: 400, icon: '🏛️' },
+    { id: 6, name: 'WeatherLy', price: 17, image: Card6, soldInRegion: 'sometimes', purchases: 90, likes: 220, icon: '🌦️' },
+    { id: 7, name: 'TypingTest', price: 11, image: '/static/media/card7.b25b2be8caee889d6ad4.png', soldInRegion: 'often', purchases: 110, likes: 280, icon: '⌨️' },
+    { id: 8, name: 'Artisan', price: 18, image: '/static/media/card8.5c7a98cedad9864c46b7.png', soldInRegion: 'most of the times', purchases: 200, likes: 450, icon: '🎨' },
+    { id: 9, name: 'BBlocks', price: 25, image: '/static/media/card9.6d96022c8f0793e6dd91.png', soldInRegion: 'sometimes', purchases: 95, likes: 230, icon: '🧱' },
+    { id: 10, name: 'ZzShoes', price: 19, image: '/static/media/card10.a53e1291e52ef0a4c11c.png', soldInRegion: 'often', purchases: 160, likes: 360, icon: '👟' },
+    { id: 11, name: 'SearchImage', price: 13, image: '/static/media/card11.e2371ccc231824202cda.png', soldInRegion: 'most of the times', purchases: 185, likes: 420, icon: '🔎' },
+    { id: 12, name: 'Alimage', price: 20, image: '/static/media/card12.093d95181352dfd0126b.png', soldInRegion: 'sometimes', purchases: 130, likes: 290, icon: '🖼️' },
+  ];
+
+  // Assuming trending items are the ones with most likes and purchases
+  const trendingItems = items.filter(item => item.likes > 300 || item.purchases > 150);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  return (
+    <div className="trending-page">
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Pacifico&display=swap');
+
+        body {
+          font-family: 'Roboto', sans-serif;
+          margin: 0;
+          padding: 0;
+          background-color: #1f1c35;
+          color: white;
+        }
+
+        .trending-page {
+          text-align: center;
+          margin-top: 50px;
+        }
+
+        .header {
+          margin-bottom: 40px;
+          color: #fff;
+        }
+
+        .header h1 {
+          font-size: 3em;
+          margin: 10px 0;
+          color: #ff21bc;
+          font-family: 'Pacifico', cursive;
+        }
+
+        .header p {
+          font-size: 1.4em;
+          color: #bbb;
+        }
+
+        .items-container {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+
+        .item-card {
+          background-color: #2a2551;
+          border-radius: 10px;
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+          margin: 20px;
+          padding: 20px;
+          width: 300px;
+          color: white;
+          text-align: center;
+          position: relative;
+          transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+          gap: 10px;
+          text-decoration: none;
+        }
+
+        .item-card:hover {
+          box-shadow: 7px 7px 32px 20px #362c9f;
+          transform: scale(1.09);
+        }
+
+        .item-card img {
+          width: 100%;
+          height: 200px;
+          object-fit: cover;
+          border-radius: 10px 10px 0 0;
+        }
+
+        .item-info {
+          padding: 10px 0;
+        }
+
+        .item-name {
+          font-size: 1.8em;
+          margin: 10px 0;
+          color: #ff21bc;
+          font-family: 'Pacifico', cursive;
+        }
+
+        .item-price {
+          font-size: 1.4em;
+          color: #ff21bc;
+          margin-bottom: 10px;
+        }
+
+        .item-sold,
+        .item-purchases,
+        .item-likes {
+          font-size: 1.1em;
+          color: #bbb;
+          margin-bottom: 5px;
+        }
+
+        .item-icon {
+          margin-right: 5px;
+        }
+      `}</style>
+
+      <header className="header">
+        <h1>Trending Tools and Apps</h1>
+        <p>Check out the most popular tools and apps trending right now!</p>
+      </header>
+
+      <div className="items-container">
+        <Link to="/" className="home-link" style={{ marginRight: '10px', marginTop: '30px' }}>
+          <img src={homeIcon} alt="Home" className="home-icon" />
+        </Link>
+        {trendingItems.map(item => (
+          <Link to={`/readmore/${item.id}`} className="item-card" key={item.id}>
+            <img src={item.image} alt={item.name} className="item-image" />
+            <div className="item-info">
+              <h2 className="item-name">
+                <span className="item-icon" role="img" aria-label={item.name}>{item.icon}</span>
+                {item.name}
+              </h2>
+              <p className="item-price">${item.price}</p>
+              <p className="item-sold">
+                <span className="item-icon" role="img" aria-label="sold">📦</span>
+                Sold: {item.soldInRegion}
+              </p>
+              <p className="item-purchases">
+                <span className="item-icon" role="img" aria-label="purchases">🛒</span>
+                Purchases: {item.purchases}
+              </p>
+              <p className="item-likes">
+                <span className="item-icon" role="img" aria-label="likes">🤍</span>
+                Likes: {item.likes}
+              </p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Trending;
diff --git a/src/configs/router.js b/src/configs/router.js
index 689a1faa..867a85f5 100644
--- a/src/configs/router.js
+++ b/src/configs/router.js
@@ -30,7 +30,7 @@ import testimonials from "../Components/Testimonials/Testimonials";
 import Testimonials from "../Components/Testimonials/Testimonials";
 import Contributors from "../Components/Contributors";
 import Delicious from "../Components/Delicious/Delicious"
-
+import Trending from "../Components/Trending/Trending"
 
 const router = createBrowserRouter([
     { path: "*", element: <Error /> },
@@ -62,6 +62,7 @@ const router = createBrowserRouter([
     { path: "/Testimonials", element: <Testimonials /> },
     { path: "/contributors", element: <Contributors /> },
     { path: "/Delicious", element: <Delicious /> },
+    { path: "/Trending", element: <Trending /> },
 
   ]);