How to Create a Landing Page for Arc CMS

Arc CMS works with any HTML landing page. You can use an existing one or create a brand-new one in minutes with AI.

Already Have a Landing Page?

Great — you're almost done. Just make sure your HTML file includes these two things:

1. A waitlist form — Add data-waitlist-form to your form tag:

<form data-waitlist-form>
  <input type="email" name="email" placeholder="Enter your email" required />
  <button type="submit">Join the Waitlist</button>
</form>

You can include any form fields you want (name, company, role, etc.). Arc CMS captures all of them automatically.

2. Waitlist count (optional) — Show how many people have joined:

<span data-waitlist-count>0</span> people have joined the waitlist

Arc CMS will update this number automatically.

Once ready, send your HTML file to hi@quadralyst.com, and we'll take it from there.

Don't Have a Landing Page? Create One in 5 Minutes

You can use a free AI tool to generate a professional landing page. No coding experience needed.

Step 1: Describe Your Product

Before using the AI prompt, write down a few things about your product. Here's a simple template — just fill in the blanks:

Product/Company Name: _______________
One-line description: _______________
Who is it for: _______________
Key benefits (2-4 bullet points): _______________
Call to action (e.g., "Join the Waitlist", "Get Early Access"): _______________
Any specific style/vibe preference (e.g., "dark and techy", "warm and friendly", "clean and minimal"): _______________

Step 2: Use the AI Prompt

Open one of these free AI tools:

• Claude — https://claude.ai (free tier available)

• Kimi K2.5 — https://kimi.com (free to use)

Paste the prompt below into the AI chat.

Replace the placeholder section at the top with your product details from Step 1.

The Prompt

Copy everything inside the box below and paste it into Claude or Kimi K2:

I need you to create a landing page for my product. Here are the details:

PRODUCT NAME: [Your product name]
ONE-LINE DESCRIPTION: [What your product does in one sentence]
TARGET AUDIENCE: [Who is this for]
KEY BENEFITS:
- [Benefit 1]
- [Benefit 2]
- [Benefit 3]
CALL TO ACTION: [e.g., "Join the Waitlist" or "Get Early Access"]
STYLE/VIBE: [e.g., "dark and modern", "clean and minimal", "warm and colorful", "bold and techy"]

REQUIREMENTS — please follow all of these carefully:

1. Create a single HTML file with all CSS and JavaScript embedded in the same file.
2. Do NOT use any CSS or JavaScript frameworks (no Tailwind, Bootstrap, React, Vue, etc.). Use only plain HTML, CSS, and vanilla JavaScript.
3. The design should look professional, polished, and unique — avoid generic AI-generated aesthetics. Use thoughtful typography, spacing, color choices, and micro-interactions.
4. The page must include a waitlist signup form. The form tag MUST have the attribute data-waitlist-form like this:
   <form data-waitlist-form>
   The form should include at least an email field. You may add other fields if appropriate for the product (like name or company).
5. Somewhere on the page, include a live waitlist counter using this exact markup:
   <span data-waitlist-count>0</span>
   Style it naturally within the page (e.g., "Join 0 others on the waitlist" or "0 founders already signed up").
6. The page must be fully responsive and look great on mobile, tablet, and desktop.
7. Include smooth scroll behavior, subtle hover effects, and at least one tasteful animation or transition that adds personality.
8. Use a clear visual hierarchy: hero section, benefits/features section, social proof or trust section, and a final CTA section with the waitlist form.
9. Make sure the page feels like it was designed by a human designer — not auto-generated. Avoid overly symmetrical layouts, stock-photo aesthetics, and cookie-cutter section patterns.
10. The form submit button should show a brief loading state and then a success message after submission (just visual — the backend handles the actual submission).

Give me only the complete HTML code. No explanations before or after.

Step 3: Save the Output as an HTML File

The AI will give you a block of HTML code. Here's how to save it:

On Windows:

1. Open Notepad (search for it in the Start menu)

2. Paste the code the AI gave you

3. Click File → Save As

4. In the "Save as type" dropdown, select All Files

5. Name the file index.html (make sure it ends with .html, not .txt)

6. Save it

On Mac:

1. Open TextEdit

2. Go to Format → Make Plain Text (important!)

3. Paste the code the AI gave you

4. Click File → Save

5. Name the file index.html

6. Uncheck "If no extension is provided, use .txt" if that option appears

7. Save it

Quick check: Double-click the saved file. It should open in your browser and show your landing page. If you see raw code instead, make sure the file extension is .html and not .txt.

Step 4: Send It to Us

Email the index.html file to hi@quadralyst.com and we'll set up Arc CMS on it for you.

Not Happy with the Result?

You can ask the AI to make changes. Try follow-up messages like:

• "Make the color scheme darker"

• "Add a section for pricing"

• "Change the font to something more modern"

• "Make the hero section more impactful"

• "Add testimonial placeholders"

The AI will update the code. Just copy the new version, save it, and check it in your browser again.

Need Help?

If any of this feels confusing, don't worry — just reply to our email and tell us about your product. We'll create a landing page for you.