@format.dev/cli 0.0.0 → 0.1.1

package/templates/react/documents/welcome/logos/node.tsx

@@ -0,0 +1,47 @@
+import type { ComponentProps } from 'react'
+import { LogoSvg } from './_logo-base'
+
+export function NodeIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvg viewBox='0 0 30 30' width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<g clipPath="url(#clip0_1_1022)">
+			<path d="M15.5229 0.24997C15.081 9.99868e-06 14.5564 9.99868e-06 14.1146 0.24997L2.48974 7.00165C2.04796 7.25173 1.79944 7.72399 1.79944 8.22421V21.7551C1.79944 22.2553 2.07556 22.7275 2.48974 22.9776L14.1146 29.7292C14.5564 29.9792 15.081 29.9792 15.5229 29.7292L27.1477 22.9776C27.5896 22.7275 27.838 22.2553 27.838 21.7551V8.22421C27.838 7.72399 27.5619 7.25173 27.1477 7.00165L15.5229 0.24997Z" fill="url(#paint0_linear_1_1022)"/>
+			<mask id="mask0_1_1022" style={{maskType: 'luminance'}} maskUnits="userSpaceOnUse" x="1" y="0" width="27" height="30">
+			<path d="M15.5244 0.24997C15.0825 9.99868e-06 14.5579 9.99868e-06 14.1161 0.24997L2.4912 7.00165C2.04942 7.25173 1.8009 7.72399 1.8009 8.22421V21.7551C1.8009 22.2553 2.07702 22.7275 2.4912 22.9776L14.1161 29.7292C14.5579 29.9792 15.0825 29.9792 15.5244 29.7292L27.1492 22.9776C27.5911 22.7275 27.8395 22.2553 27.8395 21.7551V8.22421C27.8395 7.72399 27.5634 7.25173 27.1492 7.00165L15.5244 0.24997Z" fill="white"/>
+			</mask>
+			<g mask="url(#mask0_1_1022)">
+			<path d="M14.8203 -0.628418L27.7241 7.1685L14.8203 30.6432L1.89258 22.8326L14.8203 -0.628418Z" fill="url(#paint1_linear_1_1022)"/>
+			</g>
+			<mask id="mask1_1_1022" style={{maskType: 'luminance'}} maskUnits="userSpaceOnUse" x="1" y="0" width="27" height="30">
+			<path d="M15.5244 0.24997C15.0825 9.99868e-06 14.5579 9.99868e-06 14.1161 0.24997L2.4912 7.00165C2.04942 7.25173 1.8009 7.72399 1.8009 8.22421V21.7551C1.8009 22.2553 2.07702 22.7275 2.4912 22.9776L14.1161 29.7292C14.5579 29.9792 15.0825 29.9792 15.5244 29.7292L27.1492 22.9776C27.5911 22.7275 27.8395 22.2553 27.8395 21.7551V8.22421C27.8395 7.72399 27.5634 7.25173 27.1492 7.00165L15.5244 0.24997Z" fill="white"/>
+			</mask>
+			<g mask="url(#mask1_1_1022)">
+			<path d="M14.8203 -0.628418L1.89258 7.1685L14.8203 30.6432L27.7241 22.8326L14.8203 -0.628418Z" fill="url(#paint2_linear_1_1022)"/>
+			</g>
+			</g>
+			<defs>
+			<linearGradient id="paint0_linear_1_1022" x1="19.9974" y1="5.13601" x2="10.7394" y2="26.82" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#3F8B3D"/>
+			<stop offset="0.64" stopColor="#3F873F"/>
+			<stop offset="0.93" stopColor="#3DA92E"/>
+			<stop offset="1" stopColor="#3DAE2B"/>
+			</linearGradient>
+			<linearGradient id="paint1_linear_1_1022" x1="13.0809" y1="16.0796" x2="42.6009" y2="0.239557" gradientUnits="userSpaceOnUse">
+			<stop offset="0.14" stopColor="#3F873F"/>
+			<stop offset="0.4" stopColor="#52A044"/>
+			<stop offset="0.71" stopColor="#64B749"/>
+			<stop offset="0.91" stopColor="#6ABF4B"/>
+			</linearGradient>
+			<linearGradient id="paint2_linear_1_1022" x1="1.95091" y1="14.6996" x2="28.2009" y2="14.6996" gradientUnits="userSpaceOnUse">
+			<stop offset="0.09" stopColor="#6ABF4B"/>
+			<stop offset="0.29" stopColor="#64B749"/>
+			<stop offset="0.6" stopColor="#52A044"/>
+			<stop offset="0.86" stopColor="#3F873F"/>
+			</linearGradient>
+			<clipPath id="clip0_1_1022">
+			<rect width="30" height="30" fill="white"/>
+			</clipPath>
+			</defs>
+		</LogoSvg>
+	)
+}

