Feat: Change the style of all cards according to the design #10703 (#10704)

### What problem does this PR solve?

Feat: Change the style of all cards according to the design #10703

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agents/agent-templates.tsx

@@ -10,9 +10,10 @@ import {
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentTemplates, useSetAgent } from '@/hooks/use-agent-request';
-import { IFlowTemplate } from '@/interfaces/database/flow';
 
+import { CardContainer } from '@/components/card-container';
 import { AgentCategory } from '@/constants/agent';
+import { IFlowTemplate } from '@/interfaces/database/agent';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateAgentDialog } from './create-agent-dialog';
@@ -121,7 +122,7 @@ export default function AgentTemplates() {
         ></SideBar>
 
         <main className="flex-1 bg-text-title-invert/50 h-dvh">
-          <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[94vh] overflow-auto px-8 pt-8">
+          <CardContainer className="max-h-[94vh] overflow-auto px-8 pt-8">
             {tempListFilter?.map((x) => {
               return (
                 <TemplateCard
@@ -131,14 +132,13 @@ export default function AgentTemplates() {
                 ></TemplateCard>
               );
             })}
-          </div>
+          </CardContainer>
           {creatingVisible && (
             <CreateAgentDialog
               loading={loading}
               visible={creatingVisible}
               hideModal={hideCreatingModal}
               onOk={handleOk}
-              canvasCategory={template?.canvas_category}
             ></CreateAgentDialog>
           )}
         </main>