feat: Feature apps on the home page

This commit is contained in:
Felix Rieseberg 2020-04-21 13:12:40 -07:00
Родитель d36c292cb0
Коммит 23ca61563a
21 изменённых файлов: 1350 добавлений и 216 удалений

Просмотреть файл

@ -142,6 +142,12 @@ releases:
all_releases: All Releases
back_to_index: Back to index
electron_is_good:
title: Apps users love, built with Electron
description:
Thousands of organizations spanning all industries use Electron to build
cross-platform software.
electron_is_easy:
title: It's easier than you think
description:

69
lib/featured-apps.js Normal file
Просмотреть файл

@ -0,0 +1,69 @@
const developer = [
{
name: 'Visual Studio Code',
screenshot: 'vscode.png',
url: 'https://code.visualstudio.com/',
icon: 'vscode-icon.svg',
}
]
const messenger = [
{
name: 'Facebook Messenger',
screenshot: 'messenger.png',
url: 'https://www.messenger.com/desktop',
icon: 'messenger-icon.svg',
}, {
name: 'WhatsApp',
screenshot: 'whatsapp.jfif',
url: 'https://www.whatsapp.com',
icon: 'whatsapp-icon.svg',
}
]
const collaboration = [
{
name: 'Slack',
screenshot: 'slack.png',
url: 'https://slack.com',
icon: 'slack-icon.svg',
}, {
name: 'Microsoft Teams',
screenshot: 'teams.jpg',
url: 'https://products.office.com/en-US/microsoft-teams/group-chat-software',
icon: 'teams-icon.svg',
}
]
const entertainment = [
{
name: 'Twitch',
screenshot: 'twitch.png',
url: 'https://twitch.com',
icon: 'twitch-icon.svg',
}
]
const design = [
{
name: 'Figma',
screenshot: 'figma.png',
url: 'https://figma.com',
icon: 'figma-icon.png',
}, {
name: 'InVision',
screenshot: 'invision.png',
url: 'https://invisionapp.com',
icon: 'invision-icon.svg',
}
]
const featuredApps = {
developer,
messenger,
entertainment,
collaboration,
design
}
module.exports = featuredApps

Двоичные данные
public/images/featured_apps/figma-icon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 11 KiB

Двоичные данные
public/images/featured_apps/figma.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 871 KiB

Просмотреть файл

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"><defs><style>.cls-1{fill:#f36;}.cls-2{fill:#fff;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" width="250" height="250" rx="22.66" ry="22.66"/><path class="cls-2" d="M83.55,78.66A15,15,0,1,0,68.28,63.61,15.1,15.1,0,0,0,83.55,78.66Z"/><path class="cls-2" d="M51.88,159.24a51.69,51.69,0,0,0-1.35,11.31c0,13.25,7.19,22.05,22.46,22.05,12.67,0,22.94-7.52,30.33-19.67l-4.51,18.12H124l14.37-57.65c3.59-14.6,10.55-22.18,21.11-22.18,8.31,0,13.48,5.17,13.48,13.7A26.94,26.94,0,0,1,171.8,133l-7.41,26.5a39.84,39.84,0,0,0-1.57,11.23c0,12.58,7.41,21.78,22.91,21.78,13.25,0,23.81-8.53,29.65-29l-9.88-3.81c-4.94,13.69-9.21,16.17-12.58,16.17s-5.17-2.24-5.17-6.73a29.8,29.8,0,0,1,1.12-7l7.19-25.82A56.93,56.93,0,0,0,198.53,120c0-19.31-11.68-29.39-25.83-29.39-13.25,0-26.73,12-33.46,24.53l4.94-22.58h-38.4l-5.39,19.89h18l-11.06,44.3c-8.69,19.31-24.65,19.63-26.65,19.18-3.29-.74-5.39-2-5.39-6.26a42.33,42.33,0,0,1,1.57-10.28L93.66,92.57H51L45.6,112.45H63.34Z"/></g></g></svg>

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB

Двоичные данные
public/images/featured_apps/invision.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 174 KiB

