Horus AI Intelligence Platform - Waitlist Landing Page

Project Overview

Purpose: Production-ready waitlist landing page for Horus by Ankh Studio - an AI governance platform designed to capture early interest and prove market demand for a $4M seed fundraise.

Target Audience: Enterprise decision-makers including Legal Partners, Consulting Partners, Financial Services Compliance Officers, and Developer Team Leads.

Success Metrics: Email signups, industry segment data, time-on-page, conversion rate, and user engagement tracking via Google Analytics 4.

Architecture

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Styling: Tailwind CSS with Shadcn UI components
• Animations: Framer Motion for smooth, professional animations
• Forms: React Hook Form with Zod validation
• Backend: Express.js with TypeScript
• Database: PostgreSQL (Neon) via Drizzle ORM
• Analytics: Google Analytics 4 for user interaction tracking
• State Management: TanStack Query (React Query v5)

Design System

• Typography: Space Grotesk (headings), Inter (body)
• Primary Color: Deep Blue (#1E3A8A) - representing wisdom/intelligence
• Accent Color: Gold (#F59E0B) - Egyptian theme
• Visual Style: Modern, clean, enterprise-grade with Egyptian-inspired geometric patterns
• Dark Mode: Primary design mode with automatic color adjustments

Features Implemented

1. Hero Section

• Full-screen hero with Egyptian-inspired animated geometric patterns
• Headline: "AI Governance for Every Industry"
• Subheadline with value proposition
• SVG-based background patterns with subtle animations
• Gradient overlays with floating orbs

2. Waitlist Form

• Two variants:
  • Compact inline form (hero section): email + industry + CTA
  • Full form: email, full name, company, industry, team size, role
• Validation: Zod schema with real-time error messages
• Security:
  • Honeypot field for bot protection
  • Rate limiting (3 submissions per IP per hour)
  • Email uniqueness validation
• UX Features:
  • Success state with animated checkmark
  • Loading states with spinner
  • Error handling with clear messages
  • Google Analytics event tracking for all interactions

3. Problem/Solution Section

• Three-column layout showcasing pain points by vertical:
  • Legal: Partner oversight of AI usage
  • Consulting: AI methodology standardization
  • Financial Services: Compliance auditing
• Solution statement explaining Horus value proposition
• Animated fade-in on scroll using Framer Motion

4. Platform Capabilities

• Four feature cards in responsive grid:
  • Chat Log Analytics
  • Template Extraction
  • Context Studio
  • Enterprise Analytics
• Lucide React icons with hover effects
• Card lift animations on hover

5. Social Proof Section

• Dynamic signup counter fetching live count from API
• Industry breakdown visualization
• Animated counter with Framer Motion
• Placeholder for testimonials (to be populated post-launch)

6. Founder/Team Section

• "Disabled Veteran-Owned Business" badge (prominent display)
• Team introduction and mission statement
• LinkedIn and email contact buttons
• Egyptian-themed decorative elements

7. FAQ Section

• Accordion-style expandable questions
• Four key questions answered:
  • Launch timeline (Q2 2026)
  • Pricing ($149-199/user/month)
  • Platform support (ChatGPT, Claude, Gemini, custom LLMs)
  • Security (SOC 2 Type II, ISO 27001 in progress)
• Smooth expand/collapse animations
• Gold accent on active items

8. Footer

• Three-column layout (company info, legal, contact)
• Privacy Policy and Terms of Service links (placeholder pages)
• Social media (LinkedIn)
• Contact information: brandon@ankhstudio.com, (321) 467-0134
• Copyright with DVOB designation

Database Schema

waitlist_signups Table

• id (varchar, UUID primary key)
• email (varchar, unique, required)
• fullName (varchar, required)
• company (varchar, required)
• industry (varchar, required)
• teamSize (varchar, required)
• role (varchar, optional)
• source (varchar) - UTM tracking
• ipAddress (varchar) - IP capture for rate limiting
• createdAt (timestamp)
• confirmed (boolean, default false)
• confirmationToken (varchar) - for email verification

API Endpoints

POST /api/waitlist/signup

• Create new waitlist signup
• Validation using Zod schema
• Rate limiting: 3 requests/hour per IP
• Checks for duplicate emails
• Captures IP address and UTM source
• Returns success with signup ID

GET /api/waitlist/count

• Returns total signup count
• Used by social proof section for dynamic counter
• Public endpoint (no auth required)

GET /api/waitlist/stats

• Returns comprehensive stats:
  • Total signups
  • Confirmed signups
  • Breakdown by industry
• For admin dashboard (future enhancement)

POST /api/waitlist/confirm

• Email confirmation endpoint
• Validates confirmation token
• Updates signup confirmed status
• Returns success/error message

Google Analytics 4 Integration

Events Tracked

1. Page Views: Automatic tracking on route changes
2. Email Field Focus: When user focuses email input
3. Industry Selection: Which industry user selects
4. Form Submission Attempt: When user clicks submit
5. Form Submission Success: Successful signup completion
6. Form Submission Error: Failed submissions with error details
7. Bot Detection: Honeypot field triggers

Setup

• Measurement ID stored in VITE_GA_MEASUREMENT_ID environment variable
• Automatic initialization in App.tsx
• Custom event tracking throughout form interactions
• Page view tracking via useAnalytics hook

Responsive Design

Breakpoints

• Mobile: < 640px
• Tablet: 640-1024px
• Desktop: > 1024px

Mobile Optimizations

• Stacked form layouts
• Touch-friendly 44px min height buttons
• Single-column grids
• Optimized text sizes
• Hamburger menu (if navigation added)

Performance Optimizations

1. Animations:

   • CSS transforms (translate, scale) over position changes
   • Framer Motion viewport detection (once: true)
   • Lazy loading for below-fold content

2. Forms:

   • React Hook Form for minimal re-renders
   • Zod validation for type-safe error handling
   • Optimistic UI updates

3. API:

   • TanStack Query caching
   • Debounced rate limiting
   • Efficient database queries with indexes

Security Features

1. Honeypot Protection: Hidden field to catch bots
2. Rate Limiting: 3 submissions per IP per hour
3. Email Validation: Server-side Zod validation
4. SQL Injection Prevention: Drizzle ORM parameterized queries
5. CORS Configuration: Proper origin validation

Environment Variables Required

• DATABASE_URL - PostgreSQL connection string (auto-provided by Replit)
• VITE_GA_MEASUREMENT_ID - Google Analytics 4 Measurement ID
• SESSION_SECRET - Session encryption key (auto-provided by Replit)

Future Enhancements (Next Phase)

1. Email Confirmation System:

   • Resend integration for transactional emails
   • Welcome email with confirmation link
   • Double opt-in flow

2. Admin Dashboard:

   • Password-protected /admin route
   • Total signup metrics
   • Industry breakdown pie chart
   • Signup trend visualization (Chart.js/Recharts)
   • CSV export functionality
   • Daily/weekly signup rates
   • Conversion funnel analysis

3. Advanced Analytics:

   • Meta Pixel integration for Facebook ads
   • Scroll depth tracking
   • CTA click heatmaps
   • A/B testing framework

4. CRM Integration:

   • HubSpot/Salesforce sync
   • Automated lead nurturing
   • Sales handoff workflows

Development Workflow

1. Start Development Server:

   npm run dev

2. Database Migrations:

   npm run db:push

3. Access Application:

   • Frontend & Backend served on same port via Vite proxy
   • Hot module reloading enabled

Project Structure

client/
├── src/
│   ├── components/
│   │   ├── ui/ (Shadcn components)
│   │   ├── hero-section.tsx
│   │   ├── waitlist-form.tsx
│   │   ├── problem-solution-section.tsx
│   │   ├── platform-capabilities-section.tsx
│   │   ├── social-proof-section.tsx
│   │   ├── team-section.tsx
│   │   ├── faq-section.tsx
│   │   └── footer.tsx
│   ├── pages/
│   │   ├── home.tsx
│   │   └── not-found.tsx
│   ├── lib/
│   │   ├── analytics.ts (Google Analytics utilities)
│   │   └── queryClient.ts (TanStack Query setup)
│   ├── hooks/
│   │   └── use-analytics.tsx (Page view tracking)
│   ├── App.tsx
│   └── index.css
├── index.html
└── env.d.ts

server/
├── db.ts (Drizzle database connection)
├── storage.ts (Database storage layer)
├── routes.ts (API endpoints)
└── index.ts

shared/
└── schema.ts (Drizzle schemas + Zod validation)

Design Guidelines

All frontend components follow the design_guidelines.md file which specifies:

• Color palette with deep blue and gold Egyptian theme
• Typography scale using Space Grotesk and Inter fonts
• Spacing primitives and layout systems
• Component-specific design patterns
• Animation and interaction guidelines
• Accessibility standards (WCAG AAA)
• Dark mode implementation
• Responsive breakpoints

Contact Information

Email: brandon@ankhstudio.com
Phone: (321) 467-0134
LinkedIn: https://www.linkedin.com/company/ankh-studio

Notes

• This is a production-ready MVP waitlist landing page
• Email sending integration (Resend) planned for next phase
• All core functionality is implemented and tested
• Forms validate both client-side and server-side
• Rate limiting prevents abuse
• Analytics track all user interactions
• Responsive design works across all devices
• Dark mode is the primary design aesthetic