Change contact us to look like Figma doc

app/components/contact-us/business-form.tsx

@@ -13,8 +13,8 @@ export default function BusinessForm() {
     return (
         <div className="w-full flex flex-col gap-y-4">
             <div>
-                <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold">Contact Us</h2>
-                <p className="text-md sm:text-lg my-4">Feel free to reach out through the form below!</p>
+                <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold">Business Inquiry</h2>
+                <p className="text-md sm:text-lg my-4">We appreciate your interest in partnering with NUANSA. Our team is ready to assist.</p>
             </div>
             <form action={`https://formsubmit.co/${formSubmitKey}`} method="POST" className="w-full" encType="multipart/form-data">
                 <div className="grid grid-cols-2 gap-x-8 gap-y-6">

app/components/contact-us/general-form.tsx

@@ -5,16 +5,16 @@ export default function GeneralForm() {
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [phoneNumber, setPhoneNumber] = useState("");
-    const [category, setCategory] = useState("");
+    const [subject, setSubject] = useState("");
     const [message, setMessage] = useState("");
 
     const formSubmitKey = process.env.NEXT_PUBLIC_FORMSUBMIT_KEY;
 
     return (
         <div className="w-full flex flex-col gap-y-4">
             <div>
-                <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold">Contact Us</h2>
-                <p className="text-md sm:text-lg my-4">Feel free to reach out through the form below!</p>
+                <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold">General Inquiry</h2>
+                <p className="text-md sm:text-lg my-4">Have a question or need assistance? We&apos;re here to help! Feel free to reach out to us with any inquiries!</p>
             </div>
             <form action={`https://formsubmit.co/${formSubmitKey}`} method="POST" className="w-full">
                 <div className="grid grid-cols-2 gap-x-8 gap-y-6">
@@ -34,8 +34,8 @@ export default function GeneralForm() {
                                className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
                     </div>
                     <div className="col-span-2">
-                        <label htmlFor="category" className="text-md sm:text-lg">Category</label>
-                        <input type="text" id="category" name="category" value={category} onChange={(e) => setCategory(e.target.value)} required
+                        <label htmlFor="subject" className="text-md sm:text-lg">Subject</label>
+                        <input type="text" id="subject" name="subject" value={subject} onChange={(e) => setSubject(e.target.value)} required
                                className="block w-full rounded-md border-0 px-2 sm:px-3.5 py-1.5 sm:py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 focus:outline-none"/>
                     </div>
                     <div className="col-span-2">

app/contact-us/page.tsx

@@ -13,13 +13,13 @@ export default function ContactPage() {
                     <GeneralForm/>
                 </div>
                 <div className="sm:place-self-center hidden sm:block">
-                    <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
+                    <Image src={'/images/contact-us/general_inquiry.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{ width: '12rem', height: 'auto' }}/>
                 </div>
             </FadeInDiv>
             <FadeInDiv className="sm:grid sm:grid-cols-2 bg-orange-a rounded-md text-black bottom-8 p-10">
                 <div className="sm:place-self-center hidden sm:block">
-                    <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
+                    <Image src={'/images/contact-us/business_inquiry.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{width: '12rem', height: 'auto'}}/>
                 </div>
                 <div className="sm:place-self-center">