Просмотреть файл

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 994 994"
style="enable-background:new 0 0 994 994;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#Bubble_Solid_1_);}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
</style>
<metadata>
<sfw xmlns="&ns_sfw;">
<slices></slices>
<sliceSourceBounds bottomLeftOrigin="true" height="994" width="994" x="15" y="18.5"></sliceSourceBounds>
</sfw>
</metadata>
<g id="Messenger_4_">
<linearGradient id="Bubble_Solid_1_" gradientUnits="userSpaceOnUse" x1="497" y1="1003" x2="497" y2="9.0126" gradientTransform="matrix(1 0 0 -1 0 1003)">
<stop offset="0" style="stop-color:#00B2FF"/>
<stop offset="1" style="stop-color:#006AFF"/>
</linearGradient>
<path id="Bubble_Solid_3_" class="st0" d="M497,0C217,0,0,205.1,0,482.1C0,627,59.4,752.2,156.1,838.7c8.1,7.3,13,17.4,13.4,28.3
l2.7,88.4c0.9,28.2,30,46.5,55.8,35.2l98.6-43.5c8.4-3.7,17.7-4.4,26.5-2c45.3,12.5,93.6,19.1,143.9,19.1
c280,0,497-205.1,497-482.1S777,0,497,0z"/>
<path id="Bolt_4_" class="st1" d="M198.6,623.1l146-231.6c23.2-36.8,73-46,107.8-19.9l116.1,87.1c10.7,8,25.3,7.9,35.9-0.1
l156.8-119c20.9-15.9,48.3,9.2,34.2,31.4L649.5,602.5c-23.2,36.8-73,46-107.8,19.9l-116.1-87.1c-10.7-8-25.3-7.9-35.9,0.1
L232.8,654.5C211.9,670.4,184.5,645.3,198.6,623.1z"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 2.2 KiB

Двоичные данные
public/images/featured_apps/messenger.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 256 KiB

Просмотреть файл

@ -0,0 +1,10 @@
<svg width="241" height="241" viewBox="0 0 241 241" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M51.0141 152.12C51.0141 165.978 39.6933 177.299 25.8352 177.299C11.977 177.299 0.656281 165.978 0.656281 152.12C0.656281 138.262 11.977 126.941 25.8352 126.941H51.0141V152.12Z" fill="#E01E5A"/>
<path d="M63.7011 152.12C63.7011 138.262 75.0219 126.941 88.88 126.941C102.738 126.941 114.059 138.262 114.059 152.12V215.165C114.059 229.023 102.738 240.344 88.88 240.344C75.0219 240.344 63.7011 229.023 63.7011 215.165V152.12Z" fill="#E01E5A"/>
<path d="M88.88 51.0141C75.0219 51.0141 63.7011 39.6933 63.7011 25.8352C63.7011 11.977 75.0219 0.656281 88.88 0.656281C102.738 0.656281 114.059 11.977 114.059 25.8352V51.0141H88.88Z" fill="#36C5F0"/>
<path d="M88.88 63.7011C102.738 63.7011 114.059 75.0219 114.059 88.88C114.059 102.738 102.738 114.059 88.88 114.059H25.8352C11.977 114.059 0.656281 102.738 0.656281 88.88C0.656281 75.0219 11.977 63.7011 25.8352 63.7011H88.88Z" fill="#36C5F0"/>
<path d="M189.986 88.88C189.986 75.0219 201.307 63.7011 215.165 63.7011C229.023 63.7011 240.344 75.0219 240.344 88.88C240.344 102.738 229.023 114.059 215.165 114.059H189.986V88.88Z" fill="#2EB67D"/>
<path d="M177.299 88.88C177.299 102.738 165.978 114.059 152.12 114.059C138.262 114.059 126.941 102.738 126.941 88.88V25.8352C126.941 11.977 138.262 0.656281 152.12 0.656281C165.978 0.656281 177.299 11.977 177.299 25.8352V88.88Z" fill="#2EB67D"/>
<path d="M152.12 189.986C165.978 189.986 177.299 201.307 177.299 215.165C177.299 229.023 165.978 240.344 152.12 240.344C138.262 240.344 126.941 229.023 126.941 215.165V189.986H152.12Z" fill="#ECB22E"/>
<path d="M152.12 177.299C138.262 177.299 126.941 165.978 126.941 152.12C126.941 138.262 138.262 126.941 152.12 126.941H215.165C229.023 126.941 240.344 138.262 240.344 152.12C240.344 165.978 229.023 177.299 215.165 177.299H152.12Z" fill="#ECB22E"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.9 KiB

