light mode

This commit is contained in:
Aman Varshney
2025-03-24 03:00:24 +05:30
parent 4b7dc843ca
commit 5255c21891
19 changed files with 346 additions and 271 deletions

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 border-gray-700/30 p-6 rounded-md 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-300/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 }}
@@ -12,14 +12,14 @@ export default function CustomizableSection() {
transition={{ duration: 0.5 }}
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 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-400 via-purple-400 to-pink-400 hover:from-purple-400 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 hover:from-purple-500 hover:to-blue-600 dark:hover:from-purple-400 dark:hover:to-blue-500 transition-all duration-300">
Your Stack, Your Choice
</span>
</motion.h2>
<div className="absolute -inset-1 bg-gradient-to-r from-gray-800/0 via-gray-700/10 to-gray-800/0 blur-xl -z-10" />
<div className="absolute -inset-1 bg-gradient-to-r from-gray-300/0 via-gray-300/10 to-gray-300/0 dark:from-gray-800/0 dark:via-gray-700/10 dark:to-gray-800/0 blur-xl -z-10" />
</div>
<motion.div
@@ -28,27 +28,27 @@ export default function CustomizableSection() {
transition={{ duration: 0.5, delay: 0.2 }}
className="space-y-4 max-w-3xl mx-auto"
>
<p className="sm:text-xl text-gray-300 leading-relaxed font-mono">
<span className="text-yellow-400">$</span> Better-T Stack with
defaults,
<span className="text-blue-400 font-semibold">
<p className="sm:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-mono">
<span className="text-yellow-600 dark:text-yellow-400">$</span>{" "}
Better-T Stack with defaults,
<span className="text-blue-600 dark:text-blue-400 font-semibold">
{" "}
customizable options
</span>{" "}
for your perfect development environment
</p>
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400">
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-600 dark:text-gray-400">
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
--multiple-database-options
</span>
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
--flexible-authentication
</span>
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
--alternative-orms
</span>
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
--framework-choices
</span>
</div>