PROMPT PUBLIÉ PAR LA SOURCE
Create a modern, high-conversion AI SaaS landing page template called "Ink Orbit" built with Next.js 14 App Router, Tailwind CSS, Lucide React icons, and Framer Motion.
### 1. Visual Design & Theme
- Background: Minimalist monochrome palette with light and dark theme toggle.
- Dark: #09090b void black with subtle zinc-800 borders (1px solid rgba(255,255,255,0.08)) and radial noise gradient.
- Light: Pure white #ffffff with slate-100 surfaces and zinc-200 card outlines.
- Typography: Geist / Inter sans-serif with tight tracking (-0.03em) on headlines and JetBrains Mono for badge chips.
### 2. Hero Section
- Centered layout with an interactive draggable 3D generative ink sculpture (Three.js / WebGL sphere with vertex displacement).
- Eyebrow badge: "✨ AI Foundation Model v3.0 is live →" with animated pulse indicator.
- Main headline: "The Autonomous Intelligence Platform for Modern Engineering Teams" (clamp 3.5rem to 5.5rem).
- Supporting copy: "Deploy self-healing microservices, orchestrate multi-agent workflows, and eliminate cloud latency with zero configuration."
- Call-to-actions: Primary "Start Free Trial" button with magnetic hover effect + secondary "Explore Live Playground" button.
- Floating tech stack chips: TypeScript, Next.js, OpenAI, Python, LangChain with micro-bounce on drag.
### 3. Core Page Sections
- Social Proof Marquee: Infinite horizontal ticker of verified enterprise logos (grayscale with hover color reveal).
- Feature Bento Grid (4 Cards):
1. Real-time Inference Engine: Live latency chart showing <12ms response times.
2. Multi-Agent Swarm: Visual node graph showing agent communication channels.
3. SOC-2 Type II Certified: Security lock icon with end-to-end encryption badges.
4. Global Edge Mesh: Interactive world map with ping indicators.
- Interactive Code Preview: Tabbed code snippet (cURL, TypeScript, Python) with syntax highlighting and copy button.
- Testimonial Wall: Masonry grid of 6 customer quotes with avatar images, names, roles, and verified badges.
- Pricing Matrix: 3 tiered cards (Developer $0, Growth $49/mo, Enterprise Custom) with annual billing toggle (20% discount badge).
- Interactive FAQ: Collapsible accordion with smooth height transition and plus-to-minus icon rotation.
- Footer: 4-column layout with product links, documentation, social media icons, copyright, and status badge ("All systems operational").
### 4. Technical Requirements
- Fully responsive across mobile (375px), tablet (768px), and desktop (1280px+).
- Accessible keyboard navigation (WCAG AA compliant) with visible focus rings.
- Smooth spring animations powered by Framer Motion with prefers-reduced-motion fallback.Next.js + Tailwind CSS · Texte publié par la source. Les références et réglages peuvent être nécessaires ; le résultat identique n’est pas garanti.
Consulter la source ↗21st (kedhareswer)
EXTRA review 1563a31aa91d8e857cd15de27294c9f6; fingerprint 01a7665eacbd1e2a137b200430c106ba8994bee6b55aedacdde59fc623904ab3; evidence 89ef005c69af308facc27a5dc1f7dc5071575af40902eefd237a70db3b4c0692
← Continuer à explorer