From a232ba7c98a64ac70839f545009435a27f06784e Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 5 Dec 2025 20:33:00 +0100
Subject: [PATCH] adjust Hero mobile centering and spacing, reduce H2 mobile
 size, tighten H1 mobile line height, reduce vertical gaps on mobile across
 multiple sections, and add touch support for Team member overlays

---
 src/app/page.tsx                   |  2 +-
 src/components/UI/Texts.tsx        |  4 ++--
 src/components/home/About.tsx      |  2 +-
 src/components/home/Foundation.tsx |  2 +-
 src/components/home/Hero.tsx       | 13 +++++++++----
 src/components/home/Team.tsx       | 12 ++++++++----
 src/components/home/Ventures.tsx   |  2 +-
 7 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2fdf78e..645b887 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -21,7 +21,7 @@ export default function Home() {
       <main>
         <HomeStickyHeader />
         <section className="relative min-h-screen">
-          <Hero className="-mt-20" />
+          <Hero className="md:-mt-18 -mt-20" />
         </section>
 
         <FadeInOnView delayMs={100}>
diff --git a/src/components/UI/Texts.tsx b/src/components/UI/Texts.tsx
index 7951e54..bdad61a 100644
--- a/src/components/UI/Texts.tsx
+++ b/src/components/UI/Texts.tsx
@@ -77,12 +77,12 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 // Headings default to Quicking font
 export const H1 = createTextComponent(
   'h1',
-  'text-5xl lg:text-7xl font-medium lg:leading-tight leading-normal tracking-tight',
+  'text-5xl lg:text-7xl font-medium leading-[0.9] lg:leading-tight  tracking-tight',
   { font: 'quicking' }
 )
 export const H2 = createTextComponent(
   'h2',
-  'text-4xl lg:text-5xl font-medium leading-tight tracking-tight',
+  'text-3xl lg:text-5xl font-medium leading-tight tracking-tight',
   { font: 'quicking' }
 )
 export const H3 = createTextComponent(
diff --git a/src/components/home/About.tsx b/src/components/home/About.tsx
index 04ed511..7a4b658 100644
--- a/src/components/home/About.tsx
+++ b/src/components/home/About.tsx
@@ -32,7 +32,7 @@ export function About() {
          
         </div>
         <div className="mx-auto mt-12 max-w-2xl  lg:max-w-none">
-          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 lg:gap-y-16 gap-y-8 lg:max-w-none lg:grid-cols-3">
             {features.map((feature) => (
               <div key={feature.name} className="flex flex-col">
                 <div className="my-8 h-[2px] w-3/4 bg-gray-300 overflow-hidden">
diff --git a/src/components/home/Foundation.tsx b/src/components/home/Foundation.tsx
index 3b32858..045dfd9 100644
--- a/src/components/home/Foundation.tsx
+++ b/src/components/home/Foundation.tsx
@@ -36,7 +36,7 @@ export function Foundation() {
   return (
     <div className="bg-transparent py-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 lg:gap-y-20 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-5">
           <div className="col-span-2">
             <H2>
               The Foundation of Every Venture
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index 96d682a..0e5c252 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -14,7 +14,12 @@ type HeroProps = {
 
 export function Hero({ className }: HeroProps) {
   return (
-    <div className={clsx('relative overflow-hidden min-h-screen', className)}>
+    <div
+      className={clsx(
+        'relative min-h-screen overflow-hidden flex flex-col justify-center md:block -z-20',
+        className,
+      )}
+    >
       {/* Video Background */}
       <video
         autoPlay
@@ -44,12 +49,12 @@ export function Hero({ className }: HeroProps) {
 
         <FadeInOnView
           delayMs={300}
-          className="mx-auto md:mx-0 md:ml-auto md:w-[60%] space-y-6 flex flex-col items-center md:items-start"
+          className="mx-auto md:mx-0 md:ml-auto md:w-[60%] space-y-6 flex flex-col items-start"
         >
-          <P className="max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
+          <P className="mt-6 max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
             At OurWorld, we are building the required infrastructures and tools to enable an Augmented Collective Intelligence ;  creating a sovereign, sustainable, and autonomous future for all.
           </P>
-          <Button href="/about" variant="outline" color="white" className="w-full md:w-auto mt-4">
+          <Button href="/about" variant="outline" color="white" className="mt-4 md:w-auto">
             Learn More
           </Button>
         </FadeInOnView>
diff --git a/src/components/home/Team.tsx b/src/components/home/Team.tsx
index 77c8f66..c339d5b 100644
--- a/src/components/home/Team.tsx
+++ b/src/components/home/Team.tsx
@@ -53,19 +53,23 @@ export function Team() {
           </Button>
         </div>
         <div className="mx-auto mt-16 max-w-6xl px-4 sm:px-6 lg:px-0">
-          <dl className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-4">
+          <dl className="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-y-16 lg:grid-cols-4">
             {members.map((member) => (
               <div key={member.src} className="flex flex-col">
                 <dd className="flex flex-auto flex-col">
-                  <div className="group relative mx-auto max-w-xs overflow-hidden rounded-lg">
+                  <div
+                    className="group relative mx-auto max-w-xs overflow-hidden rounded-lg cursor-pointer"
+                    tabIndex={0}
+                    role="button"
+                  >
                     <Image
                       src={member.src}
                       alt={member.alt}
                       width={480}
                       height={320}
-                      className="h-auto w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                      className="h-auto w-full object-cover transition-transform duration-300 lg:group-hover:scale-105"
                     />
-                    <div className="pointer-events-none absolute inset-0 flex flex-col justify-between bg-black/70 opacity-0 transition-opacity duration-200 group-hover:opacity-100 p-5 text-left text-white">
+                    <div className="pointer-events-none absolute inset-0 flex flex-col justify-between bg-black/70 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-active:opacity-100 group-focus-visible:opacity-100 p-5 text-left text-white">
                       <div>
                         <p className="text-lg font-semibold leading-snug">{member.name}</p>
                         <p className="text-sm mt-1 opacity-80">{member.role}</p>
diff --git a/src/components/home/Ventures.tsx b/src/components/home/Ventures.tsx
index 65c9837..79ac0fa 100644
--- a/src/components/home/Ventures.tsx
+++ b/src/components/home/Ventures.tsx
@@ -43,7 +43,7 @@ export function Ventures() {
           </div>
         </div>
         <div className="mx-auto mt-24 max-w-2xl lg:max-w-none">
-          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:gap-y-16 lg:max-w-none lg:grid-cols-3">
             {ventures.map((venture) => (
               <div key={venture.src} className="flex flex-col">
                 <dd className="flex flex-auto flex-col">