Skip to content

Fix: Dark Mode Compatibility for Homepage Section #210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 28, 2025
Merged

Fix: Dark Mode Compatibility for Homepage Section #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c58b13d
WIP: Dark mode fixes
abhishekkalme Jul 27, 2025
800c978
Enhance Showcase component with dark mode support and layout adjustments
abhishekkalme Jul 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions sidebarsCommunity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
module.exports = {
rts = {
sidebarsCommunity: [
{
type: "autogenerated",
dirName: ".",
},
],
};
};
112 changes: 51 additions & 61 deletions src/components/blogCarousel/blogCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
"use client";
import * as React from "react";
import { useState } from "react";
import { motion } from "framer-motion";
import Link from "@docusaurus/Link";
Expand All @@ -22,69 +23,58 @@ const BlogCard = ({
}

return (
<motion.div
initial={false}
animate={{
scale: isHovered ? 1.05 : 1,
}}
transition={{ duration: 0.3 }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className="relative overflow-hidden h-full shadow-2xl border rounded-2xl"
>
<Link
href={`${currentUrl}blog/${id}`}
className=""
<motion.div
initial={false}
animate={{scale: isHovered ? 1.05 : 1 }}
transition={{ duration: 0.3 }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className="relative overflow-hidden h-full shadow-2xl border border-gray-200 dark:border-gray-700 rounded-2xl transition-all duration-300"
>
{/* White shadow animation - Fixed version */}
<motion.div
initial={{ opacity: 0, left: "50%", right: "50%" }}
animate={
isHovered
? {
opacity: 1,
left: "-100%",
right: "-100%",
transition: {
duration: 0.6,
ease: "easeInOut",
},
}
: {
opacity: 0,
left: "100%",
right: "100%",
transition: {
duration: 0.6,
ease: "easeInOut",
},
}
}
className="absolute top-0 h-full bg-gradient-to-r from-white/30 via-transparent to-white/30 pointer-events-none"
/>

<Card className="max-w-md w-full p-4 h-full border-none rounded-2xl bg-white ">
<img
src={imageUrl}
alt=""
width={400}
height={200}
className="w-full h-48 object-contain rounded-lg"
<Link href={`${currentUrl}blog/${id}`}>
{/* Hover shimmer effect */}
<motion.div
initial={{ opacity: 0, left: "50%", right: "50%" }}
animate={
isHovered
? {
opacity: 1,
left: "-100%",
right: "-100%",
transition: { duration: 0.6, ease: "easeInOut" },
}
: {
opacity: 0,
left: "100%",
right: "100%",
transition: { duration: 0.6, ease: "easeInOut" },
}
}
className="absolute top-0 h-full shimmer-layer pointer-events-none"
/>
<CardContent className="p-4 space-y-2">
<div className="text-sm text-gray-500 ">
{date}
</div>
<h2 className="text-lg font-semibold text-gray-900 ">
{title}
</h2>
<div className="text-sm text-gray-700 line-clamp-3">
{content}
</div>
</CardContent>
</Card>
</Link>
</motion.div>

<Card className="blog-card max-w-md w-full p-4 h-full border-none rounded-2xl transition-colors duration-300">
<img
src={imageUrl}
alt=""
width={400}
height={200}
className="w-full h-48 object-contain rounded-lg"
/>
<CardContent className="p-4 space-y-2">
<div className="blog-card-date text-sm">
{date}
</div>
<h2 className="blog-card-title text-lg font-semibold">
{title}
</h2>
<div className="blog-card-content text-sm line-clamp-3">
{content}
</div>
</CardContent>
</Card>
</Link>
</motion.div>
);
};

Expand Down
29 changes: 16 additions & 13 deletions src/components/blogCarousel/blogCarousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,15 @@ import { Button } from "../ui/button";
import { useEffect, useState } from "react";
import BlogCard from "./blogCard";
import blogs from "../../database/blogs";
import Autoplay from "embla-carousel-autoplay"
import Autoplay from "embla-carousel-autoplay";

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

useEffect(() => {
if (!api) {
return;
}
if (!api) return;

setCount(api.scrollSnapList().length);
setCurrent(api.selectedScrollSnap() + 1);
Expand All @@ -43,16 +41,15 @@ export function BlogCarousel() {
loop: true,
}}
plugins={[
Autoplay({
delay: 2000,
}),
]}
Autoplay({
delay: 2000,
}),
]}
>
<CarouselContent className="my-10">
{blogs.map((blog, index) => (
{blogs.map((blog) => (
<CarouselItem key={blog.id} className="md:basis-1/2 lg:basis-1/4">
<BlogCard

type="blog"
date="2024-01-01"
title={blog.title}
Expand All @@ -63,20 +60,26 @@ export function BlogCarousel() {
</CarouselItem>
))}
</CarouselContent>

{/* Carousel controls */}
<div className="flex items-center justify-center gap-2 mt-4">
<CarouselPrevious className="static translate-y-0" />
<CarouselPrevious className="static translate-y-0 dark:bg-gray-800 dark:text-white" />
<div className="flex gap-2">
{Array.from({ length: count }).map((_, index) => (
<Button
key={index}
variant={current === index + 1 ? "default" : "outline"}
size="icon"
className="h-2 w-2 p-0 rounded-full"
className={`h-2 w-2 p-0 rounded-full transition-colors ${
current === index + 1
? "bg-black dark:bg-white"
: "bg-gray-300 dark:bg-gray-600"
}`}
onClick={() => api?.scrollTo(index)}
/>
))}
</div>
<CarouselNext className="static translate-y-0" />
<CarouselNext className="static translate-y-0 dark:bg-gray-800 dark:text-white" />
</div>
</Carousel>
</div>
Expand Down
43 changes: 34 additions & 9 deletions src/components/faqs/faqs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useState } from "react";
import { FiChevronDown } from "react-icons/fi";
import { motion } from "framer-motion";
import { useColorMode } from "@docusaurus/theme-common"; // Docusaurus theme detection

const faqData = [
{
Expand Down Expand Up @@ -42,24 +43,38 @@ const faqData = [

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

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

return (
<section className="py-8 bg-gray-50">
<section
className={`py-8 transition-colors duration-300 ${
isDark ? "bg-[#121212]" : "bg-gray-50"
}`}
>
<div className="mx-auto px-2 sm:px-4 lg:px-6">
<div className="flex flex-col justify-center items-center gap-x-8 gap-y-12 xl:gap-28 lg:flex-row lg:justify-between">
<div className="w-full">
<div className="mb-8 lg:mb-16">
<h6 className="text-lg text-center lg:text-left font-medium text-indigo-600 mb-2">
FAQs
</h6>
<h2 className="text-4xl text-center lg:text-left font-bold text-gray-900 dark:text-gray-100 leading-snug">
<h2
className={`text-4xl text-center lg:text-left font-bold ${
isDark ? "text-gray-100" : "text-gray-900"
} leading-snug`}
>
Looking for answers?
</h2>
<p className="text-gray-600 dark:text-gray-400 text-center lg:text-left">
<p
className={`${
isDark ? "text-gray-400" : "text-gray-600"
} text-center lg:text-left`}
>
Find answers to the most common questions about Recode Hive.
</p>
</div>
Expand All @@ -75,15 +90,19 @@ const FAQs: React.FC = () => {
transition={{ duration: 0.3 }}
>
<button
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"
className={`accordion-toggle group flex justify-between items-center text-lg font-medium w-full transition-all duration-300
${
isDark
? "text-gray-200 bg-gray-800 hover:text-indigo-400"
: "text-gray-700 bg-gray-100 hover:text-indigo-600"
}
p-4 rounded-lg focus:outline-none`}
onClick={() => toggleAccordion(index)}
>
{faq.question}
<motion.span
className="transform transition-transform duration-300"
animate={{
rotate: activeIndex === index ? 180 : 0,
}}
animate={{ rotate: activeIndex === index ? 180 : 0 }}
>
<FiChevronDown size={22} />
</motion.span>
Expand All @@ -97,8 +116,14 @@ const FAQs: React.FC = () => {
}}
transition={{ duration: 0.3, ease: "easeInOut" }}
>
<div
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"
<div
className={`mt-2 text-base transition-colors duration-200 ${
isDark ? "text-gray-400" : "text-gray-600"
}
[&_a]:text-indigo-600 [&_a]:hover:text-indigo-800
dark:[&_a]:text-indigo-400 dark:[&_a]:hover:text-indigo-300
[&_strong]:font-semibold [&_strong]:text-gray-800
dark:[&_strong]:text-gray-200`}
dangerouslySetInnerHTML={{ __html: faq.answer }}
/>
</motion.div>
Expand Down
Loading
Loading