{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-masonry-sections-cards-on-images","type":"registry:block","title":"Cards On Images","files":[{"path":"components/blocks/marketing/masonry-sections/cards-on-images.tsx","content":"export default function MasonryCardsOnImages() {\n  return (\n    <>\n      {/* Masonry Cards */}\n      <div className=\"container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]\">\n        {/* Grid */}\n        <div className=\"grid gap-6 sm:grid-cols-12\">\n          <div className=\"col-span-12 sm:col-span-7 sm:self-end md:col-span-8 lg:col-span-5 lg:col-start-3\">\n            {/* Card */}\n            <a\n              className=\"group relative block overflow-hidden rounded-xl focus:outline-none\"\n              href=\"#\"\n            >\n              <div className=\"aspect-w-12 aspect-h-7 sm:aspect-none overflow-hidden rounded-xl\">\n                <img\n                  className=\"w-full rounded-xl object-cover transition-transform duration-500 ease-in-out group-hover:scale-105 group-focus:scale-105\"\n                  src=\"https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80\"\n                  alt=\"Masonry Cards Image\"\n                />\n              </div>\n              <div className=\"absolute start-0 end-0 bottom-0 p-2 sm:p-4\">\n                <div className=\"bg-primary-foreground rounded-lg p-4 text-sm font-semibold md:text-xl\">\n                  Workplace personalities\n                </div>\n              </div>\n            </a>\n            {/* End Card */}\n          </div>\n          {/* End Col */}\n\n          <div className=\"col-span-12 sm:col-span-5 sm:self-end md:col-span-4 lg:col-span-3\">\n            {/* Card */}\n            <a\n              className=\"group relative block overflow-hidden rounded-xl focus:outline-none\"\n              href=\"#\"\n            >\n              <div className=\"aspect-w-12 aspect-h-7 sm:aspect-none overflow-hidden rounded-xl\">\n                <img\n                  className=\"w-full rounded-xl object-cover transition-transform duration-500 ease-in-out group-hover:scale-105 group-focus:scale-105\"\n                  src=\"https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80\"\n                  alt=\"Masonry Cards Image\"\n                />\n              </div>\n              <div className=\"absolute start-0 end-0 bottom-0 p-2 sm:p-4\">\n                <div className=\"bg-primary-foreground rounded-lg p-4 text-sm font-semibold md:text-xl\">\n                  Women in engineering\n                </div>\n              </div>\n            </a>\n            {/* End Card */}\n          </div>\n          {/* End Col */}\n\n          <div className=\"col-span-12 md:col-span-4\">\n            {/* Card */}\n            <a\n              className=\"group relative block overflow-hidden rounded-xl focus:outline-none\"\n              href=\"#\"\n            >\n              <div className=\"aspect-w-12 aspect-h-7 sm:aspect-none overflow-hidden rounded-xl\">\n                <img\n                  className=\"w-full rounded-xl object-cover transition-transform duration-500 ease-in-out group-hover:scale-105 group-focus:scale-105\"\n                  src=\"https://images.unsplash.com/photo-1606836576983-8b458e75221d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80\"\n                  alt=\"Masonry Cards Image\"\n                />\n              </div>\n              <div className=\"absolute start-0 end-0 bottom-0 p-2 sm:p-4\">\n                <div className=\"bg-primary-foreground rounded-lg p-4 text-sm font-semibold md:text-xl\">\n                  Pride 2021\n                </div>\n              </div>\n            </a>\n            {/* End Card */}\n          </div>\n          {/* End Col */}\n\n          <div className=\"col-span-12 sm:col-span-6 md:col-span-4\">\n            {/* Card */}\n            <a\n              className=\"group relative block overflow-hidden rounded-xl focus:outline-none\"\n              href=\"#\"\n            >\n              <div className=\"aspect-w-12 aspect-h-7 sm:aspect-none overflow-hidden rounded-xl\">\n                <img\n                  className=\"w-full rounded-xl object-cover transition-transform duration-500 ease-in-out group-hover:scale-105 group-focus:scale-105\"\n                  src=\"https://images.unsplash.com/photo-1598929438701-ef29ab0bb61a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80\"\n                  alt=\"Masonry Cards Image\"\n                />\n              </div>\n              <div className=\"absolute start-0 end-0 bottom-0 p-2 sm:p-4\">\n                <div className=\"bg-primary-foreground rounded-lg p-4 text-sm font-semibold md:text-xl\">\n                  Data at Acme\n                </div>\n              </div>\n            </a>\n            {/* End Card */}\n          </div>\n          {/* End Col */}\n\n          <div className=\"col-span-12 sm:col-span-6 md:col-span-4\">\n            {/* Card */}\n            <a\n              className=\"group relative block overflow-hidden rounded-xl focus:outline-none\"\n              href=\"#\"\n            >\n              <div className=\"aspect-w-12 aspect-h-7 sm:aspect-none overflow-hidden rounded-xl\">\n                <img\n                  className=\"w-full rounded-xl object-cover transition-transform duration-500 ease-in-out group-hover:scale-105 group-focus:scale-105\"\n                  src=\"https://images.unsplash.com/photo-1467043153537-a4fba2cd39ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80\"\n                  alt=\"Masonry Cards Image\"\n                />\n              </div>\n              <div className=\"absolute start-0 end-0 bottom-0 p-2 sm:p-4\">\n                <div className=\"bg-primary-foreground rounded-lg p-4 text-sm font-semibold md:text-xl\">\n                  Empowered management\n                </div>\n              </div>\n            </a>\n            {/* End Card */}\n          </div>\n          {/* End Col */}\n        </div>\n        {/* End Grid */}\n      </div>\n      {/* End Masonry Cards */}\n    </>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/masonry-sections/cards-on-images.tsx"}],"description":"A masonry grid of cards layered over images, each with a heading and short text. Showcases a gallery, portfolio, or product collection on a landing page."}