fix(website): fix use case layout and mobile crash (#6478)

- Fix missing two-factor graphic
- Fix crash on mobile due to use of luminance in yc-logo-gray.svg,
replaced with PNG
- Fix layout issue on mobile for use case cards
This commit is contained in:
Jamil
2024-08-29 07:46:25 -07:00
committed by GitHub
parent 3399ebdb0f
commit d76304f1fd
6 changed files with 24 additions and 88 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -1,18 +0,0 @@
<svg width="301" height="60" viewBox="0 0 301 60" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1313_913" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="301" height="60">
<path d="M300.75 0H0V60H300.75V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_1313_913)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M60 60H0V0H60V60ZM32.4373 46.3125V32.9812L45.3561 13.6875H39.1873L29.9249 27.9375L20.6248 13.6875H14.4561L27.3748 32.9812V46.3125H32.4373Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M95.1851 20.122C89.6351 20.122 85.4731 24.4158 85.4731 29.9658C85.4731 35.5158 89.6351 39.847 95.1851 39.847C98.7481 39.847 101.841 38.0095 103.51 34.9158L108.273 37.747C105.61 42.3033 100.623 45.2658 95.1851 45.2658C86.6351 45.247 79.8481 38.4595 79.8481 29.9658C79.8481 21.4533 86.6351 14.6658 95.1851 14.6658C100.679 14.6658 105.61 17.5908 108.273 22.1845L103.51 25.0158C101.823 21.922 98.7481 20.122 95.1851 20.122Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M126.573 33.8283C126.573 30.3595 124.041 27.7345 120.779 27.7345C117.423 27.7345 114.891 30.3595 114.891 33.8283C114.891 37.297 117.423 39.922 120.779 39.922C123.985 39.922 126.573 37.297 126.573 33.8283ZM109.435 33.8283C109.435 27.5658 114.46 22.5408 120.779 22.5408C127.004 22.5408 132.029 27.5658 132.029 33.8283C132.029 40.0908 127.004 45.1158 120.779 45.1158C114.46 45.1158 109.435 40.0908 109.435 33.8283Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.429 32.0283V44.6283H161.991V32.9845C161.991 29.722 160.398 27.6595 157.998 27.6595C155.541 27.6595 153.741 29.722 153.741 32.9845V44.6283H148.491V32.9845C148.491 29.722 146.841 27.6595 144.423 27.6595C142.004 27.6595 140.241 29.722 140.241 32.9845V44.6283H134.804V23.0658H140.241V25.822C141.573 23.7595 143.635 22.4658 146.166 22.4658C148.923 22.4658 151.098 24.022 152.429 26.4408C153.798 24.2845 156.329 22.4658 159.516 22.4658C164.298 22.4658 167.429 26.6845 167.429 32.0283Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M186.76 34.0532C186.76 30.4532 184.529 27.8657 181.398 27.8657C178.341 27.8657 176.035 30.3219 176.035 33.9969C176.035 37.6532 178.398 40.1282 181.491 40.1282C184.529 40.1094 186.76 37.5782 186.76 34.0532ZM182.541 45.1907C179.541 45.1907 177.329 43.8219 176.054 41.9282V44.6282H170.616V14.6282H176.054V25.6907C177.366 23.9282 179.579 22.6532 182.448 22.6532C188.016 22.6532 192.273 27.4532 192.366 33.9219C192.46 40.4657 188.11 45.1907 182.541 45.1907Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M194.616 44.6283H200.054V23.0658H194.616V44.6283ZM193.923 16.9533C193.923 15.1158 195.46 13.7283 197.316 13.7283C199.116 13.7283 200.616 15.097 200.616 16.9533C200.616 18.7908 199.116 20.1783 197.316 20.1783C195.479 20.1595 193.923 18.7908 193.923 16.9533Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M223.491 32.122V44.6283H218.241V33.2845C218.241 29.8158 216.423 27.6595 213.798 27.6595C210.91 27.6595 208.866 30.2845 208.866 33.3783V44.6283H203.616V23.0658H208.866V25.7845C210.329 23.7595 212.673 22.4658 215.41 22.4658C220.248 22.4658 223.491 26.5908 223.491 32.122Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M239.991 35.0656V34.5968L234.498 35.6656C232.66 36.0968 231.535 37.0343 231.535 38.2906C231.535 39.6218 232.754 40.6156 234.76 40.5593C237.648 40.4656 239.991 37.9531 239.991 35.0656ZM245.241 31.6156V44.6281H239.991V42.1343C238.398 43.8593 235.904 45.1343 233.148 45.1906C229.491 45.1906 226.266 42.7906 226.266 38.6656C226.266 34.7656 229.191 32.5343 233.541 31.6718L239.86 30.4718C239.429 28.6718 238.06 27.3031 235.979 27.3031C233.916 27.3031 231.985 28.5968 230.823 30.2281L226.866 27.3593C228.891 24.5281 232.454 22.6343 235.998 22.6343C241.285 22.5968 245.241 26.2531 245.241 31.6156Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M256.304 27.9406V36.9781C256.304 38.7406 257.073 39.5468 258.666 39.5468H261.366V44.6093H257.916C253.323 44.6093 251.054 42.3593 251.054 37.6343V27.9406H247.116V23.0656H250.866V17.7406L256.304 16.0718V23.0656H261.366V27.9406H256.304Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M280.285 33.8283C280.285 30.3595 277.754 27.7345 274.491 27.7345C271.135 27.7345 268.604 30.3595 268.604 33.8283C268.604 37.297 271.135 39.922 274.491 39.922C277.698 39.922 280.285 37.297 280.285 33.8283ZM263.148 33.8283C263.148 27.5658 268.173 22.5408 274.491 22.5408C280.716 22.5408 285.741 27.5658 285.741 33.8283C285.741 40.0908 280.716 45.1158 274.491 45.1158C268.173 45.1158 263.148 40.0908 263.148 33.8283Z" fill="#C7C4C2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M300.741 22.5969V27.8282C295.885 27.8282 293.804 30.1907 293.804 33.2844V44.6282H288.554V23.0657H293.804V25.7657C295.285 23.8344 297.666 22.5969 300.741 22.5969Z" fill="#C7C4C2"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 4.8 KiB

View File

@@ -87,7 +87,7 @@ export default function Page() {
<div className="text-center text-sm mb-6 font-base text-neutral-600">
Backed by{" "}
<Image
src="/images/yc-logo-gray.svg"
src="/images/yc-logo-gray.png"
alt="yc logo gray"
width={100}
height={40}

View File

@@ -117,27 +117,31 @@ export default function UseCaseCards() {
</div>
</Card>
<Card>
<Image
className="absolute md:top-8 top-4"
src="/images/access-onprem-network.png"
width={300}
height={225}
alt="Access on-prem network graphic"
/>
<div className="flex items-end">
<div>
<CardHeading>Access an on-prem network</CardHeading>
<p>
Firezone securely punches through firewalls with ease, so keep
those ports closed. Connections pick the shortest path and
your attack surface is minimized, keeping your most sensitive
resources invisible to attackers.
</p>
<Button
text="Set up secure access"
href="/kb/use-cases/private-network-access"
<div>
<div className="text-center">
<Image
className="mx-auto mb-8"
src="/images/access-onprem-network.png"
width={300}
height={225}
alt="Access on-prem network graphic"
/>
</div>
<div className="w-full flex items-end">
<div>
<CardHeading>Access an on-prem network</CardHeading>
<p>
Firezone securely punches through firewalls with ease, so
keep those ports closed. Connections pick the shortest path
and your attack surface is minimized, keeping your most
sensitive resources invisible to attackers.
</p>
<Button
text="Set up secure access"
href="/kb/use-cases/private-network-access"
/>
</div>
</div>
</div>
</Card>
<Card>