Components · Web
StatusBar
iOS status bar + Dynamic Island in CSS, overlaid on the screenshots.
Web · Astro · macromath_web
An iOS status bar (clock, signal, Wi-Fi, battery) plus the Dynamic Island, drawn entirely in crisp CSS and painted over the blurry status bar that comes "baked" into each app screenshot. It makes the mockups look like real, always-current captures.
Usage
---
import StatusBar from '../components/ui/StatusBar.astro';
---
<div class="phone-mockup">
<StatusBar />
<img src="/images/screens/Inicio.jpg" alt="" />
</div>No props. The styles live in global.css. Used inside the Hero
and the Features.