Thematic and Dynamic Landing page coding in React with AI: VibeCoding
In this video I will show you the power of Cursor AI coding IDE, to generate theme based anding page code in React using only prompts and design image as our source.
You will see how to use specialy written prompts to guide Cursor to generate the code exactly we need to develop our landing page with dark style, animation and various UI design principles.
00:00 - Introduction
00:10 - Objective Explained
03:30 - Adding README.md to capture existing progress
07:15 - Landing Page Design Image with Prompt
12:30 - Adding Dark Theme and Accent color with image
17:50 - Adding Hero Section with Wid…
Watch on YouTube ↗
(saves to browser)
Chapters (12)
Introduction
0:10
Objective Explained
3:30
Adding README.md to capture existing progress
7:15
Landing Page Design Image with Prompt
12:30
Adding Dark Theme and Accent color with image
17:50
Adding Hero Section with Widget Components
26:00
Adding Code inside the Component
29:00
Adding Community Feedback Component
36:00
Adding Pricing Component
41:30
Updating Pricing Component Code and JSON
47:00
Adding Footer Component
49:50
Project Source Code
DeepCamp AI