From 8e067b1970256f4740cb47b7c016cad2a80cd2e6 Mon Sep 17 00:00:00 2001 From: riya24bce10840-wq Date: Sat, 16 May 2026 22:47:58 +0530 Subject: [PATCH] Made 5 different pages, for 4 pages for features,pricing,architecture and how it works page and 1 for navigation. Did some required changes in layout page also --- apps/web/app/Pricing/page.tsx | 131 ++++ apps/web/app/architecture/page.tsx | 64 ++ apps/web/app/components/Navbar.tsx | 138 ++++ apps/web/app/features/pages.tsx | 399 ++++++++++++ apps/web/app/how-it-works/pages.tsx | 288 +++++++++ apps/web/app/layout.tsx | 5 +- apps/web/app/page.tsx | 937 +--------------------------- 7 files changed, 1032 insertions(+), 930 deletions(-) create mode 100644 apps/web/app/Pricing/page.tsx create mode 100644 apps/web/app/architecture/page.tsx create mode 100644 apps/web/app/components/Navbar.tsx create mode 100644 apps/web/app/features/pages.tsx create mode 100644 apps/web/app/how-it-works/pages.tsx diff --git a/apps/web/app/Pricing/page.tsx b/apps/web/app/Pricing/page.tsx new file mode 100644 index 0000000..049b42c --- /dev/null +++ b/apps/web/app/Pricing/page.tsx @@ -0,0 +1,131 @@ +'use client'; + +import React from 'react'; + +export default function PricingPage() { + return ( +
+
+
+

+ {'// WHY OPSCORD'} +

+

+ Your current tools cost a fortune +

+

+ And they still don't tell you the root cause. +

+ +
+ + + + {['Tool', 'Causality AI', 'Real-time', 'Unified View', 'Price/mo'].map((h) => ( + + ))} + + + + {[ + { tool: 'PagerDuty', ai: '✗', rt: '✓', uv: 'partial', price: '$299' }, + { tool: 'Datadog APM', ai: '✗', rt: '✓', uv: '✗', price: '$420' }, + { tool: 'OpsGenie', ai: '✗', rt: 'partial', uv: '✗', price: '$198' }, + { tool: 'OpsCord', ai: '✓', rt: '✓', uv: '✓', price: 'TBD', highlight: true }, + ].map((row) => ( + + + {[row.ai, row.rt, row.uv].map((val, j) => ( + + ))} + + + ))} + +
+ {h} +
+ {row.tool} + + + {val} + + + {row.highlight ? ( + {row.price} + ) : ( + row.price + )} +
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/web/app/architecture/page.tsx b/apps/web/app/architecture/page.tsx new file mode 100644 index 0000000..1ceaaa2 --- /dev/null +++ b/apps/web/app/architecture/page.tsx @@ -0,0 +1,64 @@ +'use client'; + +import React from 'react'; +import dynamic from 'next/dynamic'; + +const ArchitectureDiagram = dynamic(() => import('@/components/ArchitectureDiagram'), { ssr: false }); + +export default function ArchitecturePage() { + return ( +
+
+
+

+ {'// ARCHITECTURE'} +

+

+ Built to scale +

+

+ Event-driven microservices. PostgreSQL + Redis + SQS. Express.js REST API. +

+ + + +
+ {[ + { label: '10 services', c: '#3b82f6' }, + { label: '3 data stores', c: '#7c3aed' }, + { label: '4 input sources', c: '#10b981' }, + ].map((p) => ( + + {p.label} + + ))} +
+
+
+
+ ); +} diff --git a/apps/web/app/components/Navbar.tsx b/apps/web/app/components/Navbar.tsx new file mode 100644 index 0000000..2412133 --- /dev/null +++ b/apps/web/app/components/Navbar.tsx @@ -0,0 +1,138 @@ +'use client'; + +import React, { useState } from 'react'; +import Link from 'next/link'; + +function PulsingDot({ color = '#ef4444', size = 7 }: { color?: string; size?: number }) { + return ( + + ); +} + +function MobileMenu({ open, onClose }: { open: boolean; onClose: () => void }) { + if (!open) return null; + return ( +
+ {[ + { label: 'Features', href: '/features' }, + { label: 'How It Works', href: '/how-it-works' }, + { label: 'Architecture', href: '/architecture' }, + { label: 'Pricing', href: '/pricing' }, + ].map((l) => ( + + {l.label} + + ))} +
+ ); +} + +export function Navbar() { + const [menuOpen, setMenuOpen] = useState(false); + + return ( + <> + setMenuOpen(false)} /> + + + + ); +} \ No newline at end of file diff --git a/apps/web/app/features/pages.tsx b/apps/web/app/features/pages.tsx new file mode 100644 index 0000000..78ef2ac --- /dev/null +++ b/apps/web/app/features/pages.tsx @@ -0,0 +1,399 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; + +export default function FeaturesPage() { + const [epsCount, setEpsCount] = useState(847); + + useEffect(() => { + const iv = setInterval(() => setEpsCount(800 + Math.floor(Math.random() * 100)), 3000); + return () => clearInterval(iv); + }, []); + + return ( +
+

+ {'// CAPABILITIES'} +

+

+ Everything your on-call team needs +

+

+ From raw webhook noise to a ranked root-cause list in under 40ms. +

+ +
+ {/* Card 1 — Causality Scoring */} +
+
+ + Core AI + +
🔍
+

+ Causality Scoring Engine +

+

+ AI ranks which event caused the incident. Not just correlation — actual root cause + with per-event confidence scores and signal ranking. +

+
+ {['root cause', 'confidence %', 'multi-signal', 'ranked list'].map((t) => ( + + {t} + + ))} +
+
+ + {/* Card 2 — Real-Time Ingestion */} +
+ + Event Layer + +
⚡
+

Real-Time Ingestion

+

+ Webhooks, API watch & polling. Express.js receiver processes all sources in under + 40ms p99 with Redis-backed deduplication. +

+
+
+ events / second +
+ + {epsCount} + +
+
+ + {/* Card 3 — Unified Incident View (span 2) */} +
+
+ + Dashboard + +

+ 🎯 Unified Incident View +

+

+ Every incident, every source, every signal — one dashboard. Ranked by causality, + filterable by severity, and updated in real-time. +

+
+
+
+ ACTIVE INCIDENTS +
+ {[ + { + dot: '#ef4444', + title: 'K8s pod crash → deploy #2847', + sev: 'Critical', + sevC: '#ef4444', + }, + { dot: '#f97316', title: 'Redis cache miss storm', sev: 'High', sevC: '#f97316' }, + { dot: '#eab308', title: 'GitHub webhook spike', sev: 'Medium', sevC: '#eab308' }, + ].map((r, i) => ( +
+ + + {r.title} + + + {r.sev} + +
+ ))} +
+
+ + {/* Card 4 — Multi-Source Intelligence */} +
+ + Integrations + +
🔗
+

+ Multi-Source Intelligence +

+

+ All normalized into one event stream. One schema. One place. +

+
+ {[ + { name: 'CircleCI', c: '#00D4AA' }, + { name: 'GitHub', c: '#f0883e' }, + { name: 'Kubernetes', c: '#326CE5' }, + { name: 'Datadog', c: '#a78bfa' }, + ].map((s) => ( + + {s.name} + + ))} +
+
+ + {/* Card 5 — Instant Alerting */} +
+ + Outputs + +
🔔
+

Instant Alerting

+

+ Push causality-ranked summaries to your team instantly. Fully programmable via REST + API. +

+
+ {['Slack Bot', 'React Dashboard', 'Webhooks API', 'Mobile App'].map((t) => ( + + {t} + + ))} +
+
+
+ } + +
+ ); diff --git a/apps/web/app/how-it-works/pages.tsx b/apps/web/app/how-it-works/pages.tsx new file mode 100644 index 0000000..89aab74 --- /dev/null +++ b/apps/web/app/how-it-works/pages.tsx @@ -0,0 +1,288 @@ +'use client'; + +import React from 'react'; +import dynamic from 'next/dynamic'; + +const EventFeed = dynamic(() => import('@/components/EventFeed'), { ssr: false }); + +function PulsingDot({ color = '#ef4444', size = 7 }: { color?: string; size?: number }) { + return ( + + ); +} + +export default function HowItWorksPage() { + return ( +
+ {/* ── HOW IT WORKS ── */} +
+
+

+ {'// PIPELINE'} +

+

+ From noise to root cause +

+

+ Four stages. Sub-second. Every time. +

+ +
+ {[ + { + num: '01', + icon: '📥', + label: 'Events In', + color: '#3b82f6', + body: 'CircleCI, GitHub, K8s & Datadog push events via webhooks or polling', + }, + { + num: '02', + icon: '⚙️', + label: 'Normalize', + color: '#6366f1', + body: 'Event Processor & Normalizer creates a unified event schema', + }, + { + num: '03', + icon: '🧠', + label: 'AI Score', + color: '#7c3aed', + body: 'Causality Scoring Engine ranks root causes with confidence scores', + }, + { + num: '04', + icon: '📣', + label: 'Alert Team', + color: '#38bdf8', + body: 'Results delivered to Slack, Dashboard & Webhooks. Sub-second.', + }, + ].map((step, i) => ( +
(e.currentTarget.style.background = 'rgba(255,255,255,0.03)')} + onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')} + > +
+ STEP {step.num} +
+
{step.icon}
+
+ {step.label} +
+

{step.body}

+
+ ))} +
+
+
+ + {/* ── LIVE EVENT DEMO ── */} +
+
+ {/* Left */} +
+

+ {'// LIVE DEMO'} +

+

+ Watch it work +

+

+ This simulation shows how OpsCord processes real-time events and produces causality + scores for active incidents. +

+ + {/* Causality Scores */} +
+
+ ◆ CAUSALITY SCORE · latest incident +
+ {[ + { label: 'K8s pod OOMKilled', pct: 87, color: '#ef4444' }, + { label: 'CircleCI deploy #2847', pct: 64, color: '#f97316' }, + { label: 'Redis cache miss', pct: 31, color: '#eab308' }, + ].map((bar) => ( +
+
+ {bar.label} + + {bar.pct}% + +
+
+
+
+
+ ))} +
+ + {/* Root Cause Box */} +
+
+ ROOT CAUSE IDENTIFIED +
+
+ 🔍 K8s pod OOMKilled +
+
+ Confidence: 87% · 3 contributing factors +
+
+
+ + {/* Right — Live Event Feed */} +
+
+ + + LIVE + + + streaming events + +
+ +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 97092d1..bddce55 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -24,7 +24,10 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( - {children} + + + {children} + ); diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index c0e4aff..c5efb17 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -33,37 +33,6 @@ function PulsingDot({ color = '#ef4444', size = 7 }: { color?: string; size?: nu ); } -/* ── Mobile Menu ──────────────────────────── */ -function MobileMenu({ open, onClose }: { open: boolean; onClose: () => void }) { - if (!open) return null; - return ( -
- {['Features', 'How It Works', 'Architecture', 'Pricing'].map((l) => ( - - {l} - - ))} -
- ); -} /* ── Inline Event Card for Hero ───────────── */ function MiniEventPreview() { @@ -179,7 +148,7 @@ function MiniEventPreview() { /* LANDING PAGE */ /* ═══════════════════════════════════════════ */ export default function LandingPage() { - const [menuOpen, setMenuOpen] = useState(false); + const [archOpen, setArchOpen] = useState(false); const [toast, setToast] = useState(false); const [email, setEmail] = useState(''); @@ -289,85 +258,9 @@ export default function LandingPage() { )} - setMenuOpen(false)} /> + - {/* ── NAVBAR ──────────────────────── */} - + {/* ── HERO ────────────────────────── */}
- {/* ── FEATURES BENTO GRID ─────────── */} -
-

- {'// CAPABILITIES'} -

-

- Everything your on-call team needs -

-

- From raw webhook noise to a ranked root-cause list in under 40ms. -

+ -
- {/* Card 1 — Causality Scoring */} -
-
- - Core AI - -
🔍
-

- Causality Scoring Engine -

-

- AI ranks which event caused the incident. Not just correlation — actual root cause - with per-event confidence scores and signal ranking. -

-
- {['root cause', 'confidence %', 'multi-signal', 'ranked list'].map((t) => ( - - {t} - - ))} -
-
+ - {/* Card 2 — Real-Time Ingestion */} -
- - Event Layer - -
⚡
-

Real-Time Ingestion

-

- Webhooks, API watch & polling. Express.js receiver processes all sources in under - 40ms p99 with Redis-backed deduplication. -

-
-
- events / second -
- - {epsCount} - -
-
- - {/* Card 3 — Unified Incident View (span 2) */} -
-
- - Dashboard - -

- 🎯 Unified Incident View -

-

- Every incident, every source, every signal — one dashboard. Ranked by causality, - filterable by severity, and updated in real-time. -

-
-
-
- ACTIVE INCIDENTS -
- {[ - { - dot: '#ef4444', - title: 'K8s pod crash → deploy #2847', - sev: 'Critical', - sevC: '#ef4444', - }, - { dot: '#f97316', title: 'Redis cache miss storm', sev: 'High', sevC: '#f97316' }, - { dot: '#eab308', title: 'GitHub webhook spike', sev: 'Medium', sevC: '#eab308' }, - ].map((r, i) => ( -
- - - {r.title} - - - {r.sev} - -
- ))} -
-
- - {/* Card 4 — Multi-Source Intelligence */} -
- - Integrations - -
🔗
-

- Multi-Source Intelligence -

-

- All normalized into one event stream. One schema. One place. -

-
- {[ - { name: 'CircleCI', c: '#00D4AA' }, - { name: 'GitHub', c: '#f0883e' }, - { name: 'Kubernetes', c: '#326CE5' }, - { name: 'Datadog', c: '#a78bfa' }, - ].map((s) => ( - - {s.name} - - ))} -
-
+ - {/* Card 5 — Instant Alerting */} -
- - Outputs - -
🔔
-

Instant Alerting

-

- Push causality-ranked summaries to your team instantly. Fully programmable via REST - API. -

-
- {['Slack Bot', 'React Dashboard', 'Webhooks API', 'Mobile App'].map((t) => ( - - {t} - - ))} -
-
-
-
- - {/* ── HOW IT WORKS ───────────────── */} -
-
-

- {'// PIPELINE'} -

-

- From noise to root cause -

-

- Four stages. Sub-second. Every time. -

- -
- {[ - { - num: '01', - icon: '📥', - label: 'Events In', - color: '#3b82f6', - body: 'CircleCI, GitHub, K8s & Datadog push events via webhooks or polling', - }, - { - num: '02', - icon: '⚙️', - label: 'Normalize', - color: '#6366f1', - body: 'Event Processor & Normalizer creates a unified event schema', - }, - { - num: '03', - icon: '🧠', - label: 'AI Score', - color: '#7c3aed', - body: 'Causality Scoring Engine ranks root causes with confidence scores', - }, - { - num: '04', - icon: '📣', - label: 'Alert Team', - color: '#38bdf8', - body: 'Results delivered to Slack, Dashboard & Webhooks. Sub-second.', - }, - ].map((step, i) => ( -
(e.currentTarget.style.background = 'rgba(255,255,255,0.03)')} - onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')} - > -
- STEP {step.num} -
-
{step.icon}
-
- {step.label} -
-

{step.body}

-
- ))} -
-
-
- - {/* ── LIVE EVENT DEMO ─────────────── */} -
-
- {/* Left */} -
-

- {'// LIVE DEMO'} -

-

- Watch it work -

-

- This simulation shows how OpsCord processes real-time events and produces causality - scores for active incidents. -

- - {/* Causality Scores */} -
-
- ◆ CAUSALITY SCORE · latest incident -
- {[ - { label: 'K8s pod OOMKilled', pct: 87, color: '#ef4444' }, - { label: 'CircleCI deploy #2847', pct: 64, color: '#f97316' }, - { label: 'Redis cache miss', pct: 31, color: '#eab308' }, - ].map((bar) => ( -
-
- {bar.label} - - {bar.pct}% - -
-
-
-
-
- ))} -
- - {/* Root Cause Box */} -
-
- ROOT CAUSE IDENTIFIED -
-
- 🔍 K8s pod OOMKilled -
-
- Confidence: 87% · 3 contributing factors -
-
-
- - {/* Right — Live Event Feed */} -
-
- - - LIVE - - - streaming events - -
- -
-
-
- - {/* ── ARCHITECTURE ───────────────── */} -
-
-

- {'// ARCHITECTURE'} -

-

- Built to scale -

-

- Event-driven microservices. PostgreSQL + Redis + SQS. Express.js REST API. -

- - - -
- {[ - { label: '10 services', c: '#3b82f6' }, - { label: '3 data stores', c: '#7c3aed' }, - { label: '4 input sources', c: '#10b981' }, - ].map((p) => ( - - {p.label} - - ))} -
-
-
- - {/* ── COMPETITOR COMPARISON ─────── */} -
-
-

- {'// WHY OPSCORD'} -

-

- Your current tools cost a fortune -

-

- And they still don't tell you the root cause. -

- -
- - - - {['Tool', 'Causality AI', 'Real-time', 'Unified View', 'Price/mo'].map((h) => ( - - ))} - - - - {[ - { tool: 'PagerDuty', ai: '✗', rt: '✓', uv: 'partial', price: '$299' }, - { tool: 'Datadog APM', ai: '✗', rt: '✓', uv: '✗', price: '$420' }, - { tool: 'OpsGenie', ai: '✗', rt: 'partial', uv: '✗', price: '$198' }, - { tool: 'OpsCord', ai: '✓', rt: '✓', uv: '✓', price: 'TBD', highlight: true }, - ].map((row) => ( - - - {[row.ai, row.rt, row.uv].map((val, j) => ( - - ))} - - - ))} - -
- {h} -
- {row.tool} - - - {val} - - - {row.highlight ? ( - {row.price} - ) : ( - row.price - )} -
-
-
-
+ + {/* ── BUILDING IN PUBLIC / WAITLIST ── */}