{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-icon-sections-solid-icon-with-hover-effect","type":"registry:block","title":"Solid Icon With Hover Effect","files":[{"path":"components/blocks/marketing/icon-sections/solid-icon-with-hover-effect.tsx","content":"import {\n  BookOpenIcon,\n  ChevronRightIcon,\n  MessagesSquareIcon,\n  Settings2Icon,\n  TabletSmartphoneIcon,\n} from \"lucide-react\";\n\nexport default function IconSectionSolidIconWithHoverEffect() {\n  return (\n    <>\n      {/* Icon Blocks */}\n      <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px] py-24 lg:py-32\">\n        <div className=\"grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2\">\n          {/* Icon Block */}\n          <a\n            className=\"group flex flex-col justify-center hover:bg-primary-foreground/90 rounded-lg p-4 md:p-7 \"\n            href=\"#\"\n          >\n            <div className=\"flex justify-center items-center w-12 bg-primary h-12 border rounded-lg\">\n              <TabletSmartphoneIcon className=\"flex-shrink-0 w-6 h-6 text-primary-foreground\" />\n            </div>\n            <div className=\"mt-5\">\n              <h3 className=\"text-lg font-semibold\">Responsive</h3>\n              <p className=\"mt-1 text-muted-foreground\">\n                Responsive, and mobile-first project on the web\n              </p>\n              <span className=\"mt-2 inline-flex items-center gap-x-1.5 text-sm  decoration-2 group-hover:underline font-medium\">\n                Learn more\n                <ChevronRightIcon className=\"flex-shrink-0 w-4 h-4\" />\n              </span>\n            </div>\n          </a>\n          {/* End Icon Block */}\n          {/* Icon Block */}\n          <a\n            className=\"group flex flex-col justify-center hover:bg-primary-foreground/90 rounded-lg p-4 md:p-7 \"\n            href=\"#\"\n          >\n            <div className=\"flex justify-center items-center w-12 bg-primary h-12 border rounded-lg\">\n              <Settings2Icon className=\"flex-shrink-0 w-6 h-6 text-primary-foreground\" />\n            </div>\n            <div className=\"mt-5\">\n              <h3 className=\"text-lg font-semibold\">Customizable</h3>\n              <p className=\"mt-1 text-muted-foreground\">\n                Components are easily customized and extendable\n              </p>\n              <span className=\"mt-2 inline-flex items-center gap-x-1.5 text-sm  decoration-2 group-hover:underline font-medium\">\n                Learn more\n                <ChevronRightIcon className=\"flex-shrink-0 w-4 h-4\" />\n              </span>\n            </div>\n          </a>\n          {/* End Icon Block */}\n          {/* Icon Block */}\n          <a\n            className=\"group flex flex-col justify-center hover:bg-primary-foreground/90 rounded-lg p-4 md:p-7 \"\n            href=\"#\"\n          >\n            <div className=\"flex justify-center items-center w-12 bg-primary h-12 border rounded-lg\">\n              <BookOpenIcon className=\"flex-shrink-0 w-6 h-6 text-primary-foreground\" />\n            </div>\n            <div className=\"mt-5\">\n              <h3 className=\"text-lg font-semibold\">Documentation</h3>\n              <p className=\"mt-1 text-muted-foreground\">\n                Every component and plugin is well documented\n              </p>\n              <span className=\"mt-2 inline-flex items-center gap-x-1.5 text-sm  decoration-2 group-hover:underline font-medium\">\n                Learn more\n                <ChevronRightIcon className=\"flex-shrink-0 w-4 h-4\" />\n              </span>\n            </div>\n          </a>\n          {/* End Icon Block */}\n          {/* Icon Block */}\n          <a\n            className=\"group flex flex-col justify-center hover:bg-primary-foreground/90 rounded-lg p-4 md:p-7 \"\n            href=\"#\"\n          >\n            <div className=\"flex justify-center items-center w-12 bg-primary h-12 border rounded-lg\">\n              <MessagesSquareIcon className=\"flex-shrink-0 w-6 h-6 text-primary-foreground\" />\n            </div>\n            <div className=\"mt-5\">\n              <h3 className=\"text-lg font-semibold\">24/7 Support</h3>\n              <p className=\"mt-1 text-muted-foreground\">\n                Contact us 24 hours a day, 7 days a week\n              </p>\n              <span className=\"mt-2 inline-flex items-center gap-x-1.5 text-sm  decoration-2 group-hover:underline font-medium\">\n                Learn more\n                <ChevronRightIcon className=\"flex-shrink-0 w-4 h-4\" />\n              </span>\n            </div>\n          </a>\n          {/* End Icon Block */}\n        </div>\n      </div>\n      {/* End Icon Blocks */}\n    </>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/icon-sections/solid-icon-with-hover-effect.tsx"}],"description":"Solid filled icons that shift colour or lift on hover. Adds tactile feedback to a feature grid so the section feels responsive as visitors browse.","dependencies":["lucide-react"]}