Arkium/ArkLinks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

landing

Browse Source
This commit is contained in:
Optirx
2026-01-15 12:55:05 +02:00
parent 604e1ac03b
commit f0021ab2b4
3 changed files with 149 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/pages/Landing.jsx
View File

@@ -94,33 +94,33 @@ export default function Landing() {
] ]
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-slate-950">
{/* Navigation */} {/* 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="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 justify-between h-16">
<div className="flex items-center gap-2"> <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" /> <Link2 className="w-5 h-5 text-white" />
</div> </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 ArkLinks
</span> </span>
</div> </div>
<div className="hidden md:flex items-center gap-8"> <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="#features" className="text-gray-400 hover:text-white transition-colors">Features</a>
<a href="#pricing" className="text-gray-600 hover:text-gray-900 transition-colors">Pricing</a> <a href="#pricing" className="text-gray-400 hover:text-white transition-colors">Pricing</a>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Link <Link
to="/login" 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 Log in
</Link> </Link>
<Link <Link
to="/signup" 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 Get Started
</Link> </Link>
@@ -130,27 +130,34 @@ export default function Landing() {
</nav> </nav>
{/* Hero Section */} {/* Hero Section */}
<section className="pt-32 pb-20 px-4 overflow-hidden"> <section className="pt-32 pb-20 px-4 overflow-hidden relative">
<div className="max-w-7xl mx-auto"> {/* 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"> <div className="text-center max-w-4xl mx-auto">
{/* Badge */} {/* 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" /> <Sparkles className="w-4 h-4" />
<span>The #1 Link-in-Bio Platform</span> <span>The #1 Link-in-Bio Platform</span>
</div> </div>
{/* Headline */} {/* 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 One Link to
<span className="relative"> <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"> <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"/> <path d="M2 10C50 4 150 2 298 6" stroke="url(#gradient)" strokeWidth="4" strokeLinecap="round"/>
<defs> <defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#2563EB" /> <stop offset="0%" stopColor="#60A5FA" />
<stop offset="50%" stopColor="#9333EA" /> <stop offset="50%" stopColor="#A78BFA" />
<stop offset="100%" stopColor="#EC4899" /> <stop offset="100%" stopColor="#F472B6" />
</linearGradient> </linearGradient>
</defs> </defs>
</svg> </svg>
@@ -158,7 +165,7 @@ export default function Landing() {
</h1> </h1>
{/* Subheadline */} {/* 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. Create a beautiful, customizable page that houses all your important links.
Share your brand, content, and products with the world in seconds. Share your brand, content, and products with the world in seconds.
</p> </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"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<Link <Link
to="/signup" 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 Create Your Page
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</Link> </Link>
<a <a
href="#features" 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 See Features
<ChevronRight className="w-5 h-5" /> <ChevronRight className="w-5 h-5" />
@@ -187,7 +194,7 @@ export default function Landing() {
{[1, 2, 3, 4, 5].map((i) => ( {[1, 2, 3, 4, 5].map((i) => (
<div <div
key={i} 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)} {String.fromCharCode(64 + i)}
</div> </div>
@@ -199,8 +206,8 @@ export default function Landing() {
<Star key={i} className="w-5 h-5 text-yellow-400 fill-yellow-400" /> <Star key={i} className="w-5 h-5 text-yellow-400 fill-yellow-400" />
))} ))}
</div> </div>
<span className="text-gray-600"> <span className="text-gray-400">
<span className="font-semibold text-gray-900">4.9/5</span> from 10,000+ users <span className="font-semibold text-white">4.9/5</span> from 10,000+ users
</span> </span>
</div> </div>
</div> </div>
@@ -208,37 +215,37 @@ export default function Landing() {
{/* Hero Image/Preview */} {/* Hero Image/Preview */}
<div className="mt-20 relative"> <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"> <div className="relative mx-auto max-w-5xl">
{/* Browser Mockup */} {/* Browser Mockup */}
<div className="bg-gray-900 rounded-2xl p-1.5 shadow-2xl shadow-gray-900/20"> <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-gray-800 rounded-xl overflow-hidden"> <div className="bg-slate-900 rounded-xl overflow-hidden">
{/* Browser Header */} {/* 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="flex gap-1.5">
<div className="w-3 h-3 rounded-full bg-red-500" /> <div className="w-3 h-3 rounded-full bg-red-500/80" />
<div className="w-3 h-3 rounded-full bg-yellow-500" /> <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
<div className="w-3 h-3 rounded-full bg-green-500" /> <div className="w-3 h-3 rounded-full bg-green-500/80" />
</div> </div>
<div className="flex-1 mx-4"> <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 links.arkylx.com/yourbrand
</div> </div>
</div> </div>
</div> </div>
{/* Preview Content */} {/* 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-gradient-to-br from-slate-800 to-slate-900 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="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-white rounded-full mx-auto mb-4 flex items-center justify-center"> <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-gray-900">YB</span> <span className="text-3xl font-bold text-white">YB</span>
</div> </div>
<h3 className="text-white text-xl font-bold mb-2">Your Brand</h3> <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"> <div className="space-y-3">
{['Website', 'Shop', 'YouTube', 'Instagram'].map((link) => ( {['Website', 'Shop', 'YouTube', 'Instagram'].map((link) => (
<div <div
key={link} 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} {link}
</div> </div>
@@ -254,32 +261,33 @@ export default function Landing() {
</section> </section>
{/* Features Section */} {/* Features Section */}
<section id="features" className="py-24 px-4 bg-gray-50"> <section id="features" className="py-24 px-4 relative">
<div className="max-w-7xl mx-auto"> <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="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" /> <Zap className="w-4 h-4" />
<span>Powerful Features</span> <span>Powerful Features</span>
</div> </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 Everything You Need
</h2> </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 Build your perfect link page with our comprehensive set of tools
</p> </p>
</div> </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) => ( {features.map((feature, index) => (
<div <div
key={index} 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"> <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" /> <feature.icon className="w-7 h-7 text-white" />
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-3">{feature.title}</h3> <h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
<p className="text-gray-600 leading-relaxed">{feature.description}</p> <p className="text-gray-400 leading-relaxed">{feature.description}</p>
</div> </div>
))} ))}
</div> </div>
@@ -287,50 +295,53 @@ export default function Landing() {
</section> </section>
{/* Pricing Section */} {/* Pricing Section */}
<section id="pricing" className="py-24 px-4"> <section id="pricing" className="py-24 px-4 relative">
<div className="max-w-7xl mx-auto"> <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="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" /> <Sparkles className="w-4 h-4" />
<span>Simple Pricing</span> <span>Simple Pricing</span>
</div> </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 Choose Your Plan
</h2> </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. Start free and scale as you grow. No hidden fees.
</p> </p>
</div> </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) => ( {plans.map((plan, index) => (
<div <div
key={index} 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 plan.popular
? 'border-2 border-blue-500 shadow-2xl shadow-blue-500/20 scale-105' ? 'border-purple-500/50 shadow-2xl shadow-purple-500/20 scale-105'
: 'border border-gray-200' : 'border-white/5'
}`} }`}
> >
{plan.popular && ( {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 Most Popular
</div> </div>
)} )}
<div className="text-center mb-8"> <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"> <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> <span className="text-gray-500">{plan.period}</span>
</div> </div>
</div> </div>
<ul className="space-y-4 mb-8"> <ul className="space-y-4 mb-8">
{plan.features.map((feature, i) => ( {plan.features.map((feature, i) => (
<li key={i} className="flex items-center gap-3"> <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"> <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-600" /> <Check className="w-3 h-3 text-green-400" />
</div> </div>
<span className="text-gray-600">{feature}</span> <span className="text-gray-300">{feature}</span>
</li> </li>
))} ))}
</ul> </ul>
@@ -338,8 +349,8 @@ export default function Landing() {
to="/signup" to="/signup"
className={`block w-full py-3.5 rounded-xl font-semibold text-center transition-all duration-300 ${ className={`block w-full py-3.5 rounded-xl font-semibold text-center transition-all duration-300 ${
plan.popular plan.popular
? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:shadow-lg hover:shadow-blue-500/25' ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:shadow-lg hover:shadow-purple-500/25'
: 'bg-gray-100 text-gray-900 hover:bg-gray-200' : 'bg-white/5 text-white hover:bg-white/10 border border-white/10'
}`} }`}
> >
{plan.cta} {plan.cta}
@@ -353,23 +364,23 @@ export default function Landing() {
{/* CTA Section */} {/* CTA Section */}
<section className="py-24 px-4"> <section className="py-24 px-4">
<div className="max-w-4xl mx-auto"> <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 */} {/* Background decoration */}
<div className="absolute inset-0 opacity-30"> <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 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-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-purple-500 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
</div> </div>
<div className="relative z-10"> <div className="relative z-10">
<h2 className="text-4xl sm:text-5xl font-bold text-white mb-6"> <h2 className="text-4xl sm:text-5xl font-bold text-white mb-6">
Ready to Get Started? Ready to Get Started?
</h2> </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. Join thousands of creators and businesses who trust ArkLinks to power their online presence.
</p> </p>
<Link <Link
to="/signup" 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 Create Your Free Page
<ArrowRight className="w-5 h-5" /> <ArrowRight className="w-5 h-5" />
@@ -380,19 +391,19 @@ export default function Landing() {
</section> </section>
{/* Footer */} {/* 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="max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row items-center justify-between gap-6"> <div className="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="flex items-center gap-2"> <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" /> <Link2 className="w-5 h-5 text-white" />
</div> </div>
<span className="text-xl font-bold text-gray-900">ArkLinks</span> <span className="text-xl font-bold text-white">ArkLinks</span>
</div> </div>
<div className="flex items-center gap-8 text-gray-600"> <div className="flex items-center gap-8 text-gray-400">
<a href="#features" className="hover:text-gray-900 transition-colors">Features</a> <a href="#features" className="hover:text-white transition-colors">Features</a>
<a href="#pricing" className="hover:text-gray-900 transition-colors">Pricing</a> <a href="#pricing" className="hover:text-white transition-colors">Pricing</a>
<Link to="/login" className="hover:text-gray-900 transition-colors">Login</Link> <Link to="/login" className="hover:text-white transition-colors">Login</Link>
</div> </div>
<p className="text-gray-500 text-sm"> <p className="text-gray-500 text-sm">
© {new Date().getFullYear()} ArkLinks. All rights reserved. © {new Date().getFullYear()} ArkLinks. All rights reserved.

37
src/pages/Login.jsx
View File

@@ -72,32 +72,33 @@ export default function Login() {
} }
return ( 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 */} {/* Background decoration */}
<div className="absolute inset-0 overflow-hidden pointer-events-none"> <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 top-20 left-1/4 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl" />
<div className="absolute bottom-20 right-20 w-96 h-96 bg-purple-500 rounded-full blur-3xl opacity-20" /> <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>
<div className="w-full max-w-md relative z-10"> <div className="w-full max-w-md relative z-10">
{/* Logo */} {/* Logo */}
<div className="flex items-center justify-center gap-3 mb-8"> <div className="flex items-center justify-center gap-3 mb-8">
<Link to="/" className="flex items-center gap-3"> <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" /> <Link2 className="w-6 h-6 text-white" />
</div> </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> </Link>
</div> </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"> <div className="text-center mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-2">Welcome back</h2> <h2 className="text-2xl font-bold text-white mb-2">Welcome back</h2>
<p className="text-gray-500">Log in to manage your link page</p> <p className="text-gray-400">Log in to manage your link page</p>
</div> </div>
{error && ( {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} {error}
</div> </div>
)} )}
@@ -105,17 +106,17 @@ export default function Login() {
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-5">
{/* Identifier */} {/* Identifier */}
<div> <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 Username or Email
</label> </label>
<div className="relative"> <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 <input
type="text" type="text"
required required
value={formData.identifier} value={formData.identifier}
onChange={(e) => setFormData(prev => ({ ...prev, identifier: e.target.value }))} 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" placeholder="yourbrand or you@example.com"
/> />
</div> </div>
@@ -123,23 +124,23 @@ export default function Login() {
{/* Password */} {/* Password */}
<div> <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 Password
</label> </label>
<div className="relative"> <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 <input
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
required required
value={formData.password} value={formData.password}
onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))} 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" placeholder="Your password"
/> />
<button <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} 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" />} {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
</button> </button>
@@ -150,7 +151,7 @@ export default function Login() {
<button <button
type="submit" type="submit"
disabled={loading} 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 ? ( {loading ? (
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" /> <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"> <p className="text-center text-gray-500 text-sm mt-6">
Don't have an account?{' '} 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 Sign up free
</Link> </Link>
</p> </p>

91
src/pages/Signup.jsx
View File

@@ -9,8 +9,7 @@ import {
Sparkles, Sparkles,
Building2, Building2,
AtSign, AtSign,
Lock, Lock
User
} from 'lucide-react' } from 'lucide-react'
import { databases, DATABASE_ID, COLLECTIONS, generateId, Query } from '../lib/appwrite' import { databases, DATABASE_ID, COLLECTIONS, generateId, Query } from '../lib/appwrite'
@@ -176,22 +175,22 @@ export default function Signup() {
const { strength, label, color } = passwordStrength() const { strength, label, color } = passwordStrength()
return ( 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 */} {/* Left Side - Branding */}
<div className="hidden lg:flex lg:w-1/2 flex-col justify-between p-12 relative overflow-hidden"> <div className="hidden lg:flex lg:w-1/2 flex-col justify-between p-12 relative overflow-hidden">
{/* Background decoration */} {/* Background decoration */}
<div className="absolute inset-0 opacity-20"> <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" /> <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-500 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-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-600/10 rounded-full blur-3xl" />
</div> </div>
<div className="relative z-10"> <div className="relative z-10">
<Link to="/" className="flex items-center gap-3"> <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" /> <Link2 className="w-6 h-6 text-white" />
</div> </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> </Link>
</div> </div>
@@ -206,7 +205,7 @@ export default function Signup() {
in seconds in seconds
</span> </span>
</h1> </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. Share everything you create, curate and sell from a single link in bio.
</p> </p>
</div> </div>
@@ -217,13 +216,13 @@ export default function Signup() {
{['A', 'B', 'C', 'D'].map((letter, i) => ( {['A', 'B', 'C', 'D'].map((letter, i) => (
<div <div
key={i} 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} {letter}
</div> </div>
))} ))}
</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 <span className="text-white font-semibold">1,000+</span> signed up this week
</p> </p>
</div> </div>
@@ -236,21 +235,21 @@ export default function Signup() {
{/* Mobile Logo */} {/* Mobile Logo */}
<div className="lg:hidden flex items-center justify-center gap-3 mb-8"> <div className="lg:hidden flex items-center justify-center gap-3 mb-8">
<Link to="/" className="flex items-center gap-3"> <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" /> <Link2 className="w-6 h-6 text-white" />
</div> </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> </Link>
</div> </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"> <div className="text-center mb-8">
<h2 className="text-2xl font-bold text-gray-900 mb-2">Create your account</h2> <h2 className="text-2xl font-bold text-white mb-2">Create your account</h2>
<p className="text-gray-500">Start building your link page today</p> <p className="text-gray-400">Start building your link page today</p>
</div> </div>
{error && ( {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} {error}
</div> </div>
)} )}
@@ -258,17 +257,17 @@ export default function Signup() {
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-5">
{/* Business Name */} {/* Business Name */}
<div> <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 Business / Brand Name
</label> </label>
<div className="relative"> <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 <input
type="text" type="text"
required required
value={formData.businessName} value={formData.businessName}
onChange={handleBusinessNameChange} 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" placeholder="Your Brand Name"
/> />
</div> </div>
@@ -276,11 +275,11 @@ export default function Signup() {
{/* Slug / URL */} {/* Slug / URL */}
<div> <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 Your URL
</label> </label>
<div className="relative"> <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/ links.arkylx.com/
</span> </span>
<input <input
@@ -288,23 +287,23 @@ export default function Signup() {
required required
value={formData.slug} value={formData.slug}
onChange={handleSlugChange} 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 ${ 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-300' : slugAvailable === true ? 'border-green-300' : 'border-gray-200' slugAvailable === false ? 'border-red-500/50' : slugAvailable === true ? 'border-green-500/50' : 'border-white/10'
}`} }`}
placeholder="yourbrand" placeholder="yourbrand"
/> />
<div className="absolute right-4 top-1/2 -translate-y-1/2"> <div className="absolute right-4 top-1/2 -translate-y-1/2">
{checkingSlug ? ( {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 ? ( ) : slugAvailable === true ? (
<Check className="w-5 h-5 text-green-500" /> <Check className="w-5 h-5 text-green-400" />
) : slugAvailable === false ? ( ) : 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} ) : null}
</div> </div>
</div> </div>
{formData.slug && slugAvailable === true && ( {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" /> <Check className="w-4 h-4" />
This URL is available! This URL is available!
</p> </p>
@@ -313,17 +312,17 @@ export default function Signup() {
{/* Email */} {/* Email */}
<div> <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 Email Address
</label> </label>
<div className="relative"> <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 <input
type="email" type="email"
required required
value={formData.email} value={formData.email}
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))} 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" placeholder="you@example.com"
/> />
</div> </div>
@@ -331,23 +330,23 @@ export default function Signup() {
{/* Password */} {/* Password */}
<div> <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 Password
</label> </label>
<div className="relative"> <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 <input
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
required required
value={formData.password} value={formData.password}
onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))} 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" placeholder="Create a password"
/> />
<button <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} 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" />} {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
</button> </button>
@@ -359,7 +358,7 @@ export default function Signup() {
<div <div
key={i} key={i}
className={`h-1.5 flex-1 rounded-full ${ 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 */} {/* Confirm Password */}
<div> <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 Confirm Password
</label> </label>
<div className="relative"> <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 <input
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
required required
value={formData.confirmPassword} value={formData.confirmPassword}
onChange={(e) => setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))} 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 formData.confirmPassword && formData.password !== formData.confirmPassword
? 'border-red-300' ? 'border-red-500/50'
: 'border-gray-200' : 'border-white/10'
}`} }`}
placeholder="Confirm your password" placeholder="Confirm your password"
/> />
{formData.confirmPassword && formData.password === formData.confirmPassword && ( {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>
</div> </div>
@@ -398,7 +397,7 @@ export default function Signup() {
<button <button
type="submit" type="submit"
disabled={loading || !slugAvailable} 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 ? ( {loading ? (
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" /> <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"> <p className="text-center text-gray-500 text-sm mt-6">
Already have an account?{' '} 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 Log in
</Link> </Link>
</p> </p>
</div> </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 By signing up, you agree to our Terms of Service and Privacy Policy
</p> </p>
</div> </div>