Docs
Founders Note

Founders Note

An expandable note component with avatar, signature, and role information, perfect for founder messages or personal notes.

Out of the 12+ million landing pages online, only 8% will convert more than 1% of visitors.

Yup - while it's easier than ever to build a landing page, it's harder than ever to make it convert.

Most landing pages have two challenges with conversion:

1. Getting visitors to take the first action
2. Getting those who do to come back

That's why I built Layout UI - to give developers and startups the components they need to build high-converting pages.

In the last 7 years, I've helped startups increase conversion with optimized landing pages. I'd love for you to give these components a try.

avatarsignature

Dylan

Founder, Layout UI

Installation

npx shadcn@latest add "https://www.layout.software/r/styles/default/foundersnote.json"

Usage

import {
  FoundersNote,
  FoundersNoteAuthor,
  FoundersNoteAvatar,
  FoundersNoteContent,
  FoundersNoteExpandable,
  FoundersNoteFooter,
  FoundersNoteHeadline,
  FoundersNoteInfo,
  FoundersNoteName,
  FoundersNoteRole,
  FoundersNoteSubtext,
} from "@/components/ui/foundersnote"
export default function FoundersNoteDemo() {
  const [isExpanded, setIsExpanded] = React.useState(false)
 
  return (
    <FoundersNote
      isExpanded={isExpanded}
      onToggle={() => setIsExpanded(!isExpanded)}
    >
      <FoundersNoteContent isExpanded={isExpanded}>
        <FoundersNoteHeadline>A note from our founder</FoundersNoteHeadline>
        <FoundersNoteSubtext>
          Thank you for being part of our journey. We're committed to building
          something truly special.
        </FoundersNoteSubtext>
        <FoundersNoteExpandable isExpanded={isExpanded}>
          Our mission is to empower creators and innovators with tools that make
          their work easier and more impactful.
        </FoundersNoteExpandable>
      </FoundersNoteContent>
      <FoundersNoteFooter>
        <FoundersNoteAuthor>
          <FoundersNoteAvatar
            avatarSrc="/avatars/founder.png"
            signatureSrc="/signatures/founder.png"
          />
          <FoundersNoteInfo>
            <FoundersNoteName>John Smith</FoundersNoteName>
            <FoundersNoteRole>Founder & CEO</FoundersNoteRole>
          </FoundersNoteInfo>
        </FoundersNoteAuthor>
      </FoundersNoteFooter>
    </FoundersNote>
  )
}
Logo GridText Icons