first commit
This commit is contained in:
priyanshuvish
221
src/components/WhitepapersSection.tsx
Normal file
221
src/components/WhitepapersSection.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
import { motion } from "motion/react";
|
||||
import { FileText, Target, BarChart3, Download, Eye } from "lucide-react";
|
||||
import { BrandedTag } from "./about/BrandedTag";
|
||||
import { PrimaryCTAButton } from "./PrimaryCTAButton";
|
||||
import { navigateTo } from "./Router";
|
||||
|
||||
interface Resource {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
type: string;
|
||||
category: string;
|
||||
icon: any;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const resources: Resource[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Leadership Assessment Framework",
|
||||
description: "Comprehensive self-leadership evaluation tool with detailed scoring methodology.",
|
||||
type: "PDF Guide",
|
||||
category: "Stage",
|
||||
icon: FileText,
|
||||
color: "#8B5CF6"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Executive Decision Making Toolkit",
|
||||
description: "Strategic frameworks and templates for complex organizational decision making.",
|
||||
type: "Toolkit",
|
||||
category: "B Frame",
|
||||
icon: Target,
|
||||
color: "#3B82F6"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Team Performance Metrics Dashboard",
|
||||
description: "Ready-to-use Excel template for tracking and improving team performance indicators.",
|
||||
type: "Excel Template",
|
||||
category: "Dashboard",
|
||||
icon: BarChart3,
|
||||
color: "#10B981"
|
||||
}
|
||||
];
|
||||
|
||||
interface ResourceCardProps {
|
||||
resource: Resource;
|
||||
index: number;
|
||||
}
|
||||
|
||||
function ResourceCard({ resource, index }: ResourceCardProps) {
|
||||
const IconComponent = resource.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="bg-white rounded-xl border border-gray-100 p-8 hover:shadow-lg transition-all duration-300 group"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
{/* Icon and Category */}
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<div
|
||||
className="w-16 h-16 rounded-xl flex items-center justify-center"
|
||||
style={{ backgroundColor: `${resource.color}20` }}
|
||||
>
|
||||
<IconComponent
|
||||
className="w-8 h-8"
|
||||
style={{ color: resource.color }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Type and Category Tags */}
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<span
|
||||
className="px-3 py-1 text-xs font-semibold rounded-full"
|
||||
style={{
|
||||
backgroundColor: `${resource.color}15`,
|
||||
color: resource.color
|
||||
}}
|
||||
>
|
||||
{resource.type}
|
||||
</span>
|
||||
<span
|
||||
className="px-3 py-1 text-xs font-semibold rounded-full"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{resource.category}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3
|
||||
className="text-xl font-bold text-center mb-4 leading-tight"
|
||||
style={{
|
||||
color: 'var(--color-brand-black)',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
minHeight: '3.5rem'
|
||||
}}
|
||||
>
|
||||
{resource.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p
|
||||
className="text-sm text-center leading-relaxed mb-8"
|
||||
style={{ color: '#6B7280' }}
|
||||
>
|
||||
{resource.description}
|
||||
</p>
|
||||
|
||||
{/* Download Button - Updated to redirect to learning resources */}
|
||||
<button
|
||||
className="w-full flex items-center justify-center space-x-2 px-6 py-3 font-semibold text-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
|
||||
style={{
|
||||
borderRadius: '10px',
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
color: 'white'
|
||||
}}
|
||||
onClick={() => navigateTo('/learning/articles')}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--color-brand-accent)';
|
||||
e.currentTarget.style.color = 'var(--color-brand-black)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--color-brand-primary)';
|
||||
e.currentTarget.style.color = 'white';
|
||||
}}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
<span>Free Download</span>
|
||||
</button>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export function WhitepapersSection() {
|
||||
return (
|
||||
<section
|
||||
className="py-20"
|
||||
style={{ backgroundColor: 'var(--color-brand-bg-light)' }}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto section-margin-x">
|
||||
{/* Section Header */}
|
||||
<div className="mb-16">
|
||||
{/* Branded Tag */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<BrandedTag text="Free Leadership Resources" />
|
||||
</motion.div>
|
||||
|
||||
{/* Heading and CTA Container */}
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-6 gap-6">
|
||||
{/* Main Heading */}
|
||||
<motion.h2
|
||||
className="text-5xl font-bold leading-tight max-lg:text-4xl max-md:text-3xl"
|
||||
style={{ color: 'var(--color-brand-black)' }}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Free Leadership Downloads
|
||||
</motion.h2>
|
||||
|
||||
{/* Browse All Resources Button - Updated to redirect to articles */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<PrimaryCTAButton
|
||||
text="Browse All Resources"
|
||||
onClick={() => navigateTo('/learning/articles')}
|
||||
ariaLabel="Browse all leadership resources"
|
||||
className="browse-resources-cta-override"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<motion.p
|
||||
className="text-lg leading-relaxed max-w-2xl"
|
||||
style={{ color: '#6B7280' }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Access our collection of premium leadership tools, frameworks, and templates at no cost. Start implementing proven leadership strategies today.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
{/* Resources Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{resources.map((resource, index) => (
|
||||
<ResourceCard
|
||||
key={resource.id}
|
||||
resource={resource}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user