169 lines
7.0 KiB
TypeScript
169 lines
7.0 KiB
TypeScript
/**
|
|
* rNetwork — rich landing page body.
|
|
* Returned by landingPage() in the module export;
|
|
* the shell wraps it with header, CSS, and analytics.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rNetwork</span>
|
|
<h1 class="rl-heading">(You)rNetwork, your web of trust.</h1>
|
|
<p class="rl-subtitle">See the web of trust</p>
|
|
<p class="rl-subtext">
|
|
Map the relationships that matter. rNetwork makes the invisible
|
|
connections visible — people, companies, and opportunities rendered
|
|
as a living, interactive graph.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rnetwork" class="rl-cta-primary" id="ml-primary">Explore Network</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">What rNetwork Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔗</div>
|
|
<h3>Relationship Mapping</h3>
|
|
<p>Connect people, companies, and opportunities into a unified graph. See who knows whom at a glance.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🛰</div>
|
|
<h3>Force-Directed Graph Visualization</h3>
|
|
<p>Interactive graph with physics simulation. Nodes attract and repel naturally, revealing organic clusters.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔄</div>
|
|
<h3>CRM Integration</h3>
|
|
<p>Twenty CRM integration via GraphQL. People, companies, and opportunities stay up to date automatically.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🧸</div>
|
|
<h3>Web of Trust</h3>
|
|
<p>Relationship data flows to other rSpace modules. The trust graph powers governance, funding, and collaboration views.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Connect Your Contacts</h3>
|
|
<p>Link your Twenty CRM instance via GraphQL. People, companies, and opportunities sync automatically.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Map Relationships Visually</h3>
|
|
<p>Entities become nodes and relationships become edges in a force-directed layout you can explore in real time.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Discover Hidden Connections</h3>
|
|
<p>Click, drag, and zoom to find unexpected links. Filter by entity type, search by name, and trace paths of trust.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Use Cases (module-specific) -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Use Cases</h2>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🌐</div>
|
|
<h3>Community Mapping</h3>
|
|
<p>See who knows whom across your ecosystem. Identify bridges, hubs, and isolated clusters at a glance.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📈</div>
|
|
<h3>Stakeholder Analysis</h3>
|
|
<p>Trace influence paths between people and organizations. Understand power dynamics before critical decisions.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🎯</div>
|
|
<h3>Opportunity Tracking</h3>
|
|
<p>Visualize pipeline deals alongside the people and companies involved. Spot warm introductions and shared connections.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Open Source -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
|
|
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rNetwork.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔄</div>
|
|
<h3>Twenty CRM</h3>
|
|
<p>Open-source CRM with a GraphQL API. People, companies, and opportunities as first-class entities.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">📊</div>
|
|
<h3>D3.js</h3>
|
|
<p>Force-directed graph visualization library. Physics-based layout with interactive drag, zoom, and pan.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔥</div>
|
|
<h3>Hono</h3>
|
|
<p>Ultrafast web framework for the API layer. Lightweight, type-safe, and runs on any JavaScript runtime.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Your Data, Protected -->
|
|
<section class="rl-section">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Data, Protected</h2>
|
|
<p class="rl-subtext">How rNetwork keeps your information safe.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔒</div>
|
|
<h3>End-to-End Encryption</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>All content encrypted before it leaves your device. Not even the server can read it.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🕵</div>
|
|
<h3>Zero-Knowledge Architecture</h3>
|
|
<span class="rl-badge">Coming Soon</span>
|
|
<p>The server processes your requests without ever seeing your data in the clear.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🏠</div>
|
|
<h3>Self-Hosted</h3>
|
|
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">(You)rNetwork, your web of trust.</h2>
|
|
<p class="rl-subtext">Try the demo or create a space to get started.</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rnetwork" class="rl-cta-primary">Explore Network</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="rl-back">
|
|
<a href="/">← Back to rSpace</a>
|
|
</div>`;
|
|
}
|