asd
This commit is contained in:
IGNY8 VPS (Salman)
@@ -686,427 +686,72 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Circular Progress Flow */}
|
||||
<div className="relative py-8">
|
||||
<div className="flex flex-wrap items-center justify-center gap-8 lg:gap-12">
|
||||
{/* Site with Industry & Sectors */}
|
||||
<Link
|
||||
to="/sites"
|
||||
className={`flex flex-col items-center gap-3 group relative ${
|
||||
progress.hasSiteWithSectors ? 'opacity-100' : 'opacity-60'
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-24 h-24">
|
||||
{/* Circular Progress Ring */}
|
||||
<svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
className="text-gray-200 dark:text-gray-700"
|
||||
/>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
strokeDasharray={`${2 * Math.PI * 45}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.hasSiteWithSectors ? 1 : 0))}`}
|
||||
strokeLinecap="round"
|
||||
className="text-green-500 transition-all duration-500"
|
||||
/>
|
||||
</svg>
|
||||
{/* Icon in Center */}
|
||||
<div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
|
||||
progress.hasSiteWithSectors
|
||||
? 'bg-green-500 text-white shadow-lg scale-110'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
|
||||
}`}>
|
||||
{progress.hasSiteWithSectors ? (
|
||||
<CheckCircleIcon className="w-10 h-10" />
|
||||
) : (
|
||||
<GridIcon className="w-10 h-10" />
|
||||
)}
|
||||
{/* Icon-based Progress Flow */}
|
||||
<div className="py-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
<Link to="/sites" className="flex flex-col items-center gap-3">
|
||||
<div className="flex items-center justify-center w-20 h-20 text-[#c0c7d3]">
|
||||
<GridIcon className="w-14 h-14" strokeWidth={2.4} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center max-w-[100px]">
|
||||
<div className={`text-sm font-bold mb-1 ${
|
||||
progress.hasSiteWithSectors
|
||||
? 'text-green-700 dark:text-green-300'
|
||||
: 'text-gray-600 dark:text-gray-400'
|
||||
}`}>
|
||||
Site & Sectors
|
||||
</div>
|
||||
<div className={`text-base font-semibold ${
|
||||
progress.hasSiteWithSectors
|
||||
? 'text-green-600 dark:text-green-400'
|
||||
: 'text-gray-500 dark:text-gray-500'
|
||||
}`}>
|
||||
{sites.filter(s => s.active_sectors_count > 0).length}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Industry & sectors configured
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
|
||||
<ArrowRightIcon className={`w-8 h-8 ${
|
||||
progress.hasSiteWithSectors ? 'text-green-500' : 'text-gray-300'
|
||||
}`} />
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-semibold text-gray-800 dark:text-white">Site & Sectors</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">{sites.filter(s => s.active_sectors_count > 0).length}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Industry & sectors configured</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Keywords Research */}
|
||||
<Link
|
||||
to="/planner/keyword-opportunities"
|
||||
className={`flex flex-col items-center gap-3 group relative ${
|
||||
progress.keywordsCount > 0 ? 'opacity-100' : 'opacity-60'
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-24 h-24">
|
||||
{/* Circular Progress Ring */}
|
||||
<svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
className="text-gray-200 dark:text-gray-700"
|
||||
/>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
strokeDasharray={`${2 * Math.PI * 45}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.keywordsCount > 0 ? 1 : 0))}`}
|
||||
strokeLinecap="round"
|
||||
className="text-blue-500 transition-all duration-500"
|
||||
/>
|
||||
</svg>
|
||||
{/* Icon in Center */}
|
||||
<div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
|
||||
progress.keywordsCount > 0
|
||||
? 'bg-blue-500 text-white shadow-lg scale-110'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
|
||||
}`}>
|
||||
{progress.keywordsCount > 0 ? (
|
||||
<CheckCircleIcon className="w-10 h-10" />
|
||||
) : (
|
||||
<ListIcon className="w-10 h-10" />
|
||||
)}
|
||||
<Link to="/planner/keyword-opportunities" className="flex flex-col items-center gap-3">
|
||||
<div className="flex items-center justify-center w-20 h-20 text-[#8bb9ff]">
|
||||
<ListIcon className="w-14 h-14" strokeWidth={2.4} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center max-w-[100px]">
|
||||
<div className={`text-sm font-bold mb-1 ${
|
||||
progress.keywordsCount > 0
|
||||
? 'text-blue-700 dark:text-blue-300'
|
||||
: 'text-gray-600 dark:text-gray-400'
|
||||
}`}>
|
||||
Keywords
|
||||
</div>
|
||||
<div className={`text-base font-semibold ${
|
||||
progress.keywordsCount > 0
|
||||
? 'text-blue-600 dark:text-blue-400'
|
||||
: 'text-gray-500 dark:text-gray-500'
|
||||
}`}>
|
||||
{progress.keywordsCount}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Keywords added from opportunities
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
|
||||
<ArrowRightIcon className={`w-8 h-8 ${
|
||||
progress.keywordsCount > 0 ? 'text-blue-500' : 'text-gray-300'
|
||||
}`} />
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-semibold text-gray-800">Keywords</div>
|
||||
<div className="text-lg font-bold text-blue-600">{progress.keywordsCount}</div>
|
||||
<div className="text-xs text-gray-500">Keywords added from opportunities</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Clustering */}
|
||||
<Link
|
||||
to="/planner/clusters"
|
||||
className={`flex flex-col items-center gap-3 group relative ${
|
||||
progress.clustersCount > 0 ? 'opacity-100' : 'opacity-60'
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-24 h-24">
|
||||
{/* Circular Progress Ring */}
|
||||
<svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
className="text-gray-200 dark:text-gray-700"
|
||||
/>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
strokeDasharray={`${2 * Math.PI * 45}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.clustersCount > 0 ? 1 : 0))}`}
|
||||
strokeLinecap="round"
|
||||
className="text-purple-500 transition-all duration-500"
|
||||
/>
|
||||
</svg>
|
||||
{/* Icon in Center */}
|
||||
<div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
|
||||
progress.clustersCount > 0
|
||||
? 'bg-purple-500 text-white shadow-lg scale-110'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
|
||||
}`}>
|
||||
{progress.clustersCount > 0 ? (
|
||||
<CheckCircleIcon className="w-10 h-10" />
|
||||
) : (
|
||||
<GroupIcon className="w-10 h-10" />
|
||||
)}
|
||||
<Link to="/planner/clusters" className="flex flex-col items-center gap-3">
|
||||
<div className="flex items-center justify-center w-20 h-20 text-[#c088ff]">
|
||||
<GroupIcon className="w-14 h-14" strokeWidth={2.4} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center max-w-[100px]">
|
||||
<div className={`text-sm font-bold mb-1 ${
|
||||
progress.clustersCount > 0
|
||||
? 'text-purple-700 dark:text-purple-300'
|
||||
: 'text-gray-600 dark:text-gray-400'
|
||||
}`}>
|
||||
Clusters
|
||||
</div>
|
||||
<div className={`text-base font-semibold ${
|
||||
progress.clustersCount > 0
|
||||
? 'text-purple-600 dark:text-purple-400'
|
||||
: 'text-gray-500 dark:text-gray-500'
|
||||
}`}>
|
||||
{progress.clustersCount}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Keywords grouped into clusters
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
|
||||
<ArrowRightIcon className={`w-8 h-8 ${
|
||||
progress.clustersCount > 0 ? 'text-purple-500' : 'text-gray-300'
|
||||
}`} />
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-semibold text-gray-800">Clusters</div>
|
||||
<div className="text-lg font-bold text-purple-600">{progress.clustersCount}</div>
|
||||
<div className="text-xs text-gray-500">Keywords grouped into clusters</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Ideas/Outlines */}
|
||||
<Link
|
||||
to="/planner/ideas"
|
||||
className={`flex flex-col items-center gap-3 group relative ${
|
||||
progress.ideasCount > 0 ? 'opacity-100' : 'opacity-60'
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-24 h-24">
|
||||
{/* Circular Progress Ring */}
|
||||
<svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
className="text-gray-200 dark:text-gray-700"
|
||||
/>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
strokeDasharray={`${2 * Math.PI * 45}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.ideasCount > 0 ? 1 : 0))}`}
|
||||
strokeLinecap="round"
|
||||
className="text-orange-500 transition-all duration-500"
|
||||
/>
|
||||
</svg>
|
||||
{/* Icon in Center */}
|
||||
<div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
|
||||
progress.ideasCount > 0
|
||||
? 'bg-orange-500 text-white shadow-lg scale-110'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
|
||||
}`}>
|
||||
{progress.ideasCount > 0 ? (
|
||||
<CheckCircleIcon className="w-10 h-10" />
|
||||
) : (
|
||||
<BoltIcon className="w-10 h-10" />
|
||||
)}
|
||||
<Link to="/planner/ideas" className="flex flex-col items-center gap-3">
|
||||
<div className="flex items-center justify-center w-20 h-20 text-[#f9a172]">
|
||||
<BoltIcon className="w-14 h-14" strokeWidth={2.4} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center max-w-[100px]">
|
||||
<div className={`text-sm font-bold mb-1 ${
|
||||
progress.ideasCount > 0
|
||||
? 'text-orange-700 dark:text-orange-300'
|
||||
: 'text-gray-600 dark:text-gray-400'
|
||||
}`}>
|
||||
Ideas
|
||||
</div>
|
||||
<div className={`text-base font-semibold ${
|
||||
progress.ideasCount > 0
|
||||
? 'text-orange-600 dark:text-orange-400'
|
||||
: 'text-gray-500 dark:text-gray-500'
|
||||
}`}>
|
||||
{progress.ideasCount}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Content ideas and outlines
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
|
||||
<ArrowRightIcon className={`w-8 h-8 ${
|
||||
progress.ideasCount > 0 ? 'text-orange-500' : 'text-gray-300'
|
||||
}`} />
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-semibold text-gray-800">Ideas</div>
|
||||
<div className="text-lg font-bold text-orange-600">{progress.ideasCount}</div>
|
||||
<div className="text-xs text-gray-500">Content ideas and outlines</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Content + Images */}
|
||||
<Link
|
||||
to="/writer/content"
|
||||
className={`flex flex-col items-center gap-3 group relative ${
|
||||
progress.contentCount > 0 ? 'opacity-100' : 'opacity-60'
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-24 h-24">
|
||||
{/* Circular Progress Ring */}
|
||||
<svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
className="text-gray-200 dark:text-gray-700"
|
||||
/>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
strokeDasharray={`${2 * Math.PI * 45}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.contentCount > 0 ? 1 : 0))}`}
|
||||
strokeLinecap="round"
|
||||
className="text-green-500 transition-all duration-500"
|
||||
/>
|
||||
</svg>
|
||||
{/* Icon in Center */}
|
||||
<div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
|
||||
progress.contentCount > 0
|
||||
? 'bg-green-500 text-white shadow-lg scale-110'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
|
||||
}`}>
|
||||
{progress.contentCount > 0 ? (
|
||||
<CheckCircleIcon className="w-10 h-10" />
|
||||
) : (
|
||||
<FileTextIcon className="w-10 h-10" />
|
||||
)}
|
||||
<Link to="/writer/content" className="flex flex-col items-center gap-3">
|
||||
<div className="flex items-center justify-center w-20 h-20 text-[#79cd95]">
|
||||
<FileTextIcon className="w-14 h-14" strokeWidth={2.4} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center max-w-[100px]">
|
||||
<div className={`text-sm font-bold mb-1 ${
|
||||
progress.contentCount > 0
|
||||
? 'text-green-700 dark:text-green-300'
|
||||
: 'text-gray-600 dark:text-gray-400'
|
||||
}`}>
|
||||
Content
|
||||
</div>
|
||||
<div className={`text-base font-semibold ${
|
||||
progress.contentCount > 0
|
||||
? 'text-green-600 dark:text-green-400'
|
||||
: 'text-gray-500 dark:text-gray-500'
|
||||
}`}>
|
||||
{progress.contentCount}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Content pieces + images created
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
|
||||
<ArrowRightIcon className={`w-8 h-8 ${
|
||||
progress.contentCount > 0 ? 'text-green-500' : 'text-gray-300'
|
||||
}`} />
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-semibold text-gray-800">Content</div>
|
||||
<div className="text-lg font-bold text-green-600">{progress.contentCount}</div>
|
||||
<div className="text-xs text-gray-500">Content pieces + images created</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Publish Status */}
|
||||
<Link
|
||||
to="/writer/published"
|
||||
className={`flex flex-col items-center gap-3 group relative ${
|
||||
progress.publishedCount > 0 ? 'opacity-100' : 'opacity-60'
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-24 h-24">
|
||||
{/* Circular Progress Ring */}
|
||||
<svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
className="text-gray-200 dark:text-gray-700"
|
||||
/>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
strokeDasharray={`${2 * Math.PI * 45}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.publishedCount > 0 ? 1 : 0))}`}
|
||||
strokeLinecap="round"
|
||||
className="text-indigo-500 transition-all duration-500"
|
||||
/>
|
||||
</svg>
|
||||
{/* Icon in Center */}
|
||||
<div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
|
||||
progress.publishedCount > 0
|
||||
? 'bg-indigo-500 text-white shadow-lg scale-110'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
|
||||
}`}>
|
||||
{progress.publishedCount > 0 ? (
|
||||
<CheckCircleIcon className="w-10 h-10" />
|
||||
) : (
|
||||
<PaperPlaneIcon className="w-10 h-10" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center max-w-[100px]">
|
||||
<div className={`text-sm font-bold mb-1 ${
|
||||
progress.publishedCount > 0
|
||||
? 'text-indigo-700 dark:text-indigo-300'
|
||||
: 'text-gray-600 dark:text-gray-400'
|
||||
}`}>
|
||||
Published
|
||||
</div>
|
||||
<div className={`text-base font-semibold ${
|
||||
progress.publishedCount > 0
|
||||
? 'text-indigo-600 dark:text-indigo-400'
|
||||
: 'text-gray-500 dark:text-gray-500'
|
||||
}`}>
|
||||
{progress.publishedCount}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Content published to site
|
||||
<Link to="/writer/published" className="flex flex-col items-center gap-3">
|
||||
<div className="flex items-center justify-center w-20 h-20 text-[#8c97ff]">
|
||||
<PaperPlaneIcon className="w-14 h-14" strokeWidth={2.4} />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-semibold text-gray-800">Published</div>
|
||||
<div className="text-lg font-bold text-indigo-600">{progress.publishedCount}</div>
|
||||
<div className="text-xs text-gray-500">Content published to site</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -1118,72 +763,72 @@ export default function Home() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
<Link
|
||||
to="/planner/keyword-opportunities"
|
||||
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-blue-500 hover:shadow-md transition group"
|
||||
className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white">
|
||||
<div className="size-12 rounded-lg bg-blue-50 text-blue-600 border border-blue-100 flex items-center justify-center">
|
||||
<ListIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Keyword Research</h4>
|
||||
<p className="text-xs text-slate-600">Discover opportunities</p>
|
||||
<h4 className="font-semibold text-gray-900">Keyword Research</h4>
|
||||
<p className="text-xs text-gray-600">Discover opportunities</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-blue-500 transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/planner/clusters"
|
||||
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-purple-500 hover:shadow-md transition group"
|
||||
className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center text-white">
|
||||
<div className="size-12 rounded-lg bg-purple-50 text-purple-600 border border-purple-100 flex items-center justify-center">
|
||||
<GroupIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Clustering & Ideas</h4>
|
||||
<p className="text-xs text-slate-600">Organize strategy</p>
|
||||
<h4 className="font-semibold text-gray-900">Clustering & Ideas</h4>
|
||||
<p className="text-xs text-gray-600">Organize strategy</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-purple-500 transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/writer/content"
|
||||
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-green-500 hover:shadow-md transition group"
|
||||
className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white">
|
||||
<div className="size-12 rounded-lg bg-green-50 text-green-600 border border-green-100 flex items-center justify-center">
|
||||
<PencilIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Content Generation</h4>
|
||||
<p className="text-xs text-slate-600">Create content</p>
|
||||
<h4 className="font-semibold text-gray-900">Content Generation</h4>
|
||||
<p className="text-xs text-gray-600">Create content</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-green-500 transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/linker/content"
|
||||
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-indigo-500 hover:shadow-md transition group"
|
||||
className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center text-white">
|
||||
<div className="size-12 rounded-lg bg-indigo-50 text-indigo-600 border border-indigo-100 flex items-center justify-center">
|
||||
<PlugInIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Internal Linking</h4>
|
||||
<p className="text-xs text-slate-600">Link content</p>
|
||||
<h4 className="font-semibold text-gray-900">Internal Linking</h4>
|
||||
<p className="text-xs text-gray-600">Link content</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-indigo-500 transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/optimizer/content"
|
||||
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-orange-500 hover:shadow-md transition group"
|
||||
className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center text-white">
|
||||
<div className="size-12 rounded-lg bg-orange-50 text-orange-600 border border-orange-100 flex items-center justify-center">
|
||||
<BoltIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Content Optimization</h4>
|
||||
<p className="text-xs text-slate-600">Optimize content</p>
|
||||
<h4 className="font-semibold text-gray-900">Content Optimization</h4>
|
||||
<p className="text-xs text-gray-600">Optimize content</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-orange-500 transition" />
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
|
||||
</Link>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
Reference in New Issue
Block a user