From 92e139c9e8343e77ce469fc89a770b4013ba2109 Mon Sep 17 00:00:00 2001 From: keraliss Date: Mon, 4 Dec 2023 15:20:23 +0530 Subject: [PATCH 01/22] fixes #44 : Improve Carousel --- src/components/common/Carousel.tsx | 163 ++++++++++++++++---------- src/components/home/Testimonial.astro | 2 +- 2 files changed, 101 insertions(+), 64 deletions(-) diff --git a/src/components/common/Carousel.tsx b/src/components/common/Carousel.tsx index 48aa2d8..173c27a 100644 --- a/src/components/common/Carousel.tsx +++ b/src/components/common/Carousel.tsx @@ -1,76 +1,113 @@ -import { useState } from "react"; +import React, { useState } from "react"; -export type CarouselConfigType = { - img: string; - title: string; - content: string; -}[]; +function Carousel() { + const slides = [ + { + url: "/website-v2/activities/cohort.png", + 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!", + }, + { + 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.", + }, + { + 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.", + }, + { + 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.", + }, + { + 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.", + }, + ]; + + const [currentIndex, setCurrentIndex] = useState(0); + + const prevSlide = () => { + const isFirstSlide = currentIndex === 0; + const newIndex = isFirstSlide + ? slides.length - 1 + : currentIndex - 1; + setCurrentIndex(newIndex); + }; + + const nextSlide = () => { + const isLastSlide = currentIndex === slides.length - 1; + const newIndex = isLastSlide ? 0 : currentIndex + 1; + setCurrentIndex(newIndex); + }; + + const goToSlide = (slideIndex: any) => { + setCurrentIndex(slideIndex); + }; -const defaultConfig = [ - { - img: "/website-v2/activities/cohort.png", - 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!", - }, - { - img: "/website-v2/activities/cohort.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.", - }, - { - img: "/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.", - }, - { - img: "/website-v2/activities/cohort.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.", - }, - { - img: "/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.", - }, -]; -const Carousel = ({ - config = defaultConfig, -}: { - config?: CarouselConfigType; -}) => { - const [page, setPage] = useState(4); return ( -
-

- {config[page].title} +
+

+ {slides[currentIndex].title} +

+

+ {slides[currentIndex].title}

-
- -
-
{config[page].content}
-
-
- {config.map((page, index) => { - return ( - +
+ {/* Right Arrow */} +
+ +
+
+ {slides.map((slide, slideIndex) => ( +
goToSlide(slideIndex)} + className="cursor-pointer p-2 text-2xl" + > + ⚫ +
+ ))}
); -}; +} export default Carousel; diff --git a/src/components/home/Testimonial.astro b/src/components/home/Testimonial.astro index d11bad5..93d3acb 100644 --- a/src/components/home/Testimonial.astro +++ b/src/components/home/Testimonial.astro @@ -110,7 +110,7 @@

Demystify the Technicalities of Bitcoin