Двоичные данные
public/images/featured_apps/slack.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 350 KiB

Просмотреть файл

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2228.833 2073.333"
enable-background="new 0 0 2228.833 2073.333" xml:space="preserve">
<metadata>
<sfw xmlns="&ns_sfw;">
<slices></slices>
<sliceSourceBounds bottomLeftOrigin="true" height="2073.333" width="2228.833" x="-1116.333" y="-1012.667">
</sliceSourceBounds>
</sfw>
</metadata>
<path fill="#5059C9" d="M1554.637,777.5h575.713c54.391,0,98.483,44.092,98.483,98.483c0,0,0,0,0,0v524.398
c0,199.901-162.051,361.952-361.952,361.952h0h-1.711c-199.901,0.028-361.975-162-362.004-361.901c0-0.017,0-0.034,0-0.052V828.971
C1503.167,800.544,1526.211,777.5,1554.637,777.5L1554.637,777.5z"/>
<circle fill="#5059C9" cx="1943.75" cy="440.583" r="233.25"/>
<circle fill="#7B83EB" cx="1218.083" cy="336.917" r="336.917"/>
<path fill="#7B83EB" d="M1667.323,777.5H717.01c-53.743,1.33-96.257,45.931-95.01,99.676v598.105
c-7.505,322.519,247.657,590.16,570.167,598.053c322.51-7.893,577.671-275.534,570.167-598.053V877.176
C1763.579,823.431,1721.066,778.83,1667.323,777.5z"/>
<path opacity="0.1" enable-background="new " d="M1244,777.5v838.145c-0.258,38.435-23.549,72.964-59.09,87.598
c-11.316,4.787-23.478,7.254-35.765,7.257H667.613c-6.738-17.105-12.958-34.21-18.142-51.833
c-18.144-59.477-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1244z"/>
<path opacity="0.2" enable-background="new " d="M1192.167,777.5v889.978c-0.002,12.287-2.47,24.449-7.257,35.765
c-14.634,35.541-49.163,58.833-87.598,59.09H691.975c-8.812-17.105-17.105-34.21-24.362-51.833
c-7.257-17.623-12.958-34.21-18.142-51.833c-18.144-59.476-27.402-121.307-27.472-183.49V877.02
c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z"/>
<path opacity="0.2" enable-background="new " d="M1192.167,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855h-447.84
c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z"/>
<path opacity="0.2" enable-background="new " d="M1140.333,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855H649.472
c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1140.333z"/>
<path opacity="0.1" enable-background="new " d="M1244,509.522v163.275c-8.812,0.518-17.105,1.037-25.917,1.037
c-8.812,0-17.105-0.518-25.917-1.037c-17.496-1.161-34.848-3.937-51.833-8.293c-104.963-24.857-191.679-98.469-233.25-198.003
c-7.153-16.715-12.706-34.071-16.587-51.833h258.648C1201.449,414.866,1243.801,457.217,1244,509.522z"/>
<path opacity="0.2" enable-background="new " d="M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293
c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z"/>
<path opacity="0.2" enable-background="new " d="M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293
c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z"/>
<path opacity="0.2" enable-background="new " d="M1140.333,561.355v103.148c-104.963-24.857-191.679-98.469-233.25-198.003
h138.395C1097.783,466.699,1140.134,509.051,1140.333,561.355z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="198.099" y1="1683.0726" x2="942.2344" y2="394.2607" gradientTransform="matrix(1 0 0 -1 0 2075.3333)">
<stop offset="0" style="stop-color:#5A62C3"/>
<stop offset="0.5" style="stop-color:#4D55BD"/>
<stop offset="1" style="stop-color:#3940AB"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M95.01,466.5h950.312c52.473,0,95.01,42.538,95.01,95.01v950.312c0,52.473-42.538,95.01-95.01,95.01
H95.01c-52.473,0-95.01-42.538-95.01-95.01V561.51C0,509.038,42.538,466.5,95.01,466.5z"/>
<path fill="#FFFFFF" d="M820.211,828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088V828.193z"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 4.6 KiB

Двоичные данные
public/images/featured_apps/teams.jpg Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 90 KiB

