Story First Narrative

A reading focused section that tells your origin story in flowing paragraphs. Use it to explain how a studio or person came to be and what drives it.

import { Check } from "lucide-react";

export default function MissionAndValuesStoryFirst() {
  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        {/* Personal Story */}
        <div className="mx-auto mb-16 max-w-4xl">
          <h2 className="mb-6 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
            Our Journey
          </h2>

          <div className="prose dark:prose-invert lg:prose-lg max-w-none">
            <p>
              It all began in a small apartment in 2015. With nothing but a
              laptop and a vision, we set out to change how people interact with
              digital products. The early days were challenging — long nights,
              countless iterations, and moments of doubt.
            </p>

            <p>
              Our first breakthrough came when we partnered with a local
              business facing a critical challenge. By focusing on their unique
              needs rather than applying a one-size-fits-all approach, we
              created a solution that transformed their operations. That success
              taught us a fundamental lesson: genuine understanding of
              people&apos;s needs is the foundation of meaningful innovation.
            </p>

            <p>
              As we grew from that two-person team to the organization we are
              today, we&apos;ve held onto that principle. Whether working with
              startups or established enterprises, we approach each project with
              the same dedication to understanding, creating, and delivering
              solutions that make a difference.
            </p>
          </div>
        </div>

        {/* Mission Statement */}
        <div className="bg-card mx-auto mb-12 max-w-3xl rounded-lg border p-8 text-center shadow-sm">
          <h3 className="mb-4 text-2xl font-bold">Our Mission</h3>
          <p className="text-muted-foreground text-lg">
            To empower businesses and individuals through thoughtful digital
            solutions that balance innovation with human-centered design.
          </p>
        </div>

        {/* Core Values List */}
        <div className="mx-auto max-w-3xl">
          <h3 className="mb-6 text-center text-2xl font-bold">
            Our Core Values
          </h3>

          <div className="grid gap-4 sm:grid-cols-2">
            {[
              {
                title: "Empathy First",
                description:
                  "We listen before we create, understanding needs before proposing solutions.",
              },
              {
                title: "Continuous Learning",
                description:
                  "We embrace change and constantly seek new knowledge and perspectives.",
              },
              {
                title: "Quality Craftsmanship",
                description:
                  "We take pride in our work and pay attention to every detail.",
              },
              {
                title: "Transparent Partnership",
                description:
                  "We build relationships based on honesty, clarity, and mutual respect.",
              },
            ].map((value, i) => (
              <div
                key={i}
                className="flex items-start gap-3 rounded-md border p-4"
              >
                <div className="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
                  <Check className="h-3.5 w-3.5" />
                </div>
                <div>
                  <h4 className="font-medium">{value.title}</h4>
                  <p className="text-muted-foreground mt-1 text-sm">
                    {value.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

About this block

Story First Narrative opens with a large heading and three flowing prose paragraphs that tell an origin story in reading order. Below that sits a centered card containing a bold mission statement heading and a single descriptive sentence. The block closes with a two-column grid of four values cards, each showing a check icon, a short title, and one line of supporting text.

All three sections are independent. You can rewrite the prose paragraphs to match your own timeline, swap the mission statement for any positioning sentence, and add or remove values cards without affecting the narrative above. The heading and each paragraph are plain text, so the copy is easy to update in place.

When to use

Reach for this block when an online education platform or similar knowledge-focused product needs to explain its founding story before presenting credentials or course offerings. The narrative format suits an About page or a standalone mission page where you want visitors to read rather than scan. Compared to the grid or pillars layouts in this group, it leads with context and earns trust through story before stating values, which works well when the audience needs to understand the reasoning behind the product before committing.

A natural flow around it on a Portfolio page:

Before

A Hero Showcase to introduce the brand before the full story begins
A Why Work With Me section if a personal pitch precedes the origin context

After

A Three Pillars Layout to reinforce the mission with a structured summary of guiding ideas
A Case Studies group page to back up the origin story with concrete project outcomes

What you can display

The layout works for any story where context and mission belong on the same page. A few ways to use it:

Founding story. Walk through the moments that shaped the product, from an early insight to a first customer win, so visitors understand where the work comes from.
Educational philosophy. Use the prose section to explain a learning approach or pedagogy, then anchor it with a mission statement that spells out the outcome for students.
Team principles. Replace the origin copy with a statement of how the team operates and use the values grid to name the specific behaviors that follow from it.

Tip: keep the values grid to four items so the two-column layout stays balanced and none of the cards wrap to an awkward third line.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

A Hero Showcase to introduce the brand before the full story begins
A Why Work With Me section if a personal pitch precedes the origin context

After

A Three Pillars Layout to reinforce the mission with a structured summary of guiding ideas
A Case Studies group page to back up the origin story with concrete project outcomes

What you can display

The layout works for any story where context and mission belong on the same page. A few ways to use it:

Founding story. Walk through the moments that shaped the product, from an early insight to a first customer win, so visitors understand where the work comes from.
Educational philosophy. Use the prose section to explain a learning approach or pedagogy, then anchor it with a mission statement that spells out the outcome for students.
Team principles. Replace the origin copy with a statement of how the team operates and use the values grid to name the specific behaviors that follow from it.

Tip: keep the values grid to four items so the two-column layout stays balanced and none of the cards wrap to an awkward third line.

Story First Narrative

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display