leadspace - cta buttons

next.config.js

@@ -1,11 +1,31 @@
 /** @type {import('next').NextConfig} */
+
+const path = require('path'); // eslint-disable-line @typescript-eslint/no-var-requires
+
 const nextConfig = {
-  output: 'export',
   reactStrictMode: true,
   compiler: {
     // Enables the styled-components SWC transform
     styledComponents: true,
   },
+  images: {
+    unoptimized: true,
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      // Exclude files in the public folder, as those are used directly as regular images
+      exclude: [path.join(__dirname, 'public')],
+      use: {
+        loader: '@svgr/webpack',
+        options: {
+          dimensions: false,
+        },
+      },
+    });
+
+    return config;
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -19,6 +19,7 @@
     "react-intersection-observer": "^9.8.1"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "20.11.26",
     "@types/react": "18.2.65",
     "@types/react-dom": "18.2.21",

src/components/Leadspace/Leadspace.module.scss

@@ -7,7 +7,7 @@
 
 .pane {
   background-color: $background-brand;
-  color: white;
+  color: $white-0;
 
   .content {
     position: relative;
@@ -29,12 +29,48 @@
     }
 
     .action {
-      margin-top: 32px;
+      color: $white-0;
+      font-size: 16px;
+      line-height: 24px;
       width: calc(50% + $grid-gutter / 2);
       min-width: 20rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      cursor: pointer;
+
+      .icon {
+        margin-right: 8px;
+        width: 20px;
+        height: 20px;
+      }
+
+      label {
+        cursor: pointer;
+        margin-right: .2rem;
+
+        & + svg {
+          transition: all 0.3s ease;
+          opacity: 0;
+        }
+      }
+
+      &:hover {
+        label + svg {
+          transform: translateX(1rem);
+          opacity: 1;
+        }
+      }
 
-      @include breakpoint(lg) {
-        margin-top: 48px;
+      &:not(:first-of-type) {
+        margin-top: 16px;
+      }
+
+      &:first-of-type {
+        margin-top: 32px;
+        @include breakpoint(lg) {
+          margin-top: 48px;
+        }
       }
     }
   }

src/components/Leadspace/Leadspace.tsx

@@ -1,15 +1,21 @@
 import { FC } from 'react';
-import { Button, Column, Grid } from '@carbon/react';
+import { Column, Grid, Link } from '@carbon/react';
 import { ArrowRight } from '@carbon/icons-react';
 import Cube from './graphics/Cube';
+import GitHub from './graphics/github.svg';
+import HuggingFace from './graphics/hf.svg';
 
 import styles from './Leadspace.module.scss';
 
 type LeadspaceProps = {
-  onCtaClicked: () => void;
+  onJoinCommunity: () => void;
+  onCheckLatestModel: () => void;
 };
 
-const Leadspace: FC<LeadspaceProps> = ({ onCtaClicked }) => (
+const Leadspace: FC<LeadspaceProps> = ({
+  onJoinCommunity,
+  onCheckLatestModel,
+}) => (
   <section className={styles.pane}>
     <Grid>
       <Column
@@ -24,9 +30,16 @@ const Leadspace: FC<LeadspaceProps> = ({ onCtaClicked }) => (
           InstructLab is an open source project designed to change how LLMs are
           developed
         </p>
-        <Button className={styles.action} onClick={onCtaClicked}>
-          <label>Join the community</label> <ArrowRight />
-        </Button>
+        <Link className={styles.action} onClick={onJoinCommunity}>
+          <GitHub className={styles.icon} />
+          <label>Join the community</label>
+          <ArrowRight />
+        </Link>
+        <Link className={styles.action} onClick={onCheckLatestModel}>
+          <HuggingFace className={styles.icon} />
+          <label>Check out the latest model</label>
+          <ArrowRight />
+        </Link>
       </Column>
       <Column
         className={styles.graphicsWrapper}

src/components/StartExperimenting/StartExperimenting.module.scss

@@ -61,7 +61,8 @@
 
       .action {
         margin-top: 32px;
-        min-width: calc(60% + $grid-gutter);
+        width: calc(60% + $grid-gutter);
+        max-width: 272px;
 
         @include breakpoint(lg) {
           margin-top: 48px;

src/pages/index.tsx

@@ -9,7 +9,11 @@ import StartExperimenting from '../components/StartExperimenting/StartExperiment
 import styles from '../styles/main.module.scss';
 
 export default function Home() {
-  const handleLeadspceCtaClick = useCallback(() => {
+  const handleJoinCommunity = useCallback(() => {
+    // TODO
+  }, []);
+
+  const handleCheckLatestModel = useCallback(() => {
     // TODO
   }, []);
 
@@ -30,7 +34,10 @@ export default function Home() {
       </Head>
       <main className={styles.main}>
         <PageShell>
-          <Leadspace onCtaClicked={handleLeadspceCtaClick} />
+          <Leadspace
+            onJoinCommunity={handleJoinCommunity}
+            onCheckLatestModel={handleCheckLatestModel}
+          />
           <ReleaseCycle />
           <HowItWorks />
           <StartExperimenting onCtaClicked={handleStartExperimentingCtaClick} />