add discord button

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 && (
-																<img
+															{option.icon !== "" && (
+																<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,
 		},