Improve Hero section

Author: attarchi

src/app/__tests__/page.avatar.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react'
+import Home from '../page'
+
+describe('Home Page Avatar Requirements', () => {
+  it('renders the avatar image in hero section', () => {
+    render(<Home />)
+    
+    const avatar = screen.getByRole('img', { name: /profile picture/i })
+    expect(avatar).toBeInTheDocument()
+    expect(avatar).toHaveAttribute('src')
+    expect(avatar).toHaveClass('rounded-full')
+  })
+
+  it('has proper avatar styling with border and size', () => {
+    render(<Home />)
+    
+    const avatar = screen.getByRole('img', { name: /profile picture/i })
+    const avatarContainer = avatar.parentElement
+    
+    expect(avatar).toHaveClass('border-4', 'border-accent', 'object-cover')
+    expect(avatarContainer).toHaveClass('w-32', 'h-32', 'relative')
+  })
+}) 

src/app/__tests__/page.content.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react'
+import Home from '../page'
+
+describe('Home Page Content Requirements', () => {
+  it('renders the correct hero heading from portfolio specification', () => {
+    render(<Home />)
+    const heading = screen.getByRole('heading', { level: 1 })
+    expect(heading).toHaveTextContent('Senior Full-Stack Developer & Problem Solver')
+    expect(heading).toBeInTheDocument()
+  })
+
+  it('renders the correct hero description from portfolio specification', () => {
+    render(<Home />)
+    const description = screen.getByText(/20\+ years crafting scalable web applications with React, Node\.js, and modern architectures/)
+    expect(description).toBeInTheDocument()
+  })
+
+  it('renders the location badge', () => {
+    render(<Home />)
+    const locationBadge = screen.getByText('Istanbul, Turkey • Remote Worldwide')
+    expect(locationBadge).toBeInTheDocument()
+  })
+
+  it('renders the View Projects CTA button', () => {
+    render(<Home />)
+    const viewProjectsButton = screen.getByRole('link', { name: /view projects/i })
+    expect(viewProjectsButton).toBeInTheDocument()
+    expect(viewProjectsButton).toHaveAttribute('href', '#projects')
+  })
+
+  it('renders the Download CV CTA button', () => {
+    render(<Home />)
+    const downloadCvButton = screen.getByRole('link', { name: /download cv/i })
+    expect(downloadCvButton).toBeInTheDocument()
+    expect(downloadCvButton).toHaveAttribute('href', '/cv.pdf')
+  })
+
+  it('renders the Contact Me CTA button', () => {
+    render(<Home />)
+    const contactButton = screen.getByRole('link', { name: /contact me/i })
+    expect(contactButton).toBeInTheDocument()
+    expect(contactButton).toHaveAttribute('href', '#contact')
+  })
+
+  it('renders the theme toggle button', () => {
+    render(<Home />)
+    const themeToggle = screen.getByRole('button', { name: /switch to (light|dark) theme/i })
+    expect(themeToggle).toBeInTheDocument()
+  })
+
+  it('renders the scroll indicator', () => {
+    render(<Home />)
+    const scrollIndicator = screen.getByTestId('scroll-indicator')
+    expect(scrollIndicator).toBeInTheDocument()
+  })
+
+  describe('Theme Toggle Positioning', () => {
+    it('has theme toggle positioned correctly in header', () => {
+      render(<Home />)
+      const header = screen.getByRole('banner')
+      const themeToggle = screen.getByRole('button', { name: /switch to (light|dark) theme/i })
+      
+      expect(header).toContainElement(themeToggle)
+      expect(header).toHaveClass('fixed', 'top-0', 'right-0', 'z-50')
+    })
+  })
+}) 

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

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import Home from '../page'
+
+describe('Home Page Layout Requirements', () => {
+  it('has full-width hero section without width constraints', () => {
+    render(<Home />)
+    
+    const heroSection = screen.getByRole('heading', { level: 1 }).closest('section')
+    expect(heroSection).toHaveClass('w-full')
+    // Should not have max-width constraints that limit the section
+    expect(heroSection).not.toHaveClass('max-w-7xl')
+    expect(heroSection).not.toHaveClass('max-w-6xl')
+    expect(heroSection).not.toHaveClass('max-w-5xl')
+  })
+
+  it('has proper full viewport height', () => {
+    render(<Home />)
+    
+    const heroSection = screen.getByRole('heading', { level: 1 }).closest('section')
+    expect(heroSection).toHaveClass('min-h-screen')
+  })
+
+  it('has centered content container with reasonable max width', () => {
+    render(<Home />)
+    
+    const contentContainer = screen.getByRole('heading', { level: 1 }).closest('div')
+    expect(contentContainer).toHaveClass('container', 'mx-auto', 'max-w-4xl', 'text-center')
+  })
+}) 

