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 mobile ui responsiveness

Browse Source
This commit is contained in:
Aman Varshney
2025-04-06 10:35:09 +05:30
parent 7202ffab91
commit d431526a21
4 changed files with 62 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,9 +36,9 @@ const CodeContainer = () => {
}, [step]);
const commands = {
npm: "npx create-better-t-stack@latest my-app",
pnpm: "pnpm create better-t-stack@latest my-app",
bun: "bun create better-t-stack@latest my-app",
npm: "npx create-better-t-stack@latest",
pnpm: "pnpm create better-t-stack@latest",
bun: "bun create better-t-stack@latest",
};
const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => {

48
apps/web/src/app/(home)/_components/StackArchitech.tsx
View File

@@ -484,13 +484,13 @@ const StackArchitect = () => {
return (
<div className="mx-auto w-full">
<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 text-gray-800 shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-white">
<div className="flex items-center justify-between bg-gray-200 px-4 py-2 dark:bg-gray-800">
<div className="flex items-center justify-between bg-gray-200 px-2 py-2 sm:px-4 dark:bg-gray-800">
<div className="flex space-x-2">
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="h-3 w-3 rounded-full bg-yellow-500" />
<div className="h-3 w-3 rounded-full bg-green-500" />
</div>
<div className="font-mono text-gray-600 text-xs dark:text-gray-400">
<div className="hidden font-mono text-gray-600 text-xs sm:block dark:text-gray-400">
Stack Architect Terminal
</div>
<div className="flex space-x-2">
@@ -526,11 +526,11 @@ const StackArchitect = () => {
</div>
{showHelp && (
<div className="border-gray-300 border-b bg-blue-50 p-4 dark:border-gray-700 dark:bg-blue-900/20">
<h3 className="mb-2 font-medium text-blue-800 dark:text-blue-300">
<div className="border-gray-300 border-b bg-blue-50 p-3 sm:p-4 dark:border-gray-700 dark:bg-blue-900/20">
<h3 className="mb-2 font-medium text-blue-800 text-sm dark:text-blue-300">
How to Use Stack Architect
</h3>
<ul className="list-disc space-y-1 pl-5 text-blue-700 text-sm dark:text-blue-400">
<ul className="list-disc space-y-1 pl-5 text-blue-700 text-xs dark:text-blue-400">
<li>
Select your preferred technologies from each category using the
tabs below
@@ -550,8 +550,8 @@ const StackArchitect = () => {
)}
{showPresets && (
<div className="border-gray-300 border-b bg-amber-50 p-4 dark:border-gray-700 dark:bg-amber-900/20">
<h3 className="mb-2 font-medium text-amber-800 dark:text-amber-300">
<div className="border-gray-300 border-b bg-amber-50 p-3 sm:p-4 dark:border-gray-700 dark:bg-amber-900/20">
<h3 className="mb-2 font-medium text-amber-800 text-sm dark:text-amber-300">
Quick Start Presets
</h3>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -562,7 +562,7 @@ const StackArchitect = () => {
onClick={() => applyPreset(preset.id)}
className="rounded border border-amber-200 p-2 text-left transition-colors hover:bg-amber-100 dark:border-amber-700 dark:hover:bg-amber-800/30"
>
<div className="font-medium text-amber-700 dark:text-amber-300">
<div className="font-medium text-amber-700 text-sm dark:text-amber-300">
{preset.name}
</div>
<div className="text-amber-600 text-xs dark:text-amber-400">
@@ -574,9 +574,9 @@ const StackArchitect = () => {
</div>
)}
<div className="p-4 font-mono">
<div className="mb-4 flex items-start justify-between">
<label className="flex flex-col">
<div className="p-3 font-mono sm:p-4">
<div className="mb-4 flex flex-col justify-between sm:flex-row sm:items-start">
<label className="mb-2 flex flex-col sm:mb-0">
<span className="mb-1 text-gray-600 text-xs dark:text-gray-400">
Project Name:
</span>
@@ -589,7 +589,7 @@ const StackArchitect = () => {
setStack((prev) => ({ ...prev, projectName: newValue }));
setProjectNameError(validateProjectName(newValue));
}}
className={`border bg-gray-200 dark:bg-gray-800 ${
className={`w-full border bg-gray-200 sm:w-auto dark:bg-gray-800 ${
projectNameError
? "border-red-500 dark:border-red-500"
: "border-gray-300 dark:border-gray-700"
@@ -602,7 +602,7 @@ const StackArchitect = () => {
)}
</label>
<div className="flex gap-2">
<div className="flex flex-wrap gap-2">
<button
type="button"
onClick={resetStack}
@@ -636,17 +636,17 @@ const StackArchitect = () => {
</button>
</div>
</div>
<div className="mb-4">
<div className="mb-4 overflow-x-auto">
<div className="flex">
<span className="mr-2 text-green-600 dark:text-green-400">$</span>
<code className="text-gray-700 dark:text-gray-300">
<code className="whitespace-pre-wrap break-all text-gray-700 text-xs sm:text-sm dark:text-gray-300">
{command}
</code>
</div>
</div>
{compatNotes[activeTab] && compatNotes[activeTab].length > 0 && (
<div className="mb-4 rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
<div className="mb-2 flex items-center gap-2 font-medium text-blue-800 text-sm dark:text-blue-300">
<div className="mb-2 flex items-center gap-2 font-medium text-blue-800 text-xs sm:text-sm dark:text-blue-300">
<InfoIcon className="h-4 w-4" />
<span>Compatibility Notes</span>
</div>
@@ -658,7 +658,7 @@ const StackArchitect = () => {
</div>
)}
<div className="border-gray-300 border-t pt-4 dark:border-gray-700">
<div className="mb-3 flex items-center text-gray-600 dark:text-gray-400">
<div className="mb-3 flex items-center text-gray-600 text-sm dark:text-gray-400">
<Terminal className="mr-2 h-4 w-4" />
<span>
Configure{" "}
@@ -749,23 +749,25 @@ const StackArchitect = () => {
</div>
<div className="flex-grow">
<div className="flex items-center">
<span className="mr-2">{tech.icon}</span>
<span className="mr-2 text-base sm:text-lg">
{tech.icon}
</span>
<span
className={
className={`${
isSelected
? "text-blue-700 dark:text-blue-300"
: "text-gray-700 dark:text-gray-300"
}
} text-xs sm:text-sm`}
>
{tech.name}
</span>
</div>
<p className="text-gray-500 text-xs">
<p className="hidden text-gray-500 text-xs sm:block">
{tech.description}
</p>
</div>
{tech.default && !isSelected && (
<span className="ml-2 text-gray-500 text-xs dark:text-gray-600">
<span className="ml-2 hidden text-gray-500 text-xs sm:block dark:text-gray-600">
Default
</span>
)}
@@ -936,7 +938,7 @@ const StackArchitect = () => {
<button
type="button"
key={category}
className={`whitespace-nowrap px-4 py-2 font-mono text-xs transition-colors${
className={`whitespace-nowrap px-2 py-2 font-mono text-[10px] sm:px-4 sm:text-xs transition-colors${
activeTab === category
? " border-blue-500 border-t-2 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
: " text-gray-600 hover:bg-gray-300 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"

59
apps/web/src/app/(home)/_components/Testimonials.tsx
View File

@@ -30,7 +30,7 @@ const TWEET_IDS = [
export default function Testimonials() {
const [startIndex, setStartIndex] = useState(0);
const [tweetsPerPage, setTweetsPerPage] = useState(3);
const [tweetsPerPage, setTweetsPerPage] = useState(1);
useEffect(() => {
const handleResize = () => {
@@ -75,8 +75,8 @@ export default function Testimonials() {
const currentPage = Math.floor(startIndex / tweetsPerPage) + 1;
return (
<section className="relative z-10 mx-auto mt-20 w-full max-w-7xl space-y-16 px-4 sm:px-6">
<div className="relative space-y-8 text-center">
<section className="relative z-10 mx-auto mt-12 w-full max-w-7xl space-y-8 px-4 sm:mt-20 sm:space-y-16 sm:px-6">
<div className="relative space-y-4 text-center sm:space-y-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -84,7 +84,7 @@ export default function Testimonials() {
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 font-mono text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
<span className="border-blue-500 border-b-2 pb-1 text-gray-900 dark:text-blue-100">
Developer Feedback
</span>
@@ -97,7 +97,7 @@ export default function Testimonials() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.2 }}
className="mx-auto max-w-3xl font-mono text-gray-700 text-lg leading-relaxed sm:text-xl dark:text-gray-300"
className="mx-auto max-w-3xl font-mono text-base text-gray-700 leading-relaxed sm:text-lg md:text-xl dark:text-gray-300"
>
what devs are saying about Better-T-Stack
</motion.p>
@@ -108,25 +108,26 @@ export default function Testimonials() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.3 }}
className="relative mt-8"
className="relative mt-4 sm:mt-8"
>
<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 shadow-xl dark:border-gray-700 dark:bg-gray-900">
<div className="flex items-center justify-between bg-gray-200 px-4 py-2 dark:bg-gray-800">
<div className="flex space-x-2">
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="h-3 w-3 rounded-full bg-yellow-500" />
<div className="h-3 w-3 rounded-full bg-green-500" />
<div className="flex items-center justify-between bg-gray-200 px-2 py-2 sm:px-4 dark:bg-gray-800">
<div className="flex space-x-1 sm:space-x-2">
<div className="h-2 w-2 rounded-full bg-red-500 sm:h-3 sm:w-3" />
<div className="h-2 w-2 rounded-full bg-yellow-500 sm:h-3 sm:w-3" />
<div className="h-2 w-2 rounded-full bg-green-500 sm:h-3 sm:w-3" />
</div>
<div className="font-mono text-gray-600 text-xs dark:text-gray-400">
Developer Feedback Terminal
<div className="font-mono text-[10px] text-gray-600 sm:text-xs dark:text-gray-400">
Developer Feedback
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 sm:gap-2">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={handlePrev}
className="flex h-6 w-6 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
className="flex h-5 w-5 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 sm:h-6 sm:w-6 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
title="Previous testimonials"
aria-label="Previous testimonials"
>
<ChevronLeft className="h-3 w-3" />
</motion.button>
@@ -135,8 +136,9 @@ export default function Testimonials() {
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={handleNext}
className="flex h-6 w-6 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
className="flex h-5 w-5 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 sm:h-6 sm:w-6 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
title="Next testimonials"
aria-label="Next testimonials"
>
<ChevronRight className="h-3 w-3" />
</motion.button>
@@ -151,24 +153,24 @@ export default function Testimonials() {
</div>
</div>
<div className="flex items-center justify-between border-gray-300 border-t bg-gray-200 p-3 dark:border-gray-700 dark:bg-gray-800">
<div className="flex items-center gap-2">
<span className="text-gray-700 text-xs dark:text-gray-300">
Page {currentPage} of {totalPages}
<div className="flex items-center justify-between border-gray-300 border-t bg-gray-200 px-2 py-2 sm:p-3 dark:border-gray-700 dark:bg-gray-800">
<div className="flex items-center">
<span className="text-[10px] text-gray-700 sm:text-xs dark:text-gray-300">
{currentPage}/{totalPages}
</span>
</div>
<div className="flex items-center gap-3">
<div className="hidden items-center gap-1 sm:flex">
{Array.from({ length: totalPages }).map((_, i) => {
const isActive = i === currentPage - 1;
<div className="flex items-center gap-2 sm:gap-3">
<div className="flex items-center gap-1">
{Array.from({ length: Math.min(totalPages, 5) }).map((_, i) => {
const isActive = i === Math.min(currentPage - 1, 4);
return (
<button
type="button"
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
// biome-ignore lint/suspicious/noArrayIndexKey: pagination indicator
key={i}
onClick={() => setStartIndex(i * tweetsPerPage)}
className={`h-1.5 w-1.5 rounded-full transition-colors ${
className={`h-1 w-1 rounded-full transition-colors sm:h-1.5 sm:w-1.5 ${
isActive
? "bg-blue-500"
: "bg-gray-400 hover:bg-gray-500 dark:bg-gray-600"
@@ -177,6 +179,11 @@ export default function Testimonials() {
/>
);
})}
{totalPages > 5 && (
<span className="text-[8px] text-gray-500 sm:text-[10px] dark:text-gray-400">
...
</span>
)}
</div>
</div>
</div>

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

@@ -9,7 +9,7 @@ import Testimonials from "./_components/Testimonials";
export default function HomePage() {
return (
<main className="flex flex-col items-center justify-start px-2 pt-24 pb-10 sm:px-4 sm:pb-16 md:px-8 md:pt-28 lg:pt-36">
<main className="flex flex-col items-center justify-start px-0 pt-24 pb-10 sm:px-4 sm:pb-16 md:px-8 md:pt-28 lg:pt-36">
<BackgroundGradients />
<div className="relative z-10 mx-auto mb-10 max-w-5xl text-center sm:mb-16">
<div className="px-1 sm:px-6 lg:px-8">