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 badgeIts 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.
UnicornSpaceNote 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.
Accounting made simple for small businesses.
Most bookkeeping software is accurate, but hard to use. We make the opposite trade-off, and hope you don’t get audited.
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.
Your Image on a Custom Phone Case
Capture your favorite memories with your own, one-of-one phone case. CaseCobra allows you to protect your memories, not just your phone case.
- High-quality, durable material
- 5 year print guarantee
- Modern iPhone models supported
1.250 happy customers
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.
Calm websites
for fast startups
We build easy to manage marketing websites for
early-stage startups ready to grow.
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.
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.
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.
Remarkable Websites for Fast-Growing Startups
Get leads and stand out with a new remarkable website that reflects your business goals and delivers the message, easy and fast
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.
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.
4.8
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.
Delightfully Simple Interval Timer for HIIT workouts
Download on the App Store
Getting started
Focus on what matters, not UI, boilerplate code, clumsy documentation. Leave that on us. Get inspired, plan, create great web pages with designs and components that you can copy and paste directly into your apps.
NavBars
Navbar is the topmost section of a webpage. It helps the user/audience to easily navigate through the entire webpage.