feat: Implement full-width semantic <footer/> and enhance CTA styling (#24)

[Avichal296]

🎯 Description

This Pull Request addresses and resolves Issue #24: "[FEATURE] Replace bottom section with perfect footer."

The objective was to improve the site's structure and UI/UX by converting the final Call-to-Action (CTA) section into a proper, semantic <footer/> element.

Changes Made

• Semantic HTML: Replaced the generic div wrapper with the structurally correct <footer/> tag.
• Layout Fix: Restructured the component's JSX to move the footer outside the main content's max-w-7xl container. This allows the footer to correctly render as full-width (100% of the viewport).
• Styling Enhancement: Updated the background from a distracting gradient to a solid bg-gray-800 and added vertical padding (py-10) for a professional, distinct footer appearance.

---

Closes #24

Technologies Used

• React/Next.js
• HTML/CSS
• JavaScript
• CSS Animations
• CSS Transforms
• Other: ___________

Difficulty Level

• Beginner
• Intermediate
• Advanced

📸 Preview

✅ Contribution Checklist

Required Files

• contributions/[username]/index.js - Button metadata
• Button implementation file(s)
• Tested locally with npm run dev

Code Quality

• Code is clean and well-commented
• Follows accessibility best practices
• No console errors
• Responsive design (works on mobile)
• Unique CSS class names to avoid conflicts

Testing

• Button appears correctly in the showcase
• All animations/interactions work as expected
• Keyboard navigation works (Tab, Enter, Space)
• Tested in multiple browsers (Chrome, Firefox, Safari)

🏷️ Tags

Tags: tag1, tag2, tag3

📝 Additional Notes

---

For Maintainers

• Code review completed
• No security issues
• Follows contribution guidelines
• Ready to merge

Thank you for contributing to ClickHub! 🎃

[vercel]

@Avichal296 is attempting to deploy a commit to the enanmainurgmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Avichal296]

Kindly review this PR @MRIEnan