ComponentsStory Telling

Credit goes to alberduris for re-creating this ShipFast component.

Table of Contents:

A way to tell your story and how you got the idea for your product.

Story Telling Component

Code

/components/Storytelling.tsx

1import Image from "next/image";
2import Link from "next/link";
3
4const Storytelling = () => {
5  return (
6    <div
7      className="leading-relaxed text-base-content/80 mb-8"
8      id="storytelling"
9    >
10      <Image
11        alt="Marc"
12        loading="lazy"
13        width={240}
14        height={240}
15        className="w-24 h-24 rounded-full float-left mr-8 mb-8"
16        style={{ color: "transparent" }}
17        src="/marc.png"
18        quality={75}
19      />
20      <p className="mb-5 text-base-content text-lg font-medium">
21        Hey, it&apos;s Marc πŸ‘‹
22      </p>
23      <p className="mb-5">
24        In 2018, I believed I was Mark Zuckerberg, built a startup for 1 year,
25        and got 0 users...
26      </p>
27      <p className="mb-5">
28        A few years after my burnout, I restarted the journey differently: I
29        shipped like a madman β€”
30        <Link
31          href="https://marclou.com?ref=shipfast_intro"
32          className="link text-base-content font-medium hover:link-success whitespace-nowrap"
33          target="_blank"
34          rel="noopener noreferrer"
35        >
36          {" "}
37          16 startups in 2 years.
38        </Link>{" "}
39        Now I&apos;m happy and earn $20,000 a month.
40      </p>
41      <p className="mb-5">
42        I realized I was doing the same thing over and over: set up DNS records,
43        listen to Stripe webhooks, design pricing section... So I built ShipFast
44        for 3 reasons:
45      </p>
46      <ul className="list-inside list-decimal space-y-1.5 ml-5 mb-5">
47        <li>
48          <span className="text-base-content font-medium">Save time</span> and
49          focus on what matters: building a business
50        </li>
51        <li>
52          <span className="text-base-content font-medium">Avoid headaches</span>{" "}
53          like emails ending in spam or waiting 3 days for Google to approve
54        </li>
55        <li>
56          <span className="text-base-content font-medium">
57            Get profitable fast
58          </span>
59          β€”the more you ship, the more you learn, the more you earn
60        </li>
61      </ul>
62      <p>
63        50,000+ people trust me on{" "}
64        <Link
65          href="https://x.com/marc_louvion"
66          className="link whitespace-nowrap text-base-content hover:link-success font-medium group"
67          target="_blank"
68          rel="noopener noreferrer"
69        >
70          Twitter
71        </Link>{" "}
72        and
73        <span className="text-base-content font-medium whitespace-nowrap">
74          {" "}
75          1423 indie makers
76        </span>{" "}
77        are using ShipFast to launch startups quickly, scroll to see what they
78        say.
79      </p>
80    </div>
81  );
82};
83
84export default Storytelling;

Usage

/components/Demo.tsx

1import Storytelling from "./Storytelling";
2
3function Demo() {
4  return (
5    <>
6      <section>
7        ...
8        <Storytelling />
9        ...
10      </section>
11    </>
12  );
13};
14
15export default Demo;