From d4de34d129140b2d926947b3a2c3e5ee901d2eb0 Mon Sep 17 00:00:00 2001
From: fgrreloaded <nk.nitish.nk500@gmail.com>
Date: Sat, 1 Mar 2025 22:27:21 +0530
Subject: [PATCH] updated testimonials and footer

---
 .../web/src/app/(home)/_components/Footer.tsx | 58 +++++++++++++--
 .../app/(home)/_components/Testimonials.tsx   | 74 ++++++++++---------
 apps/web/src/app/(home)/page.tsx              | 38 ++++++++++
 3 files changed, 132 insertions(+), 38 deletions(-)

diff --git a/apps/web/src/app/(home)/_components/Footer.tsx b/apps/web/src/app/(home)/_components/Footer.tsx
index d929a4a..8cb5aef 100644
--- a/apps/web/src/app/(home)/_components/Footer.tsx
+++ b/apps/web/src/app/(home)/_components/Footer.tsx
@@ -1,14 +1,62 @@
-import React from "react";
-
 const Footer = () => {
 	return (
-		<footer className="relative w-full mt-20">
-			<div className="absolute inset-0 bg-gradient-to-t from-purple-500/10 via-transparent to-transparent" />
+		<footer className="relative w-full font-mono">
 			<div className="max-w-6xl mx-auto px-4 py-12 relative">
-				<div className="mt-12 pt-8 border-t border-gray-800">
+				<div className="grid md:grid-cols-3 gap-8 mb-12">
+					<div>
+						<h3 className="text-white font-bold mb-3 text-lg">
+							<span className="text-blue-500">$</span> better-t.stack
+						</h3>
+						<p className="text-gray-400">
+							The ultimate TypeScript scaffolding tool for modern web
+							development
+						</p>
+					</div>
+					<div>
+						<h3 className="text-white font-bold mb-3 text-lg">
+							<span className="text-gray-400">$</span> links
+						</h3>
+						<ul className="text-gray-400 space-y-2">
+							<li>
+								<a
+									href="https://github.com/better-t-stack/create-better-t-stack"
+									className="hover:text-white transition-colors"
+								>
+									<span className="text-gray-500">-</span> GitHub
+								</a>
+							</li>
+							<li>
+								<a
+									href="https://www.npmjs.com/package/create-better-t-stack"
+									className="hover:text-white transition-colors"
+								>
+									<span className="text-gray-500">-</span> NPM
+								</a>
+							</li>
+							<li>
+								<a href="/docs" className="hover:text-white transition-colors">
+									<span className="text-gray-500">-</span> Documentation
+								</a>
+							</li>
+						</ul>
+					</div>
+					<div>
+						<h3 className="text-white font-bold mb-3 text-lg">
+							<span className="text-gray-400">$</span> contact
+						</h3>
+						<p className="text-gray-400">
+							<span className="text-gray-500">echo</span>{" "}
+							&quot;hello@better-t-stack.dev&quot;
+						</p>
+					</div>
+				</div>
+				<div className="mt-12 pt-8 border-t border-gray-800/30">
 					<p className="text-center text-gray-500">
 						© {new Date().getFullYear()} Better-T Stack. All rights reserved.
 					</p>
+					<p className="text-center text-gray-600 text-sm mt-2">
+						Made with <span className="text-blue-500">TypeScript</span> ♥
+					</p>
 				</div>
 			</div>
 		</footer>
diff --git a/apps/web/src/app/(home)/_components/Testimonials.tsx b/apps/web/src/app/(home)/_components/Testimonials.tsx
index 28ba5eb..c79cdf2 100644
--- a/apps/web/src/app/(home)/_components/Testimonials.tsx
+++ b/apps/web/src/app/(home)/_components/Testimonials.tsx
@@ -1,42 +1,43 @@
-import React from "react";
-
 const testimonials = [
 	{
-		name: "Alex Chen",
-		role: "Senior Developer",
-		company: "TechCorp",
+		name: "$ user@dev.sh",
+		role: "Senior",
+		company: "TypeScript",
+		avatar: ">_",
 		content:
-			"Better-T Stack has revolutionized our development workflow. The type safety and development experience is unmatched.",
-		avatar: "AC",
+			"The type safety across the entire stack is exactly what I've been looking for. Incredible productivity boost.",
 	},
 	{
-		name: "Sarah Miller",
-		role: "Tech Lead",
-		company: "Innovation Labs",
+		name: "$ sarah@code.io",
+		role: "Lead",
+		company: "Engineer",
+		avatar: "~/",
 		content:
-			"This is the future of full-stack development. The integration between all tools is seamless and intuitive.",
-		avatar: "SM",
+			"Better-T Stack simplified our deployment pipeline and improved our team's development experience tremendously.",
 	},
 	{
-		name: "James Wilson",
-		role: "Frontend Architect",
-		company: "DevForce",
+		name: "$ alex@terminal.dev",
+		role: "Full-Stack",
+		company: "Dev",
+		avatar: "[]",
 		content:
-			"Finally, a stack that prioritizes both developer experience and performance. It's a game-changer.",
-		avatar: "JW",
+			"After switching to Better-T, our build times dropped by 60% and bug reports decreased significantly.",
 	},
 ];
 
 const Testimonials = () => {
 	return (
-		<section className="w-full py-24 px-4 bg-gradient-to-b from-transparent via-gray-900/50 to-transparent backdrop-blur-sm relative z-50">
-			<div className="max-w-6xl mx-auto">
+		<section className="py-20 relative">
+			<div className="absolute inset-0 opacity-90 z-0" />
+
+			<div className="max-w-6xl mx-auto relative z-10">
 				<div className="text-center mb-16">
-					<h2 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500">
-						Loved by Developers Worldwide
+					<h2 className="text-4xl font-bold text-white">
+						<span className="text-gray-400">$</span> cat testimonials.log
 					</h2>
-					<p className="text-gray-400 mt-4 text-lg">
-						Join thousands of developers crafting the future with Better-T Stack
+					<p className="text-gray-400 mt-4 text-lg font-mono">
+						<span className="text-gray-500">Output:</span> Users reporting
+						success with Better-T Stack
 					</p>
 				</div>
 
@@ -44,31 +45,38 @@ const Testimonials = () => {
 					{testimonials.map((testimonial) => (
 						<div
 							key={testimonial.name}
-							className="group rounded-xl border border-gray-800 bg-gray-900/70 p-6 hover:border-gray-700 transition-colors duration-200"
+							className="group rounded-md border border-gray-800 bg-black/30 p-6 hover:border-blue-500/30 transition-colors duration-200"
 						>
 							<div className="flex items-center space-x-4 mb-4">
 								<div className="shrink-0">
-									<div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-white font-medium">
+									<div className="w-10 h-10 rounded-sm bg-gradient-to-r from-gray-900 to-gray-800 flex items-center justify-center text-gray-300 font-mono">
 										{testimonial.avatar}
 									</div>
 								</div>
 								<div>
-									<h3 className="text-white font-semibold">
-										{testimonial.name}
-									</h3>
-									<p className="text-sm">
-										<span className="text-purple-400">{testimonial.role}</span>
-										<span className="text-gray-500 mx-1">at</span>
-										<span className="text-pink-400">{testimonial.company}</span>
+									<h3 className="text-white font-mono">{testimonial.name}</h3>
+									<p className="text-sm font-mono">
+										<span className="text-gray-400">{testimonial.role}</span>
+										<span className="text-gray-500 mx-1">@</span>
+										<span className="text-gray-400">{testimonial.company}</span>
 									</p>
 								</div>
 							</div>
-							<p className="text-gray-300 leading-relaxed">
+							<p className="text-gray-300 leading-relaxed font-mono border-l-2 border-blue-700 pl-4">
 								{testimonial.content}
 							</p>
 						</div>
 					))}
 				</div>
+
+				<div className="text-center mt-12">
+					<div className="inline-block py-2 px-4 bg-black border border-gray-800 rounded-md">
+						<span className="text-blue-500 font-bold mr-2">$</span>
+						<span className="text-white font-mono">
+							Join the growing community of developers
+						</span>
+					</div>
+				</div>
 			</div>
 		</section>
 	);
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index 549559f..232c337 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -88,6 +88,44 @@ export default function HomePage() {
 			</div>
 			<TechConstellation />
 			<CustomizableSection />
+			<div className="w-full pt-16 relative overflow-hidden">
+				<div className="max-w-6xl mx-auto relative">
+					<div className="flex items-center justify-center">
+						<div className="hidden sm:flex items-center w-1/3">
+							<div className="h-px flex-grow bg-gradient-to-r from-transparent to-blue-500/70" />
+							<div className="h-8 w-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center relative">
+								<div
+									className="h-2 w-2 bg-blue-400 rounded-full animate-ping absolute"
+									style={{ animationDuration: "2.5s" }}
+								/>
+							</div>
+						</div>
+
+						<div className="relative flex flex-col items-center justify-center px-6 z-10">
+							<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 blur-xl -z-10" />
+						</div>
+
+						<div className="hidden sm:flex items-center w-1/3">
+							<div className="h-8 w-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center relative">
+								<div
+									className="h-2 w-2 bg-indigo-400 rounded-full animate-ping absolute"
+									style={{ animationDuration: "2.5s" }}
+								/>
+							</div>
+							<div className="h-px flex-grow bg-gradient-to-l from-transparent to-indigo-500/70" />
+						</div>
+					</div>
+
+					<div className="sm:hidden h-px w-full mt-4 bg-gradient-to-r from-blue-500/30 via-indigo-500 to-blue-500/30" />
+
+					<div className="absolute -top-10 left-1/4 text-6xl text-gray-800/10 font-mono transform rotate-12">
+						{"{"}
+					</div>
+					<div className="absolute -bottom-10 right-1/4 text-6xl text-gray-800/10 font-mono transform -rotate-12">
+						{"}"}
+					</div>
+				</div>
+			</div>
 			<Testimonials />
 		</main>
 	);