Termopus Landing Page

Product website with animated demos and subscription flow

---

Overview

The Termopus landing page at termopus.com is built with Next.js and features Remotion-powered animations, an interactive security visualization, and integrated Paddle subscription checkout.

Pages

Route	Purpose
/	Homepage — Hero, Features, Security, Architecture, How It Works, FAQ
/subscribe	Subscription — Paddle.js inline checkout, monthly/yearly toggle
/restore	Device Restore — email verification for transferring subscriptions

Sections

Hero

• Animated Remotion logo video (WebM + MP4 fallback)
• Phone mockup with live app screenshot
• Floating animation with scroll indicator

Features

• 6 feature cards with gradient backgrounds and custom icons
• Skew card showcase with parallax hover effects

Security

• Interactive 7-layer security tower visualization
• Each layer expandable with detailed explanation

Architecture

• Animated data flow diagram
• Phone → Relay → Bridge → Claude Code pipeline

How It Works

• 3-step onboarding flow
• Install → Scan → Build

FAQ

• Accordion-style Q&A
• Common questions about security, privacy, compatibility

Tech Stack

Technology	Purpose
Next.js 14	Framework (App Router)
Remotion	Video animations (logo, demos)
Tailwind CSS	Styling
shadcn/ui	UI components
Framer Motion	Page transitions and micro-animations
Paddle.js	Subscription checkout

Animations & Effects

• Background Paths — Animated SVG paths flowing across sections
• Gradient Mesh — Dynamic gradient background on hero
• Skew Cards — 3D card tilt effect on feature showcase
• Stacking Cards — Scroll-triggered card stacking
• Spotlight Cards — Mouse-follow spotlight effect
• Marquee — Auto-scrolling testimonials
• AnimateIn — Intersection observer fade-in transitions

---

termopus.com