Design System — Add-on

Sliders & Animation Components

Συμπληρωματικό πακέτο για τη Sthenos AI βιβλιοθήκη (Light / Navy). Κάθε αριθμημένο block είναι αυτόνομο Section: Visual Builder → δεξί κλικ στο περίγραμμα → Copy Section → επικόλληση όπου θες. Οι λεπτές μπάρες-ετικέτες είναι chrome της βιβλιοθήκης — αγνόησέ τες ή σβήσε τες.

// LIGHT THEME · WHITE + NAVY · SLIDERS + MOTION · ACCENT #1e3a8a

[31] HELPER CSS — απαραίτητο για τα marquee, carousel, typing και hover effects

// HELPER CSS — ΜΕΤΈΦΕΡΈ ΤΟ ΣΤΟ THEME OPTIONS > CUSTOM CSS ΚΑΙ ΣΒΉΣΕ ΑΥΤΌ ΤΟ MODULE

[32] HERO SLIDER — 3 SLIDES, AUTO — full-width slider με navy βελάκια/κουκκίδες, gradient + image slides

Mission-ready AI, from edge to command.

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

Decision superiority at machine speed.

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

Built for contested environments.

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

[33] TESTIMONIAL SLIDER — carousel με quotes σε κάρτα, auto-rotate, navy pagination

Testimonials

Trusted where it matters.

Cpt. A. Papadopoulos — Hellenic Navy (demo)

Sthenos cut our sensor-to-decision loop from minutes to seconds. Placeholder quote — swap with a real one.

J. Keller — NATO Innovation Unit (demo)

The first AI stack our operators actually trust in the field. Placeholder quote — swap with a real one.

M. Laine — Defence Integrator (demo)

Deployment took days, not quarters. Placeholder quote — swap with a real one.

[34] LOGO MARQUEE — INFINITE SCROLL — λογότυπα σε συνεχή κύλιση, παύση στο hover

// TRUSTED BY — DEMO LOGOS

············

[35] TEXT MARQUEE BAND — μεγάλες λέξεις σε κύλιση, εναλλάξ solid/outline

AUTONOMYINTELLIGENCEEDGE AIC2 SYSTEMSRESILIENCEINTEROPERABILITYAUTONOMYINTELLIGENCEEDGE AIC2 SYSTEMSRESILIENCEINTEROPERABILITY

[36] CARD CAROUSEL — SCROLL SNAP — οριζόντιο carousel με drag/scroll, χωρίς JS

[37] ANIMATED COUNTERS + BARS — αριθμοί που μετράνε στο scroll και animated progress bars

In numbers

Proof, animated on scroll.

DEPLOYMENTS

NATO PARTNERS

UPTIME %

COUNTRIES

  • Model accuracy92%92%
  • Edge coverage84%84%
  • Operator trust score97%97%

[38] STAGGERED ENTRANCE GRID — 6 κάρτες με διαδοχικό slide-in από κάτω (Divi animations)

Pipeline

Six steps, revealed in sequence.

01.

Sense

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

02.

Fuse

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

03.

Decide

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

04.

Act

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

05.

Learn

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

06.

Harden

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

[39] PARALLAX CTA — background image με parallax + zoom entrance στο περιεχόμενο

Get started

See Sthenos in a live exercise.

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

[40] TYPING HERO + PULSE TERMINAL — typing effect στον τίτλο και κάρτα-terminal με pulse border

Live console

Command, at the speed of thought._

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

// CSS TYPING — ΑΛΛΑΞΕ ΤΟ ΚΕΊΜΕΝΟ ΜΈΣΑ ΣΤΟ .sth2-type

STATUS● OPERATIONAL

LATENCY14ms

NODES128 / 128

MODEAUTONOMOUS

[41] HOVER MOTION CARDS — lift / tilt hover states και animated arrow links

Micro-interactions

Motion in the details.

01.

Lift on hover

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

Explore

02.

Tilt on hover

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

Explore

03.

Lift + arrow

Short placeholder copy. Replace with your own content — two or three sentences are enough here.

Explore