From e90d57b9e306b2377da18824d84a13343e5e3958 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Tue, 14 Oct 2025 16:04:32 +0200
Subject: [PATCH] style: improve responsive layout and spacing for mobile
 devices

---
 src/components/About.tsx      |  2 +-
 src/components/Container.tsx  |  2 +-
 src/components/Hero.tsx       | 20 ++++++++++----------
 src/components/PhoneFrame.tsx |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/About.tsx b/src/components/About.tsx
index 0061ce9..e55f2ab 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -7,7 +7,7 @@ export function About() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 -top-12"
+      className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:-top-12 top-0"
     >
       <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" />
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 7eb5c6f..9f5cfa5 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -6,7 +6,7 @@ export function Container({
 }: React.ComponentPropsWithoutRef<'div'>) {
   return (
     <div
-      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      className={clsx('mx-auto max-w-7xl px-6 lg:px-8', className)}
       {...props}
     />
   )
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 15deca4..1fbfa99 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -98,20 +98,20 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden py-32">
+    <div className="overflow-hidden lg:py-32 pb-4">
       <Container>
-        <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
+        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900">
+            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
               Mycelium
             </h1>
-            <h2 className="mt-6 text-2xl tracking-tight text-gray-600">
-              Unleashing the Power of Decentralized Networks
+              <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
+                Unleashing the Power of Decentralized Networks
             </h2>
-            <p className="mt-6 text-lg text-gray-600">
+            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
               Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
             </p>
-            <p className="mt-6 text-lg text-gray-600">
+            <p className="mt-6 text-lg text-gray-600 ">
               Coming Soon: New Decentralized Features
             </p>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
@@ -125,9 +125,9 @@ export function Hero() {
               </Button>
             </div>
           </div>
-          <div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
-            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/3 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/70 sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
-            <div className="-mx-4 h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] px-9 sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
+          <div className="relative lg:mt-10 mt-0  lg:col-span-5 lg:row-span-2 xl:col-span-6">
+            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-16 lg:ml-12 xl:-top-14 ml-0" />
+            <div className="-mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)]  lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:pt-10 xl:-bottom-32">
               <Image
                 src="/images/phoneframe.png"
                 alt="Mycelium application demo"
diff --git a/src/components/PhoneFrame.tsx b/src/components/PhoneFrame.tsx
index 54fb614..2e5096b 100644
--- a/src/components/PhoneFrame.tsx
+++ b/src/components/PhoneFrame.tsx
@@ -16,7 +16,7 @@ export function PhoneFrame({
         fill
         priority={priority}
       />
-      <div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-hidden bg-gray-900">
+      <div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-y-auto bg-gray-900">
         {children}
       </div>
     </div>