Installation
npm install lucide-reactSource Code
wincher-dashboard.tsx
1"use client";
2
3import { Search, TrendingUp, BarChart3, MapPin, ChevronDown, Bell, HelpCircle } from "lucide-react";
4
5export const WincherDashboard = () => {
6 return (
7 <div className="w-full min-h-screen bg-[#F5F5F7]">
8 {/* Navigation Bar */}
9 <nav className="bg-white border-b border-gray-200">
10 <div className="max-w-7xl mx-auto px-6 py-4">
11 <div className="flex items-center justify-between">
12 {/* Logo */}
13 <div className="flex items-center gap-2">
14 <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-lg flex items-center justify-center">
15 <span className="text-white font-bold text-lg">W</span>
16 </div>
17 <span className="text-xl font-semibold text-gray-900">Wincher</span>
18 </div>
19
20 {/* Navigation Links */}
21 <div className="hidden md:flex items-center gap-8">
22 <button className="flex items-center gap-1 text-sm text-gray-700 hover:text-gray-900">
23 Platform <ChevronDown className="w-4 h-4" />
24 </button>
25 <a href="#" className="text-sm text-gray-700 hover:text-gray-900">Resources</a>
26 <a href="#" className="text-sm text-gray-700 hover:text-gray-900">Pricing</a>
27 <a href="#" className="text-sm text-gray-700 hover:text-gray-900">About</a>
28 <a href="#" className="text-sm text-gray-700 hover:text-gray-900">Partners</a>
29 </div>
30
31 {/* Dashboard Button */}
32 <button className="px-6 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50">
33 Dashboard
34 </button>
35 </div>
36 </div>
37 </nav>
38
39 {/* Hero Section */}
40 <div className="max-w-7xl mx-auto px-6 pt-16 pb-8">
41 {/* Rating Badges */}
42 <div className="flex items-center justify-center gap-6 mb-8">
43 <div className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-sm">
44 <div className="w-5 h-5 bg-[#4285F4] rounded-full flex items-center justify-center text-white text-xs font-bold">G</div>
45 <span className="text-sm text-gray-600">Google</span>
46 <span className="text-sm font-semibold text-gray-900">4.4</span>
47 </div>
48 <div className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-sm">
49 <div className="w-5 h-5 bg-[#FF6B35] rounded-full flex items-center justify-center text-white text-xs font-bold">C</div>
50 <span className="text-sm text-gray-600">Capterra</span>
51 <span className="text-sm font-semibold text-gray-900">4.8</span>
52 </div>
53 <div className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-sm">
54 <div className="w-5 h-5 bg-[#FF6B35] rounded-full flex items-center justify-center text-white text-xs font-bold">G2</div>
55 <span className="text-sm text-gray-600">G2</span>
56 <span className="text-sm font-semibold text-gray-900">4.8</span>
57 </div>
58 </div>
59
60 {/* Hero Text */}
61 <div className="text-center mb-8">
62 <h1 className="text-5xl md:text-6xl font-bold mb-4">
63 <span className="text-gray-900">Search visibility platform for</span>
64 <br />
65 <span className="text-gray-400">business</span> <span className="text-gray-900">owners</span>
66 </h1>
67 <p className="text-lg text-gray-600 max-w-2xl mx-auto">
68 Increase your brand visibility in search engines with a complete set of SEO tools
69 </p>
70 </div>
71
72 {/* CTA Buttons */}
73 <div className="flex items-center justify-center gap-4 mb-12">
74 <button className="px-8 py-3 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-lg font-medium hover:from-orange-600 hover:to-orange-700 shadow-lg">
75 Start for Free
76 </button>
77 <button className="px-8 py-3 border border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-50">
78 Contact Us
79 </button>
80 </div>
81
82 {/* Feature Tabs */}
83 <div className="flex items-center justify-center gap-8 mb-12">
84 <button className="flex items-center gap-2 text-sm text-gray-700 hover:text-gray-900">
85 <BarChart3 className="w-4 h-4" />
86 Rank Tracker
87 </button>
88 <button className="flex items-center gap-2 text-sm text-gray-700 hover:text-gray-900">
89 <Search className="w-4 h-4" />
90 Keyword Research
91 </button>
92 <button className="flex items-center gap-2 text-sm text-gray-700 hover:text-gray-900">
93 <TrendingUp className="w-4 h-4" />
94 On-page SEO Checker
95 </button>
96 <button className="flex items-center gap-2 text-sm text-gray-700 hover:text-gray-900">
97 <MapPin className="w-4 h-4" />
98 Local Rank Tracker
99 </button>
100 </div>
101 </div>
102
103 {/* Dashboard Preview */}
104 <div className="max-w-[1400px] mx-auto px-6 pb-16">
105 <div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-gray-200">
106 <div className="flex">
107 {/* Sidebar */}
108 <div className="w-64 bg-white border-r border-gray-100 py-6 px-4">
109 {/* Sidebar Logo */}
110 <div className="flex items-center gap-2 mb-8 px-2">
111 <div className="w-7 h-7 bg-gradient-to-br from-orange-400 to-orange-600 rounded-lg flex items-center justify-center">
112 <span className="text-white font-bold text-sm">W</span>
113 </div>
114 <span className="text-lg font-semibold text-gray-900">Wincher</span>
115 <ChevronDown className="w-4 h-4 ml-auto text-gray-400" />
116 </div>
117
118 {/* Sidebar Menu */}
119 <nav className="space-y-1">
120 <div className="px-3 py-2 bg-gray-50 rounded-lg flex items-center gap-3 text-sm font-medium text-gray-900">
121 <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center">
122 <div className="w-2 h-2 bg-gray-400 rounded-full" />
123 </div>
124 Dashboard
125 </div>
126 <div className="px-3 py-2 flex items-center gap-3 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
127 <div className="w-5 h-5 rounded-full bg-gray-100" />
128 Keywords
129 </div>
130 <div className="px-3 py-2 flex items-center gap-3 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
131 <div className="w-5 h-5 rounded-full bg-gray-100" />
132 Pages
133 </div>
134 <div className="px-3 py-2 flex items-center gap-3 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
135 <div className="w-5 h-5 rounded-full bg-gray-100" />
136 Groups
137 </div>
138 <div className="px-3 py-2 flex items-center gap-3 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
139 <Search className="w-4 h-4" />
140 Keyword Research
141 </div>
142 <div className="px-3 py-2 flex items-center gap-3 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
143 <div className="w-5 h-5 rounded-full bg-gray-100" />
144 Competitors
145 </div>
146 <div className="px-3 py-2 flex items-center gap-3 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
147 <div className="w-5 h-5 rounded-full bg-gray-100" />
148 Reports
149 </div>
150 <div className="px-3 py-2 flex items-center gap-3 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
151 <div className="w-5 h-5 rounded-full bg-gray-100" />
152 Annotations
153 </div>
154 <div className="px-3 py-2 flex items-center gap-3 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
155 <Bell className="w-4 h-4" />
156 Notifications
157 </div>
158 </nav>
159 </div>
160
161 {/* Main Dashboard Content */}
162 <div className="flex-1 bg-gradient-to-br from-purple-50/30 via-white to-orange-50/20">
163 {/* Dashboard Header */}
164 <div className="border-b border-gray-100 bg-white/80 backdrop-blur-sm px-8 py-4">
165 <div className="flex items-center justify-between">
166 <div className="flex items-center gap-4">
167 <button className="flex items-center gap-2 px-3 py-2 bg-orange-500 text-white rounded-lg text-sm font-medium">
168 <div className="w-5 h-5 bg-white/20 rounded" />
169 Wonlan
170 <ChevronDown className="w-4 h-4" />
171 </button>
172 <span className="text-gray-300">/</span>
173 <button className="flex items-center gap-2 px-3 py-2 text-sm text-gray-600">
174 <div className="w-4 h-3 bg-blue-500 rounded-sm" />
175 <span className="w-3 h-3 bg-white border border-gray-300 rounded-sm" />
176 <span className="w-3 h-3 bg-red-500 rounded-sm" />
177 Google fr - French
178 <ChevronDown className="w-4 h-4" />
179 </button>
180 </div>
181 <div className="flex items-center gap-3">
182 <button className="w-8 h-8 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center">
183 <Bell className="w-4 h-4 text-white" />
184 </button>
185 <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-pink-400" />
186 </div>
187 </div>
188 </div>
189
190 {/* Dashboard Content */}
191 <div className="p-8">
192 {/* Dashboard Title */}
193 <div className="flex items-center gap-3 mb-6">
194 <h2 className="text-2xl font-bold text-gray-900">Dashboard</h2>
195 <button className="text-sm text-purple-600 hover:text-purple-700 flex items-center gap-1">
196 <HelpCircle className="w-4 h-4" />
197 Learn
198 </button>
199 </div>
200
201 {/* Search and Filters */}
202 <div className="flex items-center gap-4 mb-8">
203 <div className="flex-1 relative">
204 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
205 <input
206 type="text"
207 placeholder="Search"
208 className="w-full pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
209 />
210 </div>
211 <button className="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:bg-white rounded-lg">
212 Groups
213 <ChevronDown className="w-4 h-4" />
214 </button>
215 <button className="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:bg-white rounded-lg">
216 Keyword filter
217 </button>
218 <button className="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:bg-white rounded-lg">
219 Segments
220 <ChevronDown className="w-4 h-4" />
221 </button>
222 </div>
223
224 {/* Stats Grid */}
225 <div className="grid grid-cols-2 gap-6">
226 {/* Tracked Keywords Card */}
227 <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
228 <div className="mb-4">
229 <div className="text-sm text-gray-500 mb-2">Tracked keywords</div>
230 <div className="flex items-baseline gap-2">
231 <span className="text-4xl font-bold text-gray-900">827</span>
232 <span className="px-2 py-1 bg-green-500 text-white text-xs font-semibold rounded">+41</span>
233 </div>
234 </div>
235
236 {/* Bar Chart */}
237 <div className="flex items-end gap-1 h-16 mb-6">
238 {Array.from({ length: 30 }).map((_, i) => (
239 <div
240 key={i}
241 className="flex-1 bg-purple-400 rounded-t"
242 style={{
243 height: `${Math.random() * 60 + 40}%`,
244 opacity: 0.4 + Math.random() * 0.6
245 }}
246 />
247 ))}
248 </div>
249
250 {/* Stats */}
251 <div className="space-y-2 text-sm">
252 <div className="flex items-center justify-between">
253 <span className="text-gray-600">Ranking keywords</span>
254 <span className="font-semibold text-purple-600">12k</span>
255 </div>
256 <div className="flex items-center justify-between">
257 <span className="text-gray-600">Untracked keywords</span>
258 <span className="font-semibold text-orange-500">67</span>
259 </div>
260 <div className="flex items-center justify-between">
261 <span className="text-gray-600">Competition level</span>
262 <span className="font-semibold text-gray-900">medium</span>
263 </div>
264 </div>
265 </div>
266
267 {/* Traffic Value Card */}
268 <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
269 <div className="mb-4">
270 <div className="text-sm text-gray-500 mb-2">Traffic value</div>
271 <div className="flex items-baseline gap-2">
272 <span className="text-4xl font-bold text-gray-900">$196</span>
273 <span className="px-2 py-1 bg-green-500 text-white text-xs font-semibold rounded">+41</span>
274 </div>
275 </div>
276
277 {/* Line Chart */}
278 <div className="relative h-24">
279 <svg className="w-full h-full" viewBox="0 0 300 100" preserveAspectRatio="none">
280 <path
281 d="M 0,50 Q 50,30 100,45 T 200,35 T 300,40"
282 fill="none"
283 stroke="#8B5CF6"
284 strokeWidth="2"
285 vectorEffect="non-scaling-stroke"
286 />
287 <path
288 d="M 0,50 Q 50,30 100,45 T 200,35 T 300,40 L 300,100 L 0,100 Z"
289 fill="url(#gradient1)"
290 opacity="0.1"
291 />
292 <defs>
293 <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
294 <stop offset="0%" stopColor="#8B5CF6" />
295 <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0" />
296 </linearGradient>
297 </defs>
298 </svg>
299 </div>
300 </div>
301
302 {/* Traffic Card */}
303 <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
304 <div className="mb-4">
305 <div className="text-sm text-gray-500 mb-2">Traffic</div>
306 <div className="flex items-baseline gap-2">
307 <span className="text-4xl font-bold text-gray-900">4.2k</span>
308 <span className="px-2 py-1 bg-green-500 text-white text-xs font-semibold rounded">+675</span>
309 </div>
310 </div>
311
312 {/* Line Chart */}
313 <div className="relative h-24">
314 <div className="absolute top-0 right-0 text-xs text-gray-400">5k</div>
315 <div className="absolute bottom-0 right-0 text-xs text-gray-400">4k</div>
316 <svg className="w-full h-full" viewBox="0 0 300 100" preserveAspectRatio="none">
317 <path
318 d="M 0,80 L 30,75 L 60,70 L 90,60 L 120,55 L 150,50 L 180,45 L 210,50 L 240,40 L 270,35 L 300,30"
319 fill="none"
320 stroke="#60A5FA"
321 strokeWidth="2"
322 vectorEffect="non-scaling-stroke"
323 />
324 </svg>
325 </div>
326 </div>
327
328 {/* Top Competitors Card */}
329 <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
330 <div className="text-sm text-gray-500 mb-4">Top competitors</div>
331 <div className="space-y-4">
332 <div className="flex items-center gap-3">
333 <div className="w-6 h-6 bg-yellow-400 rounded flex items-center justify-center text-white text-xs font-bold">
334 I
335 </div>
336 <span className="text-sm text-gray-900 flex-1">indb.com</span>
337 <span className="text-sm font-semibold text-gray-900">10.2k</span>
338 <div className="w-24 h-2 bg-yellow-100 rounded-full">
339 <div className="w-4/5 h-full bg-yellow-400 rounded-full" />
340 </div>
341 </div>
342 <div className="flex items-center gap-3">
343 <div className="w-6 h-6 bg-orange-500 rounded flex items-center justify-center text-white text-xs font-bold">
344 N
345 </div>
346 <span className="text-sm text-gray-900 flex-1">notionnatives.com</span>
347 <span className="text-sm font-semibold text-gray-900">8.5k</span>
348 <div className="w-24 h-2 bg-orange-100 rounded-full">
349 <div className="w-3/4 h-full bg-orange-500 rounded-full" />
350 </div>
351 </div>
352 <div className="flex items-center gap-3">
353 <div className="w-6 h-6 bg-red-600 rounded flex items-center justify-center text-white text-xs font-bold">
354 N
355 </div>
356 <span className="text-sm text-gray-900 flex-1">netflix.com</span>
357 <span className="text-sm font-semibold text-gray-900">6.1k</span>
358 <div className="w-24 h-2 bg-red-100 rounded-full">
359 <div className="w-3/5 h-full bg-red-600 rounded-full" />
360 </div>
361 </div>
362 </div>
363 </div>
364 </div>
365 </div>
366 </div>
367 </div>
368 </div>
369 </div>
370 </div>
371 );
372};
373
