make navbar and hero section responsive

Author: FgrReloaded

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

@@ -16,8 +16,6 @@ const BackgroundGradients = () => {
 			</div>
 
 			<div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-[0.15]" />
-
-			{/* <div className="absolute inset-0 bg-noise opacity-[0.035] dark:opacity-[0.07] mix-blend-overlay" /> */}
 		</div>
 	);
 };

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

@@ -43,7 +43,7 @@ const CodeContainer = () => {
 			<div className="relative group">
 				<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg backdrop-blur-lg opacity-25 transition duration-1000 group-hover:duration-200" />
 				<div className="relative rounded-lg p-1 bg-slate-900/30 backdrop-blur-xl">
-					<div className="p-4 font-mono text-gray-300 text-sm bg-black/20 rounded-lg flex items-center justify-between">
+					<div className="sm:p-4 p-2 font-mono text-gray-300 text-sm bg-black/20 rounded-lg flex items-center justify-between">
 						<div className="flex items-center gap-2">
 							<ChevronRight />
 							<span className="text-base bg-clip-text text-transparent bg-gradient-to-br from-purple-400 via-pink-400 to-yellow-400">

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

@@ -3,7 +3,7 @@ import CustomizableStack from "./CustomizableStack";
 
 export default function CustomizableSection() {
 	return (
-		<section className="w-full max-w-6xl mx-auto space-y-12 mt-24 relative">
+		<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">
 				<motion.h2
 					initial={{ opacity: 0, y: 20 }}

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

@@ -265,14 +265,14 @@ const CustomizableStack = () => {
 			<div className="absolute -top-16 left-1/2 -translate-x-1/2 z-50 w-96">
 				<CommandDisplay command={generateCommand()} />
 			</div>
-			<div className="bg-gray-950/10 p-4 absolute top-4 right-4 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
-				<div className="text-sm text-gray-300 text-center">
+			<div className="bg-gray-950/10 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
+				<div className="lg:text-sm text-xs text-gray-300 text-center">
 					Select technologies from the left panel to customize your stack. The
 					graph will automatically update connections.
 				</div>
 			</div>
 			<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-xl" />
-			<div className="h-[600px] pl-28 relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
+			<div className="h-[600px] lg:pl-28 relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
 				<ReactFlow
 					nodes={nodes}
 					edges={edges}

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

@@ -41,14 +41,14 @@ const Navbar = () => {
 
 	return (
 		<nav
-			className={`fixed top-0 left-0 z-[100] w-screen px-8 py-5 flex items-center justify-between transition-all duration-300 ${
+			className={`fixed top-0 left-0 z-[100] w-screen px-8 py-5 flex items-center sm:justify-between justify-center transition-all duration-300 ${
 				scrolled
 					? "bg-transparent border-transparent"
-					: "bg-black/10 backdrop-blur-xl border-b border-white/10"
+					: "sm:bg-black/10 sm:backdrop-blur-xl sm:border-b border-white/10"
 			}`}
 		>
 			<div
-				className={`flex items-center space-x-2 transition-opacity duration-300 ${scrolled ? "opacity-0" : "opacity-100"}`}
+				className={`max-md:hidden flex items-center space-x-2 transition-opacity duration-300 ${scrolled ? "opacity-0" : "opacity-100"}`}
 			>
 				<div className="bg-gradient-to-br from-purple-500 via-pink-400 to-yellow-200 w-8 h-8 rounded-lg flex items-center justify-center">
 					<div className="bg-white w-4 h-4 rounded-sm" />
@@ -58,7 +58,7 @@ const Navbar = () => {
 
 			<div
 				className={`flex items-center backdrop-blur-md bg-white/5 rounded-full border border-white/10 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
-					scrolled ? "w-[420px]" : "w-[280px]"
+					scrolled ? "w-[420px]" : "sm:w-[280px] w-[350px]"
 				}`}
 			>
 				<div
@@ -85,7 +85,8 @@ const Navbar = () => {
 					onMouseLeave={() => setActiveLink("home")}
 					className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
 				>
-					<PackageIcon pm="github" className="w-4 h-4" /> Github
+					<PackageIcon pm="github" className="w-4 h-4" />{" "}
+					<span className="max-sm:hidden">Github</span>
 				</Link>
 				<Link
 					href="https://www.npmjs.com/package/create-better-t-stack"
@@ -97,7 +98,8 @@ const Navbar = () => {
 					onMouseLeave={() => setActiveLink("home")}
 					className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
 				>
-					<PackageIcon pm="npm" className="w-4 h-4 rounded-full" /> Npm
+					<PackageIcon pm="npm" className="w-4 h-4 rounded-full" />{" "}
+					<span className="max-sm:hidden">Npm</span>
 				</Link>
 				<span
 					className="text-gray-500 transition-all duration-300"
@@ -116,12 +118,12 @@ const Navbar = () => {
 					onMouseOver={() => setActiveLink("documentation")}
 					onMouseLeave={() => setActiveLink("home")}
 					style={{
-						transform: scrolled ? "translateY(0)" : "translateY(-8px)",
+						transform: scrolled ? "translateY(0)" : "sm:translateY(-8px)",
 					}}
 					className={` hover:text-white transition-all duration-300 py-2 px-4 rounded-full ${
 						scrolled
-							? "opacity-100 translate-y-0"
-							: "opacity-0 pointer-events-none"
+							? "sm:opacity-100 sm:translate-y-0"
+							: "sm:opacity-0 sm:pointer-events-none"
 					}`}
 				>
 					Documentation
@@ -135,7 +137,7 @@ const Navbar = () => {
 			>
 				<button
 					type="button"
-					className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
+					className="relative max-sm:hidden inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
 				>
 					<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
 					<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-6 py-px text-sm font-medium text-white backdrop-blur-3xl">

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

@@ -153,7 +153,7 @@ const TechConstellation = () => {
 	return (
 		<div
 			ref={containerRef}
-			className="relative w-full h-[90vh] bg-gradient-to-b from-transparent mt-8 via-gray-950 to-transparent overflow-hidden flex items-center justify-center"
+			className="relative z-50 w-full h-[90vh] bg-gradient-to-b from-transparent mt-8 via-gray-950 to-transparent overflow-hidden flex items-center justify-center"
 		>
 			<div
 				ref={centerRef}

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

@@ -20,7 +20,7 @@ interface TechNodeData {
 
 export function TechNodeComponent({ data }: { data: TechNodeData }) {
 	const baseStyles = `
-    relative px-5 py-4 rounded-lg
+    relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
     transition-all duration-300
     border border-white/20
     before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
@@ -37,19 +37,19 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
 				<Handle
 					type="target"
 					position={Position.Top}
-					className="!w-1.5 !h-1.5 !bg-indigo-400/70"
+					className="!w-2 !h-2 !bg-indigo-400/70"
 				/>
 			)}
 
 			<div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}>
-				<div className="text-white font-medium text-sm tracking-wide mb-1.5">
+				<div className="text-white font-medium lg:text-sm text-xs tracking-wide lg:mb-1.5 mb-1">
 					{data.label}
 				</div>
-				<div className="text-[11px] leading-relaxed text-white/80">
+				<div className="lg:text-[11px] text-[9px] leading-relaxed text-white/80">
 					{data.description}
 				</div>
 				{!data.isDefault && !data.isStatic && (
-					<div className="text-[10px] text-indigo-200/70 mt-2 italic">
+					<div className="lg:text-[10px] text-[8px] text-indigo-200/70 mt-2 italic">
 						Alternative Option
 					</div>
 				)}
@@ -58,7 +58,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
 			<Handle
 				type="source"
 				position={Position.Bottom}
-				className="!w-1.5 !h-1.5 !bg-indigo-400/70"
+				className="!w-2 !h-2 !bg-indigo-400/70"
 			/>
 		</div>
 	);

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

@@ -22,7 +22,7 @@ const TerminalDisplay = () => {
   `;
 
 	return (
-		<div className="max-w-6xl mx-auto p-6 mt-12">
+		<div className="max-w-6xl mx-auto p-6 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-4 py-2 flex items-center">
 					<div className="flex space-x-2">

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

@@ -31,15 +31,15 @@ export default function HomePage() {
 					<div className="flex flex-col items-center justify-center space-y-4 text-center">
 						<NpmPackage />
 						<h1 className="text-6xl font-extrabold text-white">
-							<span className="block text-7xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200">
+							<span className="block sm:text-7xl text-6xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200">
 								Better-T Stack
 							</span>
 							<span className="relative">
 								<span className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-purple-400 via-pink-500 to-rose-500 transform origin-left transition-transform duration-300 ease-out scale-x-0 group-hover:scale-x-100" />
 							</span>
 						</h1>
 
-						<p className="text-2xl font-medium text-gray-300 max-w-2xl">
+						<p className="sm:text-2xl text-xl font-medium text-gray-300 max-w-2xl">
 							<span className="inline-block transform hover:scale-105 transition-transform duration-200">
 								Scaffold
 							</span>{" "}
@@ -54,7 +54,7 @@ export default function HomePage() {
 						<ShinyText
 							text="Be the safest developer with typesafe Typescript"
 							speed={3}
-							className="text-lg"
+							className="sm:text-lg text-md"
 						/>
 					</div>
 				</div>
@@ -64,7 +64,7 @@ export default function HomePage() {
 			</div>
 			<TerminalDisplay />
 
-			<div className="w-full max-w-6xl mx-auto space-y-12 mt-12">
+			<div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50">
 				<div className="text-center space-y-6 relative z-10">
 					<h2 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-700 via-gray-100 to-stone-600 pb-2">
 						A Symphony of Modern Tech