feat: homepage

web/src/components/class-card.tsx

@@ -1,22 +1,31 @@
 import { FC } from "react";
 import Image from "next/image";
+import Link from "next/link";
 
 export interface ClassCardProps {
   name: string;
   collection: string;
   image: string;
+  link: string;
 }
 
-export const ClassCard: FC<ClassCardProps> = ({ image }) => {
+export const ClassCard: FC<ClassCardProps> = ({ image, collection, name, link }) => {
   return (
+    <Link href={link}>
     <div className="w-44 h-64 relative overflow-hidden inline-block">
       <Image
-        priority
         src={image}
         className="object-center object-cover"
-        alt="Immagine di sfondo"
+        alt={`${name} ${collection}`}
+        quality={50}
+        loading="lazy"
         fill
       ></Image>
+       <div className="absolute flex flex-col justify-end items-start inset-0 bg-gradient-to-t from-[#000000] from-5% to-60% px-1 py-4 gap-y-1">
+        <h5 className="font-bold text-sm">{name}</h5>
+        <p className="text-xs">{collection}</p>
+       </div>
     </div>
+    </Link>
   );
 };

web/src/components/home-page-components/home-page-about.tsx

@@ -3,7 +3,6 @@ import { HomePageSection } from "./home-page-section";
 import {
   faDragon,
   faToolbox,
-  faShield,
   faComments,
   faRotate,
   faTrophy,
@@ -25,7 +24,7 @@ export const HomePageAboutItem: FC<HomePageAboutItemProps> = ({
 }) => {
   return (
     <div className="flex flex-col p-10 gap-y-6 items-center">
-      <FontAwesomeIcon icon={icon} className="w-16 h-16" />
+      <FontAwesomeIcon icon={icon} className="w-16 h-16" color="#73C482" />
       <h4 className="text-center text-2xl font-bold text-dw">{title}</h4>
       <p className="text-center">{description}</p>
     </div>

web/src/components/home-page-components/home-page-homebrew.tsx

@@ -0,0 +1,55 @@
+import { dungeonWorldData } from "@/data/dungeon-world";
+import { HomePageSection } from "./home-page-section";
+import { ClassCard } from "../class-card";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+
+export const HomePageHomebrew = () => {
+  const firstClasses = dungeonWorldData.homebrew.classes.slice(7, 16);
+
+  return (
+    <HomePageSection>
+      <h3 className="text-xl sm:2xl md:text-3xl font-bold text-dw uppercase">
+        Homebrew
+      </h3>
+      <p>
+        Dungeon World Italia è arricchita con materiale homebrew della
+        community. Accedi a traduzioni italiane di libretti famosi di Dungeon
+        World, espandendo le tue opzioni di gioco con nuove classi e abilità.
+        Visita le nostre sezioni dedicate per scoprire tutto il materiale
+        disponibile e inizia la tua avventura con Dungeon World!
+      </p>
+
+      <p className="font-bold">Ecco alcune delle classi che potrai trovare:</p>
+      <div className="flex overflow-x-scroll pt-2 hide-scroll-bar w-full">
+        <div className="flex flex-nowrap">
+          {firstClasses.map((clazz) => (
+            <div className="inline-block px-3">
+              <ClassCard
+                collection={clazz.collection}
+                image={clazz.showcase.imageUrl}
+                key={clazz.name + clazz.collection}
+                name={clazz.name}
+                link={`/homebrew/classi/${clazz.slug}`}
+              />
+            </div>
+          ))}
+          <div className="inline-block px-3">
+            <Link href="/homebrew/classi">
+              <div className="w-44 h-64 flex flex-col items-center justify-center gap-y-1">
+                <FontAwesomeIcon icon={faArrowRight} className="w-12 h-12" />
+                <p>Lista completa</p>
+              </div>
+            </Link>
+          </div>
+        </div>
+      </div>
+      <Link href={"/homebrew"}>
+        <button className="bg-dw drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)] hover:bg-dw-700 text-white font-bold py-2 px-4 mt-5 rounded-full text-sm uppercase">
+          Scopri la sezione homebrew
+        </button>
+      </Link>
+    </HomePageSection>
+  );
+};

web/src/components/home-page-components/home-page-section.tsx

@@ -7,7 +7,7 @@ export const HomePageSection: FC<
   return (
     <div
       className={clsx(
-        "flex flex-col gap-y-5 w-full mx-auto max-w-[90rem] items-start justify-start py-[1.5rem] pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] sm:pl-[max(env(safe-area-inset-left),5.5rem)] sm:pr-[max(env(safe-area-inset-right),5.5rem)]",
+        "flex flex-col gap-y-6 w-full mx-auto max-w-[90rem] items-start justify-start py-[1.5rem] pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] sm:pl-[max(env(safe-area-inset-left),5.5rem)] sm:pr-[max(env(safe-area-inset-right),5.5rem)]",
         [{ "bg-gray-100 dark:bg-neutral-900": alternative }]
       )}
     >

web/src/components/home-page-components/index.ts

@@ -1,4 +1,5 @@
 export * from './home-page-cover';
 export * from './home-page-section';
 export * from './home-page-about';
-export * from './home-page-traduction';
+export * from './home-page-traduction';
+export * from './home-page-homebrew';

web/src/components/home-page.tsx

@@ -1,12 +1,17 @@
 import { FC } from "react";
-import { Cover, HomePageTraduction } from "./home-page-components";
+import {
+  Cover,
+  HomePageHomebrew,
+  HomePageTraduction,
+} from "./home-page-components";
 import { HomePageAbout } from "./home-page-components/home-page-about";
 
 export const HomePage: FC = () => {
   return (
     <div className="flex flex-col gap-y-10 md:pt-10 pb-10">
       <Cover />
       <HomePageAbout />
+      <HomePageHomebrew />
       <HomePageTraduction />
     </div>
   );