250 lines
12 KiB
TypeScript
250 lines
12 KiB
TypeScript
/**
|
|
* Swag module landing page — rich content for rspace.online/rswag
|
|
*/
|
|
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline">rSwag</span>
|
|
<h1 class="rl-heading">(You)rSwag, your brand.</h1>
|
|
<p class="rl-subtitle">Design Community Merch</p>
|
|
<p class="rl-subtext">
|
|
Stickers, posters, and tees from your browser.
|
|
Upload a design, pick a product, and get print-ready files instantly.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rswag" class="rl-cta-primary" id="ml-primary">Start Designing</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 rSwag Handles</h2>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🖨</div>
|
|
<h3>Print-on-Demand Merch Designer</h3>
|
|
<p>Upload artwork and generate print-ready files with correct DPI, bleed margins, and color profiles.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🧾</div>
|
|
<h3>Stickers, Posters, Tees & Patches</h3>
|
|
<p>Four product types with professional print specs built in. Vinyl stickers, A3 posters, DTG tees, and embroidered patches.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">👁</div>
|
|
<h3>Live Preview Mockups</h3>
|
|
<p>See your design on product mockups before committing. Adjust and iterate in real time.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🛒</div>
|
|
<h3>rCart Integration</h3>
|
|
<p>Send finished designs directly to <a href="/rcart" style="color:#14b8a6;">rCart</a> for community ordering and fulfillment.</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>Choose a Product</h3>
|
|
<p>Pick from stickers, posters, t-shirts, or patches. Each product has print-ready specs built in.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Upload Your Design</h3>
|
|
<p>Drop in your artwork. Sharp resizes, crops, and optimizes for the selected product automatically.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>Preview and Order</h3>
|
|
<p>See a live mockup, download print-ready files, or send directly to rCart for community ordering.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Design Global, Manufacture Local -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Design Global, Manufacture Local</h2>
|
|
<p class="rl-subtext" style="text-align:center">One artifact spec powers the entire pipeline — from design to local fulfillment.</p>
|
|
<div class="rl-grid-5" style="display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2rem;">
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">1</div>
|
|
<h3>Design in rSwag</h3>
|
|
<p>Pick a product, upload artwork, and configure sizes and colors.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">2</div>
|
|
<h3>Generate Artifact</h3>
|
|
<p>Print-ready files with specs, DPI, bleed, color profiles, and metadata.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">3</div>
|
|
<h3>List on rCart</h3>
|
|
<p>The artifact becomes a catalog product, ready for community ordering.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">4</div>
|
|
<h3>Match Provider</h3>
|
|
<p>Nearest capable local print shop gets the job. Printful as global fallback.</p>
|
|
</div>
|
|
<div class="rl-step">
|
|
<div class="rl-step__num">5</div>
|
|
<h3>Print & Ship Locally</h3>
|
|
<p>Community printer fulfills the order. Revenue auto-splits to all parties.</p>
|
|
</div>
|
|
</div>
|
|
<div class="rl-card" style="margin-top:1.5rem;text-align:center;border-color:#334155;">
|
|
<p style="color:#94a3b8;font-size:0.875rem;margin:0;">The same artifact envelope that powers pocket book publishing also drives swag fulfillment. <strong style="color:#e2e8f0;">One spec, many products.</strong></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Local + Global Fulfillment -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Local + Global Fulfillment</h2>
|
|
<p class="rl-subtext" style="text-align:center">Community printers first, global POD as fallback. Always fulfilled.</p>
|
|
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem;">
|
|
<div class="rl-card">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;">
|
|
<span style="background:rgba(34,197,94,0.15);color:#4ade80;padding:0.25rem 0.625rem;border-radius:999px;font-size:0.75rem;font-weight:600;">cosmolocal</span>
|
|
<h3 style="margin:0;font-size:1rem;">Community Print Network</h3>
|
|
</div>
|
|
<p>6 community print shops across 4 continents. Matched by proximity and capability. Lower cost, faster delivery, supports the local economy.</p>
|
|
<p style="color:#64748b;font-size:0.8125rem;margin-bottom:0;">DTG, screen print, vinyl cut, risograph, inkjet — capabilities vary by shop.</p>
|
|
</div>
|
|
<div class="rl-card">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;">
|
|
<span style="background:rgba(56,189,248,0.15);color:#38bdf8;padding:0.25rem 0.625rem;border-radius:999px;font-size:0.75rem;font-weight:600;">global</span>
|
|
<h3 style="margin:0;font-size:1rem;">Printful (Global Fallback)</h3>
|
|
</div>
|
|
<p>DTG apparel, vinyl stickers, and art prints shipped worldwide. Always available. Bella+Canvas blanks. Sandbox mode for testing.</p>
|
|
<p style="color:#64748b;font-size:0.8125rem;margin-bottom:0;">SKU 71 (tee), SKU 146 (hoodie), SKU 358 (sticker) — full size and color ranges.</p>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:1.5rem;">
|
|
<p style="text-align:center;color:#94a3b8;font-size:0.8125rem;margin-bottom:0.5rem;">Revenue Split on Every Order</p>
|
|
<div style="display:flex;height:32px;border-radius:8px;overflow:hidden;font-size:0.75rem;font-weight:600;">
|
|
<div style="flex:50;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;">Provider 50%</div>
|
|
<div style="flex:35;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;">Creator 35%</div>
|
|
<div style="flex:15;background:#d97706;color:#fff;display:flex;align-items:center;justify-content:center;">15%</div>
|
|
</div>
|
|
<div style="display:flex;justify-content:flex-end;margin-top:0.25rem;">
|
|
<span style="color:#64748b;font-size:0.6875rem;">Community 15%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Products (module-specific) -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<h2 class="rl-heading" style="text-align:center">Products</h2>
|
|
<p class="rl-subtext" style="text-align:center">
|
|
Four product types, each with professional print specs.
|
|
</p>
|
|
<div class="rl-grid-4">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🧾</div>
|
|
<h3>Stickers</h3>
|
|
<p>Vinyl die-cut stickers. Weatherproof, UV-resistant, and ready for laptops, bottles, and walls.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🖼</div>
|
|
<h3>Posters</h3>
|
|
<p>A3 and A2 prints at 300 DPI. Gallery-quality paper with bleed margins included.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">👕</div>
|
|
<h3>T-Shirts</h3>
|
|
<p>Direct-to-garment (DTG) printing. Full-color designs on comfortable, pre-shrunk cotton.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🧵</div>
|
|
<h3>Patches</h3>
|
|
<p>Embroidered patches with iron-on backing. Perfect for jackets, bags, and hats.</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 rSwag.</p>
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">⚡</div>
|
|
<h3>Sharp</h3>
|
|
<p>Server-side image processing, resizing, and format conversion. Fast and memory-efficient.</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 class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">🐇</div>
|
|
<h3>Bun</h3>
|
|
<p>All-in-one JavaScript runtime. Fast startup, built-in bundler, and native TypeScript support.</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 rSwag 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)rSwag, your brand.</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/rswag" class="rl-cta-primary">Start Designing</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>`;
|
|
}
|