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 'react-phone-number-input/style.css'
+import PhoneInput, {
+  formatPhoneNumber,
+  parsePhoneNumber,
+} from "react-phone-number-input";
+import "react-phone-number-input/style.css";
 import "./ContactForm.css";
 
 const ContactForm = () => {
@@ -22,7 +25,7 @@ const ContactForm = () => {
   const emptyForm = () => {
     toast.warning(t("contact.toasts.empty"));
   };
-  
+
   const invalidCountryCode = () => {
     toast.error(t("contact.toasts.invalidCountryCode"));
   };
@@ -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);
 
@@ -100,13 +107,13 @@ const ContactForm = () => {
             placeholder={t("contact.form.company")}
           />
           <div className="md:w-1/2 flex items-center">
-            <PhoneInput 
+            <PhoneInput
               defaultCountry="PT"
               placeholder={t("contact.form.phone")}
               className="form-input placeholder-white w-full"
               value={phone}
               onChange={setPhone}
-              inputProps={{
+              inputprops={{
                 name: "user_phone",
                 required: true,
               }}
@@ -121,13 +128,13 @@ const ContactForm = () => {
             placeholder={t("contact.form.question")}
           ></input>
 
-        <div className="md:mt-4">
-          <input
-            className="form-input w-full"
-            name="user_reference"
-            placeholder={t("contact.form.reference")}
-          ></input>
-        </div>
+          <div className="md:mt-4">
+            <input
+              className="form-input w-full"
+              name="user_reference"
+              placeholder={t("contact.form.reference")}
+            ></input>
+          </div>
         </div>
 
         <div className="flex mt-5 mb-10 lg:mt-12 mx-10 sm:mx-40 rounded-full bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">

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,9 +2,9 @@ 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>  
+    </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")}