// Beside — 4-slide deck for the website // Reusable framed phone — IOSDevice fixed at 390x844, scalable const Phone = ({ children, dark = true, scale = 1, tilt = 0, shadow = 'normal' }) => (
{children}
); // Wordmark used on every slide const DeckMark = ({ size = 22, color = '#fff', opacity = 1 }) => (
beside
); const Eyebrow = ({ children, color = '#9D85F2' }) => (
{children}
); const FeatureRow = ({ icon, title, desc }) => (
{icon}
{title}
{desc}
); // ──────────────────────────────────────────────────────────── // Slide 1 — Hero // ──────────────────────────────────────────────────────────── const Slide1 = () => (
{/* Top bar */}
ProductHow it worksTrust & privacyGet the app
{/* Content row */}
Personal safety, quietly.
Someone is
beside you.
A pocket-sized safety net for late walks, blind dates, and taxis at 2am. One tap and the people you trust see exactly where you are.
{/* Mini stats */}
{[ ['< 3 s', 'from tap to alert'], ['Offline', 'SMS fallback, always'], ['E2E', 'encrypted on-device'], ].map(([k, v]) => (
{k}
{v}
))}
{/* Phone */}
{/* Footer slide indicator */}
01 — beside.app Tap → 5-second grace → live tracking starts
); // ──────────────────────────────────────────────────────────── // Slide 2 — SOS // ──────────────────────────────────────────────────────────── const Slide2 = () => (
{/* Header */}
02 — The critical path
{/* Two phones overlapping */}
{/* Copy */}
SOS · the only red button
One tap.
The whole circle.
A five-second window to cancel false alarms — then your live location, an encrypted audio recording, and a one-tap call-link go to everyone you trust at the same time.
} title="Live location, every 5 seconds" desc="They see where you are, where you've been, your battery and signal."/> } title="Encrypted recording on-device" desc="AES-256 before it leaves your phone. Even we can't read it."/> } title="Duress PIN" desc="If someone forces you to cancel, fake-cancel them. The alert keeps running silently."/>
); // ──────────────────────────────────────────────────────────── // Slide 3 — Safe Walk // ──────────────────────────────────────────────────────────── const Slide3 = () => (
03 — Night-time companion
{/* Copy on left */}
Safe Walk · the angel mode
Walked home
together.
Pick a destination and a friend. They see your route in real time — inside a browser, with no app to install. If you stop, deviate, or miss your ETA, they know first.
} title="Angels don't need the app" desc="A magic link opens a live map in any browser. Grandma can be your angel."/> } title="Smart anomaly detection" desc="Off-route 150m for 90s, stopped 4 min outside a safe place, or ETA overrun by 20% — auto-alert."/> } title="Auto-arrival" desc="Walk into your address — Safe Walk ends, your circle gets a green check."/>
{/* Two phones — user view + angel web view */}
); // ──────────────────────────────────────────────────────────── // Slide 4 — The toolkit // ──────────────────────────────────────────────────────────── const Slide4 = () => (
04 — When you need less than SOS
The quiet toolkit
Not every danger
needs a red button.
A creepy date. A long taxi. An aggressor at your shoulder. Beside has tools for the in-between moments, too.
{/* Three phones row */}
} > } accent > } >
); const ToolCard = ({ title, desc, icon, children, accent }) => (
{icon}
{title}
{desc}
{accent &&
}
{children}
); // Render each slide into its container ReactDOM.createRoot(document.getElementById('slide-1')).render(); ReactDOM.createRoot(document.getElementById('slide-2')).render(); ReactDOM.createRoot(document.getElementById('slide-3')).render(); ReactDOM.createRoot(document.getElementById('slide-4')).render(); // Hide splash once mounted const splash = document.getElementById('splash'); if (splash) { setTimeout(() => { splash.classList.add('hide'); setTimeout(() => splash.remove(), 400); }, 100); }