Fixed Service Cards Not Bing Centered

src/Components/Pages/Contact/ContactForm.tsx

@@ -3,8 +3,11 @@ import emailjs from "@emailjs/browser";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useTranslation } from "react-i18next";
-import PhoneInput, { formatPhoneNumber, parsePhoneNumber } from "react-phone-number-input";
+import PhoneInput, {
-import 'react-phone-number-input/style.css'
+  formatPhoneNumber,
+  parsePhoneNumber,
+} from "react-phone-number-input";
+import "react-phone-number-input/style.css";
 import "./ContactForm.css";
 
 const ContactForm = () => {
@@ -36,7 +39,8 @@ const ContactForm = () => {
         (input as HTMLInputElement).value.trim() === ""
     );
 
-    if (isEmpty || !phone) { // Check if phone is also empty
+    if (isEmpty || !phone) {
+      // Check if phone is also empty
       emptyForm();
       return;
     }
@@ -52,7 +56,10 @@ const ContactForm = () => {
     // Append phone number to the form
     const phoneInput = document.createElement("input");
     phoneInput.setAttribute("type", "hidden");
-    phoneInput.setAttribute("value", `+${countryCode} ${formatPhoneNumber(phone)}`);
+    phoneInput.setAttribute(
+      "value",
+      `+${countryCode} ${formatPhoneNumber(phone)}`
+    );
     phoneInput.setAttribute("name", "user_phone");
     e.currentTarget.appendChild(phoneInput);
 
@@ -106,7 +113,7 @@ const ContactForm = () => {
               className="form-input placeholder-white w-full"
               value={phone}
               onChange={setPhone}
-              inputProps={{
+              inputprops={{
                 name: "user_phone",
                 required: true,
               }}

src/Components/Pages/Services/CameraCards.tsx

@@ -9,7 +9,7 @@ const CameraCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4 gap-5">
       <Card
         title={t("services.cards.media.card1.title")}
         description={t("services.cards.media.card1.description")}

src/Components/Pages/Services/CardGroup.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import WesiteCards from "./WesiteCards";
+import WesiteCards from "./WebsiteCards";
 import Buttons from "./Buttons";
 import MarketingCards from "./MarketingCards";
 import CameraCards from "./CameraCards";

src/Components/Pages/Services/MarketingCards.tsx

@@ -9,7 +9,7 @@ const MarketingCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4 gap-5">
       <Card
         title={t("services.cards.marketing.card1.title")}
         description={t("services.cards.marketing.card1.description")}

src/Components/Pages/Services/ServiceCard.tsx

@@ -8,7 +8,7 @@ interface IProps {
 const Card = ({ title, description, imgSrc, delay }: IProps) => {
   return (
     <div
-      className="flex flex-col mt-4 lg:mt-0 lg:mr-8 justify-end flex-1 h-full border-solid border bg-cover bg-center text-center shadow-2xl"
+      className="flex flex-col mt-4 lg:mt-0 justify-end flex-1 h-full border-solid border bg-cover bg-center text-center shadow-2xl"
       style={{
         backgroundImage: `url(${imgSrc})`,
         filter: "saturate(50%)",

src/Components/Pages/Services/ServiceCardContainer.tsx

@@ -2,7 +2,7 @@ import CardGroup from "./CardGroup";
 
 const ServiceCardContainer = () => {
   return (
-    <div className="h-full xl:h-[65vh] 1920:h-[60vh] rounded-xl mx-4 lg:mx-20 xl:mx-40 2xl:mx-60 1920:margin-calc mt-10 p-0.5">
+    <div className="h-full xl:h-[65vh] 1920:h-[60vh] rounded-xl mx-4 lg:mx-20 xl:mx-40 2xl:mx-60 1920:margin-calc mt-10 p-0.5 gap-4">
       <CardGroup />
     </div>
   );

src/Components/Pages/Services/SocialMedia.tsx

@@ -9,7 +9,7 @@ const SocialMediaCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4 gap-5">
       <Card
         title={t("services.cards.social.card1.title")}
         description={t("services.cards.social.card1.description")}

src/Components/Pages/Services/WebsiteCards.tsx

@@ -9,7 +9,7 @@ const WesiteCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4 gap-5">
       <Card
         title={t("services.cards.website.card1.title")}
         description={t("services.cards.website.card1.description")}