src/app/__tests__/page.test.tsx

@@ -2,32 +2,28 @@ import { render, screen } from '@testing-library/react'
 import Home from '../page'
 
 describe('Home Page', () => {
-  it('renders UI Component Showcase heading', () => {
+  it('renders the main hero heading', () => {
     render(<Home />)
-    const heading = screen.getByText('UI Component Showcase')
+    const heading = screen.getByRole('heading', { level: 1 })
+    expect(heading).toHaveTextContent('Senior Full-Stack Developer & Problem Solver')
     expect(heading).toBeInTheDocument()
   })
 
-  it('renders component sections', () => {
+  it('renders the hero description', () => {
     render(<Home />)
-    expect(screen.getByText('Badges')).toBeInTheDocument()
-    expect(screen.getByText('Buttons')).toBeInTheDocument()
-    expect(screen.getByText('Card Title')).toBeInTheDocument()
-    expect(screen.getByText('Section Title')).toBeInTheDocument()
-    expect(screen.getByText('Typography')).toBeInTheDocument()
+    const description = screen.getByText(/20\+ years crafting scalable web applications with React, Node\.js, and modern architectures/)
+    expect(description).toBeInTheDocument()
   })
 
-  it('renders footer links', () => {
+  it('renders the theme toggle button', () => {
     render(<Home />)
-    expect(screen.getByText('Learn')).toBeInTheDocument()
-    expect(screen.getByText('Examples')).toBeInTheDocument()
-    expect(screen.getByText('Go to nextjs.org →')).toBeInTheDocument()
+    const themeToggle = screen.getByRole('button', { name: /switch to (light|dark) theme/i })
+    expect(themeToggle).toBeInTheDocument()
   })
 
-  it('renders footer icons', () => {
+  it('renders the scroll indicator', () => {
     render(<Home />)
-    expect(screen.getByAltText('File icon')).toBeInTheDocument()
-    expect(screen.getByAltText('Window icon')).toBeInTheDocument()
-    expect(screen.getByAltText('Globe icon')).toBeInTheDocument()
+    const scrollIndicator = screen.getByTestId('scroll-indicator')
+    expect(scrollIndicator).toBeInTheDocument()
   })
 }) 

src/app/page.tsx

@@ -1,163 +1,34 @@
-import Image from "next/image";
-import {
-  Badge,
-  Button,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  Section,
-  Heading,
-  Text,
-  Hero,
-} from "@/components/ui";
-import { ThemeToggle } from '../components/ui/ThemeToggle'
+import { HeroSection } from "@/components/sections";
+import { ThemeToggle } from '@/components/ui/ThemeToggle';
 
 export default function Home() {
   return (
     <div className="min-h-screen bg-background text-text">
-      <Hero
-        title="Senior Full-Stack Developer"
-        description="Building modern web applications with React, Next.js, and TypeScript. Passionate about creating beautiful, performant, and accessible user experiences."
-        location="San Francisco, CA"
+      {/* Header with theme toggle */}
+      <header className="fixed top-0 right-0 z-50 p-4">
+        <ThemeToggle />
+      </header>
+
+      {/* Hero Section */}
+      <HeroSection
+        title="Senior Full-Stack Developer & Problem Solver"
+        description="20+ years crafting scalable web applications with React, Node.js, and modern architectures"
+        location="Istanbul, Turkey • Remote Worldwide"
         avatarSrc="/avatar.png"
         avatarAlt="Profile picture"
         ctaPrimary={{
-          text: "Contact Me",
-          link: "/contact",
+          text: "View Projects",
+          link: "#projects"
         }}
         ctaSecondary={{
-          text: "View Work",
-          link: "/work",
+          text: "Download CV",
+          link: "/cv.pdf"
+        }}
+        ctaTertiary={{
+          text: "Contact Me",
+          link: "#contact"
         }}
       />
-
-      <Section variant="surface" spacing="lg" className="border-b border-accent/20">
-        <div className="container mx-auto flex justify-between items-center">
-          <Heading as="h1" size="h2" className="text-accent">UI Component Showcase</Heading>
-          <ThemeToggle />
-        </div>
-      </Section>
-
-      <Section spacing="lg" maxWidth="4xl" align="center" className="container mx-auto">
-        <div className="grid gap-8 md:grid-cols-2">
-          <div className="space-y-4">
-            <Heading as="h2" size="h3" className="text-accent">Buttons</Heading>
-            <div className="flex flex-wrap gap-4">
-              <Button>Default</Button>
-              <Button variant="secondary">Secondary</Button>
-              <Button variant="destructive">Destructive</Button>
-              <Button variant="outline">Outline</Button>
-              <Button variant="ghost">Ghost</Button>
-              <Button variant="link">Link</Button>
-              <Button isLoading>Loading</Button>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <Heading as="h2" size="h3" className="text-accent">Badges</Heading>
-            <div className="flex flex-wrap gap-4">
-              <Badge>Default</Badge>
-              <Badge variant="secondary">Secondary</Badge>
-              <Badge variant="outline">Outline</Badge>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-12 grid gap-8 md:grid-cols-2">
-          <Card className="bg-surface">
-            <CardHeader>
-              <CardTitle>Card Title</CardTitle>
-              <CardDescription>Card description goes here.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Text>This is the card content area with some example text to demonstrate the theme integration.</Text>
-            </CardContent>
-            <CardFooter>
-              <Button size="sm">Action</Button>
-            </CardFooter>
-          </Card>
-
-          <Section variant="accent" spacing="md" maxWidth="md" align="center" className="rounded-lg">
-            <Heading as="h3" size="h4">Section Title</Heading>
-            <Text>This is a section container with accent background and centered text.</Text>
-          </Section>
-        </div>
-
-        <div className="mt-12">
-          <Heading as="h2" size="h3" className="text-accent mb-6">Typography</Heading>
-          <div className="space-y-4">
-            <Heading as="h1" size="h1">Heading 1</Heading>
-            <Heading as="h2" size="h2">Heading 2</Heading>
-            <Heading as="h3" size="h3">Heading 3</Heading>
-            <Heading as="h4" size="h4">Heading 4</Heading>
-            <Heading as="h5" size="h5">Heading 5</Heading>
-            <Heading as="h6" size="h6">Heading 6</Heading>
-            <Text size="xl">Body text xl</Text>
-            <Text size="lg">Body text lg</Text>
-            <Text size="base">Body text base</Text>
-            <Text size="sm">Body text sm</Text>
-            <Text size="xs">Body text xs</Text>
-            <Text variant="muted">Muted text</Text>
-            <Text variant="subtle">Subtle text</Text>
-            <Text weight="bold">Bold text</Text>
-            <Text weight="semibold">Semibold text</Text>
-            <Text weight="medium">Medium text</Text>
-          </div>
-        </div>
-      </Section>
-
-      <Section variant="surface" spacing="md" className="border-t border-accent/20">
-        <div className="container mx-auto flex flex-wrap gap-6 items-center justify-center">
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4 text-accent"
-            href="https://nextjs.org/learn"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="/file.svg"
-              alt="File icon"
-              width={16}
-              height={16}
-            />
-            Learn
-          </a>
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4 text-accent"
-            href="https://vercel.com/templates"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="/window.svg"
-              alt="Window icon"
-              width={16}
-              height={16}
-            />
-            Examples
-          </a>
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4 text-accent"
-            href="https://nextjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="/globe.svg"
-              alt="Globe icon"
-              width={16}
-              height={16}
-            />
-            Go to nextjs.org →
-          </a>
-        </div>
-      </Section>
     </div>
   );
 }