fix errors

apps/web/components/ShinyText/ShinyText.tsx

@@ -1,4 +1,3 @@
-
 interface ShinyTextProps {
 	text: string;
 	disabled?: boolean;
@@ -6,12 +5,17 @@ interface ShinyTextProps {
 	className?: string;
 }
 
-const ShinyText = ({ text, disabled = false, speed = 5, className = '' }: ShinyTextProps) => {
+const ShinyText = ({
+	text,
+	disabled = false,
+	speed = 5,
+	className = "",
+}: ShinyTextProps) => {
 	const animationDuration = `${speed}s`;
 
 	return (
 		<div
-      className={`shiny-text ${disabled ? 'disabled' : ''} ${className}`}
+			className={`shiny-text ${disabled ? "disabled" : ""} ${className}`}
 			style={{ animationDuration }}
 		>
 			{text}

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

@@ -1,18 +1,22 @@
-import React from 'react'
+import React from "react";
 
 const CenterLines = () => {
 	return (
 		<>
-      <div className='absolute top-3/4 -translate-y-1/2 left-0 w-80 h-14
+			<div
+				className="absolute top-3/4 -translate-y-1/2 left-0 w-80 h-14
       rounded-bl-3xl transform rotate-180
       border-b-2 border-l-2 border-slate-700
-      shadow-lg backdrop-blur-sm' />
+      shadow-lg backdrop-blur-sm"
-      <div className='absolute top-3/4 -translate-y-1/2 right-0 w-80 h-14
+			/>
+			<div
+				className="absolute top-3/4 -translate-y-1/2 right-0 w-80 h-14
       rounded-br-3xl transform rotate-180
       border-b-2 border-r-2 border-slate-700
-      shadow-lg backdrop-blur-sm' />
+      shadow-lg backdrop-blur-sm"
+			/>
 		</>
-  )
+	);
-}
+};
 
-export default CenterLines
+export default CenterLines;

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

@@ -1,12 +1,14 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
 import { ChevronRight } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import PackageIcon from "./Icons";
 
 const CodeContainer = () => {
 	const [isOpen, setIsOpen] = useState(false);
-  const [selectedPM, setSelectedPM] = useState<"npm" | "yarn" | "pnpm" | "bun">("npm");
+	const [selectedPM, setSelectedPM] = useState<"npm" | "yarn" | "pnpm" | "bun">(
+		"npm",
+	);
 	const [copied, setCopied] = useState(false);
 	const menuRef = useRef<HTMLDivElement>(null);
 
@@ -17,15 +19,15 @@ const CodeContainer = () => {
 			}
 		};
 
-    document.addEventListener('mousedown', handleClickOutside);
+		document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
 	}, []);
 
 	const commands = {
 		npm: "npx create-better-t-stack@latest",
 		yarn: "yarn dlx create better-t-stack",
 		pnpm: "pnpm dlx create better-t-stack",
-    bun: "bunx create-better-t-stack"
+		bun: "bunx create-better-t-stack",
 	};
 
 	const copyToClipboard = async (pm: "npm" | "yarn" | "pnpm" | "bun") => {
@@ -39,7 +41,7 @@ const CodeContainer = () => {
 	return (
 		<div className="w-full max-w-3xl mx-auto mt-12">
 			<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>
+				<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="flex items-center gap-2">
@@ -50,6 +52,7 @@ const CodeContainer = () => {
 						</div>
 						<div className="relative" ref={menuRef}>
 							<button
+								type="button"
 								onClick={() => setIsOpen(!isOpen)}
 								className="flex items-center space-x-2 px-3 py-2 w-10 justify-center rounded-md cursor-pointer hover:bg-white/10 transition-colors text-gray-300 hover:text-white relative"
 							>
@@ -67,17 +70,21 @@ const CodeContainer = () => {
 								<div className="absolute right-6 top-8 mt-2 w-24 rounded-lg backdrop-blur-lg bg-violet-950/10 shadow-xl ring-1 ring-white/10 divide-y divide-gray-700/30 transition-all duration-200">
 									{(["npm", "yarn", "pnpm", "bun"] as const).map((pm) => (
 										<button
+											type="button"
 											key={pm}
 											onClick={() => copyToClipboard(pm)}
 											className="group cursor-pointer flex items-center w-full px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 first:rounded-t-lg last:rounded-b-lg"
 										>
-                      <PackageIcon className="h-4 w-4 mr-2 group-hover:scale-110 transition-transform" pm={pm} /> {pm}
+											<PackageIcon
+												className="h-4 w-4 mr-2 group-hover:scale-110 transition-transform"
+												pm={pm}
+											/>{" "}
+											{pm}
 										</button>
 									))}
 								</div>
 							)}
 						</div>
-
 					</div>
 				</div>
 			</div>
@@ -85,7 +92,6 @@ const CodeContainer = () => {
 	);
 };
 
-
 const CopyIcon = ({ className = "" }) => (
 	<svg
 		className={className}
@@ -94,6 +100,7 @@ const CopyIcon = ({ className = "" }) => (
 		viewBox="0 0 24 24"
 		xmlns="http://www.w3.org/2000/svg"
 	>
+		<title>copy</title>
 		<path
 			strokeLinecap="round"
 			strokeLinejoin="round"
@@ -111,6 +118,7 @@ const CheckIcon = ({ className = "" }) => (
 		viewBox="0 0 24 24"
 		xmlns="http://www.w3.org/2000/svg"
 	>
+		<title>check</title>
 		<path
 			strokeLinecap="round"
 			strokeLinejoin="round"

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

@@ -1,5 +1,5 @@
 /** eslint-disable react/jsx-no-comment-textnodes */
-import React from 'react'
+import React from "react";
 
 const CodeExample = () => {
 	return (
@@ -17,9 +17,8 @@ const CodeExample = () => {
 				<div className="space-y-2">
 					<div className="text-slate-400">{"// ❌ Without Type Safety"}</div>
 					<div className="text-white">
-            function processUser(user) {
+						function processUser(user){" "}
-              <span className="text-red-400">console.log(user.namee)</span>
+						{<span className="text-red-400">console.log(user.namee)</span>}
-            }
 					</div>
 					<div className="text-red-400 text-xs bg-red-900/30 p-2 rounded">
 						Property &apos;namee&apos; does not exist on type &apos;User&apos;.
@@ -30,29 +29,30 @@ const CodeExample = () => {
 					<div>
 						<span className="text-blue-400">interface</span>
 						<span className="text-green-400"> User</span>
-            <span className="text-white"> {'{'}</span>
+						<span className="text-white"> {"{"}</span>
 					</div>
 					<div className="pl-4 text-slate-200">
 						name: string;
 						<br />
 						age: number;
 					</div>
-          <div className="text-white">{'}'}</div>
+					<div className="text-white">{"}"}</div>
 					<div>
 						<span className="text-blue-400">function</span>
 						<span className="text-yellow-400"> processUser</span>
 						<span className="text-white">(user: </span>
 						<span className="text-green-400">User</span>
-            <span className="text-white">) {'{'}</span>
+						<span className="text-white">) {"{"}</span>
 					</div>
 					<div className="pl-4 text-slate-200">
-            console.log(user.name) <span className="text-slate-400">{"// ✨ Type checked!"}</span>
+						console.log(user.name){" "}
+						<span className="text-slate-400">{"// ✨ Type checked!"}</span>
 					</div>
-          <div className="text-white">{'}'}</div>
+					<div className="text-white">{"}"}</div>
 				</div>
 			</div>
 		</div>
-  )
+	);
-}
+};
 
-export default CodeExample
+export default CodeExample;

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

@@ -18,6 +18,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
 					strokeLinejoin="round"
 					strokeMiterlimit="2"
 				>
+					<title>yarn</title>
 					<path
 						d="M256 0c141.344 0 256 114.656 256 256S397.344 512 256 512 0 397.344 0 256 114.656 0 256 0z"
 						fill="#2c8ebb"
@@ -39,7 +40,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
 					viewBox="0 0 32 32"
 					xmlns="http://www.w3.org/2000/svg"
 				>
-					<title>file_type_pnpm</title>
+					<title>pnpm</title>
 					<path d="M30,10.75H21.251V2H30Z" style={{ fill: "#f9ad00" }} />
 					<path d="M20.374,10.75h-8.75V2h8.75Z" style={{ fill: "#f9ad00" }} />
 					<path d="M10.749,10.75H2V2h8.749Z" style={{ fill: "#f9ad00" }} />
@@ -58,6 +59,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
 					fill="none"
 					viewBox="0 0 100 100"
 				>
+					<title>bun</title>
 					<path
 						fill="#000"
 						d="M89.237 32.3c-.2-.213-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625A33.08 33.08 0 0 1 94.75 51c0 20.712-21.025 37.562-46.875 37.562-14.475 0-27.425-5.287-36.038-13.575l.625.625.625.625.625.625.625.625.625.625.625.625.625.625c8.6 8.638 21.838 14.2 36.663 14.2 25.85 0 46.875-16.85 46.875-37.5 0-8.825-3.8-17.187-10.513-23.762"

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

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 const NpmPackage = () => {
 	const [version, setVersion] = useState("");
 
+	useEffect(() => {
 		const getLatestVersion = async () => {
 			const res = await fetch(
 				"https://registry.npmjs.org/create-better-t-stack/latest",
@@ -12,13 +13,14 @@ const NpmPackage = () => {
 			const data = await res.json();
 			setVersion(data.version);
 		};
-
-	useEffect(() => {
 		getLatestVersion();
 	}, []);
 
 	return (
-		<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">
+		<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" />
 			</span>
@@ -31,6 +33,7 @@ const NpmPackage = () => {
 					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"

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

@@ -1,10 +1,5 @@
-
 const SafetyMessage = () => {
-  return (
+	return <div className="relative" />;
-    <div className="relative">
+};
 
-    </div>
+export default SafetyMessage;
-  )
-}
-
-export default SafetyMessage

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

@@ -1,11 +1,11 @@
-import React from "react";
+import ShinyText from "components/ShinyText/ShinyText";
 import { Poppins } from "next/font/google";
+import React from "react";
 import BackgroundGradients from "./_components/BackgroundGradients";
-import Spotlight from "./_components/Spotlight";
+import CodeContainer from "./_components/CodeContainer";
 import NpmPackage from "./_components/NpmPackage";
 import SideCircles from "./_components/SideCircles";
-import CodeContainer from "./_components/CodeContainer";
+import Spotlight from "./_components/Spotlight";
-import ShinyText from "components/ShinyText/ShinyText";
 
 const poppins = Poppins({
 	subsets: ["latin"],
@@ -14,7 +14,10 @@ const poppins = Poppins({
 
 export default function HomePage() {
 	return (
-    <main className="min-h-screen flex flex-col items-center justify-start p-8" style={poppins.style}>
+		<main
+			className="min-h-screen flex flex-col items-center justify-start p-8"
+			style={poppins.style}
+		>
 			<BackgroundGradients />
 			<Spotlight />
 			<SideCircles />
@@ -23,7 +26,9 @@ 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">Better-T Stack</span>
+							<span className="block text-7xl 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>
@@ -41,7 +46,11 @@ export default function HomePage() {
 							</span>
 						</p>
 						<CodeContainer />
-            <ShinyText text="Be the safest developer with typesafe Typescript" speed={3} className="text-lg" />
+						<ShinyText
+							text="Be the safest developer with typesafe Typescript"
+							speed={3}
+							className="text-lg"
+						/>
 					</div>
 				</div>
 				<div className="absolute inset-0 -z-10">

apps/web/src/app/global.css

@@ -10,10 +10,12 @@
 
 .shiny-text {
 	color: #b5b5b5a4;
-  background: linear-gradient(120deg,
+	background: linear-gradient(
+		120deg,
 		rgba(255, 255, 255, 0) 40%,
 		rgba(255, 255, 255, 0.8) 50%,
-      rgba(255, 255, 255, 0) 60%);
+		rgba(255, 255, 255, 0) 60%
+	);
 	background-size: 200% 100%;
 	-webkit-background-clip: text;
 	background-clip: text;

apps/web/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import "./global.css";
 import { RootProvider } from "fumadocs-ui/provider";
 import { Inter } from "next/font/google";
-import { Suspense, type ReactNode } from "react";
+import { type ReactNode, Suspense } from "react";
 import Navbar from "./(home)/_components/Navbar";
 
 const inter = Inter({
@@ -15,9 +15,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 				<RootProvider>
 					<Navbar />
 					<div className="relative z-10 bg-zinc-50 dark:bg-zinc-950 pt-20 transition-colors duration-300  overflow-hidden">
-            <Suspense fallback={<LoadingSpinner />}>
+						<Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
-              {children}
-            </Suspense>
 					</div>
 				</RootProvider>
 			</body>