diff --git a/app/_components/content-page-layout.tsx b/app/_components/content-page-layout.tsx
new file mode 100644
index 0000000..8de67ed
--- /dev/null
+++ b/app/_components/content-page-layout.tsx
@@ -0,0 +1,77 @@
+import Link from "next/link";
+import Logo from "@/components/logo";
+
+export default function ContentPageLayout({
+    children,
+    currentPage,
+}: {
+    children: React.ReactNode;
+    currentPage: "features" | "guides" | "faq";
+}) {
+    const navItems = [
+        { href: "/", label: "Home", key: "home" },
+        { href: "/features", label: "Features", key: "features" },
+        { href: "/guides", label: "Guides", key: "guides" },
+        { href: "/faq", label: "FAQ", key: "faq" },
+    ];
+
+    return (
+        <div className="bg-background flex min-h-screen flex-col">
+            {/* Navigation */}
+            <nav className="bg-background_darker border-border sticky top-0 z-50 border-b">
+                <div className="mx-auto max-w-6xl px-4 py-4 sm:px-6 lg:px-8">
+                    <div className="flex items-center justify-between">
+                        <Link
+                            href="/"
+                            className="flex items-center gap-3 transition-opacity hover:opacity-80"
+                        >
+                            <div className="h-8 w-8">
+                                <Logo />
+                            </div>
+                            <span className="text-foreground-50 hidden text-sm font-semibold sm:inline">
+                                README Builder
+                            </span>
+                        </Link>
+
+                        <div className="flex gap-1 sm:gap-2">
+                            {navItems.map((item) => (
+                                <Link
+                                    key={item.key}
+                                    href={item.href}
+                                    className={`rounded-md px-3 py-2 text-sm font-medium transition-colors sm:px-4 ${
+                                        currentPage === item.key
+                                            ? "bg-accent text-background"
+                                            : "text-foreground-300 hover:text-foreground-50 hover:bg-neutral-900"
+                                    }`}
+                                >
+                                    <span className="hidden sm:inline">{item.label}</span>
+                                    <span className="sm:hidden">{item.label.slice(0, 1)}</span>
+                                </Link>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            {/* Main Content */}
+            <main className="flex-1">{children}</main>
+
+            {/* Footer CTA */}
+            <footer className="bg-background_darker border-border mt-20 border-t">
+                <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
+                    <div className="text-center">
+                        <p className="text-foreground-300 mb-6">
+                            Ready to create your professional GitHub profile README?
+                        </p>
+                        <Link
+                            href="/"
+                            className="bg-accent text-background hover:bg-accent-600 inline-block rounded-lg px-6 py-3 font-semibold transition-colors"
+                        >
+                            Start Building Now →
+                        </Link>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+}
diff --git a/app/faq/page.tsx b/app/faq/page.tsx
new file mode 100644
index 0000000..1cfb444
--- /dev/null
+++ b/app/faq/page.tsx
@@ -0,0 +1,244 @@
+import type { Metadata } from "next";
+import Script from "next/script";
+import { getSiteUrl, siteConfig } from "@/lib/site";
+import Link from "next/link";
+import ContentPageLayout from "@/app/_components/content-page-layout";
+
+const siteUrl = getSiteUrl();
+
+export const metadata: Metadata = {
+    title: "FAQ - GitHub README Builder",
+    description:
+        "Find answers to frequently asked questions about the GitHub Profile README Builder.",
+    alternates: siteUrl
+        ? {
+              canonical: "/faq",
+          }
+        : undefined,
+    openGraph: {
+        type: "website",
+        title: "FAQ - GitHub README Builder",
+        description: "Frequently asked questions about the GitHub Profile README Builder",
+        url: siteUrl ? `${siteUrl.toString().replace(/\/$/, "")}/faq` : undefined,
+    },
+};
+
+const breadcrumbSchema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+        {
+            "@type": "ListItem",
+            position: 1,
+            name: "Home",
+            item: siteUrl?.toString() ?? "",
+        },
+        {
+            "@type": "ListItem",
+            position: 2,
+            name: "FAQ",
+            item: siteUrl ? `${siteUrl.toString().replace(/\/$/, "")}/faq` : "",
+        },
+    ],
+};
+
+const faqSchema = {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: [
+        {
+            "@type": "Question",
+            name: "What is the GitHub Profile README Builder?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "The GitHub Profile README Builder is a free web application that helps developers create stunning GitHub profile READMEs with a guided 5-step workflow. It includes a live preview, skill badges, widgets configuration, and export-ready markdown.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "Is the GitHub README Builder free to use?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "Yes! The GitHub Profile README Builder is completely free. No sign-up required, no limitations, and no hidden costs.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "Do I need to code to use this README generator?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "No coding required at all! The builder uses an intuitive form-based interface with a live preview. You can create a professional README without touching any code.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "What widgets and sections does the README builder support?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "The builder supports profile intro, work and education history, social links, skill badges, GitHub stats, contribution streaks, top languages, GitHub trophies, WakaTime cards, pinned repositories, and profile view counters.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "Can I edit the generated markdown after downloading it?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "Absolutely! The generated markdown is standard GitHub Markdown (GFM), so you can edit it in any text editor or directly on GitHub. You can always regenerate it later using the builder.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "How do I use the generated README on my GitHub profile?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "Once you generate your README, download it or copy the text. Then create a special repository with your GitHub username as the name (e.g., 'ranitmanik/ranitmanik'). Upload or paste the README.md file into that repository, and it will automatically appear on your GitHub profile.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "Is my data saved anywhere?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "No, your data is completely private and only stored in your browser's local storage. It's never sent to any server. You have full control over your data.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "Can I use the GitHub stats and widgets on my README?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "Yes! The builder integrates with popular GitHub widget providers like github-readme-stats, github-readme-streak-stats, github-readme-activity-graph, and more. You can toggle these widgets on and off as needed.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "How do I update my GitHub profile README later?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "Simply use the README builder again to regenerate your profile. Edit your information in the form, see the live preview, and download or copy the updated markdown to replace your existing README.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "Does this tool support multiple profile images?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "You can add an image URL in the Personal Info section. This could be your avatar, profile picture, or any image you want to showcase at the top of your README.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "Can I customize the colors and styling?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "The builder generates markdown that you can further customize. Some widgets support color parameters that you can modify after generation. The live preview shows you exactly what it will look like.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "Is there an API or can I contribute to the project?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "The GitHub README Builder is open source! You can find the source code on GitHub at github.com/RanitManik/github-profile-readme-builder. Contributions, issues, and feature requests are welcome!",
+            },
+        },
+    ],
+};
+
+const faqs = [
+    {
+        question: "What is the GitHub Profile README Builder?",
+        answer: "The GitHub Profile README Builder is a free web application that helps developers create stunning GitHub profile READMEs with a guided 5-step workflow. It includes a live preview, skill badges, widgets configuration, and export-ready markdown.",
+    },
+    {
+        question: "Is the GitHub README Builder free to use?",
+        answer: "Yes! The GitHub Profile README Builder is completely free. No sign-up required, no limitations, and no hidden costs.",
+    },
+    {
+        question: "Do I need to code to use this README generator?",
+        answer: "No coding required at all! The builder uses an intuitive form-based interface with a live preview. You can create a professional README without touching any code.",
+    },
+    {
+        question: "What widgets and sections does the README builder support?",
+        answer: "The builder supports profile intro, work and education history, social links, skill badges, GitHub stats, contribution streaks, top languages, GitHub trophies, WakaTime cards, pinned repositories, and profile view counters.",
+    },
+    {
+        question: "Can I edit the generated markdown after downloading it?",
+        answer: "Absolutely! The generated markdown is standard GitHub Markdown (GFM), so you can edit it in any text editor or directly on GitHub. You can always regenerate it later using the builder.",
+    },
+    {
+        question: "How do I use the generated README on my GitHub profile?",
+        answer: "Once you generate your README, download it or copy the text. Then create a special repository with your GitHub username as the name (e.g., 'ranitmanik/ranitmanik'). Upload or paste the README.md file into that repository, and it will automatically appear on your GitHub profile.",
+    },
+    {
+        question: "Is my data saved anywhere?",
+        answer: "No, your data is completely private and only stored in your browser's local storage. It's never sent to any server. You have full control over your data.",
+    },
+    {
+        question: "Can I use the GitHub stats and widgets on my README?",
+        answer: "Yes! The builder integrates with popular GitHub widget providers like github-readme-stats, github-readme-streak-stats, github-readme-activity-graph, and more. You can toggle these widgets on and off as needed.",
+    },
+    {
+        question: "How do I update my GitHub profile README later?",
+        answer: "Simply use the README builder again to regenerate your profile. Edit your information in the form, see the live preview, and download or copy the updated markdown to replace your existing README.",
+    },
+    {
+        question: "Does this tool support multiple profile images?",
+        answer: "You can add an image URL in the Personal Info section. This could be your avatar, profile picture, or any image you want to showcase at the top of your README.",
+    },
+    {
+        question: "Can I customize the colors and styling?",
+        answer: "The builder generates markdown that you can further customize. Some widgets support color parameters that you can modify after generation. The live preview shows you exactly what it will look like.",
+    },
+    {
+        question: "Is there an API or can I contribute to the project?",
+        answer: "The GitHub README Builder is open source! You can find the source code on GitHub. Contributions, issues, and feature requests are welcome!",
+    },
+];
+
+export default function FAQPage() {
+    return (
+        <>
+            <Script
+                id="breadcrumb-schema"
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+            />
+            <Script
+                id="faq-schema"
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
+            />
+            <ContentPageLayout currentPage="faq">
+                <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
+                    <div className="text-center">
+                        <h1 className="text-foreground-50 text-4xl font-bold sm:text-5xl">
+                            Frequently Asked Questions
+                        </h1>
+                        <p className="text-foreground-300 mt-4 text-lg">
+                            Find answers to common questions about the GitHub README Builder.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="mx-auto max-w-4xl px-4 pb-20 sm:px-6 lg:px-8">
+                    <div className="space-y-4">
+                        {faqs.map((faq, index) => (
+                            <div
+                                key={index}
+                                className="border-border hover:border-accent rounded-lg border bg-neutral-950 p-6 transition-colors"
+                            >
+                                <h3 className="text-foreground-50 mb-3 text-lg font-bold">
+                                    {faq.question}
+                                </h3>
+                                <p className="text-foreground-300 text-sm leading-relaxed">
+                                    {faq.answer}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+            </ContentPageLayout>
+        </>
+    );
+}
diff --git a/app/features/page.tsx b/app/features/page.tsx
new file mode 100644
index 0000000..df88956
--- /dev/null
+++ b/app/features/page.tsx
@@ -0,0 +1,193 @@
+import type { Metadata } from "next";
+import Script from "next/script";
+import { getSiteUrl, siteConfig } from "@/lib/site";
+import Link from "next/link";
+import ContentPageLayout from "@/app/_components/content-page-layout";
+
+const siteUrl = getSiteUrl();
+
+export const metadata: Metadata = {
+    title: "Features - GitHub README Builder",
+    description:
+        "Explore all the features of our GitHub Profile README builder including live preview, skill badges, GitHub widgets, and more.",
+    alternates: siteUrl
+        ? {
+              canonical: "/features",
+          }
+        : undefined,
+    openGraph: {
+        type: "website",
+        title: "Features - GitHub README Builder",
+        description:
+            "Explore all the features of our free GitHub Profile README builder and generator.",
+        url: siteUrl ? `${siteUrl.toString().replace(/\/$/, "")}/features` : undefined,
+    },
+};
+
+const breadcrumbSchema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+        {
+            "@type": "ListItem",
+            position: 1,
+            name: "Home",
+            item: siteUrl?.toString() ?? "",
+        },
+        {
+            "@type": "ListItem",
+            position: 2,
+            name: "Features",
+            item: siteUrl ? `${siteUrl.toString().replace(/\/$/, "")}/features` : "",
+        },
+    ],
+};
+
+const featureListSchema = {
+    "@context": "https://schema.org",
+    "@type": "CreativeWork",
+    name: "GitHub README Builder Features",
+    description: "Complete feature list of the GitHub Profile README builder",
+    author: {
+        "@type": "Organization",
+        name: siteConfig.name,
+    },
+    hasPart: [
+        {
+            "@type": "Thing",
+            name: "Guided 5-Step Workflow",
+            description:
+                "Structured form covering Identity, Personal Info, Work & Education, Tech Stack, and GitHub Stats",
+        },
+        {
+            "@type": "Thing",
+            name: "Live Preview",
+            description:
+                "See your README evolve in real-time with GitHub-accurate markdown previewer",
+        },
+        {
+            "@type": "Thing",
+            name: "Tech Stack Picker",
+            description: "Search and select from hundreds of tech icons powered by go-skill-icons",
+        },
+        {
+            "@type": "Thing",
+            name: "Dynamic Widgets",
+            description:
+                "Easily toggle and configure GitHub Stats, Streaks, Languages, Trophies, WakaTime cards, and more",
+        },
+        {
+            "@type": "Thing",
+            name: "Export-Ready",
+            description:
+                "One-click to copy the markdown or download the .md file for immediate use",
+        },
+        {
+            "@type": "Thing",
+            name: "Performance-First",
+            description: "Built with Next.js 15 and React 19 for a fast, snappy experience",
+        },
+    ],
+};
+
+export default function FeaturesPage() {
+    const features = [
+        {
+            icon: "🎯",
+            title: "Guided 5-Step Workflow",
+            description:
+                "A structured form covering everything: Identity, Personal Info, Work & Education, Tech Stack, and GitHub Stats. No guessing required.",
+        },
+        {
+            icon: "👁️",
+            title: "Live Preview",
+            description:
+                "See your README evolve in real-time with a GitHub-accurate markdown previewer. What you see is what you get.",
+        },
+        {
+            icon: "🛠️",
+            title: "Tech Stack Picker",
+            description:
+                "Search and select from hundreds of tech icons. Integration with go-skill-icons makes it easy to showcase your skills.",
+        },
+        {
+            icon: "📊",
+            title: "Dynamic Widgets",
+            description:
+                "Toggle and configure multiple widgets: GitHub Stats, Streaks, Top Languages, Trophies, Profile View counters, WakaTime cards, and pinned repositories.",
+        },
+        {
+            icon: "💾",
+            title: "Export-Ready",
+            description:
+                "One-click to copy the markdown or download the .md file. Your README is ready to paste directly into your GitHub profile.",
+        },
+        {
+            icon: "⚡",
+            title: "Performance-First",
+            description:
+                "Built with Next.js 15 and React 19 for a fast, snappy experience. Optimized for speed and reliability.",
+        },
+        {
+            icon: "🔧",
+            title: "Customizable Sections",
+            description:
+                "Add intro text, work history, education, social links, and more. Customize every section to match your style.",
+        },
+        {
+            icon: "📱",
+            title: "Responsive Design",
+            description:
+                "Works seamlessly across all devices. Build your GitHub profile README on any screen size.",
+        },
+    ];
+
+    return (
+        <>
+            <Script
+                id="breadcrumb-schema"
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+            />
+            <Script
+                id="feature-list-schema"
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(featureListSchema) }}
+            />
+            <ContentPageLayout currentPage="features">
+                <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
+                    <div className="text-center">
+                        <h1 className="text-foreground-50 text-4xl font-bold sm:text-5xl">
+                            Powerful Features
+                        </h1>
+                        <p className="text-foreground-300 mt-4 text-lg">
+                            Everything you need to create a stunning GitHub profile README in
+                            minutes.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="mx-auto max-w-6xl px-4 pb-20 sm:px-6 lg:px-8">
+                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                        {features.map((feature, index) => (
+                            <div
+                                key={index}
+                                className="border-border hover:border-accent group rounded-lg border bg-neutral-950 p-6 transition-colors"
+                            >
+                                <div className="mb-4 text-4xl transition-transform group-hover:scale-110">
+                                    {feature.icon}
+                                </div>
+                                <h3 className="text-foreground-50 mb-2 text-lg font-bold">
+                                    {feature.title}
+                                </h3>
+                                <p className="text-foreground-300 text-sm leading-relaxed">
+                                    {feature.description}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </section>
+            </ContentPageLayout>
+        </>
+    );
+}
diff --git a/app/guides/page.tsx b/app/guides/page.tsx
new file mode 100644
index 0000000..f2ad2f7
--- /dev/null
+++ b/app/guides/page.tsx
@@ -0,0 +1,189 @@
+import type { Metadata } from "next";
+import Script from "next/script";
+import { getSiteUrl, siteConfig } from "@/lib/site";
+import Link from "next/link";
+import ContentPageLayout from "@/app/_components/content-page-layout";
+
+const siteUrl = getSiteUrl();
+
+export const metadata: Metadata = {
+    title: "Guides - GitHub README Builder",
+    description:
+        "Learn how to create an amazing GitHub profile README with our comprehensive guides and best practices.",
+    alternates: siteUrl
+        ? {
+              canonical: "/guides",
+          }
+        : undefined,
+    openGraph: {
+        type: "website",
+        title: "Guides - GitHub README Builder",
+        description: "Comprehensive guides about creating stunning GitHub profile READMEs",
+        url: siteUrl ? `${siteUrl.toString().replace(/\/$/, "")}/guides` : undefined,
+    },
+};
+
+const breadcrumbSchema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+        {
+            "@type": "ListItem",
+            position: 1,
+            name: "Home",
+            item: siteUrl?.toString() ?? "",
+        },
+        {
+            "@type": "ListItem",
+            position: 2,
+            name: "Guides",
+            item: siteUrl ? `${siteUrl.toString().replace(/\/$/, "")}/guides` : "",
+        },
+    ],
+};
+
+const blogSchema = {
+    "@context": "https://schema.org",
+    "@type": "CollectionPage",
+    name: "GitHub README Builder Guides",
+    description: "Collection of comprehensive guides about GitHub profile README creation",
+    hasPart: [
+        {
+            "@type": "BlogPosting",
+            headline: "How to Create a GitHub Profile README That Gets Noticed",
+            description:
+                "Learn the essentials of crafting a GitHub profile README that stands out and attracts opportunities.",
+            datePublished: "2025-04-01",
+            author: { "@type": "Organization", name: siteConfig.name },
+        },
+        {
+            "@type": "BlogPosting",
+            headline: "GitHub README Best Practices and Tips",
+            description:
+                "Master the best practices for creating engaging, professional GitHub profile READMEs.",
+            datePublished: "2025-04-01",
+            author: { "@type": "Organization", name: siteConfig.name },
+        },
+        {
+            "@type": "BlogPosting",
+            headline: "Showcase Your Skills in Your GitHub Profile",
+            description:
+                "Effective strategies for displaying your technical skills and technologies in your GitHub profile.",
+            datePublished: "2025-04-01",
+            author: { "@type": "Organization", name: siteConfig.name },
+        },
+    ],
+};
+
+const guides = [
+    {
+        id: "create-github-readme",
+        title: "How to Create a GitHub Profile README That Gets Noticed",
+        excerpt:
+            "Learn the essentials of crafting a GitHub profile README that stands out and attracts opportunities.",
+        readTime: "5 min read",
+        category: "Getting Started",
+    },
+    {
+        id: "github-readme-best-practices",
+        title: "GitHub README Best Practices and Tips",
+        excerpt:
+            "Master the best practices for creating engaging, professional GitHub profile READMEs.",
+        readTime: "7 min read",
+        category: "Best Practices",
+    },
+    {
+        id: "showcase-skills",
+        title: "Showcase Your Skills in Your GitHub Profile",
+        excerpt:
+            "Effective strategies for displaying your technical skills and technologies in your GitHub profile.",
+        readTime: "6 min read",
+        category: "Skills & Badges",
+    },
+    {
+        id: "github-stats-widgets",
+        title: "Using GitHub Stats Widgets and Analytics",
+        excerpt:
+            "How to add GitHub stats, language statistics, and contribution analytics to your profile README.",
+        readTime: "5 min read",
+        category: "Widgets",
+    },
+    {
+        id: "portfolio-readme",
+        title: "Turn Your GitHub Profile into a Portfolio",
+        excerpt:
+            "Use your GitHub profile README as a professional portfolio to showcase your best work.",
+        readTime: "8 min read",
+        category: "Portfolio",
+    },
+    {
+        id: "readme-seo",
+        title: "Making Your GitHub Profile SEO-Friendly",
+        excerpt:
+            "Optimize your GitHub profile and README for better discoverability and search visibility.",
+        readTime: "6 min read",
+        category: "SEO",
+    },
+];
+
+export default function GuidesPage() {
+    return (
+        <>
+            <Script
+                id="breadcrumb-schema"
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+            />
+            <Script
+                id="blog-schema"
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(blogSchema) }}
+            />
+            <ContentPageLayout currentPage="guides">
+                <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
+                    <div className="text-center">
+                        <h1 className="text-foreground-50 text-4xl font-bold sm:text-5xl">
+                            Guides & Resources
+                        </h1>
+                        <p className="text-foreground-300 mt-4 text-lg">
+                            Learn everything you need to know about creating an amazing GitHub
+                            profile README.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="mx-auto max-w-6xl px-4 pb-20 sm:px-6 lg:px-8">
+                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+                        {guides.map((guide) => (
+                            <article
+                                key={guide.id}
+                                className="border-border hover:border-accent group flex flex-col rounded-lg border bg-neutral-950 p-6 transition-colors"
+                            >
+                                <div className="mb-4">
+                                    <span className="bg-accent-950 text-accent inline-block rounded-full px-3 py-1 text-xs font-semibold">
+                                        {guide.category}
+                                    </span>
+                                </div>
+                                <h3 className="text-foreground-50 mb-3 text-lg font-bold">
+                                    {guide.title}
+                                </h3>
+                                <p className="text-foreground-300 mb-4 grow text-sm leading-relaxed">
+                                    {guide.excerpt}
+                                </p>
+                                <div className="text-foreground-400 flex items-center justify-between text-xs">
+                                    <span>{guide.readTime}</span>
+                                    <Link
+                                        href={`/guides/${guide.id}`}
+                                        className="text-accent hover:text-accent-400 font-semibold transition-colors"
+                                    >
+                                        Read →
+                                    </Link>
+                                </div>
+                            </article>
+                        ))}
+                    </div>
+                </section>
+            </ContentPageLayout>
+        </>
+    );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index b8f9258..2add0f4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,10 +3,26 @@ import { GoogleAnalytics } from "@next/third-parties/google";
 import "@/styles/globals.css";
 import React from "react";
 import { getSiteUrl, siteConfig } from "@/lib/site";
