franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor styles for improved accessibility and visual consistency across components

Browse Source
This commit is contained in:
fgrreloaded
2025-03-25 18:13:36 +05:30
parent b3f94896ab
commit 9c2b3150d5
5 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/app/(home)/_components/CustomizableSection.tsx
View File

@@ -4,7 +4,7 @@ import CustomizableStack from "./CustomizableStack";
export default function CustomizableSection() {
return (
<section className="w-full max-w-6xl mx-auto space-y-12 mt-24 relative z-50">
<div className="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-300/30 p-6 rounded-md bg-white/80 dark:bg-gray-950/30 backdrop-blur-sm">
<div className="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-500/30 p-6 rounded-md bg-white/80 dark:bg-gray-950/30 backdrop-blur-sm">
<div className="relative">
<motion.h2
initial={{ opacity: 0, y: 20 }}
@@ -15,7 +15,7 @@ export default function CustomizableSection() {
<span className="text-blue-500 dark:text-blue-400 font-mono mr-1 animate-pulse">
{">"}
</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400 hover:from-purple-500 hover:to-blue-600 dark:hover:from-purple-400 dark:hover:to-blue-500 transition-all duration-300">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400 transition-all duration-300">
Your Stack, Your Choice
</span>
</motion.h2>

2
apps/web/src/app/(home)/_components/TechNodeComponent.tsx
View File

@@ -28,7 +28,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
`;
const activeStyles = data.isActive
? "opacity-100 dark:bg-gradient-to-br dark:from-indigo-900/10 dark:to-violet-900/10 bg-gradient-to-br from-indigo-100/40 to-violet-100/40"
? "opacity-100 dark:bg-gradient-to-br dark:from-indigo-900/30 dark:to-violet-900/30 bg-gradient-to-br from-indigo-50 to-violet-50"
: "opacity-80 hover:opacity-95 dark:bg-slate-800 bg-slate-100";
return (