majiayu000 Landing Page Marketing Skill
Overview
This skill automates the complete workflow for updating the Saberloop landing page and capturing marketing assets. It consolidates screenshot capture, image processing, HTML updates, and deployment into a standardized process.
Landing Page Architecture
saberloop.com/
├── index.html # Landing page (from ./landing/)
├── app/ # PWA application
├── app-staging/ # Staging PWA
└── [other endpoints]
./landing/
├── index.html # Main landing page HTML
├── images/ # Landing page images (304x584 for mobile screenshots)
│ ├── demo.webm
│ ├── landing-*.png
│ └── party-demo.webm
└── [deployed to root]
When to Use This Skill
Use this skill when ANY of these are true:
- Adding a new feature to showcase on landing page
- Updating marketing copy or CTAs
- Capturing new app screenshots
- Creating demo videos
- Refreshing existing screenshots after UI changes
- Deploying landing page updates
Landing Page Sections
| Section | Location (lines) | Purpose |
|---|---|---|
| Hero | ~668-694 | Main headline, video demo, primary CTAs |
| Features | ~697-733 | Feature cards grid (6-7 cards) |
| Party Mode | ~736-759 | Dedicated party mode section |
| How It Works | ~762-788 | 4-step process explanation |
| Screenshots | ~791-803 | App screenshot gallery |
| Share Section | ~806-819 | Social sharing preview |
| CTA | ~822-848 | Final call-to-action columns |
| Footer | ~851-862 | Links and copyright |
Complete Workflow
Phase 1: Screenshot Capture
Step 1.1: Create Capture Script
File: tests/e2e/capture-[feature]-screenshots.spec.js
import { test, expect } from '@playwright/test';
import { setupAuthenticatedState, clearSessions } from './helpers.js';
const MOBILE_VIEWPORT = { width: 375, height: 667 };
const SCREENSHOT_DIR = 'landing/images';
test.use({ viewport: MOBILE_VIEWPORT });
test.describe('Capture [Feature] Screenshots', () => {
test('[Feature] screenshot', async ({ page }) => {
// Setup authenticated state if needed
await setupAuthenticatedState(page);
await clearSessions(page);
await page.reload();
await page.waitForSelector('[data-testid="welcome-heading"]', { timeout: 10000 });
// Navigate to the screen to capture
await page.goto('/#/[route]');
await page.waitForTimeout(500);
// Setup the UI state (scroll, open modals, etc.)
// ...
// Capture screenshot
await page.screenshot({
path: `${SCREENSHOT_DIR}/landing-[feature-name].png`,
fullPage: false
});
console.log('✓ Captured: [Feature] screenshot');
});
});
Step 1.2: Run Capture Script
# Run with visible browser
npx playwright test tests/e2e/capture-[feature]-screenshots.spec.js --headed
# Or run all capture scripts
npm run test:e2e:capture
Step 1.3: Process Images
# Resize to landing page dimensions (304x584)
# Option 1: Using Sharp CLI
npx sharp-cli landing/images/landing-[feature].png -o landing/images/landing-[feature].png resize 304 584
# Option 2: Using ImageMagick
convert landing/images/landing-[feature].png -resize 304x584 landing/images/landing-[feature].png
# Verify file size (should be <50KB for fast loading)
ls -la landing/images/landing-[feature].png
Phase 2: HTML Updates
Step 2.1: Add Feature Card
Location: Features grid in landing/index.html (~line 700)
<!-- Add after existing feature cards -->
<div class="feature-card">
<div class="feature-icon">[EMOJI]</div>
<h3>[Feature Name]</h3>
<p>[Short description - 1-2 sentences]</p>
</div>
Available emojis for consistency:
- 🧠 AI/Learning
- 🌍 Languages/Global
- 🎓 Education/Levels
- 📱 Mobile/Offline
- 🔒 Privacy/Security
- 🎉 Social/Party
- 🤖 AI Models/Tech
- ⚡ Performance
- 💰 Pricing/Value
Step 2.2: Update CTA Section
Location: CTA columns in landing/index.html (~line 822)
<div class="cta-column">
<h3>[Column Title]</h3>
<ul>
<li>[Benefit 1]</li>
<li>[Benefit 2]</li>
<li>[Benefit 3]</li>
<li>[Benefit 4]</li>
</ul>
<a href="[URL]" class="btn btn-secondary" data-track="[tracking_id]">[Button Text]</a>
</div>
Step 2.3: Add Screenshot to Gallery
Location: Screenshots grid in landing/index.html (~line 794)
<img src="images/landing-[feature].png"
alt="[Descriptive alt text]"
width="304" height="584"
loading="lazy">
Step 2.4: Update Structured Data
Location: JSON-LD in <head> (~line 52)
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Saberloop",
"description": "[Updated description including new feature]",
"featureList": [
"AI-powered quiz generation",
"[New feature description]",
"Multi-language support",
"Offline mode",
"Party Mode multiplayer"
]
}
Phase 3: Testing
Step 3.1: Local Preview
# Serve landing page locally
npx serve landing -p 8080
# Or use Python
cd landing && python -m http.server 8080
Step 3.2: Responsive Testing
Test at these breakpoints:
- Mobile: 375px (primary)
- Tablet: 768px
- Desktop: 1200px+
# Use Playwright for responsive screenshots
npx playwright test tests/e2e/capture-landing-responsive.spec.js
Phase 4: Deployment
Step 4.1: Deploy to Staging
# Build and deploy to staging first
npm run deploy:landing -- --staging
# Staging URL: https://saberloop.com/staging/ (if configured)
# Or test via: https://saberloop.com/app-staging/
Step 4.2: Verify Staging
Checklist:
- All images load correctly
- Feature cards display properly
- CTA buttons work
- Mobile layout is correct
- No console errors
- Tracking events fire (check GA)
Step 4.3: Deploy to Production
# Deploy landing page to production
npm run deploy:landing
# Production URL: https://saberloop.com/
Step 4.4: Post-Deploy Verification
# Clear CDN cache if needed (depends on hosting)
# Verify in incognito/private browsing
# Test on actual mobile device
Templates
Feature Card Template
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3>Feature Name</h3>
<p>Brief description of the feature benefit to users. Keep it to 1-2 sentences.</p>
</div>
Hero Button Template
<a href="/app/" class="btn btn-primary" data-track="[tracking_id]">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<!-- SVG path here -->
</svg>
Button Text
</a>
Screenshot Capture Script Template
import { test, expect } from '@playwright/test';
import { setupAuthenticatedState, clearSessions } from './helpers.js';
const MOBILE_VIEWPORT = { width: 375, height: 667 };
const SCREENSHOT_DIR = 'landing/images';
test.use({ viewport: MOBILE_VIEWPORT });
test.describe('Capture Screenshots for Landing Page', () => {
test.beforeEach(async ({ page }) => {
await setupAuthenticatedState(page);
await clearSessions(page);
await page.reload();
await page.waitForSelector('[data-testid="welcome-heading"]', { timeout: 10000 });
});
test('Screenshot 1: [Description]', async ({ page }) => {
await page.goto('/#/[route]');
await page.waitForTimeout(500);
// Setup UI state...
await page.screenshot({
path: `${SCREENSHOT_DIR}/landing-[name].png`,
fullPage: false
});
console.log('✓ Captured: [Description]');
});
});
CSS Reference
Feature Card Styles
.feature-card {
background: var(--background-light); /* #252542 */
padding: 32px;
border-radius: 20px;
text-align: center;
}
.feature-icon {
font-size: 3rem;
margin-bottom: 16px;
}
.feature-card h3 {
font-size: 1.25rem;
margin-bottom: 12px;
}
.feature-card p {
color: var(--text-muted); /* #a0a0b0 */
font-size: 0.95rem;
}
Button Styles
.btn {
padding: 16px 32px;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
}
.btn-primary {
background: var(--primary); /* #FF6B35 */
color: white;
}
.btn-secondary {
background: var(--background-light);
color: var(--text);
border: 2px solid var(--background-light);
}
Color Variables
:root {
--primary: #FF6B35;
--primary-dark: #e55a2b;
--background: #1a1a2e;
--background-light: #252542;
--text: #ffffff;
--text-muted: #a0a0b0;
}
Tracking Events
All clickable elements should have data-track attribute:
<a href="/app/" data-track="web_app_hero">Try in Browser</a>
Events are automatically tracked via the script at the bottom of the landing page:
document.addEventListener('click', function(e) {
const trackable = e.target.closest('[data-track]');
if (trackable && typeof gtag === 'function') {
gtag('event', trackable.dataset.track, {
'event_category': 'engagement',
'event_label': trackable.dataset.track
});
}
});
Image Specifications
| Type | Dimensions | Format | Max Size | Location |
|---|---|---|---|---|
| App Screenshot | 304x584 | PNG | 50KB | landing/images/ |
| Demo Video | 375x667 | WebM | 500KB | landing/images/ |
| Hero Video | 300x600 | WebM | 500KB | landing/images/ |
Deployment Commands
# Landing page only
npm run deploy:landing
# With staging flag (if configured)
npm run deploy:landing -- --staging
# Full app + landing
npm run deploy && npm run deploy:landing
Troubleshooting
Images Not Loading
- Check file path is correct (relative to landing/index.html)
- Verify file was uploaded (FTP deployment)
- Clear browser cache
- Check file permissions on server
Layout Issues
- Test at all breakpoints (375, 768, 1200)
- Check CSS grid/flexbox rules
- Verify image dimensions match expected
- Check for overflow issues
Tracking Not Working
- Verify
data-trackattribute exists - Check GA is loaded (no ad blockers)
- Verify gtag function is available
- Check browser console for errors
Integration with Other Skills
This skill integrates with:
- testing-suite-management - For E2E capture scripts
- cicd-pipeline-management - For deployment workflows
- documentation-generation - For marketing docs
References
Developer Guides
Existing Capture Scripts
tests/e2e/capture-landing-assets.spec.jstests/e2e/capture-playstore-screenshots.spec.jstests/e2e/capture-party-demo.spec.js
Previous Landing Updates
Version: 1.0.0 Last Updated: 2026-01-23 Compatible with: Saberloop v2.0.0+