From f0021ab2b412baa218a4a2a5d921d96df1e52d87 Mon Sep 17 00:00:00 2001
From: Optirx <optintx@gmail.com>
Date: Thu, 15 Jan 2026 12:55:05 +0200
Subject: [PATCH] landing

---
 src/pages/Landing.jsx | 159 ++++++++++++++++++++++--------------------
 src/pages/Login.jsx   |  37 +++++-----
 src/pages/Signup.jsx  |  91 ++++++++++++------------
 3 files changed, 149 insertions(+), 138 deletions(-)

diff --git a/src/pages/Landing.jsx b/src/pages/Landing.jsx
index f6d4322..7c77ced 100644
--- a/src/pages/Landing.jsx
+++ b/src/pages/Landing.jsx
@@ -94,33 +94,33 @@ export default function Landing() {
   ]
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-slate-950">
       {/* Navigation */}
-      <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
+      <nav className="fixed top-0 left-0 right-0 z-50 bg-slate-950/80 backdrop-blur-md border-b border-white/10">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center gap-2">
-              <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center">
+              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                 <Link2 className="w-5 h-5 text-white" />
               </div>
-              <span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              <span className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                 ArkLinks
               </span>
             </div>
             <div className="hidden md:flex items-center gap-8">
-              <a href="#features" className="text-gray-600 hover:text-gray-900 transition-colors">Features</a>
-              <a href="#pricing" className="text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
+              <a href="#features" className="text-gray-400 hover:text-white transition-colors">Features</a>
+              <a href="#pricing" className="text-gray-400 hover:text-white transition-colors">Pricing</a>
             </div>
             <div className="flex items-center gap-4">
               <Link
                 to="/login"
-                className="text-gray-600 hover:text-gray-900 transition-colors font-medium"
+                className="text-gray-400 hover:text-white transition-colors font-medium"
               >
                 Log in
               </Link>
               <Link
                 to="/signup"
-                className="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-full font-medium hover:shadow-lg hover:shadow-blue-500/25 transition-all duration-300"
+                className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-medium hover:shadow-lg hover:shadow-purple-500/25 transition-all duration-300"
               >
                 Get Started
               </Link>
