The animated feature cards
What each of the five animated cards in the Features section shows, and how to change or remove one.
What the cards show
The Features section is a grid of five cards, each with a title, a sentence and a small animated illustration. They play when they scroll into view and loop on their own.
| Card | What it shows |
|---|---|
| Performance Metrics | Four score gauges (Performance, Accessibility, Best Practices, SEO) that count up, tabs with the details of each, and a preview of the analysed site |
| One-Click Deployment | A pipeline that moves through Prepare, Build, Deploy and Live, with a terminal typing the commands, then starts again |
| File Structure | A project's folders and files opening one after another, like a code editor's explorer |
| Scalable Environments | A 24-hour chart of CPU and memory, and a row of servers that grows and shrinks as the traffic changes |
| Global Deployments | A 3D globe that turns, with dots on ten cities and the totals of deployments, uptime and regions |
They are illustrations, not tools: every score, command, file name, city and figure is fixed sample data. Nothing is measured or deployed. Their labels are translated with the rest of the site.
The section loads in the browser after the page, so it does not slow down the first paint, and shows a short placeholder while it loads.
Change their texts
Each card's title, sentence and labels are under features in messages/home/en.json and messages/home/ar.json, one block per card, such as features.oneClickDeployment. Change both languages together.
Change a card's data
Included with your purchase. Sign in to read, or open it in your download.
The file behind each card's scores, commands, files, chart and cities.
Reorder, resize or remove a card
Included with your purchase. Sign in to read, or open it in your download.
How the grid is defined, and how to take a card out or put your own in.