{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-why-work-with-me-storytelling-approach","type":"registry:block","title":"Storytelling Approach","files":[{"path":"components/blocks/portfolio/portfolio-why-work-with-me/storytelling-approach.tsx","content":"import { ArrowRight } 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 core values data\nconst coreValues = [\n  {\n    id: 1,\n    title: 'Craftsmanship',\n    description:\n      'I believe in attention to detail and taking pride in every project I undertake.',\n  },\n  {\n    id: 2,\n    title: 'Transparency',\n    description:\n      'Open communication and honest feedback are essential to successful collaborations.',\n  },\n  {\n    id: 3,\n    title: 'Innovation',\n    description:\n      'I constantly explore new technologies and approaches to deliver cutting-edge solutions.',\n  },\n  {\n    id: 4,\n    title: 'Partnership',\n    description:\n      'I view clients as partners in a shared journey toward achieving their goals.',\n  },\n];\n\nexport default function StorytellingApproach() {\n  return (\n    <section 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-12 text-center md:mb-16\">\n          <Badge className=\"mb-4\" variant=\"outline\">\n            My Story\n          </Badge>\n          <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            Why Work With Me\n          </h2>\n          <p className=\"text-muted-foreground mx-auto mt-4 max-w-2xl text-lg\">\n            Understanding my background, values, and approach to client projects\n          </p>\n        </div>\n\n        <div className=\"mx-auto max-w-4xl\">\n          <div className=\"grid gap-12 md:grid-cols-2 md:gap-16\">\n            {/* Left column with image */}\n            <div>\n              <div className=\"relative mb-6 aspect-square overflow-hidden rounded-xl\">\n                <img\n                  src=\"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop\"\n                  alt=\"Portrait photo\"\n                  className=\"object-cover\"\n                />\n              </div>\n              <div className=\"grid gap-4 sm:grid-cols-2\">\n                <div className=\"bg-muted rounded-lg p-4 text-center\">\n                  <p className=\"text-4xl font-bold\">7+</p>\n                  <p className=\"text-muted-foreground text-sm\">\n                    Years Experience\n                  </p>\n                </div>\n                <div className=\"bg-muted rounded-lg p-4 text-center\">\n                  <p className=\"text-4xl font-bold\">100+</p>\n                  <p className=\"text-muted-foreground text-sm\">\n                    Projects Completed\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            {/* Right column with story text */}\n            <div className=\"flex flex-col justify-center\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">My Journey</h3>\n              <div className=\"space-y-4\">\n                <p>\n                  My path to becoming a freelance professional began over seven\n                  years ago when I discovered my passion for creating digital\n                  solutions that solve real problems. What started as a\n                  curiosity evolved into a career built on continuous learning\n                  and client success.\n                </p>\n                <p>\n                  After working with agencies and large teams, I made the\n                  decision to go independent to focus on what I love most:\n                  working closely with clients to bring their visions to life\n                  without the constraints of corporate processes.\n                </p>\n                <p>\n                  Today, I combine technical expertise with a deep understanding\n                  of user needs and business goals. This holistic approach\n                  allows me to deliver solutions that not only look great but\n                  also drive measurable results for my clients.\n                </p>\n              </div>\n\n              <h3 className=\"mt-8 mb-4 text-2xl font-semibold\">\n                Philosophy & Approach\n              </h3>\n              <p className=\"mb-6\">\n                I believe that the best work comes from true collaboration. My\n                approach centers on understanding your business deeply,\n                communicating clearly throughout the process, and crafting\n                solutions that exceed expectations. Every project is an\n                opportunity to create something meaningful that delivers value\n                long after launch.\n              </p>\n            </div>\n          </div>\n\n          {/* Core Values */}\n          <div className=\"mt-16\">\n            <h3 className=\"mb-8 text-center text-2xl font-semibold\">\n              Core Values That Guide My Work\n            </h3>\n            <div className=\"grid gap-6 sm:grid-cols-2\">\n              {coreValues.map((value) => (\n                <Card key={value.id}>\n                  <CardContent>\n                    <h4 className=\"mb-2 text-xl font-medium\">{value.title}</h4>\n                    <p className=\"text-muted-foreground\">{value.description}</p>\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\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>Start a conversation</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/storytelling-approach.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 narrative section that walks through your process in ordered steps with supporting copy. Use it to explain how you work and win over cautious buyers.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}