package/templates/react/documents/welcome/logos/panda-css.tsx

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react'
+import { LogoSvg } from './_logo-base'
+
+export function PandaCssIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvg viewBox='0 0 30 30' width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<g clipPath="url(#clip0_28_8217)">
+			<path d="M0.219971 3.64297C0.219971 1.77825 1.73163 0.266602 3.59635 0.266602H26.0032C27.8679 0.266602 29.3795 1.77825 29.3795 3.64297V26.3567C29.3795 28.2215 27.8679 29.7331 26.0032 29.7331H3.59635C1.73163 29.7331 0.219971 28.2215 0.219971 26.3567V3.64297Z" fill="#F6E458"/>
+			<path d="M18.9071 6.85295C17.2983 6.39082 15.6573 6.32801 13.9851 6.47757C13.0493 6.5748 12.1496 6.76057 11.2818 7.08653C9.40614 7.7911 7.99783 9.01132 7.15806 10.8486C6.55602 12.1658 6.33843 13.565 6.31575 15.0006C6.29179 16.5178 6.48192 18.014 6.78402 19.4974C7.05786 20.8419 7.42254 22.1601 7.94336 23.4327C7.99284 23.5536 8.05447 23.5943 8.18654 23.5941C9.83373 23.5905 11.481 23.5905 13.1283 23.5905C13.6158 23.5905 14.1035 23.5905 14.5912 23.5904C14.6285 23.5904 14.6658 23.5884 14.7088 23.586C14.7307 23.5849 14.7541 23.5836 14.7797 23.5824C14.7698 23.5589 14.761 23.5372 14.7526 23.5169C14.7363 23.4771 14.7221 23.4424 14.7063 23.4084C14.5871 23.1536 14.4656 22.8999 14.344 22.6461C14.0802 22.0957 13.8166 21.5453 13.5781 20.9841C12.8546 19.2824 12.3007 17.5301 12.1316 15.6753C12.0571 14.8569 12.0674 14.0432 12.2945 13.2457C12.554 12.3342 13.111 11.6907 14.0343 11.4216C14.8823 11.1747 15.7421 11.1763 16.5853 11.449C17.338 11.6924 17.8286 12.2065 18.0374 12.9763C18.1977 13.5674 18.1976 14.165 18.0764 14.761C17.983 15.2198 17.795 15.6386 17.4566 15.9735C16.8496 16.5744 16.0916 16.7126 15.2781 16.6665C15.1334 16.6583 14.9891 16.6425 14.8405 16.6261C14.7708 16.6185 14.7003 16.6108 14.6282 16.6036C14.6302 16.6266 14.6313 16.6478 14.6325 16.6677C14.6345 16.7068 14.6364 16.7406 14.6444 16.773C14.6791 16.9124 14.7122 17.0522 14.7452 17.1921C14.8248 17.5289 14.9043 17.8658 15.0066 18.1956C15.2076 18.8433 15.4412 19.4754 15.7061 20.0925C17.5941 19.9452 19.3331 19.4759 21.1788 18.3679C21.2065 18.3504 21.2317 18.3346 21.2569 18.3189C22.0497 17.8253 22.6914 17.1851 23.1339 16.3583C23.8505 15.0194 23.9902 13.5876 23.7773 12.1098C23.5576 10.5846 22.8731 9.30435 21.6948 8.30018C20.8777 7.60367 19.9327 7.14754 18.9071 6.85295Z" fill="black"/>
+			</g>
+			<defs>
+			<clipPath id="clip0_28_8217">
+			<rect width="30" height="30" fill="white"/>
+			</clipPath>
+			</defs>
+		</LogoSvg>
+	)
+}

package/templates/react/documents/welcome/logos/sass.tsx

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react'
+
+export function SassIcon(props: ComponentProps<'svg'>) {
+	return (
+		<svg width='24' height='28' viewBox='0 0 12 14' fill='none' aria-hidden='true' {...props}>
+			<path
+				d='M5.84794 8.17428C5.61223 8.28246 5.35397 8.42343 4.83694 8.70674C4.64091 8.81686 4.43606 8.92697 4.24542 9.03074C4.23219 9.01754 4.21847 9.00086 4.20523 8.9872C3.18246 7.89583 1.29078 7.12503 1.37115 5.65934C1.40104 5.12542 1.58482 3.72381 5.00405 2.02171C7.81806 0.636743 10.0572 1.02042 10.4438 1.87147C10.9996 3.08466 9.24366 5.34221 6.33754 5.66962C6.01589 5.73474 5.68371 5.72691 5.36553 5.64659C5.04734 5.56629 4.7513 5.41561 4.49928 5.20567C4.34539 5.03879 4.32237 5.02901 4.26551 5.06229C4.17191 5.11122 4.23219 5.26245 4.26551 5.34906C4.37637 5.54949 4.52634 5.72571 4.70656 5.86726C4.88678 6.0088 5.09359 6.11286 5.31476 6.1732C6.4584 6.42006 7.6508 6.30211 8.72371 5.836C10.485 5.15527 11.8602 3.2628 11.4573 1.67621C11.053 0.067584 8.3792 -0.462913 5.84943 0.434626C4.26516 0.96776 2.80144 1.80702 1.54169 2.90457C0.147927 4.20634 -0.0726057 5.33781 0.0175678 5.81154C0.341996 7.49354 2.66396 8.58834 3.5951 9.39926C3.54609 9.42617 3.50492 9.44817 3.46817 9.4692C3.00358 9.69971 1.23246 10.6242 0.790903 11.602C0.289558 12.7099 0.871274 13.5042 1.25549 13.6109C1.8345 13.7494 2.44238 13.7039 2.99422 13.4807C3.54607 13.2575 4.01434 12.8678 4.33363 12.3659C4.60478 11.9498 4.77128 11.4744 4.81897 10.9802C4.86667 10.4861 4.79415 9.98766 4.60758 9.52748C4.71766 9.43977 4.83505 9.36171 4.95847 9.294C5.19567 9.15406 5.42159 9.01606 5.62203 8.90937C6.30834 8.58834 7.05726 8.42309 7.81509 8.42537C9.40589 8.61229 9.72 9.60331 9.65971 10.0207C9.63154 10.1689 9.57189 10.3093 9.48486 10.4324C9.39777 10.5555 9.28526 10.6587 9.15497 10.7348C9.04469 10.8047 9.00794 10.8283 9.01777 10.8782C9.03097 10.9516 9.0844 10.9482 9.178 10.935C9.41703 10.8595 9.62754 10.7137 9.78206 10.5165C9.93651 10.3194 10.0277 10.0802 10.0435 9.8304C10.0925 8.8516 9.15789 7.77789 7.50343 7.78771C7.008 7.78851 6.51754 7.88611 6.05966 8.07497C5.98617 8.10531 5.9148 8.13794 5.84549 8.17286L5.84794 8.17428ZM3.48336 12.0106C2.95506 12.5847 2.21995 12.8015 1.90238 12.6179C1.55934 12.4222 1.69509 11.5731 2.34345 10.9658C2.72745 10.6203 3.1425 10.3108 3.58333 10.0413C3.66027 9.9924 3.77397 9.92777 3.9107 9.84554C3.93423 9.83234 3.94746 9.82548 3.94746 9.82548L4.02783 9.77657C4.14346 10.1637 4.15399 10.5746 4.05831 10.9671C3.96265 11.3597 3.76422 11.7198 3.48336 12.0106Z'
+				fill='#B73CBE'
+			/>
+		</svg>
+	)
+}

package/templates/react/documents/welcome/logos/tailwind.tsx

