> ## Documentation Index
> Fetch the complete documentation index at: https://beta-docs.replo.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a Long-Form Offer Page

> Build a long-form offer page that sells one product in depth.

export const TryPromptButton = ({prompt, imageSrc, imageAlt = "Template preview", imageStyles = {}, buttonCta = "Build in Replo"}) => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const API_BASE = "https://api.replo.app";
  const APP_URL = "https://dashboard.replo.app";
  const LoaderIcon = <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    animation: "spin 1s linear infinite"
  }}>
      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
    </svg>;
  const ChevronIcon = <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="m9 18 6-6-6-6" />
    </svg>;
  async function postJSON(url, body, headers = {}, timeoutMs = 120000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
    try {
      const response = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          ...headers
        },
        body: JSON.stringify(body ?? ({})),
        signal: controller.signal
      });
      const responseText = await response.text();
      if (!response.ok) throw new Error(`API Error: ${response.status}`);
      return responseText ? JSON.parse(responseText) : {};
    } finally {
      clearTimeout(timeoutId);
    }
  }
  async function handleTryPrompt(event) {
    event.preventDefault();
    event.stopPropagation();
    setIsLoading(true);
    setError(null);
    try {
      const body = {
        prompt,
        file: null
      };
      const {seed} = await postJSON(`${API_BASE}/api/v1/marketing/issue-marketing-site-jwt`, body);
      if (!seed) throw new Error("No seed returned from API");
      const url = new URL(APP_URL);
      url.searchParams.set("type", "agent");
      url.hash = `seed=${encodeURIComponent(seed)}`;
      window.open(url.toString(), "_blank");
      setIsLoading(false);
    } catch (caughtError) {
      console.error("Failed to generate prompt:", caughtError);
      const message = caughtError instanceof Error ? caughtError.message : null;
      setError(message ?? "Something went wrong. Please try again.");
      setIsLoading(false);
    }
  }
  return <div style={{
    position: "relative",
    display: "inline-block",
    width: "100%"
  }}>
      {}
      {imageSrc && <img src={imageSrc} alt={imageAlt} style={{
    width: "100%",
    height: "auto",
    display: "block",
    borderRadius: "8px",
    opacity: 0.8,
    ...imageStyles
  }} />}

      {}
      <div style={imageSrc ? {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 10
  } : {
    display: "flex",
    justifyContent: "flex-start",
    margin: "1.25rem 0"
  }}>
        <button type="button" className="try-replo-btn" onClick={handleTryPrompt} disabled={isLoading} style={{
    backgroundColor: "#274AE2",
    color: "#ffffff",
    padding: "0.5rem 1.1rem",
    fontSize: "0.875rem",
    fontWeight: 600,
    fontFamily: "inherit",
    border: "none",
    borderRadius: "9999px",
    cursor: isLoading ? "not-allowed" : "pointer",
    lineHeight: 1.4,
    whiteSpace: "nowrap",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    WebkitFontSmoothing: "antialiased",
    boxSizing: "border-box",
    opacity: isLoading ? 0.7 : 1,
    boxShadow: "0 1px 2px rgba(15, 23, 42, 0.08)",
    transition: "background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease"
  }}>
          <span style={{
    visibility: isLoading ? "hidden" : "visible",
    display: "inline-flex",
    alignItems: "center",
    gap: "0.375rem"
  }}>
            {buttonCta}
            {ChevronIcon}
          </span>
          {isLoading && <span style={{
    position: "absolute",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
              {LoaderIcon}
            </span>}
        </button>
      </div>

      {}
      <style>
        {`
          @keyframes spin {
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }
          .try-replo-btn:hover:not(:disabled) {
            background-color: #1f3ec0 !important;
            box-shadow: 0 4px 12px rgba(39, 74, 226, 0.35);
            transform: translateY(-1px);
          }
          .try-replo-btn:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
          }
          .try-replo-btn:focus-visible {
            outline: 2px solid #274AE2;
            outline-offset: 2px;
          }
        `}
      </style>

      {}
      {error && <div style={{
    marginTop: "12px",
    padding: "12px 16px",
    backgroundColor: "#fee",
    border: "1px solid #fcc",
    borderRadius: "6px",
    color: "#c33",
    fontSize: "14px",
    textAlign: "center"
  }} role="alert">
          {error}
        </div>}
    </div>;
};

<TryPromptButton prompt="Build this page exactly https://hexclad.com/pages/hybrid-collection-page, with images" imageSrc="/images/use-cases/long-form-offer/cover.png" buttonCta="Build in Replo" imageStyles={{ borderRadius: "0.5rem" }} imageAlt="Long-form offer page" />

## Step 1: Start with Your Page Structure

### Starter prompt

```
Create a product landing page for [brand/product line name].

Product: [Brief description of what you sell]
Target audience: [Describe your ideal customer]

Include these sections:
- Hero with headline and CTA
- Benefits section (3-4 key points with icons)
- Customer testimonials carousel
- Best sellers product grid (3-4 items with pricing)
- Special offer or bundle section
- Detailed features with images
- Full product catalog with pricing
- FAQ section
- Final CTA with urgency

Tone: [premium/bold/professional/friendly]
Design: [modern/minimal/luxury/clean] with [dark/light] backgrounds
```

### Example

```
Create a product landing page for Vitality Kitchen.

Product: Premium non-stick cookware sets and individual pieces
Target audience: Home cooks aged 30-55 who value quality kitchen tools

Include these sections:
- Hero with headline and CTA
- Benefits section (3-4 key points with icons)
- Customer testimonials carousel
- Best sellers product grid (3-4 items with pricing)
- Special offer or bundle section
- Detailed features with images
- Full product catalog with pricing
- FAQ section
- Final CTA with urgency

Tone: Premium, confident
Design: Modern with dark backgrounds and bold typography
```

## Step 2: Add Your Content

Once Replo generates your first draft, replace it with your actual content.

```
Update the page with my content:

Hero:
Headline: [Your bold headline]
Subheadline: [Supporting statement]
CTA: [Shop Now / Explore Collection]
Background image: https://yourstore.com/images/hero.png

Benefits:
1. [Benefit headline]: [2 sentences explaining why this matters]
2. [Benefit headline]: [2 sentences explaining why this matters]
3. [Benefit headline]: [2 sentences explaining why this matters]

Testimonials:
1. "[Quote]", [Customer name]
2. "[Quote]", [Customer name]
3. "[Quote]", [Customer name]

Best Sellers (include product names, prices, and image URLs):
[List 3-4 top products]

Special Offer:
[Describe your bundle deal, discount, or limited-time offer]

Features (include headlines, descriptions, and image URLs):
[List 3-4 key features]

FAQ:
Q: [Question] A: [Answer]
Q: [Question] A: [Answer]
Q: [Question] A: [Answer]
```

## Step 3: Add Your Product Catalog

For your full product grid, provide all product details at once.

```
Create a product catalog grid with these products:

Product 1: [Name]
Price: $[XX.XX]
Image: https://yourstore.com/images/product1.png
Link: [URL]

Product 2: [Name]
Price: $[XX.XX]
Image: https://yourstore.com/images/product2.png
Link: [URL]

[Continue for all products...]
```

Or organize by category:

```
Organize products into categories:

Category: [Name]
- Product 1: [Name], $[XX.XX], [image URL]
- Product 2: [Name], $[XX.XX], [image URL]

Category: [Name]
- Product 1: [Name], $[XX.XX], [image URL]
- Product 2: [Name], $[XX.XX], [image URL]
```

## Step 4: Personalize the Design

The output should match your brand automatically, but you can refine it further.

### Reference a URL

```
Apply the design style from [input URL] to my page.

I like how it uses [dark backgrounds / bold typography / product card styling / etc.]
```

### Upload a screenshot

Drop an image:

```
Apply the design style from this image.

I want to replicate [the color scheme / typography / spacing / layout]
```

### Describe your vision

```
Make the page feel more [premium/modern/bold/minimal].

Changes:
- [Larger product images / darker backgrounds / more white space]
- [Bolder headlines / cleaner typography]
- [Grid layout / card design / full-width sections]
```

## Step 5: Set Up Links and Products

Use [select mode](/features/edit-mode) to select buttons and configure where they redirect.

### Update all CTAs

```
Update all "Shop Now" buttons to redirect to [enter URL]
```

### Add Shopify products

If you're on Shopify, you can replace product cards with actual buy buttons:

```
Replace the product cards with actual Shopify products and "Add to Cart" buttons
```

### Optimize for mobile

```
Optimize for mobile:
- Product grids should show 1-2 items per row
- Increase button sizes
- Adjust spacing between sections
```

## Step 6: Publish

Click **Publish** in the top-right corner:

1. **Publish to your Replo domain**: every workspace gets a default domain (e.g. `yourshop.replosites.com`) for testing
2. **Add a custom domain**: connect your own domain to publish under your brand's URL

## What to Test Next

Once live, focus on improving conversion rates:

* **Test different headlines**: Your value proposition is the highest-leverage element
* **A/B test CTA copy**: "Shop Now" vs "Explore Collection" can impact CVR
* **Test product grid layouts**: Try different numbers of columns or card styles
* **Test offer variations**: Try different discount percentages or bundle deals