feat: update TODO checklist, enhance download section with SHA256 checksums, and add new features to documentation

Author: ralyodio

TODO.md

@@ -29,14 +29,14 @@
   - [x] Hero section with value proposition
   - [x] Feature highlights
   - [x] How it works (3-step flow)
-  - [ ] Social proof / testimonials placeholder
+  - [x] Social proof / testimonials placeholder
   - [x] CTA buttons (Download, Try Now)
 
 - [x] **Features Page**
   - [x] Screen sharing capabilities
   - [x] Remote control features
-  - [ ] Screen recording (local)
-  - [ ] Text chat integration
+  - [x] Screen recording (local)
+  - [x] Text chat integration
   - [x] Security highlights
 
 - [x] **Download Page**
@@ -45,7 +45,7 @@
   - [x] Windows: WinGet command
   - [x] Linux: apt/dnf/AUR commands
   - [x] Direct download links (GitHub Releases)
-  - [ ] SHA256 checksums display
+  - [x] SHA256 checksums display
 
 - [x] **Pricing Page** (placeholder)
   - [x] Free tier details
@@ -173,6 +173,7 @@
 ### Session Management
 - [ ] **Host Controls**
   - [ ] Start new session
+  - [ ] P2P vs SFU mode selection at session start
   - [ ] Generate shareable link
   - [ ] Copy link to clipboard
   - [ ] View participant list
@@ -280,6 +281,12 @@
   - [ ] APT repository
   - [ ] AUR PKGBUILD
 
+- [ ] **Shell Installers**
+  - [ ] Unix installer script (install.sh)
+  - [ ] Windows installer script (install.ps1)
+  - [ ] Host at install.pairux.sh
+  - [ ] Cloudflare Workers routing
+
 - [ ] **Release Automation**
   - [ ] GitHub Releases
   - [ ] Changelog generation

apps/web/src/app/download/download-section.tsx

@@ -10,11 +10,22 @@ import {
   Copy,
   Check,
   ExternalLink,
+  ChevronDown,
+  Shield,
 } from 'lucide-react';
 import { detectOS, type OS, type Arch } from '@/lib/utils';
 
 const VERSION = '0.1.0';
 
