feat: Add SEO-optimized content to ReadmeGenAI home page

src/app/layout.tsx

@@ -18,20 +18,20 @@ export const metadata: Metadata = {
     process.env.NEXT_PUBLIC_SITE_URL || "https://readmegen-ai.vercel.app",
   ),
   title: {
-    default: "ReadmeGenAI – AI GitHub README Generator",
+    default: "AI README Generator for GitHub Projects | ReadmeGenAI",
     template: "%s | ReadmeGenAI",
   },
   description:
-    "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.",
+    "Instantly create professional GitHub README files with ReadmeGenAI. Our AI README generator analyzes your repo and produces polished markdown docs in seconds.",
   icons: {
     icon: "/ReadmeGenAI.png",
     shortcut: "/ReadmeGenAI.png",
     apple: "/ReadmeGenAI.png",
   },
   openGraph: {
-    title: "ReadmeGenAI – AI GitHub README Generator",
+    title: "AI README Generator for GitHub Projects | ReadmeGenAI",
     description:
-      "Automatically generate professional README files from your GitHub repositories using AI.",
+      "Instantly create professional GitHub README files with ReadmeGenAI. Our AI README generator analyzes your repo and produces polished markdown docs in seconds.",
     url: "/",
     siteName: "ReadmeGenAI",
     images: [

src/app/page.tsx

@@ -1,12 +1,24 @@
-"use client";
+import type { Metadata } from "next";
 import React from "react";
 import { Navbar } from "@/components/layout/Navbar";
 import { Hero } from "@/components/sections/Hero";
 import { Features } from "@/components/sections/Features";
+import { SEOSection } from "@/components/sections/SEOSection";
 import { Footer } from "@/components/layout/Footer";
 import { Code, Layout, FileText } from "lucide-react";
 import { navLinks } from "@/constants/navLinks";
 
+export const metadata: Metadata = {
+  title: "AI README Generator for GitHub Projects | ReadmeGenAI",
+  description:
+    "Instantly create professional GitHub README files with ReadmeGenAI. Our AI README generator analyzes your repo and produces polished markdown docs in seconds.",
+  openGraph: {
+    title: "AI README Generator for GitHub Projects | ReadmeGenAI",
+    description:
+      "Instantly create professional GitHub README files with ReadmeGenAI. Our AI README generator analyzes your repo and produces polished markdown docs in seconds.",
+  },
+};
+
 export default function Home() {
   const featureList = [
     {
@@ -33,6 +45,8 @@ export default function Home() {
       <main>
         <Hero />
 
+        <SEOSection />
+
         {/* Removed the wrapper div that had the duplicate id="features" */}
         <Features items={featureList} />
       </main>

src/components/sections/Features.tsx

@@ -9,6 +9,15 @@ interface FeatureItem {
 export const Features = ({ items }: { items: FeatureItem[] }) => (
   <section id="features" className="py-24 border-t border-white/5 bg-black">
     <div className="max-w-7xl mx-auto px-4">
+      <div className="text-center mb-16">
+        <h2 className="text-3xl md:text-5xl font-extrabold tracking-tighter mb-4 text-white">
+          Everything You Need in an AI README Generator
+        </h2>
+        <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+          From context detection to clean markdown output, ReadmeGenAI handles
+          every step of the GitHub README generation process.
+        </p>
+      </div>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
         {items.map((feature, idx) => (
           <div

src/components/sections/Hero.tsx

@@ -17,17 +17,20 @@ export const Hero = () => {
 
         {/* Headline */}
         <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">
-          Ship documentation <br />
+          Generate GitHub README files <br />
           <span className="bg-clip-text text-transparent bg-linear-to-b from-white to-white/40">
-            as fast as your code.
+            with AI, in seconds.
           </span>
         </h1>
 
-        {/* Sub-headline */}
+        {/* Sub-headline / Intro paragraph */}
         <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">
-          ReadmeGenAI scans your repository and crafts professional, engaging
-          README files automatically. The perfect intro for your next big
-          project.
+          ReadmeGenAI is the ultimate AI README generator for GitHub projects.
+          Paste your repository URL and our AI analyzes your code, detects your
+          tech stack, and produces a professional GitHub README in seconds.
+          Powered by Google Gemini, it handles everything from installation
+          guides to feature descriptions—giving your documentation the polish it
+          deserves.
         </p>
 
         {/* CTA Buttons - Fixed Routing */}

src/components/sections/SEOSection.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { CheckCircle } from "lucide-react";
+
+const benefits = [
+  {
+    text: "Save hours of manual writing — generate a complete, production-ready GitHub README in under 5 seconds.",
+  },
+  {
+    text: "AI README output adapts to your stack — whether it's Next.js, Go, Python, or any other framework.",
+  },
+  {
+    text: "Your code stays private — ReadmeGenAI only reads public repository metadata, never stores your source.",
+  },
+];
+
+export const SEOSection = () => (
+  <section className="py-20 border-t border-white/5 bg-black">
+    <div className="max-w-5xl mx-auto px-4">
+      {/* Why section */}
+      <div className="mb-16">
+        <h2 className="text-3xl md:text-4xl font-extrabold tracking-tighter mb-6 text-white">
+          Why Use an AI README Generator?
+        </h2>
+        <p className="text-gray-400 text-lg leading-relaxed max-w-3xl">
+          Writing a great GitHub README takes time, expertise, and consistency.
+          ReadmeGenAI automates the entire process—detecting your tech stack,
+          summarizing your project&apos;s purpose, and formatting everything to
+          GitHub best practices. Whether you&apos;re shipping a side project or
+          an enterprise library, a polished AI README makes your work stand out.
+        </p>
+      </div>
+
+      {/* Feature bullet points */}
+      <div className="mb-16">
+        <h2 className="text-2xl md:text-3xl font-extrabold tracking-tighter mb-8 text-white">
+          Key Benefits of ReadmeGenAI
+        </h2>
+        <ul className="space-y-4">
+          {benefits.map((benefit, idx) => (
+            <li key={idx} className="flex items-start gap-3">
+              <CheckCircle
+                size={20}
+                className="text-blue-400 mt-0.5 shrink-0"
+              />
+              <span className="text-gray-300 text-base leading-relaxed">
+                {benefit.text}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Additional H2 subheadings for keyword coverage */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+        <div>
+          <h2 className="text-xl md:text-2xl font-bold tracking-tight mb-3 text-white">
+            Instant GitHub README Generation
+          </h2>
+          <p className="text-gray-400 text-sm leading-relaxed">
+            Paste any public GitHub repository URL and receive a fully
+            structured README in seconds. No templates to fill in, no markdown
+            to learn—just a professional AI README, ready to ship.
+          </p>
+        </div>
+
+        <div>
+          <h2 className="text-xl md:text-2xl font-bold tracking-tight mb-3 text-white">
+            Smart Codebase &amp; Framework Detection
+          </h2>
+          <p className="text-gray-400 text-sm leading-relaxed">
+            Our GitHub README generator automatically identifies your
+            dependencies, frameworks, and project structure to produce accurate,
+            context-aware documentation every time.
+          </p>
+        </div>
+
+        <div>
+          <h2 className="text-xl md:text-2xl font-bold tracking-tight mb-3 text-white">
+            GitHub Best Practices, Built In
+          </h2>
+          <p className="text-gray-400 text-sm leading-relaxed">
+            Every AI README follows GitHub&apos;s formatting standards—badges,
+            installation instructions, usage examples, and contribution
+            guidelines are included automatically.
+          </p>
+        </div>
+
+        <div>
+          <h2 className="text-xl md:text-2xl font-bold tracking-tight mb-3 text-white">
+            Free AI README Generator for Every Developer
+          </h2>
+          <p className="text-gray-400 text-sm leading-relaxed">
+            ReadmeGenAI is free to use for all public repositories. Whether
+            you&apos;re a solo developer or an open-source maintainer, quality
+            documentation is now just one click away.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+);