Skip to content

fix: update hero section tower and responsive layout #2550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 7, 2025
Merged

fix: update hero section tower and responsive layout #2550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions apps/web/src/components/sections/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,9 @@ const HeroSection = () => {
return (
<>
{/* Right Column - Tower */}
<div className="w-screen h-screen max-lg:hidden z-[0] absolute right-0 top-0">
<div className="relative w-full h-full">
<div className="w-[100dvw] h-[100dvh] max-lg:hidden z-[0] absolute right-0 top-0">
<div className="w-full h-full">
<Tower />
{/* Radial gradient mask */}
<div
className="absolute inset-0 pointer-events-none"
style={{
Expand All @@ -40,18 +39,18 @@ const HeroSection = () => {
</div>
</div>

<section className="md:w-px m-auto flex min-h-dvh relative flex-col w-full pt-12 md:pt-0">
<section className="flex flex-col h-[calc(100dvh-11.5rem)] lg:max-w-7xl mx-auto max-lg:items-center justify-center relative w-full pt-12 lg:pt-0 pointer-events-none">
<Image
alt=""
className="pointer-events-none absolute inset-0 -top-40 z-[3] scale-150 select-none mix-blend-lighten opacity-30"
className="pointer-events-none absolute inset-0 -top-40 z-[3] scale-150 select-none mix-blend-lighten lg:opacity-30"
fill
priority
src="/static/bg.png"
/>

{/* Left Column - Content */}
<div className="md:absolute w-full md:w-[44rem] z-10 md:-translate-x-[40rem] md:-translate-y-[70%] md:top-1/2 px-12">
<div className="mb-8 flex justify-center md:justify-start">
<div className="w-full lg:w-[44rem] z-10 px-12 pointer-events-auto">
<div className="mb-8 flex justify-center lg:justify-start">
<Image
alt="React Email Logo"
height="100"
Expand All @@ -60,27 +59,27 @@ const HeroSection = () => {
/>
</div>
<Heading
className="!text-white/80 relative mb-8 text-center md:text-left before:absolute before:top-0 before:left-0 before:w-full before:animate-[shine_2s_ease-in-out] before:bg-[length:200%] before:bg-shine before:bg-clip-text before:text-transparent before:content-['The_next_generation_of_writing_emails'] before:select-none before:pointer-events-none text-balance"
className="!text-white/80 relative mb-8 text-center lg:text-left before:absolute before:top-0 before:left-0 before:w-full before:animate-[shine_2s_ease-in-out] before:bg-[length:200%] before:bg-shine before:bg-clip-text before:text-transparent before:content-['The_next_generation_of_writing_emails'] before:select-none before:pointer-events-none text-balance"
weight="medium"
size="10"
>
The next generation of writing emails
</Heading>
<div className="max-w-xl text-center md:text-left">
<div className="max-w-xl max-lg:mx-auto text-center lg:text-left">
<Text size="5" className="text-pretty">
React Email is a next-generation collection of unstyled components
for creating beautiful emails using React, Tailwind, and
TypeScript.
</Text>
</div>
<div className="mt-10 flex items-center justify-center md:justify-start gap-4 flex-wrap">
<div className="mt-10 flex items-center justify-center lg:justify-start gap-4 flex-wrap">
<Button asChild size="4">
<Link href="/components">
Explore components
<ArrowRightIcon size={16} />
</Link>
</Button>
<Code className="md:!inline-flex hidden max-w-max">
<Code className="lg:!inline-flex hidden max-w-max">
npx create-email@latest
</Code>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/tower.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useCollageTexture } from '@/hooks/useCollageTexture';
import { View } from '@/webgl/View';

const COUNT = 12;
const GAP = 2.8;
const GAP = 3.5;

function Loader() {
return (
Expand Down Expand Up @@ -102,7 +102,7 @@ function SpinnableTower({ texture, dimensions }: any) {
<Billboard
key={`billboard-${index}`}
radius={4}
rotation={[0, index * Math.PI * 0.5, 0.4]}
rotation={[0, index * Math.PI * 0.5, 0.25]}
position={[0, (index - (Math.ceil(COUNT / 2) - 1)) * GAP, 0]}
texture={texture}
dimensions={dimensions}
Expand Down
Loading