setIsMenuOpen(false)}
+ aria-hidden="true"
+ />
+
+ {/* Side Panel */}
+
+ {/* Header */}
+
+
Navigation
+ setIsMenuOpen(false)}
+ className="w-8 h-8 flex items-center justify-center rounded-md bg-[#F89559] text-white hover:bg-[#e87b3a] transition-colors"
+ aria-label="Close menu"
+ >
+
+
+
+ {/* Navigation Links */}
+
+ {navLinks.map((link) => (
+
+
+ {/* Social Icons at Bottom */}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/SocialSidebar.tsx b/src/components/SocialSidebar.tsx
new file mode 100644
index 0000000..2baf311
--- /dev/null
+++ b/src/components/SocialSidebar.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import Link from "next/link";
+
+const socialLinks = [
+ {
+ name: "Slack",
+ href: "https://keploy.slack.com",
+ icon: (
+
+
+ ),
+ },
+ {
+ name: "X (Twitter)",
+ href: "https://twitter.com/keaboratory",
+ icon: (
+
+
+ ),
+ },
+ {
+ name: "YouTube",
+ href: "https://www.youtube.com/@kaboratory",
+ icon: (
+
+
+ ),
+ },
+ {
+ name: "LinkedIn",
+ href: "https://www.linkedin.com/company/keploy/",
+ icon: (
+
+
+ ),
+ },
+ {
+ name: "GitHub",
+ href: "https://github.com/keploy/keploy",
+ icon: (
+
+
+ ),
+ },
+];
+
+export function SocialSidebar() {
+ return (
+
+ {socialLinks.map((social) => (
+
+ );
+}
diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx
new file mode 100644
index 0000000..b43a117
--- /dev/null
+++ b/src/components/sections/AboutSection.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import Image from "next/image";
+
+export function AboutSection() {
+ return (
+
+
+
+ We Are Keploy
+
+
+ Keploy is a developer-centric backend testing tool. As an open source
+ organisation, we believe everything should be community-driven. Join
+ us on a journey into the domain of technical writing and experience
+ the growth and knowledge that accompanies this opportunity.
+
+
+ Read our Blogs
+
+
+ );
+}
diff --git a/src/components/sections/CommunitySection.tsx b/src/components/sections/CommunitySection.tsx
new file mode 100644
index 0000000..671e8a3
--- /dev/null
+++ b/src/components/sections/CommunitySection.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import Image from "next/image";
+import { Users, MessageCircle, Heart } from "lucide-react";
+
+export function CommunitySection() {
+ return (
+
+ );
+}
diff --git a/src/components/sections/CriteriaSection.tsx b/src/components/sections/CriteriaSection.tsx
new file mode 100644
index 0000000..1bcfaf0
--- /dev/null
+++ b/src/components/sections/CriteriaSection.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+ Lightbulb,
+ Code,
+ BarChart3,
+ Shield,
+ FileText,
+ CheckCircle2,
+} from "lucide-react";
+
+const criteria = [
+ {
+ icon: Lightbulb,
+ title: "Originality",
+ description:
+ "Submissions should be entirely original, showcasing your unique perspective and insights.",
+ gradient: "from-yellow-400 to-orange-500",
+ number: "01",
+ },
+ {
+ icon: Code,
+ title: "Relevance to Software Developers",
+ description:
+ "Content should be tailored for a target audience of beginner to intermediate software developers.",
+ gradient: "from-blue-400 to-cyan-500",
+ number: "02",
+ },
+ {
+ icon: BarChart3,
+ title: "Keyword Volume Requirement",
+ description:
+ "Ensure the chosen keyword for the blog has a volume of at least 400 searches per month.",
+ gradient: "from-green-400 to-emerald-500",
+ number: "03",
+ },
+ {
+ icon: Shield,
+ title: "Conformity to Plagiarism Policy",
+ description:
+ "Adhere strictly to our plagiarism policy. Avoid any form of reproducing or claiming someone else's work.",
+ gradient: "from-red-400 to-pink-500",
+ number: "04",
+ },
+ {
+ icon: FileText,
+ title: "Compliance with Terms & Conditions",
+ description:
+ "Understand and comply with the terms and conditions of the Keploy Community Writing Program.",
+ gradient: "from-purple-400 to-violet-500",
+ number: "05",
+ },
+];
+
+export function CriteriaSection() {
+ return (
+
+ {/* Animated Stars Background */}
+
+ {/* Star layers */}
+
+
+
+
+ {/* Gradient overlays */}
+
+
+
+ {/* Glowing orbs */}
+
+
+
+
+
+ Quality Standards
+
+
+ Evaluation {" "}
+ Criteria
+
+
+ We review every submission based on these key standards to ensure excellence
+
+
+
+
+ {criteria.map((criterion, index) => (
+
+ {/* Card */}
+
+ {/* Number */}
+
+ {criterion.number}
+
+
+ {/* Icon */}
+
+
+
+ {/* Content */}
+
+
+ {criterion.title}
+
+
+ {criterion.description}
+
+
+
+ {/* Arrow indicator */}
+
+
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/components/sections/FlowSection.tsx b/src/components/sections/FlowSection.tsx
new file mode 100644
index 0000000..7f0d5fd
--- /dev/null
+++ b/src/components/sections/FlowSection.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import Image from "next/image";
+
+const steps = [
+ {
+ number: "01",
+ image: "/images/handy-folder-with-idea-bulb.gif",
+ title: "Register yourself",
+ description:
+ "Fill out the form and register to the writers program. We'll be eager to have you along.",
+ },
+ {
+ number: "02",
+ image: "/images/dazzle-man-programmer-writing-code-on-a-laptop.gif",
+ title: "Onboarding starts",
+ description:
+ "Get onboard with us, learn about Keploy's ecosystem, connect with the team & mentors.",
+ },
+ {
+ number: "03",
+ image: "/images/juicy-woman-is-looking-for-perfect-candidate-1.gif",
+ title: "Research your Idea",
+ description:
+ "Choose and research your write-up. Get access to mentorship & resources by the team.",
+ },
+ {
+ number: "04",
+ image: "/images/dizzy-education.gif",
+ title: "Craft your Work",
+ description:
+ "Start crafting your ideas into words. Work on approved ideas and topics.",
+ },
+ {
+ number: "05",
+ image: "/images/dazzle-blog-post-article.gif",
+ title: "Revision & Submissions",
+ description:
+ "Copy editing, hero image design, and revision. We help you polish before submitting.",
+ },
+ {
+ number: "06",
+ image: "/images/juicy-man-programmer-writing-code-and-make-web-design-on-a-pc.gif",
+ title: "Publication",
+ description:
+ "Once the content meets all guidelines, publish with Keploy and earn your benefits!",
+ },
+];
+
+export function FlowSection() {
+ return (
+
+
+
+
+ Here's how {" "}
+ the Program works
+
+
+ From registration to publication - your journey with us
+
+
+
+
+ {steps.map((step, index) => (
+
+ {/* Step Number */}
+
+
+ {step.number}
+
+
+
+
+
+
+
+ {step.title}
+
+
+ {step.description}
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/sections/GuidelinesSection.tsx b/src/components/sections/GuidelinesSection.tsx
new file mode 100644
index 0000000..2179454
--- /dev/null
+++ b/src/components/sections/GuidelinesSection.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+ TrendingUp,
+ FileText,
+ ImageIcon,
+ Instagram,
+ ArrowRight,
+ BookOpen,
+} from "lucide-react";
+
+const guidelines = [
+ {
+ icon: TrendingUp,
+ title: "SEO Best Practices",
+ description:
+ "Learn about URL structure, page titles, keywords, and content structure to make your blogs rank higher.",
+ link: "https://github.com/keploy/keploy/wiki/Keploy-SEO-Guidelines",
+ linkText: "Read SEO Guidelines",
+ },
+ {
+ icon: FileText,
+ title: "Content Structure",
+ description:
+ "Keep intros short, use proper heading hierarchy, and maintain minimum 700 words with easy readability.",
+ link: "https://github.com/keploy/keploy/wiki/Keploy-SEO-Guidelines#blogHub-content-structure",
+ linkText: "View Writing Guide",
+ },
+ {
+ icon: ImageIcon,
+ title: "Image Optimization",
+ description:
+ "Use WebP format, compress under 100KB, add descriptive alt tags, and create unique visuals for your content.",
+ link: "https://github.com/keploy/keploy/wiki/Keploy-SEO-Guidelines#image-optimization",
+ linkText: "Learn Image Best Practices",
+ },
+ {
+ icon: Instagram,
+ title: "Social Media Carousels",
+ description:
+ "Create engaging Instagram carousels following our design templates. Start with a compelling cover slide.",
+ link: "https://github.com/keploy/keploy/wiki/Keploy-SEO-Guidelines#instagram-post-guidelines",
+ linkText: "View Carousel Guide",
+ },
+];
+
+export function GuidelinesSection() {
+ return (
+
+
+
+
+ Guidelines {" "}
+ for Creating Content
+
+
+ Follow our SEO guidelines to create high-quality blogs and social media carousels
+
+
+
+
+ {guidelines.map((guideline, index) => (
+
+
+
+
+
+ {guideline.title}
+
+
+
+
+ {guideline.description}
+
+
+ {guideline.linkText}
+
+
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..d58f526
--- /dev/null
+++ b/src/components/sections/HeroSection.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+export function HeroSection() {
+ return (
+
+
+
+ {/* Left Content */}
+
+ {/* Badge */}
+
+ 🚀 Open-Source Program
+
+
+
+ Keploy's
+ Writers Program
+
+
+
+ Get into a community of Technical Writers where you get the right{" "}
+ Recognition |{" "}
+ Growth |{" "}
+ Networking |{" "}
+ Earning & Rewards
+
+
+
+ An Open-Source Program for Students, Professionals, and Freelancers
+
+
+ {/* CTA Buttons */}
+
+
+
+ {/* Right - Bunny Mascot */}
+
+
+
+ );
+}
diff --git a/src/components/sections/OffersSection.tsx b/src/components/sections/OffersSection.tsx
new file mode 100644
index 0000000..b25dcaf
--- /dev/null
+++ b/src/components/sections/OffersSection.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import Image from "next/image";
+
+const offers = [
+ {
+ image: "/images/bubble-gum-content-marketing.gif",
+ title: "Get Recognized",
+ description:
+ "Expand your technical writing horizon by earning compensations, swags, and personal brand visibility across the developer community.",
+ },
+ {
+ image: "/images/handy-line-machine-learning.gif",
+ title: "Learn",
+ description:
+ "Access to mentorship, weekly sync-ups, and community support. Work directly with Keploy's editorial team to enhance your skills.",
+ },
+ {
+ image: "/images/bloom-online-video-conference-for-employees.gif",
+ title: "Flourish",
+ description:
+ "Gain experience & network with like-minded individuals. Be a part of a global community of technical writers and developers.",
+ },
+];
+
+export function OffersSection() {
+ return (
+
+
+
+
+ What this program offers you?
+
+
+ Join our community and unlock your potential as a technical writer
+
+
+
+
+ {offers.map((offer, index) => (
+
+
+
+
+
+ {offer.title}
+
+
+
+
+
+ {offer.description}
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..2f55a32
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ svg]:rotate-180",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..65d4fcd
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLHeadingElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..948152b
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,90 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+ darkMode: ["class"],
+ content: [
+ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))'
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))'
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))'
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))'
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))'
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))'
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))'
+ },
+ keploy: {
+ primary: '#00163D',
+ accent: '#F89559',
+ 'accent-hover': '#ff7b2e'
+ },
+ chart: {
+ '1': 'hsl(var(--chart-1))',
+ '2': 'hsl(var(--chart-2))',
+ '3': 'hsl(var(--chart-3))',
+ '4': 'hsl(var(--chart-4))',
+ '5': 'hsl(var(--chart-5))'
+ }
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)'
+ },
+ keyframes: {
+ 'accordion-down': {
+ from: {
+ height: '0'
+ },
+ to: {
+ height: 'var(--radix-accordion-content-height)'
+ }
+ },
+ 'accordion-up': {
+ from: {
+ height: 'var(--radix-accordion-content-height)'
+ },
+ to: {
+ height: '0'
+ }
+ }
+ },
+ animation: {
+ 'accordion-down': 'accordion-down 0.2s ease-out',
+ 'accordion-up': 'accordion-up 0.2s ease-out'
+ }
+ }
+ },
+ plugins: [require("tailwindcss-animate")],
+};
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..d604e5c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+ "compilerOptions": {
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": [
+ "./src/*"
+ ]
+ },
+ "target": "ES2017"
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules",
+ "old_static"
+ ]
+}