Add section validations

src/app/marketing/create/_components/SectionStep.tsx

@@ -3,16 +3,17 @@ import { TrashIcon } from "@/assets/icons";
 import InputGroup from "@/components/FormElements/InputGroup";
 import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import { REGEX } from "@/constants/regex";
 import { FormErrorMessages } from "@/constants/Texts";
 import {
-    Control,
-    FieldErrors,
-    FieldValues,
-    Path,
-    UseFieldArrayAppend,
-    UseFieldArrayRemove,
-    UseFormHandleSubmit,
-    UseFormRegister,
+  Control,
+  FieldErrors,
+  FieldValues,
+  Path,
+  UseFieldArrayAppend,
+  UseFieldArrayRemove,
+  UseFormHandleSubmit,
+  UseFormRegister,
 } from "react-hook-form";
 
 interface IProps<T extends FieldValues> {
@@ -73,7 +74,10 @@ const SectionStep = <T extends FieldValues>({
             placeholder="Enter Section Description"
           />
         </ShowcaseSection>
-        <ShowcaseSection title={`${title} cards`} className="flex flex-col gap-5">
+        <ShowcaseSection
+          title={`${title} cards`}
+          className="flex flex-col gap-5"
+        >
           {fields.map((field, index) => (
             <div
               key={field.id}
@@ -85,12 +89,16 @@ const SectionStep = <T extends FieldValues>({
                     message: FormErrorMessages.required,
                     value: true,
                   },
+                  pattern: {
+                    message: FormErrorMessages.invalidPattern,
+                    value: REGEX.URL,
+                  },
                 })}
                 label="Icon"
                 name={`cards.${index}.icon`}
                 required
                 type="text"
-                placeholder="Enter Icon URL or name"
+                placeholder="Enter Icon URL"
               />
               <InputGroup
                 {...register(`cards.${index}.title` as Path<T>, {