Skip to content

feat(VibeBuilder): [LXP-8087] add 3 builder illustrations #3210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+838 −0
Open

feat(VibeBuilder): [LXP-8087] add 3 builder illustrations #3210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0507b83
add vibe builder illustration
saghdaey Nov 12, 2025
ea59a91
add next illustration
saghdaey Nov 12, 2025
26fef8f
add next SVG
saghdaey Nov 12, 2025
33b64fc
add missing title to VibeBuilderPromotion
saghdaey Nov 12, 2025
cf03bf4
fix vibebuilderpromotion svg
saghdaey Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
300 changes: 300 additions & 0 deletions packages/gamut-illustrations/src/VibeBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,300 @@
import * as React from 'react';

import { IllustrationProps } from './types';

export const VibeBuilder: React.FC<IllustrationProps> = ({
'aria-hidden': ariaHidden,
className,
height,
width,
}) => (
<svg
aria-hidden={ariaHidden}
className={className}
fill="none"
height={height}
viewBox="0 0 433 176"
width={width}
xmlns="http://www.w3.org/2000/svg"
>
<title>Vibe Builder</title>
<path
d="M8.22 97.846v77.147h31.911c.525-21.392 18.032-38.575 39.551-38.575s39.025 17.18 39.552 38.575h31.91V97.846z"
fill="#10162f"
/>
<path
d="M4.483 97.846v77.147h31.911c.524-21.392 18.031-38.575 39.551-38.575s39.025 17.18 39.552 38.575h31.91V97.846z"
fill="#f966ff"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".535"
/>
<path d="M345.752 68.406h-59.343v106.586h59.343z" fill="#10162f" />
<path
d="M339.88 68.406h-59.343v106.586h59.343z"
fill="#ffd300"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".535"
/>
<path d="M344.725 109.777v59.343h70.64v-59.343z" fill="#10162f" />
<path
d="M344.722 115.649v59.343h70.641v-59.343z"
fill="#f966ff"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".535"
/>
<path d="m226.402 133.566 4.433.461v40.816h-50.447z" fill="#10162f" />
<path
d="M215.522 125.3h15.027v8.62l-44.423 40.977-9.502.096-6.895-3.416 15.616-34.549z"
fill="#fff"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M215.52 132.44h-41.331v7.117h41.331zM222.617 125.3h-41.33v7.116h41.33z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M208.088 139.526h-41.33v7.117h41.33z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M198.922 146.613h-37.86v7.117h37.86z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M191.487 153.703h-37.86v7.116h37.86z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M184.056 160.79h-37.861v7.116h37.861z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M176.624 167.877h-37.861v7.116h37.861z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M227.965 100.714c-.447-10.623-9.238-19.099-19.971-19.099s-19.543 8.476-19.99 19.099v24.564h39.961z"
fill="#10162f"
/>
<path
d="M224.511 100.714c-.447-10.623-9.238-19.099-19.971-19.099s-19.543 8.476-19.99 19.099v24.564h39.961z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="m273.247 156.191-31.672-33.598a2.21 2.21 0 0 0-3.127-.092l-7.073 6.667a2.21 2.21 0 0 0-.092 3.127l31.672 33.598c.838.889 2.238.93 3.128.092l7.072-6.667c.889-.838.93-2.238.092-3.127"
fill="#10162f"
/>
<path
d="M209.04 155.209c31.383 0 56.823-25.44 56.823-56.823s-25.44-56.822-56.823-56.822-56.823 25.44-56.823 56.822 25.441 56.823 56.823 56.823Z"
fill="#fff"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".535"
/>
<path
d="M209.04 150.081c28.302 0 51.245-22.944 51.245-51.245 0-28.302-22.943-51.245-51.245-51.245s-51.245 22.943-51.245 51.245 22.944 51.245 51.245 51.245"
fill="#fff0e5"
/>
<mask
height="103"
id="a"
maskUnits="userSpaceOnUse"
style={{ maskType: 'luminance' }}
width="104"
x="157"
y="47"
>
<path
d="M209.04 149.468c28.212 0 51.082-22.87 51.082-51.082 0-28.211-22.87-51.081-51.082-51.081-28.211 0-51.082 22.87-51.082 51.081s22.871 51.082 51.082 51.082"
fill="#fff"
/>
</mask>
<g mask="url(#a)">
<path d="m235.691 115.599 5.275.545v48.581h-60.041z" fill="#10162f" />
<path
d="M222.739 105.759h17.887v10.259l-52.871 48.768-11.311.118-8.205-4.067 18.585-41.121z"
fill="#fff"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M222.739 114.258h-49.19v8.47h49.19zM231.185 105.759h-49.19v8.47h49.19z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M213.892 122.693h-49.19v8.47h49.19z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M202.982 131.128H157.92v8.47h45.062z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M194.138 139.563h-45.062v8.47h45.062z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M185.291 147.996h-45.063v8.47h45.063z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M237.55 76.497c-.532-12.643-10.993-22.731-23.767-22.731-12.775 0-23.259 10.088-23.791 22.731v29.236h47.558z"
fill="#10162f"
/>
<path
d="M233.438 76.497c-.532-12.643-10.993-22.731-23.767-22.731-12.775 0-23.259 10.088-23.791 22.731v29.236h47.558z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
</g>
<path
d="M209.04 149.468c28.212 0 51.082-22.87 51.082-51.082 0-28.211-22.87-51.081-51.082-51.081-28.211 0-51.082 22.87-51.082 51.081s22.871 51.082 51.082 51.082Z"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".535"
/>
<path
d="M113.49 40.975c16.375 0 29.671 13.296 29.671 29.671v26.705H83.818V70.646c0-16.375 13.297-29.671 29.672-29.671"
fill="#10162f"
/>
<path
d="M106.73 40.975c16.375 0 29.671 13.296 29.671 29.671v26.705H77.058V70.646c0-16.375 13.296-29.671 29.672-29.671Z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M68.877 102.471a5.64 5.64 0 0 1 6.702 3.714 27.2 27.2 0 0 0 7.52-5.619 5.633 5.633 0 0 1 5.757-9.628q.488-1.484.787-3.044c.395-2.076.534-4.139.446-6.156a5.636 5.636 0 0 1-2.852-10.779 26 26 0 0 0-5.513-7.252 5.636 5.636 0 0 1-7.103 1.05 5.63 5.63 0 0 1-2.43-6.602 26 26 0 0 0-3.3-.826 25.5 25.5 0 0 0-5.603-.39 5.637 5.637 0 0 1-10.556 2.715 26.8 26.8 0 0 0-7.24 5.246 5.633 5.633 0 0 1-5.853 9.261 25 25 0 0 0-1.15 4.364 24.3 24.3 0 0 0-.335 4.559 5.635 5.635 0 0 1 2.614 10.754 27.7 27.7 0 0 0 5.267 7.448 5.64 5.64 0 0 1 7.226-1.193 5.636 5.636 0 0 1 2.14 7.309c1.32.497 2.692.891 4.104 1.161 1.731.332 3.468.465 5.188.417a5.634 5.634 0 0 1 4.19-6.511z"
fill="#fff0e5"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".535"
/>
<path
d="M64.11 96.905c7.712 0 13.964-6.253 13.964-13.966S71.822 68.976 64.11 68.976c-7.712 0-13.964 6.252-13.964 13.965 0 7.712 6.252 13.965 13.964 13.965Z"
fill="#fff"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M63.58 87.837c-2.94-.353-4.88-2.782-4.508-5.64.364-2.787 3.012-4.826 5.768-4.435 2.587.366 4.607 2.932 4.369 5.554-.254 2.817-2.804 4.863-5.632 4.521z"
fill="#f966ff"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".535"
/>
<path
d="M33.922 109.871c-.936-.249-1.98-.506-3.007-.816-.35-.104-.559-.029-.805.206q-1.59 1.53-.971 3.644c.147.505.283 1.016.447 1.517.107.326.026.529-.287.69a184 184 0 0 0-3.507 1.822c-.337.179-.543.109-.77-.182-.65-.829-1.338-1.629-1.988-2.459-.214-.273-.434-.356-.779-.315-2.135.262-2.135.254-2.881 2.284-.19.514-.38 1.025-.554 1.544-.11.326-.305.436-.645.382a149 149 0 0 0-3.91-.572c-.442-.056-.506-.326-.522-.672-.043-.931-.102-1.862-.123-2.793-.011-.519-.239-.786-.68-1.088-1.212-.824-2.277-.907-3.37.187-.41.409-.97.663-1.44 1.014-.294.219-.511.227-.784-.048a174 174 0 0 0-2.83-2.759c-.279-.264-.26-.494-.06-.794.576-.859 1.119-1.739 1.705-2.592.225-.327.275-.6.053-.939-.176-.271-.596-1.162-.725-1.45-.27-.602-.61-.586-1.498-.541-.786.04-1.578-.024-2.367-.027-.362 0-.624-.069-.69-.497-.201-1.282-.413-2.56-.645-3.837-.078-.42.056-.628.454-.77.955-.337 1.895-.725 2.847-1.068.372-.133.49-.374.607-.735.5-1.538.15-2.678-1.345-3.44-.48-.244-.865-.667-1.306-.99-.262-.19-.3-.396-.158-.677.6-1.196 1.199-2.392 1.782-3.596.171-.35.415-.38.752-.286 1.032.291 2.073.556 3.1.861.276.08.466.043.65-.16.137-.15.988-.824 1.153-.934.878-.74.546-1.292-.01-2.512-.26-.564-.356-1.204-.546-1.803-.096-.308-.013-.503.267-.648 1.207-.623 2.416-1.244 3.615-1.883.305-.163.476-.061.663.177.64.813 1.306 1.602 1.93 2.426.27.359.566.377.986.377 1.654.006 2.531-.794 2.81-2.394.088-.511.352-.99.526-1.487.097-.276.268-.372.56-.327 1.342.206 2.685.407 4.031.594.375.054.433.289.447.602.045 1.011.12 2.022.147 3.034.01.396.144.655.508.805.188.078.367.174.549.265q1.44.709 2.771-.225c.549-.382 1.116-.74 1.654-1.137.297-.217.519-.222.789.048q1.4 1.394 2.833 2.758c.292.279.22.52.032.8-.57.862-1.115 1.742-1.701 2.593-.23.331-.247.61-.035.942.163.254.332.521.417.807.297.993.99 1.226 1.937 1.164.784-.05 1.578.024 2.368.035.283.005.465.12.516.407.235 1.377.465 2.758.704 4.136.064.371-.206.441-.45.535-.982.38-1.964.767-2.953 1.129-.348.125-.468.342-.573.69-.433 1.458-.23 2.614 1.27 3.355.517.254.932.714 1.405 1.062.279.206.322.412.161.725-.591 1.155-1.161 2.319-1.73 3.483-.148.302-.32.527-.798.342z"
fill="#ffd300"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M28.625 101.005c.8-5.428-2.878-10.385-8.298-11.177-5.354-.781-10.354 2.948-11.143 8.307-.79 5.353 2.935 10.348 8.304 11.148a9.79 9.79 0 0 0 11.14-8.278z"
fill="#fff"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M24.644 100.414a5.77 5.77 0 0 0-4.898-6.598c-3.16-.463-6.113 1.74-6.578 4.904-.466 3.16 1.73 6.11 4.9 6.581a5.78 5.78 0 0 0 6.576-4.887Z"
fill="#fff0e5"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".535"
/>
<path
d="m352.818 159.605-5.228-5.196-3.841 3.698-4.471-14.254a.2.2 0 0 1 .246-.252l14.744 4.382-4.621 4.447 5.182 5.15-2.014 2.025z"
fill="#10162f"
stroke="#10162f"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth=".535"
/>
<path
d="m353.155 158.176-5.228-5.195-3.842 3.697-4.47-14.254a.2.2 0 0 1 .246-.251l14.744 4.382-4.621 4.446 5.182 5.15-2.014 2.025z"
fill="#fff"
stroke="#10162f"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth=".535"
/>
<path
d="M365.276 68.236v-40.18c0-15.348-12.44-27.788-27.788-27.788S309.7 12.708 309.7 28.056v40.18z"
fill="#10162f"
/>
<path
d="M359.778 68.236v-40.18c0-15.348-12.44-27.788-27.788-27.788s-27.788 12.44-27.788 27.788v40.18z"
fill="#fff0e5"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".535"
/>
<path
d="M298.488 81.01a5.637 5.637 0 0 1 6.701 3.714 27.2 27.2 0 0 0 7.52-5.618 5.634 5.634 0 0 1 5.758-9.629c.323-.99.588-2.004.786-3.044.396-2.076.535-4.139.447-6.156a5.636 5.636 0 0 1-2.852-10.779 26 26 0 0 0-5.514-7.252 5.636 5.636 0 0 1-7.103 1.051 5.63 5.63 0 0 1-2.429-6.603 26 26 0 0 0-3.301-.826 25.5 25.5 0 0 0-5.602-.39 5.637 5.637 0 0 1-10.557 2.715 26.8 26.8 0 0 0-7.239 5.246 5.63 5.63 0 0 1 .781 6.843 5.63 5.63 0 0 1-6.635 2.419 25 25 0 0 0-1.15 4.363 24.3 24.3 0 0 0-.334 4.559 5.636 5.636 0 0 1 2.613 10.754 27.7 27.7 0 0 0 5.268 7.448 5.636 5.636 0 0 1 9.366 6.116c1.319.498 2.692.89 4.104 1.16 1.731.333 3.467.466 5.187.418a5.635 5.635 0 0 1 4.19-6.511z"
fill="#f966ff"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M293.723 75.443c7.712 0 13.964-6.253 13.964-13.965 0-7.713-6.252-13.965-13.964-13.965s-13.965 6.252-13.965 13.965c0 7.712 6.252 13.965 13.965 13.965Z"
fill="#fff"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M293.193 66.376c-2.94-.353-4.88-2.782-4.508-5.64.364-2.787 3.012-4.826 5.768-4.435 2.587.366 4.607 2.932 4.369 5.554-.255 2.817-2.804 4.864-5.632 4.521z"
fill="#f966ff"
stroke="#10162f"
strokeWidth=".535"
/>
<path
d="M428.099 120.174c-1.062-.284-2.247-.573-3.411-.923-.396-.121-.634-.035-.912.232q-1.803 1.734-1.102 4.134c.168.572.321 1.153.506 1.72.12.372.029.602-.324.781a231 231 0 0 0-3.978 2.068c-.38.203-.616.123-.875-.206-.738-.942-1.517-1.848-2.253-2.79-.243-.311-.492-.404-.883-.356-2.418.297-2.421.289-3.269 2.59-.214.58-.43 1.163-.626 1.752-.123.372-.345.495-.73.433-1.477-.23-2.954-.457-4.436-.65-.5-.064-.572-.369-.591-.762-.048-1.054-.115-2.111-.139-3.165-.013-.589-.27-.894-.771-1.233-1.372-.934-2.581-1.028-3.822.211-.463.463-1.097.752-1.632 1.15-.335.249-.581.257-.891-.053a186 186 0 0 0-3.211-3.128c-.315-.299-.294-.561-.066-.901.652-.974 1.268-1.972 1.931-2.938.254-.369.313-.679.062-1.064-.201-.308-.675-1.317-.822-1.646-.305-.682-.69-.663-1.699-.612-.89.045-1.789-.027-2.685-.032-.41 0-.707-.081-.784-.565a172 172 0 0 0-.731-4.35c-.088-.479.062-.714.514-.872 1.083-.383 2.146-.821 3.229-1.209.42-.15.556-.423.69-.835.567-1.744.169-3.039-1.527-3.9-.543-.276-.98-.758-1.482-1.121-.297-.217-.34-.447-.18-.768.68-1.356 1.359-2.713 2.023-4.077.192-.399.471-.431.851-.324 1.171.332 2.351.631 3.518.977.313.093.527.05.735-.182.153-.172 1.121-.934 1.308-1.06.996-.84.621-1.466-.01-2.846-.295-.642-.404-1.365-.618-2.044-.11-.348-.014-.57.302-.733 1.367-.706 2.737-1.413 4.099-2.135.345-.185.54-.07.754.2.725.924 1.482 1.82 2.188 2.753.308.407.642.428 1.121.428 1.873.006 2.871-.898 3.184-2.715.099-.578.399-1.12.596-1.685.11-.31.305-.42.635-.372q2.284.351 4.572.674c.425.059.489.329.505.682.051 1.148.137 2.293.169 3.44.013.45.166.744.578.913.211.088.414.198.62.3q1.632.804 3.141-.255c.621-.433 1.263-.84 1.875-1.287.337-.246.589-.251.897.054a193 193 0 0 0 3.213 3.127c.331.316.248.589.037.907-.647.98-1.265 1.975-1.931 2.938-.26.377-.279.69-.038 1.07.185.289.377.594.474.917.337 1.127 1.121 1.389 2.196 1.319.891-.059 1.79.027 2.683.04.321.006.53.137.584.461.267 1.562.527 3.127.797 4.689.072.423-.233.501-.509.608-1.115.43-2.225.872-3.349 1.278-.393.145-.53.388-.647.784-.493 1.654-.26 2.964 1.439 3.805.586.288 1.054.807 1.592 1.203.315.233.364.466.184.822-.669 1.308-1.316 2.63-1.963 3.951-.169.343-.362.599-.902.388z"
fill="#fff0e5"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".607"
/>
<path
d="M422.094 110.122c.909-6.155-3.264-11.776-9.412-12.675-6.07-.888-11.742 3.341-12.638 9.42-.894 6.07 3.328 11.736 9.417 12.64 6.091.907 11.731-3.285 12.633-9.387z"
fill="#fff"
stroke="#10162f"
strokeWidth=".607"
/>
<path
d="M417.58 109.451c.536-3.636-1.926-6.953-5.553-7.483-3.583-.524-6.932 1.972-7.462 5.562-.527 3.582 1.964 6.929 5.559 7.464a6.55 6.55 0 0 0 7.456-5.541z"
fill="#fff0e5"
stroke="#10162f"
strokeMiterlimit="10"
strokeWidth=".607"
/>
</svg>
);
Loading