From 69c6b727a64d97a607c8dbea29b66e2791781f9c Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 9 Oct 2024 11:13:10 +0700
Subject: [PATCH] Refactor component and page structure for responsiveness and
 improve form layout

---
 src/app/business/apply/page.tsx | 44 +++++++++++++++++++++------------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 470f368..ce84094 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -57,30 +57,42 @@ export default function Apply() {
           All requested information in this section is required.
         </p>
         {/* form */}
-        <div className="ml-96 mt-5">
+        <div className="ml-96 mt-5 space-y-5">
           {/* company name */}
           <Label htmlFor="companyName" className="font-bold text-lg">
             Company name
           </Label>
-          <Input type="text" id="companyName" className="mt-2 w-96" />
-          <div className="mt-5">
+          <div className="flex space-x-5">
+            <Input type="text" id="companyName" className="w-96" />
+            <span className="text-[13px] text-neutral-500 self-center">
+              This should be the name your company uses on your <br />
+              website and in the market.
+            </span>
+          </div>
+          <div className="mt-5 space-y-5">
             {/* industry */}
             <Label htmlFor="industry" className="font-bold text-lg mt-10">
               Industry
             </Label>
-            <Select>
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="Select an industry" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Industry</SelectLabel>
-                  {industry.map((i) => (
-                    <SelectItem value={i}>{i}</SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+            <div className="flex space-x-5">
+              <Select>
+                <SelectTrigger className="w-96">
+                  <SelectValue placeholder="Select an industry" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Industry</SelectLabel>
+                    {industry.map((i) => (
+                      <SelectItem value={i}>{i}</SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <span className="text-[13px] text-neutral-500 self-center">
+                This should be the name your company uses on your <br />
+                website and in the market.
+              </span>
+            </div>
           </div>
         </div>
       </div>