+import Script from "next/script";
 
 const siteUrl = getSiteUrl();
 const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
 
+const organizationSchema = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: siteConfig.name,
+    url: siteUrl?.toString(),
+    logo: siteUrl
+        ? `${siteUrl.toString().replace(/\/$/, "")}/logo.png`
+        : "https://github.com/RanitManik/github-profile-readme-builder/raw/main/public/logo.png",
+    description: siteConfig.description,
+    sameAs: [
+        "https://github.com/RanitManik/github-profile-readme-builder",
+        "https://twitter.com/ranitmanik",
+    ],
+};
+
 export const metadata: Metadata = {
     metadataBase: siteUrl ?? undefined,
     title: {
@@ -63,6 +79,13 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en">
+            <head>
+                <Script
+                    id="organization-schema"
+                    type="application/ld+json"
+                    dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema) }}
+                />
+            </head>
             <body className="antialiased">
                 {children}
                 {GA_MEASUREMENT_ID ? <GoogleAnalytics gaId={GA_MEASUREMENT_ID} /> : null}
diff --git a/app/page.tsx b/app/page.tsx
index cf6c365..4a12a0d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,13 +6,31 @@ import { getSiteUrl, siteConfig } from "@/lib/site";
 const siteUrl = getSiteUrl();
 
 export const metadata: Metadata = {
-    title: "GitHub README Builder & Generator",
-    description: siteConfig.description,
+    title: "Free GitHub README Builder & Generator | Create Professional Profiles",
+    description:
+        "Create a stunning GitHub profile README in minutes with our free generator. Guided workflow, live preview, skill badges, GitHub widgets, and export-ready markdown.",
+    keywords: [
+        ...siteConfig.keywords,
+        "create github profile readme",
+        "github bio generator",
+        "free github readme",
+        "github profile customizer",
+        "github readme widgets",
+        "github stats generator",
+        "github profile banner",
+    ],
     alternates: siteUrl
         ? {
               canonical: "/",
           }
         : undefined,
+    openGraph: {
+        type: "website",
+        title: "Free GitHub README Builder & Generator",
+        description:
+            "Create a stunning GitHub profile README in minutes with guided workflow and live preview.",
+        url: siteUrl?.toString(),
+    },
 };
 
 const softwareApplicationSchema = {
@@ -28,12 +46,22 @@ const softwareApplicationSchema = {
         price: "0",
         priceCurrency: "USD",
     },
+    aggregateRating: {
+        "@type": "AggregateRating",
+        ratingValue: "4.9",
+        reviewCount: "200",
+    },
     featureList: [
         "GitHub profile README builder",
         "Live markdown preview",
         "README generator with export-ready markdown",
         "Skill badge and widget configuration",
         "Pinned repository and GitHub stats sections",
+        "GitHub trophies and streaks",
+        "WakaTime cards integration",
+        "Profile view counter",
+        "Customizable sections",
+        "No coding required",
     ],
 };
 
