Day 15/30 of the "Building 1 AI-Generated Landing Page Every Day" Challenge
Conceptual landing page for Oleap, a conceptual AI customer support platform that closes the support feedback loop. Developed with Next.js 16, TypeScript, and Tailwind CSS 4. This project is the fifteenth realization of an ambitious challenge: creating 1 complete and functional mockup per day using AI.
Oleap is designed to resolve tickets instantly with AI agents and in-app video calls, then turn that feedback directly into shipping features. The goal is to provide product intelligence, seamless support workflows, and actionable feedback loops through a warm, editorial, bento-inspired digital experience.
Live URL: https://oleap-landing.adrielzimbril.com
For this project, the theme focuses on calm productivity, editorial warmth, and product-led support intelligence.
- Warm Editorial Aesthetic: A refined sand and terracotta palette with clean typography, soft shadows, and a "calm workspace" feel.
- Performance First: Leveraging Next.js 16's latest features for instant loading and smooth transitions.
- Bento Grid Layout: Organizing complex support workflows into clear, distinct cards that simulate a real support dashboard.
- Purposeful Interactions: Scroll-reveal animations, marquee testimonials, and interactive channel cards that make the experience feel alive yet calm.
- Premium Typography: Using Inter for clarity and Newsreader for that editorial, high-end serif aesthetic.
- π Hero Section: High-impact introduction with three bento cards showcasing instant chat routing, service analytics, and customer timelines.
- π’ Logos Bar: Social proof strip with trusted company logos.
- π Workflow Section: A three-step support workflow with a marquee image strip and step-by-step breakdown.
- β‘ Features Grid: Four core capability cards β Faster Resolution, Team Alignment, Unified Threads, and Live Insights.
- οΏ½ Operations Hub: A command center view with performance metrics, channel overview, and follow-up planning.
- οΏ½ Reviews: Marquee testimonials and a featured customer story with 42% first-response improvement.
- π CTA: Clean contact sales section with trial and demo CTAs.
- π Footer: Newsletter signup, company links, and resource navigation.
This mockup was built with cutting-edge technologies:
- Next.js 16 with App Router and Turbopack
- React 19
- TypeScript for scalable component architecture.
- Tailwind CSS v4 for modern design tokens and utilities.
- Motion/React for sophisticated entrance and hover animations.
- Lenis for smooth scroll behavior.
- Lucide React for clean iconography.
# Install dependencies
pnpm install
# Run development server
pnpm devOpen http://localhost:3000 in your browser to see the result.
I'm always happy to discuss new projects, collaborations, or simply exchange creative ideas. Here's how to contact me:
- π§ Email: hello@adrielzimbril.com
- π Website: https://www.adrielzimbril.com
- π¦ Twitter: https://twitter.com/adrielzimbril
- πΌ LinkedIn: https://www.linkedin.com/in/adrielzimbrilcode
- πΌ GitHub: https://github.com/adrielzimbril
- π Passionate about space exploration and technology
- πΌ Love pandas (and animals in general!)
- π¨ Creative at heart, whether in design or code
- β Addicted to coffee and complex technical challenges
If you like this project, feel free to:
- β Star the project
- π Report bugs
- β¨ Suggest improvements
- π Share with other enthusiasts
If you find this project useful and would like to support its development, you can do so through these platforms:
This project is 100% hosted on modern cloud infrastructure for maximum performance and reliability:
This project is under the MIT license. Feel free to use it as a base for your own portfolio or project.
Developed with β€οΈ by Adriel Zimbril Product Designer & Fullstack Developer π Digital Universe Explorer | πΌ Panda Friend | π¨ Passionate Creator