{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-forms-01",
  "type": "registry:component",
  "title": "Checkout Forms",
  "author": "Toby Belhome",
  "description": "Streamline the purchasing process with Tailwind CSS checkout form sections. These layouts feature organized fields, clear labels, and responsive design to ensure smooth and user-friendly transactions. Perfect for online stores and marketplaces aiming for modern, secure, and conversion-optimized checkout experiences.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "card",
    "input",
    "label",
    "button",
    "checkbox",
    "separator"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/checkout-forms/01/page.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Card, CardContent, CardFooter } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Check, Gift } from \"lucide-react\";\nimport { Separator } from \"@/components/ui/separator\";\n\nexport default function Page() {\n  const [selectedPayment, setSelectedPayment] = useState(\"card\");\n  const [formData, setFormData] = useState({\n    cardName: \"John Cena\",\n    cardNumber: \"1234 5678 9012 3456\",\n    expiryDate: \"09/27\",\n    cvc: \"123\",\n    agreeTerms: true\n  });\n\n  const paymentMethods = [\n    {\n      id: \"card\",\n      name: \"Credit/Debit Card\",\n      logos: [\"Visa\", \"Mastercard\"],\n      component: \"card\"\n    },\n    {\n      id: \"paypal\",\n      name: \"Paypal\",\n      logos: [\"PayPal\"],\n      component: \"external\"\n    },\n    {\n      id: \"bank-transfer\",\n      name: \"Bank Transfer\",\n      logos: [\"GoPay\"],\n      component: \"external\"\n    }\n  ];\n\n  const handleInputChange = (field: string, value: string) => {\n    setFormData((prev) => ({ ...prev, [field]: value }));\n  };\n\n  return (\n    <section className=\"py-10 lg:py-20\">\n      <div className=\"container mx-auto px-4\">\n        <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-2\">\n          {/* Payment Method Section */}\n          <div className=\"space-y-6\">\n            <h2 className=\"font-semibold\">Payment Method</h2>\n\n            <div className=\"space-y-4\">\n              {paymentMethods.map((method) => (\n                <Card\n                  key={method.id}\n                  className={`cursor-pointer shadow-none transition-all duration-200 ${\n                    selectedPayment === method.id\n                      ? \"ring-primary ring\"\n                      : \"hover:border-muted-foreground/20\"\n                  }`}\n                  onClick={() => setSelectedPayment(method.id)}>\n                  <CardContent>\n                    <div className=\"flex items-center justify-between\">\n                      <div className=\"flex items-center space-x-3\">\n                        <div\n                          className={`flex h-4 w-4 items-center justify-center rounded-full border-2 ${\n                            selectedPayment === method.id\n                              ? \"border-primary bg-primary\"\n                              : \"border-muted-foreground\"\n                          }`}>\n                          {selectedPayment === method.id && (\n                            <div className=\"bg-primary-foreground h-2 w-2 rounded-full\"></div>\n                          )}\n                        </div>\n                        <span className=\"font-medium\">{method.name}</span>\n                      </div>\n                      <div className=\"flex items-center space-x-2\">\n                        {method.logos.map((logo) => (\n                          <div\n                            key={logo}\n                            className=\"bg-muted text-muted-foreground rounded px-2 py-1 text-xs font-semibold\">\n                            {logo}\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n\n                    {/* Card Form */}\n                    {selectedPayment === \"card\" && method.id === \"card\" && (\n                      <div className=\"mt-6 space-y-4\">\n                        <div>\n                          <Label htmlFor=\"cardName\" className=\"text-sm font-medium\">\n                            Name on Card\n                          </Label>\n                          <Input\n                            id=\"cardName\"\n                            value={formData.cardName}\n                            onChange={(e) => handleInputChange(\"cardName\", e.target.value)}\n                            className=\"mt-1\"\n                            placeholder=\"John Cena\"\n                          />\n                        </div>\n\n                        <div>\n                          <Label htmlFor=\"cardNumber\" className=\"text-sm font-medium\">\n                            Card Number\n                          </Label>\n                          <Input\n                            id=\"cardNumber\"\n                            value={formData.cardNumber}\n                            onChange={(e) => handleInputChange(\"cardNumber\", e.target.value)}\n                            className=\"mt-1\"\n                            placeholder=\"1234 5678 9012 3456\"\n                          />\n                        </div>\n\n                        <div className=\"grid grid-cols-2 gap-4\">\n                          <div>\n                            <Label htmlFor=\"expiryDate\" className=\"text-sm font-medium\">\n                              Expiry Date\n                            </Label>\n                            <Input\n                              id=\"expiryDate\"\n                              value={formData.expiryDate}\n                              onChange={(e) => handleInputChange(\"expiryDate\", e.target.value)}\n                              className=\"mt-1\"\n                              placeholder=\"09/27\"\n                            />\n                          </div>\n                          <div>\n                            <Label htmlFor=\"cvc\" className=\"text-sm font-medium\">\n                              CVC\n                            </Label>\n                            <Input\n                              id=\"cvc\"\n                              value={formData.cvc}\n                              onChange={(e) => handleInputChange(\"cvc\", e.target.value)}\n                              className=\"ring-primary/20 border-primary/30 mt-1 ring-2\"\n                              placeholder=\"123\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    )}\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\n          </div>\n\n          {/* Order Details Section */}\n          <div className=\"space-y-4\">\n            <h2 className=\"font-semibold\">Order Details</h2>\n\n            {/* Course Card */}\n            <Card className=\"bg-muted/50 border-0 shadow-none\">\n              <CardContent className=\"space-y-4\">\n                <div className=\"flex gap-4\">\n                  <img\n                    src=\"/images/products/list1.png\"\n                    alt=\"Mastering Illustration Course\"\n                    className=\"aspect-square w-20 rounded-md object-cover\"\n                  />\n                  <div className=\"flex-1 space-y-2\">\n                    <div>\n                      <h3 className=\"font-semibold\">Mastering Illustration</h3>\n                      <p className=\"text-muted-foreground text-xs\">25 Lessons • 72 Hours</p>\n                    </div>\n                    <p className=\"mt-1\">$300</p>\n                  </div>\n                </div>\n                <div className=\"flex gap-4\">\n                  <img\n                    src=\"/images/products/list2.png\"\n                    alt=\"Mastering Illustration Course\"\n                    className=\"aspect-square w-20 rounded-md object-cover\"\n                  />\n                  <div className=\"flex-1 space-y-2\">\n                    <div>\n                      <h3 className=\"font-semibold\">Mastering Illustration</h3>\n                      <p className=\"text-muted-foreground text-xs\">25 Lessons • 72 Hours</p>\n                    </div>\n                    <p className=\"mt-1\">$300</p>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Discount Section */}\n            <Card className=\"bg-muted/50 border-0 shadow-none\">\n              <CardContent>\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center space-x-2\">\n                    <Gift className=\"text-muted-foreground h-5 w-5\" />\n                    <span className=\"font-medium\">GWENCHANA</span>\n                  </div>\n                  <Button variant=\"secondary\">Discount Code</Button>\n                </div>\n                <p className=\"text-primary mt-2 text-sm\">Yeay, you got $10 discount!</p>\n              </CardContent>\n            </Card>\n\n            {/* Price Breakdown */}\n            <Card className=\"bg-muted/50 border-0 shadow-none\">\n              <CardContent className=\"space-y-3 text-sm\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"\">Price</span>\n                  <span className=\"\">$300</span>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"\">Discount</span>\n                  <span className=\"text-destructive\">-$10</span>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"\">Tax</span>\n                  <span className=\"text-green-600\">+$1</span>\n                </div>\n                <Separator />\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"font-semibold\">Total</span>\n                  <span className=\"font-semibold\">$289</span>\n                </div>\n              </CardContent>\n            </Card>\n\n            <div className=\"space-y-4\">\n              <div className=\"flex items-start space-x-2\">\n                <Checkbox\n                  id=\"terms\"\n                  checked={formData.agreeTerms}\n                  onCheckedChange={(checked) =>\n                    setFormData((prev) => ({ ...prev, agreeTerms: checked === true }))\n                  }\n                  className=\"mt-1\"\n                />\n                <Label htmlFor=\"terms\" className=\"text-sm leading-5\">\n                  By clicking this you are agree to our\n                </Label>\n              </div>\n\n              <Button size=\"lg\" className=\"w-full\" disabled={!formData.agreeTerms}>\n                Checkout Now\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/checkout-forms-01.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}