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 (13shades)/* Hero Gradient */background:linear-gradient(135deg,#6C137F0%,#0DD9FF100%);
/* Pulse Gradient */background:linear-gradient(90deg,#FF1AAF0%,#D9FF3350%,#0DD9FF100%);
/* Mesh Gradient (4-corner) */background:radial-gradient(at 0%0%,#6C137F0%, transparent 50%),radial-gradient(at 100%0%,#0DD9FF0%, transparent 50%),radial-gradient(at 100%100%,#D9FF330%, transparent 50%),radial-gradient(at 0%100%,#FF1AAF0%, 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
constnextConfig: NextConfig={output: "export",// Static export for GitHub Pagesimages: {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<sectionclassName="py-32"><SectionHeadingtitle="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