4e: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"] 4f: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"] 50: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"] 51:T3085,import { ArrowRight } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; // Sample case study data const caseStudy = { title: 'E-Commerce Platform Redesign', client: 'RetailTech Inc.', category: 'UX/UI Design', year: '2023', duration: '12 weeks', summary: 'A complete overhaul of an outdated e-commerce platform, focusing on improving user experience and increasing conversion rates through user-centered design principles.', mainImage: 'https://images.unsplash.com/photo-1661956602153-23384936a1d3?q=80&w=2070&auto=format&fit=crop', sections: [ { id: 'challenge', title: 'The Challenge', content: 'RetailTech Inc. approached me to redesign their outdated e-commerce platform which was suffering from poor conversion rates, high cart abandonment, and frustrated users. The existing platform was built over 5 years ago and had become difficult to navigate with an outdated interface. Key issues included a complicated checkout process, poor mobile experience, and lack of personalization features.', image: 'https://images.unsplash.com/photo-1586717791821-3f44a563fa4c?q=80&w=2070&auto=format&fit=crop', bullets: [ 'Cart abandonment rate of over 75%', 'Mobile conversion rate 65% lower than desktop', 'Customer satisfaction score of only 3.2/10', 'Outdated visual design creating trust issues', ], }, { id: 'discovery', title: 'Discovery & Research', content: 'I began with extensive user research to understand pain points and expectations. This included user interviews, usability testing of the existing platform, competitive analysis, and a comprehensive review of analytics data. The research phase revealed critical insights into user behavior, preferences, and frustrations with the current platform.', image: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070&auto=format&fit=crop', bullets: [ 'Conducted 12 user interviews with diverse customer segments', 'Analyzed heatmaps and user recordings from over 2,000 sessions', 'Performed competitive analysis of 5 leading e-commerce platforms', 'Created detailed user personas and journey maps', ], }, { id: 'strategy', title: 'Strategy & Planning', content: 'Based on research findings, I developed a comprehensive UX strategy to address key pain points and business objectives. The strategy focused on simplifying the shopping journey, enhancing product discovery, streamlining checkout, and implementing a mobile-first approach to ensure a seamless experience across all devices.', image: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=2070&auto=format&fit=crop', bullets: [ 'Developed a comprehensive information architecture', 'Created user flows focusing on critical conversion paths', 'Established UX principles and design patterns', 'Identified key performance metrics for measuring success', ], }, { id: 'design', title: 'Design & Prototyping', content: 'The design phase involved creating wireframes, high-fidelity mockups, and interactive prototypes. I implemented a clean, modern aesthetic with a focus on usability, accessibility, and conversion optimization. Key features included a streamlined checkout process, enhanced product filtering, and personalized recommendations.', image: 'https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?q=80&w=2070&auto=format&fit=crop', bullets: [ 'Created wireframes for key user flows', 'Developed a comprehensive design system for consistency', 'Built interactive prototypes for usability testing', 'Implemented accessibility standards throughout the design', ], }, { id: 'testing', title: 'Testing & Iteration', content: 'Rigorous testing was conducted throughout the design process to validate assumptions and refine the user experience. This included moderated usability testing, A/B testing of key elements, and gathering feedback from stakeholders. Each round of testing informed iterations and refinements to the design.', image: 'https://images.unsplash.com/photo-1592659762303-90081d34b277?q=80&w=2069&auto=format&fit=crop', bullets: [ 'Conducted 3 rounds of usability testing with 8 participants per round', 'Performed A/B testing on critical conversion elements', 'Gathered feedback from key stakeholders and internal teams', 'Made data-driven refinements based on testing insights', ], }, { id: 'results', title: 'Results & Impact', content: 'The redesigned platform launched successfully and delivered significant improvements across all key metrics. The new design not only improved the user experience but also drove substantial business outcomes, demonstrating the value of a user-centered design approach.', image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop', bullets: [ '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. This project has delivered ROI beyond our expectations.', author: 'Sarah Johnson', role: 'E-Commerce Director, RetailTech Inc.', }, tools: ['Figma', 'Adobe XD', 'InVision', 'UserTesting'], tags: ['UX Research', 'UI Design', 'E-commerce', 'Conversion Optimization'], link: '#', }; export default function SideBySideImageStory() { return (

{/* Case Study Header */}

{caseStudy.tags.map((tag) => ( {tag} ))}

{caseStudy.title}

Client

{caseStudy.client}

Timeline

{caseStudy.duration}

Year

{caseStudy.year}

{caseStudy.summary}

{/* Case Study Navigation */}

{caseStudy.sections.map((section) => ( {section.title} ))}

{/* Tab Content */} {caseStudy.sections.map((section, index) => (

{/* Image Column (switches sides every other section) */}

{/* Content Column */}

{section.title}

{section.content}

{section.bullets && (

Key Points:

{idx + 1} {bullet}

)}

))}

{/* Testimonial */}

{caseStudy.testimonial.quote}

{caseStudy.testimonial.author}

{caseStudy.testimonial.role}

{/* Tools & CTA */}

Tools & Technologies Used

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

); } 52: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 } 53: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 } 54: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 } 4a:["$","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"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/portfolio-portfolio-case-studies-side-by-side-image-story.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/portfolio-portfolio-case-studies-side-by-side-image-story","itemId":"@shadcn-ui-blocks/portfolio-portfolio-case-studies-side-by-side-image-story"}],["$","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"}],["$","$L50",null,{"files":[{"path":"components/blocks/portfolio/portfolio-case-studies/side-by-side-image-story.tsx","content":"$51","type":"registry:component","target":"components/blocks/portfolio/portfolio-case-studies/side-by-side-image-story.tsx"},{"path":"components/ui/button.tsx","content":"$52","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/badge.tsx","content":"$53","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/tabs.tsx","content":"$54","type":"registry:ui","target":"components/ui/tabs.tsx"}]}]]}],"$L55"]}]

Side By Side Image Story

Installation

Files

components

Styles