@@ -130,27 +130,34 @@ export default function Landing() {
       </nav>
 
       {/* Hero Section */}
-      <section className="pt-32 pb-20 px-4 overflow-hidden">
-        <div className="max-w-7xl mx-auto">
+      <section className="pt-32 pb-20 px-4 overflow-hidden relative">
+        {/* Background gradient orbs */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-20 left-1/4 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl" />
+          <div className="absolute top-40 right-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl" />
+          <div className="absolute bottom-20 left-1/3 w-64 h-64 bg-pink-600/10 rounded-full blur-3xl" />
+        </div>
+
+        <div className="max-w-7xl mx-auto relative z-10">
           <div className="text-center max-w-4xl mx-auto">
             {/* Badge */}
-            <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 rounded-full text-blue-600 text-sm font-medium mb-8">
+            <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full text-blue-400 text-sm font-medium mb-8">
               <Sparkles className="w-4 h-4" />
               <span>The #1 Link-in-Bio Platform</span>
             </div>
 
             {/* Headline */}
-            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-gray-900 leading-tight mb-6">
+            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-white leading-tight mb-6">
               One Link to
               <span className="relative">
-                <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent"> Rule Them All</span>
+                <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent"> Rule Them All</span>
                 <svg className="absolute -bottom-2 left-0 w-full" viewBox="0 0 300 12" fill="none">
                   <path d="M2 10C50 4 150 2 298 6" stroke="url(#gradient)" strokeWidth="4" strokeLinecap="round"/>
                   <defs>
                     <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                      <stop offset="0%" stopColor="#2563EB" />
-                      <stop offset="50%" stopColor="#9333EA" />
-                      <stop offset="100%" stopColor="#EC4899" />
+                      <stop offset="0%" stopColor="#60A5FA" />
+                      <stop offset="50%" stopColor="#A78BFA" />
+                      <stop offset="100%" stopColor="#F472B6" />
                     </linearGradient>
                   </defs>
                 </svg>
@@ -158,7 +165,7 @@ export default function Landing() {
             </h1>
 
             {/* Subheadline */}
-            <p className="text-xl text-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+            <p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
               Create a beautiful, customizable page that houses all your important links.
               Share your brand, content, and products with the world in seconds.
             </p>
@@ -167,14 +174,14 @@ export default function Landing() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
               <Link
                 to="/signup"
-                className="group px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-full font-semibold text-lg hover:shadow-2xl hover:shadow-blue-500/30 transition-all duration-300 flex items-center gap-2"
+                className="group px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-semibold text-lg hover:shadow-2xl hover:shadow-purple-500/30 transition-all duration-300 flex items-center gap-2"
               >
                 Create Your Page
                 <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
               </Link>
               <a
                 href="#features"
-                className="px-8 py-4 text-gray-700 font-semibold text-lg hover:text-gray-900 transition-colors flex items-center gap-2"
+                className="px-8 py-4 text-gray-300 font-semibold text-lg hover:text-white transition-colors flex items-center gap-2"
               >
                 See Features
                 <ChevronRight className="w-5 h-5" />
@@ -187,7 +194,7 @@ export default function Landing() {
                 {[1, 2, 3, 4, 5].map((i) => (
                   <div
                     key={i}
-                    className="w-12 h-12 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 border-4 border-white flex items-center justify-center text-gray-500 font-semibold text-sm"
+                    className="w-12 h-12 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 border-4 border-slate-950 flex items-center justify-center text-gray-400 font-semibold text-sm"
                   >
                     {String.fromCharCode(64 + i)}
                   </div>
@@ -199,8 +206,8 @@ export default function Landing() {
                     <Star key={i} className="w-5 h-5 text-yellow-400 fill-yellow-400" />
                   ))}
                 </div>
-                <span className="text-gray-600">
-                  <span className="font-semibold text-gray-900">4.9/5</span> from 10,000+ users
+                <span className="text-gray-400">
+                  <span className="font-semibold text-white">4.9/5</span> from 10,000+ users
                 </span>
               </div>
             </div>
@@ -208,37 +215,37 @@ export default function Landing() {
 
           {/* Hero Image/Preview */}
           <div className="mt-20 relative">
-            <div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent z-10 pointer-events-none" />
+            <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent z-10 pointer-events-none" />
             <div className="relative mx-auto max-w-5xl">
               {/* Browser Mockup */}
-              <div className="bg-gray-900 rounded-2xl p-1.5 shadow-2xl shadow-gray-900/20">
-                <div className="bg-gray-800 rounded-xl overflow-hidden">
+              <div className="bg-slate-800/50 backdrop-blur-sm rounded-2xl p-1.5 shadow-2xl shadow-purple-500/10 border border-white/10">
+                <div className="bg-slate-900 rounded-xl overflow-hidden">
                   {/* Browser Header */}
-                  <div className="flex items-center gap-2 px-4 py-3 bg-gray-900/50">
+                  <div className="flex items-center gap-2 px-4 py-3 bg-slate-800/50">
                     <div className="flex gap-1.5">
-                      <div className="w-3 h-3 rounded-full bg-red-500" />
-                      <div className="w-3 h-3 rounded-full bg-yellow-500" />
-                      <div className="w-3 h-3 rounded-full bg-green-500" />
+                      <div className="w-3 h-3 rounded-full bg-red-500/80" />
+                      <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
+                      <div className="w-3 h-3 rounded-full bg-green-500/80" />
                     </div>
                     <div className="flex-1 mx-4">
-                      <div className="bg-gray-700 rounded-lg px-4 py-1.5 text-gray-400 text-sm text-center">
+                      <div className="bg-slate-700/50 rounded-lg px-4 py-1.5 text-gray-400 text-sm text-center border border-white/5">
                         links.arkylx.com/yourbrand
                       </div>
                     </div>
                   </div>
                   {/* Preview Content */}
-                  <div className="bg-gradient-to-br from-blue-600 to-purple-700 p-8 min-h-[400px] flex items-center justify-center">
-                    <div className="bg-white/10 backdrop-blur-sm rounded-3xl p-8 w-full max-w-sm text-center">
-                      <div className="w-24 h-24 bg-white rounded-full mx-auto mb-4 flex items-center justify-center">
-                        <span className="text-3xl font-bold text-gray-900">YB</span>
+                  <div className="bg-gradient-to-br from-slate-800 to-slate-900 p-8 min-h-[400px] flex items-center justify-center">
+                    <div className="bg-white/5 backdrop-blur-sm rounded-3xl p-8 w-full max-w-sm text-center border border-white/10">
+                      <div className="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center">
+                        <span className="text-3xl font-bold text-white">YB</span>
                       </div>
                       <h3 className="text-white text-xl font-bold mb-2">Your Brand</h3>
-                      <p className="text-white/80 text-sm mb-6">Your awesome bio goes here</p>
+                      <p className="text-gray-400 text-sm mb-6">Your awesome bio goes here</p>
                       <div className="space-y-3">
                         {['Website', 'Shop', 'YouTube', 'Instagram'].map((link) => (
                           <div
                             key={link}
-                            className="bg-white rounded-xl py-3 px-4 text-gray-900 font-medium hover:scale-105 transition-transform cursor-pointer"
+                            className="bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/10 rounded-xl py-3 px-4 text-white font-medium hover:from-blue-500/30 hover:to-purple-500/30 transition-all cursor-pointer"
                           >
                             {link}
                           </div>
@@ -254,32 +261,33 @@ export default function Landing() {
       </section>
 
       {/* Features Section */}
-      <section id="features" className="py-24 px-4 bg-gray-50">
-        <div className="max-w-7xl mx-auto">
+      <section id="features" className="py-24 px-4 relative">
+        <div className="absolute inset-0 bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950" />
+        <div className="max-w-7xl mx-auto relative z-10">
           <div className="text-center mb-16">
-            <div className="inline-flex items-center gap-2 px-4 py-2 bg-purple-50 rounded-full text-purple-600 text-sm font-medium mb-4">
+            <div className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm font-medium mb-4">
               <Zap className="w-4 h-4" />
               <span>Powerful Features</span>
             </div>
-            <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
+            <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
               Everything You Need
             </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
               Build your perfect link page with our comprehensive set of tools
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
             {features.map((feature, index) => (
               <div
                 key={index}
-                className="group bg-white p-8 rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl hover:shadow-blue-500/5 transition-all duration-300"
+                className="group bg-slate-800/30 backdrop-blur-sm p-8 rounded-2xl border border-white/5 hover:border-purple-500/30 hover:bg-slate-800/50 transition-all duration-300"
               >
                 <div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                   <feature.icon className="w-7 h-7 text-white" />
                 </div>
-                <h3 className="text-xl font-bold text-gray-900 mb-3">{feature.title}</h3>
-                <p className="text-gray-600 leading-relaxed">{feature.description}</p>
+                <h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
+                <p className="text-gray-400 leading-relaxed">{feature.description}</p>
               </div>
             ))}
           </div>
@@ -287,50 +295,53 @@ export default function Landing() {
       </section>
 
       {/* Pricing Section */}
-      <section id="pricing" className="py-24 px-4">
-        <div className="max-w-7xl mx-auto">
+      <section id="pricing" className="py-24 px-4 relative">
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-purple-600/10 rounded-full blur-3xl" />
+        </div>
+        <div className="max-w-7xl mx-auto relative z-10">
           <div className="text-center mb-16">
-            <div className="inline-flex items-center gap-2 px-4 py-2 bg-green-50 rounded-full text-green-600 text-sm font-medium mb-4">
+            <div className="inline-flex items-center gap-2 px-4 py-2 bg-green-500/10 border border-green-500/20 rounded-full text-green-400 text-sm font-medium mb-4">
               <Sparkles className="w-4 h-4" />
               <span>Simple Pricing</span>
             </div>
-            <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
+            <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
               Choose Your Plan
             </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
               Start free and scale as you grow. No hidden fees.
             </p>
           </div>
 
-          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
             {plans.map((plan, index) => (
               <div
                 key={index}
-                className={`relative bg-white rounded-3xl p-8 ${
+                className={`relative bg-slate-800/30 backdrop-blur-sm rounded-3xl p-8 border ${
                   plan.popular
-                    ? 'border-2 border-blue-500 shadow-2xl shadow-blue-500/20 scale-105'
-                    : 'border border-gray-200'
+                    ? 'border-purple-500/50 shadow-2xl shadow-purple-500/20 scale-105'
+                    : 'border-white/5'
                 }`}
               >
                 {plan.popular && (
-                  <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1.5 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-sm font-medium rounded-full">
+                  <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1.5 bg-gradient-to-r from-blue-500 to-purple-600 text-white text-sm font-medium rounded-full">
                     Most Popular
                   </div>
                 )}
                 <div className="text-center mb-8">
-                  <h3 className="text-xl font-bold text-gray-900 mb-4">{plan.name}</h3>
+                  <h3 className="text-xl font-bold text-white mb-4">{plan.name}</h3>
                   <div className="flex items-baseline justify-center gap-1">
-                    <span className="text-5xl font-bold text-gray-900">{plan.price}</span>
+                    <span className="text-5xl font-bold text-white">{plan.price}</span>
                     <span className="text-gray-500">{plan.period}</span>
                   </div>
                 </div>
                 <ul className="space-y-4 mb-8">
                   {plan.features.map((feature, i) => (
                     <li key={i} className="flex items-center gap-3">
-                      <div className="w-5 h-5 bg-green-100 rounded-full flex items-center justify-center">
-                        <Check className="w-3 h-3 text-green-600" />
+                      <div className="w-5 h-5 bg-green-500/20 rounded-full flex items-center justify-center">
+                        <Check className="w-3 h-3 text-green-400" />
                       </div>
-                      <span className="text-gray-600">{feature}</span>
+                      <span className="text-gray-300">{feature}</span>
                     </li>
                   ))}
                 </ul>
@@ -338,8 +349,8 @@ export default function Landing() {
                   to="/signup"
                   className={`block w-full py-3.5 rounded-xl font-semibold text-center transition-all duration-300 ${
                     plan.popular
-                      ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:shadow-lg hover:shadow-blue-500/25'
-                      : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
+                      ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:shadow-lg hover:shadow-purple-500/25'
+                      : 'bg-white/5 text-white hover:bg-white/10 border border-white/10'
                   }`}
                 >
                   {plan.cta}
@@ -353,23 +364,23 @@ export default function Landing() {
       {/* CTA Section */}
       <section className="py-24 px-4">
         <div className="max-w-4xl mx-auto">
-          <div className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-3xl p-12 text-center relative overflow-hidden">
+          <div className="bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-pink-600/20 rounded-3xl p-12 text-center relative overflow-hidden border border-white/10">
             {/* Background decoration */}
             <div className="absolute inset-0 opacity-30">
-              <div className="absolute top-0 left-0 w-72 h-72 bg-white rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
-              <div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
+              <div className="absolute top-0 left-0 w-72 h-72 bg-blue-500 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
+              <div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
             </div>
 
             <div className="relative z-10">
               <h2 className="text-4xl sm:text-5xl font-bold text-white mb-6">
                 Ready to Get Started?
               </h2>
-              <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
+              <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
                 Join thousands of creators and businesses who trust ArkLinks to power their online presence.
               </p>
               <Link
                 to="/signup"
-                className="inline-flex items-center gap-2 px-8 py-4 bg-white text-gray-900 rounded-full font-semibold text-lg hover:shadow-2xl transition-all duration-300"
+                className="inline-flex items-center gap-2 px-8 py-4 bg-white text-slate-900 rounded-full font-semibold text-lg hover:shadow-2xl hover:shadow-white/20 transition-all duration-300"
               >
                 Create Your Free Page
                 <ArrowRight className="w-5 h-5" />
@@ -380,19 +391,19 @@ export default function Landing() {
       </section>
 
       {/* Footer */}
-      <footer className="py-12 px-4 border-t border-gray-100">
+      <footer className="py-12 px-4 border-t border-white/10">
         <div className="max-w-7xl mx-auto">
           <div className="flex flex-col md:flex-row items-center justify-between gap-6">
             <div className="flex items-center gap-2">
-              <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center">
+              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                 <Link2 className="w-5 h-5 text-white" />
               </div>
-              <span className="text-xl font-bold text-gray-900">ArkLinks</span>
+              <span className="text-xl font-bold text-white">ArkLinks</span>
             </div>
-            <div className="flex items-center gap-8 text-gray-600">
-              <a href="#features" className="hover:text-gray-900 transition-colors">Features</a>
-              <a href="#pricing" className="hover:text-gray-900 transition-colors">Pricing</a>
-              <Link to="/login" className="hover:text-gray-900 transition-colors">Login</Link>
+            <div className="flex items-center gap-8 text-gray-400">
+              <a href="#features" className="hover:text-white transition-colors">Features</a>
+              <a href="#pricing" className="hover:text-white transition-colors">Pricing</a>
+              <Link to="/login" className="hover:text-white transition-colors">Login</Link>
             </div>
             <p className="text-gray-500 text-sm">
               © {new Date().getFullYear()} ArkLinks. All rights reserved.
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index ea48c59..1a0d2e5 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -72,32 +72,33 @@ export default function Login() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-6">
+    <div className="min-h-screen bg-slate-950 flex items-center justify-center p-6 relative overflow-hidden">
       {/* Background decoration */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute top-20 left-20 w-72 h-72 bg-blue-500 rounded-full blur-3xl opacity-20" />
-        <div className="absolute bottom-20 right-20 w-96 h-96 bg-purple-500 rounded-full blur-3xl opacity-20" />
+        <div className="absolute top-20 left-1/4 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl" />
+        <div className="absolute bottom-20 right-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-pink-600/10 rounded-full blur-3xl" />
       </div>
 
       <div className="w-full max-w-md relative z-10">
         {/* Logo */}
         <div className="flex items-center justify-center gap-3 mb-8">
           <Link to="/" className="flex items-center gap-3">
-            <div className="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-2xl flex items-center justify-center border border-white/20">
+            <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
               <Link2 className="w-6 h-6 text-white" />
             </div>
-            <span className="text-2xl font-bold text-white">ArkLinks</span>
+            <span className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">ArkLinks</span>
           </Link>
         </div>
 
-        <div className="bg-white rounded-3xl p-8 shadow-2xl">
+        <div className="bg-slate-900/50 backdrop-blur-sm rounded-3xl p-8 border border-white/10">
           <div className="text-center mb-8">
-            <h2 className="text-2xl font-bold text-gray-900 mb-2">Welcome back</h2>
-            <p className="text-gray-500">Log in to manage your link page</p>
+            <h2 className="text-2xl font-bold text-white mb-2">Welcome back</h2>
+            <p className="text-gray-400">Log in to manage your link page</p>
           </div>
 
           {error && (
-            <div className="mb-6 p-4 bg-red-50 border border-red-100 rounded-xl text-red-600 text-sm">
+            <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm">
               {error}
             </div>
           )}
@@ -105,17 +106,17 @@ export default function Login() {
           <form onSubmit={handleSubmit} className="space-y-5">
             {/* Identifier */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-sm font-medium text-gray-300 mb-2">
                 Username or Email
               </label>
               <div className="relative">
-                <AtSign className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <AtSign className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                 <input
                   type="text"
                   required
                   value={formData.identifier}
                   onChange={(e) => setFormData(prev => ({ ...prev, identifier: e.target.value }))}
-                  className="w-full pl-12 pr-4 py-3.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-50 focus:bg-white"
+                  className="w-full pl-12 pr-4 py-3.5 bg-slate-800/50 border border-white/10 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all text-white placeholder-gray-500"
                   placeholder="yourbrand or you@example.com"
                 />
               </div>
@@ -123,23 +124,23 @@ export default function Login() {
 
             {/* Password */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-sm font-medium text-gray-300 mb-2">
                 Password
               </label>
               <div className="relative">
-                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                 <input
                   type={showPassword ? 'text' : 'password'}
                   required
                   value={formData.password}
                   onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
-                  className="w-full pl-12 pr-12 py-3.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-50 focus:bg-white"
+                  className="w-full pl-12 pr-12 py-3.5 bg-slate-800/50 border border-white/10 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all text-white placeholder-gray-500"
                   placeholder="Your password"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
                 >
                   {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                 </button>
@@ -150,7 +151,7 @@ export default function Login() {
             <button
               type="submit"
               disabled={loading}
-              className="w-full py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-semibold hover:shadow-lg hover:shadow-blue-500/25 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              className="w-full py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl font-semibold hover:shadow-lg hover:shadow-purple-500/25 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
             >
               {loading ? (
                 <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
@@ -165,7 +166,7 @@ export default function Login() {
 
           <p className="text-center text-gray-500 text-sm mt-6">
             Don't have an account?{' '}
-            <Link to="/signup" className="text-blue-600 hover:text-blue-700 font-medium">
+            <Link to="/signup" className="text-purple-400 hover:text-purple-300 font-medium">
               Sign up free
             </Link>
           </p>
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
index 45bae4a..d77c65e 100644
--- a/src/pages/Signup.jsx
+++ b/src/pages/Signup.jsx
@@ -9,8 +9,7 @@ import {
   Sparkles,
   Building2,
   AtSign,
-  Lock,
-  User
+  Lock
 } from 'lucide-react'
 import { databases, DATABASE_ID, COLLECTIONS, generateId, Query } from '../lib/appwrite'
 
@@ -176,22 +175,22 @@ export default function Signup() {
   const { strength, label, color } = passwordStrength()
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex">
+    <div className="min-h-screen bg-slate-950 flex">
       {/* Left Side - Branding */}
       <div className="hidden lg:flex lg:w-1/2 flex-col justify-between p-12 relative overflow-hidden">
         {/* Background decoration */}
-        <div className="absolute inset-0 opacity-20">
-          <div className="absolute top-20 left-20 w-72 h-72 bg-blue-500 rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-purple-500 rounded-full blur-3xl" />
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-pink-500 rounded-full blur-3xl" />
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-20 left-20 w-72 h-72 bg-blue-600/20 rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl" />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-pink-600/10 rounded-full blur-3xl" />
         </div>
 
         <div className="relative z-10">
           <Link to="/" className="flex items-center gap-3">
-            <div className="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-2xl flex items-center justify-center border border-white/20">
+            <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
               <Link2 className="w-6 h-6 text-white" />
             </div>
-            <span className="text-2xl font-bold text-white">ArkLinks</span>
+            <span className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">ArkLinks</span>
           </Link>
         </div>
 
@@ -206,7 +205,7 @@ export default function Signup() {
               in seconds
             </span>
           </h1>
-          <p className="text-xl text-gray-300 leading-relaxed">
+          <p className="text-xl text-gray-400 leading-relaxed">
             Share everything you create, curate and sell from a single link in bio.
           </p>
         </div>
@@ -217,13 +216,13 @@ export default function Signup() {
               {['A', 'B', 'C', 'D'].map((letter, i) => (
                 <div
                   key={i}
-                  className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-600 to-gray-700 border-2 border-slate-900 flex items-center justify-center text-white text-sm font-medium"
+                  className="w-10 h-10 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 border-2 border-slate-950 flex items-center justify-center text-gray-400 text-sm font-medium"
                 >
                   {letter}
                 </div>
               ))}
             </div>
-            <p className="text-gray-400">
+            <p className="text-gray-500">
               <span className="text-white font-semibold">1,000+</span> signed up this week
             </p>
           </div>
@@ -236,21 +235,21 @@ export default function Signup() {
           {/* Mobile Logo */}
           <div className="lg:hidden flex items-center justify-center gap-3 mb-8">
             <Link to="/" className="flex items-center gap-3">
-              <div className="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-2xl flex items-center justify-center border border-white/20">
+              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
                 <Link2 className="w-6 h-6 text-white" />
               </div>
-              <span className="text-2xl font-bold text-white">ArkLinks</span>
+              <span className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">ArkLinks</span>
             </Link>
           </div>
 
-          <div className="bg-white rounded-3xl p-8 shadow-2xl">
+          <div className="bg-slate-900/50 backdrop-blur-sm rounded-3xl p-8 border border-white/10">
             <div className="text-center mb-8">
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">Create your account</h2>
-              <p className="text-gray-500">Start building your link page today</p>
+              <h2 className="text-2xl font-bold text-white mb-2">Create your account</h2>
+              <p className="text-gray-400">Start building your link page today</p>
             </div>
 
             {error && (
-              <div className="mb-6 p-4 bg-red-50 border border-red-100 rounded-xl text-red-600 text-sm">
+              <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm">
                 {error}
               </div>
             )}
@@ -258,17 +257,17 @@ export default function Signup() {
             <form onSubmit={handleSubmit} className="space-y-5">
               {/* Business Name */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-300 mb-2">
                   Business / Brand Name
                 </label>
                 <div className="relative">
-                  <Building2 className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                  <Building2 className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                   <input
                     type="text"
                     required
                     value={formData.businessName}
                     onChange={handleBusinessNameChange}
-                    className="w-full pl-12 pr-4 py-3.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-50 focus:bg-white"
+                    className="w-full pl-12 pr-4 py-3.5 bg-slate-800/50 border border-white/10 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all text-white placeholder-gray-500"
                     placeholder="Your Brand Name"
                   />
                 </div>
@@ -276,11 +275,11 @@ export default function Signup() {
 
               {/* Slug / URL */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-300 mb-2">
                   Your URL
                 </label>
                 <div className="relative">
-                  <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm">
+                  <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 text-sm">
                     links.arkylx.com/
                   </span>
                   <input
@@ -288,23 +287,23 @@ export default function Signup() {
                     required
                     value={formData.slug}
                     onChange={handleSlugChange}
-                    className={`w-full pl-[145px] pr-12 py-3.5 border rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-50 focus:bg-white ${
-                      slugAvailable === false ? 'border-red-300' : slugAvailable === true ? 'border-green-300' : 'border-gray-200'
+                    className={`w-full pl-[145px] pr-12 py-3.5 bg-slate-800/50 border rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all text-white placeholder-gray-500 ${
+                      slugAvailable === false ? 'border-red-500/50' : slugAvailable === true ? 'border-green-500/50' : 'border-white/10'
                     }`}
                     placeholder="yourbrand"
                   />
                   <div className="absolute right-4 top-1/2 -translate-y-1/2">
                     {checkingSlug ? (
-                      <div className="w-5 h-5 border-2 border-gray-300 border-t-transparent rounded-full animate-spin" />
+                      <div className="w-5 h-5 border-2 border-gray-500 border-t-transparent rounded-full animate-spin" />
                     ) : slugAvailable === true ? (
-                      <Check className="w-5 h-5 text-green-500" />
+                      <Check className="w-5 h-5 text-green-400" />
                     ) : slugAvailable === false ? (
-                      <span className="text-red-500 text-xs font-medium">Taken</span>
+                      <span className="text-red-400 text-xs font-medium">Taken</span>
                     ) : null}
                   </div>
                 </div>
                 {formData.slug && slugAvailable === true && (
-                  <p className="mt-1.5 text-sm text-green-600 flex items-center gap-1">
+                  <p className="mt-1.5 text-sm text-green-400 flex items-center gap-1">
                     <Check className="w-4 h-4" />
                     This URL is available!
                   </p>
@@ -313,17 +312,17 @@ export default function Signup() {
 
               {/* Email */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-300 mb-2">
                   Email Address
                 </label>
                 <div className="relative">
-                  <AtSign className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                  <AtSign className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                   <input
                     type="email"
                     required
                     value={formData.email}
                     onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
-                    className="w-full pl-12 pr-4 py-3.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-50 focus:bg-white"
+                    className="w-full pl-12 pr-4 py-3.5 bg-slate-800/50 border border-white/10 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all text-white placeholder-gray-500"
                     placeholder="you@example.com"
                   />
                 </div>
@@ -331,23 +330,23 @@ export default function Signup() {
 
               {/* Password */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-300 mb-2">
                   Password
                 </label>
                 <div className="relative">
-                  <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                  <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                   <input
                     type={showPassword ? 'text' : 'password'}
                     required
                     value={formData.password}
                     onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
-                    className="w-full pl-12 pr-12 py-3.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-50 focus:bg-white"
+                    className="w-full pl-12 pr-12 py-3.5 bg-slate-800/50 border border-white/10 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all text-white placeholder-gray-500"
                     placeholder="Create a password"
                   />
                   <button
                     type="button"
                     onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                    className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
                   >
                     {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                   </button>
@@ -359,7 +358,7 @@ export default function Signup() {
                         <div
                           key={i}
                           className={`h-1.5 flex-1 rounded-full ${
-                            i <= strength ? color : 'bg-gray-200'
+                            i <= strength ? color : 'bg-slate-700'
                           }`}
                         />
                       ))}
@@ -371,25 +370,25 @@ export default function Signup() {
 
               {/* Confirm Password */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-300 mb-2">
                   Confirm Password
                 </label>
                 <div className="relative">
-                  <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                  <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                   <input
                     type={showPassword ? 'text' : 'password'}
                     required
                     value={formData.confirmPassword}
                     onChange={(e) => setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))}
-                    className={`w-full pl-12 pr-12 py-3.5 border rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-50 focus:bg-white ${
+                    className={`w-full pl-12 pr-12 py-3.5 bg-slate-800/50 border rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all text-white placeholder-gray-500 ${
                       formData.confirmPassword && formData.password !== formData.confirmPassword
-                        ? 'border-red-300'
-                        : 'border-gray-200'
+                        ? 'border-red-500/50'
+                        : 'border-white/10'
                     }`}
                     placeholder="Confirm your password"
                   />
                   {formData.confirmPassword && formData.password === formData.confirmPassword && (
-                    <Check className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-green-500" />
+                    <Check className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-green-400" />
                   )}
                 </div>
               </div>
@@ -398,7 +397,7 @@ export default function Signup() {
               <button
                 type="submit"
                 disabled={loading || !slugAvailable}
-                className="w-full py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-semibold hover:shadow-lg hover:shadow-blue-500/25 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                className="w-full py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl font-semibold hover:shadow-lg hover:shadow-purple-500/25 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
               >
                 {loading ? (
                   <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
@@ -413,13 +412,13 @@ export default function Signup() {
 
             <p className="text-center text-gray-500 text-sm mt-6">
               Already have an account?{' '}
-              <Link to="/login" className="text-blue-600 hover:text-blue-700 font-medium">
+              <Link to="/login" className="text-purple-400 hover:text-purple-300 font-medium">
                 Log in
               </Link>
             </p>
           </div>
 
-          <p className="text-center text-gray-400 text-xs mt-6">
+          <p className="text-center text-gray-600 text-xs mt-6">
             By signing up, you agree to our Terms of Service and Privacy Policy
           </p>
         </div>