feat: collection of the month placeholder

lang/en/pages.php

@@ -74,6 +74,9 @@
                 'LABEL_SALE' => 'Sale',
             ],
         ],
+        'collection_of_the_month' => [
+            'vote_for_next_months_winners' => 'Vote now for next months winners',
+        ],
         'articles' => [
             'no_articles' => 'No articles have been linked to this collection as of now.',
             'no_articles_with_filters' => 'We could not find any articles matching your search criteria, please try again!',

resources/css/_collection.css

@@ -5,3 +5,7 @@
 .dark .collection-banner {
     background-image: url("../images/collections/header-placeholder-dark.svg");
 }
+
+.shadow-collection-of-the-month {
+    box-shadow: 0px 15px 35px 0px rgba(33, 34, 37, 0.08);
+}

resources/js/Components/Collections/CollectionOfTheMonthWinners/CollectionOfTheMonthWinners.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Heading } from "@/Components/Heading";
+import { useDarkModeContext } from "@/Contexts/DarkModeContext";
+import { VoteNextMonthWinners, VoteNextMonthWinnersDark } from "@/images";
+
+export const CollectionOfTheMonthWinners = (): JSX.Element => {
+    const { t } = useTranslation();
+
+    const { isDark } = useDarkModeContext();
+
+    return (
+        <div className="dark:border-dark-700 flex w-full max-w-[419px] flex-col overflow-hidden rounded-xl border border-theme-secondary-300 bg-gradient-to-b from-theme-secondary-300 to-theme-primary-50 dark:border-theme-dark-700 dark:from-theme-dark-800 dark:to-theme-dark-700">
+            <div className="shadow-collection-of-the-month flex justify-center bg-white px-8 py-4 dark:bg-theme-dark-900">
+                <Heading
+                    level={3}
+                    className="text-center"
+                >
+                    {t("pages.collections.collection_of_the_month.vote_for_next_months_winners")}
+                </Heading>
+            </div>
+            <div className="flex flex-1 items-center justify-center ">
+                {isDark ? <VoteNextMonthWinnersDark /> : <VoteNextMonthWinners />}
+            </div>
+        </div>
+    );
+};

resources/js/Components/Collections/CollectionOfTheMonthWinners/index.tsx

@@ -0,0 +1 @@
+export * from "./CollectionOfTheMonthWinners";

resources/js/Pages/Collections/Index.tsx

@@ -7,6 +7,7 @@ import { FeaturedCollectionsCarousel } from "./Components/FeaturedCollections";
 import { PopularCollectionsFilterPopover } from "./Components/PopularCollectionsFilterPopover";
 import { type PopularCollectionsSortBy, PopularCollectionsSorting } from "./Components/PopularCollectionsSorting";
 import { ButtonLink } from "@/Components/Buttons/ButtonLink";
+import { CollectionOfTheMonthWinners } from "@/Components/Collections/CollectionOfTheMonthWinners";
 import { PopularCollectionsTable } from "@/Components/Collections/PopularCollectionsTable";
 import { Heading } from "@/Components/Heading";
 import { type PaginationData } from "@/Components/Pagination/Pagination.contracts";
@@ -124,6 +125,15 @@ const CollectionsIndex = ({
                         <ViewAllButton />
                     </div>
                 </div>
+
+                <div className="mt-9 flex space-x-4 ">
+                    {/* Height is hardcoded should depend on the incoming vote table */}
+                    <div className="h-[516px] flex-1">{/* Vote table */}</div>
+
+                    <div className="hidden xl:flex">
+                        <CollectionOfTheMonthWinners />
+                    </div>
+                </div>
             </div>
         </DefaultLayout>
     );

resources/js/images.ts

@@ -2,6 +2,8 @@ import { ReactComponent as AuthConnectWalletDark } from "@images/auth-connect-wa
 import { ReactComponent as AuthConnectWallet } from "@images/auth-connect-wallet.svg";
 import { ReactComponent as AuthInstallWalletDark } from "@images/auth-install-wallet-dark.svg";
 import { ReactComponent as AuthInstallWallet } from "@images/auth-install-wallet.svg";
+import { ReactComponent as VoteNextMonthWinnersDark } from "@images/collections/vote-next-month-winners-dark.svg";
+import { ReactComponent as VoteNextMonthWinners } from "@images/collections/vote-next-month-winners.svg";
 import { ReactComponent as DeleteModal } from "@images/delete-modal.svg";
 import { ReactComponent as Error401 } from "@images/errors/401.svg";
 import { ReactComponent as Error403 } from "@images/errors/403.svg";
@@ -54,4 +56,6 @@ export {
     RightMiddleGrid,
     SocialLeftGrid,
     SocialRightGrid,
+    VoteNextMonthWinners,
+    VoteNextMonthWinnersDark,
 };