style: adjust component spacing and layout for improved mobile display

This commit is contained in:
2025-10-14 15:35:00 +02:00
parent 661e035e19
commit f22a288dd9
5 changed files with 6 additions and 6 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 107 KiB

View File

@@ -6,7 +6,7 @@ export function About() {
return (
<section
id="about"
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 -top-12"
>
<div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
<CircleBackground color="#fff" className="animate-spin-slower" />

View File

@@ -51,7 +51,7 @@ export function AppScreen({
}: React.ComponentPropsWithoutRef<'div'>) {
return (
<div className={clsx('flex flex-col', className)} {...props}>
<div className="flex justify-between px-4 pt-4">
<div className="flex justify-between px-4 pt-0">
<MenuIcon className="h-6 w-6 flex-none" />
<Logo className="h-6 flex-none" />
<UserIcon className="h-6 w-6 flex-none" />

View File

@@ -6,7 +6,7 @@ import ContentDistribution from '@/components/ContentDistribution'
export function Features() {
return (
<section id="features" className="bg-white py-24 sm:py-32">
<section id="features" className=" py-24">
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<p className="mt-2 max-w-lg text-3xl lg:text-4xl lg:text-4xl font-medium tracking-tight text-pretty text-gray-950">
Network Capabilities

View File

@@ -194,7 +194,7 @@ type ScreenProps =
function InviteScreen(props: ScreenProps) {
return (
<AppScreen className="w-full">
<Image src="/images/connector.png" alt="Mycelium Connector" width={366} height={732} />
<Image src="/images/connector.png" alt="Mycelium Connector" width={366} height={732} className="mt-[-2rem]" />
</AppScreen>
)
}
@@ -202,7 +202,7 @@ function InviteScreen(props: ScreenProps) {
function StocksScreen(props: ScreenProps) {
return (
<AppScreen className="w-full">
<Image src="/images/peers.png" alt="Mycelium Peers" width={366} height={732} />
<Image src="/images/peers.png" alt="Mycelium Peers" width={366} height={732} className="mt-[-2rem]" />
</AppScreen>
)
}
@@ -210,7 +210,7 @@ function StocksScreen(props: ScreenProps) {
function InvestScreen(props: ScreenProps) {
return (
<AppScreen className="w-full">
<Image src="/images/setting.png" alt="Mycelium Settings" width={366} height={732} />
<Image src="/images/setting.png" alt="Mycelium Settings" width={366} height={732} className="mt-[-2rem]" />
</AppScreen>
)
}