Case Studies Section – Interactive category tabs with visual cards. Highlights product capabilities (like CRM) through images and concise descriptions. Supports quick comparison and seamless navigation. Best for showcasing service variety and depth.
import { CaseStudyTabs } from '@/components/ui/case-studies-section';
import { Layers3, GitBranch, Palette, MonitorCog } from 'lucide-react';
import React from 'react';
// Data for the component. This structure makes the component reusable.
const caseStudiesData = [
{
value: 'development',
label: 'Development',
content: {
icon: <Layers3 className="h-6 w-6" />,
title: 'Development',
description:
'Software development is a dynamic field shaping our digital landscape. It covers the design, creation, deployment, and maintenance of software applications and systems.',
link: '#',
},
images: [
{ category: 'Web Development', imageUrl: 'https://cdn.21st.dev/assets/mirror/6e/6e10c9ebb53dd9d977c3c2add56461df41534ae5545a338b59ad510274321a0c.jpg' },
{ category: 'App Development', imageUrl: 'https://cdn.21st.dev/assets/mirror/9b/9b27bcbffe0316fbdd7f4f66afb670891a6763dca216b462e38c55abbe1696b5.jpg' },
{ category: 'Software Development', imageUrl: 'https://cdn.21st.dev/assets/mirror/6c/6cc102e0680a7c8ff826924fe56f784b603a719ec269a9e91e02bf560c9c7155.jpg' },
],
},
{
value: 'crm_solutions',
label: 'CRM Solutions',
content: {
icon: <GitBranch className="h-6 w-6" />,
title: 'CRM Solutions',
description:
'We specialize in adaptable CRM solutions. Our services streamline customer management, enhance sales tracking, and provide valuable data insights for superior customer experiences.',
link: '#',
},
images: [
{ category: 'Customer Management', imageUrl: 'https://cdn.21st.dev/assets/mirror/c6/c680c981229b1d8dab1f03db9bd32460c974b3a2adcffc6b38a3d6eb4ffac86b.jpg' },
{ category: 'Sales Tracking', imageUrl: 'https://cdn.21st.dev/assets/mirror/a3/a3daf139a9e3a0668cf98996832e46f8325c5eab83e53c031d1dc2c7ae2d7ff1.jpg' },
],
},
{
value: 'web_designing',
label: 'Web Designing',
content: {
icon: <Palette className="h-6 w-6" />,
title: 'Web Designing',
description:
'Web design is crucial for a strong digital presence. We blend creativity and functionality to ensure your website is visually appealing and performs optimally across all devices.',
link: '#',
},
images: [
{ category: 'Visual Design', imageUrl: 'https://cdn.21st.dev/assets/mirror/e3/e36f3c3aa649b449d32cd6fce97d89c2655e6ceb7b37ba7d2002bb60bffa6c68.jpg' },
{ category: 'User Experience', imageUrl: 'https://cdn.21st.dev/assets/mirror/34/340e4faaca0f6366261a830dcd3b882556020a93d2e251488a8e26de9875ccee.jpg' },
],
},
{
value: 'it_support',
label: 'IT Support',
content: {
icon: <MonitorCog className="h-6 w-6" />,
title: 'IT Support',
description:
'Our comprehensive IT support services maintain and optimize your business technology. We troubleshoot, manage, and resolve technical issues to ensure seamless operation.',
link: '#',
},
images: [
{ category: 'System Maintenance', imageUrl: 'https://cdn.21st.dev/assets/mirror/1c/1c4dd10907ea234b19a786ac42693a4b951db0e278673e13e688542a9fcaaa1e.jpg' },
{ category: 'Issue Resolution', imageUrl: 'https://cdn.21st.dev/assets/mirror/6d/6d07d6e085e2fe3c2ed14a16a5a946dee4e0cfa755a81537790d3c4cf6b59e54.jpg' },
],
},
];
export default function CaseStudyTabsDemo() {
return (
<div className="bg-background">
<CaseStudyTabs
subtitle="CASE STUDIES"
title="Detailing of Our Products"
tabs={caseStudiesData}
defaultTab="crm_solutions"
/>
</div>
);
}