Beginner Friendly

Super Simple Page

Practice building a landing page with Tailwind CSS and Framer Motion

What you'll build:

Beautiful Hero Section

Eye-catching headlines with gradient backgrounds

Interactive Button

Hover effects and click animations

Feature Cards

Showcase your product's best features

Smooth Animations

Professional transitions and effects

Initial build: 20-30 minutes

(Iterations and tweaking can take hours of joyful exploration)

Before you start

Make sure you have:

  • Cursor open and ready
  • Opened the chat panel with Cmd+L
  • A few minutes to build something cool

Prompts to try:

1

Start here: Build the entire landing page

5-7 minutes

This creates your complete landing page in one go

Create a beautiful, modern landing page using Next.js with the following specifications: PROJECT SETUP: - Create a new Next.js app called "my-landing-page" - Use TypeScript, Tailwind CSS v3 (IMPORTANT: use @3.x, NOT v4), and App Router - Install framer-motion for animations HERO SECTION: - Large, bold headline: "Welcome to the Future" - Subtitle: "Where ideas become reality" - Center everything in viewport - Purple to blue gradient background - Fully responsive design CALL-TO-ACTION BUTTON: - Below subtitle, add "Get Started" button - Dark background, rounded corners - Scale up slightly on hover - Subtle shadow effect - Add click animation using Framer Motion FEATURE CARDS SECTION: - Below hero, add 3 feature cards in a row: 1. "Lightning Fast" 2. "Beautiful Design" 3. "Easy to Use" - Each card: white background, subtle shadow, title, subtitle, description - Responsive: stack on mobile, row on desktop ANIMATIONS: - Headline fades in from top - Subtitle fades in from bottom - Feature cards stagger in with scroll - Cards lift slightly on hover
2

Then try: Customize the colors

3-5 minutes

Make it yours by changing the color palette

Change the gradient to use your favorite colors. Try: - Sunset theme: orange to pink - Ocean theme: teal to deep blue - Forest theme: green to emerald - Or pick any colors you like! Update the button and card hover effects to match the new color scheme.
3

Then try: Add more content

5-7 minutes

Turn it into a full landing page

Add these sections to make it a complete landing page: 1. Add a navigation bar at the top with: - Logo/brand name on the left - Menu items: Features, About, Contact - Sticky positioning 2. Add a testimonial section with: - 2-3 customer quotes - Names and titles - Subtle background pattern 3. Add a footer with: - Copyright notice - Social media links - Quick links Keep the same design style and animations.
4

Then try: Make it more interactive

5-7 minutes

Add engaging interactions

Add these interactive elements: 1. Parallax scrolling effect on the hero background 2. Smooth scroll to sections when clicking nav items 3. Add a "back to top" button that appears on scroll 4. Make the Get Started button open a modal with an email signup form 5. Add confetti animation when form is submitted Use Framer Motion for all animations.
5

Then try: Polish and optimize

3-5 minutes

Production-ready polish

Final touches for production: 1. Add meta tags for SEO in the layout 2. Optimize images (if any) with next/image 3. Add loading states for any async operations 4. Ensure perfect mobile responsiveness 5. Add subtle hover states to all interactive elements 6. Test and fix any accessibility issues 7. Add a custom 404 page

Preview your creation

Quick way (using Cursor's terminal):

1

Open the terminal in Cursor with Ctrl+` (that's the backtick key)

2

Navigate to your project folder:

cd my-landing-page
3

Start your development server:

npm run dev
4

Open your browser and visit:

http://localhost:3000

That's it! Your site should now be live locally.

If something doesn't look right, check out our debug guide for quick fixes.

Ready to celebrate?

Once your site is running and looking good, you've officially completed your first Cursor project!