About 3

Galleries 431

About

An About Us Landing page with breakout images, logos and stats about your company and team.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds About 3 to your project and fits it to your theme.

Code

How About 3 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { About3 } from "@/components/ui/about-3";

const DemoOne = () => {
  return (
    <About3
      title="About Us"
      description="Shadcnblocks is a passionate team dedicated to creating innovative solutions that empower businesses to thrive in the digital age."
      mainImage={{
        src: "https://cdn.21st.dev/assets/mirror/9f/9fb9487617e0903ab5bb8012f11530f61a39e4f1f19f169a87a367887fdaeecb.svg",
        alt: "placeholder",
      }}
      secondaryImage={{
        src: "https://cdn.21st.dev/assets/mirror/f0/f0899c6c439a70c9602ca80add37c87c8398b7dc9566778a5894584a412749c4.svg",
        alt: "placeholder",
      }}
      breakout={{
        src: "https://cdn.21st.dev/assets/mirror/06/067c72836298829da27d230af61c2b4be0e09da5103dc2789639d18beea789f4.svg",
        alt: "logo",
        title: "Hundreds of blocks at Shadcnblocks.com",
        description:
          "Providing businesses with effective tools to improve workflows, boost efficiency, and encourage growth.",
        buttonText: "Discover more",
        buttonUrl: "https://shadcnblocks.com",
      }}
      companiesTitle="Valued by clients worldwide"
      companies={[
        {
          src: "https://cdn.21st.dev/assets/mirror/01/01eed6b231e04442ccc351628f02a2a115a69c5d21e14a5646d006c68d9ac3de.svg",
          alt: "Arc",
        },
        {
          src: "https://cdn.21st.dev/assets/mirror/51/51129a2a091b1e72cfd668d53fd5bea734a95ff5fd071fd25b866a0c1454f0e0.svg",
          alt: "Descript",
        },
        {
          src: "https://cdn.21st.dev/assets/mirror/00/0088937b0b0c70cfabea9beeab64949ab3a0b5ea52f8684a4ce7875b45a2a706.svg",
          alt: "Mercury",
        },
        {
          src: "https://cdn.21st.dev/assets/mirror/76/760366384a3523aa7b033c30a1cb3d64d0b7c93d5c2535f89a770383ee329aab.svg",
          alt: "Ramp",
        },
        {
          src: "https://cdn.21st.dev/assets/mirror/ed/ed0e41fdd91fa17618e67bb21dcf842eb10c4bd82d9196246d231d9069556406.svg",
          alt: "Retool",
        },
        {
          src: "https://cdn.21st.dev/assets/mirror/b6/b6951d37dfa577ecbd68657f8799da4a15e03e55fb110438bd7222ccc9335494.svg",
          alt: "Watershed",
        }
      ]}
      achievementsTitle="Our Achievements in Numbers"
      achievementsDescription="Providing businesses with effective tools to improve workflows, boost efficiency, and encourage growth."
      achievements={
        [
          { label: "Companies Supported", value: "300+" },
          { label: "Projects Finalized", value: "800+" },
          { label: "Happy Customers", value: "99%" },
          { label: "Recognized Awards", value: "10+" },
        ]
      }
    />
  );
};

export { DemoOne };