redesigned app for cleaner ux

src/Components/Pages/Services/WesiteCards.tsx

@@ -9,30 +9,34 @@ const WesiteCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
       <Card
+        step={1}
         title={t("services.cards.website.card1.title")}
         description={t("services.cards.website.card1.description")}
         imgSrc={IdealizeImg}
-        delay="0s"
+        delay={0}
       />
       <Card
+        step={2}
         title={t("services.cards.website.card2.title")}
         description={t("services.cards.website.card2.description")}
         imgSrc={DesignImg}
-        delay="0.1s"
+        delay={0.08}
       />
       <Card
+        step={3}
         title={t("services.cards.website.card3.title")}
         description={t("services.cards.website.card3.description")}
         imgSrc={CodeImg}
-        delay="0.2s"
+        delay={0.16}
       />
       <Card
+        step={4}
         title={t("services.cards.website.card4.title")}
         description={t("services.cards.website.card4.description")}
         imgSrc={BuildImg}
-        delay="0.3s"
+        delay={0.24}
       />
     </div>
   );