added testimonial and footer

Author: FgrReloaded

apps/web/src/app/(home)/_components/Footer.tsx

@@ -0,0 +1,18 @@
+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" />
+			<div className="max-w-6xl mx-auto px-4 py-12 relative">
+				<div className="mt-12 pt-8 border-t border-gray-800">
+					<p className="text-center text-gray-500">
+						© {new Date().getFullYear()} Better-T Stack. All rights reserved.
+					</p>
+				</div>
+			</div>
+		</footer>
+	);
+};
+
+export default Footer;

apps/web/src/app/(home)/_components/Terminal.tsx

@@ -22,7 +22,7 @@ const TerminalDisplay = () => {
   `;
 
 	return (
-		<div className="w-[95%] max-w-6xl mx-auto p-2 sm:p-6 mt-6 sm:mt-12 relative z-50">
+		<div className="max-sm:w-[95%] max-w-6xl mx-auto p-2 sm:p-6 mt-6 sm:mt-12 relative z-50">
 			<div className="bg-gray-900/30 backdrop-blur-3xl rounded-lg shadow-xl overflow-hidden">
 				<div className="bg-gray-800/30 backdrop-blur-3xl px-2 sm:px-4 py-1 sm:py-2 flex items-center">
 					<div className="flex space-x-1 sm:space-x-2">

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

@@ -0,0 +1,77 @@
+import React from "react";
+
+const testimonials = [
+	{
+		name: "Alex Chen",
+		role: "Senior Developer",
+		company: "TechCorp",
+		content:
+			"Better-T Stack has revolutionized our development workflow. The type safety and development experience is unmatched.",
+		avatar: "AC",
+	},
+	{
+		name: "Sarah Miller",
+		role: "Tech Lead",
+		company: "Innovation Labs",
+		content:
+			"This is the future of full-stack development. The integration between all tools is seamless and intuitive.",
+		avatar: "SM",
+	},
+	{
+		name: "James Wilson",
+		role: "Frontend Architect",
+		company: "DevForce",
+		content:
+			"Finally, a stack that prioritizes both developer experience and performance. It's a game-changer.",
+		avatar: "JW",
+	},
+];
+
+const Testimonials = () => {
+	return (
+		<section className="w-full py-24 px-4 bg-gray-900/50 backdrop-blur-sm">
+			<div className="max-w-6xl mx-auto">
+				<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>
+					<p className="text-gray-400 mt-4 text-lg">
+						Join thousands of developers crafting the future with Better-T Stack
+					</p>
+				</div>
+
+				<div className="grid md:grid-cols-3 gap-6">
+					{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"
+						>
+							<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">
+										{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>
+									</p>
+								</div>
+							</div>
+							<p className="text-gray-300 leading-relaxed">
+								{testimonial.content}
+							</p>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default Testimonials;

apps/web/src/app/(home)/layout.tsx

@@ -2,6 +2,7 @@ import { baseOptions } from "@/app/layout.config";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
+import Footer from "./_components/Footer";
 import Navbar from "./_components/Navbar";
 
 export const metadata: Metadata = {
@@ -14,6 +15,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 		<HomeLayout {...baseOptions}>
 			<Navbar />
 			{children}
+			<Footer />
 		</HomeLayout>
 	);
 }

apps/web/src/app/(home)/page.tsx

@@ -5,12 +5,12 @@ import React from "react";
 import BackgroundGradients from "./_components/BackgroundGradients";
 import CodeContainer from "./_components/CodeContainer";
 import CustomizableSection from "./_components/CustomizableSection";
-// import Featured from "./_components/FeaturedSection";
 import NpmPackage from "./_components/NpmPackage";
 import SideCircles from "./_components/SideCircles";
 import Spotlight from "./_components/Spotlight";
 import TechConstellation from "./_components/TechConstellation";
 import TerminalDisplay from "./_components/Terminal";
+import Testimonials from "./_components/Testimonials";
 
 const poppins = Poppins({
 	subsets: ["latin"],
@@ -20,7 +20,7 @@ const poppins = Poppins({
 export default function HomePage() {
 	return (
 		<main
-			className="min-h-screen flex flex-col items-center justify-start sm:p-8 p-4 pt-20"
+			className="min-h-screen flex flex-col items-center justify-start sm:p-8 p-4 !pt-20"
 			style={poppins.style}
 		>
 			<BackgroundGradients />
@@ -95,6 +95,7 @@ export default function HomePage() {
 			</div>
 			<TechConstellation />
 			<CustomizableSection />
+			<Testimonials />
 		</main>
 	);
 }