diff --git a/apps/web/public/testimonials/avatars/bobby_computers.jpg b/apps/web/public/testimonials/avatars/bobby_computers.jpg new file mode 100644 index 00000000..6a09ce39 Binary files /dev/null and b/apps/web/public/testimonials/avatars/bobby_computers.jpg differ diff --git a/apps/web/public/testimonials/avatars/bravo68web.jpeg b/apps/web/public/testimonials/avatars/bravo68web.jpeg new file mode 100644 index 00000000..0c1d9ee9 Binary files /dev/null and b/apps/web/public/testimonials/avatars/bravo68web.jpeg differ diff --git a/apps/web/public/testimonials/avatars/ehb.webp b/apps/web/public/testimonials/avatars/ehb.webp new file mode 100644 index 00000000..7e12f4d4 Binary files /dev/null and b/apps/web/public/testimonials/avatars/ehb.webp differ diff --git a/apps/web/public/testimonials/avatars/fox.png b/apps/web/public/testimonials/avatars/fox.png new file mode 100644 index 00000000..5c8d1a9e Binary files /dev/null and b/apps/web/public/testimonials/avatars/fox.png differ diff --git a/apps/web/public/testimonials/avatars/hanno_braun.webp b/apps/web/public/testimonials/avatars/hanno_braun.webp new file mode 100644 index 00000000..6e80284c Binary files /dev/null and b/apps/web/public/testimonials/avatars/hanno_braun.webp differ diff --git a/apps/web/public/testimonials/avatars/headless_dev.png b/apps/web/public/testimonials/avatars/headless_dev.png new file mode 100644 index 00000000..8ddc3d21 Binary files /dev/null and b/apps/web/public/testimonials/avatars/headless_dev.png differ diff --git a/apps/web/public/testimonials/avatars/jan_stgmnn.jpg b/apps/web/public/testimonials/avatars/jan_stgmnn.jpg new file mode 100644 index 00000000..7ba0198b Binary files /dev/null and b/apps/web/public/testimonials/avatars/jan_stgmnn.jpg differ diff --git a/apps/web/public/testimonials/avatars/jrraphael.png b/apps/web/public/testimonials/avatars/jrraphael.png new file mode 100644 index 00000000..b3098878 Binary files /dev/null and b/apps/web/public/testimonials/avatars/jrraphael.png differ diff --git a/apps/web/public/testimonials/avatars/tasneema_waquar.jpeg b/apps/web/public/testimonials/avatars/tasneema_waquar.jpeg new file mode 100644 index 00000000..a59c5448 Binary files /dev/null and b/apps/web/public/testimonials/avatars/tasneema_waquar.jpeg differ diff --git a/apps/web/src/views/home/components/Testimonials.tsx b/apps/web/src/views/home/components/Testimonials.tsx new file mode 100644 index 00000000..c46446b7 --- /dev/null +++ b/apps/web/src/views/home/components/Testimonials.tsx @@ -0,0 +1,258 @@ +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 ( +
+
+ {testimonial.image ? ( +
+ {testimonial.name} +
+ ) : ( +
+ {initials} +
+ )} + +
+
+

+ {testimonial.name} +

+
+ {testimonial.link ? ( + + {testimonial.handle} + + ) : ( +

+ {testimonial.handle} +

+ )} + {testimonial.role && ( +

+ {testimonial.role} +

+ )} +
+
+ +
+

{testimonial.text}

+
+
+ ); +}; + +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. +
+
+ 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. +
+
+ 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. +
+
+ 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. +
+
+ 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 ( + <> +
+
+

{t`Testimonials`}

+
+ +

+ {t`Loved by teams worldwide`} +

+

+ {t`See what our users are saying about Kan`} +

+ +
+
+ {testimonials.map((testimonial, index) => ( + + ))} +
+
+
+ + ); +}; + +export default Testimonials; diff --git a/apps/web/src/views/home/index.tsx b/apps/web/src/views/home/index.tsx index 2a52ca2a..1ffa1069 100644 --- a/apps/web/src/views/home/index.tsx +++ b/apps/web/src/views/home/index.tsx @@ -12,6 +12,7 @@ import FAQs from "./components/Faqs"; import Features from "./components/Features"; import Layout from "./components/Layout"; import Logos from "./components/Logos"; +import Testimonials from "./components/Testimonials"; export default function HomeView() { const { resolvedTheme } = useTheme(); @@ -110,6 +111,10 @@ export default function HomeView() {
+
+
+ +