From 1772d5751f8f24e469f49fa48cce87aa2d7e80a8 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sun, 17 Jul 2022 19:24:58 +0600 Subject: [PATCH] [website] Landing Page new content addition Footer addition --- website/components/DownloadButton.tsx | 80 +++++++++++ website/components/Footer.tsx | 88 +++++++++++++ website/pages/_app.tsx | 2 + website/pages/index.tsx | 183 +++++++++++++++----------- website/public/headline-1.png | Bin 0 -> 344416 bytes website/public/headline-2a.svg | 1 + website/public/headline-2b.png | Bin 0 -> 1167053 bytes website/public/headline-3.svg | 1 + 8 files changed, 279 insertions(+), 76 deletions(-) create mode 100644 website/components/DownloadButton.tsx create mode 100644 website/components/Footer.tsx create mode 100644 website/public/headline-1.png create mode 100644 website/public/headline-2a.svg create mode 100644 website/public/headline-2b.png create mode 100644 website/public/headline-3.svg diff --git a/website/components/DownloadButton.tsx b/website/components/DownloadButton.tsx new file mode 100644 index 00000000..d1126713 --- /dev/null +++ b/website/components/DownloadButton.tsx @@ -0,0 +1,80 @@ +import { + Menu, + ButtonGroup, + Button, + MenuButton, + IconButton, + MenuList, + MenuItem, + Link as Anchor, +} from "@chakra-ui/react"; +import { Platform, usePlatform } from "hooks/usePlatform"; +import React from "react"; +import { FaCaretDown } from "react-icons/fa"; + +const baseURL = "https://github.com/KRTirtho/spotube/releases/latest/download/"; + +const DownloadLinks = Object.freeze({ + [Platform.linux]: [ + { name: "deb", url: baseURL + "Spotube-linux-x86_64.deb" }, + { name: "tar", url: baseURL + "Spotube-linux-x86_64.tar.xz" }, + { name: "AppImage", url: baseURL + "Spotube-linux-x86_64.AppImage" }, + ], + [Platform.android]: [ + { + name: "apk", + url: baseURL + "Spotube-android-all-arch.apk", + }, + ], + [Platform.mac]: [{ name: "dmg", url: baseURL + "Spotube-macos-x86_64.dmg" }], + [Platform.windows]: [ + { name: "exe", url: baseURL + "Spotube-windows-x86_64-setup.exe" }, + { name: "nupkg", url: baseURL + "Spotube-windows-x86_64.nupkg " }, + ], +}); + +const DownloadButton = () => { + const platform = usePlatform(); + + const allPlatforms = Object.entries(Platform) + .map(([, value]) => { + return DownloadLinks[value].map((s) => ({ + ...s, + name: `${value} (.${s.name})`, + })); + }) + .flat(1); + + const currentPlatform = DownloadLinks[platform][0]; + return ( + + + + } + /> + + + {allPlatforms.map(({ name, url }) => { + return ( + + {name} + + ); + })} + + + ); +}; + +export default DownloadButton; diff --git a/website/components/Footer.tsx b/website/components/Footer.tsx new file mode 100644 index 00000000..b940815d --- /dev/null +++ b/website/components/Footer.tsx @@ -0,0 +1,88 @@ +import { Flex, chakra, Link, IconButton } from "@chakra-ui/react"; + +import { FaGithub, FaRedditAlien } from "react-icons/fa"; +import { FiTwitter } from "react-icons/fi"; + +const Footer = () => { + return ( + + + Spotube + + + + © 2022, Spotube. All rights reserved + + + + } + variant="link" + /> + } + variant="link" + /> + } + variant="link" + /> + + + ); +}; + +export default Footer; diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx index ea3a15df..9d89b37b 100755 --- a/website/pages/_app.tsx +++ b/website/pages/_app.tsx @@ -13,6 +13,7 @@ import * as gtag from "configurations/gtag"; import { useRouter } from "next/router"; import { useEffect } from "react"; import AdDetector from "components/AdDetector"; +import Footer from "components/Footer"; const customTheme = extendTheme( { @@ -116,6 +117,7 @@ function MyApp({ Component, pageProps }: AppProps) { +