+// Placeholder checksums - will be generated during release build
+const CHECKSUMS: Record<string, string> = {
+  [`PairUX-${VERSION}-arm64.dmg`]: 'sha256-placeholder-arm64-dmg',
+  [`PairUX-${VERSION}-x64.dmg`]: 'sha256-placeholder-x64-dmg',
+  [`PairUX-${VERSION}-arm64.msi`]: 'sha256-placeholder-arm64-msi',
+  [`PairUX-${VERSION}-x64.msi`]: 'sha256-placeholder-x64-msi',
+  [`PairUX-${VERSION}-x86_64.AppImage`]: 'sha256-placeholder-appimage',
+};
+
 interface DownloadOption {
   command?: string;
   directUrl?: string;
@@ -147,6 +158,7 @@ function getPlatformInfo(os: OS, arch: Arch): PlatformInfo {
 
 export function DownloadSection() {
   const [detected, setDetected] = useState<{ os: OS; arch: Arch } | null>(null);
+  const [showChecksums, setShowChecksums] = useState(false);
 
   useEffect(() => {
     setDetected(detectOS());
@@ -379,6 +391,54 @@ export function DownloadSection() {
             <ExternalLink className="h-4 w-4" />
           </Link>
         </div>
+
+        {/* SHA256 Checksums */}
+        <div className="mt-12 border-t border-gray-200 pt-8">
+          <button
+            onClick={() => { setShowChecksums(!showChecksums); }}
+            className="mx-auto flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
+          >
+            <Shield className="h-4 w-4" />
+            <span>Verify downloads (SHA256 checksums)</span>
+            <ChevronDown className={`h-4 w-4 transition-transform ${showChecksums ? 'rotate-180' : ''}`} />
+          </button>
+
+          {showChecksums && (
+            <div className="mt-6 mx-auto max-w-2xl">
+              <p className="mb-4 text-center text-sm text-gray-600">
+                Verify your download by comparing the SHA256 checksum.
+              </p>
+              <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-gray-200">
+                      <th className="pb-2 text-left font-medium text-gray-700">File</th>
+                      <th className="pb-2 text-left font-medium text-gray-700">SHA256</th>
+                    </tr>
+                  </thead>
+                  <tbody className="font-mono text-xs">
+                    {Object.entries(CHECKSUMS).map(([filename, hash]) => (
+                      <tr key={filename} className="border-b border-gray-100 last:border-0">
+                        <td className="py-2 pr-4 text-gray-700">{filename}</td>
+                        <td className="py-2">
+                          <div className="flex items-center gap-2">
+                            <code className="text-gray-500 truncate max-w-[200px] sm:max-w-none">
+                              {hash}
+                            </code>
+                            <CopyButton text={hash} />
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <p className="mt-4 text-center text-xs text-gray-500">
+                Checksums will be available after the first release.
+              </p>
+            </div>
+          )}
+        </div>
       </div>
     </section>
   );

apps/web/src/app/features/page.tsx

@@ -15,6 +15,8 @@ import {
   Pointer,
   Shield,
   Check,
+  MessageSquare,
+  CircleDot,
 } from 'lucide-react';
 import { Header } from '@/components/header';
 import { Footer } from '@/components/footer';
@@ -98,6 +100,32 @@ const mainFeatures = [
       'Direct download available',
     ],
   },
+  {
+    icon: CircleDot,
+    title: 'Screen Recording',
+    description:
+      'Record your sessions locally for later review. Perfect for tutorials, documentation, and keeping a record of pair programming sessions.',
+    details: [
+      'Record to WebM/MP4 locally',
+      'System audio + microphone capture',
+      'Quality presets (720p/1080p/4K)',
+      'Pause/resume recording',
+    ],
+    comingSoon: true,
+  },
+  {
+    icon: MessageSquare,
+    title: 'Text Chat',
+    description:
+      'Built-in text chat for when you need to share links, code snippets, or communicate without voice.',
+    details: [
+      'Real-time messaging',
+      'System notifications (join/leave)',
+      'Works alongside screen sharing',
+      'Message history per session',
+    ],
+    comingSoon: true,
+  },
 ];
 
 const technicalFeatures = [
@@ -137,6 +165,8 @@ const comparisonFeatures = [
   { feature: 'Screen sharing', pairux: true, others: true },
   { feature: 'Remote control', pairux: true, others: true },
   { feature: 'Simultaneous control', pairux: true, others: false },
+  { feature: 'Screen recording (local)', pairux: 'soon', others: 'partial' },
+  { feature: 'Text chat', pairux: 'soon', others: true },
   { feature: 'No account for viewers', pairux: true, others: false },
   { feature: 'Open source', pairux: true, others: false },
   { feature: 'Self-hostable', pairux: true, others: false },
@@ -179,8 +209,15 @@ export default function FeaturesPage() {
                   }`}
                 >
                   <div className={index % 2 === 1 ? 'lg:order-2' : ''}>
-                    <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary-100 text-primary-600">
-                      <feature.icon className="h-7 w-7" />
+                    <div className="flex items-center gap-4">
+                      <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary-100 text-primary-600">
+                        <feature.icon className="h-7 w-7" />
+                      </div>
+                      {'comingSoon' in feature && feature.comingSoon && (
+                        <span className="rounded-full bg-accent-100 px-3 py-1 text-xs font-medium text-accent-700">
+                          Coming Soon
+                        </span>
+                      )}
                     </div>
                     <h2 className="mt-6 text-3xl font-bold text-gray-900">
                       {feature.title}

apps/web/src/app/page.tsx

@@ -10,6 +10,7 @@ import {
   Zap,
   Shield,
   RefreshCw,
+  Quote,
 } from 'lucide-react';
 import { Header } from '@/components/header';
 import { Footer } from '@/components/footer';
@@ -200,8 +201,65 @@ export default function HomePage() {
           </div>
         </section>
 
-        {/* Security Section */}
+        {/* Social Proof / Testimonials */}
         <section className="bg-white py-20 sm:py-28">
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div className="text-center">
+              <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                Loved by developers
+              </h2>
+              <p className="mx-auto mt-4 max-w-2xl text-lg text-gray-600">
+                See what others are saying about PairUX.
+              </p>
+            </div>
+
+            <div className="mt-16 grid gap-8 md:grid-cols-3">
+              {/* Testimonial placeholders */}
+              {[
+                {
+                  quote: 'Finally, a Screenhero replacement that actually works. The simultaneous control feature is game-changing for pair programming.',
+                  author: 'Coming Soon',
+                  role: 'Software Engineer',
+                },
+                {
+                  quote: 'The fact that viewers can join from any browser without installing anything makes this perfect for quick collaboration sessions.',
+                  author: 'Coming Soon',
+                  role: 'Tech Lead',
+                },
+                {
+                  quote: 'Open source, end-to-end encrypted, and it just works. This is exactly what the developer community needed.',
+                  author: 'Coming Soon',
+                  role: 'Open Source Contributor',
+                },
+              ].map((testimonial, index) => (
+                <div
+                  key={index}
+                  className="relative rounded-2xl border border-gray-200 bg-gray-50 p-8"
+                >
+                  <Quote className="absolute top-6 right-6 h-8 w-8 text-primary-200" />
+                  <p className="text-gray-700 italic">&ldquo;{testimonial.quote}&rdquo;</p>
+                  <div className="mt-6 flex items-center gap-3">
+                    <div className="h-10 w-10 rounded-full bg-primary-200" />
+                    <div>
+                      <p className="font-semibold text-gray-900">{testimonial.author}</p>
+                      <p className="text-sm text-gray-500">{testimonial.role}</p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <p className="mt-8 text-center text-sm text-gray-500">
+              Want to share your experience?{' '}
+              <Link href="https://github.com/pairux/pairux/discussions" target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:underline">
+                Join the discussion on GitHub
+              </Link>
+            </p>
+          </div>
+        </section>
+
+        {/* Security Section */}
+        <section className="bg-gray-50 py-20 sm:py-28">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="grid items-center gap-12 lg:grid-cols-2">
               <div>