@@ -0,0 +1,45 @@
+import type { ComponentProps } from 'react'
+
+export function TailwindIcon(props: ComponentProps<'svg'>) {
+	return (
+		<svg width='24' height='16' viewBox='0 0 12 8' fill='none' aria-hidden='true' {...props}>
+			<g clipPath='url(#clip0_1_151)'>
+				<mask
+					id='mask0_1_151'
+					style={{ maskType: 'luminance' }}
+					maskUnits='userSpaceOnUse'
+					x='0'
+					y='0'
+					width='12'
+					height='8'>
+					<path d='M0.000380516 0H11.9213V7.79447H0.000380516V0Z' fill='white' />
+				</mask>
+				<g mask='url(#mask0_1_151)'>
+					<mask
+						id='mask1_1_151'
+						style={{ maskType: 'luminance' }}
+						maskUnits='userSpaceOnUse'
+						x='0'
+						y='0'
+						width='12'
+						height='8'>
+						<path d='M11.9211 0H0.000183105V7.65276H11.9211V0Z' fill='white' />
+					</mask>
+					<g mask='url(#mask1_1_151)'>
+						<path
+							fillRule='evenodd'
+							clipRule='evenodd'
+							d='M5.96066 0C7.55011 0 8.54353 0.850305 8.94091 2.55092C8.34484 1.70061 7.64946 1.38175 6.85473 1.59432C6.40128 1.71549 6.0772 2.06766 5.71848 2.45715C5.13415 3.0918 4.45775 3.82636 2.98042 3.82636C1.39096 3.82636 0.397549 2.97607 0.000183105 1.27546C0.596229 2.12576 1.29162 2.44463 2.08635 2.23205C2.53979 2.11088 2.86386 1.75872 3.22259 1.36923C3.80695 0.734571 4.48335 0 5.96066 0ZM8.94091 3.82636C10.5304 3.82636 11.5237 4.67669 11.9211 6.37727C11.3251 5.52698 10.6297 5.20811 9.83495 5.42069C9.38153 5.54211 9.05746 5.89404 8.69873 6.28353C8.11437 6.91818 7.43797 7.65276 5.96066 7.65276C4.3712 7.65276 3.37779 6.80244 2.98042 5.10182C3.57647 5.95215 4.27186 6.27102 5.06659 6.05844C5.52004 5.93727 5.84411 5.58509 6.20284 5.1956C6.78717 4.56095 7.46357 3.82636 8.94091 3.82636Z'
+							fill='#4CA5CB'
+						/>
+					</g>
+				</g>
+			</g>
+			<defs>
+				<clipPath id='clip0_1_151'>
+					<rect width='12' height='8' fill='white' />
+				</clipPath>
+			</defs>
+		</svg>
+	)
+}

package/templates/react/documents/welcome/logos/vanilla-extract.tsx

