Build a complete, production-quality landing page for Orbit, a project management platform for small product teams.
Orbit combines projects, tasks, discussions, documents, and weekly progress updates in one workspace. Its core purpose is to let teams understand what is happening without constantly asking for updates or scheduling status meetings.
Technical requirements
Build the website using Next.js, React, and TypeScript.
Use TSX components and a proper Next.js project structure. Do not create a plain HTML/CSS website.
The implementation should be clean, componentized, responsive, and production-quality. Use modern CSS or Tailwind CSS for styling where appropriate.
Do not merely describe the implementation. Build the complete working page.
Visual reference
Use the provided reference image as the primary art-direction reference.
Match its overall visual character very closely: typography treatment, density, spacing philosophy, texture, contrast, borders, surface treatment, visual weight, image treatment, and general design atmosphere.
However, do not copy the reference website or recreate its content.
Do not copy its:
branding
text or copy
logos
illustrations
exact layout
individual components
imagery
proprietary visual assets
Instead, understand the design language behind the reference and reinterpret it for Orbit.
For example, if the reference uses grain, paper texture, sharp borders, muted surfaces, unusual typography, dense layouts, editorial spacing, or a particular treatment of imagery, use those qualities as inspiration while creating an original design.
The finished page should clearly belong to the same visual world as the reference while still being an original website.
Page
The hero should immediately explain Orbit and show a convincing view of the actual product.
Throughout the page, create realistic Orbit UI showing projects, tasks, assignees, discussions, documents, statuses, deadlines, and weekly updates.
Include the sections that genuinely help sell the product, such as:
Hero
Product demonstration
Core workflow
Features
Team use cases
Integrations
Customer proof
Pricing
FAQ
Final CTA
You may change, combine, reorder, or remove sections when doing so produces a stronger page.
Design quality
Avoid the stereotypical AI-generated SaaS aesthetic.
No purple gradient hero.
No glowing blobs.
No glassmorphism.
No giant collection of rounded cards.
No endless 3-column feature grids.
No random floating icons.
No meaningless charts.
No fake AI functionality.
No excessive pills.
No generic startup illustrations.
No repetitive centered sections.
Do not make every element a card or container.
Use typography, composition, whitespace, texture, product UI, imagery, and hierarchy to create visual interest.
The product UI itself should be detailed and believable. Keep names, projects, dates, statuses, and other information consistent across different product previews.
Copy should be concise and specific. Avoid phrases such as “supercharge your workflow,” “unlock your potential,” and other generic SaaS language.
Add subtle, intentional interactions and motion where they improve the experience. Avoid animation for animation's sake.
Make the page excellent on desktop and mobile.
The final result should feel designed, not generated.
Take the reference image seriously. Analyze its design system first, then translate that design language into an original Orbit website.
Do not ask me to choose colors, fonts, layouts, libraries, or design direction. Make those decisions yourself and implement the complete site.
