HeroFeatured9 files

Minimal Clean Hero

A beautifully crafted minimal hero block featuring an elevated floating pill navbar with dropdown submenus, mobile responsive navigation sheet, high-converting hero headline and badge, dual interactive CTA buttons with Web Audio micro-interactions, and SVG company trust badges (Obsidian, Cilium, Figma, Notion).

#React#Next.js#Tailwind CSS#Hero#Audio UX#Navbar#Agency#SaaS#Responsive

Interactive Preview

100%

Accepting new projects

Elevate your brand with custom web experiences

We handle it all from UI/UX design to pixel-perfect Next.js and Tailwind CSS development. Focused on speed, SEO, and conversions.

Trusted by Companies

Obsidian

Cilium

Figma

Notion

Source Code

1"use client";
2
3import React from "react";
4import { Navbar, type NavbarProps, NAV_ITEMS } from "./navbar";
5import { HeroContent, type HeroContentProps } from "./hero-content";
6import { TrustedCompanies, type TrustedCompaniesProps } from "./company-logos";
7import "./minimal-hero.css";
8
9// Re-export subcomponents for external modular reuse
10export { Logo } from "./hero-logo";
11export { Navbar, NAV_ITEMS } from "./navbar";
12export type { NavItem, SubNavItem, NavbarProps } from "./navbar";
13export { HeroContent } from "./hero-content";
14export type { HeroContentProps } from "./hero-content";
15export {
16  TrustedCompanies,
17  ObsidianLogo,
18  CiliumLogo,
19  FigmaLogo,
20  NotionLogo,
21} from "./company-logos";
22export type { TrustedCompaniesProps } from "./company-logos";
23
24export interface HeroProps extends HeroContentProps, NavbarProps, TrustedCompaniesProps {
25  backgroundImageUrl?: string;
26  className?: string;
27  wrapperClassName?: string;
28  trustedCompaniesTitle?: string;
29}
30
31export function Hero({
32  badgeText = "Accepting new projects",
33  title = "Elevate your brand with custom web experiences",
34  description = "We handle it all from UI/UX design to pixel-perfect Next.js and Tailwind CSS development. Focused on speed, SEO, and conversions.",
35  primaryCtaText = "Book a Call",
36  secondaryCtaText = "View Portfolio",
37  onPrimaryCta,
38  onSecondaryCta,
39  navItems = NAV_ITEMS,
40  ctaText = "Book a Call",
41  onCtaClick,
42  homeHref = "/",
43  trustedCompaniesTitle = "Trusted by Companies",
44  backgroundImageUrl = "https://pbs.twimg.com/media/HQd2_n5akAApeIT?format=jpg&name=medium",
45  className = "",
46}: HeroProps = {}) {
47  return (
48    <div
49      className={`relative min-h-screen w-full flex flex-col justify-between items-center bg-cover bg-center rounded-3xl overflow-hidden pt-20 sm:pt-24 pb-10 sm:pb-12 px-4 sm:px-6 font-inter ${className}`}
50      style={{ backgroundImage: `url('${backgroundImageUrl}')` }}
51    >
52      <Navbar
53        navItems={navItems}
54        ctaText={ctaText}
55        onCtaClick={onCtaClick || onPrimaryCta}
56        homeHref={homeHref}
57      />
58      <HeroContent
59        badgeText={badgeText}
60        title={title}
61        description={description}
62        primaryCtaText={primaryCtaText}
63        secondaryCtaText={secondaryCtaText}
64        onPrimaryCta={onPrimaryCta}
65        onSecondaryCta={onSecondaryCta}
66      />
67      <TrustedCompanies title={trustedCompaniesTitle} />
68
69      {/* Gradient Overlay for bottom blend */}
70      <div className="absolute z-10 bg-[radial-gradient(123.5%_123.3%_at_48.53%_-9.22%,rgba(255,255,255,0)_25%,rgba(255,255,255,0.75)_60%,#fff_84%)] bottom-0 left-0 right-0 h-[70%] pointer-events-none" />
71    </div>
72  );
73}
74
75export function Layout(props: HeroProps) {
76  return (
77    <div className={`w-full h-full p-1 bg-neutral-50 font-inter ${props.wrapperClassName || ""}`}>
78      <Hero {...props} />
79    </div>
80  );
81}
82
83export const MinimalHero = (props: HeroProps) => {
84  return <Layout {...props} />;
85};
86
87export default MinimalHero;