@@ -0,0 +1,74 @@
+import type { ComponentProps } from 'react'
+import { LogoSvg } from './_logo-base'
+
+export function VanillaExtractIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvg viewBox='0 0 26 30' width='26' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<path d="M23.4226 16.1976C23.3687 16.2233 23.3148 16.2562 23.2609 16.289C23.2586 15.9468 23.0781 15.7804 22.9516 15.5999C22.3422 14.728 21.1656 15.0585 20.8187 15.8601C20.7719 15.9702 21.5359 16.9663 21.5031 17.0741C20.9969 17.3015 20.5094 17.8241 20.4109 18.2812C20.5117 17.8101 20.1601 17.5898 19.6281 17.7655C19.0961 17.9413 18.5922 18.4476 18.5195 18.9163C18.5945 18.4476 18.2148 18.1921 17.6711 18.3233C17.1273 18.4546 16.6422 18.921 16.593 19.3874C16.6422 18.921 16.2344 18.628 15.6859 18.7101C15.1375 18.7921 14.6687 19.2187 14.6453 19.6827C14.6664 19.2163 14.2351 18.8858 13.682 18.9163C13.1289 18.9468 12.6812 19.3312 12.6859 19.7976C12.6812 19.3335 12.2266 18.9585 11.6734 18.9398C11.1203 18.921 10.6937 19.2608 10.7242 19.7273C10.6937 19.2608 10.2156 18.846 9.66718 18.7757C9.1164 18.7054 8.71562 19.0054 8.77187 19.4718C8.71562 19.0054 8.21874 18.5483 7.67499 18.4288C7.13124 18.3093 6.75624 18.5718 6.83827 19.0405C6.75624 18.5741 6.24296 18.0773 5.70624 17.9108C5.16952 17.7468 4.82265 17.9741 4.9328 18.4429C4.82499 17.9741 3.6414 15.9937 3.51249 15.7007C3.16562 14.8991 2.49765 14.646 1.92577 15.1663C1.6914 15.3796 1.54608 15.7663 1.66562 16.3358C1.29296 16.2327 1.1078 16.4132 1.24374 16.8093C1.98671 18.9796 2.7203 21.1874 3.32968 23.4069C3.58983 24.3562 3.85937 25.5866 4.62343 26.2944C5.17187 26.8007 5.85624 27.1523 6.51483 27.4358C8.48124 28.2796 10.6633 28.5374 12.6953 28.5515C14.8703 28.5655 17.6359 28.0405 19.5601 26.946C20.2891 26.5335 20.9828 26.053 21.3086 25.2444C21.8453 23.9038 22.2344 22.4976 22.6445 21.1523C23.1109 19.6241 23.4625 18.0023 24.0672 16.5749C24.2172 16.1062 23.9312 15.9444 23.4226 16.1976Z" fill="#48A2AD"/>
+			<path d="M12.6234 22.3596C18.4496 22.3596 23.1727 20.4613 23.1727 18.1197C23.1727 15.7781 18.4496 13.8799 12.6234 13.8799C6.79727 13.8799 2.07422 15.7781 2.07422 18.1197C2.07422 20.4613 6.79727 22.3596 12.6234 22.3596Z" fill="url(#paint0_radial_28_8227)"/>
+			<path d="M21.5812 12.0654C21.3844 11.8662 21.143 11.6787 20.8547 11.5146C20.8547 11.5146 14.1328 13.7014 9.45467 13.4646C4.77655 13.2279 5.46561 12.717 3.08905 14.2311C3.08905 14.2311 2.43983 15.1592 3.23202 15.724C4.26796 16.4623 5.57577 17.0717 7.01014 17.5357C7.18358 17.4092 7.35702 17.3295 7.50467 17.3295C11.9648 15.7803 20.6414 17.7443 21.5812 12.0654Z" fill="url(#paint1_linear_28_8227)"/>
+			<path d="M21.5817 12.0654C20.6418 17.7443 11.9653 15.7803 7.50747 17.3295C7.35981 17.3295 7.18638 17.4068 7.01294 17.5357C10.6106 18.6982 15.0122 18.935 17.9512 17.9576C21.6426 16.7342 23.309 13.8162 21.5817 12.0654Z" fill="#EB5E8E"/>
+			<path d="M19.6758 7.88184C19.6758 7.88184 20.9485 8.63652 20.9485 10.5889C20.9485 12.5412 19.3242 15.0725 12.1172 14.3482C4.97346 13.6287 3.12893 14.2381 3.12893 14.2381C3.12893 14.2381 0.939868 11.2662 5.51487 11.2826C9.6094 11.2967 15.6985 11.7795 17.1328 10.8701C19.268 9.51074 19.3477 9.47324 19.6758 7.88184Z" fill="url(#paint2_linear_28_8227)"/>
+			<path d="M11.3556 6.43105C13.5728 5.0459 13.4533 3.03262 12.3962 1.31934C12.2814 1.38496 12.2134 1.52324 12.272 1.66621C12.504 2.22402 12.7103 3.01152 12.3353 3.54121C11.7001 4.43652 10.5236 4.66387 8.59935 5.7373C6.76419 6.75918 6.05872 7.73418 5.92981 8.95762C5.9181 9.07246 5.98372 9.18262 6.09153 9.23652C6.29778 9.33965 6.69153 9.5084 7.28685 9.66308C7.93372 8.0623 9.88138 7.16699 11.3556 6.43105Z" fill="#F77CA5"/>
+			<path d="M16.1925 3.85551C15.2011 2.78676 14.0292 1.91488 12.6722 1.30551C12.5738 1.26098 12.473 1.27504 12.3933 1.31957C13.4503 3.03051 13.5699 5.04379 11.3527 6.43129C9.88081 7.16723 7.93315 8.06254 7.28394 9.66332C7.93081 9.83207 8.81675 9.98441 9.96987 10.0196C12.7964 10.1039 16.605 9.94926 17.2519 8.84066C17.9011 7.73441 17.3597 5.1141 16.1925 3.85551Z" fill="url(#paint3_linear_28_8227)"/>
+			<path d="M19.4762 7.49941C19.5301 7.36348 19.57 7.22285 19.5981 7.08223C18.8387 5.91973 17.0622 5.56348 17.0622 5.56348C18.9887 9.66504 8.96216 8.77207 6.12153 8.94082C4.91216 9.01348 4.21841 9.54551 3.81763 10.1361C4.4106 9.82676 5.10435 9.65566 5.80044 9.42363C10.2864 8.35488 17.552 12.8432 19.4762 7.49941Z" fill="#F79EBC"/>
+			<path d="M19.88 7.7252C19.8247 7.49629 19.7295 7.27891 19.5988 7.08301C19.5707 7.22598 19.5308 7.36426 19.4769 7.5002C17.5527 12.8439 10.2871 8.35566 5.79878 9.42441C5.10503 9.65645 4.40894 9.8252 3.81597 10.1369C3.27456 10.9314 3.27222 11.8268 3.27222 11.8268C6.19487 10.9408 8.35112 11.8314 13.9691 11.9135C19.5871 11.9908 20.2832 9.40332 19.88 7.7252Z" fill="url(#paint4_linear_28_8227)"/>
+			<path d="M23.4282 17.8217C22.9149 18.0608 22.3782 18.6092 22.2446 19.0662C22.3805 18.6092 22.0641 18.4147 21.5391 18.6092C21.0117 18.8037 20.4867 19.3076 20.3766 19.7553C20.4867 19.3076 20.1399 19.085 19.6032 19.235C19.0664 19.385 18.5532 19.8467 18.4711 20.2873C18.5555 19.8467 18.1805 19.5936 17.6367 19.699C17.093 19.8045 16.5961 20.2264 16.5399 20.6623C16.5985 20.2264 16.1953 19.9404 15.6469 20.0014C15.0961 20.0623 14.6203 20.4467 14.5899 20.8779C14.6203 20.4467 14.1961 20.1256 13.643 20.142C13.0899 20.1584 12.6352 20.5053 12.6305 20.9365C12.6352 20.5053 12.1875 20.149 11.6344 20.1209C11.0836 20.0928 10.65 20.4045 10.6735 20.8381C10.6524 20.4045 10.1836 20.0131 9.63284 19.9404C9.0844 19.8678 8.67659 20.1467 8.72581 20.5826C8.67659 20.1467 8.19143 19.7131 7.64768 19.5983C7.10393 19.4834 6.72659 19.7272 6.79925 20.1701C6.72425 19.7272 6.22268 19.2561 5.68831 19.0943C5.15393 18.9326 4.80471 19.1506 4.9055 19.6006C4.80471 19.1506 4.28909 18.635 3.76643 18.4311C3.24378 18.2272 2.92503 18.4147 3.05159 18.874C2.92503 18.4147 2.40003 17.8545 1.89143 17.6061C1.38284 17.3576 1.0969 17.5193 1.2469 17.9904C1.85159 19.4108 2.2055 21.0022 2.6719 22.474C3.0844 23.7701 3.47346 25.1131 4.01253 26.3623C4.33831 27.117 5.02737 27.5154 5.76331 27.8483C7.87034 28.7975 10.3313 29.0436 12.6141 29.0647C14.6766 29.0858 16.8141 28.9053 18.7805 28.2514C19.4414 28.0311 20.1258 27.7568 20.6742 27.3186C21.4407 26.7068 21.7102 25.5373 21.9727 24.6326C22.5985 22.467 23.3367 20.3553 24.0633 18.2225C24.2227 17.749 23.9414 17.5826 23.4282 17.8217Z" fill="url(#paint5_linear_28_8227)"/>
+			<path d="M6.26953 12.0117C6.52841 12.0117 6.73828 11.8019 6.73828 11.543C6.73828 11.2841 6.52841 11.0742 6.26953 11.0742C6.01065 11.0742 5.80078 11.2841 5.80078 11.543C5.80078 11.8019 6.01065 12.0117 6.26953 12.0117Z" fill="#B8EB96"/>
+			<path d="M9.31641 13.7109C9.57529 13.7109 9.78516 13.5011 9.78516 13.2422C9.78516 12.9833 9.57529 12.7734 9.31641 12.7734C9.05752 12.7734 8.84766 12.9833 8.84766 13.2422C8.84766 13.5011 9.05752 13.7109 9.31641 13.7109Z" fill="#EBD3DB"/>
+			<path d="M6.38672 15.4688C6.6456 15.4688 6.85547 15.2589 6.85547 15C6.85547 14.7411 6.6456 14.5312 6.38672 14.5312C6.12784 14.5312 5.91797 14.7411 5.91797 15C5.91797 15.2589 6.12784 15.4688 6.38672 15.4688Z" fill="#EB5E8E"/>
+			<path d="M9.84375 8.55469C10.1026 8.55469 10.3125 8.34482 10.3125 8.08594C10.3125 7.82705 10.1026 7.61719 9.84375 7.61719C9.58487 7.61719 9.375 7.82705 9.375 8.08594C9.375 8.34482 9.58487 8.55469 9.84375 8.55469Z" fill="#3DC2EB"/>
+			<path d="M12.3633 11.7773C12.6222 11.7773 12.832 11.5675 12.832 11.3086C12.832 11.0497 12.6222 10.8398 12.3633 10.8398C12.1044 10.8398 11.8945 11.0497 11.8945 11.3086C11.8945 11.5675 12.1044 11.7773 12.3633 11.7773Z" fill="#FFA600"/>
+			<path d="M20.0391 15.293C20.2979 15.293 20.5078 15.0831 20.5078 14.8242C20.5078 14.5653 20.2979 14.3555 20.0391 14.3555C19.7802 14.3555 19.5703 14.5653 19.5703 14.8242C19.5703 15.0831 19.7802 15.293 20.0391 15.293Z" fill="#79EB2D"/>
+			<path d="M14.2969 6.85547C14.5558 6.85547 14.7656 6.6456 14.7656 6.38672C14.7656 6.12784 14.5558 5.91797 14.2969 5.91797C14.038 5.91797 13.8281 6.12784 13.8281 6.38672C13.8281 6.6456 14.038 6.85547 14.2969 6.85547Z" fill="#FFF000"/>
+			<path d="M16.7578 12.3047C17.0167 12.3047 17.2266 12.0948 17.2266 11.8359C17.2266 11.5771 17.0167 11.3672 16.7578 11.3672C16.4989 11.3672 16.2891 11.5771 16.2891 11.8359C16.2891 12.0948 16.4989 12.3047 16.7578 12.3047Z" fill="#8052FF"/>
+			<path d="M17.9297 8.78906C18.1886 8.78906 18.3984 8.5792 18.3984 8.32031C18.3984 8.06143 18.1886 7.85156 17.9297 7.85156C17.6708 7.85156 17.4609 8.06143 17.4609 8.32031C17.4609 8.5792 17.6708 8.78906 17.9297 8.78906Z" fill="#5EEBB3"/>
+			<path d="M14.5898 15.8789C14.8487 15.8789 15.0586 15.669 15.0586 15.4102C15.0586 15.1513 14.8487 14.9414 14.5898 14.9414C14.331 14.9414 14.1211 15.1513 14.1211 15.4102C14.1211 15.669 14.331 15.8789 14.5898 15.8789Z" fill="#A45EEB"/>
+			<path opacity="0.56" d="M4.33594 20.0391L5.74219 26.0742" stroke="#49A5B0" strokeWidth="0.703125" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+			<path opacity="0.56" d="M20.9766 20.0576L19.5703 26.1326" stroke="#49A5B0" strokeWidth="0.703125" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+			<path opacity="0.56" d="M7.25708 20.9951L8.07739 26.9717" stroke="#49A5B0" strokeWidth="0.703125" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+			<path opacity="0.56" d="M18.0566 20.7822L17.2363 26.7588" stroke="#49A5B0" strokeWidth="0.703125" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+			<path opacity="0.56" d="M9.80396 21.3281L10.3524 27.4617" stroke="#49A5B0" strokeWidth="0.703125" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+			<path opacity="0.56" d="M15.5086 21.1123L14.9602 27.2459" stroke="#49A5B0" strokeWidth="0.703125" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+			<path opacity="0.56" d="M12.6965 21.7197L12.7739 27.6166" stroke="#49A5B0" strokeWidth="0.703125" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+			<path opacity="0.2" d="M13.2077 2.36484C14.1124 2.88047 14.9421 3.53906 15.678 4.33594C16.0015 4.68516 16.2991 5.2125 16.5101 5.82187C16.5874 6.04688 16.7749 6.21563 17.0046 6.27188C17.2483 6.33281 18.4929 6.675 19.0108 7.46719C19.0999 7.60547 19.1608 7.74375 19.196 7.88906C19.2171 7.98047 19.2358 8.08125 19.2499 8.18437C19.271 8.34844 19.3507 8.50078 19.4726 8.61328C19.7608 8.87812 20.246 9.4875 20.2483 10.5891C20.2483 10.8469 20.2132 11.0953 20.1429 11.3297C20.0702 11.5805 20.1382 11.85 20.3257 12.0305C20.4171 12.1195 20.5273 12.1805 20.6468 12.2109C20.8108 12.3164 20.9585 12.4336 21.0827 12.5625C21.8163 13.3055 21.5796 14.1633 21.2515 14.7539C21.1226 14.9836 21.1343 15.2672 21.2819 15.4852C21.4132 15.682 21.6335 15.7969 21.8655 15.7969C21.8913 15.7969 21.9194 15.7945 21.9476 15.7922C21.9663 15.7898 21.9874 15.7898 22.0062 15.7898C22.1562 15.7898 22.278 15.8602 22.3788 16.0031C22.4069 16.043 22.4351 16.0805 22.4655 16.1203C22.5616 16.2469 22.5616 16.2563 22.564 16.2984C22.5663 16.5516 22.7069 16.7859 22.9296 16.9078C23.0023 16.9477 23.0796 16.9734 23.1593 16.9852C23.0983 17.1563 23.0351 17.3367 22.9718 17.5266C22.8898 17.7727 22.9507 18.0445 23.1312 18.232C23.1757 18.2789 23.2249 18.3188 23.2788 18.3516L23.1194 18.818C22.496 20.6461 21.8491 22.5352 21.2983 24.4359C21.2726 24.5203 21.2491 24.6094 21.2233 24.6984C21.003 25.4742 20.7546 26.3555 20.2366 26.768C19.7515 27.1547 19.1163 27.3961 18.5608 27.5813C16.9835 28.1063 15.1413 28.3594 12.9288 28.3594C12.828 28.3594 12.7249 28.3594 12.6241 28.357C9.82803 28.3289 7.73975 27.9609 6.05459 27.2016C5.37725 26.8969 4.88038 26.5875 4.66006 26.0789C4.22647 25.0781 3.88663 23.9883 3.55616 22.9312C3.48584 22.7062 3.41553 22.4789 3.34288 22.2563C3.19053 21.7781 3.04756 21.2719 2.90694 20.7844C2.63975 19.8469 2.36553 18.8813 1.99756 17.9648C2.01866 17.9438 2.03741 17.9203 2.05381 17.8945C2.18506 17.7117 2.21788 17.475 2.14522 17.2617L2.05381 16.9945C2.04678 16.9758 2.04209 16.957 2.03506 16.9383C2.07725 16.9125 2.11709 16.882 2.15225 16.8492C2.23979 16.766 2.30467 16.6619 2.34076 16.5467C2.37685 16.4314 2.38295 16.3089 2.3585 16.1906C2.30225 15.9234 2.33975 15.7453 2.40538 15.6867C2.47569 15.6234 2.52959 15.6 2.55538 15.6C2.55772 15.6 2.56709 15.6 2.58116 15.607C2.68554 15.6496 2.79867 15.6663 2.9109 15.6557C3.02314 15.6451 3.13113 15.6075 3.22569 15.5461C3.41788 15.4219 3.53741 15.2133 3.54678 14.9836C3.55147 14.8781 3.60069 14.7609 3.63819 14.6883C3.72256 14.5945 3.78116 14.4797 3.80694 14.3531C3.84444 14.1656 3.80459 13.9688 3.69209 13.8117C3.50225 13.5398 3.24678 13.0125 3.32413 12.6633C3.34522 12.5648 3.39913 12.4359 3.62881 12.3047C3.83038 12.1898 3.96163 11.9836 3.98038 11.7516C3.99678 11.543 4.07178 11.0062 4.39756 10.5281C4.73741 10.0289 5.27881 9.73594 6.00303 9.65859C6.16527 9.64186 6.31657 9.56902 6.43082 9.45263C6.54507 9.33624 6.6151 9.18361 6.62881 9.02109V9.00703C6.71553 8.24531 7.06475 7.39453 8.93975 6.34922C9.59131 5.98594 10.1538 5.72344 10.6507 5.49141C11.621 5.03906 12.3874 4.68047 12.9077 3.94688C13.2077 3.52734 13.3062 2.99063 13.2077 2.36484ZM12.5491 1.27734C12.4929 1.27734 12.4413 1.29375 12.3944 1.31953C12.2796 1.38516 12.2116 1.52344 12.2702 1.66641C12.5023 2.22422 12.7085 3.01172 12.3335 3.54141C11.6983 4.43672 10.5218 4.66406 8.59756 5.7375C6.76475 6.75937 6.05928 7.73438 5.93038 8.95781V8.9625C4.84053 9.07734 4.196 9.57891 3.81631 10.1367C3.39913 10.7508 3.30303 11.4234 3.27959 11.6977C1.94366 12.4641 2.99131 14.0391 3.11553 14.2172C3.10616 14.2219 3.09913 14.2289 3.08975 14.2336C3.08975 14.2336 2.85772 14.5664 2.84131 14.9555C2.74756 14.918 2.65147 14.8992 2.55303 14.8992C2.34444 14.8992 2.13116 14.9859 1.92959 15.1711C1.69522 15.3844 1.54991 15.7711 1.66944 16.3406C1.59913 16.3219 1.53819 16.3125 1.48194 16.3125C1.23819 16.3125 1.13741 16.4906 1.24756 16.8141C1.32491 17.0391 1.39991 17.2664 1.47725 17.4914C1.24288 17.4937 1.14209 17.6672 1.24288 17.9883C1.84756 19.4086 2.20147 21 2.66788 22.4719C3.08038 23.768 3.46944 25.1109 4.0085 26.3602C4.33428 27.1148 5.02334 27.5133 5.75928 27.8461C7.86631 28.7953 10.3273 29.0414 12.6101 29.0625C12.7132 29.0625 12.8187 29.0648 12.9218 29.0648C14.8858 29.0648 16.9085 28.8703 18.7765 28.2516C19.4374 28.0312 20.1218 27.757 20.6702 27.3188C21.4366 26.707 21.7062 25.5375 21.9687 24.6328C22.5944 22.4672 23.3327 20.3555 24.0593 18.2227C24.1694 17.8992 24.0663 17.7188 23.8226 17.7188C23.7663 17.7188 23.703 17.7281 23.6327 17.7469C23.764 17.3484 23.9046 16.9594 24.064 16.582C24.1671 16.2586 24.0663 16.0805 23.8296 16.0805C23.7194 16.0805 23.5812 16.118 23.4218 16.1977C23.3679 16.2234 23.314 16.2563 23.2601 16.2891C23.2577 15.9469 23.0773 15.7805 22.9507 15.6C22.6976 15.2391 22.3483 15.0867 22.0015 15.0867C21.9546 15.0867 21.9077 15.0891 21.8608 15.0938C22.4538 14.0273 22.4116 12.9117 21.5796 12.068C21.3827 11.8688 21.1413 11.6812 20.853 11.5172L20.8132 11.5289C20.9069 11.2102 20.9468 10.8938 20.9468 10.5891C20.9468 9.21562 20.3163 8.4375 19.9437 8.09531C19.9273 7.96875 19.9062 7.84453 19.8757 7.725C19.8204 7.49609 19.7252 7.27871 19.5944 7.08281C18.9476 6.09375 17.5671 5.68828 17.171 5.58984C16.939 4.92656 16.6062 4.30547 16.1913 3.85781C15.1999 2.78906 14.028 1.91719 12.671 1.30781C12.6335 1.28672 12.5913 1.27734 12.5491 1.27734Z" fill="#424242"/>
+			<defs>
+			<radialGradient id="paint0_radial_28_8227" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.5782 15.8596) rotate(90) scale(6.2543 9.79298)">
+			<stop stopColor="#BE5D23"/>
+			<stop offset="0.158" stopColor="#B65B25"/>
+			<stop offset="0.407" stopColor="#9F552A"/>
+			<stop offset="0.715" stopColor="#7A4C33"/>
+			<stop offset="0.999" stopColor="#52423C"/>
+			</radialGradient>
+			<linearGradient id="paint1_linear_28_8227" x1="2.83921" y1="14.5261" x2="21.5812" y2="14.5261" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#FF85AE"/>
+			<stop offset="0.317" stopColor="#FF7DA9"/>
+			<stop offset="0.816" stopColor="#FF669A"/>
+			<stop offset="1" stopColor="#FF5C93"/>
+			</linearGradient>
+			<linearGradient id="paint2_linear_28_8227" x1="2.60557" y1="11.1774" x2="20.9494" y2="11.1774" gradientUnits="userSpaceOnUse">
+			<stop offset="0.003" stopColor="#FFB0CB"/>
+			<stop offset="0.792" stopColor="#F383A9"/>
+			<stop offset="1" stopColor="#F0769F"/>
+			</linearGradient>
+			<linearGradient id="paint3_linear_28_8227" x1="10.5666" y1="5.65785" x2="18.0492" y2="5.65785" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#F697B7"/>
+			<stop offset="0.335" stopColor="#F78FB2"/>
+			<stop offset="0.862" stopColor="#F878A3"/>
+			<stop offset="1" stopColor="#F9719F"/>
+			</linearGradient>
+			<linearGradient id="paint4_linear_28_8227" x1="3.27245" y1="9.49754" x2="19.9742" y2="9.49754" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#F78FB2"/>
+			<stop offset="0.272" stopColor="#F887AD"/>
+			<stop offset="0.703" stopColor="#FC709F"/>
+			<stop offset="1" stopColor="#FF5C93"/>
+			</linearGradient>
+			<linearGradient id="paint5_linear_28_8227" x1="12.6563" y1="19.4529" x2="12.6563" y2="28.0358" gradientUnits="userSpaceOnUse">
+			<stop stopColor="#4FE8FF"/>
+			<stop offset="0.497" stopColor="#4BDDF3"/>
+			<stop offset="1" stopColor="#45CEE3"/>
+			</linearGradient>
+			</defs>
+		</LogoSvg>
+	)
+}

