feat: modify docs in features with doc blocks

src/components/widgets/Features.tsx

@@ -19,7 +19,7 @@ const Features = ({ header, items, columns, isBeforeContent, isAfterContent, id,
       defaultColumns={2}
       containerClass={`pb-6 ${columns === 2 ? 'max-w-5xl' : ''}`}
       panelClass={`flex max-w-full ${columns === 2 ? 'sm:max-w-md mx-auto' : ''}`}
-      iconClass="h-12 w-12 flex items-center justify-center rounded-md text-white bg-primary-900 md:p-3 mt-1.5 mb-4 mr-4 rtl:ml-4 rtl:mr-0"
+      iconClass="h-12 w-12 flex items-center justify-center rounded-md text-white bg-primary-900 p-2 md:p-3 mt-1.5 mb-4 mr-4 rtl:ml-4 rtl:mr-0"
       titleClass="mb-3 text-xl font-bold"
       descriptionClass="text-gray-600 dark:text-slate-400"
       actionClass="justify-start"

src/stories/widgets/Features.stories.ts → src/stories/widgets/Features.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { Title, Subtitle, Description, Primary, Controls, Story, Stories } from '@storybook/blocks';
 
 import Component from '~/components/widgets/Features';
 import { featuresHome as mockData } from '~/shared/data/pages/home.data';
@@ -10,6 +11,18 @@ const meta = {
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls exclude={['id', 'image']} />
+          <Stories includePrimary={false} title={'Stories'} />
+        </>
+      ),
+    },
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],