Cursor Landing Page Clone

A desktop-first visual clone of the Cursor developer tool landing page, built using pure HTML and CSS

The objective of this project was to replicate the structure, layout, typography, spacing, and visual hierarchy of the original Cursor website with high accuracy, while strictly following the given constraints.

Original Website: https://cursor.com/

🌐 Live Demo

🔗 Live Preview: https://cursor.ashu.fun/

Screenshots

Homepage: Trusted By: Testimonials: Footer:

---

Objective

• Recreate the Cursor landing page layout with strong visual fidelity
• Match section structure, spacing, alignment, and hierarchy
• Use semantic HTML and clean CSS
• Avoid unnecessary complexity, interactivity, or creativity

---

Scope of Implementation

The following sections were implemented to closely mirror the original design:

1. Navigation bar with logo, links, and primary CTA
2. Hero section with headline, description, CTA, and product visual
3. Trusted-by logos section
4. Three feature sections with alternating two-column layouts
5. Feature cards grid section
6. Testimonials with quotes and attribution
7. Use-cases / stories section
8. Changelog / updates list
9. Team / about section with CTA
10. Final call-to-action section
11. Footer with multi-column links and company information

---

Technical Stack

• HTML5 (semantic markup)
• CSS3 (layout, spacing, typography)

No JavaScript, frameworks, libraries, or preprocessors were used.

---

Design Constraints Followed

• Desktop-only layout (no responsiveness required)
• No animations or interactive behavior
• No TailwindCSS or CSS frameworks
• No JavaScript
• No AI-generated code
• Visual accuracy prioritized over creativity
• Images and icons inspired by the original website

---

Typography & Color System

• Fonts selected to closely match the original Cursor website
• Dark-mode color palette with high contrast
• Consistent spacing scale to preserve visual hierarchy
• CSS organized for clarity and maintainability