4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T3e08,import { Clock, ArrowRight } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion'; // Sample case studies data const caseStudies = [ { id: 'case-1', title: 'E-Commerce Platform Redesign', client: 'RetailTech Inc.', category: 'UX/UI Design', summary: 'A comprehensive redesign of an outdated e-commerce platform to improve user experience, increase conversions, and modernize the brand.', coverImage: 'https://images.unsplash.com/photo-1661956602153-23384936a1d3?q=80&w=2070&auto=format&fit=crop', duration: '12 weeks', year: '2023', challenge: 'The existing platform suffered from a confusing navigation structure, complicated checkout process, poor mobile experience, and outdated visual design, resulting in high cart abandonment and low conversion rates.', process: 'I followed a user-centered design process that involved extensive user research, competitive analysis, wireframing, prototyping, and multiple rounds of usability testing to create a solution that addressed all key pain points.', solution: 'The redesigned platform featured a clean, modern interface with intuitive navigation, streamlined checkout process, improved product discovery, and a responsive design that worked seamlessly across all devices.', results: [ '43% increase in conversion rate', '27% reduction in cart abandonment', '58% increase in mobile sales', 'Customer satisfaction score improved from 3.2/10 to 8.7/10', ], testimonial: { quote: 'The redesigned platform has transformed our business. Not only have we seen dramatic improvements in conversion rates and sales, but our team finds the new admin interface much easier to use.', author: 'Sarah Johnson', role: 'E-Commerce Director', }, tools: ['Figma', 'Adobe XD', 'InVision', 'UserTesting'], link: '#', }, { id: 'case-2', title: 'Mobile Banking Application', client: 'FinanceFirst Bank', category: 'Mobile Development', summary: 'Design and development of a secure, user-friendly mobile banking application with advanced features and biometric authentication.', coverImage: 'https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=1470&auto=format&fit=crop', duration: '16 weeks', year: '2022', challenge: 'FinanceFirst needed a mobile banking solution that would provide customers with a secure, convenient way to manage their finances on the go while addressing concerns about security, ease of use, and feature parity with the web platform.', process: 'The project began with security research and competitive analysis, followed by user interviews to understand customer needs. I created a comprehensive information architecture, wireframes, and interactive prototypes that underwent rigorous security and usability testing.', solution: 'A feature-rich mobile banking application with biometric authentication, real-time transaction alerts, mobile check deposit, bill pay, and account management features in an intuitive, accessible interface.', results: [ '92% user satisfaction rating', '35% increase in mobile transactions', '28% reduction in call center volume', '4.8/5 average app store rating', ], testimonial: { quote: 'This mobile app has exceeded our expectations in every way. The intuitive design and robust security features have given our customers confidence in managing their finances on the go.', author: 'Michael Chen', role: 'Digital Banking Director', }, tools: ['React Native', 'Figma', 'Firebase', 'Jest'], link: '#', }, { id: 'case-3', title: 'Healthcare Patient Portal', client: 'MediCare Solutions', category: 'Healthcare Software', summary: 'Created an accessible patient portal allowing secure access to medical records, appointment scheduling, and provider communication.', coverImage: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=2070&auto=format&fit=crop', duration: '20 weeks', year: '2022', challenge: 'MediCare Solutions needed a HIPAA-compliant patient portal that would make healthcare more accessible while maintaining strict security and privacy standards. The system needed to integrate with existing EHR systems and be usable by patients of all ages and abilities.', process: 'I conducted extensive research including interviews with patients, healthcare providers, and administrators. I created a secure architecture plan, developed accessible wireframes, and conducted usability testing with diverse user groups including elderly patients and those with disabilities.', solution: 'A comprehensive, accessible patient portal that allows secure access to medical records, appointment scheduling, prescription refills, provider messaging, and telemedicine integration, all with strict adherence to HIPAA compliance.', results: [ '97% patient satisfaction', 'Reduced administrative tasks by 35%', '42% increase in patient portal adoption', '31% reduction in missed appointments', ], testimonial: { quote: 'This patient portal has transformed how we deliver care. Patients love the convenience, and our staff has seen a significant reduction in administrative burden.', author: 'Dr. Eleanor Patel', role: 'Chief Medical Officer', }, tools: ['React', 'Node.js', 'MongoDB', 'WCAG Guidelines'], link: '#', }, { id: 'case-4', title: 'AI-Powered Content Recommendation Engine', client: 'StreamFlix Media', category: 'Machine Learning', summary: 'Developed and implemented an AI recommendation system that significantly improved content discovery and user engagement.', coverImage: 'https://images.unsplash.com/photo-1633613286991-611fe299c4be?q=80&w=2070&auto=format&fit=crop', duration: '14 weeks', year: '2023', challenge: 'StreamFlix had a growing content library but users were struggling to discover relevant content beyond the most popular titles. They needed a sophisticated recommendation system that would increase engagement, viewing time, and retention.', process: 'I analyzed existing user data, researched recommendation algorithms, and designed a hybrid approach combining collaborative filtering and content-based recommendations. I implemented A/B testing frameworks to continuously evaluate and refine the system.', solution: 'A personalized recommendation engine using machine learning to analyze viewing history, preferences, and similar user behaviors to suggest relevant content, with a user interface that elegantly presents recommendations with context.', results: [ '28% increase in content engagement', '17% reduction in churn rate', '22% increase in average viewing time', 'Expanded content discovery beyond top 10% of library', ], testimonial: { quote: "The new recommendation engine has significantly improved how users discover content on our platform. We're seeing engagement with a much broader range of our library, and users are spending more time on the service.", author: 'James Rodriguez', role: 'Product Director', }, tools: ['Python', 'TensorFlow', 'AWS', 'React'], link: '#', }, ]; export default function AccordionExpandableCaseStudies() { return (