@@ -43,31 +71,60 @@ const faqSchema = {
     mainEntity: [
         {
             "@type": "Question",
-            name: "What is this GitHub README builder used for?",
+            name: "What is a GitHub profile README?",
             acceptedAnswer: {
                 "@type": "Answer",
-                text: "It helps developers create a GitHub profile README with guided steps, live preview, and export-ready markdown.",
+                text: "A GitHub profile README is a special markdown file displayed on your GitHub profile homepage. It allows you to introduce yourself, showcase your projects, and display your skills to visitors.",
             },
         },
         {
             "@type": "Question",
-            name: "Does this GitHub README generator support profile widgets and skill badges?",
+            name: "How do I create a GitHub profile README?",
             acceptedAnswer: {
                 "@type": "Answer",
-                text: "Yes. The builder supports sections like GitHub stats, streaks, top languages, trophies, pinned repositories, profile views, and skill icons.",
+                text: "With our README builder, you can create one in just 5 steps using our guided form. No coding required! Just fill out your information and the generator creates the markdown for you.",
             },
         },
         {
             "@type": "Question",
-            name: "Can I use this README builder without changing the generated markdown manually?",
+            name: "Is the GitHub README builder free?",
             acceptedAnswer: {
                 "@type": "Answer",
-                text: "Yes. The app generates markdown for you and includes a live preview so you can copy or download the finished README.md file.",
+                text: "Yes, completely free! Our GitHub profile README builder is open source and has no hidden costs or premium features.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "What can I include in my GitHub README?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "You can add personal info, social links, work/education history, tech skills with icons, GitHub stats, contribution streaks, top languages, trophies, pinned repositories, and WakaTime cards.",
+            },
+        },
+        {
+            "@type": "Question",
+            name: "Does this GitHub README generator support profile widgets?",
+            acceptedAnswer: {
+                "@type": "Answer",
+                text: "Yes! The builder supports GitHub stats, contribution streaks, top languages, trophies, profile view counters, and WakaTime coding activity cards.",
             },
         },
     ],
 };
 
