keploy · ANAMASGARD · Dec 24, 2025 · Dec 26, 2025 · Dec 26, 2025 · Jan 21, 2026
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,47 @@
+# Dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# Build output
+.next
+out
+build
+dist
+
+# Testing
+coverage
+
+# Production
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE
+.idea
+.vscode
+*.swp
+*.swo
+.DS_Store
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# Misc
+.vercel
+*.pem
+
+# Debug
+.yarn/install-state.gz
+
+# Legacy static files (not used in Next.js)
+old_static/
diff --git a/README.md b/README.md
@@ -1,115 +1,220 @@
-
 <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>
 
 <h1 align="center">
 <b>
-Writers Program
+Keploy Writers Program
 </b>
-</h1 >
-
-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🧡
-
-<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>
-
-Examples of some preferred topics might include:
-
-<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>
-
-## How to submit?
-
-If you're a fit for this program, [Write for Us](https://forms.gle/ZP72SpWdNyjg4gbu8) and earn exciting rewards and compensation by Keploy🧡
-
-## About you
-
-We are seeking individuals who meet the following eligibility criteria:
-
-<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>
+</h1>
 
-## The Process
-
-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.)
+<p align="center">
+  <strong>Modern UI Redesign with Next.js 15 + shadcn/ui</strong>
+</p>
 
+---
+
+## 🚀 Quick Start
+
+### Prerequisites
+- **Node.js** 18.x or higher
+- **npm** 9.x or higher (or yarn/pnpm)
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/keploy/writers-program.git
+cd writers-program
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Available Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run dev` | Start development server with hot reload |
+| `npm run build` | Build production bundle |
+| `npm run start` | Start production server |
+| `npm run lint` | Run ESLint for code quality |
+
+---
+
+## 📁 Project Structure
+
+```
+writers-program/
+├── src/
+│   ├── app/                    # Next.js App Router
+│   │   ├── globals.css         # Global styles + Tailwind + animations
+│   │   ├── layout.tsx          # Root layout with metadata
+│   │   └── page.tsx            # Home page with all sections
+│   │
+│   ├── components/
+│   │   ├── sections/           # Page section components
+│   │   │   ├── HeroSection.tsx       # Hero with animated gradient text
+│   │   │   ├── AboutSection.tsx      # About Keploy section
+│   │   │   ├── OffersSection.tsx     # "What this program offers" cards
+│   │   │   ├── FlowSection.tsx       # "How the program works" timeline
+│   │   │   ├── CriteriaSection.tsx   # Evaluation criteria with stars bg
+│   │   │   ├── GuidelinesSection.tsx # Blog/carousel guidelines
+│   │   │   └── CommunitySection.tsx  # Join community CTA
+│   │   │
+│   │   ├── ui/                 # shadcn/ui base components
+│   │   │   ├── accordion.tsx   # Accordion component (Radix UI)
+│   │   │   ├── button.tsx      # Button with variants
+│   │   │   └── card.tsx        # Card family components
+│   │   │
+│   │   ├── Header.tsx          # Navigation with GitHub stars
+│   │   └── SocialSidebar.tsx   # Floating social links
+│   │
+│   └── lib/
+│       └── utils.ts            # Utility functions (cn helper)
+│
+├── public/                     # Static assets
+│   └── images/                 # GIFs and illustrations
+│
+├── tailwind.config.ts          # Tailwind CSS configuration
+├── next.config.js              # Next.js configuration
+├── components.json             # shadcn/ui configuration
+├── tsconfig.json               # TypeScript configuration
+└── package.json                # Dependencies and scripts
+```
+
+---
+
+## 🛠️ Tech Stack
+
+| Technology | Version | Purpose |
+|------------|---------|---------|
+| **Next.js** | 15.1.3 | React framework with App Router |
+| **React** | 19.0.0 | UI library |
+| **TypeScript** | 5.7.0 | Type safety |
+| **Tailwind CSS** | 3.4.17 | Utility-first styling |
+| **shadcn/ui** | Latest | Accessible UI components |
+| **Radix UI** | Latest | Headless UI primitives |
+| **Lucide React** | 0.474.0 | Icon library |
+
+---
+
+## 🎨 Sections Overview
+
+### 1. Hero Section
+- Animated gradient text with typewriter effect
+- Floating action buttons
+- Dynamic GitHub stars badge
+
+### 2. About Section
+- Clean description of Keploy's mission
+- Link to blog
+
+### 3. Offers Section ("What this program offers you?")
+- 3 cards with GIF illustrations
+- Orange hover border effect
+- Icons: Recognition, Learning, Community
+
+### 4. Flow Section ("Here's how the Program works")
+- 6-step vertical timeline
+- Numbered badges with connector lines
+- Responsive design (stacks on mobile)
+
+### 5. Criteria Section ("Evaluation Criteria")
+- Dark space-themed background
+- Animated stars effect
+- Expandable accordion cards
+
+### 6. Guidelines Section
+- 4 cards for blog and carousel guidelines
+- Direct link to [Keploy SEO Guidelines](https://github.com/keploy/keploy/wiki/Keploy-SEO-Guidelines)
+
+### 7. Community Section
+- Join Slack CTA with animated background
+
+---
+
+## 🧪 Testing Locally
+
+```bash
+# 1. Install dependencies
+npm install
+
+# 2. Start dev server
+npm run dev
+
+# 3. Open browser
+open http://localhost:3000
+
+# 4. Test production build
+npm run build
+npm run start
+```
+
+### Verify Sections
+- [ ] Hero section loads with gradient animation
+- [ ] Offers cards show hover effects
+- [ ] Timeline displays all 6 steps
+- [ ] Criteria accordions expand/collapse
+- [ ] Guidelines cards link to SEO docs
+- [ ] Community section has working Slack link
+
+---
+
+## 🎯 Design Principles
 
-## Terms and Conditions
+1. **Keploy Brand Consistency**
+   - Primary: Keploy Orange (`#F89559`)
+   - Secondary: Navy Blue (`#00163D`)
+   - Clean white backgrounds
 
