feat: improve few sections - #36
Merged
Merged
Conversation
📝 WalkthroughWalkthroughThis PR updates multiple pages and data files across the site: adds horizontal padding to the breadcrumb section, extends the phone numbers list, modifies button styling on the get-started page, restructures pricing plans and form controls on products and scheduling pages, and swaps a cloud platform for Linux in supported platforms. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Tip 🧪 Unit Test Generation v2 is now available!We have significantly improved our unit test generation capabilities. To enable: Add this to your reviews:
finishing_touches:
unit_tests:
enabled: trueTry it out by using the Have feedback? Share your thoughts on our Discord thread! Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@src/pages/get-started.astro`:
- Around line 63-65: The background color on the phone card is inconsistent: the
parent div currently uses the class bg-info/10 while the Icon (name
"mdi:phone-outline") uses text-primary; change the parent div's background class
from bg-info/10 to bg-primary/10 so the div and the Icon (Icon name
"mdi:phone-outline", class "text-primary") share the same primary color scheme,
matching the pattern used by the other cards (e.g., bg-secondary/10 with
text-secondary).
In `@src/pages/schedule-call.astro`:
- Around line 104-109: The validation hint text and title are inconsistent with
the input attributes: update the UI strings associated with the phone input (the
element using minlength="10" and maxlength="14" and the adjacent <div
class="validator-hint">) so they reflect the actual allowed range (e.g., "10–14
digits" or "Must be between 10 and 14 digits") and ensure the title attribute is
changed to the same wording; keep the minlength, maxlength attributes on the
input unchanged and only modify the title and the validator-hint text to match.
- Around line 72-132: The form with id="scheduleForm" is missing name attributes
on inputs/selects/textarea so data can't be serialized; add unique name
attributes to each form control (e.g. the Full Name input -> name="fullName",
topic select -> name="topic", email input -> name="email", phone input ->
name="phone", date input -> name="date", time select (options generated from
timeSlots) -> name="time", and the textarea -> name="requirements") and ensure
the time option uses value={slot} as already done; keep required attributes on
email/phone/time where present and update any server/client code that reads form
fields to use these names.
- Around line 14-17: Update the two text strings: change the description value
in the frontmatter/object where label: "Demo Walk Through" and description:
"Let's showcase existing solution that might meet your expectation" to use "your
expectations" (plural), and fix the validation/error message string that
currently reads "Must be a least" to "Must be at least" (look for the form
validation/message constant or prop that contains that phrase in
schedule-call.astro).
🧹 Nitpick comments (1)
src/pages/products/ello-trac.astro (1)
556-566: Consider formatting the conditional button rendering for readability.The logic is correct—Free plans link to the external signup page while paid plans link to the contact page. However, the inline ternary with JSX is dense. A minor formatting improvement would enhance readability.
Suggested formatting
<div class="card-actions mt-6"> - {plan.price === "Free" ? (<a - href="https://trac.ello360.com" - aria-label="Sign Up" - class={`btn w-full ${plan.highlighted ? "btn-white text-primary" : "btn-primary"}`} - >{"Sign Up"} - </a>) : (<a - href="/company/contact-us" - aria-label="Contact Us" - class={`btn w-full ${plan.highlighted ? "btn-white text-primary" : "btn-primary"}`} - >{"Contact Us"} - </a>)} + {plan.price === "Free" ? ( + <a + href="https://trac.ello360.com" + aria-label="Sign Up" + class={`btn w-full ${plan.highlighted ? "btn-white text-primary" : "btn-primary"}`} + > + Sign Up + </a> + ) : ( + <a + href="/company/contact-us" + aria-label="Contact Us" + class={`btn w-full ${plan.highlighted ? "btn-white text-primary" : "btn-primary"}`} + > + Contact Us + </a> + )} </div>
Comment on lines
63
to
65
| <div class="bg-info/10 p-4 rounded-full"> | ||
| <Icon name="mdi:phone-outline" class="text-4xl text-info" /> | ||
| <Icon name="mdi:phone-outline" class="text-4xl text-primary" /> | ||
| </div> |
There was a problem hiding this comment.
Background and icon color mismatch.
The parent div retains bg-info/10 while the icon now uses text-primary. For visual consistency, consider updating the background to bg-primary/10 to match the icon color change, similar to how the other cards maintain consistent color schemes (e.g., Quick Chat uses bg-secondary/10 with text-secondary).
Proposed fix
<div class="flex justify-center mb-4">
- <div class="bg-info/10 p-4 rounded-full">
+ <div class="bg-primary/10 p-4 rounded-full">
<Icon name="mdi:phone-outline" class="text-4xl text-primary" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div class="bg-info/10 p-4 rounded-full"> | |
| <Icon name="mdi:phone-outline" class="text-4xl text-info" /> | |
| <Icon name="mdi:phone-outline" class="text-4xl text-primary" /> | |
| </div> | |
| <div class="bg-primary/10 p-4 rounded-full"> | |
| <Icon name="mdi:phone-outline" class="text-4xl text-primary" /> | |
| </div> |
🤖 Prompt for AI Agents
In `@src/pages/get-started.astro` around lines 63 - 65, The background color on
the phone card is inconsistent: the parent div currently uses the class
bg-info/10 while the Icon (name "mdi:phone-outline") uses text-primary; change
the parent div's background class from bg-info/10 to bg-primary/10 so the div
and the Icon (Icon name "mdi:phone-outline", class "text-primary") share the
same primary color scheme, matching the pattern used by the other cards (e.g.,
bg-secondary/10 with text-secondary).
Comment on lines
+14
to
+17
| label: "Demo Walk Through", | ||
| description: | ||
| "Let's showcase existing solution that might meet your expectation", | ||
| icon: "mdi:laptop", |
There was a problem hiding this comment.
Minor text corrections.
Two small text issues:
- Line 16: "your expectation" → "your expectations" (plural)
- Line 106: "Must be a least" → "Must be at least" (typo)
Proposed fixes
{
id: "demo",
label: "Demo Walk Through",
description:
- "Let's showcase existing solution that might meet your expectation",
+ "Let's showcase existing solutions that might meet your expectations",
icon: "mdi:laptop",
},And for Line 106:
- title="Must be a least 10 digits"
+ title="Must be at least 10 digits"🤖 Prompt for AI Agents
In `@src/pages/schedule-call.astro` around lines 14 - 17, Update the two text
strings: change the description value in the frontmatter/object where label:
"Demo Walk Through" and description: "Let's showcase existing solution that
might meet your expectation" to use "your expectations" (plural), and fix the
validation/error message string that currently reads "Must be a least" to "Must
be at least" (look for the form validation/message constant or prop that
contains that phrase in schedule-call.astro).
Comment on lines
+72
to
+132
| <form id="scheduleForm" class="space-y-6"> | ||
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | ||
| <input | ||
| type="text" | ||
| placeholder="John Doe" | ||
| class="input input-bordered w-full" | ||
| required | ||
| placeholder="Full Name" | ||
| class="input w-full lg:col-span-2" | ||
| /> | ||
| <select class="select appearance-none w-full"> | ||
| <option disabled selected>Pick Topic</option> | ||
| {topics.map((topic) => <option>{topic.label}</option>)} | ||
| </select> | ||
| </div> | ||
|
|
||
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | ||
| <div class="form-control w-full"> | ||
| <label class="label"> | ||
| <span class="label-text font-semibold">Email</span> | ||
| <div> | ||
| <label class="input validator w-full"> | ||
| <Icon name="mdi:email" class="size-5 text-neutral-800" /> | ||
| <input type="email" placeholder="your@domain.com" required /> | ||
| </label> | ||
| <input | ||
| type="email" | ||
| placeholder="john@example.com" | ||
| class="input input-bordered w-full" | ||
| required | ||
| /> | ||
| <div class="validator-hint hidden"> | ||
| Enter valid email address | ||
| </div> | ||
| </div> | ||
| <div class="form-control w-full"> | ||
| <label class="label"> | ||
| <span class="label-text font-semibold">Phone</span> | ||
| <div> | ||
| <label class="input validator w-full"> | ||
| <Icon name="mdi:phone" class="size-5 text-neutral-800" /> | ||
| <input | ||
| type="tel" | ||
| class="tabular-nums" | ||
| required | ||
| placeholder="Phone" | ||
| pattern="[0-9]*" | ||
| minlength="10" | ||
| maxlength="14" | ||
| title="Must be a least 10 digits" | ||
| /> | ||
| </label> | ||
| <input | ||
| type="tel" | ||
| placeholder="+234 XXX XXX XXXX" | ||
| class="input input-bordered w-full" | ||
| required | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-control w-full"> | ||
| <label class="label"> | ||
| <span class="label-text font-semibold">Company</span> | ||
| </label> | ||
| <input | ||
| type="text" | ||
| placeholder="Your Company Name" | ||
| class="input input-bordered w-full" | ||
| /> | ||
| </div> | ||
|
|
||
| <!-- Topic Selection --> | ||
| <div class="form-control w-full"> | ||
| <label class="label"> | ||
| <span class="label-text font-semibold">Call Topic</span> | ||
| </label> | ||
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2"> | ||
| { | ||
| topics.map((topic) => ( | ||
| <label class="flex items-start gap-3 p-4 border border-base-300 rounded-lg hover:bg-base-200 cursor-pointer transition"> | ||
| <input | ||
| type="radio" | ||
| name="topic" | ||
| value={topic.id} | ||
| class="radio radio-primary mt-1" | ||
| required | ||
| /> | ||
| <div> | ||
| <p class="font-semibold text-sm">{topic.label}</p> | ||
| <p class="text-xs text-base-content/70"> | ||
| {topic.description} | ||
| </p> | ||
| </div> | ||
| </label> | ||
| )) | ||
| } | ||
| <div class="validator-hint hidden">Must be 10 digits</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Date & Time Selection --> | ||
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | ||
| <div class="form-control w-full"> | ||
| <label class="label"> | ||
| <span class="label-text font-semibold">Preferred Date</span> | ||
| </label> | ||
| <input | ||
| type="date" | ||
| class="input input-bordered w-full" | ||
| required | ||
| /> | ||
| </div> | ||
| <div class="form-control w-full"> | ||
| <label class="label"> | ||
| <span class="label-text font-semibold">Preferred Time</span> | ||
| </label> | ||
| <select class="select select-bordered w-full" required> | ||
| <option disabled selected>Select a time</option> | ||
| {timeSlots.map((slot) => ( | ||
| <option value={slot}>{slot}</option> | ||
| ))} | ||
| </select> | ||
| </div> | ||
| <input type="date" class="input w-full" /> | ||
| <select class="select select-bordered w-full" required> | ||
| <option disabled selected>Select a time</option> | ||
| {timeSlots.map((slot) => <option value={slot}>{slot}</option>)} | ||
| </select> | ||
| </div> | ||
|
|
||
| <!-- Additional Requirements --> | ||
| <div class="form-control w-full"> | ||
| <label class="label"> | ||
| <span class="label-text font-semibold"> | ||
| Additional Requirements (Optional) | ||
| </span> | ||
| </label> | ||
| <fieldset class="fieldset w-full"> | ||
| <legend class="fieldset-legend" | ||
| >Additional Requirements (Optional)</legend | ||
| > | ||
| <textarea | ||
| class="textarea textarea-bordered w-full h-32" | ||
| class="textarea h-32 w-full" | ||
| placeholder="Tell us more about your project or specific requirements..." | ||
| ></textarea> | ||
| </div> | ||
| <div class="label">Optional</div> | ||
| </fieldset> |
There was a problem hiding this comment.
Form inputs are missing name attributes.
None of the form inputs have name attributes, which means form data cannot be properly serialized or captured. While the current handler only shows an alert, adding name attributes is essential for future form processing and proper form semantics.
Proposed fix to add name attributes
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<input
type="text"
placeholder="Full Name"
+ name="fullName"
class="input w-full lg:col-span-2"
/>
- <select class="select appearance-none w-full">
+ <select name="topic" class="select appearance-none w-full">
<option disabled selected>Pick Topic</option>
{topics.map((topic) => <option>{topic.label}</option>)}
</select>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="input validator w-full">
<Icon name="mdi:email" class="size-5 text-neutral-800" />
- <input type="email" placeholder="your@domain.com" required />
+ <input type="email" name="email" placeholder="your@domain.com" required />
</label>
...
</div>
<div>
<label class="input validator w-full">
<Icon name="mdi:phone" class="size-5 text-neutral-800" />
<input
type="tel"
+ name="phone"
class="tabular-nums"
...
/>
</label>
...
</div>
</div>
<!-- Date & Time Selection -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
- <input type="date" class="input w-full" />
- <select class="select select-bordered w-full" required>
+ <input type="date" name="date" class="input w-full" />
+ <select name="timeSlot" class="select select-bordered w-full" required>
...
</select>
</div>
<!-- Additional Requirements -->
<fieldset class="fieldset w-full">
...
<textarea
class="textarea h-32 w-full"
+ name="requirements"
placeholder="Tell us more about your project or specific requirements..."
></textarea>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <form id="scheduleForm" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <input | |
| type="text" | |
| placeholder="John Doe" | |
| class="input input-bordered w-full" | |
| required | |
| placeholder="Full Name" | |
| class="input w-full lg:col-span-2" | |
| /> | |
| <select class="select appearance-none w-full"> | |
| <option disabled selected>Pick Topic</option> | |
| {topics.map((topic) => <option>{topic.label}</option>)} | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="form-control w-full"> | |
| <label class="label"> | |
| <span class="label-text font-semibold">Email</span> | |
| <div> | |
| <label class="input validator w-full"> | |
| <Icon name="mdi:email" class="size-5 text-neutral-800" /> | |
| <input type="email" placeholder="your@domain.com" required /> | |
| </label> | |
| <input | |
| type="email" | |
| placeholder="john@example.com" | |
| class="input input-bordered w-full" | |
| required | |
| /> | |
| <div class="validator-hint hidden"> | |
| Enter valid email address | |
| </div> | |
| </div> | |
| <div class="form-control w-full"> | |
| <label class="label"> | |
| <span class="label-text font-semibold">Phone</span> | |
| <div> | |
| <label class="input validator w-full"> | |
| <Icon name="mdi:phone" class="size-5 text-neutral-800" /> | |
| <input | |
| type="tel" | |
| class="tabular-nums" | |
| required | |
| placeholder="Phone" | |
| pattern="[0-9]*" | |
| minlength="10" | |
| maxlength="14" | |
| title="Must be a least 10 digits" | |
| /> | |
| </label> | |
| <input | |
| type="tel" | |
| placeholder="+234 XXX XXX XXXX" | |
| class="input input-bordered w-full" | |
| required | |
| /> | |
| </div> | |
| </div> | |
| <div class="form-control w-full"> | |
| <label class="label"> | |
| <span class="label-text font-semibold">Company</span> | |
| </label> | |
| <input | |
| type="text" | |
| placeholder="Your Company Name" | |
| class="input input-bordered w-full" | |
| /> | |
| </div> | |
| <!-- Topic Selection --> | |
| <div class="form-control w-full"> | |
| <label class="label"> | |
| <span class="label-text font-semibold">Call Topic</span> | |
| </label> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2"> | |
| { | |
| topics.map((topic) => ( | |
| <label class="flex items-start gap-3 p-4 border border-base-300 rounded-lg hover:bg-base-200 cursor-pointer transition"> | |
| <input | |
| type="radio" | |
| name="topic" | |
| value={topic.id} | |
| class="radio radio-primary mt-1" | |
| required | |
| /> | |
| <div> | |
| <p class="font-semibold text-sm">{topic.label}</p> | |
| <p class="text-xs text-base-content/70"> | |
| {topic.description} | |
| </p> | |
| </div> | |
| </label> | |
| )) | |
| } | |
| <div class="validator-hint hidden">Must be 10 digits</div> | |
| </div> | |
| </div> | |
| <!-- Date & Time Selection --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="form-control w-full"> | |
| <label class="label"> | |
| <span class="label-text font-semibold">Preferred Date</span> | |
| </label> | |
| <input | |
| type="date" | |
| class="input input-bordered w-full" | |
| required | |
| /> | |
| </div> | |
| <div class="form-control w-full"> | |
| <label class="label"> | |
| <span class="label-text font-semibold">Preferred Time</span> | |
| </label> | |
| <select class="select select-bordered w-full" required> | |
| <option disabled selected>Select a time</option> | |
| {timeSlots.map((slot) => ( | |
| <option value={slot}>{slot}</option> | |
| ))} | |
| </select> | |
| </div> | |
| <input type="date" class="input w-full" /> | |
| <select class="select select-bordered w-full" required> | |
| <option disabled selected>Select a time</option> | |
| {timeSlots.map((slot) => <option value={slot}>{slot}</option>)} | |
| </select> | |
| </div> | |
| <!-- Additional Requirements --> | |
| <div class="form-control w-full"> | |
| <label class="label"> | |
| <span class="label-text font-semibold"> | |
| Additional Requirements (Optional) | |
| </span> | |
| </label> | |
| <fieldset class="fieldset w-full"> | |
| <legend class="fieldset-legend" | |
| >Additional Requirements (Optional)</legend | |
| > | |
| <textarea | |
| class="textarea textarea-bordered w-full h-32" | |
| class="textarea h-32 w-full" | |
| placeholder="Tell us more about your project or specific requirements..." | |
| ></textarea> | |
| </div> | |
| <div class="label">Optional</div> | |
| </fieldset> | |
| <form id="scheduleForm" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <input | |
| type="text" | |
| placeholder="Full Name" | |
| name="fullName" | |
| class="input w-full lg:col-span-2" | |
| /> | |
| <select name="topic" class="select appearance-none w-full"> | |
| <option disabled selected>Pick Topic</option> | |
| {topics.map((topic) => <option>{topic.label}</option>)} | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="input validator w-full"> | |
| <Icon name="mdi:email" class="size-5 text-neutral-800" /> | |
| <input type="email" name="email" placeholder="your@domain.com" required /> | |
| </label> | |
| <div class="validator-hint hidden"> | |
| Enter valid email address | |
| </div> | |
| </div> | |
| <div> | |
| <label class="input validator w-full"> | |
| <Icon name="mdi:phone" class="size-5 text-neutral-800" /> | |
| <input | |
| type="tel" | |
| name="phone" | |
| class="tabular-nums" | |
| required | |
| placeholder="Phone" | |
| pattern="[0-9]*" | |
| minlength="10" | |
| maxlength="14" | |
| title="Must be a least 10 digits" | |
| /> | |
| </label> | |
| <div class="validator-hint hidden">Must be 10 digits</div> | |
| </div> | |
| </div> | |
| <!-- Date & Time Selection --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <input type="date" name="date" class="input w-full" /> | |
| <select name="timeSlot" class="select select-bordered w-full" required> | |
| <option disabled selected>Select a time</option> | |
| {timeSlots.map((slot) => <option value={slot}>{slot}</option>)} | |
| </select> | |
| </div> | |
| <!-- Additional Requirements --> | |
| <fieldset class="fieldset w-full"> | |
| <legend class="fieldset-legend" | |
| >Additional Requirements (Optional)</legend | |
| > | |
| <textarea | |
| class="textarea h-32 w-full" | |
| name="requirements" | |
| placeholder="Tell us more about your project or specific requirements..." | |
| ></textarea> | |
| <div class="label">Optional</div> | |
| </fieldset> |
🤖 Prompt for AI Agents
In `@src/pages/schedule-call.astro` around lines 72 - 132, The form with
id="scheduleForm" is missing name attributes on inputs/selects/textarea so data
can't be serialized; add unique name attributes to each form control (e.g. the
Full Name input -> name="fullName", topic select -> name="topic", email input ->
name="email", phone input -> name="phone", date input -> name="date", time
select (options generated from timeSlots) -> name="time", and the textarea ->
name="requirements") and ensure the time option uses value={slot} as already
done; keep required attributes on email/phone/time where present and update any
server/client code that reads form fields to use these names.
Comment on lines
+104
to
+109
| minlength="10" | ||
| maxlength="14" | ||
| title="Must be a least 10 digits" | ||
| /> | ||
| </label> | ||
| <input | ||
| type="tel" | ||
| placeholder="+234 XXX XXX XXXX" | ||
| class="input input-bordered w-full" | ||
| required | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-control w-full"> | ||
| <label class="label"> | ||
| <span class="label-text font-semibold">Company</span> | ||
| </label> | ||
| <input | ||
| type="text" | ||
| placeholder="Your Company Name" | ||
| class="input input-bordered w-full" | ||
| /> | ||
| </div> | ||
|
|
||
| <!-- Topic Selection --> | ||
| <div class="form-control w-full"> | ||
| <label class="label"> | ||
| <span class="label-text font-semibold">Call Topic</span> | ||
| </label> | ||
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2"> | ||
| { | ||
| topics.map((topic) => ( | ||
| <label class="flex items-start gap-3 p-4 border border-base-300 rounded-lg hover:bg-base-200 cursor-pointer transition"> | ||
| <input | ||
| type="radio" | ||
| name="topic" | ||
| value={topic.id} | ||
| class="radio radio-primary mt-1" | ||
| required | ||
| /> | ||
| <div> | ||
| <p class="font-semibold text-sm">{topic.label}</p> | ||
| <p class="text-xs text-base-content/70"> | ||
| {topic.description} | ||
| </p> | ||
| </div> | ||
| </label> | ||
| )) | ||
| } | ||
| <div class="validator-hint hidden">Must be 10 digits</div> |
There was a problem hiding this comment.
Validation hint doesn't match the allowed range.
The title and validator-hint state "10 digits" but maxlength="14" allows up to 14 digits. Consider updating the hints to reflect the actual range (10-14 digits).
Proposed fix
minlength="10"
maxlength="14"
- title="Must be a least 10 digits"
+ title="Must be 10-14 digits"
/>
</label>
- <div class="validator-hint hidden">Must be 10 digits</div>
+ <div class="validator-hint hidden">Must be 10-14 digits</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| minlength="10" | |
| maxlength="14" | |
| title="Must be a least 10 digits" | |
| /> | |
| </label> | |
| <input | |
| type="tel" | |
| placeholder="+234 XXX XXX XXXX" | |
| class="input input-bordered w-full" | |
| required | |
| /> | |
| </div> | |
| </div> | |
| <div class="form-control w-full"> | |
| <label class="label"> | |
| <span class="label-text font-semibold">Company</span> | |
| </label> | |
| <input | |
| type="text" | |
| placeholder="Your Company Name" | |
| class="input input-bordered w-full" | |
| /> | |
| </div> | |
| <!-- Topic Selection --> | |
| <div class="form-control w-full"> | |
| <label class="label"> | |
| <span class="label-text font-semibold">Call Topic</span> | |
| </label> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2"> | |
| { | |
| topics.map((topic) => ( | |
| <label class="flex items-start gap-3 p-4 border border-base-300 rounded-lg hover:bg-base-200 cursor-pointer transition"> | |
| <input | |
| type="radio" | |
| name="topic" | |
| value={topic.id} | |
| class="radio radio-primary mt-1" | |
| required | |
| /> | |
| <div> | |
| <p class="font-semibold text-sm">{topic.label}</p> | |
| <p class="text-xs text-base-content/70"> | |
| {topic.description} | |
| </p> | |
| </div> | |
| </label> | |
| )) | |
| } | |
| <div class="validator-hint hidden">Must be 10 digits</div> | |
| minlength="10" | |
| maxlength="14" | |
| title="Must be 10-14 digits" | |
| /> | |
| </label> | |
| <div class="validator-hint hidden">Must be 10-14 digits</div> |
🤖 Prompt for AI Agents
In `@src/pages/schedule-call.astro` around lines 104 - 109, The validation hint
text and title are inconsistent with the input attributes: update the UI strings
associated with the phone input (the element using minlength="10" and
maxlength="14" and the adjacent <div class="validator-hint">) so they reflect
the actual allowed range (e.g., "10–14 digits" or "Must be between 10 and 14
digits") and ensure the title attribute is changed to the same wording; keep the
minlength, maxlength attributes on the input unchanged and only modify the title
and the validator-hint text to match.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Release Notes
New Features
Chores
Style
✏️ Tip: You can customize this high-level summary in your review settings.