Installation
npm install lucide-reactSource Code
autobizz-dashboard.tsx
1"use client";
2
3import { Bell, Home, LayoutDashboard, Folder, Users, Search } from "lucide-react";
4
5export const AutobizzDashboard = () => {
6 return (
7 <div className="w-full min-h-screen bg-gradient-to-bl from-zinc-900 via-zinc-800 to-zinc-900">
8 {/* Navigation Bar */}
9 <nav className="">
10 <div className="max-w-7xl mx-auto px-8 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-gray-50 rounded-lg flex items-center justify-center">
15 <svg className="w-5 h-5 text-gray-800" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
16 <path d="M12 2L2 7l10 5 10-5-10-5z" />
17 <path d="M2 17l10 5 10-5" />
18 <path d="M2 12l10 5 10-5" />
19 </svg>
20 </div>
21 <span className="text-xl font-bold text-white">Autobizz</span>
22 </div>
23
24 {/* Navigation Links */}
25 <div className="hidden md:flex items-center gap-8">
26 <a href="#" className="text-sm text-white/90 hover:text-white transition-colors">Home</a>
27 <a href="#" className="text-sm text-white/90 hover:text-white transition-colors">Pricing</a>
28 <a href="#" className="text-sm text-white/90 hover:text-white transition-colors">Resources</a>
29 <a href="#" className="text-sm text-white/90 hover:text-white transition-colors">Features</a>
30 <a href="#" className="text-sm text-white/90 hover:text-white transition-colors">About</a>
31 </div>
32
33 {/* CTA Button */}
34 <button className="px-6 py-2 bg-white/90 hover:bg-white text-gray-900 rounded-full text-sm font-semibold transition-colors">
35 Get Started
36 </button>
37 </div>
38 </div>
39 </nav>
40
41 <div className="max-w-7xl mx-auto px-8 pt-36 pb-12 text-center">
42 <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full mb-8">
43 <div className="w-2 h-2 bg-primary-foreground rounded-full animate-pulse" />
44 <span className="text-sm text-white/90">We are launching soon, stay tuned.</span>
45 </div>
46
47 <h2 className="text-6xl md:text-7xl text-primary-foreground font-bold mb-6 leading-tight">
48 Take Control of Your
49 <br />
50 Financial Growth
51 </h2>
52
53 <p className="text-xl text-white/80 max-w-2xl mx-auto mb-10">
54 AI powered money management that helps you grow savings without changing your lifestyle
55 </p>
56
57 <div className="flex items-center justify-center gap-4 mb-16">
58 <button className="px-6 py-3.5 hover:bg-primary-foreground/95 bg-primary-foreground text-primary rounded-full font-semibold transition-colors shadow-sm">
59 Start Saving Today
60 </button>
61 </div>
62 </div>
63
64 {/* Dashboard Preview */}
65 <div className="max-w-[1400px] mx-auto px-8 pb-16">
66 <div className="bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-200">
67 <div className="flex">
68 {/* Sidebar */}
69 <div className="w-64 bg-white border-r border-gray-100 py-6">
70 {/* Sidebar Logo */}
71 <div className="flex items-center gap-2 mb-8 px-6">
72 <div className="w-7 h-7 bg-gray-900 rounded-lg flex items-center justify-center">
73 <svg className="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
74 <path d="M12 2L2 7l10 5 10-5-10-5z" />
75 <path d="M2 17l10 5 10-5" />
76 <path d="M2 12l10 5 10-5" />
77 </svg>
78 </div>
79 <span className="text-lg font-bold text-gray-900">Autobizz</span>
80 </div>
81
82 {/* Favorites & Recently */}
83 <div className="px-4 mb-6">
84 <div className="text-xs font-medium text-gray-400 mb-2 px-2">Favorites</div>
85 <div className="text-xs font-medium text-gray-400 mb-4 px-2">Recently</div>
86 </div>
87
88 {/* Main Navigation */}
89 <nav className="space-y-1 px-4">
90 <div className="flex items-center gap-3 px-3 py-2 bg-gray-50 rounded-lg text-sm font-medium text-gray-900">
91 <div className="w-5 h-5 bg-gray-200 rounded flex items-center justify-center">
92 <div className="w-2 h-2 bg-gray-600 rounded" />
93 </div>
94 Overview
95 </div>
96 <div className="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg cursor-pointer">
97 <Folder className="w-5 h-5" />
98 Projects
99 </div>
100 </nav>
101
102 {/* Dashboards Section */}
103 <div className="mt-6 px-4">
104 <div className="text-xs font-medium text-gray-400 mb-2 px-2">Dashboards</div>
105 <nav className="space-y-1">
106 <div className="flex items-center gap-3 px-3 py-2 text-sm text-gray-900 bg-gray-50 rounded-lg">
107 <Home className="w-5 h-5" />
108 Overview
109 </div>
110 <div className="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg cursor-pointer">
111 <LayoutDashboard className="w-5 h-5" />
112 eCommerce
113 </div>
114 <div className="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg cursor-pointer">
115 <Folder className="w-5 h-5" />
116 Projects
117 </div>
118 </nav>
119 </div>
120
121 {/* Pages Section */}
122 <div className="mt-6 px-4">
123 <div className="text-xs font-medium text-gray-400 mb-2 px-2">Pages</div>
124 <nav className="space-y-1">
125 <div className="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg cursor-pointer">
126 <Users className="w-5 h-5" />
127 User Profile
128 </div>
129 <div className="px-5">
130 <div className="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg cursor-pointer">
131 Overview
132 </div>
133 <div className="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg cursor-pointer">
134 Projects
135 </div>
136 <div className="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg cursor-pointer">
137 Campaigns
138 </div>
139 </div>
140 </nav>
141 </div>
142 </div>
143
144 {/* Main Dashboard Content */}
145 <div className="flex-1 bg-gray-50">
146 {/* Dashboard Header */}
147 <div className="border-b border-gray-200 bg-white px-8 py-4">
148 <div className="flex items-center justify-between">
149 <div className="flex items-center gap-4">
150 <button className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg">
151 Default
152 </button>
153 </div>
154 <div className="flex items-center gap-4">
155 <div className="relative">
156 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
157 <input
158 type="text"
159 placeholder="Search"
160 className="pl-9 pr-4 py-2 bg-gray-100 border-0 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 w-64"
161 />
162 </div>
163 <div className="flex items-center gap-2">
164 <button className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-gray-100">
165 <Bell className="w-5 h-5 text-gray-600" />
166 </button>
167 <div className="w-9 h-9 bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg" />
168 </div>
169 </div>
170 </div>
171 </div>
172
173 {/* Dashboard Content */}
174 <div className="p-8 flex gap-8">
175 {/* Main Content Area */}
176 <div className="flex-1">
177 {/* Overview Title */}
178 <div className="flex items-center justify-between mb-6">
179 <h2 className="text-2xl font-bold text-gray-900">Overview</h2>
180 <div className="text-sm text-gray-500">Today</div>
181 </div>
182
183 {/* Stats Grid */}
184 <div className="grid grid-cols-4 gap-4 mb-8">
185 {/* Views Card */}
186 <div className="bg-white rounded-xl p-5 border border-gray-200">
187 <div className="text-xs text-gray-500 mb-2">Views</div>
188 <div className="flex items-baseline gap-2 mb-1">
189 <span className="text-3xl font-bold text-gray-900">7,265</span>
190 </div>
191 <div className="flex items-center gap-1 text-xs">
192 <span className="text-green-600 font-semibold">+11.01%</span>
193 <svg className="w-3 h-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
194 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
195 </svg>
196 </div>
197 </div>
198
199 {/* Visits Card */}
200 <div className="bg-white rounded-xl p-5 border border-gray-200">
201 <div className="text-xs text-gray-500 mb-2">Visits</div>
202 <div className="flex items-baseline gap-2 mb-1">
203 <span className="text-3xl font-bold text-gray-900">3,671</span>
204 </div>
205 <div className="flex items-center gap-1 text-xs">
206 <span className="text-red-600 font-semibold">-0.03%</span>
207 <svg className="w-3 h-3 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
208 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
209 </svg>
210 </div>
211 </div>
212
213 {/* New Users Card */}
214 <div className="bg-white rounded-xl p-5 border border-gray-200">
215 <div className="text-xs text-gray-500 mb-2">New Users</div>
216 <div className="flex items-baseline gap-2 mb-1">
217 <span className="text-3xl font-bold text-gray-900">256</span>
218 </div>
219 <div className="flex items-center gap-1 text-xs">
220 <span className="text-green-600 font-semibold">+15.03%</span>
221 <svg className="w-3 h-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
222 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
223 </svg>
224 </div>
225 </div>
226
227 {/* Active Users Card */}
228 <div className="bg-white rounded-xl p-5 border border-gray-200">
229 <div className="text-xs text-gray-500 mb-2">Active Users</div>
230 <div className="flex items-baseline gap-2 mb-1">
231 <span className="text-3xl font-bold text-gray-900">2,318</span>
232 </div>
233 <div className="flex items-center gap-1 text-xs">
234 <span className="text-green-600 font-semibold">+6.08%</span>
235 <svg className="w-3 h-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
236 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
237 </svg>
238 </div>
239 </div>
240 </div>
241
242 {/* Chart Section */}
243 <div className="bg-white rounded-xl p-6 border border-gray-200 mb-8">
244 <div className="flex items-center justify-between mb-6">
245 <div className="flex items-center gap-6">
246 <div>
247 <div className="text-sm text-gray-500">Total Users</div>
248 <div className="text-2xl font-bold text-gray-900">50k</div>
249 </div>
250 <div className="text-sm text-gray-500">
251 Total Projects
252 </div>
253 <div className="text-sm text-gray-500">
254 Operating Status
255 </div>
256 </div>
257 <div className="flex items-center gap-2">
258 <button className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium">
259 This year
260 </button>
261 <button className="px-3 py-1.5 text-gray-600 hover:bg-gray-50 rounded-lg text-sm">
262 Last year
263 </button>
264 </div>
265 </div>
266
267 {/* Chart */}
268 <div className="h-48 relative">
269 <svg className="w-full h-full" viewBox="0 0 800 200" preserveAspectRatio="none">
270 {/* Grid lines */}
271 <line x1="0" y1="40" x2="800" y2="40" stroke="#f3f4f6" strokeWidth="1" />
272 <line x1="0" y1="80" x2="800" y2="80" stroke="#f3f4f6" strokeWidth="1" />
273 <line x1="0" y1="120" x2="800" y2="120" stroke="#f3f4f6" strokeWidth="1" />
274 <line x1="0" y1="160" x2="800" y2="160" stroke="#f3f4f6" strokeWidth="1" />
275
276 {/* Area fill */}
277 <path
278 d="M 0,120 Q 100,100 200,90 T 400,95 T 600,85 T 800,75 L 800,200 L 0,200 Z"
279 fill="url(#chartGradient)"
280 opacity="0.2"
281 />
282
283 {/* Line */}
284 <path
285 d="M 0,120 Q 100,100 200,90 T 400,95 T 600,85 T 800,75"
286 fill="none"
287 stroke="#14b8a6"
288 strokeWidth="3"
289 strokeLinecap="round"
290 strokeLinejoin="round"
291 />
292
293 {/* Dotted line */}
294 <path
295 d="M 0,140 Q 100,135 200,130 T 400,125 T 600,120 T 800,135"
296 fill="none"
297 stroke="#9ca3af"
298 strokeWidth="2"
299 strokeDasharray="5,5"
300 strokeLinecap="round"
301 strokeLinejoin="round"
302 />
303
304 <defs>
305 <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
306 <stop offset="0%" stopColor="#14b8a6" />
307 <stop offset="100%" stopColor="#14b8a6" stopOpacity="0" />
308 </linearGradient>
309 </defs>
310 </svg>
311 <div className="absolute top-0 left-0 text-xs text-gray-400">50K</div>
312 <div className="absolute bottom-12 left-0 text-xs text-gray-400">10K</div>
313 </div>
314 </div>
315
316 {/* Traffic by Website */}
317 <div className="bg-white rounded-xl p-6 border border-gray-200">
318 <h3 className="text-lg font-bold text-gray-900 mb-4">Traffic by Website</h3>
319 <div className="space-y-3">
320 <div className="flex items-center justify-between">
321 <div className="flex items-center gap-3">
322 <span className="text-sm text-gray-700">Google</span>
323 </div>
324 <div className="text-sm font-medium text-gray-900">——</div>
325 </div>
326 <div className="flex items-center justify-between">
327 <div className="flex items-center gap-3">
328 <span className="text-sm text-gray-700">YouTube</span>
329 </div>
330 <div className="text-sm font-medium text-gray-900">——</div>
331 </div>
332 <div className="flex items-center justify-between">
333 <div className="flex items-center gap-3">
334 <span className="text-sm text-gray-700">Instagram</span>
335 </div>
336 <div className="text-sm font-medium text-gray-900">——</div>
337 </div>
338 <div className="flex items-center justify-between">
339 <div className="flex items-center gap-3">
340 <span className="text-sm text-gray-700">Pinterest</span>
341 </div>
342 <div className="text-sm font-medium text-gray-900">——</div>
343 </div>
344 <div className="flex items-center justify-between">
345 <div className="flex items-center gap-3">
346 <span className="text-sm text-gray-700">Facebook</span>
347 </div>
348 <div className="text-sm font-medium text-gray-900">——</div>
349 </div>
350 </div>
351 </div>
352 </div>
353
354 {/* Notifications Sidebar */}
355 <div className="w-80">
356 <div className="bg-white rounded-xl p-6 border border-gray-200 mb-6">
357 <h3 className="text-lg font-bold text-gray-900 mb-4">Notifications</h3>
358 <div className="space-y-4">
359 <div className="flex gap-3">
360 <div className="w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center flex-shrink-0">
361 <span className="text-sm font-semibold text-teal-600">B</span>
362 </div>
363 <div className="flex-1 min-w-0">
364 <p className="text-sm text-gray-900 font-medium">You fixed a bug.</p>
365 <p className="text-xs text-gray-500">Just now</p>
366 </div>
367 </div>
368 <div className="flex gap-3">
369 <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
370 <span className="text-sm font-semibold text-blue-600">N</span>
371 </div>
372 <div className="flex-1 min-w-0">
373 <p className="text-sm text-gray-900 font-medium">New user registered.</p>
374 <p className="text-xs text-gray-500">59 minutes ago</p>
375 </div>
376 </div>
377 <div className="flex gap-3">
378 <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
379 <span className="text-sm font-semibold text-purple-600">B</span>
380 </div>
381 <div className="flex-1 min-w-0">
382 <p className="text-sm text-gray-900 font-medium">You fixed a bug.</p>
383 <p className="text-xs text-gray-500">12 hours ago</p>
384 </div>
385 </div>
386 <div className="flex gap-3">
387 <div className="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
388 <span className="text-sm font-semibold text-orange-600">A</span>
389 </div>
390 <div className="flex-1 min-w-0">
391 <p className="text-sm text-gray-900 font-medium">Andi Lane subscribed to you.</p>
392 <p className="text-xs text-gray-500">Today, 11:59 AM</p>
393 </div>
394 </div>
395 </div>
396 </div>
397
398 {/* Activities */}
399 <div className="bg-white rounded-xl p-6 border border-gray-200">
400 <h3 className="text-lg font-bold text-gray-900 mb-4">Activities</h3>
401 <div className="space-y-4">
402 <div className="flex gap-3">
403 <div className="w-8 h-8 bg-gradient-to-br from-pink-400 to-purple-400 rounded-full flex-shrink-0" />
404 <div className="flex-1 min-w-0">
405 <p className="text-sm text-gray-900 font-medium">Changed the style.</p>
406 <p className="text-xs text-gray-500">Just now</p>
407 </div>
408 </div>
409 <div className="flex gap-3">
410 <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-400 rounded-full flex-shrink-0" />
411 <div className="flex-1 min-w-0">
412 <p className="text-sm text-gray-900 font-medium">Released a new version.</p>
413 <p className="text-xs text-gray-500">59 minutes ago</p>
414 </div>
415 </div>
416 <div className="flex gap-3">
417 <div className="w-8 h-8 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-full flex-shrink-0" />
418 <div className="flex-1 min-w-0">
419 <p className="text-sm text-gray-900 font-medium">Submitted a bug.</p>
420 <p className="text-xs text-gray-500">12 hours ago</p>
421 </div>
422 </div>
423 <div className="flex gap-3">
424 <div className="w-8 h-8 bg-gradient-to-br from-purple-400 to-pink-400 rounded-full flex-shrink-0" />
425 <div className="flex-1 min-w-0">
426 <p className="text-sm text-gray-900 font-medium">Modified A data in Page X.</p>
427 <p className="text-xs text-gray-500">Today, 11:59 AM</p>
428 </div>
429 </div>
430 </div>
431 </div>
432 </div>
433 </div>
434 </div>
435 </div>
436 </div>
437 </div>
438 </div>
439 );
440};
441
