{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-why-work-with-me-why-me-vs-competition","type":"registry:block","title":"Why Me Vs Competition","files":[{"path":"components/blocks/portfolio/portfolio-why-work-with-me/why-me-vs-competition.tsx","content":"import { ArrowRight, Check, X } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Badge } from '@/components/ui/badge';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table';\n\n// Sample comparison data\nconst comparisonPoints = [\n  {\n    id: 1,\n    category: 'Quality',\n    me: {\n      value: 'Custom solutions built specifically for your needs',\n      included: true,\n    },\n    others: {\n      value: 'Often pre-made templates with minimal customization',\n      included: false,\n    },\n  },\n  {\n    id: 2,\n    category: 'Communication',\n    me: {\n      value: 'Direct access to me throughout the entire project',\n      included: true,\n    },\n    others: {\n      value: 'Often dealing with account managers or multiple team members',\n      included: false,\n    },\n  },\n  {\n    id: 3,\n    category: 'Turnaround Time',\n    me: {\n      value: 'Focused attention on your project with quick iterations',\n      included: true,\n    },\n    others: {\n      value: 'Can be delayed due to multiple projects and priorities',\n      included: false,\n    },\n  },\n  {\n    id: 4,\n    category: 'Pricing',\n    me: {\n      value: 'Transparent pricing with no hidden fees',\n      included: true,\n    },\n    others: {\n      value: 'Often includes markups or unexpected costs',\n      included: false,\n    },\n  },\n  {\n    id: 5,\n    category: 'Flexibility',\n    me: {\n      value: 'Adaptable to changes and evolving requirements',\n      included: true,\n    },\n    others: {\n      value: 'Usually rigid process with change fees',\n      included: false,\n    },\n  },\n];\n\n// Key advantages data\nconst keyAdvantages = [\n  'Personal attention and care for every detail of your project',\n  'Direct collaboration with no middlemen or communication barriers',\n  'Competitive pricing without the agency overhead costs',\n  'Specialized expertise focused on your industry',\n  'Faster delivery with efficient workflows',\n];\n\nexport default function WhyMeVsCompetition() {\n  return (\n    <section className=\"bg-background py-16 md:py-24\">\n      <div className=\"container mx-auto px-4\">\n        {/* Section header */}\n        <div className=\"mb-12 text-center md:mb-16\">\n          <Badge className=\"mb-4\" variant=\"outline\">\n            Why Choose Me\n          </Badge>\n          <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            How I Compare\n          </h2>\n          <p className=\"text-muted-foreground mx-auto mt-4 max-w-2xl text-lg\">\n            Understanding the differences between working with me versus other\n            options\n          </p>\n        </div>\n\n        <div className=\"mx-auto\">\n          {/* Comparison Table */}\n          <div className=\"mb-12 overflow-hidden rounded-xl border shadow-sm\">\n            <Table>\n              <TableHeader>\n                <TableRow className=\"bg-muted/50\">\n                  <TableHead className=\"w-[200px]\">Comparison Point</TableHead>\n                  <TableHead className=\"text-center\">Working With Me</TableHead>\n                  <TableHead className=\"text-center\">Other Options</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {comparisonPoints.map((point) => (\n                  <TableRow key={point.id}>\n                    <TableCell className=\"font-medium\">\n                      {point.category}\n                    </TableCell>\n                    <TableCell>\n                      <div className=\"flex items-center gap-2\">\n                        <div className=\"bg-primary/10 mt-0.5 rounded-full p-1\">\n                          <Check className=\"text-primary h-4 w-4\" />\n                        </div>\n                        <span>{point.me.value}</span>\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"text-muted-foreground\">\n                      <div className=\"flex items-center gap-2\">\n                        <div className=\"bg-destructive/10 mt-0.5 rounded-full p-1\">\n                          <X className=\"text-destructive h-4 w-4\" />\n                        </div>\n                        <span>{point.others.value}</span>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n\n          {/* Key Advantages */}\n          <div className=\"bg-card rounded-xl border p-6 shadow-sm\">\n            <h3 className=\"mb-6 text-center text-xl font-semibold\">\n              My Key Advantages\n            </h3>\n            <ul className=\"grid gap-4 sm:grid-cols-2\">\n              {keyAdvantages.map((advantage, index) => (\n                <li key={index} className=\"flex items-start gap-2\">\n                  <div className=\"bg-primary/10 rounded-full p-1\">\n                    <Check className=\"text-primary h-4 w-4\" />\n                  </div>\n                  <span>{advantage}</span>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <div className=\"mt-12 text-center\">\n            <Button size=\"lg\" asChild>\n              <a href=\"#\" className=\"inline-flex items-center gap-2\">\n                <span>Discuss your project</span>\n                <ArrowRight className=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-why-work-with-me/why-me-vs-competition.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/table.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n","type":"registry:ui","target":"components/ui/table.tsx"}],"description":"A two column comparison table contrasting your offer against typical alternatives. Helps undecided visitors see why you are the better choice at a glance.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}