The official landing site for VERSA (Vendor-neutral Extensible Repo Spec for Agents) - inspired by Uni"VERSA"l Rules for AI Agents. Showcases the .ai/ folder standard with a stunning, modern design.
Built with:
- ⚡ Next.js 15.5 - React framework with App Router
- 🎨 Tailwind CSS 4.0 - Utility-first styling
- 🎭 Modern Design System - Vibrant gradients, animations, AAA accessibility
- 🚀 GitHub Pages - Static export deployment
- Animated Mesh Gradients - 4-corner radial backgrounds
- Morphing Blobs - Organic animations
- Floating Elements - Staggered motion
- Wave Dividers - Smooth section transitions
- Gradient Text - Animated color shifts
- Floating Navigation - Glassmorphic navbar
- Code Terminal - Tab-switched
.ai/examples - Hover Effects - Scale, glow, and gradient borders
- Smooth Scrolling - Anchor navigation
- Custom Scrollbar - Gradient-styled
- Static Export - Ultra-fast loading
- Optimized Assets - Next.js image optimization
- 108KB Bundle - Minimal JavaScript
- AAA Accessibility - WCAG compliant
- Mobile Responsive - Perfect on all devices
# Clone repository
git clone https://github.com/dotAIslash/dotaislash.github.io.git
cd dotaislash.github.io
# Install dependencies
npm install
# Run development server
npm run devVisit http://localhost:3000
# Create production build
npm run build
# Build is exported to 'out/' directory
# Ready for GitHub Pages deploymentdotaislash.github.io/
├── app/
│ ├── components/
│ │ ├── Navbar.tsx # Floating navigation
│ │ ├── CodeTerminal.tsx # Interactive terminal
│ │ ├── Footer.tsx # Professional footer
│ │ └── WaveDivider.tsx # SVG wave transitions
│ ├── page.tsx # Homepage
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles
├── public/ # Static assets
├── tailwind.config.ts # Tailwind configuration
├── next.config.ts # Next.js configuration
└── package.json
// Primary Colors
violet: #6C137F → #D933FF // Innovation
cyan: #08637C → #0DD9FF // Clarity
lime: #556C13 → #D9FF33 // Energy
pink: #7D1252 → #FF4DCC // Warmth
orange: #81360E → #FF8833 // Action
// Neutral Scale
gray: #111317 → #F9FAFC (13 shades)/* Hero Gradient */
background: linear-gradient(135deg, #6C137F 0%, #0DD9FF 100%);
/* Pulse Gradient */
background: linear-gradient(90deg, #FF1AAF 0%, #D9FF33 50%, #0DD9FF 100%);
/* Mesh Gradient (4-corner) */
background: radial-gradient(at 0% 0%, #6C137F 0%, transparent 50%),
radial-gradient(at 100% 0%, #0DD9FF 0%, transparent 50%),
radial-gradient(at 100% 100%, #D9FF33 0%, transparent 50%),
radial-gradient(at 0% 100%, #FF1AAF 0%, transparent 50%);// Tailwind Config
animations: {
'gradient-x': 'gradient-x 15s ease infinite',
'gradient-xy': 'gradient-xy 20s ease infinite',
'blob': 'blob 14s ease-in-out infinite',
'morph': 'morph 8s ease-in-out infinite',
'float': 'float 6s ease-in-out infinite',
'float-slow': 'float-slow 10s ease-in-out infinite'
}Floating glassmorphic navigation that appears on scroll.
<Navbar />Features:
- Gradient logo with glow
- Animated underlines on links
- Smooth scroll anchors
- Gradient CTA buttons
Interactive terminal showing .ai/ folder structure.
<CodeTerminal />Features:
- Tab switching (structure/context/profile)
- Syntax highlighting
- Gradient accent bar
- Terminal traffic lights
Professional footer with wave divider.
<Footer />Features:
- 4-column layout
- Gradient social icons
- Wave SVG divider
- Gradient accent bar
- Animated mesh gradient background
- Morphing blobs
- Interactive code terminal
- Gradient animated heading
- Live stat counters
- 3-column grid
- Icon-based cards
- Hover scale effects
- Wave divider
- 8 VERSA primitives
- Gradient icon containers
- 4-column responsive grid
- 4-step process
- Numbered badges
- Emoji indicators
- Repository cards
- Gradient accent bars
- GitHub links
- Animated gradient border
- Dual action buttons
- Large typography
const nextConfig: NextConfig = {
output: "export", // Static export for GitHub Pages
images: {
unoptimized: true // No server-side optimization
}
};See full configuration with:
- Custom color scales
- Gradient utilities
- Animation keyframes
- Responsive breakpoints
The site auto-deploys via GitHub Actions:
# .github/workflows/deploy.yml
- Build Next.js
- Export static site
- Deploy to GitHub PagesLive at: https://dotaislash.github.io
To use a custom domain:
- Add
CNAMEfile topublic/
versa.dev
- Configure DNS records
CNAME @ dotaislash.github.io
- Lighthouse Score: 100/100
- First Load JS: 108KB
- Build Time: ~3 seconds
- Static Export: Yes
- Mobile Friendly: Yes
# Lint code
npm run lint
# Type check
npm run type-check
# Build and test
npm run build && npm run start// tailwind.config.ts
colors: {
violet: { /* your shades */ },
cyan: { /* your shades */ }
}// app/page.tsx
<section className="py-32">
<SectionHeading title="New Section" />
{/* Content */}
</section>// tailwind.config.ts
keyframes: {
'your-animation': {
'0%': { /* start */ },
'100%': { /* end */ }
}
}Contributions welcome!
- 🐛 Report Bugs - Found an issue?
- 💡 Suggest Features - Have ideas?
- 🎨 Improve Design - Better animations?
- 📝 Update Content - Fix typos?
- ♿ Accessibility - Improve a11y?
See CONTRIBUTING.md for guidelines.
MIT © dotAIslash
- 🌐 Live Site: dotaislash.github.io
- 📖 VERSA Spec: github.com/dotAIslash/dotaislash-spec
- 💬 Discussions: github.com/orgs/dotAIslash/discussions
- 📚 Documentation: dotaislash.github.io
Built with 🔥 using Next.js 15 + Tailwind CSS 4
Showcasing VERSA - Universal Rules for AI Agents