ComponentsStory Telling
Credit goes to alberduris for re-creating this ShipFast component.
A way to tell your story and how you got the idea for your product.
Code
/components/Storytelling.tsx
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'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'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;
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;