{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-project-displays-quote-stack","type":"registry:block","title":"Quote Stack","files":[{"path":"components/blocks/portfolio/portfolio-project-displays/quote-stack.tsx","content":"import { ArrowRight, Quote } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Badge } from '@/components/ui/badge';\nimport { Card, CardContent } from '@/components/ui/card';\n\n// Sample project data with client quotes\nconst projects = [\n  {\n    id: 1,\n    title: 'Enterprise Client Portal',\n    category: 'Web Development',\n    description:\n      'Secure client portal with custom dashboards and document management for a financial services firm.',\n    image:\n      'https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop&ixlib=rb-4.0.3',\n    technologies: ['React', 'Next.js', 'TypeScript', 'Prisma'],\n    quote: {\n      text: 'The client portal transformed how we interact with customers. Our document processing time decreased by 40% while client satisfaction scores increased by 35%.',\n      author: 'Sarah Johnson',\n      role: 'VP of Operations, Financial Services Inc.',\n    },\n    link: '#',\n  },\n  {\n    id: 2,\n    title: 'AI-Powered Recommendation Engine',\n    category: 'Machine Learning',\n    description:\n      'Intelligent product recommendation engine built for an e-commerce platform using machine learning algorithms.',\n    image:\n      'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',\n    technologies: ['Python', 'TensorFlow', 'AWS', 'Node.js'],\n    quote: {\n      text: 'This recommendation engine completely changed our game. Customer engagement increased by 28% and our average order value went up by 22% within just three months of implementation.',\n      author: 'Michael Chen',\n      role: 'CTO, RetailPlus',\n    },\n    link: '#',\n  },\n  {\n    id: 3,\n    title: 'Healthcare Patient Management System',\n    category: 'Full Stack Development',\n    description:\n      'Comprehensive patient management system designed for a network of healthcare clinics.',\n    image:\n      'https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',\n    technologies: ['React', 'Node.js', 'PostgreSQL', 'Socket.io'],\n    quote: {\n      text: 'The system we built together not only streamlined our operations but also improved patient care. Our staff now spends 35% less time on administrative tasks and more time with patients.',\n      author: 'Dr. Amelia Rivera',\n      role: 'Medical Director, HealthFirst Clinics',\n    },\n    link: '#',\n  },\n  {\n    id: 4,\n    title: 'Mobile Fitness Tracking Platform',\n    category: 'Mobile Development',\n    description:\n      'Cross-platform fitness application with personalized workout plans, nutrition tracking, and social features.',\n    image:\n      'https://images.unsplash.com/photo-1593811167562-9cef47bfc4d7?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3',\n    technologies: ['React Native', 'Firebase', 'Redux', 'Node.js'],\n    quote: {\n      text: 'Working on this fitness app challenged me to deeply understand user habits and motivation. The integration of social features with personalized fitness tracking created an experience that users truly connected with.',\n      author: 'Personal Insight',\n      role: 'Key Learning',\n    },\n    link: '#',\n  },\n  {\n    id: 5,\n    title: 'Supply Chain Optimization System',\n    category: 'Data Engineering',\n    description:\n      'End-to-end supply chain visibility and optimization platform for manufacturing industry.',\n    image:\n      'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',\n    technologies: ['Python', 'React', 'Docker', 'Kubernetes'],\n    quote: {\n      text: \"This system revolutionized our supply chain operations. We've reduced inventory costs by 18% and decreased delivery times by 25%. I've never seen such a significant operational improvement from a single technology implementation.\",\n      author: 'Robert Williams',\n      role: 'Supply Chain Director, ManufacturePro',\n    },\n    link: '#',\n  },\n  {\n    id: 6,\n    title: 'Blockchain Identity Verification',\n    category: 'Blockchain Development',\n    description:\n      'Secure identity verification solution using blockchain technology for a fintech company.',\n    image:\n      'https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',\n    technologies: ['Ethereum', 'Solidity', 'React', 'Web3.js'],\n    quote: {\n      text: \"The most challenging aspect of this project was balancing cutting-edge blockchain technology with user-friendly interfaces. Finding that balance taught me that technical innovation is only valuable when it's accessible to users.\",\n      author: 'Personal Insight',\n      role: 'Technical Challenge',\n    },\n    link: '#',\n  },\n];\n\nexport default function PortfolioQuoteStack() {\n  return (\n    <div className=\"bg-background py-16 md:py-24\">\n      <div className=\"container mx-auto px-4 2xl:max-w-[1400px]\">\n        {/* Section header */}\n        <div className=\"mb-16 text-center md:mb-24\">\n          <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            Projects & Perspectives\n          </h2>\n          <p className=\"text-muted-foreground mx-auto mt-4 max-w-2xl\">\n            A showcase of my technical work paired with client testimonials and\n            personal insights\n          </p>\n        </div>\n\n        {/* Project grid with stacked images and quotes */}\n        <div className=\"grid gap-12 md:grid-cols-2 lg:gap-16\">\n          {projects.map((project) => (\n            <div key={project.id} className=\"group\">\n              {/* Project image */}\n              <div className=\"relative aspect-[4/3] overflow-hidden rounded-xl\">\n                <img\n                  src={project.image}\n                  alt={project.title}\n                  className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n                />\n                <div className=\"absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent\"></div>\n\n                {/* Project title and category overlay */}\n                <div className=\"absolute right-6 bottom-6 left-6\">\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-primary/90 text-primary-foreground\"\n                  >\n                    {project.category}\n                  </Badge>\n                  <h3 className=\"mt-2 text-2xl font-bold text-white drop-shadow-md\">\n                    {project.title}\n                  </h3>\n                </div>\n              </div>\n\n              {/* Quote card - positioned overlapping the image */}\n              <Card className=\"relative mx-4 -mt-20 border-2 shadow-lg\">\n                <CardContent>\n                  <div className=\"mb-4 flex items-start gap-2\">\n                    <Quote className=\"text-primary h-6 w-6 shrink-0 -scale-x-100\" />\n                    <p className=\"text-muted-foreground italic\">\n                      &ldquo;{project.quote.text}&rdquo;\n                    </p>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <p className=\"font-medium\">{project.quote.author}</p>\n                      <p className=\"text-muted-foreground text-sm\">\n                        {project.quote.role}\n                      </p>\n                    </div>\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      className=\"gap-1\"\n                      asChild\n                    >\n                      <a href={project.link}>\n                        Details\n                        <ArrowRight className=\"h-3 w-3\" />\n                      </a>\n                    </Button>\n                  </div>\n                </CardContent>\n              </Card>\n\n              {/* Project details */}\n              <div className=\"mt-6 px-4\">\n                <p className=\"text-muted-foreground mb-4\">\n                  {project.description}\n                </p>\n                <div className=\"flex flex-wrap gap-2\">\n                  {project.technologies.map((tech) => (\n                    <Badge key={tech} variant=\"outline\">\n                      {tech}\n                    </Badge>\n                  ))}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-project-displays/quote-stack.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"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\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"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\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"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\",\n        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\",\n        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\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"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!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"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\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>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\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"}],"description":"A vertical stack of client quotes paired with project names and roles. Use it to weave testimonials into a project page and back up your results with words.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}