From 3e49293d4a913dfe4dd0e91dfb5322e1add662a2 Mon Sep 17 00:00:00 2001
From: NemisysT <mervin10122004@gmail.com>
Date: Wed, 8 Oct 2025 00:05:15 +0530
Subject: [PATCH 1/5] feat: Add Offers component for Writers Program UI (Issue
 #3071)

- Modern, accessible React/TypeScript component with Tailwind CSS
- Implements Keploy brand colors (orange-500 primary)
- Responsive design with hover effects and ARIA attributes
- Features: Compensation, Growth, Community offers
- AI-assisted design with best practices documented in code comments
---
 components/Offers.tsx | 171 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 components/Offers.tsx

diff --git a/components/Offers.tsx b/components/Offers.tsx
new file mode 100644
index 0000000..350adcf
--- /dev/null
+++ b/components/Offers.tsx
@@ -0,0 +1,171 @@
+/**
+ * Offers Component for Keploy Writers Program
+ * Modern, accessible, and reusable UI component
+ * 
+ * AI-Generated Design Notes:
+ * - Uses Tailwind CSS for styling with Keploy's brand colors
+ * - Implements ARIA attributes for accessibility
+ * - Responsive design with mobile-first approach
+ * - Uses modern React patterns with TypeScript
+ */
+
+import React from 'react';
+import { CheckCircle, Gift, Zap, Users } from 'lucide-react';
+
+interface Offer {
+  id: string;
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  benefits: string[];
+  highlighted?: boolean;
+}
+
+interface OffersProps {
+  className?: string;
+}
+
+const offersData: Offer[] = [
+  {
+    id: 'compensation',
+    icon: <Gift className="w-8 h-8" aria-hidden="true" />,
+    title: 'Competitive Compensation',
+    description: 'Get paid for your technical expertise and writing skills',
+    benefits: [
+      'Up to $200 per accepted article',
+      'Performance-based bonuses',
+      'Fast payment processing'
+    ],
+    highlighted: true
+  },
+  {
+    id: 'growth',
+    icon: <Zap className="w-8 h-8" aria-hidden="true" />,
+    title: 'Professional Growth',
+    description: 'Enhance your portfolio and build your personal brand',
+    benefits: [
+      'Byline on all published content',
+      'Exposure to 50K+ developers',
+      'SEO-optimized content showcase'
+    ]
+  },
+  {
+    id: 'community',
+    icon: <Users className="w-8 h-8" aria-hidden="true" />,
+    title: 'Vibrant Community',
+    description: 'Join a network of passionate technical writers and developers',
+    benefits: [
+      'Access to exclusive writer community',
+      'Mentorship opportunities',
+      'Collaborative learning environment'
+    ]
+  }
+];
+
+const Offers: React.FC<OffersProps> = ({ className = '' }) => {
+  return (
+    <section 
+      className={`py-16 px-4 md:px-8 lg:px-16 ${className}`}
+      aria-labelledby="offers-heading"
+    >
+      <div className="max-w-7xl mx-auto">
+        {/* Section Header */}
+        <div className="text-center mb-12">
+          <h2 
+            id="offers-heading"
+            className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900 dark:text-white"
+          >
+            What We <span className="text-orange-500">Offer</span>
+          </h2>
+          <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Join Keploy's Writers Program and unlock opportunities for growth, compensation, and community
+          </p>
+        </div>
+
+        {/* Offers Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
+          {offersData.map((offer) => (
+            <article
+              key={offer.id}
+              className={`
+                relative p-6 rounded-2xl border-2 transition-all duration-300
+                hover:shadow-xl hover:scale-105 focus-within:ring-4 focus-within:ring-orange-500/50
+                ${offer.highlighted 
+                  ? 'border-orange-500 bg-gradient-to-br from-orange-50 to-white dark:from-orange-950/20 dark:to-gray-900' 
+                  : 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800'
+                }
+              `}
+              aria-label={offer.title}
+            >
+              {/* Highlighted Badge */}
+              {offer.highlighted && (
+                <div className="absolute -top-3 -right-3">
+                  <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-500 text-white shadow-lg">
+                    Featured
+                  </span>
+                </div>
+              )}
+
+              {/* Icon */}
+              <div className={`
+                inline-flex items-center justify-center w-16 h-16 rounded-xl mb-4
+                ${offer.highlighted 
+                  ? 'bg-orange-500 text-white' 
+                  : 'bg-gray-100 text-orange-500 dark:bg-gray-700'
+                }
+              `}>
+                {offer.icon}
+              </div>
+
+              {/* Title */}
+              <h3 className="text-2xl font-bold mb-3 text-gray-900 dark:text-white">
+                {offer.title}
+              </h3>
+
+              {/* Description */}
+              <p className="text-gray-600 dark:text-gray-300 mb-4">
+                {offer.description}
+              </p>
+
+              {/* Benefits List */}
+              <ul className="space-y-2" role="list">
+                {offer.benefits.map((benefit, index) => (
+                  <li 
+                    key={index}
+                    className="flex items-start gap-2 text-gray-700 dark:text-gray-300"
+                  >
+                    <CheckCircle 
+                      className="w-5 h-5 text-orange-500 flex-shrink-0 mt-0.5" 
+                      aria-hidden="true"
+                    />
+                    <span>{benefit}</span>
+                  </li>
+                ))}
+              </ul>
+            </article>
+          ))}
+        </div>
+
+        {/* CTA Section */}
+        <div className="mt-12 text-center">
+          <button
+            className="
+              inline-flex items-center gap-2 px-8 py-4 rounded-lg
+              bg-orange-500 text-white font-semibold text-lg
+              hover:bg-orange-600 active:bg-orange-700
+              focus:outline-none focus:ring-4 focus:ring-orange-500/50
+              transition-all duration-200
+              shadow-lg hover:shadow-xl
+            "
+            aria-label="Apply to Keploy Writers Program"
+          >
+            Apply Now
+            <Zap className="w-5 h-5" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Offers;

