redesign landing page (fifth time :)

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, Terminal } from "lucide-react";
 import { motion } from "motion/react";
 import { useMemo, useState } from "react";
 import { Tweet } from "react-tweet";
@@ -113,105 +113,130 @@ export default function Testimonials() {
 	};
 
 	return (
-		<motion.section className="relative z-10 mx-auto w-full max-w-7xl space-y-12 px-4 py-16 sm:px-6 sm:py-24 lg:space-y-16 lg:px-8">
-			<div className="text-center">
-				<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl">
-					Loved by <span className="text-primary">Developers</span>
-				</h2>
-				<p className="mx-auto mt-4 max-w-2xl font-mono text-lg text-muted-foreground leading-relaxed">
-					See what people are saying about Better-T-Stack on X.
-				</p>
+		<div className="mb-12">
+			<div className="mb-6 flex items-center gap-2">
+				<Terminal className="terminal-glow h-4 w-4 text-primary" />
+				<span className="terminal-glow font-bold font-mono text-lg">
+					DEVELOPER_TESTIMONIALS.LOG
+				</span>
+				<div className="h-px flex-1 bg-border" />
+				<span className="font-mono text-muted-foreground text-xs">
+					[{TWEET_IDS.length} ENTRIES]
+				</span>
+			</div>
+
+			<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
+				<div className="flex items-center gap-2 text-sm">
+					<span className="terminal-glow text-primary">$</span>
+					<span className="font-mono text-foreground">
+						# Community feedback from X (Twitter)
+					</span>
+				</div>
+				<div className="mt-2 flex items-center gap-2 text-sm">
+					<span className="terminal-glow text-primary">$</span>
+					<span className="font-mono text-muted-foreground">
+						# Real developers sharing their experience
+					</span>
+				</div>
 			</div>
 
 			<motion.div
-				className={cn("grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3")}
+				className={cn("grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3")}
 				variants={gridVariants}
+				initial="hidden"
+				animate="visible"
 			>
-				{visibleTweetIndices.map((index) => (
-					<div
+				{visibleTweetIndices.map((index, i) => (
+					<motion.div
 						key={TWEET_IDS[index]}
-						className="overflow-hidden rounded-lg border border-border"
+						className="terminal-block-hover overflow-hidden rounded border border-border bg-background"
+						style={{ animationDelay: `${i * 50}ms` }}
+						initial={{ opacity: 0, y: 20 }}
+						animate={{ opacity: 1, y: 0 }}
+						transition={{ delay: i * 0.1 }}
 					>
-						<Tweet id={TWEET_IDS[index]} />
-					</div>
+						<div className="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="p-0">
+							<Tweet id={TWEET_IDS[index]} />
+						</div>
+					</motion.div>
 				))}
 			</motion.div>
 
 			{totalPages > 1 && (
-				<motion.div
-					className="mt-10 flex items-center justify-between sm:mt-12"
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					transition={{ delay: 0.5, duration: 0.5 }}
-				>
-					<motion.button
-						whileHover={{ scale: 1.05 }}
-						whileTap={{ scale: 0.95 }}
-						onClick={handlePrev}
-						disabled={currentPage === 1}
-						className={cn(
-							"inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50",
-						)}
-						aria-label="Previous page"
-					>
-						<ChevronLeft className="size-4" />
-						Prev
-					</motion.button>
+				<div className="terminal-block-hover mt-8 rounded border border-border bg-muted/20 p-4">
+					<div className="flex items-center justify-between">
+						<button
+							type="button"
+							onClick={handlePrev}
+							disabled={currentPage === 1}
+							className={cn(
+								"terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors",
+								currentPage === 1
+									? "cursor-not-allowed opacity-50"
+									: "hover:bg-muted/50",
+							)}
+						>
+							<ChevronLeft className="h-3 w-3" />
+							PREV
+						</button>
 
-					<div className="hidden items-center gap-1 sm:flex">
-						{paginationDots.map((page, index) =>
-							typeof page === "number" ? (
-								<button
-									type="button"
-									key={`${page}-${
-										// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-										index
-									}`}
-									onClick={() => goToPage(page)}
-									className={cn(
-										"flex h-8 w-8 items-center justify-center rounded-md font-medium text-sm transition-colors",
-										currentPage === page
-											? "bg-primary/10 text-primary"
-											: "text-muted-foreground hover:bg-muted",
-									)}
-									aria-label={`Go to page ${page}`}
-									aria-current={currentPage === page ? "page" : undefined}
-								>
-									{page}
-								</button>
-							) : (
-								<span
-									key={`ellipsis-${
-										// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-										index
-									}`}
-									className="flex h-8 w-8 items-center justify-center text-muted-foreground text-sm"
-									aria-hidden="true"
-								>
-									...
-								</span>
-							),
-						)}
-					</div>
-					<div className="text-muted-foreground text-sm sm:hidden">
-						Page {currentPage} of {totalPages}
-					</div>
+						<div className="flex items-center gap-1">
+							<span className="font-mono text-muted-foreground text-xs">
+								PAGE:
+							</span>
+							{paginationDots.map((page, index) =>
+								typeof page === "number" ? (
+									<button
+										type="button"
+										key={`page-${page}`}
+										onClick={() => goToPage(page)}
+										className={cn(
+											"terminal-block-hover flex h-6 w-6 items-center justify-center rounded border border-border font-mono text-xs transition-colors",
+											currentPage === page
+												? "terminal-glow bg-primary/20 text-primary"
+												: "bg-background text-muted-foreground hover:text-foreground",
+										)}
+									>
+										{page}
+									</button>
+								) : (
+									<span
+										key={`ellipsis-${
+											index < paginationDots.length / 2 ? "start" : "end"
+										}`}
+										className="flex h-6 w-6 items-center justify-center font-mono text-muted-foreground text-xs"
+									>
+										...
+									</span>
+								),
+							)}
+						</div>
 
-					<motion.button
-						whileHover={{ scale: 1.05 }}
-						whileTap={{ scale: 0.95 }}
-						onClick={handleNext}
-						disabled={currentPage === totalPages}
-						className={cn(
-							"inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50",
-						)}
-						aria-label="Next page"
-					>
-						Next
-						<ChevronRight className="size-4" />
-					</motion.button>
-				</motion.div>
+						<button
+							type="button"
+							onClick={handleNext}
+							disabled={currentPage === totalPages}
+							className={cn(
+								"terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors",
+								currentPage === totalPages
+									? "cursor-not-allowed opacity-50"
+									: "hover:bg-muted/50",
+							)}
+						>
+							NEXT
+							<ChevronRight className="h-3 w-3" />
+						</button>
+					</div>
+				</div>
 			)}
-		</motion.section>
+		</div>
 	);
 }