From ff05e8974871a0e3e0ed1b52238e9b7d52c73dc6 Mon Sep 17 00:00:00 2001 From: keraliss Date: Mon, 4 Dec 2023 21:21:08 +0530 Subject: [PATCH 02/22] changes according to review --- src/components/common/Carousel.tsx | 76 +++++++++++++++--------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/src/components/common/Carousel.tsx b/src/components/common/Carousel.tsx index 173c27a..40577f8 100644 --- a/src/components/common/Carousel.tsx +++ b/src/components/common/Carousel.tsx @@ -1,39 +1,39 @@ -import React, { useState } from "react"; +import { useState } from "react"; -function Carousel() { - const slides = [ - { - url: "/website-v2/activities/cohort.png", - 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!", - }, - { - 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.", - }, - { - 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.", - }, - { - 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.", - }, - { - 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.", - }, - ]; +const slides = [ + { + url: "/website-v2/activities/cohort.png", + 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!", + }, + { + 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.", + }, + { + 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.", + }, + { + 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.", + }, + { + 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.", + }, +]; +function Carousel() { const [currentIndex, setCurrentIndex] = useState(0); const prevSlide = () => { @@ -88,12 +88,12 @@ function Carousel() { {/* Left Arrow */} -
- +
+
{/* Right Arrow */} -
- +
+
{slides.map((slide, slideIndex) => ( From 62aabc1a3a57bbd94829bb3ddfa9b587f2e39d9c Mon Sep 17 00:00:00 2001 From: keraliss Date: Tue, 5 Dec 2023 11:31:40 +0530 Subject: [PATCH 03/22] adding hover effect --- src/components/common/Carousel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/Carousel.tsx b/src/components/common/Carousel.tsx index 40577f8..417d43f 100644 --- a/src/components/common/Carousel.tsx +++ b/src/components/common/Carousel.tsx @@ -80,7 +80,7 @@ function Carousel() {
{slides[currentIndex].content}
-
@@ -100,7 +100,7 @@ function Carousel() {
goToSlide(slideIndex)} - className="cursor-pointer p-2 text-2xl" + className="cursor-pointer p-2 text-3xl hover:text-4xl hover:outline-2 hover:outline-white" > ⚫
From 9c9fe67d4407e04403502539df6565ef7d229d98 Mon Sep 17 00:00:00 2001 From: keraliss Date: Tue, 5 Dec 2023 16:14:14 +0530 Subject: [PATCH 04/22] fixes #59 : improve menu bar --- src/components/common/hamburger.tsx | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/common/hamburger.tsx b/src/components/common/hamburger.tsx index fe603cb..e0456b0 100644 --- a/src/components/common/hamburger.tsx +++ b/src/components/common/hamburger.tsx @@ -14,7 +14,7 @@ const Hamburger = () => { return ( <>
@@ -31,6 +32,7 @@ Structured Cohort
diff --git a/src/components/cohortPages/MeetYourTAs.astro b/src/components/cohortPages/MeetYourTAs.astro index ab078f7..0e6beec 100644 --- a/src/components/cohortPages/MeetYourTAs.astro +++ b/src/components/cohortPages/MeetYourTAs.astro @@ -21,6 +21,7 @@ const { team, color } = Astro.props; {member.name}
@@ -33,12 +34,14 @@ const { team, color } = Astro.props; Github Twitter
diff --git a/src/components/common/Carousel.tsx b/src/components/common/Carousel.tsx index 48aa2d8..75ab27e 100644 --- a/src/components/common/Carousel.tsx +++ b/src/components/common/Carousel.tsx @@ -50,7 +50,11 @@ const Carousel = ({ {config[page].title}
- + {config[page].title}
{config[page].content}
diff --git a/src/components/common/Header.astro b/src/components/common/Header.astro index 36f34f4..fa28b3a 100644 --- a/src/components/common/Header.astro +++ b/src/components/common/Header.astro @@ -28,7 +28,11 @@ const { >
- + Bitshala Logo
diff --git a/src/components/common/videoList.tsx b/src/components/common/videoList.tsx index b7f1309..d214f4f 100644 --- a/src/components/common/videoList.tsx +++ b/src/components/common/videoList.tsx @@ -18,7 +18,11 @@ export const VideoList = ({ href={vid.link} target="_blank" > - + {vid.title} {vid.title} ), diff --git a/src/components/home/People.astro b/src/components/home/People.astro index a943611..76690e4 100644 --- a/src/components/home/People.astro +++ b/src/components/home/People.astro @@ -99,6 +99,7 @@ const advisors = [ {member.name}
@@ -112,12 +113,14 @@ const advisors = [ Github Twitter
@@ -145,6 +148,7 @@ const advisors = [ {member.name}
@@ -158,6 +162,7 @@ const advisors = [ Twitter
diff --git a/src/components/home/Testimonial.astro b/src/components/home/Testimonial.astro index d11bad5..d79e8de 100644 --- a/src/components/home/Testimonial.astro +++ b/src/components/home/Testimonial.astro @@ -1,23 +1,33 @@ +--- +import { Image } from "astro:assets"; +import bitcoin from "../../assets/testimonial/bitcoin.png"; +import person1 from "../../assets/testimonial/person1.png"; +import person2 from "../../assets/testimonial/goku.png"; +--- +
- Image of Bitcoin
- Person 1
- Person 2
@@ -27,22 +37,25 @@