diff --git a/apps/web/src/app/(home)/_components/testimonials.tsx b/apps/web/src/app/(home)/_components/testimonials.tsx
index 64883a2..10cb7b1 100644
--- a/apps/web/src/app/(home)/_components/testimonials.tsx
+++ b/apps/web/src/app/(home)/_components/testimonials.tsx
@@ -1,30 +1,39 @@
"use client";
-import { cn } from "@/lib/utils";
-import { ChevronLeft, ChevronRight, Terminal } from "lucide-react";
+import { Terminal } from "lucide-react";
import { motion } from "motion/react";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
import { Tweet } from "react-tweet";
const TWEET_IDS = [
+ "1930194170418999437",
"1907728148294447538",
- "1907831059275735353",
+ "1931029815047455149",
+ "1930511724702285885",
"1912836377365905496",
"1907817662215757853",
+ "1929147326955704662",
"1904228496144269699",
+ "1930257410259616057",
"1917815700980391964",
+ "1928317790588403953",
"1917640304758514093",
+ "1907831059275735353",
"1912924558522524039",
"1911490975173607495",
+ "1930104047845158972",
"1913773945523953713",
"1904241046898556970",
"1913834145471672652",
+ "1930514202260635807",
"1904144343125860404",
"1917610656477348229",
"1904215768272654825",
"1913833079342522779",
+ "1930449311848087708",
"1907723601731530820",
"1904233896851521980",
+ "1930294868808515726",
"1913801258789491021",
"1907841646513005038",
"1904301540422070671",
@@ -41,74 +50,35 @@ const TWEET_IDS = [
"1906570888897777847",
];
-const MAX_VISIBLE_PAGES = 5;
-
export default function Testimonials() {
- const [startIndex, setStartIndex] = useState(0);
- const [tweetsPerPage] = useState(6);
+ // Split tweets into 3 columns
+ const columns = useMemo(() => {
+ const col1: string[] = [];
+ const col2: string[] = [];
+ const col3: string[] = [];
- const totalPages = useMemo(
- () => Math.ceil(TWEET_IDS.length / tweetsPerPage),
- [tweetsPerPage],
- );
- const currentPage = useMemo(
- () => Math.floor(startIndex / tweetsPerPage) + 1,
- [startIndex, tweetsPerPage],
- );
+ TWEET_IDS.forEach((tweetId, index) => {
+ if (index % 3 === 0) col1.push(tweetId);
+ else if (index % 3 === 1) col2.push(tweetId);
+ else col3.push(tweetId);
+ });
- const handleNext = () => {
- setStartIndex((prev) =>
- Math.min(prev + tweetsPerPage, (totalPages - 1) * tweetsPerPage),
- );
- };
+ return [col1, col2, col3];
+ }, []);
- const handlePrev = () => {
- setStartIndex((prev) => Math.max(0, prev - tweetsPerPage));
- };
-
- const goToPage = (pageNumber: number) => {
- setStartIndex((pageNumber - 1) * tweetsPerPage);
- };
-
- const visibleTweetIndices = useMemo(() => {
- const end = Math.min(startIndex + tweetsPerPage, TWEET_IDS.length);
- return Array.from({ length: end - startIndex }, (_, i) => startIndex + i);
- }, [startIndex, tweetsPerPage]);
-
- const paginationDots = useMemo(() => {
- if (totalPages <= MAX_VISIBLE_PAGES) {
- return Array.from({ length: totalPages }, (_, i) => i + 1);
- }
-
- const startPage = Math.max(
- 1,
- Math.min(
- currentPage - Math.floor(MAX_VISIBLE_PAGES / 2),
- totalPages - MAX_VISIBLE_PAGES + 1,
- ),
- );
- const endPage = Math.min(totalPages, startPage + MAX_VISIBLE_PAGES - 1);
-
- const pages: (number | string)[] = [];
- if (startPage > 1) {
- pages.push(1);
- if (startPage > 2) pages.push("...");
- }
- for (let i = startPage; i <= endPage; i++) {
- pages.push(i);
- }
- if (endPage < totalPages) {
- if (endPage < totalPages - 1) pages.push("...");
- pages.push(totalPages);
- }
- return pages;
- }, [totalPages, currentPage]);
-
- const gridVariants = {
+ const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
- transition: { staggerChildren: 0.1, delayChildren: 0.2 },
+ transition: { staggerChildren: 0.1, delayChildren: 0.1 },
+ },
+ };
+
+ const columnVariants = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: { staggerChildren: 0.05 },
},
};
@@ -143,102 +113,125 @@ export default function Testimonials() {