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.
SERP Blocks Team
Product

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:
Legitimacy — Is this a real company with real people?
Competence — Do these people know what they're doing?
Values alignment — Do I share their values and approach?
Scale and traction — How big is this company? How many customers do they serve?
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:
Hero/headline — A compelling one-liner that captures who you are
Company story — The narrative origin and purpose
Mission and values — What you believe and how you operate
Stats/metrics — Proof of traction and impact
Timeline — Visual history of growth and milestones
Team — The people behind the product
Awards/recognition — Third-party validation
Culture/photos — Visual proof of a real, thriving team
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
Imagecomponent for automatic optimization and lazy loadingServing appropriately sized images (don't load 2000px images in 200px card thumbnails)
Using
loading="lazy"for below-the-fold imagesCompressing 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
alttext (not "team photo" but "The SERP Blocks engineering team at our Portland office")Stats with animated counters need
aria-liveregions or static fallbacksTimeline 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:
| Section | Category | Count |
| Team Members | Team | 23 |
| Company Timeline | Timeline | 10 |
| Statistics | Stat | 10 |
| Awards | Awards | 10 |
| Careers | Careers | 20 |
| Logo Bars | Logos | 11 |
| Testimonials | Testimonial | 40 |
SERP Blocks includes 1200+ total blocks across 50+ categories. 60 are free, with the full library available through a one-time Pro purchase.