added images , added promoted card, added text to display

Author: druvkotwani

client/public/assets/promoted1.webp

@@ -82,10 +82,32 @@ export default function Home() {
         }
     };
 
-
-
     const [selectedValue, setSelectedValue] = useState('Only Value');
 
+    const options = [
+        {
+            heading: "LeetCode Profiles is an application that enables users to display and share their LeetCode statistics and accomplishments globally",
+            imgSrc: "/promoted1.webp",
+        },
+        {
+            heading: "Enjoying our project? Drop a star on our GitHub repo to show your support! This will help others to discover the project. 🌟",
+            imgSrc: "/promoted2.webp",
+        },
+        {
+            heading: "Could you please consider dropping a star on our GitHub repository? 👻 ",
+            imgSrc: "/promoted3.webp",
+        },
+        {
+            heading: "Could you drop a star on the GitHub repo? It helps a lot! 👋 ",
+            imgSrc: "/promoted4.webp",
+        },
+        {
+            heading: "Can you please share this project with your friends and family? ✨  ",
+            imgSrc: "/promoted4.webp",
+        }
+    ];
+    const [random, setRandom] = useState(Math.floor(Math.random() * options.length));
+
 
     return (
         <>

client/public/assets/promoted2.webp

@@ -1,33 +1,42 @@
-import Questions from "./Profile/Circle&Questions/Questions";
-import Circle from "./Profile/Circle&Questions/Circle";
-import { useState, useEffect } from "react";
-import Profile from "./Profile/About/Profile";
-import SocialLinks from "./Profile/About/SocialLinks";
-import { motion } from "framer-motion";
 
 
 export default function PromotedCard() {
 
-
-
     return (
-        <div className="flex justify-center flex-col items-center rounded-lg h-[280px] bg-[#292829]">
-            <div>
-                <div className="flex gap-1 xl:gap-4 items-center justify-between ">
-                    {/* Profile */}
+        <a href="https://leetcode.com/contest/weekly-contest-259/" rel="noreferrer" target="_blank" className="hover:scale-105 transition-transform duration-300  " >
+            <div className="flex justify-center flex-col items-center rounded-lg h-[280px] bg-[#292829]">
+                <div>
+                    <div className="flex gap-1 xl:gap-4 items-center justify-between ">
+                        {/* Profile */}
+                        <div className="flex items-center text-white justify-center px-4 py-1  w-full gap-2 mb-2  rounded-md">
+                            <img
+                                alt="nextui logo"
+                                className="rounded-full"
+                                height={26}
+                                radius="sm"
+                                src={`/assets/leetcode.png`}
+                                width={26}
+                            />
+                            <h4 className="font-bold text-large SourceCodePro">LeetCode Profiles</h4>
+                        </div>
 
-                </div>
-                <div style={{ height: '0.5px', backgroundColor: '#E0E0E0' }} className="h-[0.5px] bg-white" />
+                    </div>
+                    <div style={{ height: '0.5px', backgroundColor: '#E0E0E0' }} className="h-[0.5px] bg-white" />
 
-                <div className=" flex lg:flex-row gap-5 items-center justify-center mt-4">
-                    {/* Circle */}
+                    <div className=" flex lg:flex-row gap-5 items-center justify-center mt-4 w-full">
+                        {/* Circle */}
 
-                </div>
+                        <p className="text-xs text-white uppercase font-bold SourceCodePro mx-auto mt-2 bg-gray-600  px-16 py-2 rounded-md ">
+                            Promoted
+                        </p>
+
+                    </div>
 
 
 
+                </div>
             </div>
-        </div>
+        </a>
 
     )
 }

client/public/assets/promoted3.webp

@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -37,6 +38,9 @@ body {
   font-family: "Cedarville Cursive", cursive;
   font-weight: 400; /* Bold style */
 }
+.SourceCodePro {
+  font-family: "Source Code Pro", monospace;
+}
 
 :root {
   --green-10: #004d1b;