franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix gradient

Browse Source
This commit is contained in:
fgrreloaded
2025-03-01 22:01:38 +05:30
parent b82ac8e8cc
commit 028046a6b3
2 changed files with 9 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/web/src/app/(home)/_components/NpmPackage.tsx
View File

@@ -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>
);
};

4
apps/web/src/app/(home)/page.tsx
View File

@@ -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">