377 lines
19 KiB
TypeScript
377 lines
19 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Documentation Variants Comparison Page
|
|
*
|
|
* Landing page that introduces users to the three documentation design variants.
|
|
* Helps users choose the variant that best suits their preferences.
|
|
*
|
|
* Three Variants:
|
|
* - Variant A: Clean & Minimal (Vercel-inspired)
|
|
* - Variant B: Dense & Information-Rich (Next.js docs-inspired)
|
|
* - Variant C: Modern & Visual (Shopify-inspired)
|
|
*
|
|
* Design:
|
|
* - Hero section explaining the concept
|
|
* - Three large gradient-bordered cards
|
|
* - Visual preview descriptions
|
|
* - Clear CTAs to each variant
|
|
*/
|
|
|
|
export default function DocsIndexPage() {
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Header with back to home */}
|
|
<div className="border-b border-white/10 bg-slate-950/80 backdrop-blur-sm">
|
|
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<a
|
|
href="/"
|
|
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
<span className="text-sm">Back to Home</span>
|
|
</a>
|
|
<div className="text-sm text-gray-500">Choose Your Documentation Style</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-6 py-16">
|
|
{/* Hero Section */}
|
|
<div className="text-center mb-16">
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-purple-500/20 to-cyan-500/20 border-2 border-purple-500/40 mb-6">
|
|
<span className="text-2xl">📚</span>
|
|
<span className="text-sm font-bold text-white">DOCUMENTATION</span>
|
|
</div>
|
|
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
|
|
Choose Your Documentation Style
|
|
</h1>
|
|
<p className="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
|
|
We've created three distinct documentation designs. Pick the style that works best for
|
|
you—same content, different presentation.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Final Variant - Recommended */}
|
|
<div className="mb-12">
|
|
<div className="text-center mb-6">
|
|
<span className="inline-block px-4 py-1.5 rounded-full bg-gradient-to-r from-purple-500 to-cyan-500 text-white text-sm font-semibold mb-2">
|
|
⭐ RECOMMENDED
|
|
</span>
|
|
<h2 className="text-2xl font-bold text-white">Production-Ready Design</h2>
|
|
</div>
|
|
<a
|
|
href="/docs/final"
|
|
className="group block p-10 bg-gradient-to-br from-purple-500/20 via-cyan-500/20 to-purple-500/20 border-4 border-purple-500/50 rounded-3xl hover:border-purple-500/80 transition-all duration-300 shadow-2xl hover:shadow-purple-500/40 hover:scale-[1.02]"
|
|
>
|
|
<div className="flex flex-col md:flex-row items-center gap-8">
|
|
<div className="flex-shrink-0 text-6xl">✨</div>
|
|
<div className="flex-1 text-center md:text-left">
|
|
<h3 className="text-3xl font-bold text-white mb-3 group-hover:text-purple-300 transition-colors">
|
|
Final Variant
|
|
</h3>
|
|
<h4 className="text-xl font-semibold text-purple-300 mb-4">
|
|
Best of All Worlds - Clean, Enhanced & Production-Ready
|
|
</h4>
|
|
<p className="text-base text-gray-300 mb-6 leading-relaxed max-w-3xl">
|
|
The perfect combination: Variant A's clean aesthetic enhanced with expandable code blocks, success/error response styling, clickable image URLs, two tip box styles, enhanced tables, and simplified navigation. This is the variant we recommend for production use.
|
|
</p>
|
|
|
|
<div className="grid md:grid-cols-3 gap-4 mb-6">
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<svg className="w-5 h-5 text-purple-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Clean Variant A base</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<svg className="w-5 h-5 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Expandable code blocks</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<svg className="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Success/error styling</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<svg className="w-5 h-5 text-purple-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Two tip box styles</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<svg className="w-5 h-5 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Enhanced tables</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<svg className="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Reusable navigation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center md:justify-start gap-3 text-purple-300 text-lg font-bold group-hover:gap-4 transition-all">
|
|
<span>Explore Final Variant</span>
|
|
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Other Variants for Reference */}
|
|
<div className="text-center mb-8">
|
|
<h3 className="text-xl font-semibold text-gray-400 mb-2">Other Variants (Reference)</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Explore the original variants that inspired the final design
|
|
</p>
|
|
</div>
|
|
|
|
{/* Variant Cards */}
|
|
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
|
{/* Variant A: Clean & Minimal */}
|
|
<a
|
|
href="/docs/variant-a"
|
|
className="group p-8 bg-gradient-to-br from-purple-500/10 to-transparent border-2 border-purple-500/30 rounded-2xl hover:border-purple-500/60 transition-all duration-300 shadow-xl hover:shadow-purple-500/30 hover:scale-105"
|
|
>
|
|
<div className="text-4xl mb-6">✨</div>
|
|
<h2 className="text-2xl font-bold text-white mb-4 group-hover:text-purple-400 transition-colors">
|
|
Variant A
|
|
</h2>
|
|
<h3 className="text-lg font-semibold text-purple-400 mb-4">Clean & Minimal</h3>
|
|
<p className="text-sm text-gray-400 mb-6 leading-relaxed">
|
|
Vercel-inspired spacious layout with generous whitespace, focused reading experience,
|
|
and subtle visual hierarchy.
|
|
</p>
|
|
|
|
<div className="space-y-3 mb-6">
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<svg className="w-4 h-4 text-purple-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Wide margins, comfortable reading</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<svg className="w-4 h-4 text-purple-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Subtle borders and minimal design</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<svg className="w-4 h-4 text-purple-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Focus on content clarity</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-purple-400 font-semibold group-hover:gap-3 transition-all">
|
|
<span>Explore Variant A</span>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Variant B: Dense & Information-Rich */}
|
|
<a
|
|
href="/docs/variant-b"
|
|
className="group p-8 bg-gradient-to-br from-cyan-500/10 to-transparent border-2 border-cyan-500/30 rounded-2xl hover:border-cyan-500/60 transition-all duration-300 shadow-xl hover:shadow-cyan-500/30 hover:scale-105"
|
|
>
|
|
<div className="text-4xl mb-6">📊</div>
|
|
<h2 className="text-2xl font-bold text-white mb-4 group-hover:text-cyan-400 transition-colors">
|
|
Variant B
|
|
</h2>
|
|
<h3 className="text-lg font-semibold text-cyan-400 mb-4">Dense & Information-Rich</h3>
|
|
<p className="text-sm text-gray-400 mb-6 leading-relaxed">
|
|
Next.js docs-inspired compact layout with section numbers, nested navigation, and
|
|
maximum information density per screen.
|
|
</p>
|
|
|
|
<div className="space-y-3 mb-6">
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<svg className="w-4 h-4 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Compact spacing, more content visible</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<svg className="w-4 h-4 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Section numbers (1., 2.1, etc.)</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<svg className="w-4 h-4 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Hierarchical nested tree navigation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-cyan-400 font-semibold group-hover:gap-3 transition-all">
|
|
<span>Explore Variant B</span>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Variant C: Modern & Visual */}
|
|
<a
|
|
href="/docs/variant-c"
|
|
className="group p-8 bg-gradient-to-br from-amber-500/10 via-purple-500/10 to-cyan-500/10 border-2 border-amber-500/30 rounded-2xl hover:border-amber-500/60 transition-all duration-300 shadow-xl hover:shadow-amber-500/30 hover:scale-105"
|
|
>
|
|
<div className="text-4xl mb-6">🎨</div>
|
|
<h2 className="text-2xl font-bold text-white mb-4 group-hover:text-amber-400 transition-colors">
|
|
Variant C
|
|
</h2>
|
|
<h3 className="text-lg font-semibold text-amber-400 mb-4">Modern & Visual</h3>
|
|
<p className="text-sm text-gray-400 mb-6 leading-relaxed">
|
|
Shopify-inspired colorful card-based design with large emoji icons, gradient borders,
|
|
and playful engaging visual style.
|
|
</p>
|
|
|
|
<div className="space-y-3 mb-6">
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<svg className="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Colorful gradient borders everywhere</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<svg className="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Large emoji icons and visual elements</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<svg className="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Fun, engaging, playful design</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-amber-400 font-semibold group-hover:gap-3 transition-all">
|
|
<span>Explore Variant C</span>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Feature Comparison */}
|
|
<div className="p-8 bg-slate-900/50 border-2 border-slate-700 rounded-2xl backdrop-blur-sm">
|
|
<h3 className="text-2xl font-bold text-white mb-6 text-center">
|
|
All Variants Include
|
|
</h3>
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
<div className="text-center">
|
|
<div className="text-3xl mb-3">📚</div>
|
|
<h4 className="text-base font-semibold text-white mb-2">Same Content</h4>
|
|
<p className="text-sm text-gray-400">
|
|
Identical API documentation, just styled differently
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-3xl mb-3">⚡</div>
|
|
<h4 className="text-base font-semibold text-white mb-2">Interactive Widgets</h4>
|
|
<p className="text-sm text-gray-400">
|
|
Live API testing with your own keys
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-3xl mb-3">🔍</div>
|
|
<h4 className="text-base font-semibold text-white mb-2">Navigation & Search</h4>
|
|
<p className="text-sm text-gray-400">
|
|
Sidebar, TOC, and breadcrumb navigation
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer CTA */}
|
|
<div className="mt-16 text-center">
|
|
<p className="text-gray-400 mb-4">
|
|
Not sure which to choose? Try all three and see which feels right!
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
Each variant links to the same API content—pick your preferred reading experience.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|