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 (

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

@@ -74,7 +74,7 @@ export const metadata: Metadata = {
export default function Layout({ children }: { children: ReactNode }) {
return (
<main className="relative z-10 min-h-svh bg-zinc-50 dark:bg-slate-950 transition-colors duration-300 overflow-hidden dark">
<main className="relative z-10 min-h-svh bg-zinc-50 dark:bg-slate-950 transition-colors duration-300 overflow-hidden">
<Navbar />
{children}
<Footer />

8
apps/web/src/app/(home)/page.tsx
View File

@@ -39,24 +39,24 @@ export default function HomePage() {
<ShinyText
text="Be the safest developer with typesafe Typescript"
speed={3}
className="sm:text-lg text-md"
className="sm:text-lg text-md text-gray-600 dark:text-[#b5b5b5a4]"
/>
</div>
</div>
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-indigo-500/20 dark:blur-3xl blur-2xl transform -skew-y-12" />
<div className="absolute inset-0 bg-gradient-to-r dark:from-purple-500/20 dark:to-indigo-500/20 from-blue-300/20 to-indigo-300/20 dark:blur-3xl blur-2xl transform -skew-y-12" />
</div>
</div>
{/* <TerminalDisplay /> */}
<div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50">
<div className="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-300/50 p-6 rounded-md dark:bg-gray-950/30 bg-white/70 backdrop-blur-3xl">
<div className="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-500/50 p-6 rounded-md dark:bg-gray-950/30 bg-white/70 backdrop-blur-3xl">
<div className="relative">
<h2 className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group">
<span className="text-blue-400 font-mono mr-1 animate-pulse">
{">"}
</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500 hover:from-indigo-400 hover:to-blue-500 transition-all duration-300 dark:via-white via-gray-800">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-blue-400 dark:to-indigo-500 hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-400 dark:hover:to-blue-500 transition-all duration-300">
A Symphony of Modern Tech
</span>
</h2>

1
apps/web/src/app/global.css
View File

@@ -11,7 +11,6 @@
}
.shiny-text {
color: #b5b5b5a4;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 40%,