I can’t stop building beautiful hero sections inside @lovable This...
Prajwal Tomar@PrajwalTomar_
56 views
Jul 05, 2025
~4 min read
Advertisement
1
I can’t stop building beautiful hero sections inside @lovable
This one turned out insane.
Credits: @DannPetty
Full breakdown below ↓
This one turned out insane.
Credits: @DannPetty
Full breakdown below ↓
0:05
2
1/ Start with visual inspiration
I found this layout from Dann Petty’s portfolio and instantly knew I wanted to rebuild it.
Great structure. Clean font. Strong first impression.
I found this layout from Dann Petty’s portfolio and instantly knew I wanted to rebuild it.
Great structure. Clean font. Strong first impression.
DANN©@DannPetty
Created with Midjourney + ChatGPT + Figma in just under one hour.
Quick tutorial how to make it yourself👇
Quick tutorial how to make it yourself👇
3
2/ Generate the image with AI
I used Leonardo AI to create a stunning visual for the background.
MidJourney works too, but I’ve been experimenting with Leonardo lately.
Prompt:
"A cinematic, high-resolution side-view shot of a modern electric SUV driving along a coastal highway with the ocean in the background. The car is silver with a black roof and sporty tires, and it has a long surfboard mounted on the roof rack. The background includes a clear blue sky, calm sea waves, sandy cliffs, and soft sunlight creating a warm, late afternoon glow. The road is clean and curves slightly along the coastline. Style should be photo-realistic, suitable for use in a sleek automotive website hero section. Include a subtle motion blur to imply movement. Aspect ratio: 16:9. Ensure there is space in the sky area for overlaying text and navigation items.
Optional parameters (if your AI image tool supports them):
Style: Photorealistic, commercial-grade
Lighting: Golden hour, soft natural light
Aspect Ratio: 16:9
Resolution: 1920x1080 or higher"
I used Leonardo AI to create a stunning visual for the background.
MidJourney works too, but I’ve been experimenting with Leonardo lately.
Prompt:
"A cinematic, high-resolution side-view shot of a modern electric SUV driving along a coastal highway with the ocean in the background. The car is silver with a black roof and sporty tires, and it has a long surfboard mounted on the roof rack. The background includes a clear blue sky, calm sea waves, sandy cliffs, and soft sunlight creating a warm, late afternoon glow. The road is clean and curves slightly along the coastline. Style should be photo-realistic, suitable for use in a sleek automotive website hero section. Include a subtle motion blur to imply movement. Aspect ratio: 16:9. Ensure there is space in the sky area for overlaying text and navigation items.
Optional parameters (if your AI image tool supports them):
Style: Photorealistic, commercial-grade
Lighting: Golden hour, soft natural light
Aspect Ratio: 16:9
Resolution: 1920x1080 or higher"
4
3/ Convert image to video
Static is boring.
Convert the image into a video using MidJourney.
Prompt:
"A cinematic side-view animation of a sleek modern SUV with a red surfboard on top, driving smoothly along a coastal highway. The camera remains fixed on the side of the main car as it moves forward. The background shows ocean waves, a sandy beach, and rocky cliffs. Multiple other modern cars and vintage vehicles pass by in both directions to add motion and realism. Bright golden hour sunlight from the right adds warmth and long shadows. Clear sky, relaxing vibe, coastal breeze implied."
Static is boring.
Convert the image into a video using MidJourney.
Prompt:
"A cinematic side-view animation of a sleek modern SUV with a red surfboard on top, driving smoothly along a coastal highway. The camera remains fixed on the side of the main car as it moves forward. The background shows ocean waves, a sandy beach, and rocky cliffs. Multiple other modern cars and vintage vehicles pass by in both directions to add motion and realism. Bright golden hour sunlight from the right adds warmth and long shadows. Clear sky, relaxing vibe, coastal breeze implied."
5
4/ Craft the perfect Lovable prompt
Here’s where the magic happens:
I upload the inspiration into ChatGPT and ask it to write a detailed Lovable prompt to replicate the same layout.
The key is being specific: layout, font, padding, animation, scroll effects.
Prompt:
"Design a modern, cinematic hero section for an electric vehicle brand landing page. Place minimal and clean UI text elements over the image with the following structure and styling:
Brand Name (centered, large):
REVALTA — use bold, geometric sans-serif font (like Gilroy Bold or Helvetica Neue Bold), all caps, white color.
Navbar (top center):
DISCOVER | TECHNOLOGY | VISION — all caps, use light sans-serif font (e.g., Helvetica Neue Light, letter spacing +5%), white text.
Left Subheading (upper-left):
ENGINEERED FOR THE JOURNEY.
Use monospaced font like IBM Plex Mono or Space Mono, all caps, white text, small size.
Right Subheading (upper-right):
BUILT FOR THE FUTURE.
Same monospaced font and style as left subheading.
Model Label (bottom-left):
TERRA R2 — bold monospaced font
520 EST MILES — STARTING AT $64,900 — smaller size, same font
CTAs (bottom-right):
Button 1: EXPLORE TERRA — white button with dark text, rounded corners
Button 2: RESERVE NOW — semi-transparent white button with white border, white text
Design Notes:
Use a cinematic color grade (slightly warm, pastel tones)
Ensure text has sufficient contrast and breathing space
Use 16:9 aspect ratio
Do not include any real brand names or logos. Hero brand text: Gilroy Bold or Helvetica Neue Bold
Navigation: Helvetica Neue Light
Subheadings and spec text: IBM Plex Mono or Space Mono."
Here’s where the magic happens:
I upload the inspiration into ChatGPT and ask it to write a detailed Lovable prompt to replicate the same layout.
The key is being specific: layout, font, padding, animation, scroll effects.
Prompt:
"Design a modern, cinematic hero section for an electric vehicle brand landing page. Place minimal and clean UI text elements over the image with the following structure and styling:
Brand Name (centered, large):
REVALTA — use bold, geometric sans-serif font (like Gilroy Bold or Helvetica Neue Bold), all caps, white color.
Navbar (top center):
DISCOVER | TECHNOLOGY | VISION — all caps, use light sans-serif font (e.g., Helvetica Neue Light, letter spacing +5%), white text.
Left Subheading (upper-left):
ENGINEERED FOR THE JOURNEY.
Use monospaced font like IBM Plex Mono or Space Mono, all caps, white text, small size.
Right Subheading (upper-right):
BUILT FOR THE FUTURE.
Same monospaced font and style as left subheading.
Model Label (bottom-left):
TERRA R2 — bold monospaced font
520 EST MILES — STARTING AT $64,900 — smaller size, same font
CTAs (bottom-right):
Button 1: EXPLORE TERRA — white button with dark text, rounded corners
Button 2: RESERVE NOW — semi-transparent white button with white border, white text
Design Notes:
Use a cinematic color grade (slightly warm, pastel tones)
Ensure text has sufficient contrast and breathing space
Use 16:9 aspect ratio
Do not include any real brand names or logos. Hero brand text: Gilroy Bold or Helvetica Neue Bold
Navigation: Helvetica Neue Light
Subheadings and spec text: IBM Plex Mono or Space Mono."
6
5/ Drop the prompt into Lovable
Paste the prompt.
Use the video as a background.
Make tweaks directly inside @lovable.
And done.
Hero section = shipped.
Paste the prompt.
Use the video as a background.
Make tweaks directly inside @lovable.
And done.
Hero section = shipped.
7
6/ Repeat the process
This has become a loop for me now:
→ Find layout I love
→ Use AI to recreate the vibe (but make it yours, what I did above was just for fun, not for clients)
→ Drop it into Lovable
→ Ship a clean landing page FAST
If you’re building MVPs, master this workflow.
It’ll help you ship sites that look $5K+ for $0 and under an hour.
This has become a loop for me now:
→ Find layout I love
→ Use AI to recreate the vibe (but make it yours, what I did above was just for fun, not for clients)
→ Drop it into Lovable
→ Ship a clean landing page FAST
If you’re building MVPs, master this workflow.
It’ll help you ship sites that look $5K+ for $0 and under an hour.
8
if this thread helped, i post ai workflows like this every day
follow @PrajwalTomar_ for more
questions? drop them below, happy to help :)
like or repost the quote tweet if it was useful:
follow @PrajwalTomar_ for more
questions? drop them below, happy to help :)
like or repost the quote tweet if it was useful:
Prajwal Tomar@PrajwalTomar_
I can’t stop building beautiful hero sections inside @lovable
This one turned out insane.
Credits: @DannPetty
Full breakdown below ↓
This one turned out insane.
Credits: @DannPetty
Full breakdown below ↓
9
@lovable @DannPetty You’re probably going to forget this.
And all the other AI dev workflows I’ve shared this week.
So I started a weekly newsletter
Quick recap every Sunday on AI dev, vibe coding, and MVP building.
Subscribe here:
aimvpweekly.beehiiv.com
And all the other AI dev workflows I’ve shared this week.
So I started a weekly newsletter
Quick recap every Sunday on AI dev, vibe coding, and MVP building.
Subscribe here:
aimvpweekly.beehiiv.com