{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-careers-career-path","type":"registry:block","title":"Career Path","files":[{"path":"components/blocks/marketing/careers/career-path.tsx","content":"import * as React from 'react';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport {\n  BriefcaseIcon,\n  Database,\n  Globe,\n  LineChart,\n  Paintbrush,\n  Server,\n  Users,\n} from 'lucide-react';\n\ninterface CareerStep {\n  id: string;\n  title: string;\n  description: string;\n  timeframe: string;\n  requirements: string[];\n}\n\ninterface CareerPath {\n  id: string;\n  department: string;\n  icon: React.ReactNode;\n  description: string;\n  steps: CareerStep[];\n}\n\nexport default function CareerPath() {\n  const careerPaths: CareerPath[] = [\n    {\n      id: 'engineering',\n      department: 'Engineering',\n      icon: <Server className=\"h-6 w-6\" />,\n      description:\n        \"Build, scale, and maintain our technology infrastructure and applications, pushing the boundaries of what's possible.\",\n      steps: [\n        {\n          id: 'eng-1',\n          title: 'Junior Developer',\n          description:\n            'Start your journey by contributing to features and fixing bugs under the guidance of senior team members.',\n          timeframe: '0-2 years',\n          requirements: [\n            'CS degree or equivalent experience',\n            'Knowledge of at least one programming language',\n            'Understanding of basic data structures and algorithms',\n            'Eagerness to learn and grow',\n          ],\n        },\n        {\n          id: 'eng-2',\n          title: 'Mid-Level Developer',\n          description:\n            'Take ownership of features and collaborate on architectural decisions for product components.',\n          timeframe: '2-4 years',\n          requirements: [\n            'Strong programming skills in multiple languages',\n            'Experience building production-ready features',\n            'Understanding of testing and deployment',\n            'Ability to mentor junior developers',\n          ],\n        },\n        {\n          id: 'eng-3',\n          title: 'Senior Developer',\n          description:\n            'Lead technical implementation across projects and mentor other team members while solving complex problems.',\n          timeframe: '4-6 years',\n          requirements: [\n            'Deep expertise in core technologies',\n            'System design and architecture experience',\n            'Performance optimization skills',\n            'Excellent communication and leadership',\n          ],\n        },\n        {\n          id: 'eng-4',\n          title: 'Principal Engineer',\n          description:\n            'Shape technical strategy, establish best practices, and lead critical initiatives across engineering.',\n          timeframe: '6+ years',\n          requirements: [\n            'Record of leading complex technical projects',\n            'Cross-team collaboration experience',\n            'Technical vision and roadmap planning',\n            'Influence across the organization',\n          ],\n        },\n      ],\n    },\n    {\n      id: 'design',\n      department: 'Design',\n      icon: <Paintbrush className=\"h-6 w-6\" />,\n      description:\n        'Create intuitive, beautiful, and accessible user experiences that delight our customers and solve their problems.',\n      steps: [\n        {\n          id: 'design-1',\n          title: 'Junior Designer',\n          description:\n            'Support design projects by creating assets, conducting research, and learning our design system.',\n          timeframe: '0-2 years',\n          requirements: [\n            'Design degree or equivalent experience',\n            'Proficiency in design tools like Figma',\n            'Basic understanding of UX principles',\n            'Solid visual design fundamentals',\n          ],\n        },\n        {\n          id: 'design-2',\n          title: 'Product Designer',\n          description:\n            'Take ownership of design projects, from research through implementation, working closely with product teams.',\n          timeframe: '2-4 years',\n          requirements: [\n            'Strong UX research and design skills',\n            'Ability to translate user needs into design solutions',\n            'Collaboration with developers on implementation',\n            'Experience with design systems',\n          ],\n        },\n        {\n          id: 'design-3',\n          title: 'Senior Designer',\n          description:\n            'Lead design strategy for product areas, mentor junior designers, and improve our design processes.',\n          timeframe: '4-6 years',\n          requirements: [\n            'Deep expertise in product and interaction design',\n            'Experience leading design projects',\n            'Strong facilitation and communication skills',\n            'Strategic thinking and problem-solving',\n          ],\n        },\n        {\n          id: 'design-4',\n          title: 'Design Director',\n          description:\n            'Shape our design vision, build and lead teams, and ensure design quality across all products.',\n          timeframe: '6+ years',\n          requirements: [\n            'Leadership experience in design',\n            'Strategic vision for product design',\n            'Cross-functional collaboration at executive level',\n            'Team building and mentorship',\n          ],\n        },\n      ],\n    },\n    {\n      id: 'product',\n      department: 'Product',\n      icon: <Globe className=\"h-6 w-6\" />,\n      description:\n        'Define product vision, gather customer insights, and coordinate development to deliver solutions that users love.',\n      steps: [\n        {\n          id: 'product-1',\n          title: 'Associate Product Manager',\n          description:\n            'Learn product development by supporting features, conducting research, and working with cross-functional teams.',\n          timeframe: '0-2 years',\n          requirements: [\n            'Understanding of product development',\n            'Analytical and problem-solving skills',\n            'Strong communication abilities',\n            'Customer-focused mindset',\n          ],\n        },\n        {\n          id: 'product-2',\n          title: 'Product Manager',\n          description:\n            'Own product features end-to-end, from ideation to launch, collaborating closely with design and engineering.',\n          timeframe: '2-4 years',\n          requirements: [\n            'Experience shipping successful products/features',\n            'Data analysis and experimentation skills',\n            'User research and requirements gathering',\n            'Cross-functional collaboration',\n          ],\n        },\n        {\n          id: 'product-3',\n          title: 'Senior Product Manager',\n          description:\n            'Lead product strategy for major areas, drive business outcomes, and mentor other product managers.',\n          timeframe: '4-6 years',\n          requirements: [\n            'Strategic product planning experience',\n            'Strong business acumen and market awareness',\n            'Experience leading product teams',\n            'Stakeholder management skills',\n          ],\n        },\n        {\n          id: 'product-4',\n          title: 'Director of Product',\n          description:\n            'Define product vision, build and lead product teams, and align product strategy with company goals.',\n          timeframe: '6+ years',\n          requirements: [\n            'Proven track record of product leadership',\n            'Experience building and growing product teams',\n            'Strategic thinking and roadmap planning',\n            'Executive-level communication skills',\n          ],\n        },\n      ],\n    },\n    {\n      id: 'data',\n      department: 'Data',\n      icon: <Database className=\"h-6 w-6\" />,\n      description:\n        'Transform raw data into actionable insights that drive business decisions and improve our products.',\n      steps: [\n        {\n          id: 'data-1',\n          title: 'Data Analyst',\n          description:\n            'Analyze data to answer business questions, create dashboards, and support decision-making.',\n          timeframe: '0-2 years',\n          requirements: [\n            'SQL and data analysis skills',\n            'Experience with visualization tools',\n            'Understanding of statistics',\n            'Strong problem-solving ability',\n          ],\n        },\n        {\n          id: 'data-2',\n          title: 'Data Scientist',\n          description:\n            'Apply advanced analytics, statistical modeling, and machine learning to extract insights from data.',\n          timeframe: '2-4 years',\n          requirements: [\n            'Statistics and machine learning knowledge',\n            'Programming in Python or R',\n            'Data wrangling and preparation skills',\n            'Experience with real-world data problems',\n          ],\n        },\n        {\n          id: 'data-3',\n          title: 'Senior Data Scientist',\n          description:\n            'Lead complex data initiatives, develop advanced models, and mentor data team members.',\n          timeframe: '4-6 years',\n          requirements: [\n            'Deep expertise in machine learning and statistics',\n            'Experience deploying models to production',\n            'Cross-functional project leadership',\n            'Business strategy and impact focus',\n          ],\n        },\n        {\n          id: 'data-4',\n          title: 'Data Science Director',\n          description:\n            'Shape data strategy, build and lead teams, and define how data drives product and business decisions.',\n          timeframe: '6+ years',\n          requirements: [\n            'Leadership experience in data functions',\n            'Strategic thinking and organizational impact',\n            'Team building and development',\n            'Executive communication skills',\n          ],\n        },\n      ],\n    },\n    {\n      id: 'marketing',\n      department: 'Marketing',\n      icon: <LineChart className=\"h-6 w-6\" />,\n      description:\n        'Build brand awareness, generate demand, and craft compelling stories that connect with our target audience.',\n      steps: [\n        {\n          id: 'marketing-1',\n          title: 'Marketing Associate',\n          description:\n            'Support marketing campaigns, create content, and learn about our market, customers, and products.',\n          timeframe: '0-2 years',\n          requirements: [\n            'Marketing fundamentals knowledge',\n            'Strong written and verbal communication',\n            'Basic content creation skills',\n            'Analytical mindset',\n          ],\n        },\n        {\n          id: 'marketing-2',\n          title: 'Marketing Manager',\n          description:\n            'Develop and execute marketing strategies for specific channels or product areas.',\n          timeframe: '2-4 years',\n          requirements: [\n            'Experience running successful marketing campaigns',\n            'Channel expertise (content, digital, events, etc.)',\n            'Project management abilities',\n            'Results measurement and optimization',\n          ],\n        },\n        {\n          id: 'marketing-3',\n          title: 'Senior Marketing Manager',\n          description:\n            'Lead cross-channel marketing strategies, manage campaigns end-to-end, and mentor team members.',\n          timeframe: '4-6 years',\n          requirements: [\n            'Strategic marketing planning experience',\n            'Budget management',\n            'Team leadership skills',\n            'Cross-functional collaboration',\n          ],\n        },\n        {\n          id: 'marketing-4',\n          title: 'Marketing Director',\n          description:\n            'Define marketing vision, build high-performing teams, and align marketing with company objectives.',\n          timeframe: '6+ years',\n          requirements: [\n            'Proven marketing leadership experience',\n            'Strategic thinking and brand development',\n            'Team building and mentorship',\n            'Budget planning and resource allocation',\n          ],\n        },\n      ],\n    },\n    {\n      id: 'customer-success',\n      department: 'Customer Success',\n      icon: <Users className=\"h-6 w-6\" />,\n      description:\n        'Ensure customers achieve their goals using our products through education, support, and relationship building.',\n      steps: [\n        {\n          id: 'cs-1',\n          title: 'Customer Support Specialist',\n          description:\n            'Provide frontline support to customers, solve problems, and ensure a positive experience.',\n          timeframe: '0-2 years',\n          requirements: [\n            'Strong communication skills',\n            'Problem-solving ability',\n            'Empathy and customer focus',\n            'Technical aptitude',\n          ],\n        },\n        {\n          id: 'cs-2',\n          title: 'Customer Success Manager',\n          description:\n            'Own customer relationships, drive product adoption, and ensure customer satisfaction and retention.',\n          timeframe: '2-4 years',\n          requirements: [\n            'Relationship management experience',\n            'Deep product knowledge',\n            'Ability to understand customer goals',\n            'Proactive problem resolution',\n          ],\n        },\n        {\n          id: 'cs-3',\n          title: 'Senior Customer Success Manager',\n          description:\n            'Manage strategic customer relationships, develop customer success playbooks, and mentor team members.',\n          timeframe: '4-6 years',\n          requirements: [\n            'Track record of customer retention and growth',\n            'Strategic thinking and planning',\n            'Experience with complex customer situations',\n            'Leadership and mentoring skills',\n          ],\n        },\n        {\n          id: 'cs-4',\n          title: 'Customer Success Director',\n          description:\n            'Build customer success strategy, lead teams, and ensure customer success contributes to business growth.',\n          timeframe: '6+ years',\n          requirements: [\n            'Leadership experience in customer-facing roles',\n            'Strategic planning and execution',\n            'Team building and development',\n            'Cross-departmental collaboration',\n          ],\n        },\n      ],\n    },\n  ];\n\n  return (\n    <div className=\"container mx-auto px-4 py-12\">\n      <div className=\"mb-10 text-center\">\n        <h2 className=\"mb-2 text-3xl font-bold tracking-tight\">\n          Growth Opportunities\n        </h2>\n        <p className=\"text-muted-foreground mx-auto max-w-2xl\">\n          We believe in providing clear career paths for all employees. Explore\n          the growth opportunities available in different departments.\n        </p>\n      </div>\n\n      <Tabs defaultValue={careerPaths[0]!.id} className=\"w-full\">\n        <div className=\"mb-8 overflow-x-auto\">\n          <TabsList className=\"inline-flex w-auto\">\n            {careerPaths.map((path) => (\n              <TabsTrigger\n                key={path.id}\n                value={path.id}\n                className=\"flex items-center gap-2\"\n              >\n                {path.icon}\n                <span className=\"hidden sm:inline\">{path.department}</span>\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </div>\n\n        {careerPaths.map((path) => (\n          <TabsContent key={path.id} value={path.id} className=\"space-y-8\">\n            <div className=\"flex flex-col\">\n              <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n                <div className=\"bg-primary/10 text-primary flex h-10 w-10 shrink-0 items-center justify-center rounded-full sm:h-12 sm:w-12\">\n                  {path.icon}\n                </div>\n                <div>\n                  <h3 className=\"mt-2 text-xl font-semibold sm:mt-0\">\n                    {path.department} Career Path\n                  </h3>\n                  <p className=\"text-muted-foreground text-sm\">\n                    {path.description}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"mt-4 grid grid-cols-1 gap-4 sm:mt-8 md:grid-cols-2 lg:grid-cols-4\">\n                {path.steps.map((step) => (\n                  <Card key={step.id} className=\"relative\">\n                    <CardHeader>\n                      <div className=\"bg-primary/10 text-primary mb-2 flex h-9 w-9 items-center justify-center rounded-full sm:h-10 sm:w-10\">\n                        <BriefcaseIcon className=\"h-5 w-5\" />\n                      </div>\n                      <CardTitle className=\"text-lg\">{step.title}</CardTitle>\n                      <CardDescription className=\"text-primary font-medium\">\n                        {step.timeframe}\n                      </CardDescription>\n                    </CardHeader>\n                    <CardContent className=\"space-y-4\">\n                      <p className=\"text-muted-foreground text-sm\">\n                        {step.description}\n                      </p>\n                      <div>\n                        <h4 className=\"mb-2 text-sm font-medium\">\n                          Key Requirements:\n                        </h4>\n                        <ul className=\"text-muted-foreground text-sm\">\n                          {step.requirements.map((req, i) => (\n                            <li key={i} className=\"mb-1 flex items-start\">\n                              <span className=\"bg-primary/70 mt-1 mr-2 block h-1.5 w-1.5 rounded-full\"></span>\n                              {req}\n                            </li>\n                          ))}\n                        </ul>\n                      </div>\n                    </CardContent>\n                  </Card>\n                ))}\n              </div>\n            </div>\n          </TabsContent>\n        ))}\n      </Tabs>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/careers/career-path.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"},{"path":"components/ui/tabs.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n","type":"registry:ui","target":"components/ui/tabs.tsx"}],"description":"A career path layout showing role progression, levels, and growth milestones. Helps applicants picture how they advance after joining your team.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}