package/templates/react/documents/welcome/logos/vercel.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react'
+import { LogoSvgInverted } from './_logo-base'
+
+export function VercelIcon(props: ComponentProps<'svg'>) {
+	return (
+		<LogoSvgInverted viewBox='0 0 35 30' width='35' height='30' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' {...props}>
+			<g clipPath="url(#clip0_1_1089)">
+			<path d="M17.2965 0L34.5939 29.9601H-0.000732422L17.2965 0Z" fill="black"/>
+			</g>
+			<defs>
+			<clipPath id="clip0_1_1089">
+			<rect width="34.5946" height="30" fill="white"/>
+			</clipPath>
+			</defs>
+		</LogoSvgInverted>
+	)
+}

package/templates/react/documents/welcome/pages/Close/ClosePage.tsx

@@ -0,0 +1,13 @@
+export function ClosePage() {
+	return (
+		<section className='page hero-page'>
+			<p className='kicker'>Where to go next</p>
+			<h2 className='hero-title'>Now, go build something.</h2>
+			<p className='lead'>
+				You've only scratched the surface. There's plenty more to explore, and it's all in the docs at{' '}
+				<a href='https://format.dev/docs'>format.dev/docs</a>. If you get stuck, <a href='https://format.dev/contact'>reach out</a>{' '}
+				and we'll help.
+			</p>
+		</section>
+	)
+}

