5909b3ea87
* fix: improve faq text eligibility on dark mode * feat: add small fade out to testimonials
259 lines
8.0 KiB
TypeScript
259 lines
8.0 KiB
TypeScript
import Image from "next/image";
|
||
import { t } from "@lingui/core/macro";
|
||
import { twMerge } from "tailwind-merge";
|
||
|
||
interface Testimonial {
|
||
name: string;
|
||
handle: string;
|
||
image?: string;
|
||
colour?: string;
|
||
text: string | React.ReactNode;
|
||
role?: string;
|
||
link?: string;
|
||
rowSpan?: number;
|
||
}
|
||
|
||
const TestimonialCard = ({
|
||
testimonial,
|
||
rowSpan,
|
||
}: {
|
||
testimonial: Testimonial;
|
||
rowSpan?: number;
|
||
}) => {
|
||
// Generate initials for avatar
|
||
const initials = testimonial.name
|
||
.split(" ")
|
||
.map((n) => n[0])
|
||
.join("")
|
||
.toUpperCase();
|
||
|
||
return (
|
||
<div
|
||
className={twMerge(
|
||
"group relative rounded-2xl border border-light-200 bg-light-50 p-6 transition-all duration-200 hover:shadow-sm dark:border-dark-200 dark:bg-dark-50",
|
||
rowSpan === 2 ? "md:row-span-2" : "",
|
||
)}
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
{testimonial.image ? (
|
||
<div className="relative h-10 w-10 shrink-0 overflow-hidden rounded-full">
|
||
<Image
|
||
src={testimonial.image}
|
||
alt={testimonial.name}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-light-50 dark:text-dark-1000"
|
||
style={
|
||
testimonial.colour
|
||
? { backgroundColor: testimonial.colour }
|
||
: undefined
|
||
}
|
||
>
|
||
{initials}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<p className="font-semibold text-light-1000 dark:text-dark-1000">
|
||
{testimonial.name}
|
||
</p>
|
||
</div>
|
||
{testimonial.link ? (
|
||
<a
|
||
href={testimonial.link}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="-mt-1 block text-sm text-light-800 transition-colors hover:text-light-900 dark:text-dark-800 dark:hover:text-dark-900"
|
||
>
|
||
{testimonial.handle}
|
||
</a>
|
||
) : (
|
||
<p className="-mt-0.5 block text-sm text-light-800 dark:text-dark-800">
|
||
{testimonial.handle}
|
||
</p>
|
||
)}
|
||
{testimonial.role && (
|
||
<p className="text-xs text-light-600 dark:text-dark-600">
|
||
{testimonial.role}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 text-sm leading-relaxed text-light-950 dark:text-dark-900">
|
||
<p>{testimonial.text}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Testimonials = () => {
|
||
const testimonials: Testimonial[] = [
|
||
{
|
||
name: "Bobby Compüters",
|
||
handle: "@bobbycomputers",
|
||
image: "/testimonials/avatars/bobby_computers.jpg",
|
||
text: (
|
||
<>
|
||
Holy crap I love this app. It's brutally minimal but somehow has
|
||
everything I need.
|
||
</>
|
||
),
|
||
link: "https://x.com/bobbycomputers",
|
||
},
|
||
{
|
||
name: "JR Raphael",
|
||
handle: "@JRRaphael",
|
||
image: "/testimonials/avatars/jrraphael.png",
|
||
link: "https://www.fastcompany.com/91376028/trello-alternative-kan",
|
||
rowSpan: 2,
|
||
text: (
|
||
<>
|
||
The interesting thing about signing into Kan for the first time is
|
||
that it feels new and electrifying—and yet simultaneously quite
|
||
familiar, especially if you’ve spent any time in Trello over the
|
||
years.
|
||
<br />
|
||
<br />
|
||
As someone who connected more with Trello’s original vision and mostly
|
||
just tolerated the more recent pivots and additions, it’s a bit of a
|
||
revelation to use.
|
||
<br />
|
||
<br />
|
||
At its core, Kan gives you a super-minimalist and frills-free
|
||
Trello-style Kanban board. And the extent to which it has been able to
|
||
build upon the original Trello vision is staggering.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
name: "singiamtel",
|
||
handle: "@singiamtel",
|
||
colour: "#ff6600",
|
||
text: <>The project seems nice, but how good is that domain name</>,
|
||
link: "https://news.ycombinator.com/item?id=44157177",
|
||
},
|
||
|
||
{
|
||
name: "Jan Stgmnn",
|
||
handle: "@JanStgmnn",
|
||
image: "/testimonials/avatars/jan_stgmnn.jpg",
|
||
link: "https://x.com/JanStgmnn",
|
||
text: (
|
||
<>
|
||
Just wanted to say, that I really love the project. It's so easy to
|
||
use and has a really nice UI!
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
name: "Fox",
|
||
handle: "@dscfox",
|
||
image: "/testimonials/avatars/fox.png",
|
||
link: "https://discord.gg/e6ejRb6CmT",
|
||
rowSpan: 2,
|
||
text: (
|
||
<>
|
||
I've been looking at alternatives for months, but everything came up
|
||
short.
|
||
<br />
|
||
<br />
|
||
Some were direct clones, but lacked features I was dependent on.
|
||
Others were rich in features, but strayed too far away from the
|
||
simplicity of Trello.
|
||
<br />
|
||
<br />
|
||
This seems like the best alternative to Trello for me.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
name: "Hanno Braun",
|
||
handle: "@hannobraun",
|
||
image: "/testimonials/avatars/hanno_braun.webp",
|
||
link: "https://discord.gg/e6ejRb6CmT",
|
||
text: (
|
||
<>
|
||
I've been very impressed with the app so far! It's great to have such
|
||
a nice open source alternative to Trello.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
name: "headlessdev_",
|
||
handle: "@headlessdev_",
|
||
image: "/testimonials/avatars/headless_dev.png",
|
||
link: "https://www.reddit.com/r/selfhosted/comments/1l1f2st/i_made_an_opensource_alternative_to_trello/",
|
||
text: <>This is the best thing I've seen here in a long time</>,
|
||
},
|
||
{
|
||
name: "EHB",
|
||
handle: "@ehb3839",
|
||
image: "/testimonials/avatars/ehb.webp",
|
||
link: "https://www.reddit.com/r/selfhosted/comments/1l1f2st/i_made_an_opensource_alternative_to_trello/",
|
||
text: (
|
||
<>
|
||
It's exactly what I've been looking for recently. The simplicity of
|
||
the overall app is a pleasure to use.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
name: "Tasneema Waquar",
|
||
handle: "@tasneema_waquar",
|
||
image: "/testimonials/avatars/tasneema_waquar.jpeg",
|
||
link: "https://www.producthunt.com/products/kan-bn/reviews",
|
||
text: (
|
||
<>
|
||
The design of this project management tool is impressive. The
|
||
interface is intuitive, free of unnecessary clutter, and comes with a
|
||
solid selection of templates.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
name: "BRAVO68WEB",
|
||
handle: "@bravo68web",
|
||
image: "/testimonials/avatars/bravo68web.jpeg",
|
||
link: "https://discord.gg/e6ejRb6CmT",
|
||
text: <>I have fallen in love with the project.</>,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<div className="flex flex-col items-center justify-center px-4 pb-24">
|
||
<div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-xs text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900 lg:text-sm">
|
||
<p>{t`Testimonials`}</p>
|
||
</div>
|
||
|
||
<p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
|
||
{t`Loved by teams worldwide`}
|
||
</p>
|
||
<p className="text-md lg:text-md mt-3 max-w-[500px] text-center text-light-950 dark:text-dark-900">
|
||
{t`See what our users are saying about Kan`}
|
||
</p>
|
||
|
||
<div className="mx-auto mt-16 w-full max-w-7xl">
|
||
<div className="grid grid-cols-1 gap-4 [mask-image:linear-gradient(to_bottom,black_90%,transparent_98%)] md:auto-rows-fr md:grid-cols-3">
|
||
{testimonials.map((testimonial, index) => (
|
||
<TestimonialCard
|
||
key={`testimonial-${index}`}
|
||
testimonial={testimonial}
|
||
rowSpan={testimonial.rowSpan}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Testimonials;
|