feat: Add marketing bento on home and dashboard (#450)

Author: ivan-dalmet

next.config.mjs

@@ -11,6 +11,14 @@ const withPWA = withPWAInit({
 
 /** @type {import("next").NextConfig} */
 const config = withPWA({
+  images: {
+    remotePatterns: [
+      {
+        hostname: 'raw.githubusercontent.com',
+        pathname: '/BearStudio/**',
+      },
+    ],
+  },
   async redirects() {
     return [
       {

src/features/admin-dashboard/PageAdminDashboard.tsx

@@ -19,11 +19,12 @@ import {
   AdminLayoutPage,
   AdminLayoutPageContent,
 } from '@/features/admin/AdminLayoutPage';
+import { MarketingBento } from '@/features/demo-mode/MarketingBento';
 
 export default function PageAdminDashboard() {
   const { t } = useTranslation(['adminDashboard']);
   return (
-    <AdminLayoutPage>
+    <AdminLayoutPage containerMaxWidth="container.md">
       <AdminLayoutPageContent>
         <Heading size="md" mb="4">
           {t('adminDashboard:title')}
@@ -70,6 +71,7 @@ export default function PageAdminDashboard() {
               {t('adminDashboard:links.openIssue')}
             </Button>
           </Wrap>
+          <MarketingBento />
         </Stack>
       </AdminLayoutPageContent>
     </AdminLayoutPage>

src/features/app-home/PageHome.tsx

@@ -1,18 +1,40 @@
 import React from 'react';
 
-import { Button, Flex, Heading, Stack, Text, Wrap } from '@chakra-ui/react';
+import {
+  Alert,
+  AlertTitle,
+  Button,
+  Flex,
+  Heading,
+  Link,
+  LinkBox,
+  LinkOverlay,
+  Stack,
+  Text,
+  Wrap,
+} from '@chakra-ui/react';
 import { Trans, useTranslation } from 'react-i18next';
-import { LuAlertCircle, LuBookOpen, LuGithub } from 'react-icons/lu';
+import {
+  LuAlertCircle,
+  LuBookOpen,
+  LuExternalLink,
+  LuGithub,
+} from 'react-icons/lu';
 
+import { Icon } from '@/components/Icons';
 import { Logo } from '@/components/Logo';
+import { ADMIN_PATH } from '@/features/admin/constants';
 import { AppLayoutPage } from '@/features/app/AppLayoutPage';
+import { MarketingBento } from '@/features/demo-mode/MarketingBento';
+import { trpc } from '@/lib/trpc/client';
 
 export default function PageHome() {
-  const { t } = useTranslation(['appHome']);
+  const account = trpc.account.get.useQuery();
+  const { t } = useTranslation(['appHome', 'account']);
 
   return (
     <AppLayoutPage>
-      <Stack flex={1} spacing={4}>
+      <Stack flex={1} spacing={6}>
         <Flex
           display={{ base: 'flex', md: 'none' }}
           py={2}
@@ -32,6 +54,7 @@ export default function PageHome() {
             </Text>
           </Text>
         </Stack>
+
         <Wrap spacing="2">
           <Button
             size="sm"
@@ -58,6 +81,23 @@ export default function PageHome() {
             {t('appHome:links.openIssue')}
           </Button>
         </Wrap>
+        {account.isSuccess && account.data.authorizations.includes('ADMIN') && (
+          <Alert as={LinkBox} colorScheme="brand">
+            <AlertTitle flex="none">{t('account:admin.title')}</AlertTitle>
+            <Link
+              as={LinkOverlay}
+              ms="auto"
+              gap={2}
+              display="inline-flex"
+              href={ADMIN_PATH || '/'}
+              target="_blank"
+            >
+              {t('account:admin.button')}
+              <Icon icon={LuExternalLink} />
+            </Link>
+          </Alert>
+        )}
+        <MarketingBento />
       </Stack>
     </AppLayoutPage>
   );

src/features/demo-mode/MarketingBento.tsx

@@ -0,0 +1,103 @@
+import { Grid, GridItem, Text } from '@chakra-ui/react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export const MarketingBento = () => {
+  return (
+    <Grid
+      gap="2"
+      templateColumns={{ base: 'repeat(2, 1fr)', sm: 'repeat(3, 1fr)' }}
+    >
+      <GridItem
+        borderRadius="md"
+        bg="blackAlpha.200"
+        rowSpan={2}
+        aspectRatio={0.7}
+        overflow="hidden"
+      >
+        <Link
+          href="https://bear.studio/assets-start-ui-bento-01"
+          target="_blank"
+        >
+          <Image
+            src="https://raw.githubusercontent.com/BearStudio/assets/main/start-ui/marketing-bento-01.jpg"
+            alt="Marketing content. Follow link for more info"
+            width={420}
+            height={600}
+            sizes="420px"
+            style={{ objectFit: 'cover' }}
+          />
+        </Link>
+      </GridItem>
+      <GridItem
+        borderRadius="md"
+        bg="blackAlpha.200"
+        aspectRatio={1.45}
+        overflow="hidden"
+      >
+        <Link
+          href="https://bear.studio/assets-start-ui-bento-02"
+          target="_blank"
+        >
+          <Image
+            src="https://raw.githubusercontent.com/BearStudio/assets/main/start-ui/marketing-bento-02.jpg"
+            alt="Marketing content. Follow link for more info"
+            width={420}
+            height={290}
+            sizes="420px"
+            style={{ objectFit: 'cover' }}
+          />
+        </Link>
+      </GridItem>
+      <GridItem
+        borderRadius="md"
+        bg="blackAlpha.200"
+        rowSpan={2}
+        aspectRatio={0.7}
+        overflow="hidden"
+      >
+        <Link
+          href="https://bear.studio/assets-start-ui-bento-03"
+          target="_blank"
+        >
+          <Image
+            src="https://raw.githubusercontent.com/BearStudio/assets/main/start-ui/marketing-bento-03.jpg"
+            alt="Marketing content. Follow link for more info"
+            width={420}
+            height={600}
+            sizes="420px"
+            style={{ objectFit: 'cover' }}
+          />
+        </Link>
+      </GridItem>
+      <GridItem
+        borderRadius="md"
+        bg="blackAlpha.200"
+        aspectRatio={1.45}
+        overflow="hidden"
+      >
+        <Link
+          href="https://bear.studio/assets-start-ui-bento-04"
+          target="_blank"
+        >
+          <Image
+            src="https://raw.githubusercontent.com/BearStudio/assets/main/start-ui/marketing-bento-04.jpg"
+            alt="Marketing content. Follow link for more info"
+            width={420}
+            height={290}
+            sizes="420px"
+            style={{ objectFit: 'cover' }}
+          />
+        </Link>
+      </GridItem>
+      <Text
+        fontSize="xs"
+        gridColumn="1/-1"
+        textAlign="center"
+        style={{ textWrap: 'balance' }}
+      >
+        Shameless plug 😅 Remember that 🚀 Start UI is free and Open Source 😉
+      </Text>
+    </Grid>
+  );
+};