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/components/card-container.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils';
+import { PropsWithChildren } from 'react';
+
+type CardContainerProps = { className?: string } & PropsWithChildren;
+
+export function CardContainer({ children, className }: CardContainerProps) {
+  return (
+    <section
+      className={cn(
+        'grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}

web/src/components/home-card.tsx

@@ -24,7 +24,6 @@ export function HomeCard({
 }: IProps) {
   return (
     <Card
-      className="bg-bg-card  border-colors-outline-neutral-standard"
       onClick={() => {
         // navigateToSearch(data?.id);
         onClick?.();

web/src/components/ui/card.tsx

@@ -8,7 +8,10 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('rounded-lg  bg-bg-card  shadow-sm', className)}
+    className={cn(
+      'rounded-lg border-border-default border shadow-sm bg-bg-input',
+      className,
+    )}
     {...props}
   />
 ));