Components
Precision Card
The PrecisionCard component is a fully configurable, responsive UI block built with shadcn/ui that showcases dual-themed content — a light informational card and a dark futuristic insights card. It’s ideal for landing pages, industrial automation showcases, or tech product sections that emphasize innovation and precision. The component’s props allow full customization of headings, descriptions, badges, and button labels without altering the structure. The demo page demonstrates how to use the component in real-world contexts, maintaining a modern, minimal design with accessible typography, balanced spacing, and seamless dark/light theme integration.
Loading preview...
import PrecisionCard from "@/components/ui/precision-card";
export default function PrecisionDemoPage() {
return (
<div className="p-10 flex items-center justify-center min-h-screen bg-muted/20">
<PrecisionCard
leftSubtitle="Why Reliability Matters"
leftTitle="Building next-gen platforms with unmatched stability"
leftDescription="Modern digital systems demand reliability and scalability from day one. With adaptive infrastructure and intelligent monitoring, we ensure every deployment performs flawlessly at scale."
tags={["Scalability", "Resilience", "Automation", "Cloud", "Security"]}
leftButton="Get Started"
rightTitle="Redefining Digital Excellence."
rightDescription="Empowering teams to innovate faster, deploy safer, and deliver exceptional user experiences — all powered by automation and real-time intelligence."
rightItems={["Uptime", "Scalability", "Innovation", "Performance"]}
certificationText="ISO Certified Infrastructure"
rightButton="Explore Solutions →"
/>
</div>
);
}