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:T39f6,import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardFooter, CardHeader, } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { BarChart2, Clock, Calendar, Quote, Building, Award, Share2, ArrowRight, Download, } from 'lucide-react'; import { HoverCard, HoverCardContent, HoverCardTrigger, } from '@/components/ui/hover-card'; // Types for our case study data interface Metric { label: string; value: string; previous?: string; percentageChange?: number; isPositive?: boolean; } interface CaseStudyContent { challenge: string[]; solution: string[]; results: string[]; } interface Testimonial { quote: string; author: string; position: string; company: string; avatarUrl?: string; } interface CaseStudy { id: string; title: string; subtitle: string; client: { name: string; industry: string; size: string; logoUrl: string; }; publishDate: string; duration: string; coverImageUrl: string; projectType: string[]; metrics: Metric[]; content: CaseStudyContent; testimonial?: Testimonial; relatedCaseStudies?: { id: string; title: string }[]; downloadUrl?: string; } // Sample data for a case study const caseStudyData: CaseStudy = { id: 'ecommerce-platform-optimization', title: 'Boosting E-Commerce Conversion with Data-Driven UX Redesign', subtitle: 'How OptimizeNow helped Retail Giant increase mobile conversions by 37%', client: { name: 'FashionHub', industry: 'Retail / Fashion', size: 'Mid Enterprise (500-1000 employees)', logoUrl: 'https://images.unsplash.com/photo-1526948128573-703ee1aeb6fa?q=80&w=100&h=100&auto=format&fit=crop', }, publishDate: 'March 14, 2023', duration: '3 months', coverImageUrl: 'https://images.unsplash.com/photo-1600132806370-bf17e65e942f?q=80&w=2069&auto=format&fit=crop', projectType: ['UX Optimization', 'Mobile Conversion', 'A/B Testing'], metrics: [ { label: 'Mobile Conversion Rate', value: '3.8%', previous: '2.3%', percentageChange: 37, isPositive: true, }, { label: 'Cart Abandonment', value: '58%', previous: '72%', percentageChange: 19, isPositive: true, }, { label: 'Average Order Value', value: '$78.50', previous: '$67.25', percentageChange: 16, isPositive: true, }, { label: 'Page Load Speed', value: '1.2s', previous: '3.5s', percentageChange: 65, isPositive: true, }, ], content: { challenge: [ "FashionHub's mobile conversion rates were significantly lower than desktop, despite 68% of traffic coming from mobile devices.", 'The checkout process had a 72% abandonment rate, much higher than industry average.', 'Customer feedback indicated friction points in the product selection and payment processes.', 'The site suffered from slow load times on mobile, especially on 3G connections in key markets.', ], solution: [ 'Conducted comprehensive user testing with 50 customers to identify specific pain points in the mobile journey.', 'Implemented a streamlined checkout process, reducing steps from 5 to 3 without sacrificing data collection.', 'Redesigned the product page layout with a focus on mobile-first interaction patterns.', 'Optimized image loading and implemented progressive web app features to improve performance.', 'Developed a robust A/B testing framework to validate all changes before full deployment.', ], results: [ 'Increased mobile conversion rate by 37%, exceeding the initial goal of 25%.', 'Reduced cart abandonment rate from 72% to 58%, recovering an estimated $1.2M in monthly revenue.', 'Improved average order value by 16% through strategic cross-sell implementation.', "Decreased page load time by 65%, bringing the site well within Google's recommended performance metrics.", 'Achieved a 98% customer satisfaction score for the new mobile checkout experience.', ], }, testimonial: { quote: 'The OptimizeNow team went beyond simple UI tweaks to deliver a fundamental rethinking of our mobile experience. Their data-driven approach gave us confidence at every step, and the results speak for themselves.', author: 'Sarah Chen', position: 'Chief Digital Officer', company: 'FashionHub', avatarUrl: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=100&h=100&auto=format&fit=crop', }, relatedCaseStudies: [ { id: 'omnichannel-retail-strategy', title: 'Omnichannel Retail Strategy for BoutiqueBrands', }, { id: 'personalization-engine', title: 'AI-Powered Personalization Engine Implementation', }, ], downloadUrl: '#', }; export default function BlogSectionCaseStudyShowcase() { const { title, subtitle, client, publishDate, duration, coverImageUrl, projectType, metrics, content, testimonial, relatedCaseStudies, downloadUrl, } = caseStudyData; return (

{/* Header and Cover */}

{client.name}

{client.industry}

Company Size: {client.size}

{title}

{subtitle}

{publishDate}

{duration}

{downloadUrl && ( )}

{/* Project Type Tags */}

{projectType.map((type, index) => ( {type} ))}

{/* Cover Image */}

{/* Key Metrics */}

Key Results

{metrics.map((metric, index) => (

{metric.label}

{metric.value}

{metric.previous && metric.percentageChange && (

{metric.isPositive ? '+' : ''} {metric.percentageChange}% from {metric.previous}

)} ))}

{/* Case Study Tabs */}

Challenge Solution Results {content.challenge.map((paragraph, i) => (

{paragraph}

))} {content.solution.map((paragraph, i) => (

{paragraph}

))} {content.results.map((paragraph, i) => (

{paragraph}

))}

{/* Testimonial */} {testimonial && (

{testimonial.avatarUrl && (

)}

"{testimonial.quote}"

{testimonial.author}

{testimonial.position}, {testimonial.company}

)} {/* Related Case Studies */} {relatedCaseStudies && relatedCaseStudies.length > 0 && (

Related Case Studies

{relatedCaseStudies.map((study, index) => (

{study.title}

))}

)}

); } 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:Ta35,import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { return (

img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className )} {...props} /> ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } 56:Tdf4,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Tabs as TabsPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps) { return ( ) } const tabsListVariants = cva( "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", { variants: { variant: { default: "bg-muted", line: "gap-1 bg-transparent", }, }, defaultVariants: { variant: "default", }, } ) function TabsList({ className, variant = "default", ...props }: React.ComponentProps & VariantProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ) } export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } 57:T5ee,"use client" import * as React from "react" import { HoverCard as HoverCardPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function HoverCard({ ...props }: React.ComponentProps) { return } function HoverCardTrigger({ ...props }: React.ComponentProps) { return ( ) } function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }: React.ComponentProps) { return ( ) } export { HoverCard, HoverCardTrigger, HoverCardContent } 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/marketing-blog-sections-case-study-showcase.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-blog-sections-case-study-showcase","itemId":"@shadcn-ui-blocks/marketing-blog-sections-case-study-showcase"}],["$","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/marketing/blog-sections/case-study-showcase.tsx","content":"$52","type":"registry:component","target":"components/blocks/marketing/blog-sections/case-study-showcase.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/card.tsx","content":"$55","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/tabs.tsx","content":"$56","type":"registry:ui","target":"components/ui/tabs.tsx"},{"path":"components/ui/hover-card.tsx","content":"$57","type":"registry:ui","target":"components/ui/hover-card.tsx"}]}]]}],"$L58"]}]

Case Study Showcase

Installation

Files

components

Styles