ACI.dev Landing Page

A modern, professional landing page for ACI.dev - the open-source infrastructure layer for AI-agent tool-use.

Overview

This landing page is built with:

• Next.js 14+ with App Router
• TypeScript for type safety
• Tailwind CSS for styling
• Shadcn/ui for UI components
• Framer Motion for animations
• React Syntax Highlighter for code examples

Features

• 🎨 Modern dark theme with gradient mesh backgrounds
• ✨ Smooth animations and micro-interactions
• 📱 Fully responsive design
• 🎯 SEO optimized with proper meta tags
• ♿ Accessible with ARIA labels and keyboard navigation
• 🚀 Performance optimized with Next.js Image optimization

Getting Started

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser.

Project Structure

src/
├── app/
│   ├── layout.tsx       # Root layout with metadata
│   ├── page.tsx         # Main landing page
│   └── globals.css      # Global styles and theme
├── components/
│   ├── ui/              # Shadcn/ui components
│   ├── sections/        # Landing page sections
│   │   ├── Hero.tsx
│   │   ├── Features.tsx
│   │   ├── HowItWorks.tsx
│   │   ├── UseCases.tsx
│   │   ├── Integrations.tsx
│   │   ├── CodeExamples.tsx
│   │   ├── DeveloperExperience.tsx
│   │   └── Footer.tsx
│   └── FloatingGithubStar.tsx
└── lib/
    └── utils.ts         # Utility functions

Key Sections

1. Hero Section: Compelling headline with CTAs and GitHub stars badge
2. Features: Bento grid layout showcasing 6 key features
3. How It Works: Visual 3-step process
4. Use Cases: 4 main use case cards
5. Integrations: Grid of popular integration logos
6. Code Examples: Toggle between Python SDK and MCP implementation
7. Developer Experience: Highlights of the developer-friendly features
8. Footer: Links to documentation, GitHub, and community

Customization

Theme

The theme is configured in src/app/globals.css using CSS variables. The color scheme uses HSL values for easy customization.

Content

All content is currently hardcoded in the component files. To update:

• Edit the respective section components in src/components/sections/
• Update metadata in src/app/layout.tsx

Integrations

Integration logos are currently placeholder text. Replace with actual logo images for production.

Deployment

This project is ready to deploy on Vercel:

npm run build

Or deploy directly to Vercel:

License

Apache 2.0 License - matching the ACI.dev project license.