MED-104: create booking view with categories

app/home/(user)/_components/order-cards.tsx

@@ -24,7 +24,7 @@ export default function OrderCards({
   heroCategories: ServiceCategory[];
 }) {
   return (
-    <div className="mt-4 grid grid-cols-3 gap-6">
+    <div className="xs:grid-cols-3 mt-4 grid grid-cols-1 gap-2">
       {heroCategories.map(({ name, description, color, handle }) => (
         <Card
           key={name}

app/home/(user)/_components/service-categories.tsx

@@ -23,7 +23,7 @@ const ServiceCategories = ({
   categories: ServiceCategory[];
 }) => {
   return (
-    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
       {categories.map((category, index) => (
         <Card
           key={index}