I want to create a clean, responsive homepage for a website called Smart VIN Report.
The page should have:
A simple header with logo placeholder and navigation link for "How It Works"
A hero section that introduces the service: "Instant VIN Reports for Used Cars in the USA – Only $55"
Below the hero, place a form with the following fields:
VIN (text field)
Email (email field)
Phone Number (text field)
Select State (dropdown list of all 50 US states)
Note (optional textarea)
The form should have a large button that says: "Get Report"
When user clicks "Get Report", the page should redirect to a checkout page and pass the form data as query parameters in the URL (use encodeURIComponent).
⚠️ Do not use any cart system or “Add to Cart” logic. This is a single product service and the flow is: fill → go to checkout.
✅ The layout should be mobile-friendly, clean, and fast. ✅ Use modern fonts, soft borders, and a professional blue-white color palette.
Loading...
Important:
DO NOT include a field for “Note” in the homepage form.
Only collect: VIN, Email, Phone Number, and US State (dropdown).
When the user clicks “Get Report”, redirect to /checkout (or checkout.html) and pass these form values via query parameters.
✅ On the checkout page, there will be:
A text field at the top for Name (empty and editable).
The remaining fields (VIN, Email, Phone, State) must be pre-filled using the values from the homepage form via the URL.
Loading...
Replace the placeholder text Payment processing form would be implemented here with a real button that looks exactly like Stripe’s default payment button.
The button text should say: “Pay with Stripe”
The button should link to: https://buy.stripe.com/9B6eVc68p5wK3Okejmdby1L
The style must match Stripe’s native style:
Background color: #635bff
Text color: white
Font: system default or Helvetica Neue
Rounded corners
Padding similar to Stripe button
On hover: slightly darker blue