Spaces:
Sleeping
Sleeping
File size: 10,459 Bytes
f37809e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 | import {
Link,
Shield,
BarChart3,
Globe,
Clock,
Sparkles,
Zap,
Lock,
TrendingUp,
MapPin,
Server
} from 'lucide-react'
const features = [
{
icon: Link,
title: 'Custom Slugs',
description: 'Create memorable short links with your own custom aliases instead of random characters.',
color: 'from-emerald-500 to-teal-500',
bgColor: 'bg-emerald-500/10',
borderColor: 'border-emerald-500/20',
iconColor: 'text-emerald-400'
},
{
icon: Shield,
title: 'Malware Detection',
description: 'Every URL is checked against known malicious databases to protect your users from harmful sites.',
color: 'from-amber-500 to-orange-500',
bgColor: 'bg-amber-500/10',
borderColor: 'border-amber-500/20',
iconColor: 'text-amber-400'
},
{
icon: BarChart3,
title: 'Click Analytics',
description: 'Track every click with detailed analytics including geolocation, IP address, and timestamps.',
color: 'from-cyan-500 to-blue-500',
bgColor: 'bg-cyan-500/10',
borderColor: 'border-cyan-500/20',
iconColor: 'text-cyan-400'
},
{
icon: Clock,
title: 'Link Expiration',
description: 'Set expiration dates for temporary links. Perfect for time-sensitive campaigns and promotions.',
color: 'from-violet-500 to-purple-500',
bgColor: 'bg-violet-500/10',
borderColor: 'border-violet-500/20',
iconColor: 'text-violet-400'
},
{
icon: Zap,
title: 'Lightning Fast',
description: 'Redirects happen in milliseconds thanks to our global edge network and optimized infrastructure.',
color: 'from-pink-500 to-rose-500',
bgColor: 'bg-pink-500/10',
borderColor: 'border-pink-500/20',
iconColor: 'text-pink-400'
},
{
icon: Lock,
title: 'Secure by Default',
description: 'All redirects use HTTPS by default. Optional password protection for sensitive links coming soon.',
color: 'from-sky-500 to-indigo-500',
bgColor: 'bg-sky-500/10',
borderColor: 'border-sky-500/20',
iconColor: 'text-sky-400'
}
]
export default function FeatureSection() {
return (
<section id="features" className="relative py-20 lg:py-32">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 text-slate-400 text-sm font-medium mb-6">
<Sparkles className="w-4 h-4" />
Powerful Features
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
Everything you need in a{' '}
<span className="bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
URL shortener
</span>
</h2>
<p className="text-lg text-slate-400 max-w-2xl mx-auto">
Built for developers, marketers, and everyday users who need reliable,
feature-rich link management.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{features.map((feature, index) => {
const Icon = feature.icon
return (
<div
key={feature.title}
className={`group relative bg-slate-900/50 backdrop-blur-sm border ${feature.borderColor} rounded-2xl p-6 hover:bg-slate-800/50 transition-all duration-300 hover:scale-[1.02]`}
style={{ animationDelay: `${index * 100}ms` }}
>
<div className={`w-12 h-12 rounded-xl ${feature.bgColor} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
<Icon className={`w-6 h-6 ${feature.iconColor}`} />
</div>
<h3 className="text-lg font-semibold text-slate-100 mb-2">{feature.title}</h3>
<p className="text-sm text-slate-400 leading-relaxed">{feature.description}</p>
<div className={`absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r ${feature.color} opacity-0 group-hover:opacity-100 transition-opacity rounded-b-2xl`} />
</div>
)
})}
</div>
<div id="analytics" className="mt-24 lg:mt-32">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="space-y-6">
<h3 className="text-2xl sm:text-3xl font-bold">
Deep Dive <span className="text-emerald-400">Analytics</span>
</h3>
<p className="text-slate-400 leading-relaxed">
Understand your audience with comprehensive click tracking. See where your visitors
are coming from, what devices they use, and when they click.
</p>
<div className="space-y-4">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center shrink-0">
<MapPin className="w-5 h-5 text-emerald-400" />
</div>
<div>
<h4 className="font-medium text-slate-200">Geolocation Tracking</h4>
<p className="text-sm text-slate-500">Know which countries and cities your clicks originate from.</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-cyan-500/10 flex items-center justify-center shrink-0">
<Globe className="w-5 h-5 text-cyan-400" />
</div>
<div>
<h4 className="font-medium text-slate-200">IP & Device Detection</h4>
<p className="text-sm text-slate-500">Track IP addresses and identify browsers and operating systems.</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-violet-500/10 flex items-center justify-center shrink-0">
<TrendingUp className="w-5 h-5 text-violet-400" />
</div>
<div>
<h4 className="font-medium text-slate-200">Real-time Metrics</h4>
<p className="text-sm text-slate-500">Watch your click counts update instantly as visitors arrive.</p>
</div>
</div>
</div>
</div>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-emerald-500/10 blur-3xl" />
<div className="relative bg-slate-900/80 backdrop-blur-sm border border-slate-800 rounded-2xl p-6 shadow-2xl">
<div className="flex items-center justify-between mb-6">
<h4 className="font-semibold text-slate-200">Link Analytics</h4>
<span className="text-xs px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400">Live</span>
</div>
<div className="space-y-4">
<div className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
<MousePointerClick className="w-4 h-4 text-emerald-400" />
</div>
<div>
<p className="text-sm font-medium text-slate-200">Total Clicks</p>
<p className="text-xs text-slate-500">All time</p>
</div>
</div>
<span className="text-xl font-bold text-emerald-400">1,247</span>
</div>
<div className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-cyan-500/10 flex items-center justify-center">
<Globe className="w-4 h-4 text-cyan-400" />
</div>
<div>
<p className="text-sm font-medium text-slate-200">Top Country</p>
<p className="text-xs text-slate-500">United States</p>
</div>
</div>
<span className="text-sm font-bold text-cyan-400">482</span>
</div>
<div className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-violet-500/10 flex items-center justify-center">
<Server className="w-4 h-4 text-violet-400" />
</div>
<div>
<p className="text-sm font-medium text-slate-200">Unique IPs</p>
<p className="text-xs text-slate-500">Distinct visitors</p>
</div>
</div>
<span className="text-sm font-bold text-violet-400">856</span>
</div>
</div>
<div className="mt-6 pt-6 border-t border-slate-800">
<div className="flex items-end gap-2 h-24">
{[40, 65, 45, 80, 55, 90, 70, 85, 60, 75, 50, 95].map((h, i) => (
<div key={i} className="flex-1 flex flex-col items-center gap-1">
<div
className="w-full rounded-sm bg-emerald-500/30 hover:bg-emerald-500/50 transition-colors"
style={{ height: `${h}%` }}
/>
</div>
))}
</div>
<div className="flex justify-between mt-2">
<span className="text-xs text-slate-600">Jan</span>
<span className="text-xs text-slate-600">Dec</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
// Need to import this for the analytics section
import { MousePointerClick } from 'lucide-react' |