Color scheme updated

Author: xanderbilla

app/page.tsx

@@ -2,7 +2,7 @@ import HeroContent from "../components/HeroContent";
 
 export default function Home() {
   return (
-    <main className="min-h-screen bg-[#0A1120] flex flex-col items-center justify-center px-4 relative overflow-hidden">
+    <main className="min-h-screen bg-slate-950 flex flex-col items-center justify-center px-4 relative overflow-hidden">
       <div className="relative z-10">
         <HeroContent />
       </div>

components/HeroContent.tsx

@@ -18,20 +18,18 @@ export default function HeroContent() {
         />
       </div>
 
-      <h1 className="text-6xl md:text-8xl font-bold">
-        <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#00FF94] to-[#00FFFF] animate-shimmer">
-          Welcome to Next.js
-        </span>
+      <h1 className="text-6xl md:text-8xl font-bold text-slate-200">
+        Welcome to Next.js
       </h1>
 
-      <p className="text-xl md:text-2xl text-gray-300 max-w-2xl mx-auto font-light">
+      <p className="text-xl md:text-2xl text-slate-400 max-w-2xl mx-auto font-light">
         Build modern web applications with the power of React and Next.js
       </p>
 
       <div className="flex gap-6 justify-center mt-12">
         <Link
           href="https://nextjs.org/docs"
-          className="group px-8 py-3 rounded-full bg-gradient-to-r from-[#00FF94] to-[#00FFFF] text-[#0A1120] font-medium hover:shadow-[0_0_30px_-5px_#00FF94] transition-all duration-300 flex items-center gap-2"
+          className="group px-8 py-3 rounded-full bg-slate-200 text-slate-950 font-medium hover:bg-slate-100 transition-all duration-300 flex items-center gap-2"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -47,7 +45,7 @@ export default function HeroContent() {
         </Link>
         <Link
           href="https://github.com/xanderbilla/nextjs-template"
-          className="group px-8 py-3 rounded-full border border-[#00FF94] text-[#00FF94] font-medium hover:bg-[#00FF94] hover:text-[#0A1120] transition-all duration-300 flex items-center gap-2"
+          className="group px-8 py-3 rounded-full border border-slate-200 text-slate-200 font-medium hover:bg-slate-200 hover:text-slate-950 transition-all duration-300 flex items-center gap-2"
           target="_blank"
           rel="noopener noreferrer"
         >

components/Skeleton.tsx

@@ -4,16 +4,16 @@ export default function Skeleton() {
   return (
     <div className="animate-pulse space-y-8 text-center">
       {/* Logo Skeleton */}
-      <div className="w-48 h-12 bg-gray-800/50 rounded-lg mx-auto"></div>
+      <div className="w-48 h-12 bg-slate-800/50 rounded-lg mx-auto"></div>
 
       {/* Title Skeleton */}
-      <div className="w-3/4 h-16 bg-gray-800/50 rounded-lg mx-auto"></div>
-      <div className="w-1/2 h-8 bg-gray-800/50 rounded-lg mx-auto"></div>
+      <div className="w-3/4 h-16 bg-slate-800/50 rounded-lg mx-auto"></div>
+      <div className="w-1/2 h-8 bg-slate-800/50 rounded-lg mx-auto"></div>
 
       {/* Buttons Skeleton */}
       <div className="flex gap-6 justify-center">
-        <div className="w-32 h-12 bg-gray-800/50 rounded-full"></div>
-        <div className="w-32 h-12 bg-gray-800/50 rounded-full"></div>
+        <div className="w-32 h-12 bg-slate-800/50 rounded-full"></div>
+        <div className="w-32 h-12 bg-slate-800/50 rounded-full"></div>
       </div>
     </div>
   );