Installation

Manager:

pnpm dlx shadcn@latest add https://udayui.vercel.app/r/minimal-hero.json

Props Reference

Prop	Type	Default	Description
badgeText	string	"Accepting new projects"	Text shown inside the top pill badge
title	string	"Elevate your brand with custom web experiences"	Main headline text for the hero section
description	string	"We handle it all from UI/UX design to pixel-perfect Next.js and Tailwind CSS development..."	Supporting paragraph text describing your offering
primaryCtaText	string	"Book a Call"	Label for the primary call-to-action button
secondaryCtaText	string	"View Portfolio"	Label for the secondary call-to-action button
onPrimaryCta	() => void	undefined	Callback function triggered when clicking the primary CTA button
onSecondaryCta	() => void	undefined	Callback function triggered when clicking the secondary CTA button
navItems	NavItem[]	NAV_ITEMS	Custom navigation items with optional dropdown children arrays
trustedCompaniesTitle	string	"Trusted by Companies"	Header text for the company logos section
backgroundImageUrl	string	"https://pbs.twimg.com/media/HQd2_n5akAApeIT?format=jpg&name=medium"	Background image URL for the hero section
className	string	""	Additional CSS classes to apply to the root wrapper

Engineering Highlights

Floating rounded pill navbar with smooth multi-level dropdown submenus and outside-click detection

Full mobile responsiveness with animated hamburger toggle and slide-down drawer menu

Integrated Web Audio API sound engine providing crisp hover and click micro-interactions

Geometric flower SVG brand logo with smooth hover rotation animation

Curated vector company social proof badges including Obsidian, Cilium, Figma, and Notion

Modular architecture with composable subcomponents (HeroContent, Navbar, TrustedCompanies, Logo)

Minimal Clean Hero

"use client";

import React from "react";

import { Navbar, type NavbarProps, NAV_ITEMS } from "./navbar";

import { HeroContent, type HeroContentProps } from "./hero-content";

import { TrustedCompanies, type TrustedCompaniesProps } from "./company-logos";

import "./minimal-hero.css";

// Re-export subcomponents for external modular reuse

export { Logo } from "./hero-logo";

export { Navbar, NAV_ITEMS } from "./navbar";

export type { NavItem, SubNavItem, NavbarProps } from "./navbar";

export { HeroContent } from "./hero-content";

export type { HeroContentProps } from "./hero-content";

export {

TrustedCompanies,

ObsidianLogo,

CiliumLogo,

FigmaLogo,

NotionLogo,

} from "./company-logos";

export type { TrustedCompaniesProps } from "./company-logos";

export interface HeroProps extends HeroContentProps, NavbarProps, TrustedCompaniesProps {

backgroundImageUrl?: string;

className?: string;

wrapperClassName?: string;

trustedCompaniesTitle?: string;

}

export function Hero({

badgeText = "Accepting new projects",

title = "Elevate your brand with custom web experiences",

description = "We handle it all from UI/UX design to pixel-perfect Next.js and Tailwind CSS development. Focused on speed, SEO, and conversions.",

primaryCtaText = "Book a Call",

secondaryCtaText = "View Portfolio",

onPrimaryCta,

onSecondaryCta,

navItems = NAV_ITEMS,

ctaText = "Book a Call",

onCtaClick,

homeHref = "/",

trustedCompaniesTitle = "Trusted by Companies",

backgroundImageUrl = "https://pbs.twimg.com/media/HQd2_n5akAApeIT?format=jpg&name=medium",

className = "",

}: HeroProps = {}) {

return (

<div

className={`relative min-h-screen w-full flex flex-col justify-between items-center bg-cover bg-center rounded-3xl overflow-hidden pt-20 sm:pt-24 pb-10 sm:pb-12 px-4 sm:px-6 font-inter ${className}`}

style={{ backgroundImage: `url('${backgroundImageUrl}')` }}

<Navbar

navItems={navItems}

ctaText={ctaText}

onCtaClick={onCtaClick || onPrimaryCta}

homeHref={homeHref}

<HeroContent

badgeText={badgeText}

title={title}

description={description}

primaryCtaText={primaryCtaText}

secondaryCtaText={secondaryCtaText}

onPrimaryCta={onPrimaryCta}

onSecondaryCta={onSecondaryCta}

{/* Gradient Overlay for bottom blend */}

</div>

);

}

export function Layout(props: HeroProps) {