Shadcn.io is not affiliated with official shadcn/ui
Hero Founder Note
A reverse split-layout hero for React and Next.js with a founder letter card on the left and headline with ShadcnioButton CTA on the right for authentic personal brand storytelling, built with shadcn/ui and Tailwind CSS
Build a split-layout hero with a founder letter card on the left using this React and Next.js block. Features a letter-style card with italic quote text, the founder's name and role, paired with a bold headline, subtitle, and single ShadcnioButton CTA on the right side for a personal and authentic feel. The letter card uses a subtle muted background tint with serif-style italic typography to evoke a handwritten note. Built with TypeScript, ShadcnioButton, motion/react staggered entrance animations, Lucide React icons, and Tailwind CSS. Perfect for mission-driven startups, indie hacker products, and SaaS companies where the founder's story builds trust and drives conversions.
Related Components
React Quote Hero Block
React hero with a prominent blockquote and shadcn/ui styling
React Testimonial Hero Block
React hero featuring a customer testimonial with shadcn/ui
React Split Testimonial Hero Block
React hero with split layout testimonial and shadcn/ui components
React Avatar Group Hero Block
React hero with team avatar social proof using shadcn/ui
React Case Study Hero Block
React hero showcasing a case study with shadcn/ui layout
React Minimal Hero Block
React clean minimal centered hero section
FAQ
Was this page helpful?
Sign in to leave feedback.
Floating Cards
A centered hero for React and Next.js with small floating feature preview cards positioned around the headline using absolute positioning and motion/react entrance animations, built with shadcn/ui and Tailwind CSS
Gradient Border
A centered hero for React and Next.js with the main card wrapped in an animated CSS conic-gradient border that rotates using @property CSS animation with theme-aware color stops, built with ShadcnioButton and Tailwind CSS