-Keploy Community Writing Program Standard Terms & Conditions:
+2. **Accessibility**
+   - Semantic HTML (`<section>`, `<nav>`, `<main>`)
+   - ARIA labels on interactive elements
+   - Keyboard navigation support
+   - Reduced motion support
 
-- 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.
+3. **Responsive Design**
+   - Mobile-first approach
+   - Breakpoints: sm (640px), md (768px), lg (1024px)
+   - Flexible grids and typography
 
+4. **Performance**
+   - Static export optimized
+   - Optimized images and GIFs
+   - Minimal JavaScript bundle
 
-## 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.
+## 📝 Contributing
 
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feat/your-feature`
+3. Commit with DCO sign-off: `git commit -s -m "feat: your message"`
+4. Push and create a Pull Request
 
-## 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:
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines.
 
-- Increase font size for readability.
-- Crop to focus on relevant elements.
-- Remove unnecessary details.
+---
 
+## 📚 Resources
 
-## FAQs
+- [Next.js Documentation](https://nextjs.org/docs)
+- [shadcn/ui Components](https://ui.shadcn.com)
+- [Tailwind CSS Docs](https://tailwindcss.com/docs)
+- [Keploy SEO Guidelines](https://github.com/keploy/keploy/wiki/Keploy-SEO-Guidelines)
 
-### How do I get involved?
+---
 
-Review our process for submitting ideas. When you submit a new idea, following details must be answered:
+## 📄 License
 
-- 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!
+Licensed under [Apache License 2.0](./LICENSE). See LICENSE file for details.
 
-### 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.
+<p align="center">Made with ❤️ by the Keploy Community</p>
diff --git a/components.json b/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    output: 'export',
+    images: {
+        unoptimized: true,
+    },
+    trailingSlash: true,
+}
+
+module.exports = nextConfig