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-track attribute 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.js
tests/e2e/capture-playstore-screenshots.spec.js
tests/e2e/capture-party-demo.spec.js

Previous Landing Updates

Version: 1.0.0 Last Updated: 2026-01-23 Compatible with: Saberloop v2.0.0+