Merge Next.js migration changes - Issue #3069

Author: whatsupsumit

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README-NEXTJS.md

@@ -0,0 +1,166 @@
+# Keploy Writers Program - Next.js
+
+> This repository has been migrated from static HTML/CSS/JS to Next.js 15 with TypeScript and Tailwind CSS
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+- Node.js 18.x or higher
+- npm 9.x or higher
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/keploy/writers-program.git
+cd writers-program
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Run the development server:
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## 📦 Available Scripts
+
+- `npm run dev` - Starts the development server on http://localhost:3000
+- `npm run build` - Creates an optimized production build
+- `npm start` - Starts the production server
+- `npm run lint` - Runs ESLint to check for code quality issues
+- `npm run type-check` - Runs TypeScript compiler to check for type errors
+
+## 🏗️ Project Structure
+
+```
+writers-program/
+├── app/                      # Next.js App Router
+│   ├── layout.tsx           # Root layout with Header/Footer
+│   ├── page.tsx             # Home page
+│   └── globals.css          # Global styles
+├── components/              # React components
+│   ├── sections/            # Page sections
+│   │   ├── HeroSection.tsx
+│   │   ├── AboutSection.tsx
+│   │   ├── ProgramSection.tsx
+│   │   ├── ProcessSection.tsx
+│   │   ├── CriteriaSection.tsx
+│   │   └── CommunitySection.tsx
+│   ├── ui/                  # Reusable UI components
+│   │   └── button.tsx
+│   ├── Header.tsx           # Header component
+│   └── Footer.tsx           # Footer component
+├── lib/                     # Utility functions
+│   └── utils.ts            # Helper functions (cn, etc.)
+├── public/                  # Static assets
+│   ├── images/             # Images and GIFs
+│   ├── fonts/              # Font files
+│   └── css-legacy/         # Legacy CSS (for reference)
+├── next.config.ts          # Next.js configuration
+├── tailwind.config.ts      # Tailwind CSS configuration
+├── tsconfig.json           # TypeScript configuration
+└── package.json            # Dependencies and scripts
+```
+
+## 🎨 Tech Stack
+
+- **Framework**: Next.js 15 (App Router)
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS
+- **UI Components**: Radix UI primitives
+- **Icons**: Lucide React
+- **Fonts**: Google Fonts (Lato, Inconsolata, Montserrat)
+
+## 🔧 Configuration
+
+### Environment Variables
+
+No environment variables are required for the basic setup. If you need to add any, create a `.env.local` file in the root directory.
+
+### Tailwind CSS
+
+The project uses Tailwind CSS v4 with custom configuration. See `tailwind.config.ts` for customization options.
+
+### TypeScript
+
+TypeScript is configured with strict mode. See `tsconfig.json` for compiler options.
+
+## 📝 Migration Notes
+
+This project was migrated from a static HTML/CSS/JS website to Next.js 15. Key changes include:
+
+1. **Component-based architecture**: All sections are now React components
+2. **Server Components**: Leveraging Next.js 15 server components for better performance
+3. **Image Optimization**: Using Next.js Image component for optimized images
+4. **Type Safety**: Full TypeScript support for better developer experience
+5. **Modern Styling**: Tailwind CSS for utility-first styling
+6. **SEO Improvements**: Proper metadata and OpenGraph tags
+
+### Legacy Files
+
+Legacy CSS and JS files have been moved to `public/css-legacy` and are kept for reference only. They are not used in the new implementation.
+
+## 🌐 Deployment
+
+### Vercel (Recommended)
+
+The easiest way to deploy this Next.js app is through [Vercel](https://vercel.com/):
+
+1. Push your code to GitHub
+2. Import your repository on Vercel
+3. Vercel will automatically detect Next.js and configure the build settings
+4. Deploy!
+
+### Other Platforms
+
+You can also deploy to:
+- Netlify
+- AWS Amplify
+- Google Cloud Run
+- Docker containers
+
+For production builds, always run:
+```bash
+npm run build
+npm start
+```
+
+## 🤝 Contributing
+
+Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
+
+## 📄 License
+
+See [LICENSE](LICENSE) file for details.
+
+## 🔗 Links
+
+- [Writers Program Website](https://writers.keploy.io/)
+- [Keploy Main Website](https://keploy.io)
+- [Keploy Blog](https://keploy.io/blog)
+- [Join Our Slack](https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg)
+
+## ⚡ Performance
+
+This Next.js implementation includes:
+
+- Server-side rendering for faster initial page loads
+- Automatic code splitting
+- Image optimization
+- Font optimization
+- CSS optimization through Tailwind
+
+## 🐛 Known Issues
+
+None at the moment. Please report any issues on the [GitHub Issues](https://github.com/keploy/writers-program/issues) page.
+
+## 📞 Support
+
+For support, join our [Slack community](https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg) or open an issue on GitHub.

README.md

@@ -1,115 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-<p align="center">
-  <img align="center" src="https://docs.keploy.io/img/keploy-logo-dark.svg?s=200&v=4" height="40%" width="40%"  alt="keploy logo"/>
-</p>
+## Getting Started
 
-<h1 align="center">
-<b>
-Writers Program
-</b>
-</h1 >
+First, run the development server:
 
-At Keploy, we're always looking for new ways for our community to get involved in what we do. Keploy Writer's program is focused to acknowledge the creativity, skills, and talent of various writers in the technical ecosystem, and pay them for writing developer-centric content. Through this program, authors can now either **win swags or earn up to $100** for publishing content with Keploy🧡
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-<p style='font-size: 20px;'> We seek a broad range of technical content from experienced writers to produce content for software developers that provides rich detail about using popular tools. We’re looking for content that targets beginner to intermediate software developers. </p>
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-Examples of some preferred topics might include:
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-<ul style='font-size: 20px; margin-left:100px;'>
-    <li> Software testing productivity hacks. </li>
-    <li> Tips and tricks for popular software testing tools. </li>
-    <li> A case study on testing and testing techniques. </li>
-    <li> How to perform e2e testing with popular app frameworks like Node, Java, Django, and Flask. </li>
- </ul>
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-## How to submit?
+## Learn More
 
-If you're a fit for this program, [Write for Us](https://forms.gle/ZP72SpWdNyjg4gbu8) and earn exciting rewards and compensation by Keploy🧡
+To learn more about Next.js, take a look at the following resources:
 
-## About you
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-We are seeking individuals who meet the following eligibility criteria:
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-<ul style='font-size: 20px; margin-left:100px;'>
-  <li> Experience in Technical Writing. </li>
-  <li> Decent knowledge in the tech domain </li>
-  <li> Skills in software testing is a bonus. </li>
-</ul>
+## Deploy on Vercel
 
-## The Process
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-1. **Register Yourself:** Fill out [this form](https://forms.gle/ZP72SpWdNyjg4gbu8) and register to the writers program. We'll be earger to have you along.
-2. **Onboarding Starts:** Get onboard with us, learn about Keploy's ecosystem, connect with the team & mentors.
-3. **Research your Idea** You'll start by choosing and researching about your write-up. Get access to mentorship & resources by the team.
-4. **Craft your Work:** Start crafting your ideas into words. This part includes you working on the approved ideas and topics.
-5. **Revision & Submissions:** This includes copy editing, hero image design, and revision of your article. Yes, we got to help you revise it before submitting.
-6. **Publication** Once the content meets all the guidlines, you're all set to publish your content with Keploy, earn and redeem your benefits.
-
-## Technical Writing Guidelines
-
-### Conditions
-
-1. As stated in the publishing policy, we only accept 100% fresh write-ups(of any kind). We strictly do not encourage republishing any existing work or even a portion of it. Keploy doesn't accept agency work, promotional material, or sponsored posts of any kind.
-2. Minimum <u>700</u> word count.
-3. Chosen keywords must have a search volume greater than <u> 400 </u>. [know about search volume [here](https://www.google.com/search?q=what+is+search+volume+in+seo&sca_esv=a07f0383584960a3&ei=XuoxZ7ScHtfhseMPlY-1mAk&ved=0ahUKEwi0w8GzltSJAxXXcGwGHZVHDZMQ4dUDCA8&uact=5&oq=what+is+search+volume+in+seo&gs_lp=Egxnd3Mtd2l6LXNlcnAiHHdoYXQgaXMgc2VhcmNoIHZvbHVtZSBpbiBzZW8yCxAAGIAEGJECGIoFMgYQABgWGB4yCxAAGIAEGIYDGIoFMgsQABiABBiGAxiKBTIIEAAYgAQYogQyCBAAGIAEGKIESO40UKsHWKMxcAZ4AJABAJgBhQGgAcEZqgEFMTcuMTW4AQPIAQD4AQGYAiWgAusZwgIKEAAYsAMY1gQYR8ICERAuGIAEGJECGNEDGMcBGIoFwgILEAAYgAQYsQMYgwHCAggQABiABBixA8ICIBAuGIAEGJECGNEDGMcBGIoFGJcFGNwEGN4EGOAE2AEBwgIQEAAYgAQYsQMYQxiDARiKBcICBRAAGIAEwgIKEAAYgAQYQxiKBcICCxAAGIAEGLEDGIoFwgIIEC4YgAQYsQPCAg4QABiABBixAxiDARiKBcICDhAAGIAEGJECGLEDGIoFwgIFECEYoAHCAggQABgWGB4YD5gDAIgGAZAGCLoGBggBEAEYFJIHBTE2LjIxoAePvgE&sclient=gws-wiz-serp)]
-4. Adhere strictly to the plagiarism policy. 
-5. Understand and comply with the Terms and Conditions of the Keploy Community Writing Program.
-
-### Rewards
-
-Our compensation amounts are measures in <u>USD</u> ($)
-
-- $10 for 350 views on article.
-- $20 for 500 views on article.
-- $50 for 1000 views on article.
-- $100 for 2000 views on article.
-
-Valid for 1 published submission per candidate, after 30-days of publishing date. The Submitted work must fulfill all the given criteria.
-(Compensations might be subject to any updates. Changes will be informed to all onboarded candidates on priority and updates will be made suitably in the guide.)
-
-
-## Terms and Conditions
-
-Keploy Community Writing Program Standard Terms & Conditions:
-
-- Submissions do not establish an employment relationship; you are an independent contractor.
-- You grant Keploy a perpetual, non-revocable license for your submitted content.
-- All content is licensed under Creative Commons Attribution-Noncommercial-ShareAlike 4.0 (CC BY-NC-SA 4.0).
-- You must comply with all applicable laws, including copyright laws, and Keploy's Terms of Service.
-- Keploy is not liable for any damages related to this agreement.
-- You warrant that your content does not infringe on third-party intellectual property rights.
-
-
-## Plagiarism Policy
-Keploy blog requires original content. Any copied or reproduced work will result in immediate cessation of collaboration, potentially without notice. This includes:
-
-Rewording existing posts as your own.
-Copying and pasting external documentation without proper attribution.
-Modifying someone else's code without significant original contributions.
-Using copyrighted images without permission.
-If unsure about plagiarism concerns, consult with the Keploy content team before submission.
-
-
-## Screenshots
-Screenshots can enhance your article by visually representing instructions. Ensure all content in the images is your original work and does not include copyrighted material. For clarity:
-
-- Increase font size for readability.
-- Crop to focus on relevant elements.
-- Remove unnecessary details.
-
-
-## FAQs
-
-### How do I get involved?
-
-Review our process for submitting ideas. When you submit a new idea, following details must be answered:
-
-- Article title and content summary.
-- Outline of the article, and descriptions of what each section will cover.
-- Information about prerequisite knowledge the reader will need to have.
-- Link to previous writing sample that demonstrates your capabilities.
-Our editorial staff will reach out to let you know if we want to publish your content and will make recommendations for revisions. Once we’ve agreed that we’re happy with the idea, we’ll send you a contract that agrees on the scope of the article and the compensation. From there, it’s up to you to write the first draft and submit it for review!
-
-### How do you evaluate content ideas?
-
-Our team reviews every submission, and we look for technical content that comprehensively covers software development topics with clear explanations. Explain as much detail as possible and leave no concepts out.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/favicon.ico

@@ -0,0 +1,48 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+  --font-lato: 'Lato', sans-serif;
+  --font-inconsolata: 'Inconsolata', monospace;
+  --font-montserrat: 'Montserrat', sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-lato), Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #FFFFFF;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #00163D;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}