card done

Author: druvkotwani

client/public/assets/promoted1.png

@@ -86,24 +86,24 @@ export default function Home() {
 
     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: "Could you drop a star on the GitHub repo? It helps a lot!👋",
+            imgSrc: "/promoted1.png",
         },
         {
-            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: "Drop a star on our GitHub repo to show your support!🌟",
+            imgSrc: "/promoted1.png",
         },
         {
-            heading: "Could you please consider dropping a star on our GitHub repository? 👻 ",
-            imgSrc: "/promoted3.webp",
+            heading: "Can you drop a star on the GitHub repo? It helps a lot!👋 ",
+            imgSrc: "/promoted2.webp",
         },
         {
-            heading: "Could you drop a star on the GitHub repo? It helps a lot! 👋 ",
-            imgSrc: "/promoted4.webp",
+            heading: "Could you drop a star on the GitHub repo? It helps a lot!👋 ",
+            imgSrc: "/promoted2.webp",
         },
         {
-            heading: "Can you please share this project with your friends and family? ✨  ",
-            imgSrc: "/promoted4.webp",
+            heading: "Can you please share this project with your friends and family?✨ ",
+            imgSrc: "/promoted2.webp",
         }
     ];
     const [random, setRandom] = useState(Math.floor(Math.random() * options.length));
@@ -138,7 +138,7 @@ export default function Home() {
                 <div className="min-h-screen flex flex-col mx-auto max-w-screen-xl px-2 sm:px-6 lg:px-8">
                     <div className="grid grid-cols-1 gap-4 py-4 ">
                         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                            <PromotedCard />
+                            <PromotedCard option={options[random]} />
                             {
                                 loading ? (
 

client/public/assets/promoted1.webp

@@ -1,40 +1,47 @@
 
 
-export default function PromotedCard() {
+export default function PromotedCard({ option }) {
 
     return (
-        <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>
-
+        <a href="https://github.com/druvkotwani/leetcode-profiles" rel="noreferrer" target="_blank" className="hover:scale-105 transition-transform duration-300  " >
+            <div className="flex justify-betwen flex-col  items-center rounded-lg h-[280px] bg-[#292829] ">
+
+
+                {/* Heading and Logo */}
+                <div className="flex gap-1 xl:gap-4 items-center justify-between   ">
+                    <div className="flex items-center text-white justify-center px-4 py-2 w-full gap-2   rounded-md">
+                        <img
+                            alt="nextui logo"
+                            className="rounded-full"
+                            height={24}
+                            radius="sm"
+                            src={`/assets/leetcode.png`}
+                            width={24}
+                        />
+                        <h4 className="font-bold text-large SourceCodePro">LeetCode Profiles</h4>
                     </div>
-                    <div style={{ height: '0.5px', backgroundColor: '#E0E0E0' }} className="h-[0.5px] bg-white" />
+                </div>
 
-                    <div className=" flex lg:flex-row gap-5 items-center justify-center mt-4 w-full">
-                        {/* Circle */}
 
-                        <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 className="">
+                    <div style={{ height: '0.5px', backgroundColor: '#E0E0E0' }} className="h-[0.5px] bg-white" />
+
+                    <p className=" px-4 text-[#FFFEFE] mt-2 font-medium  text-base xl:text-lg  SourceCodePro">
+                        {option.heading}
+                    </p>
 
+                    <div className="mx-4 ">
+                        <img alt="Ad image" src={`/assets/${option.imgSrc}`} className="z-1 w-full rounded-xl  h-40  object-cover" />
                     </div>
 
+                </div>
+
+
+
+
+
 
 
-                </div>
             </div>
         </a>