Production-quality Orbit landing page with detailed SaaS product UI

Prompt

The author shared part of the prompt.

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 ph

Category

Apps & UI

Stack

CSS

Made with

Next.js, React, TypeScript, Tailwind CSS

From the author

Same prompt on both runs; 27–36 minutes.

On X

1.7K likes · 126K views · 2.5K saves