launch banner (To be merged Nov 1) (#470)

* launch banner

* Downloads page overhaul start

* Fix link to launch content

* 2.0 updates
This commit is contained in:
Sacha Weatherstone 2022-11-01 23:45:25 +11:00 committed by GitHub
parent 2ab463cf5c
commit af0865b1e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 201 additions and 173 deletions

View file

@ -24,7 +24,7 @@ The 4 byte header is constructed to both provide framing and to not look line 'n
- Byte 2: MSB of protobuf length
- Byte 3: LSB of protobuf length
The receiver will validate length and if >512 it will assume the packet is corrupted and return to looking for START1. While looking for START1 any other characters are printed as "debug output". For small example implementation of this reader see the meshtastic-python implementation.
The receiver will validate length and if >512 it will assume the packet is corrupted and return to looking for START1. While looking for START1 any other characters are printed as "debug output". For small example implementation of this reader see the python implementation.
## MeshBluetoothService (the BLE API)

View file

@ -15,6 +15,11 @@ const config = {
organizationName: 'meshtastic',
projectName: 'meshtastic',
themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ {
announcementBar: {
id: '2_0',
content:
'🎉 Meshtastic 2.0 Has Now Launched! Check it Out <a href="/2.0">Here</a> 🎉',
},
colorMode: {
respectPrefersColorScheme: true,
},

View file

@ -39,7 +39,7 @@
"@meshtastic/eslint-config": "^1.0.8",
"@tailwindcss/typography": "^0.5.7",
"@tsconfig/docusaurus": "^1.0.6",
"@types/node": "^18.11.8",
"@types/node": "^18.11.9",
"@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8",
"prettier": "^2.7.1",

View file

@ -13,7 +13,7 @@ specifiers:
'@meshtastic/eslint-config': ^1.0.8
'@tailwindcss/typography': ^0.5.7
'@tsconfig/docusaurus': ^1.0.6
'@types/node': ^18.11.8
'@types/node': ^18.11.9
'@types/react': ^18.0.24
'@types/react-dom': ^18.0.8
autoprefixer: ^10.4.13
@ -58,7 +58,7 @@ devDependencies:
'@meshtastic/eslint-config': 1.0.8
'@tailwindcss/typography': 0.5.7_tailwindcss@3.2.1
'@tsconfig/docusaurus': 1.0.6
'@types/node': 18.11.8
'@types/node': 18.11.9
'@types/react': 18.0.24
'@types/react-dom': 18.0.8
prettier: 2.7.1
@ -2929,26 +2929,26 @@ packages:
resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
dependencies:
'@types/connect': 3.4.35
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/bonjour/3.5.10:
resolution: {integrity: sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/connect-history-api-fallback/1.3.5:
resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==}
dependencies:
'@types/express-serve-static-core': 4.17.28
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/connect/3.4.35:
resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/eslint-scope/3.7.3:
@ -2969,7 +2969,7 @@ packages:
/@types/express-serve-static-core/4.17.28:
resolution: {integrity: sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
'@types/qs': 6.9.7
'@types/range-parser': 1.2.4
dev: false
@ -2999,7 +2999,7 @@ packages:
/@types/http-proxy/1.17.8:
resolution: {integrity: sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/json-schema/7.0.11:
@ -3012,7 +3012,7 @@ packages:
/@types/keyv/3.1.4:
resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/mdast/3.0.10:
@ -3029,8 +3029,8 @@ packages:
resolution: {integrity: sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==}
dev: false
/@types/node/18.11.8:
resolution: {integrity: sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==}
/@types/node/18.11.9:
resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
/@types/parse-json/4.0.0:
resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
@ -3087,7 +3087,7 @@ packages:
/@types/responselike/1.0.0:
resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/retry/0.12.1:
@ -3097,7 +3097,7 @@ packages:
/@types/sax/1.2.4:
resolution: {integrity: sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/scheduler/0.16.2:
@ -3113,13 +3113,13 @@ packages:
resolution: {integrity: sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==}
dependencies:
'@types/mime': 1.3.2
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/sockjs/0.3.33:
resolution: {integrity: sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@types/unist/2.0.6:
@ -3129,7 +3129,7 @@ packages:
/@types/ws/8.5.3:
resolution: {integrity: sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: false
/@typescript-eslint/eslint-plugin/5.22.0_4bcn5aatkhkr3q2dzj4ewaqjbe:
@ -5050,7 +5050,7 @@ packages:
resolution: {integrity: sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==}
engines: {node: '>= 0.8'}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
require-like: 0.1.2
dev: false
@ -6235,7 +6235,7 @@ packages:
resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
engines: {node: '>= 10.13.0'}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
merge-stream: 2.0.0
supports-color: 8.1.1

View file

@ -10,9 +10,9 @@ import Layout from '@theme/Layout';
const TwoPointZero = (): JSX.Element => {
const stats = [
{ label: 'Active Nodes', value: 'xx+' },
{ label: 'Active Nodes', value: 'A Lot!' },
{ label: 'Community Members', value: '4000+' },
{ label: 'Total Commits', value: '4800+' },
{ label: 'Firmware Commits', value: '4900+' },
{ label: 'Community Donations', value: '$5700+' },
];
const logos = [
@ -87,12 +87,12 @@ const TwoPointZero = (): JSX.Element => {
giveaways, so jump in and win some prizes.
</p>
<div className="flex gap-2">
<button
type="submit"
className="block w-full rounded-md border border-transparent bg-rose-500 px-5 py-3 text-base font-medium text-white shadow hover:bg-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10"
<a
href="#start"
className="flex w-full rounded-md border border-transparent bg-rose-500 px-5 py-3 text-base font-medium text-white shadow hover:bg-rose-600 hover:text-black hover:no-underline focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10"
>
Find Out More
</button>
<span className="m-auto">Find Out More</span>
</a>
<a
className="flex w-16 rounded-md border border-transparent bg-[#1DA1F2] shadow hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2"
target="_blank"
@ -236,16 +236,14 @@ const TwoPointZero = (): JSX.Element => {
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<p className="relative">
Tincidunt integer commodo, cursus etiam aliquam
neque, et. Consectetur pretium in volutpat, diam.
Montes, magna cursus nulla feugiat dignissim id
lobortis amet.
Meshtastic is the neatest open source I've ever
seen!
</p>
</div>
<footer className="mt-4">
<p className="text-base font-semibold text-rose-200">
Quote author
Elvis Presley
</p>
</footer>
</blockquote>
@ -254,34 +252,64 @@ const TwoPointZero = (): JSX.Element => {
</div>
</div>
<div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0">
<div
id="start"
className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0"
>
{/* Content area */}
<div className="pt-12 sm:pt-16 lg:pt-20">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
A brief overview of all the changes and improvements
</h2>
<div className="mt-6 space-y-6 text-gray-500">
<p className="text-lg">
Sagittis scelerisque nulla cursus in enim consectetur
quam. Dictum urna sed consectetur neque tristique
pellentesque. Blandit amet, sed aenean erat arcu morbi.
Cursus faucibus nunc nisl netus morbi vel porttitor vitae
ut. Amet vitae fames senectus vitae.
</p>
<h2>Monumental stuff!</h2>
<p className="text-base leading-7">
Sollicitudin tristique eros erat odio sed vitae, consequat
turpis elementum. Lorem nibh vel, eget pretium arcu vitae.
Eros eu viverra donec ut volutpat donec laoreet quam urna.
Sollicitudin tristique eros erat odio sed vitae, consequat
turpis elementum. Lorem nibh vel, eget pretium arcu vitae.
Eros eu viverra donec ut volutpat donec laoreet quam urna.
<li>
Completely new LoRA band plan with faster messaging
</li>
<li>Smarter and more reliable mesh routing</li>
<li>
Unlimited nodes* (80 Connected at a time, oldest node
will be removed when a new node joins the mesh)
</li>
<li>
New messaging additions: waypoints, reactions
(tap-backs), and telemetry
</li>
<li>
Improvements for Canned Messages module and CardKB
messaging for stand alone communicator devices
</li>
<li>Sensor, Screen, and Input device auto-detection</li>
<li>New devices supported (6 new targets!)</li>
<li>
Added over the air bluetooth updates for NRF devices
(RAK-4631)
</li>
<li>Ethernet support via RAK-13800</li>
<li>
Compass improvements for larger screens and
customizations
</li>
</p>
<h2>Nerd stuff!</h2>
<p className="text-base leading-7">
Rhoncus nisl, libero egestas diam fermentum dui. At quis
tincidunt vel ultricies. Vulputate aliquet velit faucibus
semper. Pellentesque in venenatis vestibulum consectetur
nibh id. In id ut tempus egestas. Enim sit aliquam nec, a.
Morbi enim fermentum lacus in. Viverra.
<li>New filesystem for ESP32 (LittleFS)</li>
<li>
Upgraded Arduino framework for both NRF52 and ESP32
</li>
<li>New bluetooth stack for ESP32 (NimBLE)</li>
<li>Unified GPS stack now using NMEA</li>
<li>Support for more I2C sensors</li>
<li>Support for ATECCA608B Cryptographic Coprocessor</li>
<li>More Serial module I/O modes</li>
<li>JSON messages over MQTT</li>
<li>
Device codebase refactored and optimized in many areas
</li>
<li>
Completely restructured protobufs and configuration
</li>
</p>
</div>
</div>
@ -303,11 +331,6 @@ const TwoPointZero = (): JSX.Element => {
</div>
))}
</dl>
<div className="mt-10">
<a href="#" className="text-base font-medium text-rose-500">
Further reading...
</a>
</div>
</div>
</div>
</div>
@ -415,7 +438,7 @@ const TwoPointZero = (): JSX.Element => {
</div>
<FlipClockCountdown
className="m-auto"
to={new Date(2022, 12, 1).getTime()}
to={new Date(2022, 11, 1).getTime()}
/>
</div>
</div>

View file

@ -14,7 +14,7 @@ export const FirmwareCard = ({
release,
}: releaseCardProps): JSX.Element => {
return (
<div className="card">
<div className="card m-4 border-2 border-secondary">
<div
className="card__header"
style={{ display: 'flex', justifyContent: 'space-between' }}

View file

@ -1,18 +1,23 @@
import React from 'react';
import { FaAndroid, FaApple } from 'react-icons/fa';
import useSWR from 'swr';
// import { Endpoints } from '@octokit/types';
import {
ArrowTopRightOnSquareIcon,
BoltIcon,
ComputerDesktopIcon,
CpuChipIcon,
GlobeAltIcon,
} from '@heroicons/react/24/solid';
import Layout from '@theme/Layout';
import { Release } from '../../utils/github';
import { fetcher } from '../../utils/swr';
import { DownloadCard } from './_components/DownloadCard';
import {
FirmwareCard,
PlaceholderFirmwareCard,
} from './_components/FirmwareCard';
import { HeaderText } from './_components/HeaderText';
const Firmware = (): JSX.Element => {
const { data, error } = useSWR<Release[]>(
@ -28,87 +33,112 @@ const Firmware = (): JSX.Element => {
title="Downloads"
description="Downloads for the Meshtastic project"
>
<main className="margin-vert--xl">
<div className="container">
<HeaderText type="h1" text="Downloads" />
<div className="container mt-8 flex flex-col gap-3">
<h1 className="m-2">Flasher</h1>
<div className="flex h-48 w-full overflow-hidden rounded-xl">
<div className="flex w-1/5 bg-gradient-to-r from-green-500 to-primary">
<BoltIcon className="m-auto h-20" />
</div>
<div className="w-full bg-primary">
<div className="m-auto mt-8 w-96">
<h3>Meshtastic Flasher</h3>
<p className="mb-3">
Desktop application to flash fimware to your devices.
</p>
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/meshtastic/Meshtastic-gui-installer/releases/latest"
className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
>
Download
<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
</a>
</div>
</div>
</div>
<div className="container">
<HeaderText
type="h2"
text="Install Meshtastic"
link="install-meshtastic"
/>
<DownloadCard
client="Meshtastic Flasher"
buttonText="Download Meshtastic Flasher"
url="https://github.com/meshtastic/Meshtastic-gui-installer/releases/latest"
notes={[
'To download using ',
<code>pip</code>,
' follow ',
<a href="/docs/software/python/meshtastic-flasher#install-using-pip">
these instructions
</a>,
'.',
]}
/>
{/* */}
<h1 className="m-2">Apps</h1>
<div className="flex h-48 w-full overflow-hidden rounded-xl">
<div className="flex w-1/5 bg-gradient-to-r from-rose-500 to-primary">
<ComputerDesktopIcon className="m-auto h-20" />
</div>
<div className="flex w-full bg-primary">
<div className="flex w-1/3 p-4">
<div className="flex flex-grow rounded-md border-2 border-secondary bg-primary shadow-md hover:brightness-90">
<div className="m-auto">
<FaApple className="h-20 w-20" />
</div>
<div className="m-auto flex flex-col gap-3">
<h2>Apple</h2>
<a
target="_blank"
rel="noopener noreferrer"
href="https://testflight.apple.com/join/c8nNl8q1"
className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
>
App Store
<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
</a>
</div>
</div>
</div>
<div className="flex w-1/3 p-4">
<div className="relative flex flex-grow rounded-md border-2 border-secondary bg-primary shadow-md hover:brightness-90">
<div className="m-auto">
<FaAndroid className="h-20 w-20" />
</div>
<div className="m-auto flex flex-col gap-3">
<h2>Android</h2>
<a
target="_blank"
rel="noopener noreferrer"
href="https://play.google.com/store/apps/details?id=com.geeksville.mesh&referrer=utm_source=downloads-page"
className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
>
Play Store
<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
</a>
<a
className="absolute bottom-2 flex"
target="_blank"
rel="noopener noreferrer"
href="https://meshtastic.org/docs/software/android/#f-droid"
>
F-Droid
<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
</a>
</div>
</div>
</div>
<div className="flex w-1/3 p-4">
<div className="flex flex-grow rounded-md border-2 border-secondary bg-primary shadow-md hover:brightness-90">
<div className="m-auto">
<GlobeAltIcon className="h-20 w-20" />
</div>
<div className="m-auto flex flex-col gap-3">
<h2>Web</h2>
<a
target="_blank"
rel="noopener noreferrer"
href="https://client.meshtastic.org"
className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
>
meshtastic.org
<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
</a>
</div>
</div>
</div>
</div>
</div>
<div className="container">
<HeaderText
type="h2"
text="Mobile Downloads"
link="mobile-downloads"
/>
<ul
style={{
position: 'relative',
display: 'grid',
gap: '1.5rem',
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
paddingLeft: '0',
}}
>
<DownloadCard
client="Android"
imgUrl="https://f-droid.org/badge/get-it-on.png"
url="https://meshtastic.org/docs/software/android/#f-droid"
imgUrl2="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
url2="https://play.google.com/store/apps/details?id=com.geeksville.mesh&referrer=utm_source=downloads-page"
notes={[
'To sideload, ',
<a
href="https://github.com/meshtastic/Meshtastic-Android/releases/latest"
rel="noreferrer"
target="_blank"
>
download the latest .apk
</a>,
' from Github',
]}
/>
<DownloadCard
client="iOS"
url="https://testflight.apple.com/join/c8nNl8q1"
buttonText="Download on TestFlight"
notes="Currently only available in TestFlight"
/>
</ul>
</div>
<div className="container">
<HeaderText
type="h2"
text="Firmware Downloads"
link="firmware-downloads"
/>
<ul
style={{
position: 'relative',
display: 'grid',
gap: '1.5rem',
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
paddingLeft: '0',
}}
>
{/* */}
<h1 className="m-2">Firmware</h1>
<div className="flex w-full overflow-hidden rounded-xl">
<div className="flex w-1/5 bg-gradient-to-r from-orange-500 to-primary">
<CpuChipIcon className="m-auto h-20" />
</div>
<div className="flex w-full bg-primary">
{data && !error ? (
<>
<FirmwareCard
@ -121,7 +151,7 @@ const Firmware = (): JSX.Element => {
description="Upcoming changes for testing. For those who want new features."
release={alpha}
/>
<div className="card">
<div className="card m-4 border-2 border-secondary">
<div className="card__header">
<h3>Bleeding</h3>
</div>
@ -148,39 +178,9 @@ const Firmware = (): JSX.Element => {
<PlaceholderFirmwareCard />
</>
)}
</ul>
Once downloaded, follow the flashing instructions for{' '}
<a
href="/docs/getting-started/flashing-firmware/flashing-esp32"
rel="noreferrer"
target="_blank"
>
ESP32 chipsets
</a>
,{' '}
<a
href="/docs/getting-started/flashing-firmware/flashing-nrf52"
rel="noreferrer"
target="_blank"
>
NRF52 chipsets
</a>
, or the{' '}
<a
href="/docs/software/python/meshtastic-flasher"
rel="noreferrer"
target="_blank"
>
GUI instructions for Meshtastic Flasher
</a>
.
</div>
</div>
<div className="container">
<i>
Google Play and the Google Play logo are trademarks of Google LLC.
</i>
</div>
</main>
</div>
</Layout>
);
};