Skip to content

Commit 290791f

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #210 from abhishekkalme/fix/dark-mode-homepage
Fix: Dark Mode Compatibility for Homepage Section
2 parents 562d5b6 + 800c978 commit 290791f

File tree

13 files changed

+603
-594
lines changed

13 files changed

+603
-594
lines changed

‎sidebarsCommunity.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
module.exports = {
1+
rts = {
22
sidebarsCommunity: [
33
{
44
type: "autogenerated",
55
dirName: ".",
66
},
77
],
8-
};
8+
};

‎src/components/blogCarousel/blogCard.tsx

Lines changed: 51 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
"use client";
2+
import * as React from "react";
23
import { useState } from "react";
34
import { motion } from "framer-motion";
45
import Link from "@docusaurus/Link";
@@ -22,69 +23,58 @@ const BlogCard = ({
2223
}
2324

2425
return (
25-
<motion.div
26-
initial={false}
27-
animate={{
28-
scale: isHovered ? 1.05 : 1,
29-
}}
30-
transition={{ duration: 0.3 }}
31-
onMouseEnter={() => setIsHovered(true)}
32-
onMouseLeave={() => setIsHovered(false)}
33-
className="relative overflow-hidden h-full shadow-2xl border rounded-2xl"
34-
>
35-
<Link
36-
href={`${currentUrl}blog/${id}`}
37-
className=""
26+
<motion.div
27+
initial={false}
28+
animate={{scale: isHovered ? 1.05 : 1 }}
29+
transition={{ duration: 0.3 }}
30+
onMouseEnter={() => setIsHovered(true)}
31+
onMouseLeave={() => setIsHovered(false)}
32+
className="relative overflow-hidden h-full shadow-2xl border border-gray-200 dark:border-gray-700 rounded-2xl transition-all duration-300"
3833
>
39-
{/* White shadow animation - Fixed version */}
40-
<motion.div
41-
initial={{ opacity: 0, left: "50%", right: "50%" }}
42-
animate={
43-
isHovered
44-
? {
45-
opacity: 1,
46-
left: "-100%",
47-
right: "-100%",
48-
transition: {
49-
duration: 0.6,
50-
ease: "easeInOut",
51-
},
52-
}
53-
: {
54-
opacity: 0,
55-
left: "100%",
56-
right: "100%",
57-
transition: {
58-
duration: 0.6,
59-
ease: "easeInOut",
60-
},
61-
}
62-
}
63-
className="absolute top-0 h-full bg-gradient-to-r from-white/30 via-transparent to-white/30 pointer-events-none"
64-
/>
65-
66-
<Card className="max-w-md w-full p-4 h-full border-none rounded-2xl bg-white ">
67-
<img
68-
src={imageUrl}
69-
alt=""
70-
width={400}
71-
height={200}
72-
className="w-full h-48 object-contain rounded-lg"
34+
<Link href={`${currentUrl}blog/${id}`}>
35+
{/* Hover shimmer effect */}
36+
<motion.div
37+
initial={{ opacity: 0, left: "50%", right: "50%" }}
38+
animate={
39+
isHovered
40+
? {
41+
opacity: 1,
42+
left: "-100%",
43+
right: "-100%",
44+
transition: { duration: 0.6, ease: "easeInOut" },
45+
}
46+
: {
47+
opacity: 0,
48+
left: "100%",
49+
right: "100%",
50+
transition: { duration: 0.6, ease: "easeInOut" },
51+
}
52+
}
53+
className="absolute top-0 h-full shimmer-layer pointer-events-none"
7354
/>
74-
<CardContent className="p-4 space-y-2">
75-
<div className="text-sm text-gray-500 ">
76-
{date}
77-
</div>
78-
<h2 className="text-lg font-semibold text-gray-900 ">
79-
{title}
80-
</h2>
81-
<div className="text-sm text-gray-700 line-clamp-3">
82-
{content}
83-
</div>
84-
</CardContent>
85-
</Card>
86-
</Link>
87-
</motion.div>
55+
56+
<Card className="blog-card max-w-md w-full p-4 h-full border-none rounded-2xl transition-colors duration-300">
57+
<img
58+
src={imageUrl}
59+
alt=""
60+
width={400}
61+
height={200}
62+
className="w-full h-48 object-contain rounded-lg"
63+
/>
64+
<CardContent className="p-4 space-y-2">
65+
<div className="blog-card-date text-sm">
66+
{date}
67+
</div>
68+
<h2 className="blog-card-title text-lg font-semibold">
69+
{title}
70+
</h2>
71+
<div className="blog-card-content text-sm line-clamp-3">
72+
{content}
73+
</div>
74+
</CardContent>
75+
</Card>
76+
</Link>
77+
</motion.div>
8878
);
8979
};
9080

