Template candidates

Pick the components worth turning into reusable site templates.

Click Select on anything you like. The selected IDs stay in the bottom panel so you can send them back as a short list.

photo-01

Full Bleed Photo Hero

Large real-photo hero with dark overlay and clear copy.

real context first

Use photography when the offer needs to feel tangible.

Good for consultants, service companies, local businesses, and any page where abstract AI visuals would feel fake.

photo-02

Consultation Split Photo

Photo/text split for service businesses and consulting offers.

people sitting on chairs in front of a table during a business meeting
consultationShow the moment of work, then explain the value.

Meeting imagery works when paired with precise copy and a single CTA, not as generic decoration.

Book call
photo-03

Editorial Photo Collage

Layered image composition with one strong headline.

editorial compositionBuild rhythm from real scenes, not fake UI cards.
person at desk viewing a monitor analytics dashboard on a laptop screen person holding yellow sticky notes during a workshop
photo-04

Photo Proof Cards

Three-card proof row using real contextual images.

analytics dashboard on a laptop screenMeasured work

Dashboards and data support the operational promise.

team collaboration at a workspace tableHuman handoff

Show collaboration when the offer depends on adoption.

yellow and green network cables in a server roomTechnical trust

Use infrastructure imagery for monitoring and reliability.

photo-05

Portrait Trust Intro

People-first section for trust and founder/consultant framing.

woman sitting at a wooden table in an office
trust sectionPeople buy the diagnosis before they buy the system.

Portrait-style imagery helps pages feel less synthetic when the service is relationship-driven.

photo-06

Service Image Rail

Vertical image rail for multiple service areas.

service railConnect each service to a real work situation.
people sitting on chairs in front of a table during a business meeting
Sales and decision flow
person holding yellow sticky notes during a workshop
Process mapping
yellow and green network cables in a server room
Monitoring and infrastructure
photo-07

Dark Photo CTA

Full-width photo CTA with restrained overlay.

technical CTAMake the next step feel grounded, not glossy.

Photo backgrounds need strong contrast and short copy.

Check reliability
photo-08

Magazine Case Study

Editorial case-study opener with image, caption, and metrics.

person at desk viewing a monitor
case studyFrom manual notes to an operating system.

Use one large image, one clear story, and two metrics instead of a grid of decorations.

3x
faster triage
0
lost owners
photo-09

Workshop Process Photos

Process cards grounded in real workshop imagery.

person holding yellow sticky notes during a workshop01Map
people sitting on chairs in front of a table during a business meeting02Decide
analytics dashboard on a laptop screen03Measure
photo-10

Contact Photo Band

Warm final contact band using a real office/context photo.

modern office interior with table and chairs
final contactA calmer ending than another synthetic gradient.

Use a real place/context image to make the last CTA feel credible.

Start conversation
hero-01

Modern Split Hero

Dark split layout with KPI rail and consultation CTA.

ROI before build

Earn more. Lose less. Stop managing chaos manually.

Start with a business diagnosis, then build only what actually changes revenue, time, or stability.

Consultation mapTalk -> diagnose -> decide -> implement
hero-02

Classic Editorial Hero

Centered serif hero for credibility-first service pages.

For owners and operating teams

Your company works lighter when every process has a clear owner.

No ready-made packages. First we understand where leads, margin, time, or calm are leaking.

hero-03

Dynamic Impact Hero

Bold asymmetry, hard shadows, energetic CTA area.

Less waste.
More control.

CRM, AI, automations, monitoring and websites are selected only after the business problem is clear.

hero-04

Readable Hero

Maximum clarity and scanning, large type, minimal effects.

Tell us where the company loses time, money, or calm.

After the first conversation you should know the biggest problem, the likely next step, and whether a project makes business sense.

hero-05

Futuristic Console Hero

Dark system-console look for AI/automation offers.

Operational intelligence layer

Systems that detect, decide, and delegate before work becomes firefighting.

Useful for AI, automation, monitoring, and technical transformation pages.

lead.intake: organizedfollowup: automatedalerts: active
motion-01

Sticky Scroll Story

One-page narrative with sticky visual and scroll-linked progress.

diagnosis Revenue leaks become visible as the page unfolds.
  1. 01Signal

    The owner knows something is expensive, but not where.

  2. 02Map

    The page reveals the operating path one decision at a time.

  3. 03Action

    The final CTA appears after enough context exists.

motion-02

Parallax Product Layers

Layered product/process scene with subtle scroll depth.

market
operations
decision
motion-03

Kinetic Word Reveal

