final fix design

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

@@ -4,46 +4,56 @@ import CustomizableStack from "./CustomizableStack";
 export default function CustomizableSection() {
 	return (
 		<section className="w-full max-w-6xl mx-auto space-y-12 mt-24 relative z-50">
-			<div className="text-center space-y-6 relative z-10">
+			<div className="text-center space-y-6 relative z-10 border border-gray-700/30 p-6 rounded-md bg-gray-950/30 backdrop-blur-sm">
-				<motion.h2
+				<div className="relative">
-					initial={{ opacity: 0, y: 20 }}
+					<motion.h2
-					whileInView={{ opacity: 1, y: 0 }}
+						initial={{ opacity: 0, y: 20 }}
-					transition={{ duration: 0.5 }}
+						whileInView={{ opacity: 1, y: 0 }}
-					className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 pb-2"
+						transition={{ duration: 0.5 }}
-				>
+						className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group"
-					Your Stack, Your Choice
+					>
-				</motion.h2>
+						<span className="text-blue-400 font-mono mr-1 animate-pulse">
+							{">"}
+						</span>
+						<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:from-purple-400 hover:to-blue-500 transition-all duration-300">
+							Your Stack, Your Choice
+						</span>
+					</motion.h2>
+					<div className="absolute -inset-1 bg-gradient-to-r from-gray-800/0 via-gray-700/10 to-gray-800/0 blur-xl -z-10" />
+				</div>
+
 				<motion.div
 					initial={{ opacity: 0, y: 20 }}
 					whileInView={{ opacity: 1, y: 0 }}
 					transition={{ duration: 0.5, delay: 0.2 }}
 					className="space-y-4 max-w-3xl mx-auto"
 				>
-					<p className="text-xl text-gray-300 leading-relaxed">
+					<p className="sm:text-xl text-gray-300 leading-relaxed font-mono">
-						Better-T Stack comes with carefully selected defaults, but we
+						<span className="text-yellow-400">$</span> Better-T Stack with
-						understand one size doesn&apos;t fit all.
+						defaults,
-						<span className="text-purple-400 font-semibold">
+						<span className="text-blue-400 font-semibold">
 							{" "}
-							Customize your stack{" "}
+							customizable options
-						</span>
+						</span>{" "}
-						while maintaining full type safety and integration.
+						for your perfect development environment
 					</p>
 
-					<div className="flex flex-wrap justify-center gap-4 text-sm text-gray-400">
+					<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400">
-						<span className="px-3 py-1 bg-gray-800/50 rounded-full hover:bg-gray-800 transition-colors">
+						<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
-							Multiple Database Options
+							--multiple-database-options
 						</span>
-						<span className="px-3 py-1 bg-gray-800/50 rounded-full hover:bg-gray-800 transition-colors">
+						<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
-							Flexible Authentication
+							--flexible-authentication
 						</span>
-						<span className="px-3 py-1 bg-gray-800/50 rounded-full hover:bg-gray-800 transition-colors">
+						<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
-							Alternative ORMs
+							--alternative-orms
 						</span>
-						<span className="px-3 py-1 bg-gray-800/50 rounded-full hover:bg-gray-800 transition-colors">
+						<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
-							Framework Choices
+							--framework-choices
 						</span>
 					</div>
 				</motion.div>
+				<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-purple-500/5 to-pink-500/5 -z-10" />
 			</div>
 
 			<motion.div

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

@@ -213,6 +213,24 @@ const TechConstellation = () => {
 							<strong>{tech.name}</strong>
 							<p className="text-gray-300 text-[10px]">{tech.description}</p>
 						</div>
+						<div
+							className={`absolute ${tech.top ? tech.top : "-top-[60px]"} ${tech.left ? tech.left : "left-1/2"}
+                              transform -translate-x-1/2 bg-gradient-to-br from-gray-900/90 to-gray-950/90
+                              text-white px-3 py-1.5 rounded-lg transition-all duration-300
+                              whitespace-nowrap text-xs hover:scale-105 backdrop-blur-sm
+                              border border-blue-800/30 shadow-[0_0_10px_rgba(0,0,0,0.4)]
+                              group min-w-[160px] text-center z-30`}
+						>
+							<div className="absolute inset-0 bg-noise opacity-10 rounded-lg" />
+							<strong className="text-sm text-blue-200 block">
+								{tech.name}
+							</strong>
+							<p className="text-gray-300 mt-1">{tech.description}</p>
+							<div
+								className="absolute h-0.5 w-0 bg-gradient-to-r from-blue-500/0 via-blue-500 to-blue-500/0
+                                bottom-0 left-0 group-hover:w-full transition-all duration-500 border-beam"
+							/>
+						</div>
 					</div>
 				);
 			})}

apps/web/src/lib/constant.ts

@@ -21,7 +21,7 @@ export const technologies = [
 		textColor: "text-black",
 		description: "Fast all-in-one JavaScript runtime",
 		top: "top-[2px]",
-		left: "left-[10rem]",
+		left: "left-[11rem]",
 	},
 	{
 		name: "tRPC",
@@ -43,7 +43,7 @@ export const technologies = [
 		textColor: "text-white",
 		description: "Type-safe routing",
 		top: "top-[2px]",
-		left: "left-[7.5rem]",
+		left: "left-[8.5rem]",
 	},
 	{
 		name: "Tailwind CSS",
@@ -92,6 +92,7 @@ export const technologies = [
 		color: "bg-green-400",
 		textColor: "text-black",
 		description: "TypeScript ORM",
+		left: "left-[4rem]",
 	},
 	{
 		name: "Sqlite",