Fix: Improve Button accessibility and prop forwarding

[VineetC137]

What

• Updated the Button component to forward standard HTML button props.

Why

• The Button component was missing type="button" and did not accept props like onClick, disabled, etc., which affected accessibility and reusability.

How

• Added a default type="button" and forwarded ButtonHTMLAttributes to the underlying <button> element.

Testing

• Verified buttons render correctly and existing interactions continue to work as expected.

Fixes #43

Summary by CodeRabbit

• Refactor

  • Simplified Button component for cleaner usage and better HTML button attribute support.
  • Streamlined header layout for a more compact, inline logo + navigation.
  • Simplified hero section layout and copy, focusing on a centered title, description, and primary action.

• Style

  • Removed complex animated background elements and extraneous decorative markup for a calmer, lighter visual.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The Button component is converted from a default export to a named export with a new ButtonProps alias, destructured props (defaulting type="button"), and prop forwarding; several sections updated imports and simplified surrounding markup to use the new named Button export.

Changes

Cohort / File(s)	Summary
Button Component Refactoring src/components/Button.tsx	Replace default export with export const Button; add type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>; destructure { children, type = "button", ...props }; forward ...props; merge className; render children directly and remove decorative wrappers.
Sections — Button import & markup adjustments src/sections/CallToAction.tsx, src/sections/Header.tsx, src/sections/Hero.tsx	Update import Button → import { Button }; consolidate framer-motion imports; simplify inline styles/props and some JSX structure; Hero removes complex animated background and extra decorative elements, simplifying content and layout.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• Tanya-ruby

Poem

🐰 A button once ornate, now sleek and light,
Props hop through fields, each one snug and right.
type="button" set, children softly displayed,
Named export, tidy, no more wrappers frayed.
A cheerful nibble of refactor delight.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	Changes in CallToAction, Header, and Hero sections are out of scope—they update Button imports and refactor UI unrelated to the accessibility improvements in issue #43.	Revert import changes and UI refactors in CallToAction.tsx, Header.tsx, and Hero.tsx to separate concerns; keep only Button.tsx changes in this PR.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: improving Button accessibility through prop forwarding and a default type attribute.
Linked Issues check	✅ Passed	The PR successfully implements all requirements from issue #43: adds type='button' default, forwards ButtonHTMLAttributes props like onClick/disabled, and improves component accessibility.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/Button.tsx`:
- Around line 3-7: The project changed Button to a named export (export const
Button), but three consumers still use the default import; update imports in
src/sections/Hero.tsx, src/sections/Header.tsx, and
src/sections/CallToAction.tsx to import the named symbol Button (replace "import
Button from '@/components/Button'" with "import { Button } from
'@/components/Button'") so they reference the exported Button identifier used in
the component file.