Skip to content

Commit c4d175f

Browse files
naheel0naheel0
authored
Merge pull request #73 from BeyteFlow/copilot/add-seo-content-homepage
feat: Add SEO-optimized content to ReadmeGenAI home page
2 parents fb67f76 + 940b7c6 commit c4d175f

5 files changed

Lines changed: 138 additions & 11 deletions

File tree

‎src/app/layout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,20 @@ export const metadata: Metadata = {
1818
process.env.NEXT_PUBLIC_SITE_URL || "https://readmegen-ai.vercel.app",
1919
),
2020
title: {
21-
default: "ReadmeGenAI – AI GitHub README Generator",
21+
default: "AI README Generator for GitHub Projects | ReadmeGenAI",
2222
template: "%s | ReadmeGenAI",
2323
},
2424
description:
25-
"ReadmeGenAI is an AI-powered tool that automatically generates professional README files for your GitHub projects. Paste your repo URL and get a polished readme.md instantly.",
25+
"Instantly create professional GitHub README files with ReadmeGenAI. Our AI README generator analyzes your repo and produces polished markdown docs in seconds.",
2626
icons: {
2727
icon: "/ReadmeGenAI.png",
2828
shortcut: "/ReadmeGenAI.png",
2929
apple: "/ReadmeGenAI.png",
3030
},
3131
openGraph: {
32-
title: "ReadmeGenAI – AI GitHub README Generator",
32+
title: "AI README Generator for GitHub Projects | ReadmeGenAI",
3333
description:
34-
"Automatically generate professional README files from your GitHub repositories using AI.",
34+
"Instantly create professional GitHub README files with ReadmeGenAI. Our AI README generator analyzes your repo and produces polished markdown docs in seconds.",
3535
url: "/",
3636
siteName: "ReadmeGenAI",
3737
images: [

‎src/app/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
1-
"use client";
1+
import type { Metadata } from "next";
22
import React from "react";
33
import { Navbar } from "@/components/layout/Navbar";
44
import { Hero } from "@/components/sections/Hero";
55
import { Features } from "@/components/sections/Features";
6+
import { SEOSection } from "@/components/sections/SEOSection";
67
import { Footer } from "@/components/layout/Footer";
78
import { Code, Layout, FileText } from "lucide-react";
89
import { navLinks } from "@/constants/navLinks";
910

11+
export const metadata: Metadata = {
12+
title: "AI README Generator for GitHub Projects | ReadmeGenAI",
13+
description:
14+
"Instantly create professional GitHub README files with ReadmeGenAI. Our AI README generator analyzes your repo and produces polished markdown docs in seconds.",
15+
openGraph: {
16+
title: "AI README Generator for GitHub Projects | ReadmeGenAI",
17+
description:
18+
"Instantly create professional GitHub README files with ReadmeGenAI. Our AI README generator analyzes your repo and produces polished markdown docs in seconds.",
19+
},
20+
};
21+
1022
export default function Home() {
1123
const featureList = [
1224
{
@@ -33,6 +45,8 @@ export default function Home() {
3345
<main>
3446
<Hero />
3547

48+
<SEOSection />
49+
3650
{/* Removed the wrapper div that had the duplicate id="features" */}
3751
<Features items={featureList} />
3852
</main>

‎src/components/sections/Features.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,15 @@ interface FeatureItem {
99
export const Features = ({ items }: { items: FeatureItem[] }) => (
1010
<section id="features" className="py-24 border-t border-white/5 bg-black">
1111
<div className="max-w-7xl mx-auto px-4">
12+
<div className="text-center mb-16">
13+
<h2 className="text-3xl md:text-5xl font-extrabold tracking-tighter mb-4 text-white">
14+
Everything You Need in an AI README Generator
15+
</h2>
16+
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
17+
From context detection to clean markdown output, ReadmeGenAI handles
18+
every step of the GitHub README generation process.
19+
</p>
20+
</div>
1221
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
1322
{items.map((feature, idx) => (
1423
<div

‎src/components/sections/Hero.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,20 @@ export const Hero = () => {
1717

1818
{/* Headline */}
1919
<h1 className="text-5xl md:text-8xl font-extrabold tracking-tighter mb-8 leading-[1.1] animate-in fade-in slide-in-from-bottom-4 duration-1000">
20-
Ship documentation <br />
20+
Generate GitHub README files <br />
2121
<span className="bg-clip-text text-transparent bg-linear-to-b from-white to-white/40">
22-
as fast as your code.
22+
with AI, in seconds.
2323
</span>
2424
</h1>
2525

26-
{/* Sub-headline */}
26+
{/* Sub-headline / Intro paragraph */}
2727
<p className="max-w-2xl mx-auto text-gray-400 text-lg md:text-xl mb-10 leading-relaxed animate-in fade-in slide-in-from-bottom-5 duration-1000">
28-
ReadmeGenAI scans your repository and crafts professional, engaging
29-
README files automatically. The perfect intro for your next big
30-
project.
28+
ReadmeGenAI is the ultimate AI README generator for GitHub projects.
29+
Paste your repository URL and our AI analyzes your code, detects your
30+
tech stack, and produces a professional GitHub README in seconds.
31+
Powered by Google Gemini, it handles everything from installation
32+
guides to feature descriptions—giving your documentation the polish it
33+
deserves.
3134
</p>
3235

3336
{/* CTA Buttons - Fixed Routing */}

‎src/components/sections/SEOSection.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React from "react";
2+
import { CheckCircle } from "lucide-react";
3+
4+
const benefits = [
5+
{
6+
text: "Save hours of manual writing — generate a complete, production-ready GitHub README in under 5 seconds.",
7+
},
8+
{
9+
text: "AI README output adapts to your stack — whether it's Next.js, Go, Python, or any other framework.",
10+
},
11+
{
12+
text: "Your code stays private — ReadmeGenAI only reads public repository metadata, never stores your source.",
13+
},
14+
];
15+
16+
export const SEOSection = () => (
17+
<section className="py-20 border-t border-white/5 bg-black">
18+
<div className="max-w-5xl mx-auto px-4">
19+
{/* Why section */}
20+
<div className="mb-16">
21+
<h2 className="text-3xl md:text-4xl font-extrabold tracking-tighter mb-6 text-white">
22+
Why Use an AI README Generator?
23+
</h2>
24+
<p className="text-gray-400 text-lg leading-relaxed max-w-3xl">
25+
Writing a great GitHub README takes time, expertise, and consistency.
26+
ReadmeGenAI automates the entire process—detecting your tech stack,
27+
summarizing your project&apos;s purpose, and formatting everything to
28+
GitHub best practices. Whether you&apos;re shipping a side project or
29+
an enterprise library, a polished AI README makes your work stand out.
30+
</p>
31+
</div>
32+
33+
{/* Feature bullet points */}
34+
<div className="mb-16">
35+
<h2 className="text-2xl md:text-3xl font-extrabold tracking-tighter mb-8 text-white">
36+
Key Benefits of ReadmeGenAI
37+
</h2>
38+
<ul className="space-y-4">
39+
{benefits.map((benefit, idx) => (
40+
<li key={idx} className="flex items-start gap-3">
41+
<CheckCircle
42+
size={20}
43+
className="text-blue-400 mt-0.5 shrink-0"
44+
/>
45+
<span className="text-gray-300 text-base leading-relaxed">
46+
{benefit.text}
47+
</span>
48+
</li>
49+
))}
50+
</ul>
51+
</div>
52+
53+
{/* Additional H2 subheadings for keyword coverage */}
54+
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
55+
<div>
56+
<h2 className="text-xl md:text-2xl font-bold tracking-tight mb-3 text-white">
57+
Instant GitHub README Generation
58+
</h2>
59+
<p className="text-gray-400 text-sm leading-relaxed">
60+
Paste any public GitHub repository URL and receive a fully
61+
structured README in seconds. No templates to fill in, no markdown
62+
to learn—just a professional AI README, ready to ship.
63+
</p>
64+
</div>
65+
66+
<div>
67+
<h2 className="text-xl md:text-2xl font-bold tracking-tight mb-3 text-white">
68+
Smart Codebase &amp; Framework Detection
69+
</h2>
70+
<p className="text-gray-400 text-sm leading-relaxed">
71+
Our GitHub README generator automatically identifies your
72+
dependencies, frameworks, and project structure to produce accurate,
73+
context-aware documentation every time.
74+
</p>
75+
</div>
76+
77+
<div>
78+
<h2 className="text-xl md:text-2xl font-bold tracking-tight mb-3 text-white">
79+
GitHub Best Practices, Built In
80+
</h2>
81+
<p className="text-gray-400 text-sm leading-relaxed">
82+
Every AI README follows GitHub&apos;s formatting standards—badges,
83+
installation instructions, usage examples, and contribution
84+
guidelines are included automatically.
85+
</p>
86+
</div>
87+
88+
<div>
89+
<h2 className="text-xl md:text-2xl font-bold tracking-tight mb-3 text-white">
90+
Free AI README Generator for Every Developer
91+
</h2>
92+
<p className="text-gray-400 text-sm leading-relaxed">
93+
ReadmeGenAI is free to use for all public repositories. Whether
94+
you&apos;re a solo developer or an open-source maintainer, quality
95+
documentation is now just one click away.
96+
</p>
97+
</div>
98+
</div>
99+
</div>
100+
</section>
101+
);

0 commit comments

Comments
 (0)