ourworld_web/www_ourworld_new
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sasha-astiadi
2025-12-05 20:33:00 +01:00
parent a6c4922eed
commit a232ba7c98
7 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/page.tsx
View File

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

4
src/components/UI/Texts.tsx
View File

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

2
src/components/home/About.tsx
View File

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

2
src/components/home/Foundation.tsx
View File

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

13
src/components/home/Hero.tsx
View File

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

12
src/components/home/Team.tsx
View File

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

2
src/components/home/Ventures.tsx
View File

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