69 lines
2.5 KiB
JavaScript
69 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
const FeatureCard = ({ icon, title, description, hasBorder = true }) => (
|
|
<div className={`p-6 h-full ${hasBorder ? 'border-r border-gray-300' : ''}`}>
|
|
<div className="mb-4">
|
|
<Image src={icon} alt={title} width={80} height={80} className="object-contain" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-teal-600 mb-3">
|
|
{title}
|
|
</h3>
|
|
<p className="text-gray-600 text-base leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
const WhyChooseUs = () => {
|
|
const features = [
|
|
{
|
|
icon: "/images/service/award.png",
|
|
title: "Unmatched Quality",
|
|
description: "Our ISO certification in DNA Sequencing, RNA Sequencing, and Genomics Informatics underscores our dedication to delivering superior technical advice and results that align seamlessly with research objectives and expected outcomes."
|
|
},
|
|
{
|
|
icon: "/images/service/execution.png",
|
|
title: "Exceptional Value",
|
|
description: "Our comprehensive NGS and bioinformatics services offer unbeatable value for money. We ensure that our pricing structure never stands in the way of your research goals."
|
|
},
|
|
{
|
|
icon: "/images/service/social-support.png",
|
|
title: "Dedicated Support",
|
|
description: "We prioritize your needs, offering prompt technical advice and support. Our fast response times and client-focused approach ensure your research stays on track."
|
|
},
|
|
{
|
|
icon: "/images/service/accurate.png",
|
|
title: "Proven Reliability",
|
|
description: "We guarantee timely, accurate results using the latest chemistry, instruments, and software, maintaining the highest standards in our analyses."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section>
|
|
<div className="container mx-auto max-w-none px-4">
|
|
<div className="rounded-3xl p-8" style={{ backgroundColor: '#f2fcfc' }}>
|
|
<div className="mb-6">
|
|
<h2 className="text-4xl font-bold text-gray-600 text-left">
|
|
Why Choose Operify Tech?
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
|
{features.map((feature, index) => (
|
|
<FeatureCard
|
|
key={index}
|
|
icon={feature.icon}
|
|
title={feature.title}
|
|
description={feature.description}
|
|
hasBorder={index < 3} // Remove border from last item
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default WhyChooseUs; |