feat: add install figma as cta (#64)

Author: tomasfrancisco

apps/engine/src/components/hero/hero.tsx

@@ -1,9 +1,15 @@
-import { FigmaLogo, GithubLogo, Icons, Text } from '@ds-project/components';
-import { Button } from '../button';
+import {
+  Button,
+  FigmaLogo,
+  GithubLogo,
+  Icons,
+  Text,
+} from '@ds-project/components';
 import Image from 'next/image';
 import { Pill } from '../pill';
 import Link from 'next/link';
 import frameImage from './frame-image.png';
+import { config } from '@/config';
 
 const compatibleWith = [
   {
@@ -29,7 +35,7 @@ export function Hero() {
               leading="snug"
               className="text-zinc-950"
             >
-              <h1>The DevOps Platform for Design Systems</h1>
+              <h1>Your Design System Engine</h1>
             </Text>
             <Text
               size="base"
@@ -38,23 +44,20 @@ export function Hero() {
               className="text-zinc-500"
             >
               <p>
-                Release and manage Design Systems at scale without overwhelming
-                your engineers and designers.
+                Focus more on your Design System decisions and less on the tools
+                and integrations
               </p>
             </Text>
           </div>
           <div className="flex gap-2">
-            <Button mode="dark" asChild>
-              <Link href="/app">
-                Sign Up <Icons.ArrowRightIcon className="ml-2" />
+            <Button asChild>
+              <Link href={config.figmaWidgetUrl}>
+                <Icons.FigmaLogoIcon className="mr-2" /> Install Figma Widget
               </Link>
             </Button>
-            <Button asChild>
-              <Link
-                href="https://github.com/Design-System-Project/platform"
-                target="_blank"
-              >
-                <Icons.GitHubLogoIcon className="mr-2" /> Explore
+            <Button asChild variant="link">
+              <Link href="/auth/sign-in" target="_blank">
+                Sign Up
               </Link>
             </Button>
           </div>

apps/engine/src/components/home-navigation/home-navigation.tsx

@@ -2,6 +2,7 @@ import { Button } from '@ds-project/components';
 import Image from 'next/image';
 import Link from 'next/link';
 import logoSvg from './assets/ds-logo.svg';
+import { config } from '@/config';
 
 const navigationItems = [
   {
@@ -12,15 +13,16 @@ const navigationItems = [
     label: 'Community',
     href: '#community',
   },
+  {
+    label: 'Sign Up',
+    href: '/auth/sign-up',
+  },
 ];
 export function HomeNavigation() {
   return (
     <nav className="bg-white border border-gray-300 rounded-xl flex p-2 shadow m-3 justify-between max-w-screen-sm gap-4">
       <Button variant="ghost">
-        <Image
-          src={logoSvg}
-          alt="Design System Project Logo - Redirects to Homepage"
-        />
+        <Image src={logoSvg} alt="DS Pro Logo - Redirects to Homepage" />
       </Button>
       <ul className="flex">
         {navigationItems.map((item) => (
@@ -31,8 +33,9 @@ export function HomeNavigation() {
           </li>
         ))}
       </ul>
+
       <Button asChild>
-        <Link href="/auth/sign-in">Sign Up</Link>
+        <Link href={config.figmaWidgetUrl}>Install</Link>
       </Button>
     </nav>
   );

apps/engine/src/lib/metadata.ts

@@ -11,7 +11,8 @@ export function getMetadata({ title: _title }: GetMetadataArgs = {}): Metadata {
   return {
     title,
     description,
-    keywords: 'design system, devops, engine, design, system, design tokens',
+    keywords:
+      'design system, devops, engine, design, system, design tokens, figma, figma widget',
     openGraph: {
       siteName: 'DS Pro',
       title,