Back to blog
Component Blocks
9 min read
Shadcn UI
About Page

32 About Page Sections Built with Shadcn UI

Browse 32 about page section designs for React and Next.js — company story, mission and values, timeline history, team introductions, and stats. Built with Shadcn UI and Tailwind CSS.

SB

SERP Blocks Team

Product

32 About Page Sections Built with Shadcn UI cover

The about page is the most visited non-homepage on most company websites. According to analytics data across thousands of sites, the about page consistently ranks in the top three most-viewed pages — behind the homepage and ahead of pricing. Yet it's often the last page developers build and the first one they cut corners on.

A strong about page builds trust, communicates values, and converts skeptical visitors into customers. It answers the fundamental question every visitor has: "Who are these people, and why should I trust them?"

The SERP Blocks about collection includes 32 about page section designs — from compact company overviews to full narrative layouts with timelines, team introductions, and achievement showcases.

What Makes an About Page Effective

Before diving into specific layout patterns, it's worth understanding what visitors actually look for on an about page. User research consistently reveals a few core needs:

  1. Legitimacy — Is this a real company with real people?

  2. Competence — Do these people know what they're doing?

  3. Values alignment — Do I share their values and approach?

  4. Scale and traction — How big is this company? How many customers do they serve?

  5. Story — How did this start, and where is it going?

Every about page section should serve at least one of these needs. If a section doesn't contribute to trust, competence, values, scale, or narrative, it's filler.

About Page Section Patterns

Company Story Sections

The narrative foundation of the about page — who you are, how you started, and what drives you. Company story sections typically feature a headline, 2-4 paragraphs of narrative text, and an accompanying image or illustration.

Story sections come in several layout variants:

  • Text-left, image-right — The classic split layout with narrative text on one side and a photo (team, office, product) on the other

  • Full-width text — A centered, narrow-column narrative that reads like an editorial piece

  • Text with pull quote — Narrative text with a highlighted quote from the founder or CEO

  • Video story — Text introduction with an embedded video for a deeper dive

The key to an effective company story section is specificity. "We're passionate about building great software" says nothing. "We started in a garage in Portland in 2019 because we were tired of paying $500/month for CRM software that didn't work" says everything.

Mission and Values Sections

Structured presentations of what your company believes and prioritizes. Mission and values sections typically use a grid or list layout with icons, short headings, and supporting text.

Common layouts include:

  • Icon grid — 3-6 values displayed as cards with icons, titles, and short descriptions

  • Numbered list — Sequential list of principles, each with a paragraph of explanation

  • Two-column split — Mission statement on the left, values grid on the right

  • Full-width cards — Large cards stacked vertically, each dedicated to one value with extended text

Values sections are only effective when they're specific and credible. Generic values like "Innovation," "Excellence," and "Integrity" are so overused they've become meaningless. Instead, use values that reflect actual decisions your company has made: "We ship weekly because momentum matters more than perfection" or "We publish our pricing because hidden costs waste everyone's time."

Founder/Leadership Spotlight

A section dedicated to the founding team or leadership, with larger photos, extended bios, and personal context. Unlike the team grid (which shows everyone equally), the leadership spotlight highlights 1-3 key people with deeper information.

Variants include:

  • Side-by-side — Photo on one side, bio and credentials on the other

  • Card with social links — Compact card with photo, title, bio, and links to LinkedIn/Twitter

  • Quote-focused — Large photo with a pull quote from the leader about the company vision

  • Timeline bio — Career history presented as a mini-timeline

Leadership spotlights are particularly important for B2B companies and startups, where the credibility of the founding team directly impacts customer and investor confidence.

Stats and Metrics Sections

Numeric achievements presented prominently — customers served, revenue processed, uptime percentage, years in business, countries reached. Stats sections use large numbers as the visual focal point, often with animated counters that increment when the section scrolls into view.

Layout patterns:

  • Horizontal row — 3-5 stats in a single row with large numbers and labels

  • Grid with icons — Stats presented as cards with relevant icons

  • Full-width alternating — Stats interspersed with explanatory text

  • Background image overlay — Stats laid over a team or office photo with a dark overlay

For dedicated stat components with counter animations and advanced layouts, see the SERP Blocks stat collection — 10 designs with various animation and presentation styles.

Stats build credibility through specificity. "Thousands of customers" is weak. "12,847 companies across 43 countries" is compelling. Use real numbers, update them regularly, and cite them honestly.

Timeline/History Sections

Chronological presentations of company milestones — founding date, key hires, product launches, funding rounds, major partnerships. Timelines tell a visual story of growth and progress.

Timeline layouts include:

  • Vertical timeline — Events listed vertically with alternating left/right positioning

  • Horizontal scrolling — Events on a horizontal axis that scrolls left/right

  • Compact list — Year and milestone in a simple list format

  • Card-based — Each milestone in a card with date, title, description, and optional image

Timelines work for companies with at least 3-5 meaningful milestones. If your company is new, a timeline with two entries looks sparse — in that case, integrate your history into the company story section instead.

The SERP Blocks timeline collection includes 10 timeline designs that can be used as standalone sections or embedded within the about page.

Team Introduction Sections

A preview of the full team — typically showing 4-8 key team members with the option to view the complete team on a dedicated page or expand the section. Team introduction sections on the about page serve as a bridge between the company narrative and the human element.

