patx/afterdarklabs
improve questionaire friction
Commit 5005b4d · patx · 2026-06-08T22:11:02-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 93cc22b..158a2e3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -232,23 +232,23 @@
<ol class="space-y-7">
<li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
<p class="heading text-2xl font-bold text-[#ccff00]">01</p>
- <p class="text-lg leading-8 text-gray-300">Answer our simple questionnaire <a href="#questionnaire" class="font-semibold text-[#ccff00] underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-white hover:decoration-white">here</a>. It takes barely any time at all, there's only 5 questions!</p>
+ <p class="text-lg leading-8 text-gray-300">Answer our simple questionnaire <a href="#questionnaire" class="font-semibold text-[#ccff00] underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-white hover:decoration-white">here</a>. It's super quick, there is only 4 questions!</p>
</li>
<li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
<p class="heading text-2xl font-bold text-[#ccff00]">02</p>
- <p class="text-lg leading-8 text-gray-300">Within 24 hours, we send you a free live demo based on your answers.</p>
+ <p class="text-lg leading-8 text-gray-300">Within 24 hours, we contact you and then send you a free live demo based on your answers.</p>
</li>
<li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
<p class="heading text-2xl font-bold text-[#ccff00]">03</p>
- <p class="text-lg leading-8 text-gray-300">If you like the demo, we set up a call to discuss pricing and scope. Typical websites range from around $500 to $3,000 depending on page count and features. Custom mobile apps start at $4,000.</p>
+ <p class="text-lg leading-8 text-gray-300">If you like the demo, we set up a call to discuss pricing and scope. Typical projects range from around $500 to $3,000 depending on size and features.</p>
</li>
<li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
<p class="heading text-2xl font-bold text-[#ccff00]">04</p>
- <p class="text-lg leading-8 text-gray-300">We build your full website, mobile app, or Shopify store with search engine optimization, hosting, domains, logos, and more. This normally only takes a few days for websites and a few weeks for mobile apps and storefronts.</p>
+ <p class="text-lg leading-8 text-gray-300">We build your full website, mobile app, or Shopify store with search engine optimization, hosting, domains, logos, and more. This can take less then a week.</p>
</li>
<li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
<p class="heading text-2xl font-bold text-[#ccff00]">05</p>
- <p class="text-lg leading-8 text-gray-300">We launch your website for you. You watch your business boom. Ongoing maintenance and support are available separately after launch if you need them. You own everything we build: your code, your domain, your data. If you ever want to move or hire another developer, you can.</p>
+ <p class="text-lg leading-8 text-gray-300">We launch your website for you. You watch your business boom. Ongoing support is available separately after launch if you need it. You own everything we build, no monthly fees or lock-ins.</p>
</li>
</ol>
</div>
@@ -339,7 +339,7 @@
<div class="space-y-3">
<div class="flex items-center justify-between gap-4 text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">
- <span id="questionnaire-step-label">Question 1 of 5</span>
+ <span id="questionnaire-step-label">Question 1 of 4</span>
<span id="questionnaire-step-name" class="text-[#ccff00]">Identity</span>
</div>
<div class="h-2 overflow-hidden rounded-full bg-white/10" aria-hidden="true">
@@ -355,38 +355,21 @@
<fieldset data-question-step="1" class="hidden">
<legend class="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">Services Needed (select all that apply)<span class="text-[#ccff00]" aria-hidden="true">*</span><span class="sr-only"> required</span></legend>
<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Business website" class="sr-only">Business website</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Personal website" class="sr-only">Personal website</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Shopify store" class="sr-only">Shopify store</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="E-commerce" class="sr-only">E-commerce & Online Payments</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Online bookings" class="sr-only">Online bookings</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Appointments" class="sr-only">Appointments</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Subscriptions" class="sr-only">Subscriptions</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Blog or content site" class="sr-only">Blog or content site</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Dashboard" class="sr-only">Dashboard or Portal</label>
+ <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Website" class="sr-only">Custom website</label>
+ <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Online store" class="sr-only">Shopify / Online storefront</label>
+ <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Bookings/Subscriptions" class="sr-only">Bookings or subscriptions</label>
<label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Internal tool" class="sr-only">Internal tool or API</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Mobile app" class="sr-only">Mobile app</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Redesign" class="sr-only">Redesign</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="SEO" class="sr-only">SEO</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Saas MVP" class="sr-only">SaaS MVP</label>
- <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Other" class="sr-only">Other</label>
+ <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Mobile app" class="sr-only">iOS or Android app</label>
+ <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Redesign" class="sr-only">Website redesign</label>
</div>
<p id="services-error" class="mt-3 hidden text-sm font-medium text-red-300">Select at least one service.</p>
</fieldset>
<div data-question-step="2" class="hidden">
- <label for="business-description" class="mb-3 block text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">What you or your business does, your goals, current website URL or anything else you want to tell us <span class="text-[#ccff00]" aria-hidden="true">*</span><span class="sr-only"> required</span></label>
- <textarea id="business-description" name="business_description" rows="6" required class="min-h-36 w-full resize-none rounded-3xl border border-white/10 bg-black px-6 py-5 text-white outline-none transition-colors placeholder:text-gray-600 focus:border-[#ccff00]" placeholder="Tell us what you do, who you sell to, and what the demo should show. The more details here, the better!"></textarea>
+ <label for="business-description" class="mb-3 block text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">Tell us about your business <span class="text-gray-500 normal-case tracking-normal">(optional)</span></label>
+ <textarea id="business-description" name="business_description" rows="6" class="min-h-36 w-full resize-none rounded-3xl border border-white/10 bg-black px-6 py-5 text-white outline-none transition-colors placeholder:text-gray-600 focus:border-[#ccff00]" placeholder="Optional: briefly describe what you do and any social media profiles you have. You can add your existing website URL if you have one."></textarea>
</div>
- <fieldset data-question-step="3" class="hidden">
- <legend class="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">Logo <span class="text-[#ccff00]" aria-hidden="true">*</span><span class="sr-only"> required</span></legend>
- <div class="grid gap-3 sm:grid-cols-3">
- <label class="logo-choice cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="radio" name="logo_status" value="I already have a logo" required class="sr-only">I have a logo already</label>
- <label class="logo-choice cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="radio" name="logo_status" value="Please design a logo" required class="sr-only">I need a logo designed</label>
- </div>
- </fieldset>
-
<div data-question-step="4" class="hidden">
<div class="grid gap-6 md:grid-cols-2">
<div>
@@ -531,7 +514,7 @@
const stepLabel = document.getElementById('questionnaire-step-label');
const stepName = document.getElementById('questionnaire-step-name');
const progress = document.getElementById('questionnaire-progress');
- const stepNames = ['Identity', 'Services', 'Business', 'Logo', 'Contact'];
+ const stepNames = ['Identity', 'Services', 'Business', 'Contact'];
let currentStep = 0;
if (!steps.length || !backButton || !nextButton || !submitButton || !stepLabel || !stepName || !progress) return;
@@ -562,8 +545,7 @@
return [
`Name or business: ${fieldValue('[name="name_or_business_name"]')}`,
`Services needed: ${services}`,
- `Business description: ${fieldValue('[name="business_description"]')}`,
- `Logo: ${checkedValue('[name="logo_status"]')}`,
+ `Business description: ${fieldValue('[name="business_description"]') || 'Not provided'}`,
`Email: ${fieldValue('[name="contact_email"]')}`,
`Phone: ${fieldValue('[name="contact_phone"]') || 'Not provided'}`,
].join('\n');