diff options
40 files changed, 1393 insertions, 43 deletions
diff --git a/packages/console/app/public/opencode-brand-assets.zip b/packages/console/app/public/opencode-brand-assets.zip Binary files differnew file mode 100644 index 000000000..1a145bbe0 --- /dev/null +++ b/packages/console/app/public/opencode-brand-assets.zip diff --git a/packages/console/app/src/asset/brand/opencode-brand-assets.zip b/packages/console/app/src/asset/brand/opencode-brand-assets.zip Binary files differnew file mode 100644 index 000000000..85d3635ac --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-brand-assets.zip diff --git a/packages/console/app/src/asset/brand/opencode-logo-dark.png b/packages/console/app/src/asset/brand/opencode-logo-dark.png Binary files differnew file mode 100644 index 000000000..cf868c8e8 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-logo-dark.png diff --git a/packages/console/app/src/asset/brand/opencode-logo-dark.svg b/packages/console/app/src/asset/brand/opencode-logo-dark.svg new file mode 100644 index 000000000..c28babff1 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-logo-dark.svg @@ -0,0 +1,16 @@ +<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1401_86283)"> +<mask id="mask0_1401_86283" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300"> +<path d="M240 0H0V300H240V0Z" fill="white"/> +</mask> +<g mask="url(#mask0_1401_86283)"> +<path d="M180 240H60V120H180V240Z" fill="#4B4646"/> +<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#F1ECEC"/> +</g> +</g> +<defs> +<clipPath id="clip0_1401_86283"> +<rect width="240" height="300" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/brand/opencode-logo-light.png b/packages/console/app/src/asset/brand/opencode-logo-light.png Binary files differnew file mode 100644 index 000000000..a2ffc9b90 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-logo-light.png diff --git a/packages/console/app/src/asset/brand/opencode-logo-light.svg b/packages/console/app/src/asset/brand/opencode-logo-light.svg new file mode 100644 index 000000000..7ed0af003 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-logo-light.svg @@ -0,0 +1,16 @@ +<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1401_86274)"> +<mask id="mask0_1401_86274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300"> +<path d="M240 0H0V300H240V0Z" fill="white"/> +</mask> +<g mask="url(#mask0_1401_86274)"> +<path d="M180 240H60V120H180V240Z" fill="#CFCECD"/> +<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#211E1E"/> +</g> +</g> +<defs> +<clipPath id="clip0_1401_86274"> +<rect width="240" height="300" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-dark.png b/packages/console/app/src/asset/brand/opencode-wordmark-dark.png Binary files differnew file mode 100644 index 000000000..f8e2c3f40 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-dark.png diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-dark.svg b/packages/console/app/src/asset/brand/opencode-wordmark-dark.svg new file mode 100644 index 000000000..a242eeeab --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-dark.svg @@ -0,0 +1,30 @@ +<svg width="641" height="115" viewBox="0 0 641 115" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1401_86292)"> +<mask id="mask0_1401_86292" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="641" height="115"> +<path d="M640.714 0H0V115H640.714V0Z" fill="white"/> +</mask> +<g mask="url(#mask0_1401_86292)"> +<path d="M49.2868 82.1433H16.4297V49.2861H49.2868V82.1433Z" fill="#4B4646"/> +<path d="M49.2857 32.8573H16.4286V82.143H49.2857V32.8573ZM65.7143 98.5716H0V16.4287H65.7143V98.5716Z" fill="#B7B1B1"/> +<path d="M131.427 82.1433H98.5703V49.2861H131.427V82.1433Z" fill="#4B4646"/> +<path d="M98.5692 82.143H131.426V32.8573H98.5692V82.143ZM147.855 98.5716H98.5692V115H82.1406V16.4287H147.855V98.5716Z" fill="#B7B1B1"/> +<path d="M229.997 65.7139V82.1424H180.711V65.7139H229.997Z" fill="#4B4646"/> +<path d="M230.003 65.7144H180.718V82.143H230.003V98.5716H164.289V16.4287H230.003V65.7144ZM180.718 49.2859H213.575V32.8573H180.718V49.2859Z" fill="#B7B1B1"/> +<path d="M295.717 98.5718H262.859V49.2861H295.717V98.5718Z" fill="#4B4646"/> +<path d="M295.715 32.8573H262.858V98.5716H246.43V16.4287H295.715V32.8573ZM312.144 98.5716H295.715V32.8573H312.144V98.5716Z" fill="#B7B1B1"/> +<path d="M394.286 82.1433H345V49.2861H394.286V82.1433Z" fill="#4B4646"/> +<path d="M394.285 32.8573H344.999V82.143H394.285V98.5716H328.57V16.4287H394.285V32.8573Z" fill="#F1ECEC"/> +<path d="M459.998 82.1433H427.141V49.2861H459.998V82.1433Z" fill="#4B4646"/> +<path d="M459.997 32.8573H427.14V82.143H459.997V32.8573ZM476.425 98.5716H410.711V16.4287H476.425V98.5716Z" fill="#F1ECEC"/> +<path d="M542.146 82.1433H509.289V49.2861H542.146V82.1433Z" fill="#4B4646"/> +<path d="M542.145 32.8571H509.288V82.1429H542.145V32.8571ZM558.574 98.5714H492.859V16.4286H542.145V0H558.574V98.5714Z" fill="#F1ECEC"/> +<path d="M640.715 65.7139V82.1424H591.43V65.7139H640.715Z" fill="#4B4646"/> +<path d="M591.429 32.8573V49.2859H624.286V32.8573H591.429ZM640.714 65.7144H591.429V82.143H640.714V98.5716H575V16.4287H640.714V65.7144Z" fill="#F1ECEC"/> +</g> +</g> +<defs> +<clipPath id="clip0_1401_86292"> +<rect width="640.714" height="115" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-light.png b/packages/console/app/src/asset/brand/opencode-wordmark-light.png Binary files differnew file mode 100644 index 000000000..f53607f71 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-light.png diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-light.svg b/packages/console/app/src/asset/brand/opencode-wordmark-light.svg new file mode 100644 index 000000000..24a36c7ce --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-light.svg @@ -0,0 +1,30 @@ +<svg width="640" height="115" viewBox="0 0 640 115" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1401_86330)"> +<mask id="mask0_1401_86330" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="640" height="115"> +<path d="M640 0H0V115H640V0Z" fill="white"/> +</mask> +<g mask="url(#mask0_1401_86330)"> +<path d="M49.2346 82.1433H16.4141V49.2861H49.2346V82.1433Z" fill="#CFCECD"/> +<path d="M49.2308 32.8573H16.4103V82.143H49.2308V32.8573ZM65.641 98.5716H0V16.4287H65.641V98.5716Z" fill="#656363"/> +<path d="M131.281 82.1433H98.4609V49.2861H131.281V82.1433Z" fill="#CFCECD"/> +<path d="M98.4649 82.143H131.285V32.8573H98.4649V82.143ZM147.696 98.5716H98.4649V115H82.0547V16.4287H147.696V98.5716Z" fill="#656363"/> +<path d="M229.746 65.7139V82.1424H180.516V65.7139H229.746Z" fill="#CFCECD"/> +<path d="M229.743 65.7144H180.512V82.143H229.743V98.5716H164.102V16.4287H229.743V65.7144ZM180.512 49.2859H213.332V32.8573H180.512V49.2859Z" fill="#656363"/> +<path d="M295.383 98.5718H262.562V49.2861H295.383V98.5718Z" fill="#CFCECD"/> +<path d="M295.387 32.8573H262.567V98.5716H246.156V16.4287H295.387V32.8573ZM311.797 98.5716H295.387V32.8573H311.797V98.5716Z" fill="#656363"/> +<path d="M393.848 82.1433H344.617V49.2861H393.848V82.1433Z" fill="#CFCECD"/> +<path d="M393.844 32.8573H344.613V82.143H393.844V98.5716H328.203V16.4287H393.844V32.8573Z" fill="#211E1E"/> +<path d="M459.485 82.1433H426.664V49.2861H459.485V82.1433Z" fill="#CFCECD"/> +<path d="M459.489 32.8573H426.668V82.143H459.489V32.8573ZM475.899 98.5716H410.258V16.4287H475.899V98.5716Z" fill="#211E1E"/> +<path d="M541.539 82.1433H508.719V49.2861H541.539V82.1433Z" fill="#CFCECD"/> +<path d="M541.535 32.8571H508.715V82.1428H541.535V32.8571ZM557.946 98.5714H492.305V16.4286H541.535V0H557.946V98.5714Z" fill="#211E1E"/> +<path d="M639.996 65.7139V82.1424H590.766V65.7139H639.996Z" fill="#CFCECD"/> +<path d="M590.77 32.8573V49.2859H623.59V32.8573H590.77ZM640 65.7144H590.77V82.143H640V98.5716H574.359V16.4287H640V65.7144Z" fill="#211E1E"/> +</g> +</g> +<defs> +<clipPath id="clip0_1401_86330"> +<rect width="640" height="115" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.png b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.png Binary files differnew file mode 100644 index 000000000..945d4eb39 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.png diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg new file mode 100644 index 000000000..afc323e4d --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg @@ -0,0 +1,22 @@ +<svg width="641" height="115" viewBox="0 0 641 115" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1401_86315)"> +<mask id="mask0_1401_86315" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="641" height="115"> +<path d="M640.714 0H0V115H640.714V0Z" fill="white"/> +</mask> +<g mask="url(#mask0_1401_86315)"> +<path d="M49.2857 32.8573H16.4286V82.143H49.2857V32.8573ZM65.7143 98.5716H0V16.4287H65.7143V98.5716Z" fill="white"/> +<path d="M98.5692 82.143H131.426V32.8573H98.5692V82.143ZM147.855 98.5716H98.5692V115H82.1406V16.4287H147.855V98.5716Z" fill="white"/> +<path d="M230.003 65.7144H180.718V82.143H230.003V98.5716H164.289V16.4287H230.003V65.7144ZM180.718 49.2859H213.575V32.8573H180.718V49.2859Z" fill="white"/> +<path d="M295.715 32.8573H262.858V98.5716H246.43V16.4287H295.715V32.8573ZM312.144 98.5716H295.715V32.8573H312.144V98.5716Z" fill="white"/> +<path d="M394.285 32.8573H344.999V82.143H394.285V98.5716H328.57V16.4287H394.285V32.8573Z" fill="white"/> +<path d="M459.997 32.8573H427.14V82.143H459.997V32.8573ZM476.425 98.5716H410.711V16.4287H476.425V98.5716Z" fill="white"/> +<path d="M542.145 32.8571H509.288V82.1429H542.145V32.8571ZM558.574 98.5714H492.859V16.4286H542.145V0H558.574V98.5714Z" fill="white"/> +<path d="M591.429 32.8573V49.2859H624.286V32.8573H591.429ZM640.714 65.7144H591.429V82.143H640.714V98.5716H575V16.4287H640.714V65.7144Z" fill="white"/> +</g> +</g> +<defs> +<clipPath id="clip0_1401_86315"> +<rect width="640.714" height="115" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.png b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.png Binary files differnew file mode 100644 index 000000000..6c1d05704 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.png diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg new file mode 100644 index 000000000..29be24534 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg @@ -0,0 +1,22 @@ +<svg width="640" height="115" viewBox="0 0 640 115" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1401_86353)"> +<mask id="mask0_1401_86353" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="640" height="115"> +<path d="M640 0H0V115H640V0Z" fill="white"/> +</mask> +<g mask="url(#mask0_1401_86353)"> +<path d="M49.2308 32.8573H16.4103V82.143H49.2308V32.8573ZM65.641 98.5716H0V16.4287H65.641V98.5716Z" fill="black"/> +<path d="M98.4649 82.143H131.285V32.8573H98.4649V82.143ZM147.696 98.5716H98.4649V115H82.0547V16.4287H147.696V98.5716Z" fill="black"/> +<path d="M229.743 65.7144H180.512V82.143H229.743V98.5716H164.102V16.4287H229.743V65.7144ZM180.512 49.2859H213.332V32.8573H180.512V49.2859Z" fill="black"/> +<path d="M295.387 32.8573H262.567V98.5716H246.156V16.4287H295.387V32.8573ZM311.797 98.5716H295.387V32.8573H311.797V98.5716Z" fill="black"/> +<path d="M393.844 32.8573H344.613V82.143H393.844V98.5716H328.203V16.4287H393.844V32.8573Z" fill="black"/> +<path d="M459.489 32.8573H426.668V82.143H459.489V32.8573ZM475.899 98.5716H410.258V16.4287H475.899V98.5716Z" fill="black"/> +<path d="M541.535 32.8571H508.715V82.1428H541.535V32.8571ZM557.946 98.5714H492.305V16.4286H541.535V0H557.946V98.5714Z" fill="black"/> +<path d="M590.77 32.8573V49.2859H623.59V32.8573H590.77ZM640 65.7144H590.77V82.143H640V98.5716H574.359V16.4287H640V65.7144Z" fill="black"/> +</g> +</g> +<defs> +<clipPath id="clip0_1401_86353"> +<rect width="640" height="115" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/brand/preview-opencode-dark.png b/packages/console/app/src/asset/brand/preview-opencode-dark.png Binary files differnew file mode 100644 index 000000000..3c19242a8 --- /dev/null +++ b/packages/console/app/src/asset/brand/preview-opencode-dark.png diff --git a/packages/console/app/src/asset/brand/preview-opencode-logo-dark.png b/packages/console/app/src/asset/brand/preview-opencode-logo-dark.png Binary files differnew file mode 100644 index 000000000..d1ef71372 --- /dev/null +++ b/packages/console/app/src/asset/brand/preview-opencode-logo-dark.png diff --git a/packages/console/app/src/asset/brand/preview-opencode-logo-light.png b/packages/console/app/src/asset/brand/preview-opencode-logo-light.png Binary files differnew file mode 100644 index 000000000..d77bbc38a --- /dev/null +++ b/packages/console/app/src/asset/brand/preview-opencode-logo-light.png diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-dark.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-dark.png Binary files differnew file mode 100644 index 000000000..58bcf936f --- /dev/null +++ b/packages/console/app/src/asset/brand/preview-opencode-wordmark-dark.png diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-light.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-light.png Binary files differnew file mode 100644 index 000000000..b39b7997d --- /dev/null +++ b/packages/console/app/src/asset/brand/preview-opencode-wordmark-light.png diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-dark.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-dark.png Binary files differnew file mode 100644 index 000000000..2910c7a28 --- /dev/null +++ b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-dark.png diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-light.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-light.png Binary files differnew file mode 100644 index 000000000..6ab84aa58 --- /dev/null +++ b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-light.png diff --git a/packages/console/app/src/asset/lander/brand-assets-dark.svg b/packages/console/app/src/asset/lander/brand-assets-dark.svg new file mode 100644 index 000000000..93da2462d --- /dev/null +++ b/packages/console/app/src/asset/lander/brand-assets-dark.svg @@ -0,0 +1,10 @@ +<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="url(#paint0_linear_1311_94922)" stroke="#F1ECEC"/> +<path d="M3 0V26M19 0V26M15 0V26M7 0V26M0 3H22M0 7H22M0 19H22M0 23H22" stroke="#4B4646" stroke-opacity="0.4"/> +<defs> +<linearGradient id="paint0_linear_1311_94922" x1="11" y1="3" x2="11" y2="23" gradientUnits="userSpaceOnUse"> +<stop stop-color="#1B1818"/> +<stop offset="1" stop-color="#2D2828"/> +</linearGradient> +</defs> +</svg> diff --git a/packages/console/app/src/asset/lander/brand-assets-light.svg b/packages/console/app/src/asset/lander/brand-assets-light.svg new file mode 100644 index 000000000..aa9d115bf --- /dev/null +++ b/packages/console/app/src/asset/lander/brand-assets-light.svg @@ -0,0 +1,10 @@ +<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="url(#paint0_linear_1311_94913)" stroke="#8E8B8B"/> +<path d="M3 0V26M19 0V26M15 0V26M7 0V26M0 3H22M0 7H22M0 19H22M0 23H22" stroke="#110000" stroke-opacity="0.121569"/> +<defs> +<linearGradient id="paint0_linear_1311_94913" x1="11" y1="3" x2="11" y2="23" gradientUnits="userSpaceOnUse"> +<stop stop-color="#F9F8F8"/> +<stop offset="1" stop-color="#E9E8E8"/> +</linearGradient> +</defs> +</svg> diff --git a/packages/console/app/src/asset/lander/brand.png b/packages/console/app/src/asset/lander/brand.png Binary files differnew file mode 100644 index 000000000..9c1653ed0 --- /dev/null +++ b/packages/console/app/src/asset/lander/brand.png diff --git a/packages/console/app/src/asset/lander/logo-dark.svg b/packages/console/app/src/asset/lander/logo-dark.svg new file mode 100644 index 000000000..d73830f93 --- /dev/null +++ b/packages/console/app/src/asset/lander/logo-dark.svg @@ -0,0 +1,11 @@ +<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1311_94916)"> +<path d="M15 19H7V11H15V19Z" fill="#4B4646"/> +<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="#F1ECEC"/> +</g> +<defs> +<clipPath id="clip0_1311_94916"> +<rect width="16" height="20" fill="white" transform="translate(3 3)"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/lander/logo-light.svg b/packages/console/app/src/asset/lander/logo-light.svg new file mode 100644 index 000000000..7394bf432 --- /dev/null +++ b/packages/console/app/src/asset/lander/logo-light.svg @@ -0,0 +1,11 @@ +<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1311_94907)"> +<path d="M15 19H7V11H15V19Z" fill="#BCBBBB"/> +<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="#211E1E"/> +</g> +<defs> +<clipPath id="clip0_1311_94907"> +<rect width="16" height="20" fill="white" transform="translate(3 3)"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/lander/opencode-logo-dark.svg b/packages/console/app/src/asset/lander/opencode-logo-dark.svg new file mode 100644 index 000000000..154000aaa --- /dev/null +++ b/packages/console/app/src/asset/lander/opencode-logo-dark.svg @@ -0,0 +1,11 @@ +<svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1311_94973)"> +<path d="M24 32H8V16H24V32Z" fill="#4B4646"/> +<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#F1ECEC"/> +</g> +<defs> +<clipPath id="clip0_1311_94973"> +<rect width="32" height="40" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/lander/opencode-logo-light.svg b/packages/console/app/src/asset/lander/opencode-logo-light.svg new file mode 100644 index 000000000..c1259a77d --- /dev/null +++ b/packages/console/app/src/asset/lander/opencode-logo-light.svg @@ -0,0 +1,11 @@ +<svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1311_94969)"> +<path d="M24 32H8V16H24V32Z" fill="#BCBBBB"/> +<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#211E1E"/> +</g> +<defs> +<clipPath id="clip0_1311_94969"> +<rect width="32" height="40" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/lander/opencode-wordmark-dark.svg b/packages/console/app/src/asset/lander/opencode-wordmark-dark.svg new file mode 100644 index 000000000..822d971ad --- /dev/null +++ b/packages/console/app/src/asset/lander/opencode-wordmark-dark.svg @@ -0,0 +1,25 @@ +<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1311_95032)"> +<path d="M18 30H6V18H18V30Z" fill="#4B4646"/> +<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#B7B1B1"/> +<path d="M48 30H36V18H48V30Z" fill="#4B4646"/> +<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#B7B1B1"/> +<path d="M84 24V30H66V24H84Z" fill="#4B4646"/> +<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#B7B1B1"/> +<path d="M108 36H96V18H108V36Z" fill="#4B4646"/> +<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#B7B1B1"/> +<path d="M144 30H126V18H144V30Z" fill="#4B4646"/> +<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#F1ECEC"/> +<path d="M168 30H156V18H168V30Z" fill="#4B4646"/> +<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#F1ECEC"/> +<path d="M198 30H186V18H198V30Z" fill="#4B4646"/> +<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#F1ECEC"/> +<path d="M234 24V30H216V24H234Z" fill="#4B4646"/> +<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#F1ECEC"/> +</g> +<defs> +<clipPath id="clip0_1311_95032"> +<rect width="234" height="42" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/lander/opencode-wordmark-light.svg b/packages/console/app/src/asset/lander/opencode-wordmark-light.svg new file mode 100644 index 000000000..6d98af700 --- /dev/null +++ b/packages/console/app/src/asset/lander/opencode-wordmark-light.svg @@ -0,0 +1,25 @@ +<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_1311_95049)"> +<path d="M18 30H6V18H18V30Z" fill="#CFCECD"/> +<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#656363"/> +<path d="M48 30H36V18H48V30Z" fill="#CFCECD"/> +<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#656363"/> +<path d="M84 24V30H66V24H84Z" fill="#CFCECD"/> +<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#656363"/> +<path d="M108 36H96V18H108V36Z" fill="#CFCECD"/> +<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#656363"/> +<path d="M144 30H126V18H144V30Z" fill="#CFCECD"/> +<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#211E1E"/> +<path d="M168 30H156V18H168V30Z" fill="#CFCECD"/> +<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#211E1E"/> +<path d="M198 30H186V18H198V30Z" fill="#CFCECD"/> +<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#211E1E"/> +<path d="M234 24V30H216V24H234Z" fill="#CFCECD"/> +<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#211E1E"/> +</g> +<defs> +<clipPath id="clip0_1311_95049"> +<rect width="234" height="42" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/packages/console/app/src/asset/lander/wordmark-dark.svg b/packages/console/app/src/asset/lander/wordmark-dark.svg new file mode 100644 index 000000000..42f8e22a6 --- /dev/null +++ b/packages/console/app/src/asset/lander/wordmark-dark.svg @@ -0,0 +1,3 @@ +<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M4.33203 7.99967V6.33301H10.9987M17.6654 7.99967V6.33301H10.9987M10.9987 6.33301V19.6663M10.9987 19.6663H9.33203M10.9987 19.6663H12.6654" stroke="#F1ECEC" stroke-width="2" stroke-linecap="square"/> +</svg> diff --git a/packages/console/app/src/asset/lander/wordmark-light.svg b/packages/console/app/src/asset/lander/wordmark-light.svg new file mode 100644 index 000000000..398278da6 --- /dev/null +++ b/packages/console/app/src/asset/lander/wordmark-light.svg @@ -0,0 +1,3 @@ +<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M4.33203 7.99967V6.33301H10.9987M17.6654 7.99967V6.33301H10.9987M10.9987 6.33301V19.6663M10.9987 19.6663H9.33203M10.9987 19.6663H12.6654" stroke="black" stroke-width="2" stroke-linecap="square"/> +</svg> diff --git a/packages/console/app/src/component/header-context-menu.css b/packages/console/app/src/component/header-context-menu.css new file mode 100644 index 000000000..149686e72 --- /dev/null +++ b/packages/console/app/src/component/header-context-menu.css @@ -0,0 +1,64 @@ +.context-menu { + position: fixed; + z-index: 1000; + min-width: 160px; + border-radius: 8px; + background-color: var(--color-background); + box-shadow: + 0 0 0 1px rgba(19, 16, 16, 0.08), + 0 6px 8px -4px rgba(19, 16, 16, 0.12), + 0 4px 3px -2px rgba(19, 16, 16, 0.12), + 0 1px 2px -1px rgba(19, 16, 16, 0.12); + padding: 6px; + + @media (prefers-color-scheme: dark) { + box-shadow: 0 0 0 1px rgba(247, 237, 237, 0.1); + } +} + +.context-menu-item { + display: flex; + gap: 12px; + width: 100%; + padding: 8px 16px 8px 8px; + font-weight: 500; + cursor: pointer; + background: none; + border: none; + align-items: center; + color: var(--color-text); + font-size: var(--font-size-sm); + text-align: left; + border-radius: 2px; + transition: background-color 0.2s ease; + + .context-menu-item [data-slot="copy light"], + .context-menu-item [data-slot="copy dark"] { + width: 22px !important; + height: 26px !important; + } + + [data-slot="copy dark"] { + display: none; + } + + @media (prefers-color-scheme: dark) { + [data-slot="copy light"] { + display: none; + } + [data-slot="copy dark"] { + display: block; + } + } + + &:hover { + background-color: var(--color-background-weak-hover); + color: var(--color-text-strong); + } +} + +.context-menu-divider { + border: none; + border-top: 1px solid var(--color-border); + margin: var(--space-1) 0; +} diff --git a/packages/console/app/src/component/header.tsx b/packages/console/app/src/component/header.tsx index e9298df5a..e1cea636a 100644 --- a/packages/console/app/src/component/header.tsx +++ b/packages/console/app/src/component/header.tsx @@ -1,9 +1,37 @@ import logoLight from "../asset/logo-ornate-light.svg" import logoDark from "../asset/logo-ornate-dark.svg" +import copyLogoLight from "../asset/lander/logo-light.svg" +import copyLogoDark from "../asset/lander/logo-dark.svg" +import copyWordmarkLight from "../asset/lander/wordmark-light.svg" +import copyWordmarkDark from "../asset/lander/wordmark-dark.svg" +import copyBrandAssetsLight from "../asset/lander/brand-assets-light.svg" +import copyBrandAssetsDark from "../asset/lander/brand-assets-dark.svg" + +// SVG files for copying (separate from button icons) +// Replace these with your actual SVG files for copying +import copyLogoSvgLight from "../asset/lander/opencode-logo-light.svg" +import copyLogoSvgDark from "../asset/lander/opencode-logo-dark.svg" +import copyWordmarkSvgLight from "../asset/lander/opencode-wordmark-light.svg" +import copyWordmarkSvgDark from "../asset/lander/opencode-wordmark-dark.svg" import { A, createAsync } from "@solidjs/router" import { createMemo, Match, Show, Switch } from "solid-js" import { createStore } from "solid-js/store" import { github } from "~/lib/github" +import { createEffect, onCleanup } from "solid-js" +import "./header-context-menu.css" + +const isDarkMode = () => window.matchMedia("(prefers-color-scheme: dark)").matches + +const fetchSvgContent = async (svgPath: string): Promise<string> => { + try { + const response = await fetch(svgPath) + const svgText = await response.text() + return svgText + } catch (err) { + console.error("Failed to fetch SVG content:", err) + throw err + } +} export function Header(props: { zen?: boolean }) { const githubData = createAsync(() => github()) @@ -18,14 +46,134 @@ export function Header(props: { zen?: boolean }) { const [store, setStore] = createStore({ mobileMenuOpen: false, + contextMenuOpen: false, + contextMenuPosition: { x: 0, y: 0 }, + }) + + createEffect(() => { + const handleClickOutside = () => { + setStore("contextMenuOpen", false) + } + + const handleContextMenu = (event: MouseEvent) => { + event.preventDefault() + setStore("contextMenuOpen", false) + } + + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === "Escape") { + setStore("contextMenuOpen", false) + } + } + + if (store.contextMenuOpen) { + document.addEventListener("click", handleClickOutside) + document.addEventListener("contextmenu", handleContextMenu) + document.addEventListener("keydown", handleKeyDown) + onCleanup(() => { + document.removeEventListener("click", handleClickOutside) + document.removeEventListener("contextmenu", handleContextMenu) + document.removeEventListener("keydown", handleKeyDown) + }) + } }) + const handleLogoContextMenu = (event: MouseEvent) => { + event.preventDefault() + const logoElement = (event.currentTarget as HTMLElement).querySelector("a") + if (logoElement) { + const rect = logoElement.getBoundingClientRect() + setStore("contextMenuPosition", { + x: rect.left - 16, + y: rect.bottom + 8, + }) + } + setStore("contextMenuOpen", true) + } + + const copyWordmarkToClipboard = async () => { + try { + const isDark = isDarkMode() + const wordmarkSvgPath = isDark ? copyWordmarkSvgDark : copyWordmarkSvgLight + const wordmarkSvg = await fetchSvgContent(wordmarkSvgPath) + await navigator.clipboard.writeText(wordmarkSvg) + } catch (err) { + console.error("Failed to copy wordmark to clipboard:", err) + } + } + + const copyLogoToClipboard = async () => { + try { + const isDark = isDarkMode() + const logoSvgPath = isDark ? copyLogoSvgDark : copyLogoSvgLight + const logoSvg = await fetchSvgContent(logoSvgPath) + await navigator.clipboard.writeText(logoSvg) + } catch (err) { + console.error("Failed to copy logo to clipboard:", err) + } + } + return ( <section data-component="top"> - <A href="/"> - <img data-slot="logo light" src={logoLight} alt="opencode logo light" /> - <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" /> - </A> + <div onContextMenu={handleLogoContextMenu}> + <A href="/"> + <img data-slot="logo light" src={logoLight} alt="opencode logo light" /> + <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" /> + </A> + </div> + + <Show when={store.contextMenuOpen}> + <div + class="context-menu" + style={`left: ${store.contextMenuPosition.x}px; top: ${store.contextMenuPosition.y}px;`} + > + <button class="context-menu-item" onClick={copyLogoToClipboard}> + <img + data-slot="copy light" + src={copyLogoLight} + style="width: 22px; height: 26px;" + alt="Logo" + /> + <img + data-slot="copy dark" + src={copyLogoDark} + style="width: 22px; height: 26px;" + alt="Logo" + /> + Copy logo as SVG + </button> + <button class="context-menu-item" onClick={copyWordmarkToClipboard}> + <img + data-slot="copy light" + src={copyWordmarkLight} + style="width: 22px; height: 26px;" + alt="Wordmark" + /> + <img + data-slot="copy dark" + src={copyWordmarkDark} + style="width: 22px; height: 26px;" + alt="Wordmark" + /> + Copy wordmark as SVG + </button> + <button class="context-menu-item" onClick={() => (window.location.href = "/brand")}> + <img + data-slot="copy light" + src={copyBrandAssetsLight} + style="width: 22px; height: 26px;" + alt="Brand Assets" + /> + <img + data-slot="copy dark" + src={copyBrandAssetsDark} + style="width: 22px; height: 26px;" + alt="Brand Assets" + /> + Brand assets + </button> + </div> + </Show> <nav data-component="nav-desktop"> <ul> <li> diff --git a/packages/console/app/src/component/legal.tsx b/packages/console/app/src/component/legal.tsx index d692e4622..c055977e3 100644 --- a/packages/console/app/src/component/legal.tsx +++ b/packages/console/app/src/component/legal.tsx @@ -1,9 +1,14 @@ +import { A } from "@solidjs/router" + export function Legal() { return ( <div data-component="legal"> <span> ©{new Date().getFullYear()} <a href="https://anoma.ly">Anomaly</a> </span> + <span> + <A href="/brand">Brand</A> + </span> </div> ) } diff --git a/packages/console/app/src/routes/brand/index.css b/packages/console/app/src/routes/brand/index.css new file mode 100644 index 000000000..5a445f298 --- /dev/null +++ b/packages/console/app/src/routes/brand/index.css @@ -0,0 +1,529 @@ +::selection { + background: var(--color-background-interactive); + color: var(--color-text-strong); + + @media (prefers-color-scheme: dark) { + background: var(--color-background-interactive); + color: var(--color-text-inverted); + } +} + +[data-page="enterprise"] { + --color-background: hsl(0, 20%, 99%); + --color-background-weak: hsl(0, 8%, 97%); + --color-background-weak-hover: hsl(0, 8%, 94%); + --color-background-strong: hsl(0, 5%, 12%); + --color-background-strong-hover: hsl(0, 5%, 18%); + --color-background-interactive: hsl(62, 84%, 88%); + --color-background-interactive-weaker: hsl(64, 74%, 95%); + + --color-text: hsl(0, 1%, 39%); + --color-text-weak: hsl(0, 1%, 60%); + --color-text-weaker: hsl(30, 2%, 81%); + --color-text-strong: hsl(0, 5%, 12%); + --color-text-inverted: hsl(0, 20%, 99%); + --color-text-success: hsl(119, 100%, 35%); + + --color-border: hsl(30, 2%, 81%); + --color-border-weak: hsl(0, 1%, 85%); + + --color-icon: hsl(0, 1%, 55%); + --color-success: hsl(142, 76%, 36%); + + background: var(--color-background); + font-family: var(--font-mono); + color: var(--color-text); + padding-bottom: 5rem; + + @media (prefers-color-scheme: dark) { + --color-background: hsl(0, 9%, 7%); + --color-background-weak: hsl(0, 6%, 10%); + --color-background-weak-hover: hsl(0, 6%, 15%); + --color-background-strong: hsl(0, 15%, 94%); + --color-background-strong-hover: hsl(0, 15%, 97%); + --color-background-interactive: hsl(62, 100%, 90%); + --color-background-interactive-weaker: hsl(60, 20%, 8%); + + --color-text: hsl(0, 4%, 71%); + --color-text-weak: hsl(0, 2%, 49%); + --color-text-weaker: hsl(0, 3%, 28%); + --color-text-strong: hsl(0, 15%, 94%); + --color-text-inverted: hsl(0, 9%, 7%); + --color-text-success: hsl(119, 60%, 72%); + + --color-border: hsl(0, 3%, 28%); + --color-border-weak: hsl(0, 4%, 23%); + + --color-icon: hsl(10, 3%, 43%); + --color-success: hsl(142, 76%, 46%); + } + + /* Header and Footer styles - copied from index.css */ + [data-component="top"] { + padding: 24px 5rem; + height: 80px; + position: sticky; + top: 0; + display: flex; + justify-content: space-between; + align-items: center; + background: var(--color-background); + border-bottom: 1px solid var(--color-border-weak); + z-index: 10; + + @media (max-width: 60rem) { + padding: 24px 1.5rem; + } + + img { + height: 34px; + width: auto; + } + + [data-component="nav-desktop"] { + ul { + display: flex; + justify-content: space-between; + gap: 48px; + li { + display: inline-block; + a { + text-decoration: none; + span { + color: var(--color-text-weak); + } + } + a:hover { + text-decoration: underline; + text-underline-offset: 2px; + text-decoration-thickness: 1px; + } + } + } + + @media (max-width: 40rem) { + display: none; + } + } + + [data-component="nav-mobile"] { + button > svg { + color: var(--color-icon); + } + } + + [data-component="nav-mobile-toggle"] { + border: none; + background: none; + outline: none; + height: 40px; + width: 40px; + cursor: pointer; + margin-right: -8px; + } + + [data-component="nav-mobile-toggle"]:hover { + background: var(--color-background-weak); + } + + [data-component="nav-mobile"] { + display: none; + + @media (max-width: 40rem) { + display: block; + + [data-component="nav-mobile-icon"] { + cursor: pointer; + height: 40px; + width: 40px; + display: flex; + align-items: center; + justify-content: center; + } + + [data-component="nav-mobile-menu-list"] { + position: fixed; + background: var(--color-background); + top: 80px; + left: 0; + right: 0; + height: 100vh; + + ul { + list-style: none; + padding: 20px 0; + + li { + a { + text-decoration: none; + padding: 20px; + display: block; + + span { + color: var(--color-text-weak); + } + } + + a:hover { + background: var(--color-background-weak); + } + } + } + } + } + } + + [data-slot="logo dark"] { + display: none; + } + + @media (prefers-color-scheme: dark) { + [data-slot="logo light"] { + display: none; + } + [data-slot="logo dark"] { + display: block; + } + } + } + + [data-component="footer"] { + border-top: 1px solid var(--color-border-weak); + display: flex; + flex-direction: row; + + @media (max-width: 65rem) { + border-bottom: 1px solid var(--color-border-weak); + } + + [data-slot="cell"] { + flex: 1; + text-align: center; + + a { + text-decoration: none; + padding: 2rem 0; + width: 100%; + display: block; + + span { + color: var(--color-text-weak); + + @media (max-width: 40rem) { + display: none; + } + } + } + + a:hover { + background: var(--color-background-weak); + text-decoration: underline; + text-underline-offset: 2px; + text-decoration-thickness: 1px; + } + } + + [data-slot="cell"] + [data-slot="cell"] { + border-left: 1px solid var(--color-border-weak); + + @media (max-width: 40rem) { + border-left: none; + } + } + + /* Mobile: third column on its own row */ + @media (max-width: 25rem) { + flex-wrap: wrap; + + [data-slot="cell"] { + flex: 1 0 100%; + border-left: none; + border-top: 1px solid var(--color-border-weak); + } + + [data-slot="cell"]:nth-child(1) { + border-top: none; + } + } + } + + [data-component="container"] { + max-width: 67.5rem; + margin: 0 auto; + border: 1px solid var(--color-border-weak); + border-top: none; + + @media (max-width: 65rem) { + border: none; + } + } + + [data-component="content"] { + } + + [data-component="brand-content"] { + padding: 4rem 5rem; + + h2 { + font-size: 1.5rem; + font-weight: 500; + color: var(--color-text-strong); + margin-bottom: 1rem; + } + + h3 { + font-size: 1.25rem; + font-weight: 500; + color: var(--color-text-strong); + margin: 2rem 0 1rem 0; + } + + p { + line-height: 1.6; + margin-bottom: 2.5rem; + color: var(--color-text); + } + + [data-component="download-button"] { + padding: 8px 12px 8px 20px; + background: var(--color-background-strong); + color: var(--color-text-inverted); + border: none; + border-radius: 4px; + font-weight: 500; + cursor: pointer; + display: flex; + width: fit-content; + align-items: center; + gap: 12px; + transition: all 0.2s ease; + text-decoration: none; + + + &:hover:not(:disabled) { + background: var(--color-background-strong-hover); + } + + &:active { + transform: scale(0.98); + } + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } + } + + [data-component="brand-grid"] { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 4rem; + margin-bottom: 2rem; + } + + [data-component="brand-grid"] img { + width: 100%; + height: auto; + display: block; + border-radius: 4px; + border: 1px solid var(--color-border-weak); + } + + [data-component="brand-grid"] > div { + position: relative; + } + + [data-component="actions"] { + position: absolute; + background: rgba(4, 0, 0, 0.08); + border-radius: 4px; + bottom: 0; + right: 0; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + opacity: 0; + transition: opacity 0.2s ease; + + @media (max-width: 40rem) { + position: static; + opacity: 1; + background: none; + margin-top: 1rem; + justify-content: start; + } + } + + [data-component="brand-grid"] > div:hover [data-component="actions"] { + opacity: 1; + + @media (max-width: 40rem) { + opacity: 1; + } + } + + [data-component="actions"] button { + padding: 6px 12px; + background: var(--color-background); + color: var(--color-text); + border: none; + border-radius: 4px; + font-weight: 500; + display: flex; + align-items: center; + gap: 12px; + transition: all 0.2s ease; + cursor: pointer; + box-shadow: + 0 0 0 1px rgba(19, 16, 16, 0.08), + 0 6px 8px -4px rgba(19, 16, 16, 0.12), + 0 4px 3px -2px rgba(19, 16, 16, 0.12), + 0 1px 2px -1px rgba(19, 16, 16, 0.12); + + @media (max-width: 40rem) { + box-shadow: + 0 0 0 1px rgba(19, 16, 16, 0.16) + } + + + &:hover { + background: var(--color-background); + } + + &:active { + transform: scale(0.98); + box-shadow: 0 0 0 1px rgba(19, 16, 16, 0.08), 0 6px 8px -8px rgba(19, 16, 16, 0.50); + } + } + + + + @media (max-width: 60rem) { + padding: 2rem 1.5rem; + } + } + + [data-component="faq"] { + border-top: 1px solid var(--color-border-weak); + padding: 4rem 5rem; + + @media (max-width: 60rem) { + padding: 2rem 1.5rem; + } + + [data-slot="section-title"] { + margin-bottom: 24px; + + h3 { + font-size: 16px; + font-weight: 500; + color: var(--color-text-strong); + margin-bottom: 12px; + } + + p { + margin-bottom: 12px; + color: var(--color-text); + } + } + + ul { + padding: 0; + + li { + list-style: none; + margin-bottom: 24px; + line-height: 200%; + + @media (max-width: 60rem) { + line-height: 180%; + } + } + } + + [data-slot="faq-question"] { + display: flex; + gap: 16px; + margin-bottom: 8px; + color: var(--color-text-strong); + font-weight: 500; + cursor: pointer; + background: none; + border: none; + padding: 0; + + [data-slot="faq-icon-plus"] { + flex-shrink: 0; + color: var(--color-text-weak); + margin-top: 2px; + + [data-closed] & { + display: block; + } + [data-expanded] & { + display: none; + } + } + [data-slot="faq-icon-minus"] { + flex-shrink: 0; + color: var(--color-text-weak); + margin-top: 2px; + + [data-closed] & { + display: none; + } + [data-expanded] & { + display: block; + } + } + [data-slot="faq-question-text"] { + flex-grow: 1; + text-align: left; + } + } + + [data-slot="faq-answer"] { + margin-left: 40px; + margin-bottom: 32px; + color: var(--color-text); + } + } + + [data-component="legal"] { + color: var(--color-text-weak); + text-align: center; + padding: 2rem 5rem; + display: flex; + gap: 32px; + justify-content: center; + + @media (max-width: 60rem) { + padding: 2rem 1.5rem; + } + + a { + color: var(--color-text-weak); + text-decoration: none; + } + + a:hover { + color: var(--color-text); + text-decoration: underline; + } + } + + a { + color: var(--color-text-strong); + text-decoration: underline; + text-underline-offset: 2px; + text-decoration-thickness: 1px; + + &:hover { + text-decoration-thickness: 2px; + } + } +} diff --git a/packages/console/app/src/routes/brand/index.tsx b/packages/console/app/src/routes/brand/index.tsx new file mode 100644 index 000000000..4570c73ca --- /dev/null +++ b/packages/console/app/src/routes/brand/index.tsx @@ -0,0 +1,352 @@ +import "./index.css" +import { Title, Meta } from "@solidjs/meta" +import { Header } from "~/component/header" +import { Footer } from "~/component/footer" +import { Legal } from "~/component/legal" +import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png" +import previewLogoDark from "../../asset/brand/preview-opencode-logo-dark.png" +import previewWordmarkLight from "../../asset/brand/preview-opencode-wordmark-light.png" +import previewWordmarkDark from "../../asset/brand/preview-opencode-wordmark-dark.png" +import previewWordmarkSimpleLight from "../../asset/brand/preview-opencode-wordmark-simple-light.png" +import previewWordmarkSimpleDark from "../../asset/brand/preview-opencode-wordmark-simple-dark.png" +import logoLightPng from "../../asset/brand/opencode-logo-light.png" +import logoDarkPng from "../../asset/brand/opencode-logo-dark.png" +import wordmarkLightPng from "../../asset/brand/opencode-wordmark-light.png" +import wordmarkDarkPng from "../../asset/brand/opencode-wordmark-dark.png" +import wordmarkSimpleLightPng from "../../asset/brand/opencode-wordmark-simple-light.png" +import wordmarkSimpleDarkPng from "../../asset/brand/opencode-wordmark-simple-dark.png" +import logoLightSvg from "../../asset/brand/opencode-logo-light.svg" +import logoDarkSvg from "../../asset/brand/opencode-logo-dark.svg" +import wordmarkLightSvg from "../../asset/brand/opencode-wordmark-light.svg" +import wordmarkDarkSvg from "../../asset/brand/opencode-wordmark-dark.svg" +import wordmarkSimpleLightSvg from "../../asset/brand/opencode-wordmark-simple-light.svg" +import wordmarkSimpleDarkSvg from "../../asset/brand/opencode-wordmark-simple-dark.svg" +const brandAssets = "/opencode-brand-assets.zip" + +export default function Brand() { + const downloadFile = async (url: string, filename: string) => { + try { + const response = await fetch(url) + const blob = await response.blob() + const blobUrl = window.URL.createObjectURL(blob) + + const link = document.createElement("a") + link.href = blobUrl + link.download = filename + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + + window.URL.revokeObjectURL(blobUrl) + } catch (error) { + console.error("Download failed:", error) + const link = document.createElement("a") + link.href = url + link.target = "_blank" + link.rel = "noopener noreferrer" + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + } + } + + return ( + <main data-page="enterprise"> + <Title>OpenCode | Brand</Title> + <Meta name="description" content="OpenCode brand guidelines" /> + <div data-component="container"> + <Header /> + + <div data-component="content"> + <section data-component="brand-content"> + <h2>Brand guidelines</h2> + <p>Resources and assets to help you work with the OpenCode brand.</p> + <button + data-component="download-button" + onClick={() => downloadFile(brandAssets, "opencode-brand-assets.zip")} + > + Download all assets + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + + <div data-component="brand-grid"> + <div> + <img src={previewLogoLight} alt="OpenCode brand guidelines" /> + <div data-component="actions"> + <button onClick={() => downloadFile(logoLightPng, "opencode-logo-light.png")}> + PNG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + <button onClick={() => downloadFile(logoLightSvg, "opencode-logo-light.svg")}> + SVG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + </div> + </div> + <div> + <img src={previewLogoDark} alt="OpenCode brand guidelines" /> + <div data-component="actions"> + <button onClick={() => downloadFile(logoDarkPng, "opencode-logo-dark.png")}> + PNG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + <button onClick={() => downloadFile(logoDarkSvg, "opencode-logo-dark.svg")}> + SVG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + </div> + </div> + <div> + <img src={previewWordmarkLight} alt="OpenCode brand guidelines" /> + <div data-component="actions"> + <button + onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")} + > + PNG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + <button + onClick={() => downloadFile(wordmarkLightSvg, "opencode-wordmark-light.svg")} + > + SVG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + </div> + </div> + <div> + <img src={previewWordmarkDark} alt="OpenCode brand guidelines" /> + <div data-component="actions"> + <button + onClick={() => downloadFile(wordmarkDarkPng, "opencode-wordmark-dark.png")} + > + PNG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + <button + onClick={() => downloadFile(wordmarkDarkSvg, "opencode-wordmark-dark.svg")} + > + SVG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + </div> + </div> + <div> + <img src={previewWordmarkSimpleLight} alt="OpenCode brand guidelines" /> + <div data-component="actions"> + <button + onClick={() => + downloadFile(wordmarkSimpleLightPng, "opencode-wordmark-simple-light.png") + } + > + PNG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + <button + onClick={() => + downloadFile(wordmarkSimpleLightSvg, "opencode-wordmark-simple-light.svg") + } + > + SVG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + </div> + </div> + <div> + <img src={previewWordmarkSimpleDark} alt="OpenCode brand guidelines" /> + <div data-component="actions"> + <button + onClick={() => + downloadFile(wordmarkSimpleDarkPng, "opencode-wordmark-simple-dark.png") + } + > + PNG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + <button + onClick={() => + downloadFile(wordmarkSimpleDarkSvg, "opencode-wordmark-simple-dark.svg") + } + > + SVG + <svg + width="20" + height="20" + viewBox="0 0 20 20" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="square" + /> + </svg> + </button> + </div> + </div> + </div> + </section> + </div> + <Footer /> + </div> + <Legal /> + </main> + ) +} diff --git a/packages/console/app/src/routes/enterprise/index.css b/packages/console/app/src/routes/enterprise/index.css index 44c6f8611..567c4f99d 100644 --- a/packages/console/app/src/routes/enterprise/index.css +++ b/packages/console/app/src/routes/enterprise/index.css @@ -8,7 +8,6 @@ } } - [data-page="enterprise"] { --color-background: hsl(0, 20%, 99%); --color-background-weak: hsl(0, 8%, 97%); @@ -52,7 +51,6 @@ --color-text-inverted: hsl(0, 9%, 7%); --color-text-success: hsl(119, 60%, 72%); - --color-border: hsl(0, 3%, 28%); --color-border-weak: hsl(0, 4%, 23%); @@ -390,7 +388,7 @@ @media (prefers-color-scheme: dark) { box-shadow: none; - border: 1px solid var(--color-background-interactive) + border: 1px solid var(--color-background-interactive); } } } @@ -520,6 +518,9 @@ color: var(--color-text-weak); text-align: center; padding: 2rem 5rem; + display: flex; + gap: 32px; + justify-content: center; @media (max-width: 60rem) { padding: 2rem 1.5rem; @@ -529,6 +530,11 @@ color: var(--color-text-weak); text-decoration: none; } + + a:hover { + color: var(--color-text); + text-decoration: underline; + } } a { diff --git a/packages/console/app/src/routes/index.css b/packages/console/app/src/routes/index.css index b46958b80..496901339 100644 --- a/packages/console/app/src/routes/index.css +++ b/packages/console/app/src/routes/index.css @@ -56,7 +56,6 @@ body { } } - @supports (background: -webkit-named-image(i)) { [data-page="opencode"] { border-top: 1px solid var(--color-border-weak); @@ -118,7 +117,6 @@ body { display: none !important; } - [data-component="growth-stat"] { display: flex; flex-direction: column; @@ -149,14 +147,12 @@ body { display: none; } } - } - [data-component="stat-illustration"] { - width: 100%; - height: 100%; - display: block; + width: 100%; + height: 100%; + display: block; svg { margin: 0; @@ -164,10 +160,9 @@ body { height: auto; display: block; } + } } } - } - input:-webkit-autofill, input:-webkit-autofill:hover, @@ -184,7 +179,6 @@ body { -moz-text-fill-color: var(--color-text-strong) !important; } - [data-component="container"] { max-width: 67.5rem; margin: 0 auto; @@ -328,10 +322,10 @@ body { display: flex; flex-direction: column; max-width: 100%; - padding: calc(var(--vertical-padding)*2) var(--padding); + padding: calc(var(--vertical-padding) * 2) var(--padding); @media (max-width: 30rem) { - padding: var(--vertical-padding) var(--padding) + padding: var(--vertical-padding) var(--padding); } @media (prefers-color-scheme: dark) { @@ -352,7 +346,6 @@ body { @media (max-width: 550px) { width: calc(100vw - 48px); } - } [data-component="tabs"] { @@ -368,7 +361,7 @@ body { padding: 0 20px; @media (max-width: 60rem) { - gap: 20px; + gap: 32px; overflow-x: auto; width: 100%; } @@ -443,7 +436,6 @@ body { @media (max-width: 35rem) { width: calc(100% - 40px) !important; } - } [data-slot="highlight"] { @@ -496,7 +488,6 @@ body { @media (max-width: 60rem) { font-size: 22px; } - } p { @@ -579,7 +570,6 @@ body { margin-bottom: 24px; max-width: 100%; - div { display: flex; gap: 12px; @@ -832,7 +822,7 @@ body { @media (prefers-color-scheme: dark) { box-shadow: none; - border: 1px solid var(--color-background-interactive) + border: 1px solid var(--color-background-interactive); } } @@ -892,7 +882,6 @@ body { margin-top: 2px; } - [data-slot="faq-icon-plus"] { flex-shrink: 0; color: var(--color-text-weak); @@ -1021,7 +1010,6 @@ body { } [data-component="copy-status"] { - [data-slot="copy"] { display: block; width: var(--space-4); @@ -1054,12 +1042,10 @@ body { border-bottom: 1px solid var(--color-border-weak); } - [data-slot="cell"] { flex: 1; text-align: center; - a { text-decoration: none; padding: 2rem 0; @@ -1072,7 +1058,6 @@ body { @media (max-width: 40rem) { display: none; } - } } @@ -1111,10 +1096,18 @@ body { [data-component="legal"] { color: var(--color-text-weak); text-align: center; + display: flex; + gap: 32px; + justify-content: center; a { color: var(--color-text-weak); text-decoration: none; } + + a:hover { + color: var(--color-text); + text-decoration: underline; + } } } diff --git a/packages/console/app/src/routes/zen/index.css b/packages/console/app/src/routes/zen/index.css index 88ca0762e..661517c43 100644 --- a/packages/console/app/src/routes/zen/index.css +++ b/packages/console/app/src/routes/zen/index.css @@ -60,7 +60,6 @@ body { } } - [data-page="zen"] { background: var(--color-background); --padding: 5rem; @@ -112,9 +111,6 @@ body { -moz-text-fill-color: var(--color-text-strong) !important; } - - - [data-component="container"] { max-width: 67.5rem; margin: 0 auto; @@ -179,8 +175,6 @@ body { } } - - [data-component="nav-mobile-toggle"] { border: none; background: none; @@ -258,14 +252,14 @@ body { [data-component="hero"] { display: flex; flex-direction: column; - padding: calc(var(--vertical-padding)*2) var(--padding); + padding: calc(var(--vertical-padding) * 2) var(--padding); [data-slot="zen logo dark"] { display: none; } @media (max-width: 30rem) { - padding: var(--vertical-padding) var(--padding) + padding: var(--vertical-padding) var(--padding); } @media (prefers-color-scheme: dark) { @@ -295,8 +289,6 @@ body { } } - - p { color: var(--color-text); margin-bottom: 24px; @@ -778,12 +770,10 @@ body { border-bottom: 1px solid var(--color-border-weak); } - [data-slot="cell"] { flex: 1; text-align: center; - a { text-decoration: none; padding: 2rem 0; @@ -796,7 +786,6 @@ body { @media (max-width: 40rem) { display: none; } - } } @@ -835,10 +824,18 @@ body { [data-component="legal"] { color: var(--color-text-weak); text-align: center; + display: flex; + gap: 32px; + justify-content: center; a { color: var(--color-text-weak); text-decoration: none; } + + a:hover { + color: var(--color-text); + text-decoration: underline; + } } } |
