406 lines
17 KiB
JavaScript
406 lines
17 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
import {
|
|
Link2,
|
|
Sparkles,
|
|
Zap,
|
|
Shield,
|
|
BarChart3,
|
|
Palette,
|
|
QrCode,
|
|
Globe,
|
|
ArrowRight,
|
|
Check,
|
|
Star,
|
|
ChevronRight
|
|
} from 'lucide-react'
|
|
|
|
export default function Landing() {
|
|
const features = [
|
|
{
|
|
icon: Link2,
|
|
title: 'Custom Links',
|
|
description: 'Create unlimited custom links to share with your audience'
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: 'Beautiful Themes',
|
|
description: 'Customize colors, fonts, and styles to match your brand'
|
|
},
|
|
{
|
|
icon: QrCode,
|
|
title: 'QR Codes',
|
|
description: 'Generate QR codes for easy offline sharing'
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: 'Social Integration',
|
|
description: 'Connect all your social media profiles in one place'
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: 'Analytics',
|
|
description: 'Track visits and engagement with detailed insights'
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: 'Secure & Fast',
|
|
description: 'Enterprise-grade security with lightning-fast load times'
|
|
}
|
|
]
|
|
|
|
const plans = [
|
|
{
|
|
name: 'Free',
|
|
price: '$0',
|
|
period: 'forever',
|
|
features: [
|
|
'Unlimited links',
|
|
'Custom themes',
|
|
'QR code generation',
|
|
'Social media links',
|
|
'Mobile optimized'
|
|
],
|
|
cta: 'Get Started Free',
|
|
popular: false
|
|
},
|
|
{
|
|
name: 'Pro',
|
|
price: '$9',
|
|
period: '/month',
|
|
features: [
|
|
'Everything in Free',
|
|
'Advanced analytics',
|
|
'Custom domain',
|
|
'Priority support',
|
|
'Remove branding'
|
|
],
|
|
cta: 'Start Pro Trial',
|
|
popular: true
|
|
},
|
|
{
|
|
name: 'Business',
|
|
price: '$29',
|
|
period: '/month',
|
|
features: [
|
|
'Everything in Pro',
|
|
'Team collaboration',
|
|
'API access',
|
|
'White-label solution',
|
|
'Dedicated support'
|
|
],
|
|
cta: 'Contact Sales',
|
|
popular: false
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
|
|
<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">
|
|
<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">
|
|
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>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
to="/login"
|
|
className="text-gray-600 hover:text-gray-900 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"
|
|
>
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section className="pt-32 pb-20 px-4 overflow-hidden">
|
|
<div className="max-w-7xl mx-auto">
|
|
<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">
|
|
<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">
|
|
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>
|
|
<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" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Subheadline */}
|
|
<p className="text-xl text-gray-600 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>
|
|
|
|
{/* CTA Buttons */}
|
|
<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"
|
|
>
|
|
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"
|
|
>
|
|
See Features
|
|
<ChevronRight className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
|
|
{/* Social Proof */}
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="flex items-center -space-x-3">
|
|
{[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"
|
|
>
|
|
{String.fromCharCode(64 + i)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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="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">
|
|
{/* Browser Header */}
|
|
<div className="flex items-center gap-2 px-4 py-3 bg-gray-900/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>
|
|
<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">
|
|
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>
|
|
<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>
|
|
<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"
|
|
>
|
|
{link}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section id="features" className="py-24 px-4 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto">
|
|
<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">
|
|
<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">
|
|
Everything You Need
|
|
</h2>
|
|
<p className="text-xl text-gray-600 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">
|
|
{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"
|
|
>
|
|
<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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing Section */}
|
|
<section id="pricing" className="py-24 px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<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">
|
|
<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">
|
|
Choose Your Plan
|
|
</h2>
|
|
<p className="text-xl text-gray-600 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">
|
|
{plans.map((plan, index) => (
|
|
<div
|
|
key={index}
|
|
className={`relative bg-white rounded-3xl p-8 ${
|
|
plan.popular
|
|
? 'border-2 border-blue-500 shadow-2xl shadow-blue-500/20 scale-105'
|
|
: 'border border-gray-200'
|
|
}`}
|
|
>
|
|
{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">
|
|
Most Popular
|
|
</div>
|
|
)}
|
|
<div className="text-center mb-8">
|
|
<h3 className="text-xl font-bold text-gray-900 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-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>
|
|
<span className="text-gray-600">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link
|
|
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'
|
|
}`}
|
|
>
|
|
{plan.cta}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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">
|
|
{/* 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>
|
|
|
|
<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">
|
|
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"
|
|
>
|
|
Create Your Free Page
|
|
<ArrowRight className="w-5 h-5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-12 px-4 border-t border-gray-100">
|
|
<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">
|
|
<Link2 className="w-5 h-5 text-white" />
|
|
</div>
|
|
<span className="text-xl font-bold text-gray-900">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>
|
|
<p className="text-gray-500 text-sm">
|
|
© {new Date().getFullYear()} ArkLinks. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|