Skip to main content
The About component consists of two sections (AboutSectionOne and AboutSectionTwo) that tell your company’s story with images, lists, and detailed text.

​
Import

import AboutSectionOne from "@/components/About/AboutSectionOne";
import AboutSectionTwo from "@/components/About/AboutSectionTwo";

​
Usage

src/app/page.tsx
import AboutSectionOne from "@/components/About/AboutSectionOne";
import AboutSectionTwo from "@/components/About/AboutSectionTwo";

export default function Home() {
  return (
    <>
      <AboutSectionOne />
      <AboutSectionTwo />
    </>
  );
}

​
AboutSectionOne

The first about section features a two-column layout with text on the left and an image on the right.

​
Structure

src/components/About/AboutSectionOne.tsx
const AboutSectionOne = () => {
  return (
    <section id="about" className="pt-16 md:pt-20 lg:pt-28">
      <div className="container">
        <div className="border-b border-body-color/[.15] pb-16 dark:border-white/[.15] md:pb-20 lg:pb-28">
          <div className="-mx-4 flex flex-wrap items-center">
            {/* Left: Text content */}
            <div className="w-full px-4 lg:w-1/2">
              <SectionTitle {...} />
              <List items />
            </div>
            {/* Right: Image */}
            <div className="w-full px-4 lg:w-1/2">
              <Image />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

​
Features List

The component includes a reusable List component:
src/components/About/AboutSectionOne.tsx
const List = ({ text }) => (
  <p className="mb-5 flex items-center text-lg font-medium text-body-color">
    <span className="mr-4 flex h-[30px] w-[30px] items-center justify-center rounded-md bg-primary bg-opacity-10 text-primary">
      {checkIcon}
    </span>
    {text}
  </p>
);

​
Customization

<SectionTitle
  title="Your Custom Title"
  paragraph="Your description here..."
  mb="44px"
/>

​
AboutSectionTwo

The second section reverses the layout (image left, text right) and focuses on mission, vision, and values.

​
Structure

src/components/About/AboutSectionTwo.tsx
const AboutSectionTwo = () => {
  return (
    <section className="py-16 md:py-20 lg:py-28">
      <div className="container">
        <div className="-mx-4 flex flex-wrap items-center">
          {/* Left: Image */}
          <div className="w-full px-4 lg:w-1/2">
            <Image />
          </div>
          {/* Right: Mission, Vision, Values */}
          <div className="w-full px-4 lg:w-1/2">
            <div className="mb-9">
              <h3>Misión</h3>
              <p>...</p>
            </div>
            <div className="mb-9">
              <h3>Visión</h3>
              <p>...</p>
            </div>
            <div className="mb-1">
              <h3>Nuestros Valores</h3>
              <p>...</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

​
Content Blocks

Each content block follows this pattern: 
<div className="mb-9">
  <h3 className="mb-4 text-xl font-bold text-black dark:text-white sm:text-2xl lg:text-xl xl:text-2xl">
    Heading
  </h3>
  <p className="text-base font-medium leading-relaxed text-body-color sm:text-lg sm:leading-relaxed">
    Content paragraph
  </p>
</div>

​
Customization Examples

​
Add More Content Blocks

src/components/About/AboutSectionTwo.tsx
<div className="mb-9">
  <h3 className="mb-4 text-xl font-bold text-black dark:text-white sm:text-2xl lg:text-xl xl:text-2xl">
    Our Team
  </h3>
  <p className="text-base font-medium leading-relaxed text-body-color sm:text-lg sm:leading-relaxed">
    We're a passionate group of designers and developers...
  </p>
</div>

​
Swap Layout Direction

Reverse the order on mobile by changing flex order: 
<div className="w-full px-4 lg:w-1/2 order-2 lg:order-1">
  {/* Image */}
</div>
<div className="w-full px-4 lg:w-1/2 order-1 lg:order-2">
  {/* Content */}
</div>

​
Remove Bottom Border

In AboutSectionOne, remove the border: 
// Remove or modify this class
className="border-b border-body-color/[.15] pb-16 dark:border-white/[.15]"

​
Styling

​
Images

Both sections use SVG images with light/dark variants: 
{/* Light mode */}
<Image
  src="/images/about/about-image.svg"
  alt="about-image"
  fill
  className="dark:hidden"
/>

{/* Dark mode */}
<Image
  src="/images/about/about-image-dark.svg"
  alt="about-image"
  fill
  className="hidden dark:block"
/>

​
Responsive Spacing

// Section padding
className="pt-16 md:pt-20 lg:pt-28"
className="py-16 md:py-20 lg:py-28"

// Container padding bottom
className="pb-16 md:pb-20 lg:pb-28"

​
Column Layout

// Mobile: Full width, Desktop: Half width
className="w-full lg:w-1/2"

​
Accessibility

  • AboutSectionOne has id="about" for anchor navigation
  • Proper heading hierarchy (h3 subheadings)
  • Semantic HTML with <section> wrappers
  • Alt text for all images
  • Sufficient color contrast

​
Best Practices

Use short paragraphs and clear headings. Break up long text into digestible chunks.
SVG images scale perfectly. If using photos, ensure they’re optimized and at least 1000px wide.
Use the List component to highlight key features or achievements with visual indicators.
Keep text and image sections roughly equal in visual weight.

​
Common Patterns

​
Two-Column Split

Both sections use the same layout pattern: 
<div className="flex flex-wrap items-center">
  <div className="w-full lg:w-1/2">{/* Column 1 */}</div>
  <div className="w-full lg:w-1/2">{/* Column 2 */}</div>
</div>

​
Check Icon List

Reuse the List component pattern throughout your app: 
const List = ({ text }) => (
  <p className="mb-5 flex items-center text-lg font-medium text-body-color">
    <span className="mr-4 flex h-[30px] w-[30px] items-center justify-center rounded-md bg-primary bg-opacity-10 text-primary">
      {checkIcon}
    </span>
    {text}
  </p>
);

Build docs developers (and LLMs) love

Get started for freeTalk to us