With Image

An about block pairing a paragraph of background with a large photo. Use it to introduce the company while a real image builds warmth and trust.

import { Button } from '@/components/ui/button';

export default function AboutSectionWithImage() {
  return (
    <section className="container mx-auto px-4 py-24 md:px-6 2xl:max-w-[1400px]">
      <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
        <div className="space-y-6">
          <h2 className="text-3xl font-bold tracking-tight">Our Story</h2>
          <div className="space-y-4">
            <p className="text-muted-foreground">
              Founded in 2010, our company began with a simple idea: to create
              technology that truly serves people. What started as a small team
              of three passionate developers has grown into a global
              organization with offices in 12 countries.
            </p>
            <p className="text-muted-foreground">
              Over the years, we&apos;ve helped thousands of businesses
              transform their digital presence and streamline their operations.
              Our approach combines technical expertise with deep industry
              knowledge.
            </p>
            <p className="text-muted-foreground">
              Today, we continue to innovate and push boundaries, always with
              our original mission at heart: putting people first in everything
              we build.
            </p>
          </div>
          <div className="flex flex-wrap gap-4">
            <Button asChild>
              <a href="#">Learn our history</a>
            </Button>
            <Button variant="outline" asChild>
              <a href="#">Meet our team</a>
            </Button>
          </div>
        </div>
        <div className="relative aspect-video overflow-hidden rounded-lg lg:aspect-square">
          <img
            src="https://images.unsplash.com/photo-1552581234-26160f608093?q=80&w=2000"
            alt="Our team collaboration"
            className="object-cover"
            sizes="(max-width: 768px) 100vw, 50vw"
          />
        </div>
      </div>
    </section>
  );
}

About this block

With Image is a two-column about section. The left column holds a heading, three paragraphs of company background, and a pair of buttons side by side. The right column is a single photo that fills a rounded rectangle, shown as a square on large screens and a widescreen ratio on smaller ones. The two columns sit at vertical center so the text and image align naturally at any content length.

The copy, paragraph count, and button labels are all independent. You can trim to one paragraph for a tighter introduction, remove a button, or swap the image for any photo that fits the story. Nothing in the layout is tied to the specific demo text, so the structure adapts to whatever origin story or studio biography you need to tell.

When to use

Reach for this block when an about page needs more warmth than plain text alone can give. For a creative agency or studio, a strong image of the team at work, a finished project, or the studio space carries as much weight as the words next to it. This layout earns its place when the visual is part of the message, not decoration. Compared to the Simple block, it gives the image equal billing with the prose. Compared to Two Column, it focuses on a single photo rather than splitting the frame across multiple assets.

A natural flow around it on a Marketing (Legacy) page:

Before

Mission Statement to anchor the page with a single purpose before the longer story lands
A short hero to set context and bring visitors to the about section

After

Team Grid to put faces to the story you just told
Testimonials to hand the voice to clients after the studio introduces itself

What you can display

The block suits any narrative that benefits from a single strong visual alongside it. A few ways studios and creative teams use the frame:

A studio origin story. Tell how the practice started, what drove the founders, and how the work evolved over time.
A project highlight. Feature one flagship piece in the image and use the text to describe the brief, the approach, and the outcome.
A culture snapshot. Show the team in their environment and write about the values and working style that shape every engagement.

Tip: choose a photo with a clear subject and minimal busyness so it reads well cropped to a square at larger breakpoints.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

Mission Statement to anchor the page with a single purpose before the longer story lands
A short hero to set context and bring visitors to the about section

After

Team Grid to put faces to the story you just told
Testimonials to hand the voice to clients after the studio introduces itself

What you can display

The block suits any narrative that benefits from a single strong visual alongside it. A few ways studios and creative teams use the frame:

A studio origin story. Tell how the practice started, what drove the founders, and how the work evolved over time.
A project highlight. Feature one flagship piece in the image and use the text to describe the brief, the approach, and the outcome.
A culture snapshot. Show the team in their environment and write about the values and working style that shape every engagement.

Tip: choose a photo with a clear subject and minimal busyness so it reads well cropped to a square at larger breakpoints.

With Image

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display