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

@@ -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}>

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(

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">

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

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>

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>

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">