‎src/components/blogCarousel/blogCarousel.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,15 @@ import { Button } from "../ui/button";
1313
import { useEffect, useState } from "react";
1414
import BlogCard from "./blogCard";
1515
import blogs from "../../database/blogs";
16-
import Autoplay from "embla-carousel-autoplay"
16+
import Autoplay from "embla-carousel-autoplay";
1717

1818
export function BlogCarousel() {
1919
const [api, setApi] = useState<CarouselApi>();
2020
const [current, setCurrent] = useState(0);
2121
const [count, setCount] = useState(0);
2222

2323
useEffect(() => {
24-
if (!api) {
25-
return;
26-
}
24+
if (!api) return;
2725

2826
setCount(api.scrollSnapList().length);
2927
setCurrent(api.selectedScrollSnap() + 1);
@@ -43,16 +41,15 @@ export function BlogCarousel() {
4341
loop: true,
4442
}}
4543
plugins={[
46-
Autoplay({
47-
delay: 2000,
48-
}),
49-
]}
44+
Autoplay({
45+
delay: 2000,
46+
}),
47+
]}
5048
>
5149
<CarouselContent className="my-10">
52-
{blogs.map((blog, index) => (
50+
{blogs.map((blog) => (
5351
<CarouselItem key={blog.id} className="md:basis-1/2 lg:basis-1/4">
5452
<BlogCard
55-
5653
type="blog"
5754
date="2024-01-01"
5855
title={blog.title}
@@ -63,20 +60,26 @@ export function BlogCarousel() {
6360
</CarouselItem>
6461
))}
6562
</CarouselContent>
63+
64+
{/* Carousel controls */}
6665
<div className="flex items-center justify-center gap-2 mt-4">
67-
<CarouselPrevious className="static translate-y-0" />
66+
<CarouselPrevious className="static translate-y-0 dark:bg-gray-800 dark:text-white" />
6867
<div className="flex gap-2">
6968
{Array.from({ length: count }).map((_, index) => (
7069
<Button
7170
key={index}
7271
variant={current === index + 1 ? "default" : "outline"}
7372
size="icon"
74-
className="h-2 w-2 p-0 rounded-full"
73+
className={`h-2 w-2 p-0 rounded-full transition-colors ${
74+
current === index + 1
75+
? "bg-black dark:bg-white"
76+
: "bg-gray-300 dark:bg-gray-600"
77+
}`}
7578
onClick={() => api?.scrollTo(index)}
7679
/>
7780
))}
7881
</div>
79-
<CarouselNext className="static translate-y-0" />
82+
<CarouselNext className="static translate-y-0 dark:bg-gray-800 dark:text-white" />
8083
</div>
8184
</Carousel>
8285
</div>

‎src/components/faqs/faqs.tsx

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from "react";
22
import { FiChevronDown } from "react-icons/fi";
33
import { motion } from "framer-motion";
4+
import { useColorMode } from "@docusaurus/theme-common"; // Docusaurus theme detection
45

56
const faqData = [
67
{
@@ -42,24 +43,38 @@ const faqData = [
4243

4344
const FAQs: React.FC = () => {
4445
const [activeIndex, setActiveIndex] = useState<number | null>(null);
46+
const { colorMode } = useColorMode();
47+
const isDark = colorMode === "dark";
4548

4649
const toggleAccordion = (index: number) => {
4750
setActiveIndex(activeIndex === index ? null : index);
4851
};
4952

5053
return (
51-
<section className="py-8 bg-gray-50">
54+
<section
55+
className={`py-8 transition-colors duration-300 ${
56+
isDark ? "bg-[#121212]" : "bg-gray-50"
57+
}`}
58+
>
5259
<div className="mx-auto px-2 sm:px-4 lg:px-6">
5360
<div className="flex flex-col justify-center items-center gap-x-8 gap-y-12 xl:gap-28 lg:flex-row lg:justify-between">
5461
<div className="w-full">
5562
<div className="mb-8 lg:mb-16">
5663
<h6 className="text-lg text-center lg:text-left font-medium text-indigo-600 mb-2">
5764
FAQs
5865
</h6>
59-
<h2 className="text-4xl text-center lg:text-left font-bold text-gray-900 dark:text-gray-100 leading-snug">
66+
<h2
67+
className={`text-4xl text-center lg:text-left font-bold ${
68+
isDark ? "text-gray-100" : "text-gray-900"
69+
} leading-snug`}
70+
>
6071
Looking for answers?
6172
</h2>
62-
<p className="text-gray-600 dark:text-gray-400 text-center lg:text-left">
73+
<p
74+
className={`${
75+
isDark ? "text-gray-400" : "text-gray-600"
76+
} text-center lg:text-left`}
77+
>
6378
Find answers to the most common questions about Recode Hive.
6479
</p>
6580
</div>
@@ -75,15 +90,19 @@ const FAQs: React.FC = () => {
7590
transition={{ duration: 0.3 }}
7691
>
7792
<button
78-
className="accordion-toggle group flex justify-between items-center text-lg font-medium text-gray-700 dark:text-gray-200 w-full transition-all duration-300 hover:text-indigo-600 dark:hover:text-indigo-400 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg focus:outline-none"
93+
className={`accordion-toggle group flex justify-between items-center text-lg font-medium w-full transition-all duration-300
94+
${
95+
isDark
96+
? "text-gray-200 bg-gray-800 hover:text-indigo-400"
97+
: "text-gray-700 bg-gray-100 hover:text-indigo-600"
98+
}
99+
p-4 rounded-lg focus:outline-none`}
79100
onClick={() => toggleAccordion(index)}
80101
>
81102
{faq.question}
82103
<motion.span
83104
className="transform transition-transform duration-300"
84-
animate={{
85-
rotate: activeIndex === index ? 180 : 0,
86-
}}
105+
animate={{ rotate: activeIndex === index ? 180 : 0 }}
87106
>
88107
<FiChevronDown size={22} />
89108
</motion.span>
@@ -97,8 +116,14 @@ const FAQs: React.FC = () => {
97116
}}
98117
transition={{ duration: 0.3, ease: "easeInOut" }}
99118
>
100-
<div
101-
className="mt-2 text-gray-600 dark:text-gray-400 text-base [&_a]:text-indigo-600 [&_a]:hover:text-indigo-800 dark:[&_a]:text-indigo-400 dark:[&_a]:hover:text-indigo-300 [&_a]:transition-colors [&_a]:duration-200 [&_strong]:font-semibold [&_strong]:text-gray-800 dark:[&_strong]:text-gray-200"
119+
<div
120+
className={`mt-2 text-base transition-colors duration-200 ${
121+
isDark ? "text-gray-400" : "text-gray-600"
122+
}
123+
[&_a]:text-indigo-600 [&_a]:hover:text-indigo-800
124+
dark:[&_a]:text-indigo-400 dark:[&_a]:hover:text-indigo-300
125+
[&_strong]:font-semibold [&_strong]:text-gray-800
126+
dark:[&_strong]:text-gray-200`}
102127
dangerouslySetInnerHTML={{ __html: faq.answer }}
103128
/>
104129
</motion.div>

0 commit comments

Comments
 (0)