- Add Splash art

- Add Font
- Modify arrangement
- Formatting

app/page.tsx

@@ -1,100 +1,100 @@
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
+import {Card, CardHeader, CardTitle, CardContent} from "@/components/ui/card";
 import imagesetConfig from "@/imageset.config.json";
 import ImageSetConfig from "@/models/ImageSet";
-import { PlusCircledIcon } from "@radix-ui/react-icons";
+import {PlusCircledIcon} from "@radix-ui/react-icons";
 import PackageCard from "@/components/PackageCard";
-import { Separator } from "@/components/ui/separator";
+import {Separator} from "@/components/ui/separator";
 
 const typedImageSetConfig = imagesetConfig as ImageSetConfig;
 
 const FEATURED_SETS = {
-    "image-reachthefinals": ["all", "light", "medium", "heavy"],
-    "image-supervive": [
-        "hunter",
-        "power",
-        "fighter",
-        "initiator",
-        "frontliner",
-        "protector",
-        "controller"
-    ],
-    "image-wutheringwaves": ["c_all", "c_rarity_5", "c_rarity_4"],
-    "image-overwatch": ["h_all", "tank", "dps", "sup"],
-    "image-webdev": ["all", "fe", "be", "fs"],
-    "image-helldivers2": [
-        "Stratagems",
-        "Primaries",
-        "Secondaries",
-        "Grenades",
-        "Boosters"
-    ]
-    // Add more packages and their featured sets here
+  "image-reachthefinals": ["all", "light", "medium", "heavy"],
+  "image-supervive": [
+    "hunter",
+    "power",
+    "fighter",
+    "initiator",
+    "frontliner",
+    "protector",
+    "controller"
+  ],
+  "image-wutheringwaves": ["c_all", "c_rarity_5", "c_rarity_4"],
+  "image-overwatch": ["h_all", "tank", "dps", "sup"],
+  "image-helldivers2": [
+    "Stratagems",
+    "Primaries",
+    "Secondaries",
+    "Grenades",
+    "Boosters"
+  ],
+  "image-webdev": ["all", "fe", "be", "fs"],
+  // Add more packages and their featured sets here
 };
 
 const Home = () => {
-    return (
-        <div className="container mx-auto px-8 py-4">
-            <div className="text-center mb-8 md:my-8">
-                <div className="text-center">
-                    <h1 className="relative inline-block mb-4">
+  return (
+    <div className="container mx-auto px-8 py-4">
+      <div className="text-center mb-8 md:my-8">
+        <div className="text-center">
+          <h1 className="relative inline-block mb-4">
                         <span className="text-4xl font-extrabold tracking-tight lg:text-5xl">
                             Free and Open-Source Tier Lists
                         </span>
-                        <span className="block text-xl text-muted-foreground mt-4 font-normal tracking-wide">
+            <span className="block text-xl text-muted-foreground mt-4 font-normal tracking-wide">
                             Craft, rank and share your passion with OpenTierBoy.
                         </span>
-                    </h1>
-                </div>
-                <Button asChild variant="outline" size="sm">
-                    <Link href={"/about"}>Learn More</Link>
-                </Button>
-            </div>
-            <div className="flex justify-center items-center w-full my-10">
-                <Separator className="w-1/4" />
-            </div>
-            <h2 className="scroll-m-20 pb-4 text-3xl font-semibold tracking-tight first:mt-0">
-                Create a New Tier List
-            </h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {/* Featured sets */}
-                {Object.entries(FEATURED_SETS).map(([packageName, tags]) => {
-                    const packageData =
-                        typedImageSetConfig.packages[packageName];
-                    if (!packageData) return null;
+          </h1>
+        </div>
+        <Button asChild variant="outline" size="sm">
+          <Link href={"/about"}>Learn More</Link>
+        </Button>
+      </div>
+      <div className="flex justify-center items-center w-full my-10">
+        <Separator className="w-1/4"/>
+      </div>
+      <h2 className="scroll-m-20 pb-4 text-3xl font-semibold tracking-tight first:mt-0">
+        Create a New Tier List
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {/* Featured sets */}
+        {Object.entries(FEATURED_SETS).map(([packageName, tags]) => {
+          const packageData =
+            typedImageSetConfig.packages[packageName];
+          if (!packageData) return null;
 
-                    return (
-                        <PackageCard
-                            key={packageName}
-                            packageData={packageData}
-                            tags={tags}
-                        />
-                    );
-                })}
+          return (
+            <PackageCard
+              key={packageName}
+              packageData={packageData}
+              tags={tags}
+            />
+          );
+        })}
 
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Others</CardTitle>
-                        <Separator />
-                    </CardHeader>
-                    <CardContent className="space-y-2">
-                        <Button asChild className="w-full" variant="outline">
-                            <Link href="/rank/">
-                                <PlusCircledIcon className="mr-2 h-4 w-4" />
-                                Create Blank List
-                            </Link>
-                        </Button>
-                        <Button asChild className="w-full" variant="outline">
-                            <Link href={"/rank/image-set/all"}>
-                                Example template
-                            </Link>
-                        </Button>
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    );
+        <Card>
+          <CardHeader>
+            <CardTitle>Others</CardTitle>
+            <Separator/>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <Button asChild className="w-full" variant="outline">
+              <Link href="/rank/">
+                <PlusCircledIcon className="mr-2 h-4 w-4"/>
+                Create Blank List
+              </Link>
+            </Button>
+            <Button asChild className="w-full" variant="outline">
+              <Link href={"/rank/image-set/all"}>
+                Example template
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
 };
 
 export default Home;

imageset.config.json

@@ -2912,7 +2912,7 @@
       "backgroundImage": "/splash/supervive-keyart.webp"
     },
     "image-helldivers2": {
-      "displayName": "Helldivers 2",
+      "displayName": "HELLDIVERS 2",
       "images": [
         {
           "filename": "ac8autocannon.webp",
@@ -3781,7 +3781,9 @@
           "description": "Images of Helldivers 2 secondary weapons",
           "category": "general"
         }
-      }
+      },
+      "googleFont": "Chakra Petch",
+      "backgroundImage": "/splash/hd2-splash.webp"
     }
   }
 }

imageset.custom.json

@@ -27,8 +27,9 @@
       "backgroundImage": "/splash/supervive-keyart.webp"
     },
     "image-helldivers2": {
-      "displayName": "Helldivers 2",
-      "backgroundImage": ""
+      "displayName": "HELLDIVERS 2",
+      "googleFont": "Chakra Petch",
+      "backgroundImage": "/splash/hd2-splash.webp"
     }
   }
-}
+}

lib/fonts.ts

@@ -1,13 +1,15 @@
-import {Saira, Cinzel, Russo_One} from 'next/font/google';
+import {Saira, Cinzel, Russo_One, Chakra_Petch} from 'next/font/google';
 
 const sairaFont = Saira({subsets: ['latin'], display: 'swap'});
 const cinzelFont = Cinzel({subsets: ['latin'], display: 'swap'});
 const russoOne = Russo_One({subsets: ['latin'], display: 'swap', weight: ['400']});
+const chakraPetch = Chakra_Petch({subsets: ['latin'], display: 'swap', weight: ['700']})
 
 const fontDefinitions = {
   'Saira': sairaFont,
   'Cinzel': cinzelFont,
   'Russo One': russoOne,
+  'Chakra Petch': chakraPetch,
 };
 
 export type FontName = keyof typeof fontDefinitions;