117 lines
3.9 KiB
TypeScript
117 lines
3.9 KiB
TypeScript
"use client";
|
|
import React from 'react';
|
|
import { X, Check } from 'lucide-react';
|
|
const dotBg = "/landing/DotBg.png";
|
|
|
|
interface ComparisonItem {
|
|
negative: string;
|
|
positive: string;
|
|
}
|
|
|
|
export interface WhyDocqubeProps {
|
|
badgeText?: string;
|
|
title?: string;
|
|
comparisons?: ComparisonItem[];
|
|
}
|
|
|
|
const defaultComparisons: ComparisonItem[] = [
|
|
{
|
|
negative: "Files scattered across apps",
|
|
positive: "One source of truth",
|
|
},
|
|
{
|
|
negative: "A different login and bill for each",
|
|
positive: "One login, one bill",
|
|
},
|
|
{
|
|
negative: "Separate, inconsistent permissions",
|
|
positive: "One RBAC model across all modules",
|
|
},
|
|
{
|
|
negative: "No end-to-end audit trail",
|
|
positive: "A single audit trail from upload to signature",
|
|
},
|
|
{
|
|
negative: "Data copied between vendors",
|
|
positive: "Data stays in one platform",
|
|
}
|
|
];
|
|
|
|
const WhyDocqube: React.FC<WhyDocqubeProps> = ({
|
|
badgeText = "WHY THE PLATFORM BEATS POINT TOOLS",
|
|
title = "From Fragmented To One Clear System",
|
|
comparisons = defaultComparisons
|
|
}) => {
|
|
return (
|
|
<section
|
|
className="relative py-24 overflow-hidden bg-[#FCFCFC]"
|
|
style={{
|
|
backgroundImage: `url(${dotBg})`,
|
|
backgroundSize: 'contain',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'repeat'
|
|
}}
|
|
>
|
|
|
|
<div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
{/* Header */}
|
|
<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>
|
|
|
|
{/* Comparison Card */}
|
|
<div className="bg-white rounded-[24px] border border-gray-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden flex flex-col md:flex-row">
|
|
|
|
{/* Left Side: Negative */}
|
|
<div className="flex-1 p-10 md:p-14">
|
|
<h3 className="text-[22px] font-bold text-gray-800 mb-4">Buying point tools</h3>
|
|
<div className="w-12 h-0.5 bg-gray-200 mb-10"></div>
|
|
|
|
<ul className="space-y-6">
|
|
{comparisons.map((item, idx) => (
|
|
<li key={idx} className="flex items-start">
|
|
<X className="w-5 h-5 text-red-500 mr-4 flex-shrink-0 mt-0.5" />
|
|
<span className="text-[15px] text-gray-600 font-medium leading-snug">{item.negative}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Right Side: Positive */}
|
|
<div className="flex-1 p-2 md:p-3">
|
|
<div className="bg-[#F6F7FE] h-full rounded-[24px] p-8 md:p-11 shadow-[inset_6px_6px_18px_0_rgba(55,87,233,0.19),inset_-6px_-8px_9px_0_#FFFFFF]">
|
|
<div className="flex items-center mb-4">
|
|
<h3 className="text-[22px] font-bold text-gray-800 mr-2">With DocQube</h3>
|
|
<div className="bg-[#444CE7] text-white rounded-full p-0.5">
|
|
<Check className="w-3.5 h-3.5" strokeWidth={3} />
|
|
</div>
|
|
</div>
|
|
<div className="w-12 h-[3px] rounded-full bg-[#444CE7] mb-10"></div>
|
|
|
|
<ul className="space-y-6">
|
|
{comparisons.map((item, idx) => (
|
|
<li key={idx} className="flex items-start">
|
|
<Check className="w-5 h-5 text-[#444CE7] mr-4 flex-shrink-0 mt-0.5" />
|
|
<span className="text-[15px] text-gray-800 font-semibold leading-snug">{item.positive}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default WhyDocqube;
|