diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..df7fac9 --- /dev/null +++ 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 index 221b54e..67217c4 100755 --- a/README.md +++ b/README.md @@ -1,115 +1,220 @@ -

keploy logo

-Writers Program +Keploy Writers Program -

- -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🧑 - -

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.

- -Examples of some preferred topics might include: - - - -## 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: - - + -## 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 700 word count. -3. Chosen keywords must have a search volume greater than 400 . [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 USD ($) - -- $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.) +

+ Modern UI Redesign with Next.js 15 + shadcn/ui +

+--- + +## πŸš€ 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 (`
`, `