adjusted contact success message display

src/Components/Homepage/ContactSection.tsx

@@ -28,7 +28,7 @@ const ContactSection: React.FC<Props> = ({ status, error, sendMessage }) => {
   };
 
   return (
-    <section className="px-8 md:px-64 py-16 bg-gray-100 flex flex-col md:flex-row justify-center font-outfit md:text-xl md:space-x-40 h-screen mt-24">
+    <section className="px-8 md:px-64 py-16 bg-gray-100 flex flex-col md:flex-row justify-center font-outfit md:text-xl md:space-x-40 sm:h-auto md:h-screen mt-24 sm:mt-8">
       <div className="w-full md:w-1/2 mb-8 md:mb-0">
         <h2 className="text-primary text-3xl md:text-4xl font-bold mb-4">Get In Touch With Us</h2>
         <h2 className="text-secondary text-2xl md:text-3xl mb-16">We Are Here To Help</h2>
@@ -83,9 +83,19 @@ const ContactSection: React.FC<Props> = ({ status, error, sendMessage }) => {
             Send Message
           </button>
         </form>
-        {status === 'loading' && <p>Sending...</p>}
-        {status === 'succeeded' && <p>Your message has been sent successfully!</p>}
-        {status === 'failed' && <p>Error: {error}</p>}
+        {status === 'loading' && <p className="mt-4 text-primary">Sending...</p>}
+        {status === 'succeeded' && (
+          <div className="mt-4 p-4 border-l-4 border-green-500 bg-green-100 text-green-700">
+            <p className="font-bold">Success!</p>
+            <p>Your message has been sent successfully!</p>
+          </div>
+        )}
+        {status === 'failed' && (
+          <div className="mt-4 p-4 border-l-4 border-red-500 bg-red-100 text-red-700">
+            <p className="font-bold">Error</p>
+            <p>{error}</p>
+          </div>
+        )}
       </div>
     </section>
   );