From cbde1de7138af6ae86ce7085e59fe05cc724fa37 Mon Sep 17 00:00:00 2001 From: Ali Samadi Date: Wed, 13 Nov 2024 22:18:50 -0800 Subject: [PATCH] docs: testimonial section (#517) --- docs/components/features.tsx | 256 ++++++++++--------------- docs/components/infinite-scrolling.tsx | 139 ++++++++++++++ docs/components/testimonial.tsx | 112 +++++++++++ docs/next.config.mjs | 3 + docs/tailwind.config.js | 7 + 5 files changed, 363 insertions(+), 154 deletions(-) create mode 100644 docs/components/infinite-scrolling.tsx create mode 100644 docs/components/testimonial.tsx diff --git a/docs/components/features.tsx b/docs/components/features.tsx index 80f0eba8..3d6ada0e 100644 --- a/docs/components/features.tsx +++ b/docs/components/features.tsx @@ -1,6 +1,7 @@ "use client"; +import React from "react"; + import { - CheckIcon, Globe2Icon, PlugIcon, PlugZap2Icon, @@ -8,168 +9,115 @@ import { RabbitIcon, ShieldCheckIcon, Webhook, - XIcon, } from "lucide-react"; -import { GitHubLogoIcon, LockClosedIcon } from "@radix-ui/react-icons"; -import Link from "next/link"; -import { Button } from "./ui/button"; -import React, { useState } from "react"; +import { LockClosedIcon } from "@radix-ui/react-icons"; + import { TechStackDisplay } from "./display-techstack"; import { Ripple } from "./ripple"; import { GithubStat } from "./github-stat"; +import Testimonial from "./testimonial"; +import { cn } from "@/lib/utils"; + +const features = [ + { + id: 1, + label: "Framework Agnostic", + title: "Supports popular frameworks", + description: + "Supports popular frameworks, including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt, Hono, and more.", + icon: PlugZap2Icon, + }, + { + id: 2, + label: "Authentication", + title: "Email & Password Authentication", + description: + "Built-in support for email and password authentication, with secure password hashing and account management features.", + icon: LockClosedIcon, + }, + { + id: 3, + label: "Social Sign-on", + title: "Support multiple OAuth providers", + description: + "Allow users to sign in with their accounts, including GitHub, Google, Discord, Twitter, and more.", + icon: Webhook, + }, + { + id: 4, + label: "Two Factor", + title: "Two Factor Authentication", + description: + "With our built-in two factor authentication plugin, you can add an extra layer of security to your account.", + icon: ShieldCheckIcon, + }, + { + id: 5, + label: "Organization & Access Control", + title: "Gain and manage access.", + description: + "Manage users and their access to resources within your application.", + icon: RabbitIcon, + }, + { + id: 6, + label: "Plugin Ecosystem", + title: "Extend your application with plugins.", + description: + "Enhance your application with our official plugins and those created by the community.", + icon: PlugIcon, + }, +]; export default function Features({ stars }: { stars: string | null }) { return ( -
- -
-
- +
+
+
+
+ + +
+ {features.map((feature, index) => ( +
= 3 && "md:border-t-[1.2px]", + )} + > +
+ +

+ {feature.label} +

+
+
+
+
+

+

+
+

+ {feature.description} + + Learn more + +

+
+
+ ))} +
-
- -

- Framework Agnostic{" "} -

-
-
-
-
-

- Supports popular frameworks -

-
-
-

- Supports your favorite frontend, backend and meta frameworks, - including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt, Hono, - and more.{" "} - - Learn more - -

-
-
-
- + -
- -

Authentication

-
-
-
-
-

- Email & Password Authentication -

-
-
-

- Built-in support for email and password authentication, with - secure password hashing and account management features.{" "} - - Learn more - -

-
-
-
- - -
- -

Social Sign-on

-
-
-
-
-

- Support multiple OAuth providers. -

-
-
-

- Allow users to sign in with their accounts, including GitHub, - Google, Discord, Twitter, and more.{" "} - - Learn more - -

-
-
-
-
- -

Two Factor

-
-
-
-
-

- Two Factor Authentication -

-
-
-

- With our built-in two factor authentication plugin, you can add an - extra layer of security to your account.{" "} - - Learn more - -

-
-
-
-
- -

- Organization & Access Control{" "} -

-
-
-
-
-

- Gain and manage access. -

-
-
-

- Manage users and their access to resources within your - application.{" "} - - Learn more - -

-
-
-
-
- -

- Plugin Ecosystem{" "} -

-
-
-
-

- Extend your application with plugins -

-
-
-
-

- Enhance your application with our official plugins and those - created by the community.{" "} - - Learn more - -

