-
Notifications
You must be signed in to change notification settings - Fork 13
/
OGImageDocs.vue
84 lines (81 loc) · 11.8 KB
/
OGImageDocs.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script setup lang="ts">
withDefaults(defineProps<{
title?: string
description?: string
}>(), {
title: 'Maizzle',
description: 'Documentation.'
})
</script>
<template>
<div class="w-full h-full bg-white">
<svg class="absolute inset-0 opacity-30" style="z-index: 0;" width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M165.165 460.097C665.045 774.444 932.717 309.581 918.141 89.1189C903.565 -131.34 701.988 54.0219 229.207 -264.678C-5.12998 -422.28 -543.751 -34.9957 -529.152 185.807C-519.833 326.75 -379.035 310.245 -189.346 337.462C-81.376 352.603 41.2774 380.199 165.165 460.097Z" stroke="url(#paint0_linear_478_327)" stroke-opacity="0.6" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M253.011 -296.212C-18.3602 -425.405 -530.013 -54.3762 -514.515 180.017C-504.966 324.443 -367.006 331.248 -180.346 370.146C-63.9475 394.645 76.0485 423.818 211.397 491.726C726.056 747.075 976.158 317.568 960.661 83.175C951.203 -59.8718 860.843 -55.6582 684.504 -114.624C639.725 -129.318 584.825 -148.797 528.988 -171.418C423.425 -219.756 361.801 -244.206 253.011 -296.212Z" stroke="#4F46E5" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M241.66 -337.514C-103.895 -405.376 -551.492 -75.9573 -534.468 181.539C-524.622 330.451 -394.813 386.268 -215.436 445.381C-83.1503 488.912 81.5494 516.799 246.071 558.545C753.003 687.059 1028.73 337.499 1011.71 80.0029C1002.48 -59.6043 915.779 -101.995 758.671 -172.621C710.081 -194.336 657.576 -217.177 597.427 -239.514C493.439 -277.993 373.349 -311.253 241.66 -337.514Z" stroke="#4F46E5" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M240.293 -358.196C-144.815 -394.012 -562.594 -86.3041 -544.794 182.913C-534.789 334.241 -409.347 415.27 -231.557 483.492C-91.4727 537.239 84.2611 566.129 266.385 592.17C756.822 661.879 1062.29 347.399 1044.49 78.1815C1035.39 -59.3574 948.148 -126.639 798.389 -202.251C773.973 -214.535 748.415 -226.662 721.54 -238.425C692.847 -250.985 662.654 -263.13 630.749 -274.607C516.731 -315.537 383.742 -344.83 240.293 -358.196Z" stroke="url(#paint1_linear_478_327)" stroke-opacity="0.85" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M238.897 -379.222C-185.147 -381.999 -573.719 -96.9921 -555.167 183.599C-545.025 336.995 -424.446 443.964 -247.73 520.912C-100.36 585.258 87.1319 617.871 287.206 625.07C761.548 642.177 1096.34 356.574 1077.77 75.6354C1068.79 -60.1794 981.538 -152.388 838.603 -232.609C786.778 -261.728 728.54 -288.342 664.003 -310.734C540.018 -353.086 394.157 -378.061 238.897 -379.222Z" stroke="#64748B" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M304.478 659.679C767.441 629.07 1126.86 367.454 1107.53 75.1424C1098.66 -58.9484 1011.41 -176.084 875.294 -260.911C822.106 -294.094 761.022 -322.251 694.3 -344.498C559.737 -389.265 401.547 -409.965 234.487 -398.92C-228.482 -368.31 -587.892 -106.698 -568.565 185.614C-549.239 477.926 -158.492 690.289 304.478 659.679Z" stroke="#64748B" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M1136.98 75.5291C1127.93 -61.3215 1039.43 -180.798 899.927 -267.132C845.603 -300.931 783.383 -329.708 715.543 -352.227C578.185 -397.846 417.216 -419.057 246.334 -407.759C-225.912 -376.536 -592.647 -109.59 -572.933 188.582C-553.219 486.755 -154.531 703.093 317.715 671.87C789.961 640.647 1156.7 373.702 1136.98 75.5291V75.5291Z" stroke="#4F46E5" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M1162.9 77.6248C1153.69 -61.6382 1063.36 -183.766 921.562 -271.676C866.098 -306.095 802.742 -335.488 733.219 -358.587C593.608 -405.097 428.776 -426.744 254.613 -415.229C-226.91 -383.393 -600.972 -111.117 -580.87 192.916C-560.769 496.949 -154.116 717.607 327.407 685.77C808.936 653.933 1183 381.658 1162.9 77.6248V77.6248Z" stroke="#64748B" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M1189.35 79.6845C1179.96 -62.3349 1087.84 -186.77 943.191 -276.224C886.592 -311.255 822.095 -341.268 751.465 -364.643C609.052 -412.004 441.442 -434.159 264.01 -422.428C-226.801 -389.977 -607.659 -112.752 -587.17 197.141C-566.681 507.031 -152.64 731.701 338.171 699.25C828.978 666.8 1209.84 389.575 1189.35 79.6845V79.6845Z" stroke="#64748B" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M1215.81 81.7442C1206.23 -63.0351 1112.34 -189.426 965.374 -280.805C907.634 -316.455 842.002 -347.084 770.23 -371.075C625.022 -419.292 454.092 -441.918 273.379 -429.97C-226.709 -396.906 -614.893 -114.351 -594.016 201.403C-573.14 517.154 -151.135 746.146 348.954 713.082C849.042 680.018 1236.66 397.151 1215.81 81.7442Z" stroke="#64748B" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M1242.24 83.4565C1232.49 -64.0794 1136.79 -192.775 986.958 -286.041C928.082 -322.307 861.315 -353.556 787.878 -377.782C639.874 -426.852 466.188 -449.645 282.206 -437.481C-226.623 -403.839 -622.127 -115.95 -600.886 205.317C-579.645 526.584 -149.681 759.896 359.148 726.254C867.972 692.613 1263.5 405.071 1242.23 83.4569L1242.24 83.4565Z" stroke="#64748B" stroke-width="0.5" stroke-miterlimit="10"/>
<path d="M368.84 740.154C-149.474 774.423 -587.185 536.909 -608.823 209.651C-630.46 -117.607 -227.828 -410.682 290.485 -444.951C808.799 -479.22 1246.51 -241.705 1268.15 85.5525C1289.78 412.81 887.154 705.885 368.84 740.154Z" stroke="#64748B" stroke-width="0.5" stroke-miterlimit="10"/>
<defs>
<linearGradient id="paint0_linear_478_327" x1="926.132" y1="81.2689" x2="-504.78" y2="175.875" gradientUnits="userSpaceOnUse">
<stop stop-color="#64748B"/>
<stop offset="1" stop-color="#64748B" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_478_327" x1="1044" y1="70.8206" x2="-545.258" y2="175.896" gradientUnits="userSpaceOnUse">
<stop stop-color="#64748B"/>
<stop offset="1" stop-color="#64748B" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
<svg class="absolute bottom-0 right-0 opacity-35" style="z-index: 0;" width="825" height="505" viewBox="0 0 825 505" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M873.763 114.012C873.763 69.1911 837.429 32.8568 792.609 32.8568C747.788 32.8568 711.454 69.1911 711.454 114.012V546.838C711.454 591.658 747.788 627.993 792.609 627.993C837.429 627.993 873.763 591.658 873.763 546.838V114.012Z" stroke="url(#paint0_linear_478_340)" stroke-width="2" stroke-miterlimit="10"/>
<path d="M534.262 114.012C534.262 69.1911 497.928 32.8568 453.108 32.8568C408.287 32.8568 371.953 69.1911 371.953 114.012V546.838C371.953 591.658 408.287 627.993 453.108 627.993C497.928 627.993 534.262 591.658 534.262 546.838V114.012Z" stroke="url(#paint1_linear_478_340)" stroke-width="2" stroke-miterlimit="10"/>
<path d="M856.555 163.933C884.174 128.633 877.947 77.6276 842.647 50.0086C807.347 22.3896 756.342 28.6162 728.723 63.916L389.831 497.054C362.212 532.354 368.439 583.359 403.739 610.978C439.038 638.597 490.044 632.371 517.663 597.071L856.555 163.933Z" stroke="url(#paint2_linear_478_340)" stroke-width="2" stroke-miterlimit="10"/>
<path d="M516.732 163.946C544.351 128.646 538.125 77.6407 502.825 50.0217C467.525 22.4027 416.519 28.6293 388.9 63.9291L50.0087 497.067C22.3897 532.367 28.6163 583.372 63.9161 610.991C99.216 638.61 150.222 632.384 177.841 597.084L516.732 163.946Z" stroke="url(#paint3_linear_478_340)" stroke-width="2" stroke-miterlimit="10"/>
<defs>
<linearGradient id="paint0_linear_478_340" x1="792.609" y1="32.8568" x2="792.609" y2="627.993" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F46E5"/>
<stop offset="1" stop-color="#9C96FF"/>
</linearGradient>
<linearGradient id="paint1_linear_478_340" x1="453.108" y1="32.8568" x2="453.108" y2="627.993" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F46E5"/>
<stop offset="1" stop-color="#9C96FF"/>
</linearGradient>
<linearGradient id="paint2_linear_478_340" x1="842.647" y1="50.0086" x2="403.739" y2="610.978" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F46E5"/>
<stop offset="1" stop-color="#9C96FF"/>
</linearGradient>
<linearGradient id="paint3_linear_478_340" x1="502.825" y1="50.0217" x2="63.9161" y2="610.991" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F46E5"/>
<stop offset="1" stop-color="#9C96FF"/>
</linearGradient>
</defs>
</svg>
<div class="p-12">
<svg width="240" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 31">
<path d="M24.324 5.188a3.695 3.695 0 0 0-7.39 0v19.708a3.695 3.695 0 0 0 7.39 0V5.188Z" stroke="#4F46E5" stroke-miterlimit="10" />
<path d="M39.001 7.464a3.695 3.695 0 1 0-5.82-4.554L17.75 22.632a3.695 3.695 0 0 0 5.82 4.554L39 7.464ZM23.528 7.465a3.695 3.695 0 0 0-5.82-4.554L2.277 22.633a3.695 3.695 0 0 0 5.82 4.554L23.529 7.465Z" stroke="#4F46E5" stroke-miterlimit="10" />
<path d="M39.782 5.188a3.695 3.695 0 1 0-7.39 0v19.708a3.695 3.695 0 0 0 7.39 0V5.188Z" stroke="#4F46E5" stroke-miterlimit="10" />
<path d="M74.64 17.863v8.868c0 .986-.862 1.848-1.847 1.848s-1.724-.74-1.724-1.848V17.74c0-1.971-1.602-3.572-3.695-3.572-1.971 0-3.696 1.6-3.696 3.572v8.991c0 .986-.739 1.848-1.724 1.848-.986 0-1.848-.74-1.848-1.848V17.74a3.575 3.575 0 0 0-3.572-3.572c-1.97 0-3.695 1.6-3.695 3.572v8.991c0 .986-.739 1.848-1.724 1.848-.986 0-1.848-.74-1.848-1.848V17.74c0-3.942 3.202-7.144 7.267-7.144 2.094 0 4.065.985 5.42 2.463 1.355-1.601 3.325-2.463 5.42-2.463 3.941 0 7.267 3.202 7.267 7.144v.123ZM94.718 19.587v7.021c0 .986-.739 1.848-1.847 1.848-.74 0-1.725-.74-1.725-1.848-1.601 1.232-3.326 1.848-5.296 1.848-5.05 0-9.115-3.819-9.115-8.869a9.094 9.094 0 0 1 9.115-9.114c5.05.123 8.868 4.064 8.868 9.114Zm-3.572 0c0-2.956-2.34-5.543-5.296-5.543-2.957 0-5.543 2.587-5.543 5.543 0 2.957 2.586 5.297 5.543 5.297 3.079.123 5.296-2.217 5.296-5.297ZM97.305 6.408c-.37-.37-.493-.74-.493-1.232 0-.493.246-.985.493-1.232.37-.37.739-.492 1.231-.492.493 0 .986.246 1.232.492.37.37.493.74.493 1.232 0 .493-.123.985-.493 1.232-.37.37-.739.492-1.232.492-.37 0-.862-.123-1.231-.492Zm-.493 20.323V12.32c0-.985.739-1.724 1.848-1.724.985 0 1.724.739 1.724 1.724v14.411c0 .986-.74 1.848-1.724 1.848-1.109 0-1.848-.862-1.848-1.848ZM117.259 26.731c0 .986-.739 1.848-1.725 1.848h-11.208c-.739 0-1.355-.37-1.602-.985-.369-.616-.246-1.355.124-1.848l8.991-11.578h-7.513c-.986 0-1.725-.863-1.725-1.848 0-.985.739-1.724 1.725-1.724h11.208c.739 0 1.355.37 1.602.985.369.616.246 1.355-.124 1.848l-8.991 11.578h7.637c.862 0 1.601.739 1.601 1.724ZM134.134 26.731c0 .986-.739 1.848-1.725 1.848H121.2c-.739 0-1.355-.37-1.601-.985-.369-.616-.246-1.355.123-1.848l8.992-11.578h-7.637c-.985 0-1.724-.863-1.724-1.848 0-.985.739-1.724 1.724-1.724h11.209c.739 0 1.355.37 1.601.985.37.616.247 1.355-.123 1.848l-8.992 11.578h7.637c.986 0 1.725.739 1.725 1.724ZM136.228 26.731V3.328c0-.985.739-1.724 1.847-1.724.986 0 1.725.739 1.725 1.724v23.403c0 .986-.739 1.848-1.725 1.848-1.108 0-1.847-.862-1.847-1.848ZM160 19.464c0 .986-.739 1.725-1.848 1.725h-12.44c.739 2.093 2.71 3.695 5.173 3.695.862 0 2.34-.123 4.065-1.232.862-.493 1.971 0 2.34.862.37.863 0 1.848-.862 2.34-2.34 1.602-4.188 1.602-5.543 1.602a8.963 8.963 0 0 1-8.992-8.992c0-4.927 4.065-8.991 8.992-8.991 4.434 0 9.115 3.202 9.115 8.991Zm-14.165-1.724h10.347c-.739-2.464-3.08-3.695-5.174-3.695-2.463 0-4.434 1.478-5.173 3.695Z" fill="#1E293B" />
</svg>
<div class="flex flex-col h-full relative mt-16 z-10">
<div>
<h1 class="text-7xl text-slate-900 mb-12">
{{ title }}
</h1>
<div
class="text-5xl/snug max-w-4xl text-slate-700"
style='font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
v-html="description"
/>
</div>
</div>
</div>
</div>
</template>