Refactor component and page structure for responsiveness and improve form layout

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-10-09 11:13:10 +07:00
parent 6ba242719c
commit 69c6b727a6

View File

@ -57,30 +57,42 @@ export default function Apply() {
All requested information in this section is required. All requested information in this section is required.
</p> </p>
{/* form */} {/* form */}
<div className="ml-96 mt-5"> <div className="ml-96 mt-5 space-y-5">
{/* company name */} {/* company name */}
<Label htmlFor="companyName" className="font-bold text-lg"> <Label htmlFor="companyName" className="font-bold text-lg">
Company name Company name
</Label> </Label>
<Input type="text" id="companyName" className="mt-2 w-96" /> <div className="flex space-x-5">
<div className="mt-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 */} {/* industry */}
<Label htmlFor="industry" className="font-bold text-lg mt-10"> <Label htmlFor="industry" className="font-bold text-lg mt-10">
Industry Industry
</Label> </Label>
<Select> <div className="flex space-x-5">
<SelectTrigger className="w-[180px]"> <Select>
<SelectValue placeholder="Select an industry" /> <SelectTrigger className="w-96">
</SelectTrigger> <SelectValue placeholder="Select an industry" />
<SelectContent> </SelectTrigger>
<SelectGroup> <SelectContent>
<SelectLabel>Industry</SelectLabel> <SelectGroup>
{industry.map((i) => ( <SelectLabel>Industry</SelectLabel>
<SelectItem value={i}>{i}</SelectItem> {industry.map((i) => (
))} <SelectItem value={i}>{i}</SelectItem>
</SelectGroup> ))}
</SelectContent> </SelectGroup>
</Select> </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> </div>
</div> </div>