{
  "name": "features-section-demo-1",
  "type": "registry:block",
  "files": [
    {
      "path": "components/features-section-demo-1.tsx",
      "content": "import React from \"react\";\nimport { useId } from \"react\";\n\nexport default function FeaturesSectionDemo() {\n  return (\n    <div className=\"py-20 lg:py-40\">\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 md:gap-2 max-w-7xl mx-auto\">\n        {grid.map((feature) => (\n          <div\n            key={feature.title}\n            className=\"relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden\"\n          >\n            <Grid size={20} />\n            <p className=\"text-base font-bold text-neutral-800 dark:text-white relative z-20\">\n              {feature.title}\n            </p>\n            <p className=\"text-neutral-600 dark:text-neutral-400 mt-4 text-base font-normal relative z-20\">\n              {feature.description}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nconst grid = [\n  {\n    title: \"HIPAA and SOC2 Compliant\",\n    description:\n      \"Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.\",\n  },\n  {\n    title: \"Automated Social Media Posting\",\n    description:\n      \"Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.\",\n  },\n  {\n    title: \"Advanced Analytics\",\n    description:\n      \"Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.\",\n  },\n  {\n    title: \"Content Calendar\",\n    description:\n      \"Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.\",\n  },\n  {\n    title: \"Audience Targeting\",\n    description:\n      \"Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.\",\n  },\n  {\n    title: \"Social Listening\",\n    description:\n      \"Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.\",\n  },\n  {\n    title: \"Customizable Templates\",\n    description:\n      \"Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.\",\n  },\n  {\n    title: \"Collaboration Tools\",\n    description:\n      \"Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.\",\n  },\n];\n\nexport const Grid = ({\n  pattern,\n  size,\n}: {\n  pattern?: number[][];\n  size?: number;\n}) => {\n  const p = pattern ?? [\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\n  ];\n  return (\n    <div className=\"pointer-events-none absolute left-1/2 top-0  -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]\">\n      <div className=\"absolute inset-0 bg-gradient-to-r  [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100\">\n        <GridPattern\n          width={size ?? 20}\n          height={size ?? 20}\n          x=\"-12\"\n          y=\"4\"\n          squares={p}\n          className=\"absolute inset-0 h-full w-full  mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10\"\n        />\n      </div>\n    </div>\n  );\n};\n\nexport function GridPattern({ width, height, x, y, squares, ...props }: any) {\n  const patternId = useId();\n\n  return (\n    <svg aria-hidden=\"true\" {...props}>\n      <defs>\n        <pattern\n          id={patternId}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <path d={`M.5 ${height}V.5H${width}`} fill=\"none\" />\n        </pattern>\n      </defs>\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        strokeWidth={0}\n        fill={`url(#${patternId})`}\n      />\n      {squares && (\n        <svg x={x} y={y} className=\"overflow-visible\">\n          {squares.map(([x, y]: any) => (\n            <rect\n              strokeWidth=\"0\"\n              key={`${x}-${y}`}\n              width={width + 1}\n              height={height + 1}\n              x={x * width}\n              y={y * height}\n            />\n          ))}\n        </svg>\n      )}\n    </svg>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/features-section-demo-1.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Features Section Demo 1"
}