add discord button

apps/web/public/icon/discord.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 199" width="256" height="199" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z" fill="#5865F2"/></svg>

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

@@ -17,6 +17,7 @@ import {
 } from "@/lib/constant";
 import { stackParsers, stackQueryStatesOptions } from "@/lib/stack-url-state";
 import { cn } from "@/lib/utils";
+import discordLogo from "@/public/icon/discord.svg";
 import {
 	Check,
 	ClipboardCopy,
@@ -1597,6 +1598,17 @@ const StackBuilder = () => {
 						>
 							<Github className="h-4 w-4" />
 						</Link>
+						<Link
+							href={"https://discord.com/invite/tMunxM5R"}
+							target="_blank"
+							rel="noopener noreferrer"
+							className={cn(
+								"text-muted-foreground transition-colors hover:text-foreground",
+							)}
+							title="Join Discord"
+						>
+							<Image src={discordLogo} alt="discord" className="size-4" />{" "}
+						</Link>
 						<ThemeToggle />
 					</div>
 				</div>

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

@@ -1,7 +1,9 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { TECH_OPTIONS } from "@/lib/constant";
+import discordLogo from "@/public/icon/discord.svg";
 import { Github, Star, Terminal } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import CodeContainer from "./_components/code-container";
@@ -165,6 +167,24 @@ export default function HomePage() {
 											)}
 										</Button>
 									</Link>
+									<Link
+										href="https://discord.com/invite/tMunxM5R"
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<Button
+											size="lg"
+											variant="outline"
+											className="w-full hover:text-primary sm:w-auto"
+										>
+											<Image
+												src={discordLogo}
+												alt="discord"
+												className="size-4"
+											/>
+											Join Discord
+										</Button>
+									</Link>
 								</div>
 								<CodeContainer />
 							</div>
@@ -208,10 +228,13 @@ export default function HomePage() {
 															key={option.id}
 															className="flex items-center gap-2 rounded border bg-background px-2 py-1"
 														>
-															{option.icon && (
+															{option.icon !== "" && (
-																<img
+																<Image
 																	src={option.icon}
 																	alt={option.name}
+																	height={50}
+																	width={50}
+																	unoptimized
 																	className="h-4 w-4"
 																/>
 															)}

apps/web/src/lib/constant.ts

@@ -345,7 +345,7 @@ export const TECH_OPTIONS = {
 			id: "pwa",
 			name: "PWA",
 			description: "Progressive Web App",
-			icon: "📱",
+			icon: "",
 			color: "from-blue-500 to-blue-700",
 			default: false,
 		},
@@ -377,7 +377,7 @@ export const TECH_OPTIONS = {
 			id: "husky",
 			name: "Husky",
 			description: "Git hooks & lint-staged",
-			icon: "🐶",
+			icon: "",
 			color: "from-purple-500 to-purple-700",
 			default: false,
 		},
@@ -395,7 +395,7 @@ export const TECH_OPTIONS = {
 			id: "todo",
 			name: "Todo Example",
 			description: "Simple todo application",
-			icon: "✅",
+			icon: "",
 			color: "from-indigo-500 to-indigo-700",
 			default: false,
 		},
@@ -403,7 +403,7 @@ export const TECH_OPTIONS = {
 			id: "ai",
 			name: "AI Example",
 			description: "AI integration example using AI SDK",
-			icon: "🤖",
+			icon: "",
 			color: "from-purple-500 to-purple-700",
 			default: false,
 		},

bun.lock

@@ -14,7 +14,7 @@
     },
     "apps/cli": {
       "name": "create-better-t-stack",
-      "version": "2.12.0",
+      "version": "2.13.0",
       "bin": {
         "create-better-t-stack": "dist/index.js",
       },