Status: ✅ COMPLETE
Built by: The Agent Swarm (Orc + Enitharmon + Urthona + Vala)
Date: March 20, 2026
This is a statically-exported Next.js 14 website for Agentic Applications, an agentic software building agency. The site showcases the agency's unique methodology of using coordinated AI agent swarms to build software rapidly.
Lower East Side gallery vibes — spare, confident, intentional. Pure monochrome palette with custom SVG elements and a mouse-reactive WebGL shader hero.
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Typography: Space Grotesk + Space Mono (Google Fonts)
- Animations: Framer Motion
- Shader: WebGL (custom grain/noise effect)
- Deployment: Static export (
out/directory)
The contact form uses Resend for email notifications.
Prerequisites:
- Resend account (get API key from resend.com)
- Create
.env.localfile in the project root:
RESEND_API_KEY=re_xxx # Get from resend.com dashboardNote: Without the Resend API key, the contact form will accept submissions but email notifications will fail silently (submission still succeeds for better UX).
npm installnpm run devOpen http://localhost:3000 to view the site.
npm run buildThis generates a static export in the out/ directory.
npm run serveThis serves the out/ directory locally on port 3000.
site/
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Homepage
│ │ ├── about/page.tsx # About page
│ │ ├── services/page.tsx # Services page
│ │ └── contact/page.tsx # Contact page
│ ├── components/
│ │ ├── Header.tsx # Main navigation
│ │ ├── Footer.tsx # Site footer
│ │ ├── MobileMenu.tsx # Mobile navigation overlay
│ │ ├── ScrollReveal.tsx # Scroll animation wrapper
│ │ ├── GridOverlay.tsx # Decorative grid background
│ │ ├── ShaderHero.tsx # WebGL mouse-reactive shader
│ │ ├── AgentCard.tsx # Team member display
│ │ ├── MethodPhase.tsx # Methodology phase component
│ │ ├── Button.tsx # Reusable button
│ │ └── Divider.tsx # Geometric section divider
│ ├── lib/
│ │ └── content.ts # All site copy (single source of truth)
│ └── styles/
│ └── globals.css # Base styles + Tailwind
├── public/
│ └── svg/ # SVG design elements
├── out/ # Static export (generated by build)
├── next.config.js # Next.js config (static export enabled)
├── tailwind.config.js # Design system tokens
└── package.json
- Mouse-reactive WebGL shader hero
- Hero headline + tagline
- Intro section with capabilities list
- CTA section
- Origin story
- Philosophy
- Team section with geometric agent identifiers
- Positioning statement
- Build methodology (The Swarm) — 5-phase breakdown
- CTA
- Minimal, centered design
- Contact form with Telegram notifications
- Security: Rate limiting, honeypot, origin validation
- Server-side validation and input sanitization
The contact form includes comprehensive security measures:
- Rate Limiting: Maximum 5 submissions per IP address per hour
- Origin Validation: Only accepts requests from agenticapplications.com and localhost (dev)
- Honeypot Field: Hidden field to detect bot submissions
- Server-side Validation: All inputs validated and sanitized
- Input Sanitization: HTML tags removed, length limits enforced
- Inquiry (required) — Textarea for message
- Name (required) — Text input
- Email (required) — Email validation
- Company (optional) — Text input
On successful submission, a formatted email notification is sent to zemnaph@gmail.com via Resend:
<h2>🔔 New Contact Inquiry</h2>
<p><strong>📝 Inquiry:</strong><br>[user's message]</p>
<p><strong>👤 Name:</strong> [name]</p>
<p><strong>📧 Email:</strong> [email]</p>
<p><strong>🏢 Company:</strong> [company or "Not provided"]</p>Subject line: [Agentic Apps] New Contact: [name]
POST /api/contact — Handles form submissions with comprehensive validation and security
- Push this directory to a Git repository
- Connect the repo to Vercel
- Vercel auto-detects Next.js and deploys
- Connect your domain
The out/ directory contains a complete static site. You can deploy it to:
- Netlify
- Cloudflare Pages
- GitHub Pages
- AWS S3 + CloudFront
- Any web server
Simply upload the contents of out/ to your hosting provider.
- Site is fully static (no server required)
- All 4 pages render correctly
- Mobile responsive
- Custom SVG design elements
- Mouse-reactive shader on hero
- Scroll reveal animations
- Tailwind design system implemented
- Next.js 14 with TypeScript
- Zero external dependencies (fonts from Google Fonts)
- Lighthouse Performance: ≥ 95
- Lighthouse Accessibility: ≥ 95
- Lighthouse Best Practices: ≥ 95
- Lighthouse SEO: ≥ 95
All site copy lives in src/lib/content.ts. To update text:
- Edit the content in that file
- Rebuild the site (
npm run build) - Redeploy
Edit tailwind.config.js — the design system uses CSS custom properties defined in the Tailwind theme.
Font families are loaded in src/app/layout.tsx. The design system uses:
- Display/Headlines: Space Grotesk
- Body: Helvetica Neue stack
- Mono: Space Mono
SVG files are in public/svg/. They're referenced in components via /svg/filename.svg.
- Add Google Analytics (Zemm to configure)
- Set up custom domain
- Optimize shader performance for low-end devices
- Contact form with email notifications via Resend (COMPLETE)
Built by the Autonomous Projects Agent Swarm:
- Urizen — Product & scope definition
- Enitharmon — Design system, wireframes, SVG elements
- Orc — Component development, pages, build
- Urthona — Infrastructure, Next.js setup, deployment config
- Vala — Copy refinement (content in
content.ts) - Albion — Technical direction, swarm coordination
- Zemm — Product leadership, human-in-the-loop
For questions or support: zemnaph@gmail.com
Built with agents. Shipped in days.