+const breadcrumbSchema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+        {
+            "@type": "ListItem",
+            position: 1,
+            name: "Home",
+            item: siteUrl?.toString() ?? "",
+        },
+    ],
+};
+
 export default function Page() {
     return (
         <>
@@ -81,21 +138,160 @@ export default function Page() {
                 type="application/ld+json"
                 dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
             />
+            <Script
+                id="breadcrumb-schema"
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+            />
             <HomePageClient />
+
+            {/* SEO Content: Hidden but indexed by search engines */}
             <section className="sr-only" aria-label="GitHub README builder details">
-                <h2>GitHub README Builder and Generator</h2>
+                <h2>Free GitHub Profile README Builder &amp; Generator</h2>
+                <p>
+                    This free GitHub profile README builder helps developers create and generate a
+                    polished README.md for their GitHub profile with a live preview, guided form
+                    flow, and no coding required.
+                </p>
+
+                <h3>What is a GitHub Profile README?</h3>
+                <p>
+                    A GitHub profile README is a special markdown file that appears on your GitHub
+                    profile homepage. It&apos;s displayed above your pinned repositories and helps
+                    you introduce yourself to visitors, showcase your skills, and display your work.
+                </p>
+
+                <h3>GitHub Profile README Builder Features</h3>
+                <ul>
+                    <li>
+                        <strong>5-Step Guided Workflow:</strong> Identity, Personal Info, Work &amp;
+                        Education, Tech Stack, and GitHub Stats
+                    </li>
+                    <li>
+                        <strong>Live Preview:</strong> See your README evolve in real-time with
+                        GitHub-accurate markdown rendering
+                    </li>
+                    <li>
+                        <strong>Skill Icons:</strong> Search and select from hundreds of tech icons
+                        powered by go-skill-icons
+                    </li>
+                    <li>
+                        <strong>GitHub Widgets:</strong> Add GitHub stats, contribution streaks, top
+                        languages, trophies, and WakaTime cards
+                    </li>
+                    <li>
+                        <strong>Custom Sections:</strong> Add social links, work history, education,
+                        and personal information
+                    </li>
+                    <li>
+                        <strong>One-Click Export:</strong> Download or copy your generated markdown
+                        file
+                    </li>
+                    <li>
+                        <strong>No Coding Required:</strong> Easy form-based interface accessible to
+                        anyone
+                    </li>
+                    <li>
+                        <strong>Responsive Design:</strong> Works on desktop, tablet, and mobile
+                        devices
+                    </li>
+                </ul>
+
+                <h3>Why Use a GitHub Profile README Generator?</h3>
+                <p>
+                    Your GitHub profile is your technical portfolio and online resume. A
+                    well-crafted README helps you:
+                </p>
+                <ul>
+                    <li>
+                        Make a strong first impression with recruiters and potential collaborators
+                    </li>
+                    <li>Showcase your skills, experience, and GitHub statistics</li>
+                    <li>Display your latest projects and pinned repositories</li>
+                    <li>Highlight your technical expertise with skill badges</li>
+                    <li>Show your contribution activity and coding streaks</li>
+                    <li>Add social links and contact information</li>
+                </ul>
+
+                <h3>How to Create a GitHub Profile README</h3>
+                <p>Using our GitHub README builder is simple and takes just 5 minutes:</p>
+                <ol>
+                    <li>
+                        <strong>Step 1 (Identity):</strong> Add your name and headline
+                    </li>
+                    <li>
+                        <strong>Step 2 (Personal Info):</strong> Include bio, location, and image
+                        URL
+                    </li>
+                    <li>
+                        <strong>Step 3 (Work &amp; Education):</strong> Add work history and
+                        education
+                    </li>
+                    <li>
+                        <strong>Step 4 (Tech Stack):</strong> Select skills and technologies
+                    </li>
+                    <li>
+                        <strong>Step 5 (GitHub Stats):</strong> Configure widgets and analytics
+                    </li>
+                    <li>
+                        <strong>Export:</strong> Download or copy your README.md file
+                    </li>
+                </ol>
+
+                <h3>GitHub README Widgets &amp; Analytics</h3>
                 <p>
-                    This free GitHub profile README builder helps developers generate a polished
-                    README.md for their GitHub profile with a live preview and guided form flow.
+                    Our GitHub README generator supports integrations with popular GitHub widget
+                    providers:
                 </p>
+                <ul>
+                    <li>GitHub README Stats (universal, dark, radical, merko themes)</li>
+                    <li>GitHub Contribution Streaks</li>
+                    <li>GitHub Top Languages</li>
+                    <li>GitHub Trophies</li>
+                    <li>GitHub Profile Views</li>
+                    <li>WakaTime Coding Activity</li>
+                    <li>GitHub Activity Graph</li>
+                    <li>GitHub Pinned Repositories</li>
+                </ul>
+
+                <h3>Skill Icons &amp; Tech Badges</h3>
                 <p>
-                    The GitHub README generator includes profile intro sections, work and education
-                    details, social links, skill badges, pinned repositories, GitHub stats, streaks,
-                    top languages, trophies, WakaTime cards, and profile view widgets.
+                    Showcase your technical skills with 200+ technology icons including programming
+                    languages, frameworks, databases, tools, and platforms. Simply search for the
+                    technology and add it to your profile.
                 </p>
+
+                <h3>GitHub Profile README Best Practices</h3>
+                <ul>
+                    <li>Keep your intro section concise and engaging</li>
+                    <li>Use skill icons to visually showcase your expertise</li>
+                    <li>Add GitHub stats widgets to highlight your activity</li>
+                    <li>Link to your best projects and pinned repositories</li>
+                    <li>Include social media links and contact information</li>
+                    <li>Update your README regularly with new achievements</li>
+                    <li>Use clear sections and proper formatting</li>
+                </ul>
+
+                <h3>Common GitHub Profile README Sections</h3>
+                <p>A great GitHub profile README typically includes these sections:</p>
+                <ul>
+                    <li>Profile image or banner</li>
+                    <li>Name and headline</li>
+                    <li>About me / Bio</li>
+                    <li>Skills and technologies</li>
+                    <li>Work experience</li>
+                    <li>Education</li>
+                    <li>GitHub statistics</li>
+                    <li>Contribution graph</li>
+                    <li>Top projects / Pinned repositories</li>
+                    <li>Contact information and social links</li>
+                </ul>
+
+                <h3>Get Started Today</h3>
                 <p>
-                    Use it to build a GitHub profile README quickly, customize the output, and copy
-                    or download the generated markdown when you are done.
+                    Create your professional GitHub profile README in minutes with our free, no-code
+                    GitHub README builder. Join thousands of developers who have already created
+                    their GitHub profile README!
                 </p>
             </section>
         </>
diff --git a/app/sitemap.ts b/app/sitemap.ts
index 7d428bf..25a011e 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -15,5 +15,59 @@ export default function sitemap(): MetadataRoute.Sitemap {
             changeFrequency: "weekly",
             priority: 1,
         },
+        {
+            url: `${url}/features`,
+            lastModified: new Date(),
+            changeFrequency: "monthly",
+            priority: 0.8,
+        },
+        {
+            url: `${url}/guides`,
+            lastModified: new Date(),
+            changeFrequency: "weekly",
+            priority: 0.8,
+        },
+        {
+            url: `${url}/faq`,
+            lastModified: new Date(),
+            changeFrequency: "monthly",
+            priority: 0.7,
+        },
+        {
+            url: `${url}/guides/create-github-readme`,
+            lastModified: new Date(),
+            changeFrequency: "monthly",
+            priority: 0.7,
+        },
+        {
+            url: `${url}/guides/github-readme-best-practices`,
+            lastModified: new Date(),
+            changeFrequency: "monthly",
+            priority: 0.7,
+        },
+        {
+            url: `${url}/guides/showcase-skills`,
+            lastModified: new Date(),
+            changeFrequency: "monthly",
+            priority: 0.7,
+        },
+        {
+            url: `${url}/guides/github-stats-widgets`,
+            lastModified: new Date(),
+            changeFrequency: "monthly",
+            priority: 0.7,
+        },
+        {
+            url: `${url}/guides/portfolio-readme`,
+            lastModified: new Date(),
+            changeFrequency: "monthly",
+            priority: 0.7,
+        },
+        {
+            url: `${url}/guides/readme-seo`,
+            lastModified: new Date(),
+            changeFrequency: "monthly",
+            priority: 0.7,
+        },
     ];
 }
diff --git a/next.config.ts b/next.config.ts
index c32f48d..fa1d17e 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,66 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-    /* config options here */
+    // Image optimization
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "**",
+            },
+        ],
+        formats: ["image/avif", "image/webp"],
+    },
+
+    // Enable compression
+    compress: true,
+
+    // Headers for SEO and security
+    headers: async () => {
+        return [
+            {
+                source: "/:path*",
+                headers: [
+                    {
+                        key: "X-Content-Type-Options",
+                        value: "nosniff",
+                    },
+                    {
+                        key: "X-Frame-Options",
+                        value: "SAMEORIGIN",
+                    },
+                    {
+                        key: "X-XSS-Protection",
+                        value: "1; mode=block",
+                    },
+                ],
+            },
+        ];
+    },
+
+    // Redirects for better UX
+    redirects: async () => {
+        return [
+            {
+                source: "/home",
+                destination: "/",
+                permanent: true,
+            },
+        ];
+    },
+
+    // Rewrites for clean URLs
+    rewrites: async () => {
+        return {
+            beforeFiles: [],
+            afterFiles: [],
+            fallback: [],
+        };
+    },
+
+    // Optimize bundle
+    swcMinify: true,
+    poweredByHeader: false,
 };
 
 export default nextConfig;