118 lines
4.5 KiB
TypeScript
118 lines
4.5 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 {
|
|
const demo = "https://demo.rspace.online/rnetwork";
|
|
|
|
return `
|
|
<!-- Hero -->
|
|
<section class="rl-hero">
|
|
<span class="rl-tagline">rNetwork</span>
|
|
<h1 class="rl-heading">See the web of trust</h1>
|
|
<p class="rl-subtext">
|
|
Map the relationships that matter. (You)rNetwork makes the invisible
|
|
connections visible — people, companies, and opportunities rendered
|
|
as a living, interactive graph.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="${demo}" class="rl-cta-primary" id="ml-primary">Explore Your Network</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="rl-section">
|
|
<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 CRM Data</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>Visualize the Graph</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>Explore Relationships</h3>
|
|
<p>Click, drag, and zoom to discover hidden connections. Filter by entity type, search by name, and trace paths of trust.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Features</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🛰</div>
|
|
<h3>Force-Directed Layout</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 Sync</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>Entity Types</h3>
|
|
<p>People, companies, and opportunities rendered as distinct nodes. Visual encoding makes each type instantly recognizable.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🔗</div>
|
|
<h3>Trust Feeds</h3>
|
|
<p>Relationship data flows to other rSpace modules. The trust graph powers governance, funding, and collaboration views.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Use Cases -->
|
|
<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>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center">
|
|
<h2 class="rl-heading">Your Community, Connected</h2>
|
|
<p class="rl-subtext">
|
|
Stop guessing who knows whom. Start seeing the relationships that shape your community.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="${demo}" class="rl-cta-primary">Explore Your 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>`;
|
|
}
|