ComponentsStory Telling

1import Image from "next/image";
2import Link from "next/link";
3
4const Storytelling = () => {
5  return (
6    <div
7      className="mb-8 leading-relaxed text-base-content/80"
8      id="storytelling"
9    >
10      <Image
11        alt="Marc"
12        loading="lazy"
13        width={240}
14        height={240}
15        className="float-left mb-8 mr-8 h-24 w-24 rounded-full"
16        style={{ color: "transparent" }}
17        src="/marc.png"
18        quality={75}
19      />
20      <p className="mb-5 text-lg font-medium text-base-content">
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 whitespace-nowrap font-medium text-base-content hover:link-success"
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="mb-5 ml-5 list-inside list-decimal space-y-1.5">
47        <li>
48          <span className="font-medium text-base-content">Save time</span> and
49          focus on what matters: building a business
50        </li>
51        <li>
52          <span className="font-medium text-base-content">Avoid headaches</span>{" "}
53          like emails ending in spam or waiting 3 days for Google to approve
54        </li>
55        <li>
56          <span className="font-medium text-base-content">
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="group link whitespace-nowrap font-medium text-base-content hover:link-success"
67          target="_blank"
68          rel="noopener noreferrer"
69        >
70          Twitter
71        </Link>{" "}
72        and
73        <span className="whitespace-nowrap font-medium text-base-content">
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;

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;