package/templates/react/documents/welcome/pages/Cover/CoverPage.tsx

@@ -0,0 +1,17 @@
+export function CoverPage({ name }: { name: string }) {
+	return (
+		<section className='page hero-page'>
+			<h1 className='hero-title'>
+				Welcome to Format, <span>{name}</span>.
+			</h1>
+			<p className='lead'>
+				The developer-first platform for building pixel-perfect PDFs with web technology.
+			</p>
+			<p>
+				You've created your account and installed Format Studio, nice work. This is a Format document, built with React
+				and CSS. Studio renders it live from the code in <code>documents/welcome</code>. If you edit the code and save,
+				the preview updates instantly.
+			</p>
+		</section>
+	)
+}

package/templates/react/documents/welcome/pages/FeatureShowcase/FeatureShowcasePage.tsx

@@ -0,0 +1,221 @@
+import { Flow, Stream, Footnote, PageBreak } from '@format.dev/react'
+import { ButtonLink } from '../../components/ButtonLink'
+import Fleuron from '../../icons/propeller-asterisk.svg'
+import { mountains } from './mountains'
+import './feature-showcase.css'
+
+const cssFeatures = [
+	{ key: 'shadow', label: 'Drop shadow' },
+	{ key: 'gradient', label: 'Gradients' },
+	{ key: 'transform', label: 'Transforms' },
+	{ key: 'grid', label: 'Grid' },
+	{ key: 'flex', label: 'Flexbox' },
+	{ key: 'radius', label: 'Rounded corners' },
+	{ key: 'orphans', label: 'Orphans & widows' },
+	{ key: 'breaks', label: 'Break before/after' },
+	{ key: 'pattern', label: 'Repeating patterns' }
+]
+
+export function FeatureShowcasePage() {
+	return (
+		<>
+			<section className='showcase-intro'>
+				<h2>Made it this far?</h2>
+				<p>You're clearly in the zone. Let's demonstrate a few stand out features.</p>
+			</section>
+
+			<section className='showcase-feature'>
+				<h3 className='feature-heading'>Tables that paginate themselves</h3>
+				<p>
+					A long table is notoriously tricky to get right when you're making PDFs from HTML and CSS. Format flows the
+					rows across as many pages as they need, and repeats the header row on each one. Remember, in the table example
+					below, we haven't explicitly told Format where to split the table, it just flows across the two pages
+					automatically.
+				</p>
+			</section>
+
+			<Flow>
+				<div className='feature-table'>
+					<p className='feature-table-caption'>The world's highest mountains</p>
+					<table>
+						<thead>
+							<tr>
+								<th>Peak</th>
+								<th className='height'>Height</th>
+								<th>Range</th>
+								<th>Country</th>
+							</tr>
+						</thead>
+						<tbody>
+							<Stream>
+								{mountains.map(mountain => (
+									<tr key={mountain.peak}>
+										<td className='peak'>{mountain.peak}</td>
+										<td className='height'>{mountain.height}</td>
+										<td>{mountain.range}</td>
+										<td>{mountain.country}</td>
+									</tr>
+								))}
+							</Stream>
+						</tbody>
+					</table>
+				</div>
+			</Flow>
+
+			<PageBreak />
+
+			<section className='showcase-feature'>
+				<h3 className='feature-heading'>Flowing prose and footnotes</h3>
+				<p>
+					Format's pagination model is very effective for long-form text that you want to flow naturally across pages.
+					Choose your <code>splitGranularity</code> and let the engine do the rest. Check out the automatic{' '}
+					<code>&lt;Footnote&gt;</code> system too.
+				</p>
+			</section>
+
+			<Flow splitGranularity='word'>
+				<div className='feature-prose'>
+					<Fleuron className='fleuron' width={10} height={10} />
+					<p>
+						In the early 1990s, digital documents were strangely unstable
+						<Footnote>Format lifts this note to the foot of the page it lands on, and numbers it for you.</Footnote>.
+						You could write something, send it across town, and see it return with different fonts, altered spacing, and
+						page breaks that landed wherever they felt like. The text survived, but the layout, the thing that made it
+						readable, often didn't.
+					</p>
+					<p>
+						That wasn't because computers couldn't show text. It was because they all did it differently. Operating
+						systems handled fonts in inconsistent ways, printers relied on varied drivers and defaults, and even similar
+						setups could disagree on margins or letter widths. A document was less a finished object than a set of
+						instructions open to interpretation.
+					</p>
+					<p>
+						PDF showed up as a practical fix: a format designed to preserve the look of a page. Instead of depending on
+						the recipient's computer to recreate the layout, a PDF includes what's needed to render the page
+						consistently. It acted like digital paper, portable, stable, and reliable across devices.
+					</p>
+					<p>
+						At first, that predictability was the whole pitch. Manuals, invoices, design proofs, anything official
+						needed certainty, not improvisation. The promise was simple: what you see is what they will see, down to the
+						last line break.
+					</p>
+					<p>
+						Adoption took time, but PDFs fit into existing habits
+						<Footnote>Format numbers footnotes continuously through the whole document.</Footnote>. They printed
+						cleanly, handled images and typography well, and could be shared as a single file rather than a messy bundle
+						of fonts and linked graphics. For organizations, that alone made exporting to PDF worth it.
+					</p>
+					<p>
+						As the web became the main way information traveled, portability mattered even more. Documents weren't just
+						moving between coworkers; they were crossing platforms, browsers, and devices that didn't share the same
+						assumptions. A PDF offered a straightforward deal: you can view this without rebuilding it.
+					</p>
+					<p>
+						PDF also changed how a file felt. Editable formats implied collaboration and revision; PDFs implied reading,
+						signing, and completion. Even if the content could still change later, the format signaled intent: this is
+						the document, not a draft.
+					</p>
+					<Fleuron className='fleuron' width={10} height={10} />
+				</div>
+				<div className='prose-learn-more'>
+					<p>Learn more about how to split content across pages and how to work with footnotes.</p>
+					<div className='button-row'>
+						<ButtonLink href='https://format.dev/docs/document-model/types/flow'>Flow docs</ButtonLink>
+						<ButtonLink href='https://format.dev/docs/document-model/types/footnote'>Footnote docs</ButtonLink>
+					</div>
+				</div>
+			</Flow>
+
+			<PageBreak />
+
+			<section className='showcase-feature'>
+				<h3 className='feature-heading'>Full support for modern CSS</h3>
+				<p>
+					You might have experienced other tools flattening or "rasterizing" certain CSS visuals such as box shadows,
+					fancy borders or gradients. Format produces fully vector output, increasing fidelity, whilst decreasing
+					filesize. Equally, all modern layout techniques are supported, like flexbox and grid.
+				</p>
+				<div className='css-demo'>
+					{cssFeatures.map(({ key, label }) => (
+						<div className={`css-demo-tile tile-${key}`} key={key}>
+							<div className='tile-visual'>
+								{key === 'grid' && Array.from({ length: 7 }, (_, i) => <span key={i} />)}
+								{key === 'flex' && Array.from({ length: 3 }, (_, i) => <span key={i} />)}
+								{key === 'orphans' && Array.from({ length: 4 }, (_, i) => <span key={i} />)}
+								{key === 'breaks' && Array.from({ length: 5 }, (_, i) => <span key={i} />)}
+							</div>
+							<span className='tile-label'>{label}</span>
+						</div>
+					))}
+				</div>
+
+				<p>
+					Take repeating backgrounds, for example. These are especially awkward in other tools, often either not
+					displaying at all, or just getting rasterized, which, for anyone that wants quality will not be happy with. In
+					Format, whether you're using <code>background-repeat</code> to tile an SVG or the <code>{'<pattern>'}</code>{' '}
+					tag inside an SVG on the page, you'll get crisp pattern repeats and small PDF filesizes.
+				</p>
+
+				<div className='css-pattern-demo'>
+					<svg className='css-pattern' aria-hidden='true'>
+						<defs>
+							<pattern
+								id='fs-diagonal-stripes'
+								width='14'
+								height='14'
+								fill='#999'
+								patternUnits='userSpaceOnUse'
+								patternTransform='rotate(-45)'>
+								<rect className='css-pattern-stripe' width='6' height='14' />
+							</pattern>
+						</defs>
+						<rect width='800' height='200' fill='url(#fs-diagonal-stripes)' />
+					</svg>
+					<span className='css-pattern-caption'>A seamless SVG &lt;pattern&gt;, kept as vector in the PDF</span>
+				</div>
+
+				<p>
+					We've spent countless hours smoothing over CSS quirks and PDF-viewer edge cases, so your documents render the
+					same everywhere, at the smallest file sizes, delivered fast over the wire.
+				</p>
+			</section>
+
+			<section className='showcase-feature'>
+				<h3 className='feature-heading'>And there's plenty more&hellip;</h3>
+				<p>
+					We're determined to conquer every feature and every edge-case in HTML and CSS, so you can build the very
+					highest quality PDFs. Here are a few other features to read about.
+				</p>
+				<ul className='more-list'>
+					<li>
+						<strong>Automatic tables of contents.</strong> Built from your headings, with page numbers filled in after
+						layout. Even use several ToCs in one document with no overlap.{' '}
+						<ButtonLink inline href='https://format.dev/docs/document-model/types/table-of-contents'>
+							ToC docs
+						</ButtonLink>
+					</li>
+					<li>
+						<strong>Page counters.</strong> Live page numbers and totals in any numbering style.{' '}
+						<ButtonLink inline href='https://format.dev/docs/document-model/types/counter'>
+							Counter docs
+						</ButtonLink>
+					</li>
+					<li>
+						<strong>Numbered figures and cross-references.</strong> Number a figure or heading, then point to it by
+						name. "See Figure 3" resolves to the right number even as content reflows.{' '}
+						<ButtonLink inline href='https://format.dev/docs/document-model/types/ref'>
+							Ref docs
+						</ButtonLink>
+					</li>
+					<li>
+						<strong>Endnotes and references.</strong> Collect footnotes into an endnotes list, or output the page a
+						target landed on once the layout settles.{' '}
+						<ButtonLink inline href='https://format.dev/docs/document-model/types/footnotes'>
+							Endnotes docs
+						</ButtonLink>
+					</li>
+				</ul>
+			</section>
+		</>
+	)
+}