Skip to content

Commit 5ff4845

Browse files
attarchiattarchi
committed
fix: make hero section centered
1 parent e36cdcf commit 5ff4845

5 files changed

Lines changed: 24 additions & 8 deletions

File tree

‎src/app/__tests__/page.layout.test.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ describe('Home Page Layout Requirements', () => {
1515
render(<Home />)
1616

1717
const heroSection = screen.getByTestId('typewriter-container').closest('section')
18-
// Should use responsive height: auto on mobile, h-screen on desktop
19-
expect(heroSection).toHaveClass('h-auto', 'md:h-screen')
18+
// Should use min-h-screen with pt-16 to account for fixed header
19+
expect(heroSection).toHaveClass('min-h-screen', 'pt-16')
2020
})
2121

2222
it('has centered content container with reasonable max width', () => {
@@ -28,4 +28,11 @@ describe('Home Page Layout Requirements', () => {
2828
const contentContainer = motionDiv?.parentElement?.parentElement
2929
expect(contentContainer).toHaveClass('container', 'mx-auto', 'max-w-4xl', 'text-center')
3030
})
31+
32+
it('overrides AnimatedSection defaults for proper centering', () => {
33+
render(<Home />)
34+
35+
const heroSection = screen.getByTestId('typewriter-container').closest('section')
36+
expect(heroSection).toHaveClass('!max-w-none', '!text-center', '!py-0')
37+
})
3138
})

‎src/app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export default function RootLayout({
2727
<html lang="en">
2828
<body
2929
className={`${jetbrainsMono.variable} ${inter.variable} antialiased`}
30+
suppressHydrationWarning={true}
3031
>
3132
<ThemeProvider>
3233
{children}

‎src/components/sections/HeroSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ export function HeroSection({
4545
return (
4646
<AnimatedSection
4747
variant="section"
48-
className={`relative h-auto md:h-screen flex items-center justify-center overflow-hidden ${className}`}
48+
className={`relative min-h-screen flex items-center justify-center overflow-hidden pt-16 !max-w-none !text-center !py-0 ${className}`}
4949
>
50-
<div className="container mx-auto max-w-4xl text-center space-y-6">
50+
<div className="container mx-auto max-w-4xl text-center space-y-6 px-4">
5151
{avatarSrc && (
5252
<motion.div
5353
className="mb-8 relative w-32 h-32 mx-auto"

‎src/components/sections/__tests__/HeroSection.animation.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,8 +166,9 @@ describe("HeroSection Animation Sequence", () => {
166166
render(<HeroSection {...defaultProps} />);
167167
const container = screen.getByTestId("typewriter-container");
168168
const section = container.closest("section");
169-
expect(section).toHaveClass("h-auto", "md:h-screen");
169+
expect(section).toHaveClass("min-h-screen", "pt-16");
170170
expect(section).toHaveClass("flex", "items-center", "justify-center");
171+
expect(section).toHaveClass("!max-w-none", "!text-center", "!py-0");
171172
});
172173

173174
it("uses correct typography for typewriter text", () => {

‎src/components/sections/__tests__/HeroSection.layout.test.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@ describe('HeroSection Responsive Layout Requirements', () => {
2323
renderWithTheme(<HeroSection {...defaultProps} />);
2424
const heading = await screen.findByRole('heading', { level: 1 });
2525
const section = heading.closest('section');
26-
expect(section).toHaveClass('md:h-screen');
26+
expect(section).toHaveClass('min-h-screen');
2727
});
2828

2929
it('has proper mobile height handling', async () => {
3030
renderWithTheme(<HeroSection {...defaultProps} />);
3131
const heading = await screen.findByRole('heading', { level: 1 });
3232
const section = heading.closest('section');
33-
expect(section).toHaveClass('py-8'); // matches actual class
33+
expect(section).toHaveClass('pt-16'); // accounts for fixed header
3434
});
3535

3636
it('has responsive height classes for mobile and desktop', async () => {
3737
renderWithTheme(<HeroSection {...defaultProps} />);
3838
const heading = await screen.findByRole('heading', { level: 1 });
3939
const section = heading.closest('section');
40-
expect(section).toHaveClass('h-auto', 'md:h-screen');
40+
expect(section).toHaveClass('min-h-screen', 'pt-16');
4141
});
4242

4343
it('centers content horizontally and vertically', async () => {
@@ -46,6 +46,13 @@ describe('HeroSection Responsive Layout Requirements', () => {
4646
const section = heading.closest('section');
4747
expect(section).toHaveClass('flex', 'items-center', 'justify-center');
4848
});
49+
50+
it('overrides AnimatedSection default classes for proper centering', async () => {
51+
renderWithTheme(<HeroSection {...defaultProps} />);
52+
const heading = await screen.findByRole('heading', { level: 1 });
53+
const section = heading.closest('section');
54+
expect(section).toHaveClass('!max-w-none', '!text-center', '!py-0');
55+
});
4956
});
5057

5158
describe('Container and Content Width', () => {

0 commit comments

Comments
 (0)