210 lines
7.5 KiB
TypeScript
210 lines
7.5 KiB
TypeScript
"use client";
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
const dotBg = "/landing/DotBg.png";
|
|
import {
|
|
ShieldCheck,
|
|
Server,
|
|
Lock,
|
|
FileOutput,
|
|
Search,
|
|
ClipboardList,
|
|
ArrowRight
|
|
} from 'lucide-react';
|
|
|
|
export interface EnterpriseFeatureItem {
|
|
title: string;
|
|
description: string;
|
|
icon?: any; // Accepting any for now, could be LucideIcon or similar
|
|
link?: string;
|
|
linkText?: string;
|
|
}
|
|
|
|
export interface EnterpriseFeaturesProps {
|
|
badgeText?: string;
|
|
title?: string;
|
|
features?: EnterpriseFeatureItem[];
|
|
bottomNote?: string;
|
|
primaryButtonText?: string;
|
|
variant?: 'default' | 'minimal';
|
|
showBackground?: boolean;
|
|
}
|
|
|
|
const defaultFeatures: EnterpriseFeatureItem[] = [
|
|
// ... default features are fine ...
|
|
{
|
|
title: 'Role-based access',
|
|
description: 'Fine-grained RBAC with custom roles and access codes.',
|
|
icon: ShieldCheck
|
|
},
|
|
{
|
|
title: 'Multi-tenant isolation',
|
|
description: "Each organization's data is scoped and isolated.",
|
|
icon: Server
|
|
},
|
|
{
|
|
title: 'Encryption',
|
|
description: 'Encrypted in transit and at rest, with virus scanning on upload.',
|
|
icon: Lock
|
|
},
|
|
{
|
|
title: 'Convert & export',
|
|
description: 'Convert PDF and images to editable formats; export to Word, HTML, XML and PDF.',
|
|
icon: FileOutput
|
|
},
|
|
{
|
|
title: 'Smart search & OCR',
|
|
description: 'Find anything across your files, including scanned documents.',
|
|
icon: Search
|
|
},
|
|
{
|
|
title: 'Audit & reporting',
|
|
description: 'A complete, exportable record of document activity.',
|
|
icon: ClipboardList
|
|
}
|
|
];
|
|
|
|
const EnterpriseFeatures: React.FC<EnterpriseFeaturesProps> = ({
|
|
badgeText = "ENTERPRISE",
|
|
title = "Governed By Design",
|
|
features = defaultFeatures,
|
|
bottomNote,
|
|
primaryButtonText,
|
|
variant = 'default',
|
|
showBackground = true
|
|
}) => {
|
|
if (!features || features.length === 0) return null;
|
|
|
|
const isMinimal = variant === 'minimal';
|
|
|
|
return (
|
|
<section
|
|
className={`relative py-24 overflow-hidden ${showBackground ? 'bg-[#FCFCFC]' : 'bg-white'}`}
|
|
style={showBackground ? {
|
|
backgroundImage: `url(${dotBg})`,
|
|
backgroundSize: 'contain',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'repeat'
|
|
} : {}}
|
|
>
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
{/* Header */}
|
|
{!isMinimal && (
|
|
<div className="text-center mb-16">
|
|
<div className="inline-flex items-center text-[#444CE7] font-bold text-[11px] tracking-[0.2em] uppercase mb-4">
|
|
<div className="w-2 h-2 rounded-full bg-[#444CE7] mr-2"></div>
|
|
{badgeText}
|
|
</div>
|
|
<h2 className="text-[32px] md:text-[40px] font-medium text-[#0a1236] tracking-tight">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
)}
|
|
|
|
{/* Header for Minimal Variant - Badge Only */}
|
|
{isMinimal && badgeText && (
|
|
<div className="text-center mb-12">
|
|
<div className="inline-flex items-center text-[#444CE7] font-bold text-[11px] tracking-[0.2em] uppercase mb-4">
|
|
<div className="w-2 h-2 rounded-full bg-[#444CE7] mr-2"></div>
|
|
{badgeText}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Features Grid */}
|
|
<div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12`}>
|
|
{features.map((feature, idx) => {
|
|
const Icon = feature.icon || ShieldCheck; // Fallback icon
|
|
return isMinimal ? (
|
|
// Minimal Variant - Only Icon
|
|
<div
|
|
key={idx}
|
|
className="flex flex-col items-center justify-center p-6 hover:scale-110 transition-all duration-300 cursor-pointer"
|
|
>
|
|
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#E2E4F9] to-[#C7CBF5] text-[#444CE7] flex items-center justify-center mb-4 shadow-sm hover:shadow-md transition-shadow overflow-hidden">
|
|
{typeof Icon === 'string' ? (
|
|
<img src={Icon} alt="" className="w-full h-full object-cover" />
|
|
) : (
|
|
<Icon className="w-8 h-8" strokeWidth={1.5} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
// Default Variant - Full Card
|
|
feature.link ? (
|
|
<Link
|
|
href={feature.link}
|
|
key={idx}
|
|
className="group bg-white rounded-[20px] p-8 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)] hover:shadow-[0_12px_36px_rgba(68,76,231,0.08)] hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div className="w-16 h-16 text-[#444CE7] flex items-center justify-center mb-2 overflow-hidden group-hover:scale-105 transition-transform duration-300">
|
|
{typeof Icon === 'string' ? (
|
|
<img src={Icon} alt="" className="w-full h-full object-contain" />
|
|
) : (
|
|
<Icon className="w-10 h-10" strokeWidth={1.5} />
|
|
)}
|
|
</div>
|
|
<h3 className="text-[19px] font-bold text-gray-900 group-hover:text-[#444CE7] transition-colors">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-[14.5px] text-gray-500 leading-relaxed font-medium mt-1">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-6 flex items-center text-[13px] font-bold text-[#444CE7] group-hover:translate-x-1 transition-transform">
|
|
<span>{feature.linkText || 'Learn more'}</span>
|
|
<ArrowRight className="w-4 h-4 ml-1.5" />
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<div
|
|
key={idx}
|
|
className="bg-white rounded-[20px] p-8 border border-gray-100 shadow-[0_4px_24px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all duration-300"
|
|
>
|
|
<div className="w-16 h-16 text-[#444CE7] flex items-center justify-center mb-2 overflow-hidden">
|
|
{typeof Icon === 'string' ? (
|
|
<img src={Icon} alt="" className="w-full h-full object-contain" />
|
|
) : (
|
|
<Icon className="w-10 h-10" strokeWidth={1.5} />
|
|
)}
|
|
</div>
|
|
<h3 className="text-[19px] font-bold text-gray-900 ">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-[14.5px] text-gray-500 leading-relaxed font-medium">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
)
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Bottom Note */}
|
|
{!isMinimal && bottomNote && (
|
|
<div className="text-center max-w-4xl mx-auto mt-16">
|
|
<p className="text-[#444CE7] text-[14px] md:text-[15px] italic">
|
|
{bottomNote}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Button */}
|
|
{!isMinimal && primaryButtonText && (
|
|
<div className="flex justify-center mt-12">
|
|
<button className="px-8 py-3.5 bg-[#444CE7] text-white text-[13px] font-bold tracking-widest uppercase rounded-full hover:bg-blue-700 transition-colors shadow-sm">
|
|
{primaryButtonText}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default EnterpriseFeatures;
|