{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-core-services-overview-split-layout-feature","type":"registry:block","title":"Split Layout Feature","files":[{"path":"components/blocks/portfolio/portfolio-core-services-overview/split-layout-feature.tsx","content":"import { ArrowRight, Check } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Badge } from '@/components/ui/badge';\n\n// Sample services data\nconst services = [\n  {\n    id: 1,\n    title: 'Web Development',\n    description:\n      'Custom websites and web applications with clean code and intuitive interfaces that engage your visitors.',\n  },\n  {\n    id: 2,\n    title: 'UI/UX Design',\n    description:\n      'User-centered design solutions that enhance usability and create enjoyable digital experiences.',\n  },\n  {\n    id: 3,\n    title: 'Digital Marketing',\n    description:\n      'Strategic campaigns that boost your online presence and connect you with your target audience.',\n  },\n  {\n    id: 4,\n    title: 'SEO Optimization',\n    description:\n      'Technical and content optimization to improve visibility and drive organic traffic to your website.',\n  },\n  {\n    id: 5,\n    title: 'Content Strategy',\n    description:\n      'Engaging, relevant content that resonates with your audience and supports your business goals.',\n  },\n];\n\nexport default function SplitLayoutFeature() {\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        <div className=\"grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16\">\n          {/* Left column with intro text and CTA */}\n          <div className=\"flex flex-col justify-center\">\n            <Badge className=\"mb-6 w-fit\" variant=\"outline\">\n              Services\n            </Badge>\n            <h2 className=\"mb-6 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n              How I Can Help You\n            </h2>\n\n            <p className=\"text-muted-foreground mb-8 text-lg leading-relaxed\">\n              I offer specialized services designed to help you establish a\n              strong online presence and achieve your business goals. Each\n              service can be tailored to your specific needs or combined into a\n              comprehensive solution.\n            </p>\n\n            <div className=\"mt-2 flex flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4\">\n              <Button size=\"lg\" asChild>\n                <a href=\"#\" className=\"flex items-center gap-2\">\n                  <span>Get in touch</span>\n                  <ArrowRight className=\"h-4 w-4\" />\n                </a>\n              </Button>\n              <Button size=\"lg\" variant=\"outline\" asChild>\n                <a href=\"#\">View portfolio</a>\n              </Button>\n            </div>\n\n            <div className=\"relative mt-12 hidden lg:block\">\n              <img\n                src=\"https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop\"\n                alt=\"Professional collaboration\"\n                width={500}\n                height={300}\n                className=\"rounded-lg object-cover\"\n              />\n            </div>\n          </div>\n\n          {/* Right column with services list */}\n          <div className=\"bg-card flex flex-col justify-center rounded-xl border p-8 shadow-sm\">\n            <h3 className=\"text-muted-foreground mb-8 text-lg font-medium\">\n              Specialized services to help your business grow\n            </h3>\n\n            <div className=\"space-y-6\">\n              {services.map((service) => (\n                <div\n                  key={service.id}\n                  className=\"border-border border-b pb-6 last:border-0 last:pb-0\"\n                >\n                  <div className=\"flex items-start gap-3\">\n                    <div className=\"bg-primary/10 rounded-full p-1\">\n                      <Check className=\"text-primary h-5 w-5\" />\n                    </div>\n                    <div>\n                      <h4 className=\"font-medium\">{service.title}</h4>\n                      <p className=\"text-muted-foreground mt-1 text-sm\">\n                        {service.description}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            <div className=\"mt-8 text-center\">\n              <Button variant=\"outline\" asChild className=\"w-full\">\n                <a href=\"#\" className=\"flex items-center justify-center gap-2\">\n                  <span>Request custom service</span>\n                  <ArrowRight className=\"h-4 w-4\" />\n                </a>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-core-services-overview/split-layout-feature.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"}],"description":"A split section pairing a single highlighted service with an image on one side and explanatory copy on the other. Spotlights your headline offering.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}