refractor web components to kebab case

apps/web/src/app/(home)/_components/code-container.tsx

@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils";
 import { Check, ClipboardCopy } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
-import PackageIcon from "./Icons";
+import PackageIcon from "./icons";
 
 const CodeContainer = () => {
 	const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("bun");

apps/web/src/app/(home)/_components/customizable-section.tsx

@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import StackArchitect from "./StackArchitech";
+import StackBuilder from "./stack-builder";
 
 export default function CustomizableSection() {
 	return (
@@ -39,7 +39,7 @@ export default function CustomizableSection() {
 				transition={{ duration: 0.6, delay: 0.2 }}
 				className="relative border"
 			>
-				<StackArchitect />
+				<StackBuilder />
 			</motion.div>
 		</section>
 	);

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

@@ -5,7 +5,7 @@ import { Github, Maximize2, Menu, X } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import PackageIcon from "./Icons";
+import PackageIcon from "./icons";
 
 export default function Navbar() {
 	const [scrolled, setScrolled] = useState(false);

apps/web/src/app/(home)/_components/stack-builder.tsx

@@ -844,7 +844,7 @@ const generateCommand = (stackState: StackState): string => {
 	}`;
 };
 
-const StackArchitect = () => {
+const StackBuilder = () => {
 	const [stack, setStack] = useQueryStates(
 		stackParsers,
 		stackQueryStatesOptions,
@@ -1937,4 +1937,4 @@ const StackArchitect = () => {
 	);
 };
 
-export default StackArchitect;
+export default StackBuilder;

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

@@ -1,9 +1,9 @@
 "use client";
 
 import { motion } from "motion/react";
-import StackArchitect from "../_components/StackArchitech";
+import StackBuilder from "../_components/stack-builder";
 
-export default function FullScreenStackArchitect() {
+export default function FullScreenStackBuilder() {
 	return (
 		<div className="flex h-svh flex-col bg-background">
 			<motion.div
@@ -12,7 +12,7 @@ export default function FullScreenStackArchitect() {
 				transition={{ duration: 0.3 }}
 				className="w-full flex-1"
 			>
-				<StackArchitect />
+				<StackBuilder />
 			</motion.div>
 		</div>
 	);

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

@@ -1,15 +1,15 @@
 "use client";
-import ShinyText from "@/app/(home)/_components/ShinyText";
+import ShinyText from "@/app/(home)/_components/shiny-text";
 import { cn } from "@/lib/utils";
 import { motion } from "motion/react";
 import React from "react";
-import CodeContainer from "./_components/CodeContainer";
+import CodeContainer from "./_components/code-container";
-import CustomizableSection from "./_components/CustomizableSection";
+import CustomizableSection from "./_components/customizable-section";
-import Footer from "./_components/Footer";
+import Footer from "./_components/footer";
-import Navbar from "./_components/Navbar";
+import Navbar from "./_components/navbar";
-import NpmPackage from "./_components/NpmPackage";
+import NpmPackage from "./_components/npm-package";
 // import SponsorsSection from "./_components/SponsorsSection";
-import Testimonials from "./_components/Testimonials";
+import Testimonials from "./_components/testimonials";
 
 export default function HomePage() {
 	const containerVariants = {