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

feat(web): design overhaul

Browse Source
This commit is contained in:
Aman Varshney
2025-07-20 19:37:41 +05:30
parent 81975cfef4
commit 87d4362c6d
31 changed files with 1844 additions and 733 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/(home)/_components/FeatureCard.tsx
View File

@@ -84,7 +84,7 @@ export default function FeatureCard({
layout
>
<div>
<h4 className="pb-2 text-center font-mono font-semibold text-foreground text-sm">
<h4 className="pb-2 text-center font-semibold text-foreground text-sm">
{title}
</h4>
</div>

8
apps/web/src/app/(home)/_components/code-container.tsx
View File

@@ -25,13 +25,13 @@ const CodeContainer = () => {
const packageManagers: Array<"npm" | "pnpm" | "bun"> = ["bun", "pnpm", "npm"];
return (
<div className="mx-auto mt-6 w-full max-w-3xl px-2 font-mono md:px-0">
<div className="mx-auto mt-6 w-full max-w-3xl px-2 md:px-0">
<div className="overflow-hidden rounded-lg border border-border bg-muted/30 shadow-sm">
<div className="flex items-center justify-between border-border border-b bg-muted/50 px-4 py-2">
<span className="text-muted-foreground text-xs">
Package manager:
</span>
<div className="flex items-center rounded-md border border-border bg-background p-0.5">
<div className="flex items-center rounded-md border border-border p-0.5">
{packageManagers.map((pm) => (
<button
type="button"
@@ -51,7 +51,7 @@ const CodeContainer = () => {
</div>
</div>
<div className="relative bg-background p-4 text-sm">
<div className="relative p-4 text-sm">
<div className="flex items-center gap-2 overflow-x-auto pb-1">
<span className="select-none text-muted-foreground">$</span>
<code className="whitespace-pre text-foreground">
@@ -64,7 +64,7 @@ const CodeContainer = () => {
type="button"
onClick={copyToClipboard}
className={cn(
"flex h-7 w-7 items-center justify-center rounded border bg-background text-muted-foreground transition-all duration-150 hover:border-border hover:bg-muted hover:text-foreground",
"flex h-7 w-7 items-center justify-center rounded border text-muted-foreground transition-all duration-150 hover:border-border hover:bg-muted hover:text-foreground",
copied
? "border-chart-4/50 bg-chart-4/10 text-chart-4"
: "border-border",

6
apps/web/src/app/(home)/_components/customizable-section.tsx
View File

@@ -3,7 +3,7 @@ import StackBuilder from "./stack-builder";
export default function CustomizableSection() {
return (
<section className="relative z-10 mx-auto mt-20 w-full max-w-7xl space-y-16 px-4 sm:px-6">
<section className="relative z-10 mx-auto mt-20 w-full space-y-16 px-4 sm:px-6">
<div className="relative space-y-8 text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -12,7 +12,7 @@ export default function CustomizableSection() {
transition={{ duration: 0.5 }}
className="relative"
>
<h2 className="font-bold font-mono text-2xl tracking-tight sm:text-3xl md:text-4xl lg:text-5xl">
<h2 className="font-bold text-2xl tracking-tight sm:text-3xl md:text-4xl lg:text-5xl">
<span className="border-primary border-b-2 pb-1 text-foreground dark:text-primary">
Roll Your Own Stack
</span>
@@ -26,7 +26,7 @@ export default function CustomizableSection() {
transition={{ duration: 0.5, delay: 0.2 }}
className="mx-auto max-w-3xl space-y-6"
>
<p className="font-mono text-lg text-muted-foreground leading-relaxed sm:text-xl">
<p className=" text-lg text-muted-foreground leading-relaxed sm:text-xl">
Build your perfect TypeScript stack.
</p>
</motion.div>

6
apps/web/src/app/(home)/_components/footer.tsx
View File

@@ -3,8 +3,8 @@ import Link from "next/link";
const Footer = () => {
return (
<footer className="relative w-full border-border border-t font-mono">
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6">
<footer className="relative w-full border-border border-t ">
<div className="mx-auto px-4 py-12 sm:px-6">
<div className="mb-12 grid gap-8 md:grid-cols-3">
<div>
<h3 className="mb-4 flex items-center gap-2 font-semibold text-base text-foreground">
@@ -95,7 +95,7 @@ const Footer = () => {
</h3>
<div className="space-y-2.5 text-muted-foreground">
<p className="flex items-center">
<span className="mr-2 rounded bg-muted px-2 py-1 font-mono text-sm">
<span className="mr-2 rounded bg-muted px-2 py-1 text-sm">
$
</span>
<span>amanvarshney.work@gmail.com</span>

20
apps/web/src/app/(home)/_components/navbar.tsx
View File

@@ -98,11 +98,11 @@ export default function Navbar() {
className={cn(
"fixed top-0 z-[100] w-full transition-all duration-300 ease-in-out",
scrolled
? "border-border border-b bg-background/80 shadow-sm backdrop-blur-md"
? " border- border-border shadow-sm backdrop-blur-md"
: "border-transparent border-b bg-transparent",
)}
>
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
<div className="mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
<Link href="/" className="flex flex-shrink-0 items-center gap-2">
<Image
src="/logo.svg"
@@ -123,7 +123,7 @@ export default function Navbar() {
key={link.href}
href={link.href}
target={link.target}
className="relative flex items-center gap-1.5 rounded-md px-3 py-1.5 font-mono text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-primary"
className="relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-primary"
>
{link.icon}
<span>{link.label}</span>
@@ -137,7 +137,7 @@ export default function Navbar() {
<Link
href="https://github.com/sponsors/AmanVarshney01"
target="_blank"
className="inline-flex items-center gap-1.5 rounded-md border border-border bg-muted/90 px-3 py-1.5 font-mono text-muted-foreground text-xs backdrop-blur-sm transition-colors hover:bg-muted hover:text-foreground"
className="inline-flex items-center gap-1.5 rounded-md border border-border bg-muted/90 px-3 py-1.5 text-muted-foreground text-xs backdrop-blur-sm transition-colors hover:bg-muted hover:text-foreground"
title="Sponsor on GitHub"
>
<Heart className="size-3.5" />
@@ -145,7 +145,7 @@ export default function Navbar() {
</Link>
<Link
href="/new"
className="inline-flex items-center gap-1.5 rounded-md border border-primary/50 bg-primary/10 px-3 py-1.5 font-mono text-primary text-xs transition-colors hover:bg-primary/20"
className="inline-flex items-center gap-1.5 rounded-md border border-primary/50 bg-primary/10 px-3 py-1.5 text-primary text-xs transition-colors hover:bg-primary/20"
title="Stack Builder"
>
<Maximize2 className="size-3.5" />
@@ -183,7 +183,7 @@ export default function Navbar() {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2, ease: "easeInOut" }}
className="fixed inset-0 z-[98] bg-background/50 backdrop-blur-sm lg:hidden"
className=" fixed inset-0 z-[98 backdrop-blur-sm lg:hidden"
onClick={closeMobileMenu}
aria-hidden="true"
/>
@@ -193,7 +193,7 @@ export default function Navbar() {
animate={{ x: 0 }}
exit={{ x: "100%" }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
className="fixed top-0 right-0 bottom-0 z-[99] h-full w-full max-w-xs overflow-y-auto border-border border-l bg-background shadow-lg lg:hidden"
className="fixed top-0 right-0 bottom-0 z-[99] h-full w-full max-w-xs overflow-y-auto border-border border-l shadow-lg lg:hidden"
aria-modal="true"
>
<div className="flex h-16 items-center justify-between border-border border-b px-4">
@@ -218,7 +218,7 @@ export default function Navbar() {
href={link.href}
target={link.target}
onClick={closeMobileMenu}
className="flex items-center gap-3 rounded-md px-3 py-3 font-mono text-base text-muted-foreground transition-colors hover:bg-muted hover:text-primary"
className="flex items-center gap-3 rounded-md px-3 py-3 text-base text-muted-foreground transition-colors hover:bg-muted hover:text-primary"
>
{link.icon ? (
<span className="flex w-5 items-center justify-center">
@@ -236,7 +236,7 @@ export default function Navbar() {
<Link
href="/new"
onClick={closeMobileMenu}
className="flex w-full items-center justify-center gap-2 rounded-md border border-primary/50 bg-primary/10 px-4 py-2.5 font-mono text-primary text-sm transition-colors hover:bg-primary/20"
className="flex w-full items-center justify-center gap-2 rounded-md border border-primary/50 bg-primary/10 px-4 py-2.5 text-primary text-sm transition-colors hover:bg-primary/20"
>
<Maximize2 className="size-4" />
Stack Builder
@@ -245,7 +245,7 @@ export default function Navbar() {
href="https://github.com/sponsors/AmanVarshney01"
target="_blank"
onClick={closeMobileMenu}
className="flex w-full items-center justify-center gap-2 rounded-md border border-border bg-muted/90 px-4 py-2.5 font-mono text-muted-foreground text-sm backdrop-blur-sm transition-colors hover:bg-muted hover:text-foreground"
className="flex w-full items-center justify-center gap-2 rounded-md border border-border bg-muted/90 px-4 py-2.5 text-muted-foreground text-sm backdrop-blur-sm transition-colors hover:bg-muted hover:text-foreground"
>
<Heart className="size-4" />
Sponsor on GitHub

2
apps/web/src/app/(home)/_components/npm-package.tsx
View File

@@ -35,7 +35,7 @@ const NpmPackage = () => {
versionLoading && "animate-pulse",
)}
/>
<span className="font-mono text-muted-foreground text-xl">
<span className=" text-muted-foreground text-xl">
{versionLoading ? "[v?.?.?]" : `[v${version}]`}
</span>
</div>

58
apps/web/src/app/(home)/_components/sponsors-section.tsx
View File

@@ -54,73 +54,69 @@ export default function SponsorsSection() {
<div className="mb-6 flex flex-wrap items-center justify-between gap-2 sm:flex-nowrap">
<div className="flex items-center gap-2">
<Terminal className="h-5 w-5 text-primary" />
<span className="font-bold font-mono text-lg sm:text-xl">
<span className="font-bold text-lg sm:text-xl">
SPONSORS_DATABASE.JSON
</span>
</div>
<div className="hidden h-px flex-1 bg-border sm:block" />
<span className="w-full text-right font-mono text-muted-foreground text-xs sm:w-auto sm:text-left">
<span className="w-full text-right text-muted-foreground text-xs sm:w-auto sm:text-left">
[{loadingSponsors ? "LOADING..." : sponsors.length} RECORDS]
</span>
</div>
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
<div className="mb-8 rounded border border-border p-4">
<div className="flex items-center gap-2 text-sm">
<span className="text-primary">$</span>
<span className="font-mono text-foreground">
# Amazing organizations and individuals supporting this project
<span className=" text-foreground">
Amazing organizations and individuals supporting this project
</span>
</div>
<div className="mt-2 flex items-center gap-2 text-sm">
<span className="text-primary">$</span>
<span className="font-mono text-muted-foreground">
# Your support helps maintain and improve Better-T-Stack
<span className=" text-muted-foreground">
Your support helps maintain and improve Better-T-Stack
</span>
</div>
</div>
{loadingSponsors ? (
<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
<div className="rounded border border-border p-8">
<div className="flex items-center justify-center gap-2">
<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
<span className="font-mono text-muted-foreground">
LOADING_SPONSORS.EXE
</span>
<span className=" text-muted-foreground">LOADING_SPONSORS.EXE</span>
<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
</div>
</div>
) : sponsorError ? (
<div className="terminal-block-hover rounded border border-border bg-destructive/10 p-8">
<div className="rounded border border-border bg-destructive/10 p-8">
<div className="flex items-center justify-center gap-2">
<span className="text-destructive">✗</span>
<span className="font-mono text-destructive">
ERROR: {sponsorError}
</span>
<span className=" text-destructive">ERROR: {sponsorError}</span>
</div>
</div>
) : sponsors.length === 0 ? (
<div className="space-y-4">
<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
<div className="rounded border border-border p-8">
<div className="text-center">
<div className="mb-4 flex items-center justify-center gap-2">
<span className="font-mono text-muted-foreground">
<span className=" text-muted-foreground">
NO_SPONSORS_FOUND.NULL
</span>
</div>
<div className="flex items-center justify-center gap-2 text-sm">
<span className="text-primary">$</span>
<span className="font-mono text-muted-foreground">
# Be the first to support this project!
<span className=" text-muted-foreground">
Be the first to support this project!
</span>
</div>
</div>
</div>
<div className="terminal-block-hover rounded border border-border bg-background p-4">
<div className="rounded border border-border p-4">
<a
href="https://github.com/sponsors/AmanVarshney01"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
className="flex items-center justify-center gap-2 text-primary transition-colors hover:text-accent"
>
<Heart className="h-4 w-4" />
<span>BECOME_SPONSOR.EXE</span>
@@ -138,10 +134,10 @@ export default function SponsorsSection() {
return (
<div
key={entry.sponsor.login}
className="terminal-block-hover rounded border border-border bg-background"
className="rounded border border-border"
style={{ animationDelay: `${index * 50}ms` }}
>
<div className="border-border border-b bg-muted/20 px-3 py-2">
<div className="border-border border-b px-3 py-2">
<div className="flex items-center gap-2">
<span className="text-primary text-xs">▶</span>
<div className="ml-auto flex items-center gap-2 text-muted-foreground text-xs">
@@ -159,17 +155,17 @@ export default function SponsorsSection() {
alt={entry.sponsor.name || entry.sponsor.login}
width={100}
height={100}
className="rounded border border-border bg-background transition-colors duration-300"
className="rounded border border-border transition-colors duration-300"
unoptimized
/>
</div>
<div className="min-w-0 flex-1 space-y-2">
<div>
<h3 className="truncate font-mono font-semibold text-foreground text-sm">
<h3 className="truncate font-semibold text-foreground text-sm">
{entry.sponsor.name || entry.sponsor.login}
</h3>
{entry.tierName && (
<p className="font-mono text-primary text-xs">
<p className=" text-primary text-xs">
{entry.tierName}
</p>
)}
@@ -179,7 +175,7 @@ export default function SponsorsSection() {
href={`https://github.com/${entry.sponsor.login}`}
target="_blank"
rel="noopener noreferrer"
className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
className="group flex items-center gap-2 text-muted-foreground text-xs transition-colors hover:text-primary"
>
<Github className="h-4 w-4" />
<span className="truncate">
@@ -195,7 +191,7 @@ export default function SponsorsSection() {
}
target="_blank"
rel="noopener noreferrer"
className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
className="group flex items-center gap-2 text-muted-foreground text-xs transition-colors hover:text-primary"
>
<Globe className="h-4 w-4" />
<span className="truncate">
@@ -209,7 +205,7 @@ export default function SponsorsSection() {
</a>
)}
{/* <div className="flex items-center gap-2 font-mono text-muted-foreground text-xs">
{/* <div className="flex items-center gap-2 text-muted-foreground text-xs">
<span className="text-xs">👤</span>
<span>{entry.sponsor.type.toUpperCase()}</span>
</div> */}
@@ -222,12 +218,12 @@ export default function SponsorsSection() {
})}
</div>
<div className="terminal-block-hover rounded border border-border bg-background p-4">
<div className="rounded border border-border p-4">
<a
href="https://github.com/sponsors/AmanVarshney01"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
className="flex items-center justify-center gap-2 text-primary transition-colors hover:text-accent"
>
<Heart className="h-4 w-4" />
<span>SUPPORT_PROJECT.EXE</span>

64
apps/web/src/app/(home)/_components/stack-builder.tsx
View File

@@ -3,7 +3,6 @@
import {
Check,
ClipboardCopy,
Github,
InfoIcon,
RefreshCw,
Settings,
@@ -14,13 +13,11 @@ import {
} from "lucide-react";
import { motion } from "motion/react";
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
import { useQueryStates } from "nuqs";
import type React from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import { ThemeToggle } from "@/components/theme-toggle";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Tooltip,
@@ -37,7 +34,6 @@ import {
} from "@/lib/constant";
import { stackParsers, stackQueryStatesOptions } from "@/lib/stack-url-state";
import { cn } from "@/lib/utils";
import discordLogo from "@/public/icon/discord.svg";
const validateProjectName = (name: string): string | undefined => {
const INVALID_CHARS = ["<", ">", ":", '"', "|", "?", "*"];
@@ -1455,49 +1451,9 @@ const StackBuilder = () => {
<TooltipProvider>
<div
className={cn(
"flex h-svh flex-col overflow-hidden border-border bg-background text-foreground",
"grid grid-cols-1 overflow-hidden border-border text-foreground",
)}
>
<div
className={cn(
"grid w-full flex-shrink-0 grid-cols-2 items-center justify-center border-border border-b bg-background px-2 py-2 sm:grid-cols-3 sm:px-4",
)}
>
<Link href={"/"}>
<div className="mr-auto font-mono text-muted-foreground text-xs">
Home
</div>
</Link>
<div className="mx-auto hidden font-mono text-muted-foreground text-xs sm:block">
Create Better T Stack
</div>
<div className="ml-auto flex space-x-2">
<Link
href={"https://github.com/AmanVarshney01/create-better-t-stack"}
target="_blank"
rel="noopener noreferrer"
className={cn(
"text-muted-foreground transition-colors hover:text-foreground",
)}
title="GitHub Repository"
>
<Github className="h-4 w-4" />
</Link>
<Link
href={"https://discord.gg/ZYsbjpDaM5"}
target="_blank"
rel="noopener noreferrer"
className={cn(
"text-muted-foreground transition-colors hover:text-foreground",
)}
title="Join Discord"
>
<Image src={discordLogo} alt="discord" className="size-4" />{" "}
</Link>
<ThemeToggle />
</div>
</div>
<div className="grid grid-cols-1 overflow-hidden sm:grid-cols-[auto_1fr]">
<div className="flex h-full max-w-full flex-col justify-between border-border border-r p-4 sm:max-w-3xs md:max-w-xs lg:max-w-sm">
<div className="flex flex-col space-y-4">
@@ -1513,7 +1469,7 @@ const StackBuilder = () => {
setStack({ projectName: newValue });
}}
className={cn(
"w-full rounded border bg-background px-2 py-1 font-mono text-sm focus:outline-none",
"w-full rounded border px-2 py-1 text-sm focus:outline-none",
projectNameError
? "border-destructive bg-destructive/10 text-destructive-foreground"
: "border-border focus:border-primary",
@@ -1530,7 +1486,7 @@ const StackBuilder = () => {
<button
type="button"
onClick={resetStack}
className="flex items-center gap-1 rounded border border-border bg-background px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
className="flex items-center gap-1 rounded border border-border px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
title="Reset to defaults"
>
<RefreshCw className="h-3 w-3" />
@@ -1539,7 +1495,7 @@ const StackBuilder = () => {
<button
type="button"
onClick={getRandomStack}
className="flex items-center gap-1 rounded border border-border bg-background px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
className="flex items-center gap-1 rounded border border-border px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
title="Generate a random stack"
>
<Shuffle className="h-3 w-3" />
@@ -1549,7 +1505,7 @@ const StackBuilder = () => {
<button
type="button"
onClick={loadSavedStack}
className="flex items-center gap-1 rounded border border-border bg-background px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
className="flex items-center gap-1 rounded border border-border px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
title="Load saved preferences"
>
<Settings className="h-3 w-3" />
@@ -1559,7 +1515,7 @@ const StackBuilder = () => {
<button
type="button"
onClick={saveCurrentStack}
className="flex items-center gap-1 rounded border border-border bg-background px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
className="flex items-center gap-1 rounded border border-border px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
title="Save current preferences"
>
<Star className="h-3 w-3" />
@@ -1568,14 +1524,14 @@ const StackBuilder = () => {
<button
type="button"
onClick={shareToTwitter}
className="flex items-center gap-1 rounded border border-border bg-background px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
className="flex items-center gap-1 rounded border border-border px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted"
title="Share to Twitter"
>
<Share2 className="h-3 w-3" />
Share
</button>
</div>
<div className="relative rounded border border-border bg-background p-2">
<div className="relative rounded border border-border p-2">
<div className="flex">
<span className="mr-2 select-none text-chart-4">$</span>
<code className="block break-all text-muted-foreground text-xs sm:text-sm">
@@ -1625,7 +1581,7 @@ const StackBuilder = () => {
type="button"
key={preset.id}
onClick={() => applyPreset(preset.id)}
className="rounded border border-border bg-background p-2 text-left transition-colors hover:bg-muted"
className="rounded border border-border p-2 text-left transition-colors hover:bg-muted"
title={preset.description}
>
<div className="font-medium text-foreground text-sm">
@@ -1687,7 +1643,7 @@ const StackBuilder = () => {
)}
</div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4">
<div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4">
{filteredOptions.map((tech) => {
let isSelected = false;
const category = categoryKey as keyof StackState;

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

@@ -118,11 +118,11 @@ export default function Testimonials() {
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="w-full min-w-0 overflow-hidden rounded border border-border">
<div className="sticky top-0 z-10 border-border border-b 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">
<span className=" font-semibold text-xs">
[TWEET_{String(index + 1).padStart(3, "0")}]
</span>
</div>
@@ -141,27 +141,27 @@ export default function Testimonials() {
<div className="mb-6 flex flex-wrap items-center justify-between gap-2 sm:flex-nowrap">
<div className="flex items-center gap-2">
<Terminal className="h-5 w-5 text-primary" />
<span className="font-bold font-mono text-lg sm:text-xl">
<span className="font-bold text-lg sm:text-xl">
DEVELOPER_TESTIMONIALS.LOG
</span>
</div>
<div className="hidden h-px flex-1 bg-border sm:block" />
<span className="w-full text-right font-mono text-muted-foreground text-xs sm:w-auto sm:text-left">
<span className="w-full text-right text-muted-foreground text-xs sm:w-auto sm:text-left">
[{TWEET_IDS.length} ENTRIES]
</span>
</div>
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
<div className="mb-8 rounded border border-border p-4">
<div className="flex items-center gap-2 text-sm">
<span className="text-primary">$</span>
<span className="font-mono text-foreground">
# Community feedback from X (Twitter)
<span className=" text-foreground">
Community feedback from X (Twitter)
</span>
</div>
<div className="mt-2 flex items-center gap-2 text-sm">
<span className="text-primary">$</span>
<span className="font-mono text-muted-foreground">
# Real developers sharing their experience
<span className=" text-muted-foreground">
Real developers sharing their experience
</span>
</div>
</div>