-
-
-
-
+
+
diff --git a/docs/components/infinite-scrolling.tsx b/docs/components/infinite-scrolling.tsx new file mode 100644 index 00000000..2f26772f --- /dev/null +++ b/docs/components/infinite-scrolling.tsx @@ -0,0 +1,139 @@ +"use client"; + +import React, { useEffect, useState } from "react"; +import Image from "next/image"; + +import { cn } from "@/lib/utils"; +import { Testimonial } from "./testimonial"; + +export const InfiniteMovingCards = ({ + items, + direction = "left", + speed = "fast", + pauseOnHover = true, + className, +}: { + items: Testimonial[]; + direction?: "left" | "right"; + speed?: "fast" | "normal" | "slow"; + pauseOnHover?: boolean; + className?: string; +}) => { + const containerRef = React.useRef(null); + const scrollerRef = React.useRef(null); + + useEffect(() => { + addAnimation(); + }, []); + const [start, setStart] = useState(false); + function addAnimation() { + if (containerRef.current && scrollerRef.current) { + const scrollerContent = Array.from(scrollerRef.current.children); + + scrollerContent.forEach((item) => { + const duplicatedItem = item.cloneNode(true); + if (scrollerRef.current) { + scrollerRef.current.appendChild(duplicatedItem); + } + }); + + getDirection(); + getSpeed(); + setStart(true); + } + } + const getDirection = () => { + if (containerRef.current) { + if (direction === "left") { + containerRef.current.style.setProperty( + "--animation-direction", + "forwards", + ); + } else { + containerRef.current.style.setProperty( + "--animation-direction", + "reverse", + ); + } + } + }; + const getSpeed = () => { + if (containerRef.current) { + if (speed === "fast") { + containerRef.current.style.setProperty("--animation-duration", "20s"); + } else if (speed === "normal") { + containerRef.current.style.setProperty("--animation-duration", "40s"); + } else { + containerRef.current.style.setProperty("--animation-duration", "80s"); + } + } + }; + return ( + + ); +}; diff --git a/docs/components/testimonial.tsx b/docs/components/testimonial.tsx new file mode 100644 index 00000000..0160bcbd --- /dev/null +++ b/docs/components/testimonial.tsx @@ -0,0 +1,112 @@ +import React from "react"; +import { InfiniteMovingCards } from "./infinite-scrolling"; + +type Props = {}; + +export interface Testimonial { + id: number; + from: string; + avatar: string; + message: string; + link: string; + social: "x" | "linkedin"; +} + +const testimonials1: Testimonial[] = [ + { + id: 1, + from: "Edgaras", + avatar: + "https://pbs.twimg.com/profile_images/1648089090947010560/xGxBzHki_400x400.jpg", + message: + "๐Ÿฅˆ @better_auth is approaching v1 release - promising to become the most comprehensive, framework-agnostic authentication library for TypeScript. Perfect for developers who want to focus on building their application!", + link: "https://x.com/edgarasben/status/1856336936505590160", + social: "linkedin", + }, + { + id: 2, + from: "Yusuf Mansur ร–zer", + avatar: + "https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg", + message: + "Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. ๐Ÿ‘€", + link: "https://x.com/ymansurozer/status/1855579561875943731", + social: "x", + }, + { + id: 3, + from: "Yusuf Mansur ร–zer", + avatar: + "https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg", + message: + "Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. ๐Ÿ‘€", + link: "https://x.com/ymansurozer/status/1855579561875943731", + social: "x", + }, + { + id: 4, + from: "Yusuf Mansur ร–zer", + avatar: + "https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg", + message: + "Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. ๐Ÿ‘€", + link: "https://x.com/ymansurozer/status/1855579561875943731", + social: "x", + }, +]; + +const testimonials2: Testimonial[] = [ + { + id: 1, + from: "Edgaras", + avatar: + "https://pbs.twimg.com/profile_images/1648089090947010560/xGxBzHki_400x400.jpg", + message: + "๐Ÿฅˆ @better_auth is approaching v1 release - promising to become the most comprehensive, framework-agnostic authentication library for TypeScript. Perfect for developers who want to focus on building their application!", + link: "https://x.com/edgarasben/status/1856336936505590160", + social: "x", + }, + { + id: 2, + from: "Yusuf Mansur ร–zer", + avatar: + "https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg", + message: + "Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. ๐Ÿ‘€", + link: "https://x.com/ymansurozer/status/1855579561875943731", + social: "x", + }, + { + id: 3, + from: "Yusuf Mansur ร–zer", + avatar: + "https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg", + message: + "Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. ๐Ÿ‘€", + link: "https://x.com/ymansurozer/status/1855579561875943731", + social: "x", + }, + { + id: 4, + from: "Yusuf Mansur ร–zer", + avatar: + "https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg", + message: + "Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. ๐Ÿ‘€", + link: "https://x.com/ymansurozer/status/1855579561875943731", + social: "x", + }, +]; + +export default function Testimonial({}: Props) { + return ( +
+ + +
+ ); +} diff --git a/docs/next.config.mjs b/docs/next.config.mjs index f54b472f..556d844b 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -28,6 +28,9 @@ export default withMDX({ { hostname: "assets.aceternity.com", }, + { + hostname: "pbs.twimg.com", + }, ], }, }); diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index 508808f5..5cfe69c5 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -129,11 +129,18 @@ export default { height: "0", }, }, + scroll: { + to: { + transform: "translate(calc(-50% - 0.5rem))", + }, + }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite", + scroll: + "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite", }, }, },