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 (
<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.

37
src/pages/Login.jsx
View File

@@ -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>

91
src/pages/Signup.jsx
View File

@@ -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>