New landing page design

Author: cheeaun

.gitignore

@@ -38,3 +38,6 @@ src/locales/*.js
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# Generated mock screenshots
+/mock-screenshots/

design/logo.af

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import https from 'https';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const posts = [
+  'https://mastodon.social/api/v1/statuses/115903453951785429',
+  'https://mastodon.social/api/v1/statuses/115887242651860407',
+  'https://mastodon.social/api/v1/statuses/115853890477340137',
+  'https://mastodon.social/api/v1/statuses/115854031046143927',
+];
+
+async function fetchJSON(url) {
+  return new Promise((resolve, reject) => {
+    https
+      .get(url, (res) => {
+        let data = '';
+        res.on('data', (chunk) => {
+          data += chunk;
+        });
+        res.on('end', () => {
+          try {
+            resolve(JSON.parse(data));
+          } catch (e) {
+            reject(e);
+          }
+        });
+      })
+      .on('error', reject);
+  });
+}
+
+async function main() {
+  const results = [];
+
+  for (const url of posts) {
+    console.log(`Fetching ${url}...`);
+    try {
+      const data = await fetchJSON(url);
+      results.push(data);
+    } catch (error) {
+      console.error(`Error fetching ${url}:`, error.message);
+    }
+  }
+
+  const outputPath = path.join(__dirname, '../src/data/mock-posts.json');
+  fs.writeFileSync(outputPath, JSON.stringify(results, null, 2));
+  console.log(`\nSaved ${results.length} posts to ${outputPath}`);
+}
+
+main().catch(console.error);

scripts/fetch-mock-posts.js

@@ -0,0 +1,118 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { chromium } from '@playwright/test';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const VIEWPORTS = [
+  { name: 'mobile', width: 375, height: 812 },
+  { name: 'tablet', width: 768, height: 1024 },
+];
+
+const COLOR_SCHEMES = ['light', 'dark'];
+
+const BASE_URL = process.env.BASE_URL || 'http://localhost:5173';
+const OUTPUT_DIR = path.join(__dirname, '../mock-screenshots');
+
+async function generateScreenshots() {
+  const browser = await chromium.launch();
+
+  try {
+    for (const colorScheme of COLOR_SCHEMES) {
+      for (const viewport of VIEWPORTS) {
+        console.log(
+          `Generating ${viewport.name} ${colorScheme} screenshot (${viewport.width}x${viewport.height})...`,
+        );
+
+        const context = await browser.newContext({
+          viewport: { width: viewport.width, height: viewport.height },
+          deviceScaleFactor: 2,
+          colorScheme,
+        });
+
+        const page = await context.newPage();
+
+        // Listen to console messages
+        page.on('console', (msg) => {
+          const type = msg.type();
+          if (type === 'error' || type === 'warning') {
+            console.log(` [Browser ${type}]:`, msg.text());
+          }
+        });
+
+        // Listen to page errors
+        page.on('pageerror', (error) => {
+          console.error('  [Browser error]:', error.message);
+        });
+
+        // Navigate to the mock home page
+        const url = `${BASE_URL}/#/_mock/home`;
+        console.log(`  Navigating to ${url}...`);
+        await page.goto(url, { waitUntil: 'load', timeout: 60000 });
+
+        // Wait for React app to mount
+        await page.waitForSelector('#app', { timeout: 10000 });
+        console.log('  ✓ App mounted');
+
+        // Wait for React to hydrate and route to render
+        await page.waitForTimeout(3000);
+
+        // Wait for the timeline to be rendered
+        try {
+          await page.waitForSelector('.timeline', { timeout: 30000 });
+          console.log('  ✓ Timeline found');
+        } catch (e) {
+          console.error('  ✗ Timeline not found.');
+          console.error('  Current URL:', page.url());
+          const bodyHTML = await page.evaluate(() => document.body.innerHTML);
+          console.error('  Body HTML:', bodyHTML.substring(0, 1000));
+          const errors = await page.evaluate(() => {
+            return window.__errors || [];
+          });
+          console.error('  JS Errors:', errors);
+          throw e;
+        }
+
+        // Wait for timeline items to be rendered
+        try {
+          await page.waitForSelector('.timeline-item', { timeout: 30000 });
+          console.log('  ✓ Timeline items found');
+        } catch (e) {
+          console.error('  ✗ Timeline items not found');
+          throw e;
+        }
+
+        // Wait for images and fonts to load
+        await page.waitForTimeout(3000);
+
+        const screenshotPath = path.join(
+          OUTPUT_DIR,
+          `mock-home-${viewport.name}-${colorScheme}@2x.png`,
+        );
+        await page.screenshot({
+          path: screenshotPath,
+          fullPage: true,
+        });
+
+        console.log(`  ✓ Screenshot saved: ${screenshotPath}`);
+        await context.close();
+      }
+    }
+
+    await browser.close();
+    console.log('\n✨ All screenshots generated successfully!');
+    console.log(
+      'Generated 4 screenshots: mobile & desktop in both light & dark modes',
+    );
+  } catch (error) {
+    await browser.close();
+    throw error;
+  }
+}
+
+generateScreenshots().catch((error) => {
+  console.error('Error generating screenshots:', error);
+  process.exit(1);
+});

scripts/generate-mock-screenshots.js

@@ -83,6 +83,9 @@ const Sandbox =
     ? lazy(() => import('./pages/sandbox'))
     : () => null;
 
+// Lazy load MockHome component only in development (not PHANPY_DEV)
+const MockHome = lazy(() => import('./pages/mock-home'));
+
 // Lazy load YearInPosts component
 const YearInPosts = lazy(() => import('./pages/year-in-posts'));
 
@@ -621,7 +624,7 @@ function Root({ isLoggedIn }) {
 }
 
 function isRootPath(pathname) {
-  return /^\/(login|welcome|_sandbox|_qr-scan)/i.test(pathname);
+  return /^\/(login|welcome|_sandbox|_qr-scan|_mock)/i.test(pathname);
 }
 
 const PrimaryRoutes = memo(({ isLoggedIn }) => {
@@ -636,6 +639,14 @@ const PrimaryRoutes = memo(({ isLoggedIn }) => {
       <Route path="/" element={<Root isLoggedIn={isLoggedIn} />} />
       <Route path="/login" element={<Login />} />
       <Route path="/welcome" element={<Welcome />} />
+      <Route
+        path="/_mock/home"
+        element={
+          <Suspense>
+            <MockHome />
+          </Suspense>
+        }
+      />
       {(import.meta.env.DEV || import.meta.env.PHANPY_DEV) && (
         <>
           <Route