mirror of
https://github.com/StanGirard/quivr.git
synced 2024-12-24 11:52:45 +03:00
feat: add testimonials section (#1427)
Issue: https://github.com/StanGirard/quivr/issues/1428 https://github.com/StanGirard/quivr/assets/63923024/b0b25f3e-d038-4740-b581-e3c256d89902
This commit is contained in:
Mamadou DICKO
GitHub
parent
220a062340
commit
1cd99ae234
@ -1,10 +0,0 @@
|
||||
export const TestimonialsSection = (): JSX.Element => {
|
||||
return (
|
||||
<>
|
||||
<h2 className="text-2xl text-center">What people say about Quivr</h2>
|
||||
<div className="w-[80vw] md:w-[400px] h-[80vw] md:h-[400px] bg-slate-200 rounded flex items-center justify-center">
|
||||
💬 Testimonials
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,4 +1,3 @@
|
||||
export * from "./DemoSection/DemoSection";
|
||||
export * from "./FooterSection";
|
||||
export * from "./IntroSection";
|
||||
export * from "./TestimonialsSection";
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { TestimonialCard } from "./components/TestimonialCard";
|
||||
import { testimonialsExamples } from "./data/testimonialsExamples";
|
||||
import { Testimonial } from "./types";
|
||||
|
||||
export const TestimonialsSection = (): JSX.Element => {
|
||||
const { t } = useTranslation("home", {
|
||||
keyPrefix: "testimonials",
|
||||
});
|
||||
|
||||
const [testimonials, setTestimonials] = useState<Testimonial[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setTestimonials(testimonialsExamples);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="text-4xl font-semibold my-10">
|
||||
{t("title")} <span className="text-primary">Quivr</span>{" "}
|
||||
</p>
|
||||
<div className="grid grid-cols-12 gap-10 mb-5 items-stretch p-4">
|
||||
{testimonials.map((testimonial) => (
|
||||
<div
|
||||
className="col-span-12 md:col-span-4 h-full"
|
||||
key={testimonial.content}
|
||||
>
|
||||
<TestimonialCard {...testimonial} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,46 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { Avatar } from "@/lib/components/ui/Avatar";
|
||||
|
||||
import { Testimonial } from "../types";
|
||||
import { socialMediaToIcon } from "../utils/socialMediaToIcon";
|
||||
|
||||
export const TestimonialCard = ({
|
||||
socialMedia,
|
||||
url,
|
||||
user,
|
||||
jobTitle,
|
||||
content,
|
||||
profilePicture,
|
||||
}: Testimonial): JSX.Element => {
|
||||
return (
|
||||
<div className="px-8 py-4 rounded-3xl shadow-2xl dark:shadow-white/25 w-full bg-white dark:bg-black h-full flex flex-col gap-3">
|
||||
<Link
|
||||
href={url}
|
||||
className="hover:text-black"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="w-full flex justify-end">
|
||||
{socialMediaToIcon[socialMedia]}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<p className="flex-1 italic">"{content}"</p>
|
||||
<div>
|
||||
<div className="flex mt-3 flex-1 items-center">
|
||||
<Avatar
|
||||
url={profilePicture ?? "https://www.gravatar.com/avatar?d=mp"}
|
||||
alt={`${user}-profile`}
|
||||
imgClassName={"rounded-full"}
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
<div className="flex-1 ml-3">
|
||||
<p className="font-semibold">{user}</p>
|
||||
<p className="text-sm">{jobTitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,44 @@
|
||||
import { Testimonial } from "../types";
|
||||
|
||||
export const testimonialsExamples: Testimonial[] = [
|
||||
{
|
||||
socialMedia: "linkedin",
|
||||
url: "https://www.linkedin.com/in/alexandru-georgescu-0a0b1a1a3/",
|
||||
user: "Mamadou DICKO",
|
||||
jobTitle: "Software Developer @Theodo",
|
||||
content: "Quivr is a great tool for researcher to share their work.",
|
||||
profilePicture:
|
||||
"https://media.licdn.com/dms/image/D4E03AQGByQj-wdh1Og/profile-displayphoto-shrink_100_100/0/1671624108600?e=1703116800&v=beta&t=EaQvA2roS7QORvQm_uhdAem9VRmZb_KV7-3Vyd3FGjI",
|
||||
},
|
||||
{
|
||||
socialMedia: "x",
|
||||
url: "https://www.linkedin.com/in/john-doe-12345678/",
|
||||
user: "John Doe",
|
||||
jobTitle: "Marketing Manager",
|
||||
content:
|
||||
"I've had the pleasure of working with John for over three years. His marketing strategies are second to none.",
|
||||
},
|
||||
{
|
||||
socialMedia: "linkedin",
|
||||
url: "https://www.linkedin.com/in/sarah-smith-abcdef12/",
|
||||
user: "Sarah Smith",
|
||||
jobTitle: "Graphic Designer",
|
||||
content: "Sarah's c",
|
||||
},
|
||||
{
|
||||
socialMedia: "x",
|
||||
url: "https://www.linkedin.com/in/robert-james-98765432/",
|
||||
user: "Robert James",
|
||||
jobTitle: "Financial Analyst",
|
||||
content:
|
||||
"Robert's financial expertise has been instrumental in our company's success. He's a true asset to our team.",
|
||||
},
|
||||
{
|
||||
socialMedia: "linkedin",
|
||||
url: "https://www.linkedin.com/in/lisa-anderson-567890ab/",
|
||||
user: "Lisa Anderson",
|
||||
jobTitle: "Project Manager",
|
||||
content:
|
||||
"Lisa is an excellent project manager. She keeps projects on track and ",
|
||||
},
|
||||
];
|
||||
@ -0,0 +1 @@
|
||||
export * from "./TestimonialsSection";
|
||||
@ -0,0 +1,8 @@
|
||||
export type Testimonial = {
|
||||
socialMedia: "x" | "linkedin";
|
||||
url: string;
|
||||
jobTitle: string;
|
||||
content: string;
|
||||
user: string;
|
||||
profilePicture?: string;
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
import { AiFillLinkedin } from "react-icons/ai";
|
||||
import { RiTwitterXFill } from "react-icons/ri";
|
||||
|
||||
import { Testimonial } from "../types";
|
||||
|
||||
export const socialMediaToIcon: Record<
|
||||
Testimonial["socialMedia"],
|
||||
JSX.Element
|
||||
> = {
|
||||
linkedin: <AiFillLinkedin />,
|
||||
x: <RiTwitterXFill />,
|
||||
};
|
||||
@ -2,3 +2,4 @@ export * from "./HomeHeader/HomeHeader";
|
||||
export * from "./HomeSection/HomeSection";
|
||||
export * from "./Sections";
|
||||
export * from "./SecuritySection";
|
||||
export * from "./TestimonialsSection";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
import { Avatar } from "@/lib/components/ui/Avatar";
|
||||
import { useSupabase } from "@/lib/context/SupabaseProvider";
|
||||
|
||||
import { useGravatar } from "../../../../../hooks/useGravatar";
|
||||
@ -12,15 +12,7 @@ export const UserButton = (): JSX.Element => {
|
||||
|
||||
return (
|
||||
<Link aria-label="account" className={sidebarLinkStyle} href={"/user"}>
|
||||
<div className="relative w-8 h-8">
|
||||
<Image
|
||||
alt="gravatar"
|
||||
fill={true}
|
||||
sizes="32px"
|
||||
src={gravatarUrl}
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<Avatar url={gravatarUrl} alt="user-gravatar" />
|
||||
<span className="text-ellipsis overflow-hidden">
|
||||
{session?.user.email ?? ""}
|
||||
</span>
|
||||
|
||||
28
frontend/lib/components/ui/Avatar.tsx
Normal file
28
frontend/lib/components/ui/Avatar.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type AvatarProps = {
|
||||
url: string;
|
||||
alt: string;
|
||||
imgClassName?: string;
|
||||
className?: string;
|
||||
};
|
||||
export const Avatar = ({
|
||||
url,
|
||||
alt,
|
||||
imgClassName,
|
||||
className,
|
||||
}: AvatarProps): JSX.Element => {
|
||||
return (
|
||||
<div className={cn("relative w-8 h-8", className)}>
|
||||
<Image
|
||||
alt={alt}
|
||||
fill={true}
|
||||
sizes="32px"
|
||||
src={url}
|
||||
className={cn("rounded-xl", imgClassName)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -5,6 +5,7 @@ const nextConfig = {
|
||||
"www.quivr.app",
|
||||
"quivr-cms.s3.eu-west-3.amazonaws.com",
|
||||
"www.gravatar.com",
|
||||
"media.licdn.com",
|
||||
],
|
||||
},
|
||||
// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
|
||||
|
||||
@ -25,5 +25,8 @@
|
||||
"description_2": "Simply upload your files and ask questions to it.",
|
||||
"start_using": "Start using Quivr",
|
||||
"contact_sales": "Contact sales team"
|
||||
},
|
||||
"testimonials":{
|
||||
"title": "What people say about"
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,5 +25,8 @@
|
||||
"description_2": "Simplemente carga tus archivos y hazle preguntas.",
|
||||
"start_using": "Comienza a usar Quivr",
|
||||
"contact_sales": "Contacta al equipo de ventas"
|
||||
},
|
||||
"testimonials":{
|
||||
"title": "Lo que la gente dice sobre"
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,5 +25,8 @@
|
||||
"description_2": "Il vous suffit de télécharger vos fichiers et de lui poser des questions.",
|
||||
"start_using": "Commencez à utiliser Quivr",
|
||||
"contact_sales": "Contacter l'équipe commerciale"
|
||||
},
|
||||
"testimonials":{
|
||||
"title": "Ce que les gens disent à propos de"
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,5 +25,8 @@
|
||||
"description_2": "Basta fazer upload de seus arquivos e fazer perguntas a ele.",
|
||||
"start_using": "Comece a usar o Quivr",
|
||||
"contact_sales": "Entre em contato com a equipe de vendas"
|
||||
},
|
||||
"testimonials":{
|
||||
"title": "O que as pessoas dizem sobre"
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,5 +25,8 @@
|
||||
"description_2": "Просто загрузите свои файлы и задайте ему вопросы.",
|
||||
"start_using": "Начать использовать Quivr",
|
||||
"contact_sales": "Свяжитесь с отделом продаж"
|
||||
},
|
||||
"testimonials":{
|
||||
"title": "Что люди говорят о"
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,5 +25,8 @@
|
||||
"description_2": "只需上传您的文件并向其提问。",
|
||||
"start_using": "开始使用Quivr",
|
||||
"contact_sales": "联系销售团队"
|
||||
},
|
||||
"testimonials":{
|
||||
"title": "人们对此的评价"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user