, elements: list} */ public function blocks(): array { return [ 'sections' => $this->sections(), 'elements' => $this->elements(), ]; } /** * @return list */ private function sections(): array { return [ $this->block('hero', 'Hero', <<<'HTML'

New

Grow your business faster

A short supporting line that explains the offer and invites action.

Get started

HTML, $this->sectionCss('hero')), $this->block('features', 'Features', <<<'HTML'

Features

Feature one

Describe a capability in one or two sentences.

Feature two

Describe a capability in one or two sentences.

Feature three

Describe a capability in one or two sentences.

HTML, $this->sectionCss('features')), $this->block('benefits', 'Benefits', <<<'HTML'

Benefits

Save time on repetitive work
Keep your brand consistent
Convert more visitors into leads

HTML, $this->sectionCss('benefits')), $this->block('testimonials', 'Testimonials', <<<'HTML'

What customers say

“This helped us launch in days, not weeks.”
Alex, Operations

“The page matched our brand and converted immediately.”
Jordan, Marketing

HTML, $this->sectionCss('testimonials')), $this->block('pricing', 'Pricing', <<<'HTML'

Pricing

Starter

$29

For small teams getting started.

Choose starter

Growth

$79

For teams ready to scale.

Choose growth

Plus

$149

Advanced support and limits.

Choose plus

HTML, $this->sectionCss('pricing')), $this->block('faq', 'FAQ', <<<'HTML'

FAQ

How does this work?

Share your details and our team will follow up with next steps.

Can I change this later?

Yes. You can update copy, layout, and styles at any time.

Is there a contract?

No long-term contract is required to get started.

HTML, $this->sectionCss('faq')), $this->block('comparison', 'Comparison', <<<'HTML'

Compare

Capability	Us	Typical alternative
Setup time	Same day	Weeks
Brand match	Yes	Generic
Lead capture	Included	Add-on

HTML, $this->sectionCss('comparison')), $this->block('cta', 'CTA', <<<'HTML'

Ready to get started?

Tell us what you need and we will take it from there.

Get in touch

HTML, $this->sectionCss('cta')), $this->block('contact', 'Contact', <<<'HTML'

Contact

HTML, $this->sectionCss('contact')), $this->block('stats', 'Stats', <<<'HTML'

98%Customer satisfaction

12kLeads captured

24hTypical response

HTML, $this->sectionCss('stats')), $this->block('cards', 'Cards', <<<'HTML'

Explore

Card title

Short supporting copy for this card.

Learn more

Card title

Short supporting copy for this card.

Learn more

Card title

Short supporting copy for this card.

Learn more

HTML, $this->sectionCss('cards')), $this->block('footer', 'Footer', <<<'HTML' HTML, $this->sectionCss('footer')), ]; } /** * @return list */ private function elements(): array { return [ $this->block('heading', 'Heading', '

Section heading

', ''), $this->block('paragraph', 'Paragraph', '

Write a short paragraph of supporting copy.

', ''), $this->block('text', 'Text', 'Inline text', ''), $this->block('button', 'Button', 'Get started', $this->elementCss()), $this->block('link', 'Link', 'Learn more', ''), $this->block('icon', 'Icon', '', '.lp-icon { display: inline-flex; color: var(--theme, currentColor); }'), $this->block('divider', 'Divider', '

', '.lp-divider { border: 0; border-top: 1px solid color-mix(in srgb, var(--text, #111) 16%, transparent); margin: 24px 0; }'), $this->block('list', 'List', '

First item
Second item
Third item

', $this->elementCss()), $this->block('container', 'Container', '

Container

', $this->elementCss()), $this->block('columns', 'Columns', '

Column one

Column two

', $this->elementCss()), $this->block('card', 'Card', '

Card title

Short supporting copy.

', $this->elementCss()), $this->block('form', 'Form', <<<'HTML' HTML, $this->elementCss()), ]; } /** * @return array{id: string, label: string, html: string, css: string} */ private function block(string $id, string $label, string $html, string $css): array { return [ 'id' => $id, 'label' => $label, 'html' => trim($html), 'css' => trim($css), ]; } private function sectionCss(string $id): string { return trim($this->sharedCss()."\n".$this->specificCss($id)); } private function elementCss(): string { return $this->sharedCss(); } private function sharedCss(): string { return <<<'CSS' .lp-wrap { width: min(1120px, calc(100% - 48px)); margin: 0 auto; } .lp-section, .lp-hero, .lp-cta, .lp-footer { padding: 72px 0; background: var(--background, #fff); color: var(--text, #111); } .lp-section-alt, .lp-hero, .lp-cta { background: color-mix(in srgb, var(--theme, #5b5bd6) 8%, var(--background, #fff)); } .lp-kicker { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--theme, #5b5bd6); margin: 0 0 12px; } .lp-lead { font-size: 18px; max-width: 42rem; } .lp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; background: var(--theme, #5b5bd6); color: #fff; text-decoration: none; border: 0; font-weight: 600; } .lp-btn-ghost { background: transparent; color: var(--theme, #5b5bd6); border: 1px solid var(--theme, #5b5bd6); } .lp-grid { display: grid; gap: 24px; } .lp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-card { padding: 24px; border-radius: 16px; background: var(--background, #fff); border: 1px solid color-mix(in srgb, var(--text, #111) 10%, transparent); } .lp-card-accent { border-color: var(--theme, #5b5bd6); } .lp-list { padding-left: 1.2rem; } .lp-form { display: grid; gap: 12px; max-width: 32rem; } .lp-form label { display: grid; gap: 6px; font-weight: 600; } .lp-form input, .lp-form textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text, #111) 18%, transparent); font: inherit; } .lp-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } .lp-placeholder { min-height: 240px; border-radius: 16px; background: color-mix(in srgb, var(--theme, #5b5bd6) 16%, var(--background, #fff)); } .lp-footer .lp-wrap, .lp-footer nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .lp-footer a { color: inherit; } @media (max-width: 767px) { .lp-grid-2, .lp-grid-3, .lp-split { grid-template-columns: 1fr; } .lp-section, .lp-hero, .lp-cta, .lp-footer { padding: 48px 0; } } CSS; } private function specificCss(string $id): string { return match ($id) { 'hero' => '.lp-hero h1 { font-size: clamp(32px, 6vw, 56px); margin: 0 0 16px; }', 'pricing' => '.lp-price { font-size: 32px; font-weight: 700; margin: 8px 0; }', 'faq' => '.lp-faq { border-bottom: 1px solid color-mix(in srgb, var(--text, #111) 12%, transparent); padding: 12px 0; } .lp-faq summary { cursor: pointer; font-weight: 600; }', 'comparison' => '.lp-table { width: 100%; border-collapse: collapse; } .lp-table th, .lp-table td { padding: 12px; border-bottom: 1px solid color-mix(in srgb, var(--text, #111) 12%, transparent); text-align: left; }', 'cta' => '.lp-cta { text-align: center; } .lp-cta .lp-btn { margin-top: 8px; }', 'stats' => '.lp-stat { text-align: center; } .lp-stat strong { display: block; font-size: 40px; color: var(--theme, #5b5bd6); }', default => '', }; } }