UnicornSpace🎉 Something special is waiting!
Build before its too late, effectively and effortlessly
Meet IndieToolkit, the project-juggling tool for all indie hackers. Focus on building, not managing and tracking what is left. Free for individuals.
Hero section
The hero section is the first section of a page and is used to introduce the page content
Installation
npx shadcn@latest add button badge
Its the most important section of your brand / startup / website, YES people are going to judge you based on your hero section first impression,
We've made it keeping in mind
- Conversions
- UI UX
- Modern and Responsive Design
1. Minimalist Hero Section
This is built with famous UI layout on hero section, it is responsive and supports both dark and light mode and uses minimalist approach to copy of your heading.
Note this uses the Navbar1 component. You can replace it with your own Navbar > component or use the default one
2. Minimalist Hero Section with different CTA's
Another minimalist Hero Section built for clear conveying the message and professional looking way to high light keywords. It contains basic description and 2 CTA (call to action) buttons.
3. Hero Section for highlighting image.
A hero section where highlighting the image is a priority, can be used in places to first show some image and then a heading, description and a final CTA button.
4. Hero Section with Product
A hero section for highlighting a product and building some credibility with the user, designed keeping Conversions in mind. Good for a single product landing page.
Credits: This component is taken from Josh Tried Coding educational project repo.
5. Clean Hero Section
A minimalist hero section that focuses on simplicity and clarity, perfect for emphasizing key messaging. Ideal for brands that value a sleek, no-distraction design.
6. Simple Hero Section
A straightforward hero section with a clear heading, concise description, two actionable buttons, and a Featured In section for added credibility. Perfect for driving user engagement with minimal clutter.
New UnicornSpaceUI is out! See what's new
We invest in the world's potential
Meet UnicornSpaceUI, the library for all your daily tool for all Nextjs and Web Development. Focus on getting things done, not re-inventing again and again.
FEATURED IN
Credits: This was taken from Flowbite herosection
7. Premium Hero Section
A premium hero section featuring bold text, a concise description, a prominent CTA button with some cool text/review. Ideal for capturing attention and delivering a high-impact first impression.
Credits: Design reference from Typeshare
8. Simple Hero Section
Build for a simple and clean look, with a heading and a subheading and a CTA including prior customers profile picture to build more trust and credibility. Bonus - Responsive in nature.
9. Hero Section with Listed Features
This is very usefull when you have a lot of features to show and you want to show them in a very clean,simple and easy to understand.Bonus - you can also display some of your testimonials.
Notion certified
150+ resources and tools to
master the world of Notion
Discover the powerful world of Notion and boost your Notion skills with this free directory. Find everything you need to become a Notion master.
A2A3A4A1
4.8
Courses
Blogs
Youtube Channels
Newsletters
Communities
Website Builders
Apps
Widgets
And many more...
10. App Hero Section
A single product hero section with a heading and a CTA to drive actions and most importantly an image to demonstrate an application.
