Skip to content

Fixed the visiblity issue in about us page #479

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 1 commit into from
Oct 7, 2025
Merged

Fixed the visiblity issue in about us page #479

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 13 additions & 13 deletions src/components/AboutUs/RoadmapSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ const RoadmapSection: React.FC = () => {
{/* Section header */}
<div className="text-center mb-16">
<motion.h2
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
className="text-4xl font-semibold sm:text-5xl mb-4 tracking-tight"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<span className="text-blue-900 dark:text-blue-400 font-medium">
<span className="text-blue-600 dark:text-blue-400 font-medium">
{roadmapContent.title.prefix}
</span>{' '}
<span className="text-red-600 dark:text-red-400 font-medium">
Expand All @@ -27,15 +27,15 @@ const RoadmapSection: React.FC = () => {
</motion.h2>

<motion.div
className="h-0.5 w-24 bg-gradient-to-r from-blue-600 to-red-600 mx-auto mb-8"
className="h-0.5 w-24 bg-gradient-to-r from-blue-500 to-red-500 dark:from-blue-400 dark:to-red-400 mx-auto mb-8"
initial={{ width: 0 }}
whileInView={{ width: 96 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: 0.2 }}
/>

<motion.p
className="text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto"
className="text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
Expand All @@ -47,7 +47,7 @@ const RoadmapSection: React.FC = () => {

<div className="hidden md:block relative w-full mt-20">
<motion.div
className="absolute top-0 bottom-0 left-1/2 w-0.5 bg-slate-200 dark:bg-gray-700 transform -translate-x-1/2"
className="absolute top-0 bottom-0 left-1/2 w-0.5 bg-gray-200 dark:bg-gray-600/50 transform -translate-x-1/2"
initial={{ scaleY: 0, transformOrigin: 'top' }}
whileInView={{ scaleY: 1 }}
viewport={{ once: true }}
Expand All @@ -70,14 +70,14 @@ const RoadmapSection: React.FC = () => {
{/* Content */}
<div className={`w-3/7 ${index % 2 === 0 ? 'pr-1' : 'pl-1'}`}>
<div
className={`p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md border-t-2 ${
item.borderColor || 'border-blue-600'
} transition-all duration-300 hover:shadow-lg`}
className={`p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-xl dark:shadow-black/20
border-t-2 ${item.borderColor || 'border-blue-600 dark:border-blue-400'}
transition-all duration-300 hover:shadow-lg dark:hover:shadow-2xl dark:hover:shadow-black/30`}
>
<h3 className="text-base font-semibold text-slate-800 mb-2 pb-2 border-b border-slate-100">
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 pb-2 border-b border-gray-100 dark:border-gray-700">
{item.title}
</h3>
<p className="text-slate-600 dark:text-slate-400 text-sm">
<p className="text-gray-600 dark:text-gray-300 text-sm">
{item.description || 'Milestone in our journey'}
</p>
</div>
Expand Down Expand Up @@ -138,9 +138,9 @@ const RoadmapSection: React.FC = () => {

{/* Card */}
<div
className={`flex-grow p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md border-l-2 ${
item.borderColor || 'border-blue-600'
}`}
className={`flex-grow p-5 bg-white dark:bg-gray-800/90 rounded-lg shadow-md dark:shadow-xl dark:shadow-black/20
border-l-2 ${item.borderColor ? item.borderColor.replace('border-', 'border-') + ' dark:' + item.borderColor.replace('blue', 'blue').replace('red', 'red') : 'border-blue-600 dark:border-blue-400'}
backdrop-blur-sm`}
>
<h3 className="text-base font-semibold text-slate-800 mb-2 pb-2 border-b border-slate-100">
{item.title}
Expand Down