Initial commit
This commit is contained in:
Developer
193
app/resources/page.tsx
Normal file
193
app/resources/page.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
const resources = [
|
||||
{
|
||||
id: 1,
|
||||
icon: "📄",
|
||||
category: "Guide",
|
||||
title: "Estate Planning Basics",
|
||||
description: "A comprehensive guide to getting started with estate planning",
|
||||
type: "PDF",
|
||||
downloads: 1240,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "📋",
|
||||
category: "Template",
|
||||
title: "Will Template",
|
||||
description: "Customizable template to help you create your will",
|
||||
type: "Document",
|
||||
downloads: 892,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "💰",
|
||||
category: "Guide",
|
||||
title: "Tax Planning Guide",
|
||||
description: "Strategies to minimize estate taxes and maximize inheritance",
|
||||
type: "PDF",
|
||||
downloads: 567,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "🏥",
|
||||
category: "Guide",
|
||||
title: "Healthcare Directives",
|
||||
description: "Learn about living wills and healthcare proxies",
|
||||
type: "Checklist",
|
||||
downloads: 734,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "👨👩👧👦",
|
||||
category: "Template",
|
||||
title: "Trust Planning Guide",
|
||||
description: "Understanding different types of trusts and their benefits",
|
||||
type: "Guide",
|
||||
downloads: 856,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
icon: "🎓",
|
||||
category: "Video",
|
||||
title: "Video Library",
|
||||
description: "Access our collection of educational videos",
|
||||
type: "Video",
|
||||
downloads: 1450,
|
||||
},
|
||||
];
|
||||
|
||||
const categories = ["All", "Guide", "Template", "Video"];
|
||||
|
||||
export default function ResourcesPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
|
||||
const filteredResources =
|
||||
selectedCategory === "All"
|
||||
? resources
|
||||
: resources.filter((r) => r.category === selectedCategory);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-800">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden px-6 py-20 sm:py-28">
|
||||
{/* Animated background blobs */}
|
||||
<div className="absolute inset-0 -z-10 overflow-hidden">
|
||||
<div className="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-primary/20 mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-secondary/20 mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute top-1/2 left-1/2 h-80 w-80 rounded-full bg-blue-500/20 mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-6xl mx-auto text-center relative z-10">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-semibold mb-6">
|
||||
📚 Learning Center
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl sm:text-6xl font-bold text-slate-900 dark:text-white mb-6 leading-tight">
|
||||
Knowledge<span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> Resources</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl sm:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8 leading-relaxed">
|
||||
Access essential guides, templates, and tools to master estate planning
|
||||
</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4 max-w-2xl mx-auto mt-12">
|
||||
<div className="card p-4 backdrop-blur-xl bg-white/50 dark:bg-slate-800/50 border border-white/20 dark:border-slate-700/20">
|
||||
<div className="text-2xl font-bold text-primary">{resources.length}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Resources</div>
|
||||
</div>
|
||||
<div className="card p-4 backdrop-blur-xl bg-white/50 dark:bg-slate-800/50 border border-white/20 dark:border-slate-700/20">
|
||||
<div className="text-2xl font-bold text-primary">{resources.reduce((a, b) => a + b.downloads, 0).toLocaleString()}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Downloads</div>
|
||||
</div>
|
||||
<div className="card p-4 backdrop-blur-xl bg-white/50 dark:bg-slate-800/50 border border-white/20 dark:border-slate-700/20">
|
||||
<div className="text-2xl font-bold text-primary">{categories.length - 1}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Categories</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Filter Section */}
|
||||
<section className="max-w-6xl mx-auto px-6 py-8">
|
||||
<div className="flex flex-wrap gap-3 justify-center">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setSelectedCategory(cat)}
|
||||
className={`px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-300 ${
|
||||
selectedCategory === cat
|
||||
? "bg-primary text-white shadow-lg shadow-primary/30"
|
||||
: "bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-700"
|
||||
}`}
|
||||
>
|
||||
{cat === "All" ? "📋 All" : cat === "Guide" ? "📖 Guides" : cat === "Template" ? "📝 Templates" : "🎬 Videos"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Resources Grid */}
|
||||
<section className="max-w-6xl mx-auto px-6 pb-20">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredResources.map((resource) => (
|
||||
<div
|
||||
key={resource.id}
|
||||
className="group card p-6 border border-slate-200/60 dark:border-slate-700/60 hover:border-primary/50 hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 flex flex-col"
|
||||
>
|
||||
{/* Icon and Badge */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="text-6xl">{resource.icon}</div>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full">
|
||||
{resource.type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">
|
||||
{resource.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 flex-grow">
|
||||
{resource.description}
|
||||
</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center gap-4 py-3 border-t border-slate-200 dark:border-slate-700 mb-4">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Downloads</div>
|
||||
<div className="text-lg font-bold text-slate-900 dark:text-white">
|
||||
{(resource.downloads / 1000).toFixed(1)}K
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1 h-10 bg-gradient-to-b from-primary to-secondary rounded-full"></div>
|
||||
<div className="flex-1 text-right">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Category</div>
|
||||
<div className="text-lg font-bold text-slate-900 dark:text-white">{resource.category}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Button */}
|
||||
<button
|
||||
className="w-full py-3 px-4 rounded-lg font-semibold text-sm transition-all duration-300 bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg hover:shadow-primary/30 active:scale-95"
|
||||
>
|
||||
⬇️ Access Resource
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredResources.length === 0 && (
|
||||
<div className="text-center py-16">
|
||||
<div className="text-6xl mb-4">📭</div>
|
||||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">No resources found</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">Try selecting a different category</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user