{
  "name": "how-to/vertical-tabs",
  "type": "registry:component",
  "description": "Step-by-step how-to section using vertical tabs",
  "files": [
    {
      "path": "example/HowTo/SectionHowTo_VerticalTabs.astro",
      "type": "registry:component",
      "content": "---\nimport ScrollSidebar from '@@/components/ui/ScrollSidebar.astro';\nimport ScrollSidebarContent from '@@/components/ui/ScrollSidebarContent.astro';\nimport ScrollSidebarNav from '@@/components/ui/ScrollSidebarNav.astro';\nimport ScrollSidebarNavItem from '@@/components/ui/ScrollSidebarNavItem.astro';\nimport ScrollSidebarSection from '@@/components/ui/ScrollSidebarSection.astro';\nimport image1 from '@/assets/placeholder.png';\n\ninterface HowToItem {\n  id: string;\n  step: string;\n  title: string;\n  description: string;\n}\n\nconst howToItems: HowToItem[] = [\n  {\n    id: 'step-1',\n    step: '01',\n    title: 'Create Project',\n    description:\n      \"Start a new Pablo project from your dashboard. Name it, pick a theme, and you're ready to go. Pablo sets everything up so you can focus on content.\",\n  },\n  {\n    id: 'step-2',\n    step: '02',\n    title: 'Connect Repo',\n    description:\n      'Link your GitHub repository. Pablo will sync your README, docs, or product data automatically to keep your site always up-to-date.',\n  },\n  {\n    id: 'step-3',\n    step: '03',\n    title: 'Customize',\n    description:\n      'Tweak colors, typography, and layout with a few clicks. Add sections like Pricing, Testimonials, and FAQ to match your brand style.',\n  },\n  {\n    id: 'step-4',\n    step: '04',\n    title: 'Deploy',\n    description:\n      \"When you're ready, deploy to production. Your site will be fast, secure, and accessible from day one.\",\n  },\n];\n---\n\n<section class=\"relative py-20 sm:py-24\" data-scheme=\"bg\">\n  <div class=\"container mx-auto\">\n    <div class=\"mb-10 text-left\">\n      <div\n        class=\"rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm\"\n        data-scheme=\"shift\"\n      >\n        <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n        How it Works\n      </div>\n      <h2 class=\"h2 mb-4\">Build your site in 4 simple steps</h2>\n      <p class=\"text-fg-sub max-w-3xl text-lg md:text-xl\">\n        Discover how Pablo is transforming the way people build websites\n      </p>\n    </div>\n\n    <!-- モバイル: 順序通り表示 -->\n    <div class=\"flex flex-col gap-16 lg:hidden\">\n      {\n        howToItems.map((item) => (\n          <div class=\"flex flex-col gap-8\">\n            <img\n              src={image1.src}\n              alt={`${item.title} screenshot`}\n              class=\"h-auto w-full rounded-[var(--sp-radius-card)] object-cover\"\n              style=\"aspect-ratio: 16/10;\"\n              width={image1.width}\n              height={image1.height}\n            />\n            <div>\n              <div class=\"text-fg-sub mb-2 text-xs font-medium uppercase tracking-wider\">\n                {item.step}\n              </div>\n              <h3 class=\"text-2xl font-bold text-[color:var(--sp-fg)]\">\n                {item.title}\n              </h3>\n              <p class=\"text-fg-sub mt-2 text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))\n      }\n    </div>\n\n    <!-- デスクトップ: スクロール連動 -->\n    <ScrollSidebar gap=\"2rem\" class=\"hidden lg:flex\">\n      <ScrollSidebarNav stickyTop=\"6rem\">\n        {\n          howToItems.map((item, index) => (\n            <ScrollSidebarNavItem id={item.id} defaultOpen={index === 0}>\n              <div slot=\"header\">\n                <div class=\"text-fg-sub mb-2 text-xs font-medium uppercase tracking-wider\">\n                  {item.step}\n                </div>\n                <h3 class=\"text-2xl font-bold text-[color:var(--sp-fg)]\">\n                  {item.title}\n                </h3>\n              </div>\n              <div slot=\"content\">\n                <p class=\"text-fg-sub mt-4 text-sm leading-relaxed\">\n                  {item.description}\n                </p>\n              </div>\n            </ScrollSidebarNavItem>\n          ))\n        }\n      </ScrollSidebarNav>\n\n      <ScrollSidebarContent gap=\"8rem\">\n        {\n          howToItems.map((item, index) => (\n            <ScrollSidebarSection\n              id={item.id}\n              class={index === 0 ? \"pt-6\" : \"\"}\n            >\n              <img\n                src={image1.src}\n                alt={`${item.title} screenshot`}\n                class=\"h-auto w-full rounded-[var(--sp-radius-card)] object-cover\"\n                style=\"aspect-ratio: 16/10;\"\n                width={image1.width}\n                height={image1.height}\n              />\n            </ScrollSidebarSection>\n          ))\n        }\n      </ScrollSidebarContent>\n    </ScrollSidebar>\n  </div>\n</section>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "tabs",
    "tabs-list",
    "tabs-trigger",
    "tabs-content"
  ]
}