kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 07:55:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

website: Enhance mobile responsiveness (#647)

Browse Source 
* feat: Enhance mobile responsiveness

Adjusted the code to improve the display and functionality on mobile devices. This includes responsive design updates and layout adjustments to ensure a better user experience on smaller screens.

* Delete package-lock.json
This commit is contained in:
Yaroslav Dmitriev 2023-08-23 09:08:36 +05:00 committed by GitHub
parent 0ab1dcaa6b
commit af51baa2d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
website/pages/index.tsx
View File

@ -7,7 +7,7 @@ import {
useColorModeValue, useColorModeValue,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import DownloadButton from "components/DownloadButton"; import DownloadButton from "components/DownloadButton";
import Image from "next/image"; import Image from 'next/image';
const Root = () => { const Root = () => {
const textColor = useColorModeValue("#171717", "#f5f5f5"); const textColor = useColorModeValue("#171717", "#f5f5f5");
@ -46,17 +46,43 @@ const Root = () => {
{/* <DisplayAd slot="9501208974" /> */} {/* <DisplayAd slot="9501208974" /> */}
<chakra.div bgGradient="linear-gradient(180deg, rgba(249,207,143,1) 0%, rgba(250,250,250,1) 45%)"> <chakra.div bgGradient="linear-gradient(180deg, rgba(249,207,143,1) 0%, rgba(250,250,250,1) 45%)">
<VStack <VStack
bgImage="url(/headline-1.png)" p="5"
mt="10"
pos="relative"
_before={{
content: "''",
position: "absolute",
left: 0,
right: 0,
zIndex: -1,
display: "block",
height: "100%",
width: "100%",
background: "url('/headline-2b.png') rgba(0, 0, 0, 0.9)",
bgSize: "contain",
bgRepeat: "no-repeat",
bgPos: "center",
filter: "blur(2px)",
}}
flexDirection={{ base: "column", md: "row" }} // Stack content vertically on mobile, reverse order on desktop
alignItems="center" // Center align content vertically on mobile
textAlign="center" // Center align text horizontally on mobile
>
<chakra.div maxW="600px">
<Image
src="/headline-1.png"
m="10" m="10"
bgRepeat="no-repeat" bgRepeat="no-repeat"
bgSize="contain" bgSize="contain"
h="60vh" h="60vh"
alignItems={useColorModeValue("flex-end", "flex-start")} width="1020"
bgPos={useColorModeValue("left", "right")} height="780"
justify="center" layout="intrinsic"
> alt="Headline 2"
/>
</chakra.div>
<chakra.div <chakra.div
maxW={{ base: "full", md: "300px", lg: " 400px" }} maxW="500px"
bgGradient={{ bgGradient={{
base: "radial-gradient(circle, #ffffff 23%, rgba(0,0,0,0) 82%)", base: "radial-gradient(circle, #ffffff 23%, rgba(0,0,0,0) 82%)",
md: "radial-gradient(circle, #ffffff00 23%, rgba(0,0,0,0) 82%)", md: "radial-gradient(circle, #ffffff00 23%, rgba(0,0,0,0) 82%)",
@ -67,7 +93,7 @@ const Root = () => {
<Text> <Text>
You can use all your Spotify tracks & playlists here. Everything You can use all your Spotify tracks & playlists here. Everything
will be in Sync & some action taken from Spotube will also will be in Sync & some action taken from Spotube will also
reflect on your Spotify Account reflect on your Spotify Account.
</Text> </Text>
</chakra.div> </chakra.div>
</VStack> </VStack>
@ -137,12 +163,11 @@ const Root = () => {
/> />
</chakra.div> </chakra.div>
</HStack> </HStack>
<VStack py="10"> <VStack py="10" alignItems="center" textAlign="center">
<div> <div>
<Heading size="lg">Download Now</Heading> <Heading size="lg">Download Now</Heading>
<Text> <Text>
Download Spotube for every platform you want. It&apos;s available Download Spotube for every platform you want. It's available everywhere.
everywhere
</Text> </Text>
</div> </div>
<DownloadButton /> <DownloadButton />