Usage Rules

Component contracts for AI and future page building.

These rules are intentionally narrow so new pages can stay in fortress style without visual drift.

Components

PrimaryButton

Main conversion action with Eurora blue gradient and glow.

primary-cta

When to use

  • Hero CTA
  • Navbar CTA
  • Closing CTA

Avoid

  • Do not place multiple dominant primary buttons in one compact block.
  • Do not use for low-priority footer links.

Props

  • to: Target route or anchor
  • size: nav | hero | cta
  • block: Stretch on mobile when true

Example copy

  • Start Free Trial
  • Protect My Website
  • Start Free Trial — 14 Days
Allowed sections: navigation, hero, cta

SecondaryButton

Support action next to the main hero conversion button.

secondary-cta

When to use

  • Secondary hero CTA

Avoid

  • Do not use as the dominant CTA.
  • Do not swap the border style or radius.

Props

  • to: Target route or anchor

Example copy

  • View Architecture
Allowed sections: hero

TrustBadge

Short trust signal for compliance, ownership, and uptime.

trust-signal

When to use

  • Hero trust row

Avoid

  • Do not use for long sentences.
  • Do not change into large cards.

Props

  • tone: blue | green

Example copy

  • EU-Owned Infrastructure
  • GDPR Compliant
  • 99.99% Uptime
Allowed sections: hero

ComplianceBadge

Compact compliance label in the footer row.

compliance-signal

When to use

  • Footer compliance strip

Avoid

  • Do not use as hero badges.
  • Do not enlarge beyond footer context without a new variant.

Props

Example copy

  • GDPR Compliant
  • ISO 27001
  • SOC 2 Type II
Allowed sections: footer

StatCard

Short numeric proof point with strong headline metric.

metric-display

When to use

  • Hero metrics grid

Avoid

  • Do not use for long body copy.
  • Do not exceed one metric and one label.

Props

  • value: Primary metric
  • label: Short supporting label

Example copy

  • 3.2Tbps / DDoS Mitigation Capacity
  • <5ms / Average Response Time
Allowed sections: hero, stats

FeatureCard

Explains one platform capability using fortress dark glass styling.

feature-explainer

When to use

  • Feature grid

Avoid

  • Do not remove the icon shell.
  • Do not use long paragraphs or nested actions.

Props

  • title: Feature title
  • description: Feature explanation
  • icon: Named slot for SVG icon

Example copy

  • DDoS Protection
  • Web Application Firewall
  • CDN & Edge Performance
Allowed sections: features

TestimonialCard

Social proof card with rating, quote, initials badge, and attribution.

social-proof

When to use

  • Testimonials grid

Avoid

  • Do not use without attribution.
  • Do not replace the star rating row.

Props

  • quote: Customer quote
  • initials: Avatar initials
  • name: Display name
  • role: Title and company

Example copy

  • Thomas K. / Lexaris GmbH
  • Marta L. / Shopboost NL
Allowed sections: testimonials

FooterColumn

Simple grouped footer links under a fortress heading.

footer-navigation

When to use

  • Footer navigation columns

Avoid

  • Do not use as a generic sidebar menu.
  • Do not mix multiple heading levels.

Props

  • title: Column heading
  • items: List of footer links

Example copy

  • Products
  • Developers
  • Company
Allowed sections: footer

Section recipes

Fortress Homepage

Use for: Security landing page, Infrastructure trust landing page, Homepage hero-led conversion page

Sections

  • FortressNavbar
  • HeroSection
  • FeatureGridSection
  • TestimonialsSection
  • FinalCtaSection
  • FooterSection

Rules

  • Hero contains one dominant primary CTA and one supporting secondary CTA.
  • Trust row contains three short badges.
  • Stats grid contains exactly four items.
  • Feature grid contains six cards in a 3-column desktop layout.
  • Closing CTA repeats a single dominant action and one supporting text link.