update website, add advert banner

Author: riccardoperra

apps/codeimage/index.html

@@ -43,12 +43,10 @@
     />
 
     <!-- Primary Meta Tags -->
-    <title>
-      CodeImage - A tool to manage and beautify your code screenshots
-    </title>
+    <title>CodeImage - Manage and beautify your code screenshots</title>
     <meta
       name="title"
-      content="CodeImage - A tool to manage and beautify your code screenshots"
+      content="CodeImage - Manage and beautify your code screenshots"
     />
     <meta
       name="description"
@@ -60,7 +58,7 @@
     <meta property="og:url" content="https://app.codeimage.dev/" />
     <meta
       property="og:title"
-      content="CodeImage - A tool to manage and beautify your code screenshots"
+      content="CodeImage - Manage and beautify your code screenshots"
     />
     <meta
       property="og:description"

apps/website/src/components/Main/MainPage.css.ts

@@ -251,3 +251,62 @@ export const ctaContainer = style(
     },
   }),
 );
+
+export const advertisingBanner = style([
+  responsiveStyle({
+    mobile: {
+      width: '100%',
+    },
+    tablet: {
+      maxWidth: '400px',
+    },
+    desktop: {
+      maxWidth: '460px',
+    },
+  }),
+  {
+    display: 'flex',
+    padding: themeVars.spacing['6'],
+    paddingBlock: themeVars.spacing['5'],
+    flexDirection: 'column',
+    gap: themeVars.spacing['4'],
+    borderRadius: themeVars.borderRadius.lg,
+    alignItems: 'flex-start',
+    background: 'hsla(204, 100%, 50%, .15)',
+  },
+]);
+
+export const advertisingDescription = style([
+  {
+    maxWidth: '860px',
+    textAlign: 'left',
+    fontSize: '44px',
+    lineHeight: '100%',
+    margin: 0,
+  },
+  responsiveStyle({
+    mobile: {
+      fontSize: '24px',
+    },
+    tablet: {
+      fontSize: '32px',
+      width: '100%',
+    },
+    desktop: {
+      fontSize: '1.35em',
+      maxWidth: '44rem',
+      fontWeight: 400,
+      lineHeight: '1.25',
+    },
+  }),
+]);
+
+export const advertisingBadge = style({
+  backgroundColor: themeVars.dynamicColors.button.primaryAlt.backgroundColor,
+  letterSpacing: '1px',
+  minWidth: 'auto',
+  paddingInline: themeVars.spacing['4'],
+  paddingBlock: themeVars.spacing['2'],
+  fontWeight: 500,
+  borderRadius: '9999px',
+});

apps/website/src/components/Main/MainPage.tsx

@@ -1,9 +1,13 @@
-import {Button} from '@codeimage/ui';
+import {Button, Badge} from '@codeimage/ui';
 import {useRouteData} from '@solidjs/router';
 import {createSignal} from 'solid-js';
+import {
+  advertisingBadge,
+  advertisingDescription,
+} from '~/components/Main/MainPage.css';
 import * as styles from '~/components/Main/MainPage.css';
 import {breakpoints} from '~/theme/breakpoints';
-import {mainWebsiteLink} from '~/core/constants';
+import {betterCommentsForGitHubLink, mainWebsiteLink} from '~/core/constants';
 import {routeData} from '~/routes';
 import {GitHubButton} from '../GitHubButton/GitHubButton';
 import {Header} from '../Header/Header';
@@ -23,8 +27,8 @@ export default function MainPage() {
           <div class={styles.textBox}>
             <div class={styles.heroContainer}>
               <h1 class={styles.heading}>
-                A tool to <br /> <span class={styles.screenshot}>beautify</span>{' '}
-                your <span class={styles.screenshot}>code</span> screenshots
+                <span class={styles.screenshot}>Beautify</span> your{' '}
+                <span class={styles.screenshot}>code</span> screenshots
               </h1>
 
               <p class={styles.mobileDescription}>
@@ -47,6 +51,29 @@ export default function MainPage() {
 
               <GitHubButton loading={loading()} stars={stars()} />
             </div>
+
+            <div class={styles.ctaContainer}>
+              <div class={styles.advertisingBanner}>
+                <span class={styles.advertisingBadge}>NEW!</span>
+
+                <div class={styles.advertisingDescription}>
+                  Improve now your <strong>GitHub comments experience</strong>!
+                  Try the new browser extension from <strong>CodeImage</strong>{' '}
+                  creator!
+                </div>
+
+                <Button
+                  as={'a'}
+                  rel={'canonical'}
+                  href={betterCommentsForGitHubLink}
+                  size={'md'}
+                  variant={'solid'}
+                  theme={'primaryAlt'}
+                >
+                  Try Better Comments For GitHub
+                </Button>
+              </div>
+            </div>
           </div>
           <div class={styles.imagePerspectiveBox} ref={imageBox}>
             <div class={styles.imageSection}>

apps/website/src/core/constants.ts

@@ -1,3 +1,5 @@
 export const mainWebsiteLink = 'https://app.codeimage.dev';
+export const betterCommentsForGitHubLink =
+  'https://better-comments-for-github.netlify.app';
 export const ogImageUrl =
   'https://github.com/riccardoperra/codeimage/blob/main/assets/codeimage_card.png?raw=true';

apps/website/src/root.tsx

@@ -147,9 +147,7 @@ export default function Root() {
   return (
     <Html lang="en" data-codeimage-theme="dark">
       <Head>
-        <Title>
-          CodeImage - A tool to manage and beautify your code screenshots
-        </Title>
+        <Title>CodeImage - Manage and beautify your code screenshots</Title>
         <Meta charset="utf-8" />
         <Meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta name="title" content="CodeImage" />