New feature: Add Contribute Section with Guest Post Guidelines

[tyaga001]

Overview

Add a new "Contribute" section to DevTools Academy to enable high-quality guest post submissions from the developer community. This feature will include a navigation item, a dedicated contribute page, and clear submission guidelines.

UI/UX Requirements

1. Navigation

• Add "Contribute" button in the main navigation
• Use ghost variant button with icon (GitPullRequest from Lucide)
• Place between existing nav items and "Star on GitHub" button

2. Contribute Page Layout

The page should follow our existing design system with:

Header Section:

"Share Your Developer Tools Experience"
Subtitle: "Help the community make informed decisions about development tools through authentic, unbiased technical content"

Main Content Areas:

1. What We Accept

- Technical deep-dives on developer tools
- Hands-on implementation guides
- Performance comparisons and benchmarks
- Migration guides and architectural decisions
- Technical case studies and lessons learned
- High quality research articles 

2. Content Guidelines

- Focus on practical implementation details
- Include working code examples
- Maintain objectivity - no marketing speak
- Back claims with data/benchmarks
- 1500-2500 words recommended

3. Submission Process

1. Review our guidelines
2. Submit proposal via GitHub issue
3. Receive feedback within 1 week
4. Submit draft for technical review
5. Address feedback and finalize

4. CTA Section

• Primary button: "Submit Guest Post" (links to GitHub issues)
• Secondary link: "View Example Posts"

Technical Requirements

1. Create route /contribute using Next.js App Router
2. Implement as Server Component where possible
3. Use existing Shadcn UI components:
   • Card
   • Button
   • Typography components
4. Add metadata for SEO

Navigation Component

interface ContributeButtonProps {
  className?: string;
}

// Use ghost variant
// Include GitPullRequest icon
// Link to /contribute

Page Component Structure

// app/contribute/page.tsx
export const metadata = {
  title: 'Contribute - DevTools Academy',
  description: 'Share your developer tools expertise...'
}

// Main sections:
- Hero
- Guidelines
- Process
- CTA

Content Guidelines Template

Create .github/ISSUE_TEMPLATE/guest-post.md with:

Required fields:

• Post title
• Technical focus
• Key takeaways
• Code example types
• Previous writing samples (optional)
• Technical background

Design Reference

The page should follow our existing design system:

• Font: Inter
• Colors: Use existing Tailwind theme
• Spacing: Follow 4/8 point grid
• Components: Use Shadcn UI

Layout Wireframe

[Navigation Bar with Contribute Button]
|--------------------------------|
|           Hero Section         |
|--------------------------------|
|        What We Accept         |
|--------------------------------|
|      Content Guidelines       |
|--------------------------------|
|      Submission Process      |
|--------------------------------|
|            CTA               |
|--------------------------------|

Success Criteria

• Navigation item added
• Contribute page implemented
• GitHub issue template created
• Mobile responsive
• Follows accessibility guidelines
• Matches existing design system
• SEO metadata included

Additional Notes

• Use existing color scheme and typography
• Ensure all interactive elements are keyboard accessible
• Include loading states where needed
• Add appropriate aria labels
• Test across different viewports

Example for inspiration - https://thenewstack.io/contributions/ and https://www.smashingmagazine.com/write-for-us/

Resources

• Current design system
• Shadcn UI docs: https://ui.shadcn.com/
• Lucide Icons: https://lucide.dev/