Connexio Landing Page

Official, high-performance landing page for Connexio — the cross-platform project-based terminal manager for developers.

This repository contains the marketing site and download portal for Connexio. Built using React 19, Vite, and Tailwind CSS v4, the site features immersive animations and smooth scroll interactions.

---

🚀 Key Features

💻 Dynamic OS & Architecture Detection

• Automatically detects user's OS: Windows (.exe / .msi), macOS (.dmg / .zip), or Linux (.AppImage / .deb).
• Renders responsive, platform-specific download buttons instantly on Hero.tsx.

🔄 Interactive Feature Timeline

• Scroll-linked tab system using Framer Motion and GSAP.
• Pinning effects and interactive navigation in FeaturesScroll.tsx.

⚡ Performance & Polish

• Smooth inertia scrolling via Lenis.
• Modern CSS grid layout in TechGrid.tsx displaying app specs.

---

🛠️ Architecture & Tech Stack

Component	Technology	Description
Core Framework	React 19 + TypeScript	Type-safe UI components and modern React runtime.
Styles	Tailwind CSS v4	High-performance utilities and native CSS variables.
Animations	GSAP & Framer Motion	Timeline controls for scroll triggers & micro-interactions.
Scroll Engine	Lenis	Immersive scroll physics.
E2E Testing	Playwright	Automation test suite.

---

📂 Codebase Tour

• src/
  • App.tsx: Root layout with Lenis scroll provider.
  • components/
    • Header.tsx: Sticky floating navbar with navigation triggers.
    • Hero.tsx: Auto-detecting download portal.
    • FeaturesScroll.tsx: Interactive feature timeline.
    • TechGrid.tsx: Modular grid presenting specifications.
    • Footer.tsx: Footer component.
  • constants.ts: GitHub repository release paths and configurations.

---

⚙️ Development Guide

1. Prerequisites

• Node.js 18.x or higher
• npm 9.x or higher

2. Quick Setup

# Clone the repository
git clone https://github.com/yandanp/connexio-landing.git
cd connexio-landing

# Install local dependencies
npm install

# Launch local dev server (default http://localhost:5173)
npm run dev

3. Build & Test Commands

• Development Build: npm run dev (Hot reloading enabled).
• Production Build: npm run build (Typecheck via tsc + asset compilation via Vite).
• Preview Production: npm run preview (Serve local build files).
• Linter: npm run lint (ESLint checks).
• E2E Testing: npx playwright test (Runs automated Playwright UI tests).