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]); }, [step]);
const commands = { const commands = {
npm: "npx create-better-t-stack@latest my-app", npm: "npx create-better-t-stack@latest",
pnpm: "pnpm create better-t-stack@latest my-app", pnpm: "pnpm create better-t-stack@latest",
bun: "bun create better-t-stack@latest my-app", bun: "bun create better-t-stack@latest",
}; };
const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => { 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 ( return (
<div className="mx-auto w-full"> <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="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="flex space-x-2">
<div className="h-3 w-3 rounded-full bg-red-500" /> <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-yellow-500" />
<div className="h-3 w-3 rounded-full bg-green-500" /> <div className="h-3 w-3 rounded-full bg-green-500" />
</div> </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 Stack Architect Terminal
</div> </div>
<div className="flex space-x-2"> <div className="flex space-x-2">
@@ -526,11 +526,11 @@ const StackArchitect = () => {
</div> </div>
{showHelp && ( {showHelp && (
<div className="border-gray-300 border-b bg-blue-50 p-4 dark:border-gray-700 dark:bg-blue-900/20"> <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 dark:text-blue-300"> <h3 className="mb-2 font-medium text-blue-800 text-sm dark:text-blue-300">
How to Use Stack Architect How to Use Stack Architect
</h3> </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> <li>
Select your preferred technologies from each category using the Select your preferred technologies from each category using the
tabs below tabs below
@@ -550,8 +550,8 @@ const StackArchitect = () => {
)} )}
{showPresets && ( {showPresets && (
<div className="border-gray-300 border-b bg-amber-50 p-4 dark:border-gray-700 dark:bg-amber-900/20"> <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 dark:text-amber-300"> <h3 className="mb-2 font-medium text-amber-800 text-sm dark:text-amber-300">
Quick Start Presets Quick Start Presets
</h3> </h3>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -562,7 +562,7 @@ const StackArchitect = () => {
onClick={() => applyPreset(preset.id)} 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" 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} {preset.name}
</div> </div>
<div className="text-amber-600 text-xs dark:text-amber-400"> <div className="text-amber-600 text-xs dark:text-amber-400">
@@ -574,9 +574,9 @@ const StackArchitect = () => {
</div> </div>
)} )}
<div className="p-4 font-mono"> <div className="p-3 font-mono sm:p-4">
<div className="mb-4 flex items-start justify-between"> <div className="mb-4 flex flex-col justify-between sm:flex-row sm:items-start">
<label className="flex flex-col"> <label className="mb-2 flex flex-col sm:mb-0">
<span className="mb-1 text-gray-600 text-xs dark:text-gray-400"> <span className="mb-1 text-gray-600 text-xs dark:text-gray-400">
Project Name: Project Name:
</span> </span>
@@ -589,7 +589,7 @@ const StackArchitect = () => {
setStack((prev) => ({ ...prev, projectName: newValue })); setStack((prev) => ({ ...prev, projectName: newValue }));
setProjectNameError(validateProjectName(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 projectNameError
? "border-red-500 dark:border-red-500" ? "border-red-500 dark:border-red-500"
: "border-gray-300 dark:border-gray-700" : "border-gray-300 dark:border-gray-700"
@@ -602,7 +602,7 @@ const StackArchitect = () => {
)} )}
</label> </label>
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
<button <button
type="button" type="button"
onClick={resetStack} onClick={resetStack}
@@ -636,17 +636,17 @@ const StackArchitect = () => {
</button> </button>
</div> </div>
</div> </div>
<div className="mb-4"> <div className="mb-4 overflow-x-auto">
<div className="flex"> <div className="flex">
<span className="mr-2 text-green-600 dark:text-green-400">$</span> <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} {command}
</code> </code>
</div> </div>
</div> </div>
{compatNotes[activeTab] && compatNotes[activeTab].length > 0 && ( {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-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" /> <InfoIcon className="h-4 w-4" />
<span>Compatibility Notes</span> <span>Compatibility Notes</span>
</div> </div>
@@ -658,7 +658,7 @@ const StackArchitect = () => {
</div> </div>
)} )}
<div className="border-gray-300 border-t pt-4 dark:border-gray-700"> <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" /> <Terminal className="mr-2 h-4 w-4" />
<span> <span>
Configure{" "} Configure{" "}
@@ -749,23 +749,25 @@ const StackArchitect = () => {
</div> </div>
<div className="flex-grow"> <div className="flex-grow">
<div className="flex items-center"> <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 <span
className={ className={`${
isSelected isSelected
? "text-blue-700 dark:text-blue-300" ? "text-blue-700 dark:text-blue-300"
: "text-gray-700 dark:text-gray-300" : "text-gray-700 dark:text-gray-300"
} } text-xs sm:text-sm`}
> >
{tech.name} {tech.name}
</span> </span>
</div> </div>
<p className="text-gray-500 text-xs"> <p className="hidden text-gray-500 text-xs sm:block">
{tech.description} {tech.description}
</p> </p>
</div> </div>
{tech.default && !isSelected && ( {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 Default
</span> </span>
)} )}
@@ -936,7 +938,7 @@ const StackArchitect = () => {
<button <button
type="button" type="button"
key={category} 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 activeTab === category
? " border-blue-500 border-t-2 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300" ? " 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" : " 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() { export default function Testimonials() {
const [startIndex, setStartIndex] = useState(0); const [startIndex, setStartIndex] = useState(0);
const [tweetsPerPage, setTweetsPerPage] = useState(3); const [tweetsPerPage, setTweetsPerPage] = useState(1);
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
@@ -75,8 +75,8 @@ export default function Testimonials() {
const currentPage = Math.floor(startIndex / tweetsPerPage) + 1; const currentPage = Math.floor(startIndex / tweetsPerPage) + 1;
return ( 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-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-8 text-center"> <div className="relative space-y-4 text-center sm:space-y-8">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -84,7 +84,7 @@ export default function Testimonials() {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="relative" 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"> <span className="border-blue-500 border-b-2 pb-1 text-gray-900 dark:text-blue-100">
Developer Feedback Developer Feedback
</span> </span>
@@ -97,7 +97,7 @@ export default function Testimonials() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }} viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.2 }} 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 what devs are saying about Better-T-Stack
</motion.p> </motion.p>
@@ -108,25 +108,26 @@ export default function Testimonials() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }} viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.3 }} 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="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 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="flex space-x-1 sm:space-x-2">
<div className="h-3 w-3 rounded-full bg-red-500" /> <div className="h-2 w-2 rounded-full bg-red-500 sm:h-3 sm:w-3" />
<div className="h-3 w-3 rounded-full bg-yellow-500" /> <div className="h-2 w-2 rounded-full bg-yellow-500 sm:h-3 sm:w-3" />
<div className="h-3 w-3 rounded-full bg-green-500" /> <div className="h-2 w-2 rounded-full bg-green-500 sm:h-3 sm:w-3" />
</div> </div>
<div className="font-mono text-gray-600 text-xs dark:text-gray-400"> <div className="font-mono text-[10px] text-gray-600 sm:text-xs dark:text-gray-400">
Developer Feedback Terminal Developer Feedback
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-1 sm:gap-2">
<motion.button <motion.button
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
onClick={handlePrev} 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" title="Previous testimonials"
aria-label="Previous testimonials"
> >
<ChevronLeft className="h-3 w-3" /> <ChevronLeft className="h-3 w-3" />
</motion.button> </motion.button>
@@ -135,8 +136,9 @@ export default function Testimonials() {
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
onClick={handleNext} 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" title="Next testimonials"
aria-label="Next testimonials"
> >
<ChevronRight className="h-3 w-3" /> <ChevronRight className="h-3 w-3" />
</motion.button> </motion.button>
@@ -151,24 +153,24 @@ export default function Testimonials() {
</div> </div>
</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 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 gap-2"> <div className="flex items-center">
<span className="text-gray-700 text-xs dark:text-gray-300"> <span className="text-[10px] text-gray-700 sm:text-xs dark:text-gray-300">
Page {currentPage} of {totalPages} {currentPage}/{totalPages}
</span> </span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3">
<div className="hidden items-center gap-1 sm:flex"> <div className="flex items-center gap-1">
{Array.from({ length: totalPages }).map((_, i) => { {Array.from({ length: Math.min(totalPages, 5) }).map((_, i) => {
const isActive = i === currentPage - 1; const isActive = i === Math.min(currentPage - 1, 4);
return ( return (
<button <button
type="button" type="button"
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation> // biome-ignore lint/suspicious/noArrayIndexKey: pagination indicator
key={i} key={i}
onClick={() => setStartIndex(i * tweetsPerPage)} 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 isActive
? "bg-blue-500" ? "bg-blue-500"
: "bg-gray-400 hover:bg-gray-500 dark:bg-gray-600" : "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> </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() { export default function HomePage() {
return ( 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 /> <BackgroundGradients />
<div className="relative z-10 mx-auto mb-10 max-w-5xl text-center sm:mb-16"> <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"> <div className="px-1 sm:px-6 lg:px-8">