Large editorial headline that reveals words as the section enters.

Stopguessingwheregrowthbreaks.

Use for pages where the headline needs one memorable, scroll-timed idea.

motion-04

Horizontal Chapter Reel

Swipe/scroll snap chapter cards for rich storytelling.

01Lost leads

Email, chat, calls, and memory do not agree.

02Visible flow

Every lead has owner, stage, next action.

03Measured fix

The page guides the visitor through the before/after story.

motion-05

Morphing Proof Cards

Interactive cards that expand on hover/focus without layout chaos.

01CRM

Hover or focus to expand the operating outcome.

02AI

Assistants handle repeatable steps, not strategy.

03Monitoring

Important failures surface before customers complain.

motion-06

Command Palette Hero

Operator-style command panel and status animation for technical offers.

PROOP://operatorlive
> diagnose revenue_leaks --plain-language
lead source matchedowner assignednext action ready
motion-07

Micro Interaction Grid

Small hover/tap interactions for a page that feels alive.

motion-08

Editorial Cutout Layout

Magazine-like asymmetric layout with clipped panels and strong pacing.

not a templateSharp pages need one brave layout move.

Use clipped panels, offset rhythm, and a strong article-like section when the brand needs personality without losing clarity.

brand-01

PROOP Dark Header

Header inspired by proop.pl: dark bar, logo block, strong AI CTA.

PRO
OP
Profesjonalnie
i Optymalnie
brand-02

PROOP Canvas Hero

Navy gradient hero with wave/canvas atmosphere and orange underline.

Profesjonalne usługi IT w Warszawie

Canvas ribbons pod headerem: granat, subtelny biały veil, pomarańczowa energia i ruch bez frameworka.

brand-03

PROOP Service Mosaic

Blue/orange service tiles derived from the current PROOP visual language.

VPNZdalny dostęp
AIAutomatyzacja pracy
WWWWordPress i strony
ITUpgrade sprzętu
brand-04

PROOP Split CTA

Dark consultation band with orange action and compact proof.

Indywidualne rozwiązanieNajpierw rozmawiamy o potrzebie, potem dobieramy technologię.
Skontaktuj się
brand-05

PROOP Aurora Underlay

Reusable canvas ribbon animation inspired by the proop.pl hero background.

animated under-header layerUse this behind a hero or header when the page needs depth without heavy 3D.
header-01

Glass Product Header

Modern translucent header for SaaS/product landing pages.

Northstar
header-02

Mega Menu Header

Header with grouped service links and clear primary CTA.

ProOP
AutomationCRMWebsitesMonitoring
header-03

Bottom Rail Header

Editorial header with secondary navigation rail.

landing-01

Screenshot Hero

Hero with product screenshot/mockup and trust row.

AI operating layer

Show the product before asking for trust.

Inspired by SaaS galleries: headline, short promise, product mockup, proof row.

Pipeline health
landing-02

Video Demo Hero

Video placeholder hero for product or service demos.

play
2 minute demoLet visitors see the workflow instead of reading five paragraphs.

Works for software, automation, consulting diagnostics, and service demos.

landing-03

Logo Wall Proof

Dense trust logo wall with a short credibility statement.

Trusted patterns, not fake logos
CRMAIKSeFMonitoringSEOCloudflare
landing-04

Pricing Cards

Three pricing or scope cards with one highlighted option.

StartDiagnosis

Find the first valuable fix.

Longer termOperate

Monitor, improve, and document.

landing-05

Comparison Table

Before/after or us/alternative comparison table.

Before

Notes, calls, emails, missing owner.

After

Status, owner, next step, reminder, measurement.

landing-06

Testimonial Wall

Asymmetric testimonial grid with one featured quote.

The useful thing was not more tools. It was finally knowing what to fix first.
Clear diagnosis.
No pressure pitch.
Practical next step.
landing-07

Integration Orbit

Integration/tech ecosystem pattern with central product card.

ProOP
CRMAIGWSMakeCFSEO
landing-08

Use Case Tabs

Tabbed-looking use case cards without framework state.

One page can speak to many use cases.

Keep the active use case readable, then let the rest act as scan-friendly alternatives.

landing-09

Objection FAQ Grid

FAQ cards focused on conversion objections.

Do we need a full system?

No. Start from the smallest profitable fix.

Will this break our process?

No. The first step is mapping how work already happens.

Can this stay static?

Yes. Static pages can still feel rich with careful CSS and small JS.

landing-10

Final Conversion Footer

Large final CTA merged with footer links.

