86 lines
3.6 KiB
TypeScript
86 lines
3.6 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
export default function HomePage() {
|
|
const sections = [
|
|
{
|
|
title: 'Dashboard',
|
|
description: 'Get an overview of your link performance with key metrics and trends.',
|
|
href: '/dashboard',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: 'Events',
|
|
description: 'Track and analyze all events including clicks, conversions, and more.',
|
|
href: '/events',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: 'Geographic',
|
|
description: 'See where your visitors are coming from with detailed location data.',
|
|
href: '/analytics/geo',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: 'Devices',
|
|
description: 'Understand what devices, browsers, and operating systems your visitors use.',
|
|
href: '/analytics/devices',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
|
Welcome to ShortURL Analytics
|
|
</h1>
|
|
<p className="text-lg text-gray-600">
|
|
Get detailed insights into your link performance and visitor behavior
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{sections.map((section) => (
|
|
<Link
|
|
key={section.title}
|
|
href={section.href}
|
|
className="group block p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200"
|
|
>
|
|
<div className="flex items-center mb-4">
|
|
<div className="p-2 bg-blue-100 rounded-lg mr-4">
|
|
<div className="text-blue-600">
|
|
{section.icon}
|
|
</div>
|
|
</div>
|
|
<h2 className="text-xl font-semibold text-gray-900 group-hover:text-blue-600 transition-colors duration-200">
|
|
{section.title}
|
|
</h2>
|
|
</div>
|
|
<p className="text-gray-600">
|
|
{section.description}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|