refactor(pages): update page components and metadata

- Update home page, submit page, and icon detail pages
- Improve opengraph image generation for icons
- Enhance page metadata and SEO

web/src/app/icons/[icon]/opengraph-image.tsx

@@ -24,8 +24,31 @@ export const size = {
 	width: 1200,
 	height: 630,
 }
-export default async function Image({ params }: { params: { icon: string } }) {
+export default async function Image({ params }: { params: Promise<{ icon: string }> }) {
-	const { icon } = params
+	const { icon } = await params
+	
+	if (!icon) {
+		console.error(`[Opengraph Image] Icon not found for ${icon}`)
+		return new ImageResponse(
+			<div
+				style={{
+					display: "flex",
+					width: "100%",
+					height: "100%",
+					alignItems: "center",
+					justifyContent: "center",
+					backgroundColor: "white",
+					fontSize: 48,
+					fontWeight: 600,
+					color: "#64748b",
+				}}
+			>
+				Icon not found
+			</div>,
+			{ ...size },
+		)
+	}
+	
 	const iconsData = await getAllIcons()
 	const totalIcons = Object.keys(iconsData).length
 	const index = Object.keys(iconsData).indexOf(icon)

web/src/app/icons/[icon]/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { IconDetails } from "@/components/icon-details"
 import { BASE_URL, WEB_URL } from "@/constants"
 import { getAllIcons, getAuthorData } from "@/lib/api"
+import { AuthorData } from "@/types"
 export const dynamicParams = false
 
 export async function generateStaticParams() {

web/src/app/page.tsx

@@ -4,7 +4,9 @@ import { REPO_NAME } from "@/constants"
 import { getRecentlyAddedIcons, getTotalIcons } from "@/lib/api"
 
 async function getGitHubStars() {
-	const response = await fetch(`https://api.github.com/repos/${REPO_NAME}`)
+	const response = await fetch(`https://api.github.com/repos/${REPO_NAME}`, {
+		next: { revalidate: 3600 },
+	})
 	const data = await response.json()
 	console.log(`GitHub stars: ${data.stargazers_count}`)
 	return data.stargazers_count

web/src/app/submit/page.tsx

@@ -44,9 +44,7 @@ export default function SubmitPage() {
 						<Card>
 							<CardHeader className="text-center space-y-4">
 								<CardTitle className="text-3xl">Submit an Icon</CardTitle>
-								<CardDescription className="text-base">
+								<CardDescription className="text-base">Share your icons with the community and help expand our collection</CardDescription>
-									Share your icons with the community and help expand our collection
-								</CardDescription>
 							</CardHeader>
 							<CardContent className="space-y-6">
 								<div className="bg-muted/50 p-6 rounded-lg space-y-4">
@@ -87,4 +85,3 @@ export default function SubmitPage() {
 		</div>
 	)
 }
-