{"name":"mobile-marketplace","type":"registry:page","description":"Mobile template: mobile-marketplace","dependencies":["lucide-react"],"files":[{"path":"templates/mobile-app/mobile-marketplace.tsx","content":"import { Bell, Home, Layers, Search, ShoppingBag, Star, UserRound } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\n\nconst products = ['Trail shell', 'Daily sling', 'Studio cap']\n\nexport default function MobileMarketplacePage() {\n  return (\n    <main className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background text-foreground\">\n      <header className=\"flex items-center justify-between px-5 pb-4 pt-safe-top\">\n        <div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Marketplace</p>\n          <h1 className=\"mt-1 text-2xl font-semibold tracking-normal\">Curated drops</h1>\n        </div>\n        <Button\n          aria-label=\"Notifications\"\n          className=\"size-11 rounded-lg\"\n          size=\"icon\"\n          variant=\"outline\"\n        >\n          <Bell className=\"size-5\" />\n        </Button>\n      </header>\n\n      <section className=\"flex flex-1 flex-col gap-5 px-5 pb-24\">\n        <label className=\"relative block\">\n          <span className=\"sr-only\">Search catalog</span>\n          <Search className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n          <Input className=\"min-h-[44px] rounded-lg pl-10\" placeholder=\"Search catalog\" />\n        </label>\n\n        <div className=\"rounded-lg border bg-card p-4\">\n          <Badge className=\"rounded-md\" variant=\"secondary\">\n            Agent bundle\n          </Badge>\n          <h2 className=\"mt-4 text-2xl font-semibold tracking-normal\">\n            A weekend kit in three pieces\n          </h2>\n          <Button className=\"mt-5 min-h-[44px] rounded-lg\">\n            Shop bundle\n            <ShoppingBag className=\"ml-2 size-4\" />\n          </Button>\n        </div>\n\n        <div className=\"grid gap-3\">\n          {products.map((product, index) => (\n            <Card key={product} className=\"rounded-lg\">\n              <CardContent className=\"flex items-center gap-3 p-3\">\n                <div className=\"grid size-16 place-items-center rounded-lg bg-muted\">\n                  <Layers className=\"size-6 text-muted-foreground\" />\n                </div>\n                <div className=\"flex-1\">\n                  <h3 className=\"text-sm font-semibold\">{product}</h3>\n                  <p className=\"mt-1 text-xs text-muted-foreground\">Ready in {index + 2} colors</p>\n                  <p className=\"mt-2 flex items-center gap-1 text-xs text-muted-foreground\">\n                    <Star className=\"size-3 fill-current\" />\n                    4.{index + 7}\n                  </p>\n                </div>\n                <span className=\"text-sm font-semibold\">${72 + index * 18}</span>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </section>\n\n      <nav className=\"fixed inset-x-0 bottom-0 mx-auto flex max-w-md justify-around border-t bg-background/95 px-5 py-3 pb-safe-bottom backdrop-blur\">\n        {[Home, Search, ShoppingBag, UserRound].map((Icon, index) => (\n          <Button\n            key={index}\n            aria-label={`Tab ${index + 1}`}\n            className=\"size-11 rounded-lg\"\n            size=\"icon\"\n            variant={index === 0 ? 'secondary' : 'ghost'}\n          >\n            <Icon className=\"size-5\" />\n          </Button>\n        ))}\n      </nav>\n    </main>\n  )\n}\n","type":"registry:page","target":"app/mobile-marketplace/page.tsx"}],"categories":["mobile-app"],"registryDependencies":["badge","button","card","input"],"meta":{"frameworks":["react"],"category":"mobile-app","tags":["mobile","template","mobile-app"],"clientOnly":false,"viewport":"mobile-first","source":"packages/react/src/templates","previewPath":"registry/default/templates/mobile-app/mobile-marketplace.tsx"}}