Refactor Landing Page with Auto-Auth Flow (v2.0.0-alpha-3)

[Che-Zhu]

Refactor Landing Page with Auto-Auth Flow (v2.0.0-alpha-3)

Overview

Complete overhaul of the marketing landing page, transitioning from a centered card layout to a professional dual-pane enterprise design. Implemented automatic Sealos authentication flow that triggers on page load, eliminating manual user intervention.

Key Changes

🎨 Visual Design Overhaul

• New Layout: Full-screen dual-pane layout replacing centered card design
  • Left pane: Hero section with gradient headings, CTA buttons, and feature badges
  • Right pane: Animated terminal demo showcasing AI-powered project creation
• Fixed Header: Glassmorphism effect with logo, navigation, GitHub stars, and auth button
• Enhanced Aesthetics: Gradient glows, grid backgrounds, fade-in animations

🔐 Authentication Flow Refactor

Previous Flow (User-initiated):

• User clicks "Get Started" → Full-screen loading overlay → Sealos auth → Auto-redirect

New Flow (Auto-triggered):

• Page loads → Detect Sealos environment via ancestorOrigins → Auto-authenticate → Button shows loading → Success → User clicks "Go to Projects"

Key Improvements:

• ✅ Auto-trigger authentication on page load in Sealos environments
• ✅ No auto-redirect after auth success (user control)
• ✅ Simplified environment detection using ancestorOrigins[0]
• ✅ Button-only loading state (removed full-screen overlay)
• ✅ Dynamic button text: "Go to Projects" (Sealos/authenticated) vs "Start Building Now" (standard)

🏗️ Architecture Improvements

Route Group Pattern:

app/(landing)/           # Route group (doesn't affect URL)
├── _components/         # Private components
│   ├── hero-section.tsx
│   ├── landing-client.tsx
│   ├── landing-header.tsx
│   └── terminal-demo.tsx
└── page.tsx            # Server Component with ISR

Server/Client Separation:

• page.tsx: Server Component - Fetches GitHub stars via ISR (1-hour cache)
• landing-client.tsx: Client Component - All interactive logic and state management

🚀 Performance Optimizations

1. Server-Side GitHub Stars: Fetch with ISR caching (revalidate: 3600)
2. Static JSX Hoisting: Features section moved outside component to avoid re-creation
3. High-Level First Structure: Main component at top, helpers at bottom

Files Changed

Modified

• app/(landing)/_components/hero-section.tsx - Dynamic button text, static JSX optimization
• app/(landing)/_components/landing-client.tsx - Auto-auth logic, state management
• app/(landing)/_components/landing-header.tsx - Server-fetched star count, dynamic button text
• provider/sealos.tsx - Simplified environment detection with ancestorOrigins
• app/globals.css - Added cursor blink animation, reduced motion support
• app/page.tsx - Removed (replaced by landing page improvements)
• package.json - Version bump

Added

• app/(landing)/page.tsx - Server Component with ISR
• app/(landing)/_components/terminal-demo.tsx - Interactive terminal showcase

Technical Highlights

Sealos Environment Detection

function isSealosIframe(): boolean {
  if (typeof window === 'undefined') return false;
  
  try {
    const ancestorOrigin = window.location.ancestorOrigins?.[0];
    if (!ancestorOrigin) return false;
    
    return ancestorOrigin.includes('sealos.io') || ancestorOrigin.includes('sealos.run');
  } catch {
    return false;
  }
}

Auto-Authentication Logic

useEffect(() => {
  if (!isInitialized || isLoading) return;
  if (status === 'authenticated') return;
  if (!isSealos) return;
  if (hasAttemptedAuth.current) return;
  
  hasAttemptedAuth.current = true;
  setIsAuthenticating(true);
  
  authenticateWithSealos(sealosToken, sealosKubeconfig)
    .then((result) => {
      if (result.success) {
        setIsAuthenticating(false);
        router.refresh(); // Refresh session, don't redirect
      } else {
        setAuthError(result.error);
        setIsAuthenticating(false);
        hasAttemptedAuth.current = false; // Allow retry
      }
    });
}, [isInitialized, isLoading, status, isSealos, sealosToken, sealosKubeconfig, router]);

Server-Side Star Count with ISR

async function getStarCount(): Promise<number | null> {
  try {
    const res = await fetch('https://api.github.com/repos/FullAgent/fulling', {
      next: { revalidate: 3600 }, // ISR: revalidate every hour
    });
    // ...
  } catch {
    return null;
  }
}

Testing Scenarios

✅ Scenario 1: Sealos Environment (Unauthenticated)

• Page displays immediately, button shows loading
• Auto-triggers authentication
• On success, button text changes to "Go to Projects"
• No auto-redirect

✅ Scenario 2: Sealos Environment (Authenticated)

• Button text: "Go to Projects"
• No authentication triggered
• Click navigates to /projects

✅ Scenario 3: Standard Environment (Unauthenticated)

• Button text: "Start Building Now" / "Sign In"
• No auto-authentication
• Click navigates to /login

✅ Scenario 4: Standard Environment (Authenticated)

• Button text: "Go to Projects"
• Click navigates to /projects

✅ Scenario 5: Error Handling

• Error message displayed
• Retry button resets auth attempt

Design System Compliance

All components strictly follow docs/design-system.md:

• Semantic color tokens (text-foreground, bg-background, border-border)
• Custom font variables (font-[family-name:var(--font-heading)])
• Consistent spacing and sizing
• Accessibility attributes (role, aria-*)

Code Quality

• React Best Practices: Static JSX hoisting, proper hook dependencies
• High-Level First: Main exports at top, helpers at bottom
• Type Safety: Full TypeScript coverage
• Accessibility: ARIA labels, semantic HTML, reduced motion support

Breaking Changes

None. The landing page is completely redesigned but maintains backward compatibility with existing auth flows.

Next Steps

• Consider adding analytics tracking for auto-auth conversion rate
• Potential follow-up: Optimize react-icons imports in Next.js config
• Clean up unused components/home-page.tsx and MatrixRain.tsx

Screenshots

Note: Add screenshots showing:

• Full desktop dual-pane layout
• Mobile responsive view
• Terminal demo animation
• Loading states
• Error states

---

Commits:

• 45b4d79 - refactor(landing): improve auth flow and optimize rendering
• 87ad21a - chore: update project version
• 9707770 - feat: add server-side star count & interactive landing client
• 2808a9f - refactor: rebuild landing page with route group and component architecture

Stats: 9 files changed, 578 insertions(+), 17 deletions(-)

[github-actions]

✅ PR Check Results: Passed

Build Checks

Check	Status
Lint & Build	✅ Passed
Docker Build	✅ Passed

✨ Great work!

All checks passed successfully. Your PR is ready for review.

Details:

• ✅ Code quality verified (linting passed)
• ✅ Build successful
• ✅ Docker image build verified (linux/amd64)
  Commit: eac1dd18d9d60b2aaddf73756214c11dd4164a40
  Branch: feat/landing-page-v2

🔗 View Details:

• Lint & Build
• Docker Build