Merge pull request #359 from open-sauced/feat/pizza-cli-landing

feat: `/cli` landing page for `pizza-cli`

components/common/Button.tsx

@@ -11,6 +11,7 @@ interface ButtonProps {
   fullWidth?: boolean
   gitHub?: boolean
   children: React.ReactNode
+  className?: string
 }
 
 const Button: FC<ButtonProps> = ({
@@ -20,6 +21,7 @@ const Button: FC<ButtonProps> = ({
   backgroundVariant = 'dark',
   fullWidth,
   gitHub,
+  className
 }): ReactElement => {
   const commonStyle = `h-fit min-h-[38px] min-w-[180px] rounded-md p-[1px] cursor-pointer`
   const widthStyle = fullWidth ? `w-full largeTablet:w-fit` : `w-fit`
@@ -33,7 +35,7 @@ const Button: FC<ButtonProps> = ({
   return (
     <Link href={href} passHref>
       <div
-        className={`${commonStyle} ${widthStyle} ${borderVariantStyle} transition-all ease-in-out duration-400`}
+        className={`${className} ${commonStyle} ${widthStyle} ${borderVariantStyle} transition-all ease-in-out duration-400`}
       >
         <div
           className={`h-full w-full min-h-[38px] rounded-md flex justify-center items-center px-3 py-[6px] ${backgroundVariantStyle} transition-all ease-in-out duration-400`}

components/sections/navigation/Header.tsx

@@ -16,6 +16,7 @@ export const navigationLinks = [
   { url: '/about', label: 'About' },
   { url: '/blog', label: 'Blog' },
   { url: '/changelog', label: 'Changelog' },
+  { url: '/cli', label: 'CLI' }
 ] as SanityNavigation[]
 
 const Header: FC<HeaderProps> = ({ navigationItems }): ReactElement => {

lib/sanity.ts

@@ -26,7 +26,7 @@ export const client = sanityClient({
   ignoreBrowserTokenWarning: true,
 })
 
-type CommonData = () => Promise<{
+export type CommonData = () => Promise<{
   navigationLinks: SanityNavigation[]
   seoData: SanitySeo
   footer: SanityFooter[]

pages/cli/index.tsx

@@ -0,0 +1,67 @@
+import Background from '../../components/sections/about/Background'
+import Header from '../../components/sections/navigation/Header';
+import { Footer as SanityFooter, Navigation as SanityNavigation, Seo as SanitySeo } from '../../sanity.types'
+import { getCommonData } from '../../lib/sanity';
+import Footer from '../../components/sections/Footer';
+import { Heading, Typography } from '../../components/common/text';
+import { Button } from '../../components/common';
+import { TbArrowNarrowRight, TbCopy } from "react-icons/tb";
+import Image from 'next/image';
+
+export async function getStaticProps() {
+  const commonData = await getCommonData();
+
+  return { 
+    props: { commonData }
+  }
+}
+
+type CliPageProps = {
+  commonData: {
+    navigationLinks: SanityNavigation[]
+    seoData: SanitySeo
+    footer: SanityFooter[]
+  }
+}
+
+export default function CliPage({ commonData }: CliPageProps) {
+  const navigationURLs = commonData.navigationLinks;
+  return (
+    <Background>
+      <Header navigationItems={navigationURLs} />
+
+      <main className='flex flex-col gap-8 w-full h-full min-h-screen md:p-16 items-center'>
+        <header className='flex flex-col gap-8 p-8 max-w-4xl text-center mt-8 md:mt-16 items-center'>
+          <Heading>
+            Generate developer insights $yellow-to-orangefrom the command line
+          </Heading>
+
+          <Typography variant='subheading'>
+            Try the <code className='px-2'>pizza</code> CLI and access OpenSauced features right from your terminal. Autogenerate your CODEOWNERS and contributor insights in seconds.
+          </Typography>
+
+          <div className='flex gap-4 items-center'>
+            <code className='p-4 bg-neutral-800 rounded-xl'>
+              brew install open-sauced/tap/pizza 
+            </code>
+            <p>or</p>
+            <Button href='https://github.com/open-sauced/pizza-cli/releases'>Download for Mac</Button>
+          </div>
+
+          <a href="https://github.com/open-sauced/pizza-cli?tab=readme-ov-file#-install" className='hover:underline'>
+            <Typography variant='body3'>
+              <span className='flex gap-2 items-center'>
+                View installation instructions
+                <TbArrowNarrowRight />
+              </span>
+            </Typography>
+          </a>
+        </header>
+
+        <Image src="/cli-screenshot.png" alt="Pizza CLI help screenshot" width={1200} height={1200} />
+      </main>
+
+      <Footer pressPage={true} />
+    </Background>
+  );
+}