124 lines
4.7 KiB
TypeScript
124 lines
4.7 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">Design Community Merch</h1>
|
|
<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>
|
|
|
|
<!-- 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>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 & Order</h3>
|
|
<p>See a live mockup, download print-ready files, or send directly to rCart for community ordering.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Products -->
|
|
<section class="rl-section rl-section--alt">
|
|
<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>
|
|
|
|
<!-- Features -->
|
|
<section class="rl-section">
|
|
<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>Live Preview</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>Print-Ready Export</h3>
|
|
<p>Download files with correct DPI, bleed margins, and color profiles for professional printing.</p>
|
|
</div>
|
|
<div class="rl-card rl-card--center">
|
|
<div class="rl-icon-box">⚡</div>
|
|
<h3>Sharp Processing</h3>
|
|
<p>Server-side image processing with Sharp. Fast resizing, format conversion, and optimization.</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>
|
|
|
|
<!-- CTA -->
|
|
<section class="rl-section rl-section--alt">
|
|
<div class="rl-container" style="text-align:center;">
|
|
<h2 class="rl-heading">Make something your community can wear</h2>
|
|
<p class="rl-subtext">
|
|
Try the designer or create a space to start your merch line.
|
|
</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>`;
|
|
}
|