Feat/templates

components/elements/CopyButton.tsx

@@ -6,21 +6,23 @@ import { useCopyToClipboard } from 'react-use'
 interface CopyButtonProps {
 	code: string
 	className?: string
+	width?: number
+	height?: number
 }
 
-const CopyButton: FC<CopyButtonProps> = ({ code, className }) => {
+const CopyButton: FC<CopyButtonProps> = ({ code, className, width = 32, height = 32 }) => {
 	const [_, copyToClipboard] = useCopyToClipboard()
 	return (
 		<button
 			className={clsx(
-				'rounded-xl border border-[#191919] border-transparent p-2 px-3 py-2 text-sm font-medium leading-4 shadow-sm transition hover:border-[#484848] dark:text-head dark:text-white dark:hover:bg-[#343434]',
+				'rounded-xl border border-[#191919] border-transparent px-3 py-2 text-sm font-medium leading-4 shadow-sm transition hover:border-[#484848] dark:text-head dark:text-white dark:hover:bg-[#343434]',
 				className
 			)}
 			onClick={() => {
 				copyToClipboard(code)
 			}}
 		>
-			<Copy width={32} height={32} />
+			<Copy width={width} height={height} />
 		</button>
 	)
 }

components/elements/Markdown.tsx

@@ -0,0 +1,39 @@
+import ReactMarkdown from 'react-markdown'
+import remarkGfm4 from 'remark-gfm-4'
+
+export function Markdown({ body }: { body: string }) {
+	return (
+		<ReactMarkdown
+			remarkPlugins={[remarkGfm4]}
+			components={{
+				h1: ({ children }) => <h1 className='mb-3 text-2xl text-head lg:text-3xl'>{children}</h1>,
+				h2: ({ children }) => <h2 className='mb-2 text-xl text-head lg:text-2xl'>{children}</h2>,
+				p: ({ children }) => <p className='mb-8 text-sm text-body lg:text-lg'>{children}</p>,
+				li: ({ children }) => <li className='mb-1 ml-4 text-sm text-body lg:text-lg'>{children}</li>,
+				code: ({ children }) => (
+					<code className='text-code mx-[.15em] mb-1 text-sm  text-head '>{children}</code>
+				),
+				pre: ({ children }) => (
+					<pre
+						style={{
+							scrollbarColor: 'black transparent',
+							scrollbarWidth: 'thin',
+						}}
+						className='mb-8 overflow-x-scroll rounded-xl bg-[#121212] p-4 text-head'
+					>
+						{children}
+					</pre>
+				),
+				ul: ({ children }) => <ul className='mb-8 list-disc'>{children}</ul>,
+				ol: ({ children }) => <ul className='mb-8 list-decimal'>{children}</ul>,
+				a: ({ children, href, target }) => (
+					<a {...{ href, target }} className='text-link underline' target='_blank'>
+						{children}
+					</a>
+				),
+			}}
+		>
+			{body}
+		</ReactMarkdown>
+	)
+}

components/sections/Navigation/index.tsx

@@ -4,7 +4,7 @@ import { GithubLogo, Hamburger, Logo } from 'components/svgs'
 import { trackEvent } from 'lib/posthog'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
-import { useLayoutEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { DISCORD_URL } from '../../../lib/constants'
 
 const ThemeSwitcher = dynamic(() => import('./ThemeSwitcher'), { ssr: false })
@@ -34,7 +34,7 @@ const LinkItem = ({
 const Navigation = () => {
 	const [open, setOpen] = useState(false)
 
-	useLayoutEffect(() => {
+	useEffect(() => {
 		function updateMenu() {
 			const isMobileAndOpen = window.innerWidth < 1280 && open
 			const isDesktopAndClosed = window.innerWidth >= 1280 && !open
@@ -72,6 +72,11 @@ const Navigation = () => {
 							event: 'homepage_mainnav_blog',
 							text: 'Blog',
 						},
+						{
+							href: '/templates',
+							event: 'homepage_mainnav_templates',
+							text: 'Templates',
+						},
 						{
 							href: '/pricing',
 							event: 'homepage_mainnav_pricing',

components/sections/ReleaseCard.tsx

@@ -1,10 +1,10 @@
-import ReactMarkdown from 'react-markdown'
 import { useState } from 'react'
 import AnimateHeight from 'react-animate-height'
-import remarkGfm4 from 'remark-gfm-4'
+
 import PlusIcon from 'components/svgs/PlusIcon'
 import MinusIcon from 'components/svgs/MinusIcon'
 import { Release } from 'pages/releases'
+import { Markdown } from 'components/elements/Markdown'
 
 export default function ReleaseCard({ release }: { release: Release }) {
 	const [height, setHeight] = useState<'auto' | number>('auto')
@@ -34,31 +34,7 @@ export default function ReleaseCard({ release }: { release: Release }) {
 					{height === SrhunkHeight ? <PlusIcon /> : <MinusIcon />}
 				</div>
 
-				<ReactMarkdown
-					remarkPlugins={[remarkGfm4]}
-					components={{
-						h1: ({ children }) => <h1 className='mb-3 text-sm text-body'>{children}</h1>,
-						h2: ({ children }) => <h2 className='mb-2 text-xl text-head'>{children}</h2>,
-						p: ({ children }) => <p className='mb-8 text-sm text-body'>{children}</p>,
-						li: ({ children }) => (
-							<li className='mb-1 ml-4 list-disc text-sm text-body'>{children}</li>
-						),
-						code: ({ children }) => (
-							<code className='text-code mx-[.15em] mb-1 text-sm text-head'>{children}</code>
-						),
-						pre: ({ children }) => (
-							<pre className='mb-8 rounded-xl bg-[#121212] p-4 text-head'>{children}</pre>
-						),
-						ul: ({ children }) => <ul className='mb-8'>{children}</ul>,
-						a: ({ children, href, target }) => (
-							<a {...{ href, target }} className='text-link underline' target='_blank'>
-								{children}
-							</a>
-						),
-					}}
-				>
-					{release.body}
-				</ReactMarkdown>
+				<Markdown body={release.body} />
 			</div>
 		</AnimateHeight>
 	)

components/sections/ShuttleAI/StepsMobile.tsx

@@ -93,9 +93,9 @@ export default function StepsMobile() {
 					y2='587.221'
 					gradientUnits='userSpaceOnUse'
 				>
-					<stop stop-color='#FC540C' />
-					<stop offset='0.355703' stop-color='#FFD76F' stop-opacity='0.72' />
-					<stop offset='0.859375' stop-color='#38D4E9' />
+					<stop stopColor='#FC540C' />
+					<stop offset='0.355703' stopColor='#FFD76F' stopOpacity='0.72' />
+					<stop offset='0.859375' stopColor='#38D4E9' />
 				</linearGradient>
 				<linearGradient
 					id='paint1_linear_2170_40933'
@@ -105,9 +105,9 @@ export default function StepsMobile() {
 					y2='186.375'
 					gradientUnits='userSpaceOnUse'
 				>
-					<stop stop-color='#FC540C' />
-					<stop offset='0.0117617' stop-color='#FFD76F' stop-opacity='0.72' />
-					<stop offset='0.532208' stop-color='#38D4E9' />
+					<stop stopColor='#FC540C' />
+					<stop offset='0.0117617' stopColor='#FFD76F' stopOpacity='0.72' />
+					<stop offset='0.532208' stopColor='#38D4E9' />
 				</linearGradient>
 				<linearGradient
 					id='paint2_linear_2170_40933'
@@ -117,9 +117,9 @@ export default function StepsMobile() {
 					y2='349.383'
 					gradientUnits='userSpaceOnUse'
 				>
-					<stop offset='0.246534' stop-color='#FC540C' />
-					<stop offset='0.619356' stop-color='#FFD76F' stop-opacity='0.72' />
-					<stop offset='0.859375' stop-color='#38D4E9' />
+					<stop offset='0.246534' stopColor='#FC540C' />
+					<stop offset='0.619356' stopColor='#FFD76F' stopOpacity='0.72' />
+					<stop offset='0.859375' stopColor='#38D4E9' />
 				</linearGradient>
 				<linearGradient
 					id='paint3_linear_2170_40933'
@@ -129,9 +129,9 @@ export default function StepsMobile() {
 					y2='710.534'
 					gradientUnits='userSpaceOnUse'
 				>
-					<stop stop-color='#FC540C' />
-					<stop offset='0.355703' stop-color='#FFD76F' stop-opacity='0.72' />
-					<stop offset='0.859375' stop-color='#38D4E9' />
+					<stop stopColor='#FC540C' />
+					<stop offset='0.355703' stopColor='#FFD76F' stopOpacity='0.72' />
+					<stop offset='0.859375' stopColor='#38D4E9' />
 				</linearGradient>
 				<linearGradient
 					id='paint4_linear_2170_40933'
@@ -141,9 +141,9 @@ export default function StepsMobile() {
 					y2='38.4933'
 					gradientUnits='userSpaceOnUse'
 				>
-					<stop stop-color='#FC540C' />
-					<stop offset='0.355703' stop-color='#FFD76F' stop-opacity='0.72' />
-					<stop offset='0.859375' stop-color='#38D4E9' />
+					<stop stopColor='#FC540C' />
+					<stop offset='0.355703' stopColor='#FFD76F' stopOpacity='0.72' />
+					<stop offset='0.859375' stopColor='#38D4E9' />
 				</linearGradient>
 				<linearGradient
 					id='paint5_linear_2170_40933'
@@ -153,9 +153,9 @@ export default function StepsMobile() {
 					y2='777.534'
 					gradientUnits='userSpaceOnUse'
 				>
-					<stop stop-color='#FC540C' />
-					<stop offset='0.355703' stop-color='#FFD76F' stop-opacity='0.72' />
-					<stop offset='0.859375' stop-color='#38D4E9' />
+					<stop stopColor='#FC540C' />
+					<stop offset='0.355703' stopColor='#FFD76F' stopOpacity='0.72' />
+					<stop offset='0.859375' stopColor='#38D4E9' />
 				</linearGradient>
 				<linearGradient
 					id='paint6_linear_2170_40933'
@@ -165,9 +165,9 @@ export default function StepsMobile() {
 					y2='789.447'
 					gradientUnits='userSpaceOnUse'
 				>
-					<stop offset='0.246534' stop-color='#FC540C' />
-					<stop offset='0.619356' stop-color='#FFD76F' stop-opacity='0.72' />
-					<stop offset='0.859375' stop-color='#38D4E9' />
+					<stop offset='0.246534' stopColor='#FC540C' />
+					<stop offset='0.619356' stopColor='#FFD76F' stopOpacity='0.72' />
+					<stop offset='0.859375' stopColor='#38D4E9' />
 				</linearGradient>
 				<linearGradient
 					id='paint7_linear_2170_40933'
@@ -177,9 +177,9 @@ export default function StepsMobile() {
 					y2='457.039'
 					gradientUnits='userSpaceOnUse'
 				>
-					<stop offset='0.246534' stop-color='#FC540C' />
-					<stop offset='0.619356' stop-color='#FFD76F' stop-opacity='0.72' />
-					<stop offset='0.859375' stop-color='#38D4E9' />
+					<stop offset='0.246534' stopColor='#FC540C' />
+					<stop offset='0.619356' stopColor='#FFD76F' stopOpacity='0.72' />
+					<stop offset='0.859375' stopColor='#38D4E9' />
 				</linearGradient>
 				<linearGradient
 					id='paint8_linear_2170_40933'
@@ -189,9 +189,9 @@ export default function StepsMobile() {
 					y2='540.825'
 					gradientUnits='userSpaceOnUse'
 				>
-					<stop offset='0.246534' stop-color='#FC540C' />
-					<stop offset='0.619356' stop-color='#FFD76F' stop-opacity='0.72' />
-					<stop offset='0.859375' stop-color='#38D4E9' />
+					<stop offset='0.246534' stopColor='#FC540C' />
+					<stop offset='0.619356' stopColor='#FFD76F' stopOpacity='0.72' />
+					<stop offset='0.859375' stopColor='#38D4E9' />
 				</linearGradient>
 			</defs>
 		</svg>

components/sections/Templates/BgGlow.tsx

@@ -0,0 +1,49 @@
+export default function BgGlow({ className }: { className?: string }) {
+	return (
+		<svg
+			width='189'
+			height='108'
+			viewBox='0 0 189 108'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			className={className}
+		>
+			<g filter='url(#filter0_f_4147_25789)'>
+				<ellipse
+					cx='94.5'
+					cy='54'
+					rx='64'
+					ry='24'
+					fill='url(#paint0_linear_4147_25789)'
+					fillOpacity='0.4'
+				/>
+			</g>
+			<defs>
+				<filter
+					id='filter0_f_4147_25789'
+					x='0.5'
+					y='0'
+					width='188'
+					height='108'
+					filterUnits='userSpaceOnUse'
+					colorInterpolationFilters='sRGB'
+				>
+					<feFlood floodOpacity='0' result='BackgroundImageFix' />
+					<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
+					<feGaussianBlur stdDeviation='15' result='effect1_foregroundBlur_4147_25789' />
+				</filter>
+				<linearGradient
+					id='paint0_linear_4147_25789'
+					x1='11.0217'
+					y1='86.7273'
+					x2='211.423'
+					y2='45.3445'
+					gradientUnits='userSpaceOnUse'
+				>
+					<stop offset='0.22108' stopColor='#FF5C00' />
+					<stop offset='1' stopColor='#00F0FF' />
+				</linearGradient>
+			</defs>
+		</svg>
+	)
+}

components/sections/Templates/CheckIcon.tsx

@@ -0,0 +1,7 @@
+export default function CheckIcon() {
+	return (
+		<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+			<path d='M5 9.5L8.33333 13L15 6' stroke='black' stroke-width='2' />
+		</svg>
+	)
+}