From 028046a6b30b412b0106b1095d734c9f6fcaaa7b Mon Sep 17 00:00:00 2001
From: fgrreloaded <nk.nitish.nk500@gmail.com>
Date: Sat, 1 Mar 2025 22:01:38 +0530
Subject: [PATCH] fix gradient

---
 .../src/app/(home)/_components/NpmPackage.tsx | 35 +++++--------------
 apps/web/src/app/(home)/page.tsx              |  4 +--
 2 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/app/(home)/_components/NpmPackage.tsx b/apps/web/src/app/(home)/_components/NpmPackage.tsx
index 34e3452..7cced5e 100644
--- a/apps/web/src/app/(home)/_components/NpmPackage.tsx
+++ b/apps/web/src/app/(home)/_components/NpmPackage.tsx
@@ -4,47 +4,28 @@ import { useEffect, useState } from "react";
 
 const NpmPackage = () => {
 	const [version, setVersion] = useState("");
+	const [versionLoading, setVersionLoading] = useState(true);
 
 	useEffect(() => {
 		const getLatestVersion = async () => {
+			setVersionLoading(true);
 			const res = await fetch(
 				"https://registry.npmjs.org/create-better-t-stack/latest",
 			);
 			const data = await res.json();
+			setVersionLoading(false);
 			setVersion(data.version);
 		};
 		getLatestVersion();
 	}, []);
 
 	return (
-		<button
-			type="button"
-			className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6  text-white inline-block"
-		>
-			<span className="absolute inset-0 overflow-hidden rounded-full">
-				<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+		<div className="flex items-center justify-center mt-2">
+			<span className="inline-block w-3 h-5 bg-blue-400 animate-pulse mr-2" />
+			<span className="text-gray-300 text-xl font-mono">
+				{versionLoading ? "[v1.0.0]" : `[v${version}]`}
 			</span>
-			<div className="relative flex space-x-2 items-center z-10 rounded-full backdrop-blur-3xl bg-gradient-to-tr from-purple-900/50 via-pink-900/50 to-yellow-900/10 py-0.5 px-4 ring-1 ring-white/10 ">
-				<span>create-better-t-stack@{version}</span>
-				<svg
-					fill="none"
-					height="16"
-					viewBox="0 0 24 24"
-					width="16"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<title>arrow</title>
-					<path
-						d="M10.75 8.75L14.25 12L10.75 15.25"
-						stroke="currentColor"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						strokeWidth="1.5"
-					/>
-				</svg>
-			</div>
-			<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
-		</button>
+		</div>
 	);
 };
 
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index c7bdd7c..196335e 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 import ShinyText from "@/app/(home)/_components/ShinyText";
 import React from "react";
-import BackgroundGradients from "./_components/BackgroundGradients";
 import CodeContainer from "./_components/CodeContainer";
 import CustomizableSection from "./_components/CustomizableSection";
 import NpmPackage from "./_components/NpmPackage";
@@ -12,11 +11,9 @@ import Testimonials from "./_components/Testimonials";
 export default function HomePage() {
 	return (
 		<main className="flex flex-col items-center justify-start sm:p-8 p-4 !pt-40">
-			<BackgroundGradients />
 			<div className="max-w-6xl mx-auto text-center mb-16 relative z-50 ">
 				<div className="relative z-10">
 					<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 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
@@ -25,6 +22,7 @@ export default function HomePage() {
 								<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>
+						<NpmPackage />
 
 						<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">