Просмотреть файл

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#9146FF;}
</style>
<title>Asset 2</title>
<g>
<polygon class="st0" points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200 "/>
<g>
<g id="Layer_1-2">
<path class="st1" d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600
V1300z"/>
<rect x="1700" y="550" class="st1" width="200" height="600"/>
<rect x="1150" y="550" class="st1" width="200" height="600"/>
</g>
</g>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 890 B

Двоичные данные
public/images/featured_apps/twitch.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 492 KiB

Просмотреть файл

@ -0,0 +1,41 @@
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
<path fill-rule="evenodd" clip-rule="evenodd" d="M181.534 254.252C185.566 255.823 190.164 255.722 194.234 253.764L246.94 228.403C252.478 225.738 256 220.132 256 213.983V42.0181C256 35.8689 252.478 30.2638 246.94 27.5988L194.234 2.23681C188.893 -0.333132 182.642 0.296344 177.955 3.70418C177.285 4.191 176.647 4.73454 176.049 5.33354L75.149 97.3862L31.1992 64.0247C27.1079 60.9191 21.3853 61.1735 17.5855 64.63L3.48936 77.4525C-1.15853 81.6805 -1.16386 88.9926 3.47785 93.2274L41.5926 128L3.47785 162.773C-1.16386 167.008 -1.15853 174.32 3.48936 178.548L17.5855 191.37C21.3853 194.827 27.1079 195.081 31.1992 191.976L75.149 158.614L176.049 250.667C177.645 252.264 179.519 253.467 181.534 254.252ZM192.039 69.8853L115.479 128L192.039 186.115V69.8853Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path d="M246.94 27.6383L194.193 2.24138C188.088 -0.698302 180.791 0.541721 175.999 5.33332L3.32371 162.773C-1.32082 167.008 -1.31548 174.32 3.33523 178.548L17.4399 191.37C21.2421 194.827 26.9682 195.081 31.0619 191.976L239.003 34.2269C245.979 28.9347 255.999 33.9103 255.999 42.6667V42.0543C255.999 35.9078 252.478 30.3047 246.94 27.6383Z" fill="#0065A9"/>
<g filter="url(#filter0_d)">
<path d="M246.94 228.362L194.193 253.759C188.088 256.698 180.791 255.458 175.999 250.667L3.32371 93.2272C-1.32082 88.9925 -1.31548 81.6802 3.33523 77.4523L17.4399 64.6298C21.2421 61.1733 26.9682 60.9188 31.0619 64.0245L239.003 221.773C245.979 227.065 255.999 222.09 255.999 213.333V213.946C255.999 220.092 252.478 225.695 246.94 228.362Z" fill="#007ACC"/>
</g>
<g filter="url(#filter1_d)">
<path d="M194.196 253.763C188.089 256.7 180.792 255.459 176 250.667C181.904 256.571 192 252.389 192 244.039V11.9606C192 3.61057 181.904 -0.571175 176 5.33321C180.792 0.541166 188.089 -0.700607 194.196 2.23648L246.934 27.5985C252.476 30.2635 256 35.8686 256 42.0178V213.983C256 220.132 252.476 225.737 246.934 228.402L194.196 253.763Z" fill="#1F9CF0"/>
</g>
<g style="mix-blend-mode:overlay" opacity="0.25">
<path fill-rule="evenodd" clip-rule="evenodd" d="M181.378 254.252C185.41 255.822 190.008 255.722 194.077 253.764L246.783 228.402C252.322 225.737 255.844 220.132 255.844 213.983V42.0179C255.844 35.8687 252.322 30.2636 246.784 27.5986L194.077 2.23665C188.737 -0.333299 182.486 0.296177 177.798 3.70401C177.129 4.19083 176.491 4.73437 175.892 5.33337L74.9927 97.386L31.0429 64.0245C26.9517 60.9189 21.229 61.1734 17.4292 64.6298L3.33311 77.4523C-1.31478 81.6803 -1.32011 88.9925 3.3216 93.2273L41.4364 128L3.3216 162.773C-1.32011 167.008 -1.31478 174.32 3.33311 178.548L17.4292 191.37C21.229 194.827 26.9517 195.081 31.0429 191.976L74.9927 158.614L175.892 250.667C177.488 252.264 179.363 253.467 181.378 254.252ZM191.883 69.8851L115.323 128L191.883 186.115V69.8851Z" fill="url(#paint0_linear)"/>
</g>
</g>
<defs>
<filter id="filter0_d" x="-21.4896" y="40.5225" width="298.822" height="236.149" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="10.6667"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="154.667" y="-20.6735" width="122.667" height="297.347" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="10.6667"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="127.844" y1="0.659988" x2="127.844" y2="255.34" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>