nav-02

Segmented Nav

Pill-like groups for small static sites.

nav-03

Editorial Nav

Minimal text-first navigation for classic pages.

trust-01

Logo Trust Strip

Compact trust band for partner logos or certification marks.

Trusted operating layerCRMAIMonitoringKSeF
trust-02

Metric Proof Row

Three outcome metrics with short context.

3decision steps
0pressure sales
1clear next move
trust-03

Decision Proof

ROI-first decision cards for consulting offers.

ROI before pricing

Check if it makes sense.

Problems before tools

Technology is the means.

Decision without pressure

You know what to do next.

cards-01

Bento Service Grid

Mixed-size cards for services and outcomes.

Sales and CRM

Stop losing opportunities between calls, emails, and notes.

AI assistants

Collect context and handle repeatable stages.

Monitoring

Detect problems before customers do.

cards-02

Simple Feature Cards

Readable three-column service cards.

Automations

Remove manual work.

Websites

Guide the buying decision.

Operations

Make work repeatable.

cards-03

Problem Cards

Cards framed around pain points instead of services.

ProblemLeads disappear

No owner, no follow-up, no visibility.

ProblemOwner does everything

Every step depends on memory and manual checks.

cards-04

Iconless Outcome Cards

Text-only cards with strong hierarchy.

Diagnose

Name the problem.

Estimate

Check the cost of doing nothing.

Implement

Build the smallest useful system.

cards-05

Accent Rail Cards

Cards with colored rails for service categories.

CRM

Pipeline, owners, reminders.

AI

Context, triage, support.

SEO

Pages that answer real questions.

process-01

Three Step Process

Talk, analyze, decide.

01Talk

Understand goals and constraints.

02Analyze

Find the first valuable fix.

03Decide

Choose the next move.

process-02

Timeline Process

Horizontal/vertical responsive timeline.

  1. Signal

    Something feels too hard.

  2. Diagnosis

    Problem gets named.

  3. Scope

    Smallest sensible project.

  4. Delivery

    Measured implementation.

process-03

Diagnostic Flow

Problem to ROI to implementation flow.

PainCostROIDecisionBuild
process-04

Kanban Process

Operational workflow shown as columns.

To clarify

Lead flow

Manual checks

To fix

CRM owners

Alerts

Done

Measured change

cta-01

Consultation Band

Wide consultation strip with primary/phone CTAs.

Start with a free consultation.

No package pitch. First, a useful diagnosis.

Book now
cta-02

Minimal CTA

Low-noise CTA for readable pages.

Ready to name the problem?Contact
cta-03

High Contrast CTA

Dark CTA band for strong transitions.

Next stepTell us where work breaks.Send message
cta-04

Sticky CTA Pattern

Mobile-safe sticky action pattern.

Mobile sticky CTA should be short, single action, and hide near footer.

Free consultation
proof-01

Testimonial Pair

Two testimonial cards.

They helped us see the real bottleneck before we spent money.
The first useful thing was clarity, not code.
proof-02

Before After

Before/after comparison.

Before

Leads hidden in email and memory.

After

Every lead has owner, status, and next action.

proof-03

Case Study Teasers

Three compact result stories.

Sales flow

Follow-up stabilized.

Monitoring

Incidents caught earlier.

Website

Offer became easier to understand.

proof-04

Risk Reducers

Objection handling proof tiles.

No pressure

If it does not make sense, say no.

Small first step

Start where ROI is clearest.

Owner clarity

Every process has a next action.

offer-01

Service Tiers

Three offer levels without fake pricing.

Diagnose

Find the problem.

Build

Implement the useful system.

Operate

Monitor and improve.

offer-02

Scope Matrix

Comparison matrix for services.

AreaGoalProof
CRMLess lost leadsOwner + status
AILess repetitive workHandled steps
offer-03

Fit Checklist

Who this is for and not for.

Good fit

You want a business result, not just a tool.

Bad fit

You only want a trendy system with no owner.

form-01

Contact Form

Static form layout for future wiring.

faq-01

FAQ Accordion

Accessible details/summary FAQ.

Do we need to know the solution?

No. Knowing the pain is enough for the first call.

Is consultation a sales trap?

No. It should produce a clear decision either way.

blog-01

Article Cards

Static article/blog teaser grid.

GuideHow to stop losing leads
OpsWhen automation actually helps
AIWhere assistants make sense
footer-02

Minimal Footer

Small footer for simple landing pages.

footer-03

Dense Footer

Footer with sitemap and contact blocks.