Add background (it looks nice)

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

@@ -1,6 +1,6 @@
 import { IconDetails } from "@/components/icon-details"
 import { BASE_URL } from "@/constants"
-import { getAllIcons, getAuthorData, getTotalIcons } from "@/lib/api"
+import { getAllIcons, getAuthorData } from "@/lib/api"
 import type { Metadata, ResolvingMetadata } from "next"
 import { notFound } from "next/navigation"
 
@@ -42,7 +42,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 
 	return {
 		title: `${formattedIconName} Icon | Dashboard Icons`,
-		description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+		description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 		keywords: [
 			`${formattedIconName} icon`,
 			"dashboard icon",
@@ -64,7 +64,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 		],
 		openGraph: {
 			title: `${formattedIconName} Icon | Dashboard Icons`,
-			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 			type: "article",
 			url: pageUrl,
 			images: [
@@ -83,7 +83,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 		twitter: {
 			card: "summary_large_image",
 			title: `${formattedIconName} Icon | Dashboard Icons`,
-			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
+			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 			images: [iconImageUrl],
 			creator: "@homarr_app",
 		},
@@ -104,10 +104,5 @@ export default async function IconPage({ params }: { params: Promise<{ icon: str
 
 	const authorData = await getAuthorData(originalIconData.update.author.id)
 
-	return (
+	return <IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
-		<div className="relative isolate overflow-hidden pt-14">
-			{/* Existing Icon Details */}
-			<IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
-		</div>
-	)
 }

web/src/app/icons/layout.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils"
+import React from "react"
+
+interface BackgroundWrapperProps {
+	children: React.ReactNode
+}
+
+export default function BackgroundWrapper({ children }: BackgroundWrapperProps) {
+	return (
+		<div className="relative flex w-full items-center justify-center bg-white dark:bg-black">
+			<div
+				className={cn(
+					"absolute inset-0",
+					"[background-size:40px_40px]",
+					"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
+					"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
+				)}
+			/>
+			<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-background" />
+			<div className="relative z-20">{children}</div>
+		</div>
+	)
+}

web/src/app/layout.tsx

@@ -2,11 +2,11 @@ import { PostHogProvider } from "@/components/PostHogProvider"
 import { Footer } from "@/components/footer"
 import { HeaderWrapper } from "@/components/header-wrapper"
 import { LicenseNotice } from "@/components/license-notice"
+import { getTotalIcons } from "@/lib/api"
 import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
 import { Toaster } from "sonner"
 import "./globals.css"
-import { getTotalIcons } from "@/lib/api"
 import { ThemeProvider } from "./theme-provider"
 
 const inter = Inter({

web/src/app/page.tsx

@@ -1,6 +1,6 @@
 import { HeroSection } from "@/components/hero"
 import { RecentlyAddedIcons } from "@/components/recently-added-icons"
-import { BASE_URL, REPO_NAME, REPO_PATH } from "@/constants"
+import { BASE_URL, REPO_NAME } from "@/constants"
 import { getRecentlyAddedIcons, getTotalIcons } from "@/lib/api"
 import type { Metadata } from "next"
 

web/src/components/icon-details.tsx

@@ -251,11 +251,11 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 	}
 
 	return (
-		<div className="container mx-auto px-4 py-8">
+		<div className="container mx-auto pt-12 pb-14">
 			<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
 				{/* Left Column: Icon Info and Author */}
 				<div className="lg:col-span-1">
-					<Card className="h-full backdrop-blur-sm bg-card/50 border shadow-lg">
+					<Card className="h-full bg-background/80 border shadow-lg">
 						<CardHeader className="pb-4">
 							<div className="flex flex-col items-center">
 								<div className="relative w-32 h-32  rounded-xl overflow-hidden border flex items-center justify-center p-3 ">
@@ -364,7 +364,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 
 				{/* Middle Column: Icon variants */}
 				<div className="lg:col-span-2">
-					<Card className="h-full backdrop-blur-sm bg-card/50 shadow-lg">
+					<Card className="h-full bg-background/80 shadow-lg">
 						<CardHeader>
 							<CardTitle>Icon variants</CardTitle>
 							<CardDescription>Click on any icon to copy its URL to your clipboard</CardDescription>
@@ -402,7 +402,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 
 				{/* Right Column: Technical details */}
 				<div className="lg:col-span-1">
-					<Card className="h-full backdrop-blur-sm bg-card/50 border shadow-lg">
+					<Card className="h-full bg-background/80 border shadow-lg">
 						<CardHeader>
 							<CardTitle>Technical details</CardTitle>
 						</CardHeader>