Common patterns:

  • Compact grid — 4-6 team members in a grid with photos, names, and roles

  • Featured + grid — CEO/founder in a large card, rest in a smaller grid

  • Carousel preview — Scrollable team member cards with a "View all" link

  • Photo collage — Overlapping or mosaic team photos that create visual energy

For the full range of team section designs — grids, carousels, bio layouts, department groupings — see the SERP Blocks team collection with 23 dedicated designs.

Awards and Recognition Sections

Logos, badges, and descriptions of awards, certifications, and press mentions. Awards sections provide third-party validation — someone else has recognized your work, which carries more weight than self-promotion.

Variants include:

  • Logo bar — Horizontal row of award/certification logos

  • Cards with descriptions — Each award in a card with the logo, name, year, and a brief description

  • Press mentions — Publication logos with quotes from reviews or articles

For dedicated award and recognition components, browse the SERP Blocks awards collection — 10 designs covering award showcases, certification badges, and press mention layouts.

Photo and Culture Sections

Visual sections showcasing office life, team events, work environment, and company culture. These sections rely on photography rather than text and are especially effective for companies actively recruiting.

Layouts include:

  • Photo grid — 4-9 photos in a masonry or uniform grid

  • Full-width image — A single large team photo or office shot

  • Carousel — Scrollable collection of culture photos

  • Split with text — Photos on one side, culture description on the other

About Page Best Practices by Company Type

Corporate and Enterprise

Corporate about pages need to project stability, scale, and expertise. Prioritize:

  • Leadership team with credentials and background

  • Company history with a detailed timeline

  • Stats emphasizing scale (employees, offices, revenue, customers)

  • Awards, certifications, and regulatory compliance

  • Partner and client logos

  • Board of directors or advisory board

Use formal photography, structured layouts, and restrained design. Corporate visitors expect professionalism, not personality.

Startups and SaaS

Startup about pages need to build credibility quickly with a smaller track record. Prioritize:

  • Founding story — why this problem, why this team, why now

  • Team bios with relevant experience (previous companies, domain expertise)

  • Traction stats (users, growth rate, funding) — even small numbers presented honestly build trust

  • Mission and values that differentiate you from incumbents

  • Investor logos if applicable

Startups can be more informal and personality-driven. Show the humans behind the product.

Agencies and Consultancies

Agency about pages sell expertise and relationships. Prioritize:

  • Team members with individual bios and specialties

  • Client logos and case study references

  • Awards and industry recognition

  • Process or methodology explanation

  • Culture and work environment

Agencies should demonstrate visual craft on their about page — it's a portfolio piece in itself.

Non-Profits and Organizations

Non-profit about pages need to inspire trust and alignment with the cause. Prioritize:

  • Mission statement front and center

  • Impact stats (people served, funds distributed, projects completed)

  • Leadership and board transparency

  • History and founding purpose

  • Financial transparency references (annual reports, ratings)

Structuring a Complete About Page

A well-structured about page flows like a narrative. Here's a recommended section order:

  1. Hero/headline — A compelling one-liner that captures who you are

  2. Company story — The narrative origin and purpose

  3. Mission and values — What you believe and how you operate

  4. Stats/metrics — Proof of traction and impact

  5. Timeline — Visual history of growth and milestones

  6. Team — The people behind the product

  7. Awards/recognition — Third-party validation

  8. Culture/photos — Visual proof of a real, thriving team

  9. CTA — What you want the visitor to do next (contact, demo, careers)

Not every about page needs all nine sections. A startup might use sections 1, 2, 4, and 6. An enterprise company might use all nine. The 32 blocks in the SERP Blocks about collection cover every section type, so you can compose exactly the page you need.

Technical Considerations

Performance

About pages are often image-heavy (team photos, culture shots, office images). Optimize performance by:

  • Using Next.js Image component for automatic optimization and lazy loading

  • Serving appropriately sized images (don't load 2000px images in 200px card thumbnails)

  • Using loading="lazy" for below-the-fold images

  • Compressing all images — team headshots should be under 100KB each

  • Using WebP or AVIF formats where supported

SEO

About pages carry significant SEO weight:

  • Use structured data (Organization schema) to help Google understand your company

  • Include your company name, founding date, founders, and location in the page content

  • Link to social profiles for entity recognition

  • Use descriptive alt text on all images

  • The about page URL should be /about — simple and crawlable

Accessibility

  • All images need meaningful alt text (not "team photo" but "The SERP Blocks engineering team at our Portland office")

  • Stats with animated counters need aria-live regions or static fallbacks

  • Timeline sections need proper heading hierarchy

  • Color contrast must meet WCAG AA on all text, including text overlaid on images

  • Interactive elements (expand buttons, carousels) need keyboard support

Related Block Categories

About page sections combine naturally with:

SectionCategoryCount
Team MembersTeam23
Company TimelineTimeline10
StatisticsStat10
AwardsAwards10
CareersCareers20
Logo BarsLogos11
TestimonialsTestimonial40

SERP Blocks includes 1200+ total blocks across 50+ categories. 60 are free, with the full library available through a one-time Pro purchase.

Browse all 32 about page sections →

    32 About Page Sections Built with Shadcn UI | SERP BLOCKS