franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): testimonials responsiveness and add more testimonials

Browse Source
This commit is contained in:
Aman Varshney
2025-07-20 17:15:08 +05:30
parent b65aa47ee3
commit 81975cfef4
2 changed files with 134 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
apps/web/src/app/(home)/_components/testimonials.tsx
View File

@@ -1,8 +1,7 @@
"use client"; "use client";
import { motion } from "framer-motion";
import { Terminal } from "lucide-react"; import { Terminal } from "lucide-react";
import { motion } from "motion/react";
import { useMemo } from "react";
import { Tweet } from "react-tweet"; import { Tweet } from "react-tweet";
const TWEET_IDS = [ const TWEET_IDS = [
@@ -13,9 +12,11 @@ const TWEET_IDS = [
"1933149770639614324", "1933149770639614324",
"1937599252173128103", "1937599252173128103",
"1930511724702285885", "1930511724702285885",
"1945204056063913989",
"1912836377365905496", "1912836377365905496",
"1907817662215757853", "1907817662215757853",
"1933216760896934060", "1933216760896934060",
"1942558041704182158",
"1937383786637094958", "1937383786637094958",
"1931709370003583004", "1931709370003583004",
"1929147326955704662", "1929147326955704662",
@@ -27,29 +28,39 @@ const TWEET_IDS = [
"1917640304758514093", "1917640304758514093",
"1907831059275735353", "1907831059275735353",
"1912924558522524039", "1912924558522524039",
"1945054982870282575",
"1933150129738981383", "1933150129738981383",
"1911490975173607495", "1911490975173607495",
"1930104047845158972", "1930104047845158972",
"1913773945523953713", "1913773945523953713",
"1944937093387706572",
"1904241046898556970", "1904241046898556970",
"1913834145471672652", "1913834145471672652",
"1946245671880966269",
"1930514202260635807", "1930514202260635807",
"1931589579749892480", "1931589579749892480",
"1904144343125860404", "1904144343125860404",
"1917610656477348229", "1917610656477348229",
"1904215768272654825", "1904215768272654825",
"1931830211013718312", "1931830211013718312",
"1944895251811893680",
"1913833079342522779", "1913833079342522779",
"1930449311848087708", "1930449311848087708",
"1942680754384953790",
"1907723601731530820", "1907723601731530820",
"1944553262792810603",
"1904233896851521980", "1904233896851521980",
"1930294868808515726", "1930294868808515726",
"1943290033383047237",
"1913801258789491021", "1913801258789491021",
"1907841646513005038", "1907841646513005038",
"1904301540422070671", "1904301540422070671",
"1944208789617471503",
"1912837026925195652", "1912837026925195652",
"1904338606409531710", "1904338606409531710",
"1942965795920679188",
"1904318186750652606", "1904318186750652606",
"1943656585294643386",
"1908568583799484519", "1908568583799484519",
"1913018977321693448", "1913018977321693448",
"1904179661086556412", "1904179661086556412",
@@ -61,20 +72,18 @@ const TWEET_IDS = [
]; ];
export default function Testimonials() { export default function Testimonials() {
// Split tweets into 3 columns const getResponsiveColumns = (numCols: number) => {
const columns = useMemo(() => { const columns: string[][] = Array(numCols)
const col1: string[] = []; .fill(null)
const col2: string[] = []; .map(() => []);
const col3: string[] = [];
TWEET_IDS.forEach((tweetId, index) => { TWEET_IDS.forEach((tweetId, index) => {
if (index % 3 === 0) col1.push(tweetId); const colIndex = index % numCols;
else if (index % 3 === 1) col2.push(tweetId); columns[colIndex].push(tweetId);
else col3.push(tweetId);
}); });
return [col1, col2, col3]; return columns;
}, []); };
const containerVariants = { const containerVariants = {
hidden: { opacity: 0 }, hidden: { opacity: 0 },
@@ -92,8 +101,43 @@ export default function Testimonials() {
}, },
}; };
const TweetCard = ({
tweetId,
index,
}: {
tweetId: string;
index: number;
}) => (
<motion.div
className="w-full min-w-0"
initial={{ opacity: 0, y: 20, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{
delay: index * 0.05,
duration: 0.4,
ease: "easeOut",
}}
>
<div className="terminal-block-hover w-full min-w-0 overflow-hidden rounded border border-border bg-background">
<div className="sticky top-0 z-10 border-border border-b bg-muted/20 px-3 py-2">
<div className="flex items-center gap-2">
<span className="text-primary text-xs">▶</span>
<span className="font-mono font-semibold text-xs">
[TWEET_{String(index + 1).padStart(3, "0")}]
</span>
</div>
</div>
<div className="w-full min-w-0 overflow-hidden">
<div style={{ width: "100%", minWidth: 0, maxWidth: "100%" }}>
<Tweet id={tweetId} />
</div>
</div>
</div>
</motion.div>
);
return ( return (
<div className="mb-12"> <div className="mb-12 w-full max-w-full overflow-hidden px-4">
<div className="mb-6 flex flex-wrap items-center justify-between gap-2 sm:flex-nowrap"> <div className="mb-6 flex flex-wrap items-center justify-between gap-2 sm:flex-nowrap">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Terminal className="h-5 w-5 text-primary" /> <Terminal className="h-5 w-5 text-primary" />
@@ -122,114 +166,74 @@ export default function Testimonials() {
</div> </div>
</div> </div>
<motion.div <div className="block sm:hidden">
className="flex flex-col gap-4 sm:flex-row"
variants={containerVariants}
initial="hidden"
animate="visible"
>
<motion.div <motion.div
className="flex flex-1 flex-col gap-4" className="flex flex-col gap-4"
variants={columnVariants} variants={containerVariants}
initial="hidden"
animate="visible"
> >
{columns[0]?.map((tweetId, tweetIndex) => { {TWEET_IDS.map((tweetId, index) => (
const globalIndex = 0 + tweetIndex * 3; <TweetCard key={tweetId} tweetId={tweetId} index={index} />
return ( ))}
<motion.div
key={tweetId}
className="terminal-block-hover overflow-hidden rounded border border-border bg-background"
initial={{ opacity: 0, y: 20, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{
delay: tweetIndex * 0.05,
duration: 0.4,
ease: "easeOut",
}}
>
<div className="sticky top-0 z-10 border-border border-b bg-muted/20 px-3 py-2">
<div className="flex items-center gap-2">
<span className="text-primary text-xs">▶</span>
<span className="font-mono font-semibold text-xs">
[TWEET_{String(globalIndex + 1).padStart(3, "0")}]
</span>
</div>
</div>
<div className="p-0">
<Tweet id={tweetId} />
</div>
</motion.div>
);
})}
</motion.div> </motion.div>
</div>
<div className="hidden sm:block lg:hidden">
<motion.div <motion.div
className="flex flex-1 flex-col gap-4" className="grid grid-cols-2 gap-4"
variants={columnVariants} variants={containerVariants}
initial="hidden"
animate="visible"
> >
{columns[1]?.map((tweetId, tweetIndex) => { {getResponsiveColumns(2).map((column, colIndex) => (
const globalIndex = 1 + tweetIndex * 3; <motion.div
return ( key={column.join("-")}
<motion.div className="flex min-w-0 flex-col gap-4"
key={tweetId} variants={columnVariants}
className="terminal-block-hover overflow-hidden rounded border border-border bg-background" >
initial={{ opacity: 0, y: 20, scale: 0.95 }} {column.map((tweetId, tweetIndex) => {
animate={{ opacity: 1, y: 0, scale: 1 }} const globalIndex = colIndex + tweetIndex * 2;
transition={{ return (
delay: tweetIndex * 0.05, <TweetCard
duration: 0.4, key={tweetId}
ease: "easeOut", tweetId={tweetId}
}} index={globalIndex}
> />
<div className="sticky top-0 z-10 border-border border-b bg-muted/20 px-3 py-2"> );
<div className="flex items-center gap-2"> })}
<span className="text-primary text-xs">▶</span> </motion.div>
<span className="font-mono font-semibold text-xs"> ))}
[TWEET_{String(globalIndex + 1).padStart(3, "0")}]
</span>
</div>
</div>
<div className="p-0">
<Tweet id={tweetId} />
</div>
</motion.div>
);
})}
</motion.div> </motion.div>
</div>
<div className="hidden lg:block">
<motion.div <motion.div
className="flex flex-1 flex-col gap-4" className="grid grid-cols-3 gap-4"
variants={columnVariants} variants={containerVariants}
initial="hidden"
animate="visible"
> >
{columns[2]?.map((tweetId, tweetIndex) => { {getResponsiveColumns(3).map((column, colIndex) => (
const globalIndex = 2 + tweetIndex * 3; <motion.div
return ( key={column.join("-")}
<motion.div className="flex min-w-0 flex-col gap-4"
key={tweetId} variants={columnVariants}
className="terminal-block-hover overflow-hidden rounded border border-border bg-background" >
initial={{ opacity: 0, y: 20, scale: 0.95 }} {column.map((tweetId, tweetIndex) => {
animate={{ opacity: 1, y: 0, scale: 1 }} const globalIndex = colIndex + tweetIndex * 3;
transition={{ return (
delay: tweetIndex * 0.05, <TweetCard
duration: 0.4, key={tweetId}
ease: "easeOut", tweetId={tweetId}
}} index={globalIndex}
> />
<div className="sticky top-0 z-10 border-border border-b bg-muted/20 px-3 py-2"> );
<div className="flex items-center gap-2"> })}
<span className="text-primary text-xs">▶</span> </motion.div>
<span className="font-mono font-semibold text-xs"> ))}
[TWEET_{String(globalIndex + 1).padStart(3, "0")}]
</span>
</div>
</div>
<div className="p-0">
<Tweet id={tweetId} />
</div>
</motion.div>
);
})}
</motion.div> </motion.div>
</motion.div> </div>
</div> </div>
); );
} }

20
apps/web/src/app/global.css
View File

@@ -12,6 +12,26 @@
.react-tweet-theme { .react-tweet-theme {
--tweet-container-margin: 0 !important; --tweet-container-margin: 0 !important;
@apply !bg-background !border-none !h-full !border-transparent !w-full; @apply !bg-background !border-none !h-full !border-transparent !w-full;
max-width: 100% !important;
min-width: 0 !important;
}
.react-tweet-theme > * {
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
}
.react-tweet-theme img,
.react-tweet-theme video {
max-width: 100% !important;
height: auto !important;
}
.react-tweet-theme * {
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
} }
.shiny-text { .shiny-text {