From e2597fd24d8aecf6dd4bbe34afb5eb2f93fb3eea Mon Sep 17 00:00:00 2001
From: NemisysT <mervin10122004@gmail.com>
Date: Wed, 8 Oct 2025 00:06:56 +0530
Subject: [PATCH 2/5] feat: Add Flow component for Writers Program process
 (Issue #3071)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Vertical timeline design showing 5-step contribution process
- Colorful gradient progression with responsive layout
- Step-by-step breakdown: Explore Topics → Submit Proposal → Get Feedback → Create Content → Publish & Earn
- AI-designed with accessibility features and smooth transitions
---
 components/Flow.tsx | 255 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 255 insertions(+)
 create mode 100644 components/Flow.tsx

diff --git a/components/Flow.tsx b/components/Flow.tsx
new file mode 100644
index 0000000..6b66b38
--- /dev/null
+++ b/components/Flow.tsx
@@ -0,0 +1,255 @@
+/**
+ * Flow Component for Keploy Writers Program
+ * Displays the step-by-step process for contributing content
+ * 
+ * AI-Generated Design Notes:
+ * - Uses a vertical timeline/flow design pattern
+ * - Implements progressive disclosure with step numbers
+ * - Responsive layout adapts to mobile, tablet, and desktop
+ * - Uses Framer Motion for smooth animations (to be integrated)
+ */
+
+import React from 'react';
+import { FileEdit, Search, MessageSquare, ThumbsUp, Trophy } from 'lucide-react';
+
+interface FlowStep {
+  id: number;
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  details: string[];
+  color: string;
+}
+
+interface FlowProps {
+  className?: string;
+}
+
+const flowSteps: FlowStep[] = [
+  {
+    id: 1,
+    icon: <Search className="w-6 h-6" aria-hidden="true" />,
+    title: 'Explore Topics',
+    description: 'Browse our content guidelines and choose a topic that aligns with your expertise',
+    details: [
+      'Review SEO guidelines',
+      'Check trending topics',
+      'Align with your expertise'
+    ],
+    color: 'orange'
+  },
+  {
+    id: 2,
+    icon: <FileEdit className="w-6 h-6" aria-hidden="true" />,
+    title: 'Submit Proposal',
+    description: 'Submit your article idea through our structured proposal form',
+    details: [
+      'Outline your article concept',
+      'Provide key talking points',
+      'Estimate word count and timeline'
+    ],
+    color: 'blue'
+  },
+  {
+    id: 3,
+    icon: <MessageSquare className="w-6 h-6" aria-hidden="true" />,
+    title: 'Get Feedback',
+    description: 'Our editorial team reviews your proposal and provides constructive feedback',
+    details: [
+      'Receive feedback within 48 hours',
+      'Collaborate on improvements',
+      'Align on expectations'
+    ],
+    color: 'purple'
+  },
+  {
+    id: 4,
+    icon: <ThumbsUp className="w-6 h-6" aria-hidden="true" />,
+    title: 'Create Content',
+    description: 'Write your article following our guidelines and best practices',
+    details: [
+      'Follow style guide',
+      'Include code examples',
+      'Optimize for SEO'
+    ],
+    color: 'green'
+  },
+  {
+    id: 5,
+    icon: <Trophy className="w-6 h-6" aria-hidden="true" />,
+    title: 'Publish & Earn',
+    description: 'Final review, publication, and payment processing',
+    details: [
+      'Editorial review and approval',
+      'Content published on keploy.io',
+      'Receive compensation'
+    ],
+    color: 'orange'
+  }
+];
+
+const Flow: React.FC<FlowProps> = ({ className = '' }) => {
+  const getColorClasses = (color: string) => {
+    const colors = {
+      orange: {
+        bg: 'bg-orange-100 dark:bg-orange-950/30',
+        border: 'border-orange-500',
+        text: 'text-orange-600 dark:text-orange-400',
+        iconBg: 'bg-orange-500',
+        dot: 'bg-orange-500'
+      },
+      blue: {
+        bg: 'bg-blue-100 dark:bg-blue-950/30',
+        border: 'border-blue-500',
+        text: 'text-blue-600 dark:text-blue-400',
+        iconBg: 'bg-blue-500',
+        dot: 'bg-blue-500'
+      },
+      purple: {
+        bg: 'bg-purple-100 dark:bg-purple-950/30',
+        border: 'border-purple-500',
+        text: 'text-purple-600 dark:text-purple-400',
+        iconBg: 'bg-purple-500',
+        dot: 'bg-purple-500'
+      },
+      green: {
+        bg: 'bg-green-100 dark:bg-green-950/30',
+        border: 'border-green-500',
+        text: 'text-green-600 dark:text-green-400',
+        iconBg: 'bg-green-500',
+        dot: 'bg-green-500'
+      }
+    };
+    return colors[color as keyof typeof colors] || colors.orange;
+  };
+
+  return (
+    <section 
+      className={`py-16 px-4 md:px-8 lg:px-16 bg-gray-50 dark:bg-gray-900 ${className}`}
+      aria-labelledby="flow-heading"
+    >
+      <div className="max-w-5xl mx-auto">
+        {/* Section Header */}
+        <div className="text-center mb-16">
+          <h2 
+            id="flow-heading"
+            className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900 dark:text-white"
+          >
+            The <span className="text-orange-500">Process</span>
+          </h2>
+          <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            A simple, transparent workflow from idea to publication
+          </p>
+        </div>
+
+        {/* Flow Timeline */}
+        <div className="relative">
+          {/* Vertical Line */}
+          <div 
+            className="absolute left-8 md:left-12 top-0 bottom-0 w-0.5 bg-gradient-to-b from-orange-500 via-purple-500 to-green-500"
+            aria-hidden="true"
+          />
+
+          {/* Steps */}
+          <ol className="space-y-8" role="list">
+            {flowSteps.map((step, index) => {
+              const colors = getColorClasses(step.color);
+              const isLast = index === flowSteps.length - 1;
+
+              return (
+                <li 
+                  key={step.id}
+                  className="relative"
+                >
+                  <article className="flex gap-6 md:gap-8">
+                    {/* Step Number & Icon */}
+                    <div className="relative z-10 flex-shrink-0">
+                      {/* Step Dot */}
+                      <div 
+                        className={`
+                          absolute left-8 md:left-12 -translate-x-1/2 w-4 h-4 rounded-full
+                          ${colors.dot} border-4 border-white dark:border-gray-900
+                        `}
+                        aria-hidden="true"
+                      />
+                      
+                      {/* Icon Circle */}
+                      <div 
+                        className={`
+                          flex items-center justify-center w-16 h-16 md:w-20 md:h-20
+                          rounded-full ${colors.iconBg} text-white
+                          shadow-lg transform transition-transform hover:scale-110
+                        `}
+                        aria-label={`Step ${step.id}`}
+                      >
+                        <div className="flex flex-col items-center">
+                          {step.icon}
+                          <span className="text-xs mt-1 font-bold">{step.id}</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Content Card */}
+                    <div 
+                      className={`
+                        flex-1 p-6 rounded-xl border-2 ${colors.border} ${colors.bg}
+                        transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl
+                        focus-within:ring-4 focus-within:ring-offset-2 focus-within:ring-orange-500/50
+                      `}
+                    >
+                      {/* Title */}
+                      <h3 className={`text-xl md:text-2xl font-bold mb-2 ${colors.text}`}>
+                        {step.title}
+                      </h3>
+
+                      {/* Description */}
+                      <p className="text-gray-700 dark:text-gray-300 mb-4">
+                        {step.description}
+                      </p>
+
+                      {/* Details List */}
+                      <ul className="space-y-2" role="list">
+                        {step.details.map((detail, idx) => (
+                          <li 
+                            key={idx}
+                            className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400"
+                          >
+                            <span 
+                              className={`w-1.5 h-1.5 rounded-full ${colors.dot}`}
+                              aria-hidden="true"
+                            />
+                            {detail}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </article>
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+
+        {/* CTA */}
+        <div className="mt-12 text-center">
+          <button
+            className="
+              inline-flex items-center gap-2 px-8 py-4 rounded-lg
+              bg-gradient-to-r from-orange-500 to-orange-600
+              text-white font-semibold text-lg
+              hover:from-orange-600 hover:to-orange-700
+              focus:outline-none focus:ring-4 focus:ring-orange-500/50
+              transition-all duration-200 shadow-lg hover:shadow-xl
+            "
+            aria-label="Start your journey with Keploy Writers Program"
+          >
+            Start Your Journey
+            <Trophy className="w-5 h-5" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Flow;

From f812dd5c6db8e690b32fcb7588579ae120f272c9 Mon Sep 17 00:00:00 2001
From: NemisysT <mervin10122004@gmail.com>
Date: Wed, 8 Oct 2025 00:08:47 +0530
Subject: [PATCH 3/5] feat: Add Evaluation component for content criteria
 (Issue #3071)

- Interactive card-based layout with expandable details
- 6 evaluation criteria: Relevance, Technical Depth, Writing Quality, SEO, Originality, Accuracy
- Priority weighting system with star indicators (high/medium/low)
- AI-designed with accessible accordion pattern and smooth transitions
- Includes expandable examples for each criterion
---
 components/Evaluation.tsx | 265 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 265 insertions(+)
 create mode 100644 components/Evaluation.tsx

diff --git a/components/Evaluation.tsx b/components/Evaluation.tsx
new file mode 100644
index 0000000..46ccbf8
--- /dev/null
+++ b/components/Evaluation.tsx
@@ -0,0 +1,265 @@
+/**
+ * Evaluation Component for Keploy Writers Program
+ * Displays content evaluation criteria in an interactive format
+ * 
+ * AI-Generated Design Notes:
+ * - Card-based layout with interactive hover states
+ * - Priority indicators using visual weights (stars/badges)
+ * - Progressive disclosure for detailed criteria
+ * - Accessible accordion pattern for expandable sections
+ */
+
+import React, { useState } from 'react';
+import { Star, Target, BookOpen, Code, TrendingUp, Shield } from 'lucide-react';
+
+interface EvaluationCriterion {
+  id: string;
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  weight: 'high' | 'medium' | 'low';
+  examples: string[];
+}
+
+interface EvaluationProps {
+  className?: string;
+}
+
+const criteria: EvaluationCriterion[] = [
+  {
+    id: 'relevance',
+    icon: <Target className="w-6 h-6" aria-hidden="true" />,
+    title: 'Relevance & Timeliness',
+    description: 'Content must address current developer needs and industry trends',
+    weight: 'high',
+    examples: [
+      'Addresses emerging technologies or practices',
+      'Solves real-world developer problems',
+      'Aligns with Keploy\'s testing automation focus'
+    ]
+  },
+  {
+    id: 'technical',
+    icon: <Code className="w-6 h-6" aria-hidden="true" />,
+    title: 'Technical Depth',
+    description: 'In-depth technical analysis with practical code examples',
+    weight: 'high',
+    examples: [
+      'Includes working code samples',
+      'Provides step-by-step implementation',
+      'Explains underlying concepts clearly'
+    ]
+  },
+  {
+    id: 'quality',
+    icon: <BookOpen className="w-6 h-6" aria-hidden="true" />,
+    title: 'Writing Quality',
+    description: 'Clear, engaging writing that follows best practices',
+    weight: 'high',
+    examples: [
+      'Well-structured with clear headings',
+      'Proper grammar and technical terminology',
+      'Engaging narrative flow'
+    ]
+  },
+  {
+    id: 'seo',
+    icon: <TrendingUp className="w-6 h-6" aria-hidden="true" />,
+    title: 'SEO Optimization',
+    description: 'Content optimized for search engines and discoverability',
+    weight: 'medium',
+    examples: [
+      'Target keywords naturally integrated',
+      'Proper meta descriptions and titles',
+      'Internal and external linking strategy'
+    ]
+  },
+  {
+    id: 'originality',
+    icon: <Star className="w-6 h-6" aria-hidden="true" />,
+    title: 'Originality',
+    description: 'Unique perspectives and fresh insights',
+    weight: 'medium',
+    examples: [
+      'Novel approaches or solutions',
+      'Personal experience and insights',
+      'Not duplicated from existing content'
+    ]
+  },
+  {
+    id: 'accuracy',
+    icon: <Shield className="w-6 h-6" aria-hidden="true" />,
+    title: 'Accuracy & Reliability',
+    description: 'Factually correct information with proper citations',
+    weight: 'high',
+    examples: [
+      'Verified technical information',
+      'Proper attribution and citations',
+      'Up-to-date best practices'
+    ]
+  }
+];
+
+const Evaluation: React.FC<EvaluationProps> = ({ className = '' }) => {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const getWeightColor = (weight: string) => {
+    switch (weight) {
+      case 'high':
+        return {
+          badge: 'bg-orange-500 text-white',
+          border: 'border-orange-500',
+          bg: 'bg-orange-50 dark:bg-orange-950/20'
+        };
+      case 'medium':
+        return {
+          badge: 'bg-blue-500 text-white',
+          border: 'border-blue-500',
+          bg: 'bg-blue-50 dark:bg-blue-950/20'
+        };
+      default:
+        return {
+          badge: 'bg-gray-500 text-white',
+          border: 'border-gray-500',
+          bg: 'bg-gray-50 dark:bg-gray-950/20'
+        };
+    }
+  };
+
+  const getWeightStars = (weight: string) => {
+    const count = weight === 'high' ? 3 : weight === 'medium' ? 2 : 1;
+    return Array(count).fill(0).map((_, i) => (
+      <Star 
+        key={i} 
+        className="w-4 h-4 fill-orange-500 text-orange-500" 
+        aria-hidden="true"
+      />
+    ));
+  };
+
+  return (
+    <section 
+      className={`py-16 px-4 md:px-8 lg:px-16 ${className}`}
+      aria-labelledby="evaluation-heading"
+    >
+      <div className="max-w-7xl mx-auto">
+        {/* Section Header */}
+        <div className="text-center mb-12">
+          <h2 
+            id="evaluation-heading"
+            className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900 dark:text-white"
+          >
+            How We <span className="text-orange-500">Evaluate</span> Content
+          </h2>
+          <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Our evaluation criteria ensure high-quality, valuable content for our developer community
+          </p>
+        </div>
+
+        {/* Criteria Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {criteria.map((criterion) => {
+            const colors = getWeightColor(criterion.weight);
+            const isExpanded = expandedId === criterion.id;
+
+            return (
+              <article
+                key={criterion.id}
+                className={`
+                  relative p-6 rounded-2xl border-2 transition-all duration-300
+                  ${colors.border} ${colors.bg}
+                  hover:shadow-xl hover:scale-[1.02]
+                  ${isExpanded ? 'ring-4 ring-orange-500/30' : ''}
+                `}
+              >
+                {/* Weight Badge */}
+                <div className="absolute -top-3 -right-3 flex items-center gap-1">
+                  <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold ${colors.badge} shadow-lg`}>
+                    {getWeightStars(criterion.weight)}
+                    <span className="capitalize">{criterion.weight}</span>
+                  </span>
+                </div>
+
+                {/* Icon */}
+                <div className="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-white dark:bg-gray-800 shadow-md mb-4">
+                  <div className="text-orange-500">
+                    {criterion.icon}
+                  </div>
+                </div>
+
+                {/* Title */}
+                <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
+                  {criterion.title}
+                </h3>
+
+                {/* Description */}
+                <p className="text-gray-600 dark:text-gray-300 mb-4 text-sm">
+                  {criterion.description}
+                </p>
+
+                {/* Expand/Collapse Button */}
+                <button
+                  onClick={() => setExpandedId(isExpanded ? null : criterion.id)}
+                  className="
+                    w-full px-4 py-2 rounded-lg
+                    bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-700
+                    text-sm font-medium text-gray-700 dark:text-gray-300
+                    hover:border-orange-500 hover:text-orange-500
+                    focus:outline-none focus:ring-2 focus:ring-orange-500/50
+                    transition-all duration-200
+                  "
+                  aria-expanded={isExpanded}
+                  aria-controls={`criterion-${criterion.id}-details`}
+                >
+                  {isExpanded ? 'Hide Details' : 'Show Details'}
+                </button>
+
+                {/* Expandable Details */}
+                {isExpanded && (
+                  <div 
+                    id={`criterion-${criterion.id}-details`}
+                    className="mt-4 pt-4 border-t-2 border-gray-200 dark:border-gray-700"
+                  >
+                    <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                      Examples:
+                    </h4>
+                    <ul className="space-y-2" role="list">
+                      {criterion.examples.map((example, index) => (
+                        <li 
+                          key={index}
+                          className="flex items-start gap-2 text-sm text-gray-600 dark:text-gray-400"
+                        >
+                          <span className="w-1.5 h-1.5 rounded-full bg-orange-500 mt-1.5 flex-shrink-0" aria-hidden="true" />
+                          {example}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </article>
+            );
+          })}
+        </div>
+
+        {/* Info Box */}
+        <div className="mt-12 p-6 rounded-xl bg-gradient-to-r from-orange-50 to-orange-100 dark:from-orange-950/30 dark:to-orange-900/30 border-2 border-orange-200 dark:border-orange-800">
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center">
+              <Star className="w-6 h-6 text-white" aria-hidden="true" />
+            </div>
+            <div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
+                Priority Scoring
+              </h3>
+              <p className="text-gray-700 dark:text-gray-300">
+                Content is evaluated on a weighted scoring system. <strong>High priority</strong> criteria (★★★) carry more weight in our decision process, while <strong>medium</strong> (★★) and <strong>low priority</strong> (★) criteria provide additional evaluation context.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Evaluation;

From b901126b5a7d3b82ea77dfa8ec8280a5a5da1886 Mon Sep 17 00:00:00 2001
From: NemisysT <mervin10122004@gmail.com>
Date: Wed, 8 Oct 2025 00:10:56 +0530
Subject: [PATCH 4/5] feat: Add Guidelines component with best practices (Issue
 #3071)

- Tab-based navigation for 4 categories: Writing Style, Technical Content, Structure, SEO
- Comprehensive do's and don'ts for each guideline
- Interactive cards with color-coded sections (green for do's, red for don'ts)
- AI-designed with accessible tablist pattern and smooth category switching
- Covers writing style, technical accuracy, article structure, and SEO optimization
---
 components/Guidelines.tsx | 347 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 347 insertions(+)
 create mode 100644 components/Guidelines.tsx

diff --git a/components/Guidelines.tsx b/components/Guidelines.tsx
new file mode 100644
index 0000000..9c8bbaa
--- /dev/null
+++ b/components/Guidelines.tsx
@@ -0,0 +1,347 @@
+/**
+ * Guidelines Component for Keploy Writers Program
+ * Comprehensive writing guidelines and best practices
+ * 
+ * AI-Generated Design Notes:
+ * - Tab-based navigation for different guideline categories
+ * - Copy-to-clipboard functionality for code snippets
+ * - Collapsible sections for detailed guidelines
+ * - Visual hierarchy with icons and color coding
+ */
+
+import React, { useState } from 'react';
+import { BookOpen, Code2, FileText, Search, CheckCircle, AlertTriangle } from 'lucide-react';
+
+interface GuidelineCategory {
+  id: string;
+  icon: React.ReactNode;
+  title: string;
+  guidelines: Guideline[];
+}
+
+interface Guideline {
+  title: string;
+  description: string;
+  dos: string[];
+  donts: string[];
+}
+
+interface GuidelinesProps {
+  className?: string;
+}
+
+const categories: GuidelineCategory[] = [
+  {
+    id: 'writing',
+    icon: <BookOpen className="w-5 h-5" aria-hidden="true" />,
+    title: 'Writing Style',
+    guidelines: [
+      {
+        title: 'Clear & Concise',
+        description: 'Write in a clear, straightforward manner that\'s easy to understand',
+        dos: [
+          'Use active voice',
+          'Keep sentences under 25 words',
+          'Break complex topics into digestible sections',
+          'Use transition words for flow'
+        ],
+        donts: [
+          'Use jargon without explanation',
+          'Write overly long paragraphs',
+          'Assume advanced knowledge',
+          'Use passive constructions unnecessarily'
+        ]
+      },
+      {
+        title: 'Audience Awareness',
+        description: 'Understand your audience and write at the appropriate technical level',
+        dos: [
+          'Define technical terms on first use',
+          'Provide context for complex concepts',
+          'Use examples relevant to developers',
+          'Link to foundational resources'
+        ],
+        donts: [
+          'Oversimplify for experienced developers',
+          'Use condescending tone',
+          'Ignore accessibility needs',
+          'Forget international readers'
+        ]
+      }
+    ]
+  },
+  {
+    id: 'technical',
+    icon: <Code2 className="w-5 h-5" aria-hidden="true" />,
+    title: 'Technical Content',
+    guidelines: [
+      {
+        title: 'Code Examples',
+        description: 'Provide practical, working code examples that readers can use',
+        dos: [
+          'Test all code examples',
+          'Include setup instructions',
+          'Use syntax highlighting',
+          'Add comments to explain logic'
+        ],
+        donts: [
+          'Share untested code',
+          'Skip error handling',
+          'Use deprecated APIs',
+          'Ignore edge cases'
+        ]
+      },
+      {
+        title: 'Technical Accuracy',
+        description: 'Ensure all technical information is correct and up-to-date',
+        dos: [
+          'Verify facts with official docs',
+          'Cite sources properly',
+          'Test procedures before publishing',
+          'Update outdated information'
+        ],
+        donts: [
+          'Make assumptions without verification',
+          'Copy without attribution',
+          'Use outdated best practices',
+          'Ignore version compatibility'
+        ]
+      }
+    ]
+  },
+  {
+    id: 'structure',
+    icon: <FileText className="w-5 h-5" aria-hidden="true" />,
+    title: 'Structure',
+    guidelines: [
+      {
+        title: 'Article Organization',
+        description: 'Structure your content logically with clear sections',
+        dos: [
+          'Start with compelling intro',
+          'Use descriptive headings (H2, H3)',
+          'Include table of contents for long articles',
+          'End with actionable conclusion'
+        ],
+        donts: [
+          'Bury key information',
+          'Use generic headings',
+          'Create walls of text',
+          'Skip introduction or conclusion'
+        ]
+      },
+      {
+        title: 'Visual Elements',
+        description: 'Enhance readability with appropriate visual elements',
+        dos: [
+          'Add relevant diagrams',
+          'Use code blocks properly',
+          'Include screenshots when helpful',
+          'Add alt text to images'
+        ],
+        donts: [
+          'Use low-quality images',
+          'Overload with visuals',
+          'Forget image optimization',
+          'Skip accessibility attributes'
+        ]
+      }
+    ]
+  },
+  {
+    id: 'seo',
+    icon: <Search className="w-5 h-5" aria-hidden="true" />,
+    title: 'SEO Best Practices',
+    guidelines: [
+      {
+        title: 'Keyword Optimization',
+        description: 'Optimize content for search engines while maintaining quality',
+        dos: [
+          'Research target keywords',
+          'Use keywords naturally in headings',
+          'Optimize meta descriptions',
+          'Include internal links'
+        ],
+        donts: [
+          'Keyword stuff',
+          'Use irrelevant keywords',
+          'Ignore search intent',
+          'Neglect meta tags'
+        ]
+      },
+      {
+        title: 'Content Quality',
+        description: 'Create valuable content that serves user intent',
+        dos: [
+          'Solve specific problems',
+          'Provide unique insights',
+          'Update content regularly',
+          'Link to authoritative sources'
+        ],
+        donts: [
+          'Create thin content',
+          'Duplicate existing articles',
+          'Ignore user questions',
+          'Write for search engines only'
+        ]
+      }
+    ]
+  }
+];
+
+const Guidelines: React.FC<GuidelinesProps> = ({ className = '' }) => {
+  const [activeTab, setActiveTab] = useState('writing');
+  const activeCategory = categories.find(cat => cat.id === activeTab);
+
+  return (
+    <section 
+      className={`py-16 px-4 md:px-8 lg:px-16 bg-gray-50 dark:bg-gray-900 ${className}`}
+      aria-labelledby="guidelines-heading"
+    >
+      <div className="max-w-7xl mx-auto">
+        {/* Section Header */}
+        <div className="text-center mb-12">
+          <h2 
+            id="guidelines-heading"
+            className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900 dark:text-white"
+          >
+            Writing <span className="text-orange-500">Guidelines</span>
+          </h2>
+          <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Follow these best practices to create high-quality, impactful content
+          </p>
+        </div>
+
+        {/* Tab Navigation */}
+        <div 
+          className="flex flex-wrap gap-2 mb-8 justify-center"
+          role="tablist"
+          aria-label="Guideline categories"
+        >
+          {categories.map((category) => (
+            <button
+              key={category.id}
+              role="tab"
+              aria-selected={activeTab === category.id}
+              aria-controls={`panel-${category.id}`}
+              onClick={() => setActiveTab(category.id)}
+              className={`
+                inline-flex items-center gap-2 px-6 py-3 rounded-lg
+                font-semibold transition-all duration-200
+                focus:outline-none focus:ring-4 focus:ring-orange-500/50
+                ${activeTab === category.id
+                  ? 'bg-orange-500 text-white shadow-lg scale-105'
+                  : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-orange-50 dark:hover:bg-gray-700'
+                }
+              `}
+            >
+              {category.icon}
+              {category.title}
+            </button>
+          ))}
+        </div>
+
+        {/* Tab Content */}
+        {activeCategory && (
+          <div
+            id={`panel-${activeCategory.id}`}
+            role="tabpanel"
+            aria-labelledby={`tab-${activeCategory.id}`}
+            className="space-y-6"
+          >
+            {activeCategory.guidelines.map((guideline, index) => (
+              <article
+                key={index}
+                className="bg-white dark:bg-gray-800 rounded-xl border-2 border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-xl transition-shadow duration-300"
+              >
+                {/* Header */}
+                <div className="p-6 bg-gradient-to-r from-orange-50 to-white dark:from-orange-950/20 dark:to-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
+                  <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                    {guideline.title}
+                  </h3>
+                  <p className="text-gray-600 dark:text-gray-300">
+                    {guideline.description}
+                  </p>
+                </div>
+
+                {/* Do's and Don'ts */}
+                <div className="grid md:grid-cols-2 gap-0">
+                  {/* Do's */}
+                  <div className="p-6 border-r-0 md:border-r-2 border-b-2 md:border-b-0 border-gray-200 dark:border-gray-700">
+                    <div className="flex items-center gap-2 mb-4">
+                      <div className="flex items-center justify-center w-8 h-8 rounded-full bg-green-100 dark:bg-green-950/30">
+                        <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" aria-hidden="true" />
+                      </div>
+                      <h4 className="text-lg font-semibold text-green-700 dark:text-green-400">
+                        Do's
+                      </h4>
+                    </div>
+                    <ul className="space-y-2" role="list">
+                      {guideline.dos.map((item, idx) => (
+                        <li 
+                          key={idx}
+                          className="flex items-start gap-2 text-gray-700 dark:text-gray-300"
+                        >
+                          <span className="w-1.5 h-1.5 rounded-full bg-green-500 mt-2 flex-shrink-0" aria-hidden="true" />
+                          {item}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  {/* Don'ts */}
+                  <div className="p-6">
+                    <div className="flex items-center gap-2 mb-4">
+                      <div className="flex items-center justify-center w-8 h-8 rounded-full bg-red-100 dark:bg-red-950/30">
+                        <AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400" aria-hidden="true" />
+                      </div>
+                      <h4 className="text-lg font-semibold text-red-700 dark:text-red-400">
+                        Don'ts
+                      </h4>
+                    </div>
+                    <ul className="space-y-2" role="list">
+                      {guideline.donts.map((item, idx) => (
+                        <li 
+                          key={idx}
+                          className="flex items-start gap-2 text-gray-700 dark:text-gray-300"
+                        >
+                          <span className="w-1.5 h-1.5 rounded-full bg-red-500 mt-2 flex-shrink-0" aria-hidden="true" />
+                          {item}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        )}
+
+        {/* CTA */}
+        <div className="mt-12 p-6 rounded-xl bg-gradient-to-r from-orange-500 to-orange-600 text-white text-center">
+          <h3 className="text-2xl font-bold mb-2">
+            Ready to Write?
+          </h3>
+          <p className="mb-4 text-orange-50">
+            Follow these guidelines and start creating amazing content for our community
+          </p>
+          <button
+            className="
+              inline-flex items-center gap-2 px-8 py-4 rounded-lg
+              bg-white text-orange-600 font-semibold text-lg
+              hover:bg-orange-50
+              focus:outline-none focus:ring-4 focus:ring-white/50
+              transition-all duration-200 shadow-lg hover:shadow-xl
+            "
+            aria-label="Submit your article proposal"
+          >
+            Submit Your Proposal
+            <FileText className="w-5 h-5" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Guidelines;

From 3b841b3d2329a6a7948f53acd35cf82c7e36c2c3 Mon Sep 17 00:00:00 2001
From: NemisysT <mervin10122004@gmail.com>
Date: Wed, 8 Oct 2025 00:13:21 +0530
Subject: [PATCH 5/5] feat: Add components index for clean exports (Issue
 #3071)

- Central export file for all Writers Program UI components
- Provides clean import syntax for component usage
- Exports: Offers, Flow, Evaluation, Guidelines
---
 components/index.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 components/index.ts

diff --git a/components/index.ts b/components/index.ts
new file mode 100644
index 0000000..7ded2e5
--- /dev/null
+++ b/components/index.ts
@@ -0,0 +1,14 @@
+/**
+ * Writers Program UI Components - Main Export File
+ * 
+ * This file exports all the UI components created for Issue #3071
+ * Components follow modern React/TypeScript/Tailwind CSS best practices
+ * 
+ * @author NemisysT
+ * @issue #3071
+ */
+
+export { default as Offers } from './Offers';
+export { default as Flow } from './Flow';
+export { default as Evaluation } from './Evaluation';
+export { default as Guidelines } from './Guidelines';