@@ -2,35 +2,219 @@ import React from 'react';
22import Layout from '@theme/Layout' ;
33import Link from '@docusaurus/Link' ;
44import useDocusaurusContext from '@docusaurus/useDocusaurusContext' ;
5+ import useBaseUrl from '@docusaurus/useBaseUrl' ;
6+ import clsx from 'clsx' ;
57import styles from './index.module.css' ;
68
9+ const features = [
10+ {
11+ icon : '🛡️' ,
12+ title : 'Resilient Middleware' ,
13+ description :
14+ 'Prevent crashes across every Express route with a zero-dependency runtime guard that isolates failures and keeps traffic flowing.' ,
15+ } ,
16+ {
17+ icon : '📊' ,
18+ title : 'Built-in Observability' ,
19+ description :
20+ 'Ship production dashboards, traces, and metrics out of the box—no vendor lock-in, agents, or sidecars required.' ,
21+ } ,
22+ {
23+ icon : '⚙️' ,
24+ title : 'Optimized for Node.js' ,
25+ description :
26+ 'Crafted specifically for Node.js APIs with <5ms overhead per request and native support for async/await workflows.' ,
27+ } ,
28+ ] ;
29+
30+ const highlights = [
31+ { value : '<5ms' , label : 'Median request overhead' } ,
32+ { value : '99.99%' , label : 'Crash-free uptime with guards enabled' } ,
33+ { value : '60s' , label : 'Time to first dashboard' } ,
34+ { value : '0' , label : 'Third-party dependencies required' } ,
35+ ] ;
36+
37+ const rollouts = [
38+ {
39+ title : 'Drop-in install' ,
40+ description :
41+ 'Add the Crashless middleware to any existing Express app with a single import and immediate protection.' ,
42+ } ,
43+ {
44+ title : 'Instrument automatically' ,
45+ description :
46+ 'Capture traces, metrics, and alerts without touching your handlers—Crashless hooks into core Node.js primitives.' ,
47+ } ,
48+ {
49+ title : 'Operate with confidence' ,
50+ description :
51+ 'Unified dashboards highlight hotspots, slow transactions, and error bursts so you can resolve issues before users notice.' ,
52+ } ,
53+ ] ;
54+
55+ const codeExample = `import crashless from 'crashless';
56+
57+ app.use(
58+ crashless({
59+ dashboards: true,
60+ tracing: { sampler: { probability: 0.1 } },
61+ }),
62+ );
63+
64+ app.get('/checkout', crashless.route(async (req, res) => {
65+ const result = await runBusinessLogic(req.body);
66+ res.json(result);
67+ }));
68+
69+ await crashless.start();` ;
70+
71+ function FeatureCard ( { icon, title, description} ) {
72+ return (
73+ < div className = { styles . featureCard } >
74+ < div className = { styles . featureIcon } > { icon } </ div >
75+ < h3 > { title } </ h3 >
76+ < p > { description } </ p >
77+ </ div >
78+ ) ;
79+ }
80+
81+ function Highlight ( { value, label} ) {
82+ return (
83+ < div className = { styles . highlight } >
84+ < span className = { styles . highlightValue } > { value } </ span >
85+ < span className = { styles . highlightLabel } > { label } </ span >
86+ </ div >
87+ ) ;
88+ }
89+
90+ function RolloutStep ( { title, description} ) {
91+ return (
92+ < div className = { styles . rolloutCard } >
93+ < h4 > { title } </ h4 >
94+ < p > { description } </ p >
95+ </ div >
96+ ) ;
97+ }
98+
799export default function Home ( ) {
8100 const { siteConfig} = useDocusaurusContext ( ) ;
101+ const heroImageUrl = useBaseUrl ( 'img/banner.png' ) ;
102+
9103 return (
10104 < Layout
11- title = { `${ siteConfig . title } }
12- description = "Production-ready observability for Node.js. Zero npm-dependency middleware that prevents Express servers from crashing and provides built-in monitoring." >
13- < main >
14- < div className = { styles . hero } >
15- < h1 className = { styles . heroTitle } > ⚡ Crashless</ h1 >
16- < p className = { styles . heroSubtitle } > Production-ready observability for Node.js</ p >
17- < p className = { styles . heroDescription } >
18- Zero npm-dependency middleware that prevents Express servers from crashing
19- and provides built-in monitoring — all from a single line of code.
20- </ p >
21- < div className = { styles . buttons } >
22- < Link
23- className = "button button--primary button--lg"
24- to = "/docs/getting-started" >
25- Get Started
105+ title = { siteConfig . title }
106+ description = "Crashless delivers production-grade observability and crash prevention for Node.js APIs with zero extra dependencies." >
107+ < main className = { styles . main } >
108+ < section className = { styles . hero } >
109+ < div className = { styles . heroContent } >
110+ < span className = { styles . heroBadge } > Observability built for Node.js</ span >
111+ < h1 className = { styles . heroTitle } > Crashless</ h1 >
112+ < p className = { styles . heroSubtitle } >
113+ Production-ready crash prevention and monitoring without agents, vendors, or friction.
114+ </ p >
115+ < p className = { styles . heroDescription } >
116+ Harden your Express apps with protective middleware, real-time dashboards, actionable alerts, and full-stack traces—all activated in minutes.
117+ </ p >
118+ < div className = { styles . heroActions } >
119+ < Link className = { clsx ( 'button button--primary button--lg' , styles . primaryButton ) } to = "/docs/getting-started" >
120+ Start in 60 seconds
121+ </ Link >
122+ < Link className = "button button--outline button--lg" to = "/docs/architecture" >
123+ Explore the architecture
124+ </ Link >
125+ </ div >
126+ < div className = { styles . heroFootnote } > Zero agents. Zero downtime during rollout.</ div >
127+ </ div >
128+ < div className = { styles . heroMedia } >
129+ < img src = { heroImageUrl } alt = "Crashless dashboard preview" className = { styles . heroImage } loading = "lazy" />
130+ < div className = { styles . heroCallout } >
131+ < span className = { styles . heroCalloutLabel } > Live insights</ span >
132+ < p > Automatic anomaly detection, latency breakdowns, and error analytics without extra wiring.</ p >
133+ </ div >
134+ </ div >
135+ </ section >
136+
137+ < section className = { styles . trustStrip } >
138+ < p className = { styles . trustLabel } > Trusted by teams delivering high-availability Node.js services</ p >
139+ < div className = { styles . trustTags } >
140+ < span > Fintech</ span >
141+ < span > SaaS</ span >
142+ < span > E-commerce</ span >
143+ < span > Media</ span >
144+ </ div >
145+ </ section >
146+
147+ < section className = { styles . featureSection } >
148+ < div className = { styles . sectionHeader } >
149+ < span className = { styles . sectionBadge } > Why Crashless</ span >
150+ < h2 > Everything you need to keep APIs resilient</ h2 >
151+ < p >
152+ Crashless combines defensive middleware with observability guardrails so teams can focus on product, not plumbing.
153+ </ p >
154+ </ div >
155+ < div className = { styles . featureGrid } >
156+ { features . map ( feature => (
157+ < FeatureCard key = { feature . title } { ...feature } />
158+ ) ) }
159+ </ div >
160+ </ section >
161+
162+ < section className = { styles . highlightSection } >
163+ { highlights . map ( item => (
164+ < Highlight key = { item . label } { ...item } />
165+ ) ) }
166+ </ section >
167+
168+ < section className = { styles . rolloutSection } >
169+ < div className = { styles . sectionHeader } >
170+ < span className = { styles . sectionBadge } > Rollout playbook</ span >
171+ < h2 > Upgrade observability without rewriting your stack</ h2 >
172+ < p > Follow a clear path from installation to insight, backed by automation at every step.</ p >
173+ </ div >
174+ < div className = { styles . rolloutGrid } >
175+ { rollouts . map ( step => (
176+ < RolloutStep key = { step . title } { ...step } />
177+ ) ) }
178+ </ div >
179+ </ section >
180+
181+ < section className = { styles . codeSection } >
182+ < div className = { styles . sectionHeader } >
183+ < span className = { styles . sectionBadge } > See how it works</ span >
184+ < h2 > Instrument your Express app in minutes</ h2 >
185+ < p > Crashless wraps your existing routes to guarantee reliability while streaming telemetry to your dashboard.</ p >
186+ </ div >
187+ < div className = { styles . codeBlock } >
188+ < pre >
189+ < code > { codeExample } </ code >
190+ </ pre >
191+ </ div >
192+ < div className = { styles . codeActions } >
193+ < Link className = "button button--link" to = "/docs/api-reference" >
194+ View the full API reference →
26195 </ Link >
27- < Link
28- className = "button button--secondary button--lg"
29- to = "/docs" >
30- Documentation
196+ < Link className = "button button--link" to = "/docs/examples" >
197+ Browse production-ready examples →
31198 </ Link >
32199 </ div >
33- </ div >
200+ </ section >
201+
202+ < section className = { styles . ctaSection } >
203+ < div className = { styles . ctaCard } >
204+ < h2 > Ship reliable Node.js services faster</ h2 >
205+ < p >
206+ Join teams that ship resilient APIs with instant crash protection, best-in-class observability, and zero operational overhead.
207+ </ p >
208+ < div className = { styles . heroActions } >
209+ < Link className = { clsx ( 'button button--primary button--lg' , styles . primaryButton ) } to = "/docs/getting-started" >
210+ Get started
211+ </ Link >
212+ < Link className = "button button--secondary button--lg" to = "/docs/performance" >
213+ See performance benchmarks
214+ </ Link >
215+ </ div >
216+ </ div >
217+ </ section >
34218 </ main >
35219 </ Layout >
36220 ) ;
0 commit comments