После

Ширина:  |  Высота:  |  Размер: 4.3 KiB

Двоичные данные
public/images/featured_apps/vscode.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 595 KiB

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

После

Ширина:  |  Высота:  |  Размер: 156 KiB

Двоичные данные
public/images/featured_apps/whatsapp.jfif Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 204 KiB

Просмотреть файл

@ -24,175 +24,55 @@
max-height: 200px;
}
// Companies section --------------------------
// Featured apps section --------------------------
.featured-company-list-item {
flex-basis: 250px;
height: 104px;
.featured-apps {
display: flex;
justify-content: center;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
a.featured-app-list-item {
background-color: #e4e4e4;
padding: 20px;
margin: 20px;
display: inline-block;
transition: background-color 200ms ease-in-out;
position: relative;
min-width: 200px;
&:hover {
background-color: #f3f3f3;
}
img {
width: 250px;
height: 104px;
max-height: 400px;
}
}
// Apps section ------------------------------
/* Featured Apps with Icons */
.featured-app {
display: inline-block !important;
vertical-align: top !important;
width: 140px !important;
padding: 0 !important;
color: $main-color-subtle !important;
margin: 10px 20px !important;
&:hover {
text-decoration: none !important;
h4 {
margin-top: 10px;
}
}
.featured-app-logo-wrapper {
width: 120px !important;
height: 120px !important;
margin: 10px !important;
transition: transform .32s !important;
}
.featured-app:hover .featured-app-logo-wrapper {
transform: scale(1.1);
transition-duration: .08s;
}
.featured-app:active .featured-app-logo-wrapper {
transform: scale(.92);
transition-duration: 0;
}
.featured-app-logo {
width: 100%;
}
.featured-app-name {
text-align: center;
text-decoration: none;
line-height: 1.3;
font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Listed Apps with Icons */
$app-list-icon-size: 48px;
.app-list {
list-style: none;
margin: 0;
padding: 0;
}
.listed-app {
text-align: left;
}
// Override .filterable-list
.listed-app.listed-app {
padding: 0;
margin-bottom: 0;
border-bottom: none;
}
.listed-app > a {
display: flex;
padding: 10px;
border: 1px solid transparent;
}
.listed-app > a:hover,
.listed-app > a:focus {
text-decoration: none;
text-decoration: none;
border-color: $main-border-color;
background-color: $main-bg-color-shade;
outline: none;
}
.listed-app-logo-wrapper {
display: inline-block;
width: $app-list-icon-size;
height: $app-list-icon-size;
position: relative;
}
// TODO(HashimotoYT): RFC: Design review.
.listed-app-logo-placeholder {
position: absolute;
top: 5px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
border-radius: 50%;
margin: 0;
padding: 0;
z-index: 1;
}
.listed-app-logo {
.icon {
position: absolute;
top: 0;
left: 0;
max-width: 48px;
height: 48px;
z-index: 2;
}
.listed-app-name {
padding: 0 10px;
font-weight: 500;
}
.listed-app-description {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.listed-app-date {
font-size: 12px;
padding-left: 15px;
display: none;
}
.listed-app:hover .listed-app-date {
display: inherit;
}
.listed-app span {
line-height: $app-list-icon-size;
vertical-align: bottom;
}
/* Featured Apps without Icons */
.featured-app-textual {
padding: 5px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include breakpoint(md) {
display: inline-block;
vertical-align: top;
width: calc(50% - 20px);
padding: 5px 20px;
text-align: left;
height: 35%;
right: 10px;
float: left;
bottom: 35px;
}
}
@media screen and (max-width: 1300px) {
.featured-apps {
flex-wrap: wrap;
}
a.featured-app-list-item {
max-width: 200px;
}
}
// Getting Started section ------------------------------

Просмотреть файл

@ -1,15 +1,20 @@
const shuffle = require('knuth-shuffle-seeded')
const apps = require('../lib/apps')
const featuredCompanies = require('../lib/featured-companies')
const showAnnouncementBanner = new Date() < new Date(2020, 1, 1)
const featuredApps = require('../lib/featured-apps')
module.exports = (req, res) => {
const randomizedApps = shuffle(apps.slice())
const apps = [];
Object.keys(featuredApps).forEach((k) => {
// One app out of each category
const category = featuredApps[k]
const random = Math.floor(Math.random() * category.length);
apps.push(category[random]);
})
const context = Object.assign(req.context, {
companies: featuredCompanies,
apps: randomizedApps.slice(0, 25),
showAnnouncementBanner
showAnnouncementBanner: false,
apps
})
res.render('home', context)

Просмотреть файл

@ -43,18 +43,29 @@
</div>
</div>
<hr class="pt-8">
<div class="py-6 py-md-7 py-lg-8">
<h1 class="f0-light text-center-sm">{{{localized.electron_is_good.title}}}</h1>
<div class="featured-apps my-2 my-md-3">
{{#each apps}}
<a class="featured-app-list-item" href="{{ this.url }}" target="_blank" rel="noopener">
<img data-src="{{ site.baseurl }}/images/featured_apps/{{ screenshot }}" alt="{{ this.name }}">
<img class="icon" data-src="{{ site.baseurl }}/images/featured_apps/{{ icon }}" alt="{{ this.name }} icon">
<h4>{{this.name}}</h4>
</a>
{{/each}}
</div>
<p class="lead text-center-sm">{{{localized.electron_is_good.description}}}</p>
</div>
<hr class="pt-8">
<div class="py-6 py-md-7 py-lg-8" id="electron">
<div class="container-lg p-responsive">
<h1 class="f0-light text-center-sm">{{{localized.electron_is_easy.title}}}</h1>
<p class="lead text-center-sm">{{{localized.electron_is_easy.description}}}</p>
<p class="text-center-sm mt-4 mb-8">
<a class="btn-mktg btn-outline-mktg mr-2" type="button" href="https://youtu.be/8YP_nOCO-4Q">
<span class="octicon octicon-eye mr-1"></span>
<span>{{{localized.electron_is_easy.video_link}}}</span>
</a>
</p>
<hr class="pt-8">
<div class="d-sm-flex flex-row text-center text-small mt-6">
@ -75,10 +86,6 @@
</div>
</div>
<div class="text-center mt-8 mb-4">
<h2 class="f0-light">{{{localized.benefits.hard_parts_made_easy}}}</h2>
</div>
<div class="d-sm-flex flex-row text-center text-small mt-3 clearfix">
<div class="col-xs-12 col-sm-4 col-md-2 offset-md-1 mb-xs-4 mb-md-0 hero-feature">
<a class="hero-link" href="/docs/api/auto-updater/">
@ -212,44 +219,4 @@ $ npm install &amp;&amp; npm start</code></pre>
</div>
</div>
<div class='py-7 py-md-8 py-lg-9' id='apps'>
<div class="container-lg text-center">
<h1 class="f0-light">{{{localized.companies.title}}}</h1>
<p class="lead">
{{{localized.companies.description}}}
</p>
<div class="my-4">
<ul class="d-flex flex-justify-around flex-wrap list-style-none my-2 my-md-3">
{{#each companies}}
<li class="featured-company-list-item">
<a href="{{ this.url }}" target="_blank" rel="noopener">
<img data-src="{{ site.baseurl }}/images/companies/{{ img }}" alt="{{ this.name }}" class="px-2">
</a>
</li>
{{/each}}
</ul>
</div>
<hr class="mt-4 mb-4" />
<p class="lead">
{{{localized.apps.description}}}
</p>
<div>
<div class="py-7 py-md-8 py-lg-9">
{{#each apps}}
{{> featured_app}}
{{/each}}
</div>
<p class="mt-6">
<a href='/apps'>{{{localized.apps.view_more}}}</a>
{{{localized.or}}}
<a href="https://github.com/electron/electron-apps/blob/master/contributing.md#adding-your-app">{{{localized.apps.submit_your_own}}}</a>.
</p>
</div>
</div>
</div>
</main>