Skip to content

Commit a026cdd

Browse files
zxch3nzxch3n
committed
feat: add testimonial from marimo.io
1 parent 467358c commit a026cdd

5 files changed

Lines changed: 303 additions & 102 deletions

File tree

‎components/Testimonial.tsx‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@ interface TestimonialProps {
149149
fullQuote: string;
150150
link?: string;
151151
avatarAlt?: string;
152+
tweetLink?: string;
152153
}
153154

154155
export default function Testimonial({
@@ -160,6 +161,7 @@ export default function Testimonial({
160161
fullQuote,
161162
link,
162163
avatarAlt,
164+
tweetLink,
163165
}: TestimonialProps) {
164166
const [isModalOpen, setIsModalOpen] = useState(false);
165167
const [isExpanded, setIsExpanded] = useState(false);
@@ -291,14 +293,28 @@ export default function Testimonial({
291293
<div className="mt-4 font-medium text-white/95">
292294
<div className="flex flex-row gap-4 items-center">
293295
<img src={avatarSrc} alt={avatarAlt || author} className="w-16 h-16 rounded-full object-cover" />
294-
<div>
295-
<p>{author}</p>
296-
<p className="text-sm">
296+
<div className="flex-1">
297+
<div>{author}</div>
298+
<div className="text-sm">
297299
{link ? (
298300
<a href={link} target="_blank" rel="noopener noreferrer">{company}</a>
299301
) : (<>{company}</>)}
300-
</p>
302+
</div>
301303
</div>
304+
{tweetLink && (
305+
<a
306+
href={tweetLink}
307+
target="_blank"
308+
rel="noopener noreferrer"
309+
className="text-blue-400 hover:text-blue-300 transition-colors p-2 hover:bg-zinc-700/50 rounded-full"
310+
aria-label="View original tweet"
311+
onClick={(e) => e.stopPropagation()}
312+
>
313+
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
314+
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
315+
</svg>
316+
</a>
317+
)}
302318
</div>
303319
</div>
304320
</div>
@@ -334,10 +350,24 @@ export default function Testimonial({
334350

335351
<div className="flex items-center mt-10 pt-6 border-t border-zinc-700">
336352
<img src={avatarSrc} alt={avatarAlt || author} className="w-14 h-14 rounded-full object-cover mr-5 ring-2 ring-blue-500/30" />
337-
<div>
338-
<p className="font-semibold text-white text-lg">{author}</p>
339-
<p className="text-gray-400">{link ? (<a href={link} target="_blank" rel="noopener noreferrer">{company}</a>) : (<>{company}</>)}</p>
353+
<div className="flex-1">
354+
<div className="font-semibold text-white text-lg">{author}</div>
355+
<div className="text-gray-400">{link ? (<a href={link} target="_blank" rel="noopener noreferrer">{company}</a>) : (<>{company}</>)}</div>
340356
</div>
357+
{tweetLink && (
358+
<a
359+
href={tweetLink}
360+
target="_blank"
361+
rel="noopener noreferrer"
362+
className="text-blue-400 hover:text-blue-300 transition-colors p-2 hover:bg-zinc-700/50 rounded-full ml-4"
363+
aria-label="View original tweet"
364+
onClick={(e) => e.stopPropagation()}
365+
>
366+
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
367+
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
368+
</svg>
369+
</a>
370+
)}
341371
</div>
342372
</div>
343373
</div>

‎components/landing/CustomerWall.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
export default function CustomerWall() {
2+
return (
3+
<section className="px-5 md:px-15 mt-32 z-10 relative">
4+
{/* Section Header */}
5+
<div className="text-center mb-20">
6+
<h2 className="text-4xl md:text-5xl not-italic font-bold bg-clip-text mb-8 bg-blue-green text-fill-transparent" style={{ lineHeight: 1.5 }}>
7+
Who's Using Loro
8+
</h2>
9+
</div>
10+
11+
{/* Main Container */}
12+
<div className="relative max-w-6xl mx-auto">
13+
{/* Customer logos container */}
14+
<div className="relative bg-zinc-900/40 backdrop-blur-sm p-8 md:p-12">
15+
{/* Grid container */}
16+
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 md:gap-8 lg:gap-10">
17+
18+
{/* Latch.bio */}
19+
<div className="group">
20+
<a
21+
href="https://latch.bio"
22+
target="_blank"
23+
rel="noopener noreferrer"
24+
className="flex items-center justify-center p-6 h-24 bg-zinc-800/30 border border-zinc-700/30 rounded-xl hover:border-zinc-600/50 hover:bg-zinc-800/50 transition-all duration-300 group"
25+
>
26+
<img
27+
src="/images/latchbio.svg"
28+
alt="Latch.bio"
29+
className="max-w-[120px] max-h-12 w-auto h-auto brightness-[0.9] contrast-[1.1] group-hover:brightness-110 transition-all duration-300"
30+
/>
31+
</a>
32+
</div>
33+
34+
{/* Marimo */}
35+
<div className="group">
36+
<a
37+
href="https://marimo.io"
38+
target="_blank"
39+
rel="noopener noreferrer"
40+
className="flex items-center justify-center p-6 h-24 bg-zinc-800/30 border border-zinc-700/30 rounded-xl hover:border-zinc-600/50 hover:bg-zinc-800/50 transition-all duration-300 group"
41+
>
42+
<img
43+
src="/images/marimo.svg"
44+
alt="Marimo.io"
45+
className="max-w-[100px] max-h-10 w-auto h-auto invert hue-rotate-180 brightness-[1.5] grayscale-[50%] group-hover:brightness-[1.8] group-hover:grayscale-[30%] transition-all duration-300"
46+
/>
47+
</a>
48+
</div>
49+
50+
{/* Dora */}
51+
<div className="group">
52+
<a
53+
href="https://dora.run"
54+
target="_blank"
55+
rel="noopener noreferrer"
56+
className="flex items-center justify-center p-6 h-24 bg-zinc-800/30 border border-zinc-700/30 rounded-xl hover:border-zinc-600/50 hover:bg-zinc-800/50 transition-all duration-300 group"
57+
>
58+
<img
59+
src="/images/dora.png"
60+
alt="Dora.run"
61+
className="max-w-[100px] max-h-10 w-auto h-auto invert hue-rotate-180 brightness-[1.5] grayscale-[50%] group-hover:brightness-[1.8] group-hover:grayscale-[30%] transition-all duration-300"
62+
/>
63+
</a>
64+
</div>
65+
66+
{/* Subset */}
67+
<div className="group">
68+
<a
69+
href="https://subset.so"
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
className="flex items-center justify-center p-6 h-24 bg-zinc-800/30 border border-zinc-700/30 rounded-xl hover:border-zinc-600/50 hover:bg-zinc-800/50 transition-all duration-300 group"
73+
>
74+
<img
75+
src="/images/subset.png"
76+
alt="Subset"
77+
className="max-w-[120px] max-h-12 w-auto h-auto brightness-[0.8] group-hover:brightness-100 transition-all duration-300"
78+
/>
79+
</a>
80+
</div>
81+
82+
{/* Roomy */}
83+
<div className="group">
84+
<a
85+
href="https://roomy.chat/"
86+
target="_blank"
87+
rel="noopener noreferrer"
88+
className="flex items-center justify-center p-6 h-24 bg-zinc-800/30 border border-zinc-700/30 rounded-xl hover:border-zinc-600/50 hover:bg-zinc-800/50 transition-all duration-300 group"
89+
>
90+
<div className="flex items-center">
91+
<img
92+
src="/images/roomy.png"
93+
alt="Roomy"
94+
className="h-8 grayscale-[40%] brightness-[1.1] mr-2 group-hover:grayscale-[20%] group-hover:brightness-[1.3] transition-all duration-300"
95+
/>
96+
<span className="text-zinc-300 text-xl font-medium group-hover:text-zinc-100 transition-colors duration-300">Roomy</span>
97+
</div>
98+
</a>
99+
</div>
100+
101+
{/* Nema */}
102+
<div className="group">
103+
<a
104+
href="https://nemastudio.app/"
105+
target="_blank"
106+
rel="noopener noreferrer"
107+
className="flex items-center justify-center p-6 h-24 bg-zinc-800/30 border border-zinc-700/30 rounded-xl hover:border-zinc-600/50 hover:bg-zinc-800/50 transition-all duration-300 group"
108+
>
109+
<img
110+
src="/images/nema.svg"
111+
alt="Nema"
112+
className="max-w-[100px] max-h-10 w-auto h-auto invert grayscale-[80%] group-hover:grayscale-[60%] group-hover:brightness-110 transition-all duration-300"
113+
/>
114+
</a>
115+
</div>
116+
117+
{/* AX Semantics */}
118+
<div className="group md:col-span-2 lg:col-span-1">
119+
<a
120+
href="https://ax-semantics.com"
121+
target="_blank"
122+
rel="noopener noreferrer"
123+
className="flex items-center justify-center p-6 h-24 bg-zinc-800/30 border border-zinc-700/30 rounded-xl hover:border-zinc-600/50 hover:bg-zinc-800/50 transition-all duration-300 group"
124+
>
125+
<img
126+
src="/images/ax-semantics.svg"
127+
alt="ax-semantics"
128+
className="max-w-[120px] max-h-12 w-auto h-auto brightness-[0.8] group-hover:brightness-100 transition-all duration-300"
129+
/>
130+
</a>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
</section>
136+
);
137+
}

‎pages/index.mdx‎

Lines changed: 13 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import FollowOnGitHub from "@components/landing/FollowOnGitHub";
1414
import Hero from "@components/landing/Hero";
1515
import Background from "@components/landing/Background";
1616
import Footer from "@components/landing/Footer";
17+
import CustomerWall from "@components/landing/CustomerWall";
1718
import { Separator } from "@ariakit/react";
1819
import Demo from "@components/richtextDemo";
1920
import Testimonial from "@components/Testimonial";
@@ -37,103 +38,10 @@ import Testimonial from "@components/Testimonial";
3738
</section>
3839
<Features />
3940

40-
<section className="px-5 md:px-15 mt-4 z-10 relative">
41-
<h2 className="text-4xl text-center not-italic font-semibold leading-[normal] bg-clip-text mb-16 bg-blue-green text-fill-transparent">
42-
Who's Using Loro
43-
</h2>
44-
<div className="mt-10 mb-8 grid grid-cols-2 md:grid-cols-3 gap-y-10 sm:gap-y-12 gap-x-4 sm:gap-x-6 max-w-4xl mx-auto px-4">
45-
<div className="flex flex-col items-center justify-center">
46-
<a
47-
href="https://latch.bio"
48-
target="_blank"
49-
rel="noopener noreferrer"
50-
className="hover:opacity-80 transition-opacity w-28 sm:w-32 md:w-36 flex items-center justify-center"
51-
>
52-
<img
53-
src="/images/latchbio.svg"
54-
alt="Latch.bio"
55-
className="w-full brightness-[0.9] contrast-[1.1]"
56-
/>
57-
</a>
58-
</div>
59-
<div className="flex flex-col items-center justify-center">
60-
<a
61-
href="https://dora.run"
62-
target="_blank"
63-
rel="noopener noreferrer"
64-
className="hover:opacity-80 transition-opacity w-28 sm:w-32 md:w-36 flex items-center justify-center"
65-
>
66-
<img
67-
src="/images/dora.png"
68-
alt="Dora.run"
69-
className="w-3/4 invert hue-rotate-180 brightness-[1.5] grayscale-[50%]"
70-
/>
71-
</a>
72-
</div>
73-
<div className="flex flex-col items-center justify-center">
74-
<a
75-
href="https://subset.so"
76-
target="_blank"
77-
rel="noopener noreferrer"
78-
className="hover:opacity-80 transition-opacity w-28 sm:w-32 md:w-36 flex items-center justify-center"
79-
>
80-
<img
81-
src="/images/subset.png"
82-
alt="Subset"
83-
className="w-full brightness-[0.8]"
84-
/>
85-
</a>
86-
</div>
87-
<div className="flex flex-col items-center justify-center">
88-
<a
89-
href="https://roomy.chat/"
90-
target="_blank"
91-
rel="noopener noreferrer"
92-
className="hover:opacity-80 transition-opacity w-28 sm:w-32 md:w-36 flex items-center justify-center"
93-
>
94-
<div className="flex items-center">
95-
<img
96-
src="/images/roomy.png"
97-
alt="Roomy"
98-
className="h-6 sm:h-7 md:h-8 grayscale-[40%] brightness-[1.1] mr-1 sm:mr-2"
99-
/>
100-
<span className="text-zinc-300 text-lg sm:text-lg md:text-xl">Roomy</span>
101-
</div>
102-
</a>
103-
</div>
104-
<div className="flex flex-col items-center justify-center">
105-
<a
106-
href="https://nemastudio.app/"
107-
target="_blank"
108-
rel="noopener noreferrer"
109-
className="hover:opacity-80 transition-opacity w-28 sm:w-32 md:w-36 flex items-center justify-center"
110-
>
111-
<img
112-
src="/images/nema.svg"
113-
alt="Nema"
114-
className="w-3/4 invert grayscale-[80%]"
115-
/>
116-
</a>
117-
</div>
118-
<div className="flex flex-col items-center justify-center">
119-
<a
120-
href="https://ax-semantics.com"
121-
target="_blank"
122-
rel="noopener noreferrer"
123-
className="hover:opacity-80 transition-opacity w-28 sm:w-32 md:w-36 flex items-center justify-center"
124-
>
125-
<img
126-
src="/images/ax-semantics.svg"
127-
alt="ax-semantics"
128-
className="w-full brightness-[0.8]"
129-
/>
130-
</a>
131-
</div>
132-
</div>
133-
</section>
41+
<CustomerWall />
13442

13543
<section className="px-5 md:px-15 mt-20 z-[11] mb-20 relative">
136-
<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-5 [&>*]:w-full">
44+
<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 [&>*]:w-full">
13745
<Testimonial
13846
id="latch-quote"
13947
author="Max"
@@ -143,6 +51,16 @@ import Testimonial from "@components/Testimonial";
14351
fullQuote="We use Loro as the document representation for our web-based computational notebook software, Latch Plots, via web-assembly. With a CRDT, we can support multiple simultaneous users without having to reinvent the wheel building custom error-prone state management systems. Multi-user interactions 'just work' in a lot of cases and, for ironing out the kinks in the rest, Loro provides state-of-the-art building blocks.\n\nCompared to other CRDT implementations, Loro better matches user expectations and feels more production-ready—the extensive documentation and blogs go into the gory technical details. When the docs are not enough, the Loro team has been fantastic in direct communication—supporting us in designing the state data model and with general issues, and taking our needs and wants into account in planning the project roadmap. \n\n This library is a great step forward toward making 'multiplayer' apps the norm, in a world where the best most users see is still the relatively primitive operational systems like in Google Docs."
14452
link="https://latch.bio"
14553
/>
54+
<Testimonial
55+
id="marimo-quote"
56+
author="Myles"
57+
company="Marimo.io"
58+
avatarSrc="/images/myles.jpg"
59+
shortQuote="if you are looking for a real-time collaboration library (based on CRDTs), I highly recommend @loro_dev. it's performant, type-safe, and actively maintained\n and I've tried them all"
60+
fullQuote="if you are looking for a real-time collaboration library (based on CRDTs), I highly recommend @loro_dev. it's performant, type-safe, and actively maintained\n and I've tried them all"
61+
link="https://marimo.io"
62+
tweetLink="https://x.com/themylesfiles/status/1925221425838797226"
63+
/>
14664
<Testimonial
14765
id="cole-quote"
14866
author="Cole Lawrence"

0 commit comments

Comments
 (0)