{/* Section header */}

Case Studies

Explore detailed case studies of selected projects. Click on any study to see the full story behind the work.

{caseStudies.map((study) => (

{study.title}

{study.category}

{study.summary}

{study.duration}

{study.year}

Client:{' '} {study.client} {' '} • Duration:{' '} {study.duration}

{/* Main content */}

The Challenge

{study.challenge}

The Process

{study.process}

The Solution

{study.solution}

Key Results

{index + 1} {result}

Client Testimonial

"{study.testimonial.quote}"

{study.testimonial.author},{' '} {study.testimonial.role}

{/* Sidebar */}

Tools & Technologies

{study.tools.map((tool) => ( {tool} ))}

))}

); } 53:Td06,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const buttonVariants = cva( "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/80", outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5", lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-9", "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md", "icon-lg": "size-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant = "default", size = "default", asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "button" return ( ) } export { Button, buttonVariants } 54:T749,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } 55:Ta54,"use client" import * as React from "react" import { Accordion as AccordionPrimitive } from "radix-ui" import { cn } from "@/lib/utils" import { ChevronDownIcon, ChevronUpIcon } from "lucide-react" function Accordion({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/portfolio-portfolio-case-studies-accordion-expandable-case-studies.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/portfolio-portfolio-case-studies-accordion-expandable-case-studies","itemId":"@shadcn-ui-blocks/portfolio-portfolio-case-studies-accordion-expandable-case-studies"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"components/blocks/portfolio/portfolio-case-studies/accordion-expandable-case-studies.tsx","content":"$52","type":"registry:component","target":"components/blocks/portfolio/portfolio-case-studies/accordion-expandable-case-studies.tsx"},{"path":"components/ui/button.tsx","content":"$53","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/badge.tsx","content":"$54","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/accordion.tsx","content":"$55","type":"registry:ui","target":"components/ui/accordion.tsx"}]}]]}],"$L56"]}]

Accordion Expandable Case Studies

Installation

Files

components

Styles