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

add testimonials

Browse Source
This commit is contained in:
Aman Varshney
2025-03-30 18:07:50 +05:30
parent 32b0532927
commit b5d558ac89
6 changed files with 245 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,15 +53,15 @@ const CodeContainer = () => {
}, [typingComplete, currentStep]);
return (
<div className="w-full max-w-3xl mx-auto mt-8">
<div className="w-full max-w-3xl mx-auto mt-4 sm:mt-8">
<div className="rounded-xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-black text-gray-800 dark:text-white">
<div className="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center justify-between">
<div className="bg-gray-200 dark:bg-gray-800 px-3 sm:px-4 py-2 flex items-center justify-between">
<div className="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
</div>
<div className="font-mono text-xs text-gray-600 dark:text-gray-400">
<div className="font-mono text-[10px] sm:text-xs text-gray-600 dark:text-gray-400 hidden xs:block">
Quick Install Terminal
</div>
@@ -69,7 +69,7 @@ const CodeContainer = () => {
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="flex items-center px-2 py-1 text-xs bg-gray-300/50 dark:bg-gray-800/50 rounded border border-gray-300 dark:border-gray-700 hover:bg-gray-300/80 dark:hover:bg-gray-700/50"
className="flex items-center px-1.5 sm:px-2 py-1 text-[10px] sm:text-xs bg-gray-300/50 dark:bg-gray-800/50 rounded border border-gray-300 dark:border-gray-700 hover:bg-gray-300/80 dark:hover:bg-gray-700/50"
>
<Terminal className="w-3 h-3 mr-1 text-gray-600 dark:text-gray-400">
<title>Package Manager</title>
@@ -97,7 +97,7 @@ const CodeContainer = () => {
<motion.div
initial={{ opacity: 0, y: -5 }}
animate={{ opacity: 1, y: 0 }}
className="absolute right-0 mt-1 w-36 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg z-50"
className="absolute right-0 mt-1 w-32 sm:w-36 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg z-50"
>
<ul>
{(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map(
@@ -105,7 +105,7 @@ const CodeContainer = () => {
<li key={pm}>
<button
type="button"
className={`block w-full text-left px-3 py-1.5 text-xs ${
className={`block w-full text-left px-3 py-1.5 text-[10px] sm:text-xs ${
selectedPM === pm
? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-l-2 border-blue-500"
: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
@@ -129,9 +129,9 @@ const CodeContainer = () => {
</div>
</div>
<div className="p-4 font-mono text-sm bg-gray-50 dark:bg-gray-900">
<div className="p-3 sm:p-4 font-mono text-xs sm:text-sm bg-gray-50 dark:bg-gray-900 overflow-x-auto">
<div className="flex items-center">
<div className="flex-grow">
<div className="flex-grow overflow-x-auto">
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
<span className="text-gray-700 dark:text-gray-300">
{commands[selectedPM]}
@@ -151,7 +151,7 @@ const CodeContainer = () => {
whileTap={{ scale: 0.95 }}
type="button"
onClick={() => copyToClipboard(selectedPM)}
className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors flex-shrink-0 ml-2"
title="Copy command"
>
{copied ? (
@@ -167,8 +167,12 @@ const CodeContainer = () => {
</div>
{typingComplete && (
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<div className="mt-3 pl-4 text-amber-600 dark:text-amber-400">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="overflow-x-auto"
>
<div className="mt-3 pl-2 sm:pl-4 text-amber-600 dark:text-amber-400">
{currentStep >= 1 && (
<motion.p
initial={{ opacity: 0, y: -5 }}
@@ -223,7 +227,7 @@ const CodeContainer = () => {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.3 }}
className="mt-3 pl-4"
className="mt-3 pl-2 sm:pl-4"
>
{currentStep >= 3 && (
<motion.p
@@ -232,10 +236,10 @@ const CodeContainer = () => {
transition={{ delay: 0.4 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
>
<CircleCheck className="w-4 h-4 mr-1">
<CircleCheck className="w-4 h-4 mr-1 flex-shrink-0">
<title>Completed</title>
</CircleCheck>
Creating project structure
<span>Creating project structure</span>
</motion.p>
)}
{currentStep >= 4 && (
@@ -245,10 +249,10 @@ const CodeContainer = () => {
transition={{ delay: 0.5 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
>
<CircleCheck className="w-4 h-4 mr-1">
<CircleCheck className="w-4 h-4 mr-1 flex-shrink-0">
<title>Completed</title>
</CircleCheck>
Installing dependencies
<span>Installing dependencies</span>
</motion.p>
)}
{currentStep >= 5 && (
@@ -263,10 +267,10 @@ const CodeContainer = () => {
transition={{ delay: 0.7 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
>
<CircleCheck className="w-4 h-4 mr-1">
<CircleCheck className="w-4 h-4 mr-1 flex-shrink-0">
<title>Completed</title>
</CircleCheck>
Setting up database schema
<span>Setting up database schema</span>
</motion.p>
<motion.p
initial={{ opacity: 0, x: -5 }}
@@ -274,19 +278,19 @@ const CodeContainer = () => {
transition={{ delay: 0.8 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
>
<CircleCheck className="w-4 h-4 mr-1">
<CircleCheck className="w-4 h-4 mr-1 flex-shrink-0">
<title>Completed</title>
</CircleCheck>
Configuring authentication
<span>Configuring authentication</span>
</motion.p>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.9 }}
className="mt-4 flex items-center px-2 py-2 rounded bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 border border-blue-300 dark:border-blue-800/30"
className="mt-4 flex flex-col xs:flex-row xs:items-center px-2 py-2 rounded bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 border border-blue-300 dark:border-blue-800/30 text-[10px] sm:text-xs"
>
<svg
className="w-5 h-5 mr-2 text-blue-600 dark:text-blue-400"
className="w-4 h-4 mb-1 xs:mb-0 xs:mr-2 text-blue-600 dark:text-blue-400 flex-shrink-0"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -298,18 +302,18 @@ const CodeContainer = () => {
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
<polyline points="22 4 12 14.01 9 11.01" />
</svg>
<span>
Project ready! Run{" "}
<code className="px-1.5 py-0.5 bg-blue-200 dark:bg-blue-800/50 rounded">
<div className="flex flex-wrap">
<span className="mr-1">Project ready! Run</span>
<code className="px-1 py-0.5 bg-blue-200 dark:bg-blue-800/50 rounded mb-1 xs:mb-0 mr-1">
cd my-better-t-app
</code>{" "}
and{" "}
<code className="px-1.5 py-0.5 bg-blue-200 dark:bg-blue-800/50 rounded">
</code>
<span className="mr-1">and</span>
<code className="px-1 py-0.5 bg-blue-200 dark:bg-blue-800/50 rounded">
{selectedPM === "npm" && "npm run dev"}
{selectedPM === "pnpm" && "pnpm dev"}
{selectedPM === "bun" && "bun dev"}
</code>
</span>
</div>
</motion.div>
</motion.div>
)}
@@ -329,11 +333,11 @@ const CodeContainer = () => {
</div>
</div>
<div className="bg-gray-200 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 px-4 py-2">
<div className="flex items-center justify-center text-xs text-gray-600 dark:text-gray-400">
<span className="inline-flex items-center gap-1.5">
<div className="bg-gray-200 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 px-2 sm:px-4 py-2">
<div className="flex items-center justify-center text-[10px] sm:text-xs text-gray-600 dark:text-gray-400 text-center">
<span className="inline-flex flex-wrap items-center justify-center gap-1">
<span>For custom options, use</span>
<code className="px-1.5 py-0.5 bg-gray-300 dark:bg-gray-700 rounded">
<code className="px-1 py-0.5 bg-gray-300 dark:bg-gray-700 rounded whitespace-nowrap">
{selectedPM === "npm" && "npx"}
{selectedPM === "pnpm" && "pnpm dlx"}
{selectedPM === "bun" && "bunx"} create-better-t-stack