Enhance contact us form with file upload (#52)

* Created message box in contact us forms

* Modify CSS and make responsive

* Implement email sending using formsubmit.co

* Added padding to input components

* Resolve different package-lock.json

* Add .env.example

* Allow file uploads in business form

* Modify inconsistent stylings

---------

Co-authored-by: izruff <[email protected]>

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

@@ -8,39 +8,41 @@ export default function BusinessForm() {
     const [category, setCategory] = 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>
             </div>
-            <form action="#" className="w-full">
+            <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">
                     <div className="col-span-2">
                         <label htmlFor="name" className="text-md sm:text-lg">Name</label>
                         <input type="text" id="name" name="name" value={name} onChange={(e) => setName(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"/>
+                               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="email" className="text-md sm:text-lg">Email</label>
                         <input type="text" id="email" name="email" value={email} onChange={(e) => setEmail(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"/>
+                               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="phone-number" className="text-md sm:text-lg">Phone Number</label>
                         <input type="text" id="phone-number" name="phone-number" value={phoneNumber} onChange={(e) => setPhoneNumber(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"/>
+                               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>
-                        <select id="category" name="category" className="block w-full rounded-md border-0 py-1.5 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" required>
+                        <select id="category" name="category" className="block w-full rounded-md border-0 py-1.5 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" required>
                             <option value="ticket-enquiries">Ticket Enquiries</option>
                             <option value="sponsorship-enquiries">Sponsorship Enquiries</option>
                         </select>
                     </div>
                     <div className="col-span-2">
                     <label htmlFor="proposal" className="text-md sm:text-lg">Corporate Proposal (PDF)</label>
-                        <input type="file" id="proposal" name="proposal" value={category} onChange={(e) => setCategory(e.target.value)} required
+                        <input type="file" id="proposal" name="file" value={category} onChange={(e) => setCategory(e.target.value)} required accept=".pdf"
                                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"/>
                     </div>
                     <div className="col-span-2">