Merge pull request #69 from Bitshala/carousel1

fixes #66 : [design] Align carousel button design

src/components/common/Carousel.jsx

@@ -5,30 +5,35 @@ const slides = [
     title: "Bitcoin Study Cohorts",
     content:
       "You, with fellow learners collectively explore selected texts over several weeks in a structured self-study format. You gain hands-on experience and in-depth insights into Bitcoin’s technical aspects. And also receive certificates to celebrate your wins!",
+    targetLink: "/website-v2/cohorts",
   },
   {
     url: "/website-v2/cohort/lbtcl.png",
     title: "Bitcoin Deep Dive",
     content:
       "Here, for you, we decode the technical intricacies of the Bitcoin protocol layer. Deep Dive is a recorded series for you to explore specific technical topics around Bitcoin. Be ready to geek out during your self-study sessions.",
+    targetLink: "",
   },
   {
     url: "/website-v2/activities/cohort.png",
     title: "Bitcoin Talk",
     content:
       "You get to listen to insightful conversations with experienced Bitcoin developers as they share their journeys, provide valuable advice, and offer suggestions for newcomers in the exciting world of Bitcoin development.",
+    targetLink: "/website-v2/talks",
   },
   {
     url: "/website-v2/cohort/lbtcl.png",
     title: "Bitcoin Core Review Club",
     content:
       "You get hand-on experience into the inner workings of Bitcoin Core and understand how experienced contributors review PRs. You’ll also develop a deeper understanding of Bitcoin’s design principles while sharpening your adversarial-thinking skills.",
+    targetLink: "/website-v2/review",
   },
   {
     url: "/website-v2/activities/cohort.png",
     title: "Discord Community",
     content:
       "Come and become a part of our vibrant community of Bitcoin enthusiasts. Here, you can engage in discussions, challenge ideas, and explore Bitcoin opportunities with like-minded peers passionate about shaping the future of decentralized finance.",
+    targetLink: "https://discord.gg/ekzAUeeR",
   },
 ];
 
@@ -51,20 +56,30 @@ const MobileCarousel = () => {
             >
               {slide.title}
             </h1>
-            <div className="flex flex-col lg:flex-row">
-              <div
-                style={{
-                  backgroundImage: `url(${slide.url})`,
-                }}
-                className=" h-40 rounded-2xl bg-contain bg-center bg-no-repeat duration-500 lg:h-96 lg:w-1/2"
-              ></div>
+            <div
+              href={slide.targetLink}
+              className="flex flex-col lg:flex-row"
+            >
+              <a href={slide.targetLink}>
+                <div
+                  style={{
+                    backgroundImage: `url(${slide.url})`,
+                  }}
+                  className=" h-40 rounded-2xl bg-contain bg-center bg-no-repeat duration-500 lg:h-96 lg:w-1/2"
+                ></div>
+              </a>
               <div className="flex  flex-col lg:w-1/2">
                 <div className="my-5 lg:p-5 lg:text-3xl">
                   {slide.content}
                 </div>
-                <button className="mt-5 rounded-lg border-2 border-dotted  border-black py-4 text-xl  hover:bg-white lg:mx-28">
-                  Tell Me More!
-                </button>
+                <a
+                  href={slide.targetLink}
+                  className="flex justify-center"
+                >
+                  <button className="mt-1 rounded-lg border-2 border-dotted border-black  px-4 py-4 text-xl  hover:bg-white">
+                    Tell Me More!
+                  </button>
+                </a>
               </div>
             </div>
           </div>
@@ -112,20 +127,27 @@ function Carousel() {
         >
           {slides[currentIndex].title}
         </h1>
-        <div className="flex flex-col lg:flex-row">
-          <div
+        <div className="flex">
+          <a
+            href={slides[currentIndex].targetLink}
+            className="h-40 rounded-2xl bg-contain bg-center bg-no-repeat duration-500 lg:h-96 lg:w-1/2"
             style={{
               backgroundImage: `url(${slides[currentIndex].url})`,
             }}
-            className=" h-40 rounded-2xl bg-contain bg-center bg-no-repeat duration-500 lg:h-96 lg:w-1/2"
-          ></div>
+          ></a>
+
           <div className="flex  flex-col lg:w-1/2">
             <div className="my-5 lg:p-5 lg:text-3xl">
               {slides[currentIndex].content}
             </div>
-            <button className="mt-5 rounded-lg border-2 border-dotted  border-black py-4 text-xl  hover:bg-white lg:mx-28">
-              Tell Me More!
-            </button>
+            <a
+              href={slides[currentIndex].targetLink}
+              className="flex justify-center"
+            >
+              <button className="mt-5 rounded-lg  border-2 border-dotted border-black  py-4 text-xl hover:bg-white  lg:px-36">
+                Tell Me More!
+              </button>
+            </a>
           </div>
         </div>
 
@@ -140,9 +162,13 @@ function Carousel() {
             <div
               key={slideIndex}
               onClick={() => goToSlide(slideIndex)}
-              className={`cursor-pointer p-2 text-3xl ${currentIndex==slideIndex?"":"hover:text-4xl"}`}
+              className={`cursor-pointer p-2 text-3xl ${
+                currentIndex == slideIndex
+                  ? ""
+                  : "hover:text-4xl"
+              }`}
             >
-              {currentIndex==slideIndex?"⚪":"⚫"}
+              {currentIndex == slideIndex ? "⚪" : "⚫"}
             </div>
           ))}
         </div>