AMCP Landing Page - Visual Design Guide
AMCP Landing Page - Visual Design Guide
Page Layout Overview
┌─────────────────────────────────────────────────────────────┐
│ PROMO BANNER │
│ 🚀 AMCP v1.6 Released │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ HERO SECTION │
│ Agent Mesh Communication Protocol │
│ Enterprise grade multi-agent communication framework │
│ │
│ [Get Started] [View on GitHub] │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ FEATURED VIDEO SECTION ⭐ NEW │
│ │
│ 🎬 FEATURED VIDEO │
│ AMCP: The Agent Superhighway │
│ See AMCP v1.6 in action - Multi-agent communication... │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ │ │
│ │ VIDEO PLAYER (2:30) │ │
│ │ [Play Button on Hover] │ │
│ │ │ │
│ └──────────────────────────────────────┘ │
│ │
│ Duration: 2:30 │ Topics: Agent Mesh... │ Format: MP4 │
│ │
│ [📥 Download Video] [View More Videos] │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ VIDEO RESOURCES SECTION │
│ │
│ [Video Description] [Video Player] │
│ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ AMCP CORE CONCEPTS ⭐ NEW │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 💬 Chat │ │ 🎼 Orch. │ │ 🕸️ Mesh │ │
│ │ Agent │ │ Agent │ │ Agent │ │
│ │ │ │ │ │ │ │
│ │ Natural │ │ Workflow │ │ Distributed │ │
│ │ Language │ │ Management │ │ Event-Driven │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ PROTOCOL SUPPORT & INTEROPERABILITY ⭐ NEW │
│ │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ 🔌 MCP │ │ 🔄 A2A │ │
│ │ Model Context │ │ Agent-to-Agent │ │
│ │ Protocol │ │ Communication │ │
│ │ │ │ │ │
│ │ ✓ MCP Client/Server │ │ ✓ Peer-to-Peer │ │
│ │ ✓ Tool Integration │ │ ✓ Service Discovery │ │
│ │ ✓ Resource Mgmt │ │ ✓ Decentralized │ │
│ └──────────────────────┘ └──────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ AMCP v1.6 MAJOR FEATURES ⭐ NEW │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 🚀 Mobility │ │ ☁️ CloudEv. │ │ 🔐 Security │ │
│ │ 70-80% code │ │ v1.0 comply │ │ mTLS, RBAC │ │
│ │ reduction │ │ Event route │ │ Vault integ. │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ ⚡ LLM Orch. │ │ 🔄 Mesh │ │ 👨💻 DevEx │ │
│ │ 95% faster │ │ Dynamic disc. │ │ CLI v2 │ │
│ │ 60% memory ↓ │ │ Load balance │ │ Visual des. │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ WHY CHOOSE AMCP │
│ │
│ [6 Feature Cards with Icons and Descriptions] │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ ENTERPRISE DEPLOYMENT ARCHITECTURE ⭐ NEW │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 📚 Microserv.│ │ 💫 Kafka │ │ ☸️ Kubernetes│ │
│ │ Independent │ │ Event stream │ │ Orchestrate │ │
│ │ scaling │ │ Persistence │ │ Auto-scale │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────┐ │
│ │ ⚡ Quarkus │ │
│ │ Lightweight │ │
│ │ Fast startup │ │
│ └──────────────┘ │
│ │
│ ✓ Horizontal scaling ✓ Event-driven │
│ ✓ Resilient comm. ✓ Observability │
│ ✓ Multi-cloud ✓ Zero-downtime │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ IMPLEMENTATION PATHS ⭐ NEW │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 🚀 PoC │ │ 🌟 MVP │ │ 🎆 Full │ │
│ │ FASTEST │ │ RECOMMENDED │ │ COMPLETE │ │
│ │ 4 Weeks │ │ 8 Weeks │ │ 19 Weeks │ │
│ │ │ │ │ │ │ │
│ │ 1. Found. │ │ 1. Found.& │ │ 1. All │ │
│ │ 2. Core │ │ Core │ │ Phases │ │
│ │ 3. Quarkus │ │ 2. Example │ │ 2. Testing │ │
│ │ │ │ 3. Testing │ │ 3. Deploy │ │
│ │ [Start PoC] │ │ [Start MVP] │ │ [Roadmap] │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ QUICK START │
│ │
│ 1. Download AMCP → 2. Build & Run → 3. Activate │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ STATS │
│ │
│ 23 Unit Tests │ 100% Pass Rate │ 4 Agents │ v1.5 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ REAL-WORLD USE CASES │
│ │
│ 💬 Conversational AI 🧠 Workflow Orch. 💫 Integration │
│ 📚 Data Pipelines 🔍 Monitoring 📎 Collaboration│
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ MEDIA & RESOURCES │
│ │
│ 🎬 Video │ 🎙️ Audio │ 📰 Blog │ 📚 Docs │ 💻 Examples│
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ JOIN COMMUNITY │
│ │
│ ⭐ Star │ 🍴 Fork │ 🐛 Issues │ 💬 Discussions │
└─────────────────────────────────────────────────────────────┘
Color Palette
Primary Colors
- Dark Navy: #1a1a2e (Featured video background)
- Dark Blue: #16213e (Featured video gradient)
- Primary Blue: #2196F3 (Buttons, accents)
- Primary Green: #4CAF50 (Success, highlights)
- Primary Orange: #FF9800 (Deployment, v1.6)
Accent Colors
- Light Blue: #e3f2fd (Feature tags)
- Light Orange: #fff3e0 (v1.6 highlights)
- Light Green: #e8f5e8 (Deployment background)
- Light Gray: #f8f9fa (Section backgrounds)
Text Colors
- Dark Text: #333 (Headings)
- Gray Text: #666 (Body text)
- Light Text: #ccc (Terminal text)
- White Text: #fff (On dark backgrounds)
Typography
Headings
- H1 (Hero): 3.5rem, bold, gradient text
- H2 (Section): 2.5rem, bold, dark color
- H3 (Cards): 1.3-1.4rem, semi-bold, dark color
Body Text
- Subtitle: 1.2-1.3rem, light opacity
- Body: 0.95-1rem, medium opacity
- Small: 0.85-0.9rem, light opacity
Special
- Monospace: Monaco, Menlo (code blocks)
- Terminal: Green (#4CAF50) on dark background
Component Styles
Cards
- Background: White with subtle shadow
- Border: Colored top/left/bottom border (4-5px)
- Padding: 30-40px
- Border Radius: 12px
- Hover: Elevation effect (translateY -8px)
- Shadow: 0 5px 15px rgba(0,0,0,0.1)
Buttons
- Primary: Green background, white text
- Outline: Transparent, blue border
- Download: Orange background
- Small: 6px 14px padding
- Large: 14px 35px padding
- Hover: Slight elevation, color shift
Tags/Badges
- Feature Tag: Light blue background, blue text, 6px 12px padding
- Tech Tag: Light orange background, orange text, 5px 10px padding
- Path Badge: Gradient background, white text, positioned absolutely
Video Player
- Width: 100% responsive
- Border Radius: 12-16px
- Shadow: 0 20px 60px rgba(0,0,0,0.4)
- Animation: Slide-up on load (0.8s ease-out)
Responsive Breakpoints
Desktop (1200px+)
- Full-width sections
- Multi-column grids (3-6 columns)
- Large typography
- Hover effects active
- Full animations
Tablet (768px - 1199px)
- Adjusted grid columns (2-3)
- Slightly reduced typography
- Optimized spacing
- Touch-friendly buttons
Mobile (< 768px)
- Single-column layouts
- Stacked buttons (vertical)
- Reduced typography (2rem for H2, 1rem for subtitle)
- Simplified animations
- Touch-optimized spacing
- Badges repositioned
Animation Effects
Slide-Up
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Duration: 0.8s ease-out
Hover Elevation
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
transition: all 0.3s ease;
Fade-In
opacity: 0 → 1;
transition: opacity 0.3s ease;
Glassmorphism Effects
Featured Video Badge
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
Video Info Cards
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 12px;
Accessibility Features
Color Contrast
- ✅ WCAG AA compliant
- ✅ Text on backgrounds meets 4.5:1 ratio
- ✅ Buttons clearly distinguishable
Interactive Elements
- ✅ Keyboard navigable
- ✅ Focus indicators visible
- ✅ Touch-friendly sizes (44px minimum)
Media
- ✅ Video controls accessible
- ✅ Fallback text for unsupported browsers
- ✅ Semantic HTML structure
Performance Optimizations
CSS
- GPU-accelerated transforms
- Efficient selectors
- Minimal repaints
- Optimized animations
Images/Video
- Responsive sizing
- Lazy loading ready
- Optimized formats
- Preload metadata
Layout
- Mobile-first approach
- Minimal DOM elements
- Efficient grid layouts
- No layout thrashing
Browser Support Matrix
| Feature | Chrome | Firefox | Safari | Edge | Mobile |
|---|---|---|---|---|---|
| HTML5 Video | ✅ | ✅ | ✅ | ✅ | ✅ |
| CSS Grid | ✅ | ✅ | ✅ | ✅ | ✅ |
| Flexbox | ✅ | ✅ | ✅ | ✅ | ✅ |
| Backdrop Filter | ✅ | ⚠️ | ✅ | ✅ | ✅ |
| CSS Animations | ✅ | ✅ | ✅ | ✅ | ✅ |
| Gradients | ✅ | ✅ | ✅ | ✅ | ✅ |
Design Principles Applied
1. Visual Hierarchy
- Largest elements first (hero, video)
- Consistent sizing for similar elements
- Color coding for quick scanning
2. User Experience
- Clear CTAs at each section
- Multiple conversion paths
- Responsive on all devices
3. Modern Design
- Glassmorphism effects
- Smooth animations
- Gradient backgrounds
- Professional shadows
4. Accessibility
- High contrast ratios
- Keyboard navigation
- Semantic HTML
- Descriptive text
5. Performance
- Optimized CSS
- Minimal JavaScript
- Efficient layouts
- Fast load times
Design Status: ✅ COMPLETE Responsive: ✅ Mobile, Tablet, Desktop Accessibility: ✅ WCAG AA Compliant Performance: ✅ Optimized Browser Support: ✅ Modern Browsers