feat: seo checker

app/api/seo-check/route.js

@@ -0,0 +1,488 @@
+// app/api/seo-check/route.js
+import { NextResponse } from "next/server";
+import * as cheerio from "cheerio";
+
+export async function POST(request) {
+  const startTime = Date.now();
+
+  try {
+    // Validate request
+    let url;
+    try {
+      const body = await request.json();
+      url = body?.url;
+      if (!url) throw new Error("URL is required");
+    } catch (e) {
+      return NextResponse.json(
+        { error: "Invalid request format" },
+        { status: 400 }
+      );
+    }
+
+    // Validate URL format
+    let parsedUrl;
+    try {
+      parsedUrl = new URL(url);
+      if (!["http:", "https:"].includes(parsedUrl.protocol)) {
+        throw new Error("Invalid protocol");
+      }
+    } catch (e) {
+      return NextResponse.json(
+        { error: "Please provide a valid HTTP/HTTPS URL" },
+        { status: 400 }
+      );
+    }
+
+    // Fetch HTML with enhanced configuration
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 15000);
+
+    let response;
+    try {
+      response = await fetch(url, {
+        headers: {
+          "User-Agent":
+            "Mozilla/5.0 (compatible; SEO-Analyzer/1.0; +https://github.com)",
+          Accept: "text/html,application/xhtml+xml",
+        },
+        redirect: "follow",
+        signal: controller.signal,
+      });
+      clearTimeout(timeout);
+    } catch (e) {
+      return NextResponse.json(
+        {
+          error:
+            e.name === "AbortError"
+              ? "Request timed out"
+              : `Fetch failed: ${e.message}`,
+        },
+        { status: 400 }
+      );
+    }
+
+    // Verify response
+    if (!response.ok) {
+      return NextResponse.json(
+        {
+          error: `HTTP ${response.status}`,
+          status: response.status,
+          url: response.url,
+        },
+        { status: 400 }
+      );
+    }
+
+    const contentType = response.headers.get("content-type");
+    if (!contentType?.includes("text/html")) {
+      return NextResponse.json(
+        { error: "URL does not return HTML content" },
+        { status: 400 }
+      );
+    }
+
+    // Parse HTML
+    const html = await response.text();
+    const finalUrl = response.url;
+    let $;
+    try {
+      $ = cheerio.load(html);
+    } catch (e) {
+      return NextResponse.json(
+        { error: "Failed to parse HTML content" },
+        { status: 500 }
+      );
+    }
+
+    // Extract security headers
+    const securityHeaders = {
+      https: finalUrl.startsWith("https://"),
+      xFrameOptions: response.headers.get("x-frame-options"),
+      xXSSProtection: response.headers.get("x-xss-protection"),
+      contentTypeOptions: response.headers.get("x-content-type-options"),
+      strictTransportSecurity: response.headers.get(
+        "strict-transport-security"
+      ),
+    };
+
+    // Add this new function to analyze charset
+    function analyzeCharset($) {
+      const charsetMeta = $("meta[charset]");
+      if (charsetMeta.length > 0) {
+        return {
+          exists: true,
+          value: charsetMeta.attr("charset")?.toUpperCase() || "UTF-8",
+          declaredInMeta: true,
+        };
+      }
+
+      const httpEquiv = $('meta[http-equiv="Content-Type"]');
+      if (httpEquiv.length > 0) {
+        const content = httpEquiv.attr("content") || "";
+        const charsetMatch = content.match(/charset=([^;]+)/i);
+        if (charsetMatch) {
+          return {
+            exists: true,
+            value: charsetMatch[1].toUpperCase(),
+            declaredInMeta: true,
+          };
+        }
+      }
+
+      return {
+        exists: false,
+        value: null,
+        declaredInMeta: false,
+      };
+    }
+
+    // Title Tag Analysis
+    function analyzeTitle($) {
+      const title = $("title").first().text().trim();
+      return {
+        exists: title.length > 0,
+        text: title,
+        length: title.length,
+        status:
+          title.length >= 30 && title.length <= 60
+            ? "optimal"
+            : title.length < 30
+            ? "too_short"
+            : "too_long",
+      };
+    }
+
+    // Meta Description Analysis
+    function analyzeMetaDescription($) {
+      const desc = $('meta[name="description"]').attr("content") || "";
+      return {
+        exists: desc.length > 0,
+        text: desc,
+        length: desc.length,
+        status:
+          desc.length >= 50 && desc.length <= 160
+            ? "optimal"
+            : desc.length < 50
+            ? "too_short"
+            : "too_long",
+      };
+    }
+
+    // Meta Robots Analysis
+    function analyzeMetaRobots($) {
+      const content = $('meta[name="robots"]').attr("content") || "";
+      return {
+        exists: content.length > 0,
+        content,
+        noindex: content.includes("noindex"),
+        nofollow: content.includes("nofollow"),
+      };
+    }
+
+    // Viewport Analysis
+    function analyzeViewport($) {
+      const viewport = $('meta[name="viewport"]').attr("content") || "";
+      return {
+        exists: viewport.length > 0,
+        content: viewport,
+        mobileFriendly: viewport.includes("width=device-width"),
+      };
+    }
+
+    // Text Analysis Functions
+    function calculateReadabilityScore(text) {
+      // Simple readability score calculation (Flesch-Kincaid approximation)
+      const words = text
+        .trim()
+        .split(/\s+/)
+        .filter((word) => word.length > 0);
+      const sentences = text.split(/[.!?]+/).filter((s) => s.trim().length > 0);
+      const syllables = words.reduce(
+        (count, word) => count + countSyllables(word),
+        0
+      );
+
+      if (words.length === 0 || sentences.length === 0) return 0;
+
+      const wordsPerSentence = words.length / sentences.length;
+      const syllablesPerWord = syllables / words.length;
+
+      // Flesch Reading Ease Score
+      const score =
+        206.835 - 1.015 * wordsPerSentence - 84.6 * syllablesPerWord;
+
+      // Normalize to 0-100 scale
+      return Math.max(0, Math.min(100, Math.round(score)));
+    }
+
+    function countSyllables(word) {
+      // Simple syllable counting approximation
+      word = word.toLowerCase().replace(/[^a-z]/g, "");
+      if (word.length <= 3) return 1;
+
+      let syllables = word.replace(/[^aeiouy]/g, "").length;
+      syllables -= word.match(/e$/) ? 1 : 0; // Silent e
+      syllables -= word.match(/[aeiouy]{2,}/g)?.length || 0; // Diphthongs
+      return Math.max(1, syllables);
+    }
+
+    // Content Analysis
+    function analyzeContent($) {
+      const bodyText = $("body").text();
+      const words = bodyText
+        .trim()
+        .split(/\s+/)
+        .filter((word) => word.length > 0);
+
+      return {
+        wordCount: words.length,
+        textLength: bodyText.length,
+        readability: calculateReadabilityScore(bodyText),
+        paragraphCount: $("p").length,
+        listCount: $("ul, ol").length,
+      };
+    }
+
+    // Perform comprehensive analysis
+    const analysis = {
+      url: finalUrl,
+      pageLoadTime: (Date.now() - startTime) / 1000,
+      title: analyzeTitle($),
+      meta: {
+        description: analyzeMetaDescription($),
+        robots: analyzeMetaRobots($),
+        viewport: analyzeViewport($),
+        charset: analyzeCharset($),
+        keywords: $('meta[name="keywords"]').attr("content") || null,
+      },
+      headings: analyzeHeadings($),
+      images: analyzeImages($),
+      links: analyzeLinks($, finalUrl),
+      content: analyzeContent($),
+      technical: {
+        canonical: analyzeCanonical($),
+        language: analyzeLanguage($),
+        schemaMarkup: analyzeSchemaMarkup($),
+        doctype: analyzeDoctype($),
+      },
+      social: {
+        openGraph: analyzeOpenGraph($),
+        twitterCard: analyzeTwitterCards($),
+      },
+      security: securityHeaders,
+      analyzedAt: new Date().toISOString(),
+    };
+
+    return NextResponse.json(analysis);
+  } catch (error) {
+    console.error("SEO analysis error:", error);
+    return NextResponse.json(
+      {
+        error: "Internal server error during analysis",
+        details:
+          process.env.NODE_ENV === "development" ? error.stack : undefined,
+      },
+      { status: 500 }
+    );
+  }
+}
+
+// Analysis Functions
+function analyzeTitle($) {
+  const title = $("title").first().text().trim();
+  return {
+    exists: title.length > 0,
+    text: title,
+    length: title.length,
+    status:
+      title.length >= 30 && title.length <= 60
+        ? "optimal"
+        : title.length < 30
+        ? "too_short"
+        : "too_long",
+  };
+}
+
+function analyzeMetaDescription($) {
+  const desc = $('meta[name="description"]').attr("content") || "";
+  return {
+    exists: desc.length > 0,
+    text: desc,
+    length: desc.length,
+    status:
+      desc.length >= 50 && desc.length <= 160
+        ? "optimal"
+        : desc.length < 50
+        ? "too_short"
+        : "too_long",
+  };
+}
+
+function analyzeMetaRobots($) {
+  const content = $('meta[name="robots"]').attr("content") || "";
+  return {
+    exists: content.length > 0,
+    content,
+    noindex: content.includes("noindex"),
+    nofollow: content.includes("nofollow"),
+  };
+}
+
+function analyzeViewport($) {
+  const viewport = $('meta[name="viewport"]').attr("content") || "";
+  return {
+    exists: viewport.length > 0,
+    content: viewport,
+    mobileFriendly: viewport.includes("width=device-width"),
+  };
+}
+
+function analyzeHeadings($) {
+  return {
+    h1: {
+      count: $("h1").length,
+      texts: $("h1")
+        .map((i, el) => $(el).text().trim())
+        .get(),
+    },
+    h2: {
+      count: $("h2").length,
+      texts: $("h2")
+        .map((i, el) => $(el).text().trim())
+        .get(),
+    },
+    h3: {
+      count: $("h3").length,
+      texts: $("h3")
+        .map((i, el) => $(el).text().trim())
+        .get(),
+    },
+  };
+}
+
+function analyzeImages($) {
+  const images = $("img");
+  const withAlt = images.filter((i, el) => {
+    const alt = $(el).attr("alt");
+    return alt && alt.trim() !== "";
+  }).length;
+
+  return {
+    total: images.length,
+    withAlt,
+    withoutAlt: images.length - withAlt,
+    percentageWithAlt:
+      images.length > 0 ? Math.round((withAlt / images.length) * 100) : 100,
+  };
+}
+
+function analyzeLinks($, baseUrl) {
+  const links = $("a[href]");
+  let internal = 0;
+  let external = 0;
+  let nofollow = 0;
+
+  try {
+    const baseDomain = new URL(baseUrl).hostname.replace("www.", "");
+
+    links.each((i, el) => {
+      const href = $(el).attr("href");
+      const rel = $(el).attr("rel") || "";
+
+      if (rel.includes("nofollow")) nofollow++;
+
+      try {
+        const url = new URL(href, baseUrl);
+        if (url.hostname.replace("www.", "") === baseDomain) {
+          internal++;
+        } else {
+          external++;
+        }
+      } catch {
+        internal++; // Relative links
+      }
+    });
+  } catch (e) {
+    console.error("Link analysis error:", e);
+  }
+
+  return {
+    total: links.length,
+    internal,
+    external,
+    nofollow,
+    nofollowPercentage:
+      links.length > 0 ? Math.round((nofollow / links.length) * 100) : 0,
+  };
+}
+
+function analyzeContent($) {
+  const bodyText = $("body").text();
+  const words = bodyText
+    .trim()
+    .split(/\s+/)
+    .filter((word) => word.length > 0);
+
+  return {
+    wordCount: words.length,
+    textLength: bodyText.length,
+    readability: calculateReadabilityScore(words), // Implement your own formula
+  };
+}
+
+function analyzeCanonical($) {
+  const canonical = $('link[rel="canonical"]').attr("href") || "";
+  return {
+    exists: canonical.length > 0,
+    url: canonical,
+    isSelf: canonical === $('meta[property="og:url"]').attr("content"),
+  };
+}
+
+function analyzeSchemaMarkup($) {
+  const schemas = $('script[type="application/ld+json"]');
+  const types = [];
+
+  schemas.each((i, el) => {
+    try {
+      const json = JSON.parse($(el).text());
+      if (json["@type"]) types.push(json["@type"]);
+    } catch (e) {
+      console.error("Schema parsing error:", e);
+    }
+  });
+
+  return {
+    count: schemas.length,
+    types: [...new Set(types)], // Unique types only
+  };
+}
+
+function analyzeOpenGraph($) {
+  return {
+    title: $('meta[property="og:title"]').attr("content") || "",
+    description: $('meta[property="og:description"]').attr("content") || "",
+    image: $('meta[property="og:image"]').attr("content") || "",
+    url: $('meta[property="og:url"]').attr("content") || "",
+  };
+}
+
+function analyzeTwitterCards($) {
+  return {
+    card: $('meta[name="twitter:card"]').attr("content") || "",
+    title: $('meta[name="twitter:title"]').attr("content") || "",
+    description: $('meta[name="twitter:description"]').attr("content") || "",
+    image: $('meta[name="twitter:image"]').attr("content") || "",
+  };
+}
+
+function analyzeLanguage($) {
+  return $("html").attr("lang") || null;
+}
+
+function analyzeDoctype($) {
+  const doctype = $("html")[0]?.prev?.data;
+  return doctype?.includes("<!DOCTYPE") ? doctype : null;
+}
+
+export const dynamic = "force-dynamic";

app/seo-checker/page.js

@@ -0,0 +1,28 @@
+import Layout from "@/components/layout/Layout";
+import SEOChecker from "@/components/seoChecker";
+import Head from "next/head";
+
+export default function Home() {
+  return (
+    <Layout headerStyle={4} footerStyle={3} breadcrumbTitle="SEO Checker">
+      <main className="container mx-auto py-12 px-4">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">
+            SEO Analyzer
+          </h1>
+          <p className="text-xl text-gray-600">
+            Get a comprehensive SEO report for any webpage
+          </p>
+        </div>
+
+        <SEOChecker />
+      </main>
+
+      <footer className="bg-white py-8 border-t">
+        <div className="container mx-auto px-4 text-center text-gray-500">
+          <p>© {new Date().getFullYear()} SEO Analyzer Tool</p>
+        </div>
+      </footer>
+    </Layout>
+  );
+}

app/services-details/page.js

@@ -200,7 +200,7 @@ export default function ServicesDetails3() {
                                                 <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                 <div className="sidebar__brochure sidebar__brochure-two">
                                                     <p>Check your website's SEO performance.</p>
-                                                    <Link href="/#seocheck">SEO Checker</Link>
+                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                 </div>
                                             </div>
                                             <div className="sidebar__widget sidebar__widget-two">

app/services/ad-campaign-management/page.js

@@ -229,7 +229,7 @@ export default function ServicesDetails3() {
                                                 <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                 <div className="sidebar__brochure sidebar__brochure-two">
                                                     <p>Check your website's SEO performance.</p>
-                                                    <Link href="/#seocheck">SEO Checker</Link>
+                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                 </div>
                                             </div>
                                             <div className="sidebar__widget sidebar__widget-two">

app/services/cloud-computing/page.js

@@ -261,7 +261,7 @@ export default function ServicesDetails3() {
                         <h4 className="sidebar__widget-title">SEO Checker</h4>
                         <div className="sidebar__brochure sidebar__brochure-two">
                           <p>Check your website's SEO performance.</p>
-                          <Link href="/#seocheck">SEO Checker</Link>
+                          <Link href="/seo-checker">SEO Checker</Link>
                         </div>
                       </div>
                       <div className="sidebar__widget sidebar__widget-two">

app/services/cyber-security/page.js

@@ -230,7 +230,7 @@ export default function ServicesDetails3() {
                                                 <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                 <div className="sidebar__brochure sidebar__brochure-two">
                                                     <p>Check your website's SEO performance.</p>
-                                                    <Link href="/#seocheck">SEO Checker</Link>
+                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                 </div>
                                             </div>
                                             <div className="sidebar__widget sidebar__widget-two">

app/services/lead-generation/page.js

@@ -228,7 +228,7 @@ export default function ServicesDetails3() {
                                                 <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                 <div className="sidebar__brochure sidebar__brochure-two">
                                                     <p>Check your website's SEO performance.</p>
-                                                    <Link href="/#seocheck">SEO Checker</Link>
+                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                 </div>
                                             </div>
                                             <div className="sidebar__widget sidebar__widget-two">

app/services/performance-monitoring/page.js

@@ -236,7 +236,7 @@ export default function ServicesDetails3() {
                                                 <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                 <div className="sidebar__brochure sidebar__brochure-two">
                                                     <p>Check your website's SEO performance.</p>
-                                                    <Link href="/#seocheck">SEO Checker</Link>
+                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                 </div>
                                             </div>
                                             <div className="sidebar__widget sidebar__widget-two">

app/services/search-engine-optimization/page.js

@@ -235,7 +235,7 @@ export default function ServicesDetails3() {
                                                 <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                 <div className="sidebar__brochure sidebar__brochure-two">
                                                     <p>Check your website's SEO performance.</p>
-                                                    <Link href="/#seocheck">SEO Checker</Link>
+                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                 </div>
                                             </div>
                                             <div className="sidebar__widget sidebar__widget-two">

app/services/social-media-management/page.js

@@ -230,7 +230,7 @@ export default function ServicesDetails3() {
                                                 <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                 <div className="sidebar__brochure sidebar__brochure-two">
                                                     <p>Check your website's SEO performance.</p>
-                                                    <Link href="/#seocheck">SEO Checker</Link>
+                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                 </div>
                                             </div>
                                             <div className="sidebar__widget sidebar__widget-two">

app/services/web-development/page.js

@@ -232,7 +232,7 @@ export default function ServicesDetails3() {
                                                 <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                 <div className="sidebar__brochure sidebar__brochure-two">
                                                     <p>Check your website's SEO performance.</p>
-                                                    <Link href="/#seocheck">SEO Checker</Link>
+                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                 </div>
                                             </div>
                                             <div className="sidebar__widget sidebar__widget-two">

app/services/website-maintenance/page.js

@@ -276,7 +276,7 @@ export default function ServicesDetails3() {
                                                 <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                 <div className="sidebar__brochure sidebar__brochure-two">
                                                     <p>Check your website's SEO performance.</p>
-                                                    <Link href="/#seocheck">SEO Checker</Link>
+                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                 </div>
                                             </div>
                                             <div className="sidebar__widget sidebar__widget-two">

components/layout/Menu.js

@@ -55,7 +55,7 @@ export default function Menu() {
                     </Link>
                 </li> */}
         <li>
-          <Link href="/#seocheck">SEO checker</Link>
+          <Link href="/seo-checker">SEO checker</Link>
         </li>
         <li>
           <Link href="/blog" className={isActive("/blog") ? "active" : ""}>

components/seoChecker.js

@@ -0,0 +1,719 @@
+"use client";
+import { useState } from "react";
+import {
+  FiCheckCircle,
+  FiAlertTriangle,
+  FiInfo,
+  FiDownload,
+  FiExternalLink,
+} from "react-icons/fi";
+
+const SEOChecker = () => {
+  const [url, setUrl] = useState("");
+  const [seoData, setSeoData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [activeTab, setActiveTab] = useState("summary");
+
+  const checkSEO = async () => {
+    if (!url) {
+      setError("Please enter a URL");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setSeoData(null);
+
+    try {
+      const response = await fetch("/api/seo-check", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ url }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to analyze URL");
+      }
+
+      const data = await response.json();
+      setSeoData(data);
+      setActiveTab("summary");
+    } catch (err) {
+      setError(err.message || "Failed to check SEO");
+      console.error("SEO check error:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const calculateScores = (data) => {
+    if (!data) return { score: 0, deductions: [], categoryScores: {} };
+
+    let score = 100;
+    const deductions = [];
+
+    // Title (15 points)
+    if (!data.title.exists) {
+      score -= 15;
+      deductions.push({
+        item: "Title Tag",
+        points: -15,
+        message: "Missing completely",
+      });
+    } else {
+      if (data.title.text.length < 30) {
+        score -= 7;
+        deductions.push({
+          item: "Title Length",
+          points: -7,
+          message: "Too short (under 30 chars)",
+        });
+      } else if (data.title.text.length > 60) {
+        score -= 5;
+        deductions.push({
+          item: "Title Length",
+          points: -5,
+          message: "Too long (over 60 chars)",
+        });
+      }
+    }
+
+    // Meta Description (10 points)
+    if (!data.meta.description.exists) {
+      score -= 10;
+      deductions.push({
+        item: "Meta Description",
+        points: -10,
+        message: "Missing completely",
+      });
+    } else {
+      if (data.meta.description.text.length < 50) {
+        score -= 5;
+        deductions.push({
+          item: "Meta Description",
+          points: -5,
+          message: "Too short (under 50 chars)",
+        });
+      } else if (data.meta.description.text.length > 160) {
+        score -= 3;
+        deductions.push({
+          item: "Meta Description",
+          points: -3,
+          message: "Too long (over 160 chars)",
+        });
+      }
+    }
+
+    // Headings (15 points)
+    if (data.headings.h1.count === 0) {
+      score -= 10;
+      deductions.push({
+        item: "H1 Heading",
+        points: -10,
+        message: "Missing H1 tag",
+      });
+    } else if (data.headings.h1.count > 1) {
+      score -= 7;
+      deductions.push({
+        item: "H1 Heading",
+        points: -7,
+        message: "Multiple H1 tags",
+      });
+    }
+
+    if (data.headings.h2.count < 2) {
+      score -= 3;
+      deductions.push({
+        item: "H2 Headings",
+        points: -3,
+        message: "Not enough H2 tags",
+      });
+    }
+
+    // Images (10 points)
+    if (data.images?.withoutAlt > 0) {
+      const deduction = Math.min(10, data.images.withoutAlt * 2);
+      score -= deduction;
+      deductions.push({
+        item: "Image Alt Tags",
+        points: -deduction,
+        message: `${data.images.withoutAlt} images missing alt text`,
+      });
+    }
+
+    // Links (10 points)
+    if (data.links?.internal < 5) {
+      score -= 5;
+      deductions.push({
+        item: "Internal Links",
+        points: -5,
+        message: "Few internal links",
+      });
+    }
+
+    if (data.links?.external === 0) {
+      score -= 2;
+      deductions.push({
+        item: "External Links",
+        points: -2,
+        message: "No external links",
+      });
+    }
+
+    // Mobile (10 points)
+    if (!data.meta?.viewport?.mobileFriendly) {
+      score -= 10;
+      deductions.push({
+        item: "Mobile Friendly",
+        points: -10,
+        message: "No responsive viewport",
+      });
+    }
+
+    // Performance (10 points)
+    if (data.pageLoadTime > 3) {
+      const deduction = Math.min(10, Math.floor(data.pageLoadTime - 2) * 2);
+      score -= deduction;
+      deductions.push({
+        item: "Page Speed",
+        points: -deduction,
+        message: `Slow load time (${data.pageLoadTime}s)`,
+      });
+    }
+
+    // Technical SEO (20 points)
+    if (!data.technical?.canonical?.exists) {
+      score -= 5;
+      deductions.push({
+        item: "Canonical URL",
+        points: -5,
+        message: "Missing canonical tag",
+      });
+    }
+
+    if (!data.security?.https) {
+      score -= 5;
+      deductions.push({
+        item: "HTTPS",
+        points: -5,
+        message: "Not using HTTPS",
+      });
+    }
+
+    if (data.technical?.schemaMarkup?.count === 0) {
+      score -= 5;
+      deductions.push({
+        item: "Schema Markup",
+        points: -5,
+        message: "Missing structured data",
+      });
+    }
+
+    if (!data.meta?.robots?.content) {
+      score -= 5;
+      deductions.push({
+        item: "Robots Meta",
+        points: -5,
+        message: "Missing robots meta tag",
+      });
+    }
+
+    // Calculate category scores
+    const categoryScores = {
+      onPage: calculateOnPageScore(data),
+      technical: calculateTechnicalScore(data),
+      content: calculateContentScore(data),
+      mobile: calculateMobileScore(data),
+    };
+
+    return {
+      score: Math.max(0, Math.round(score)),
+      deductions,
+      categoryScores,
+    };
+  };
+
+  const calculateOnPageScore = (data) => {
+    let score = 30;
+    if (!data.title.exists) score -= 15;
+    if (!data.meta.description.exists) score -= 10;
+    if (data.headings.h1.count !== 1) score -= 5;
+    return Math.max(0, score);
+  };
+
+  const calculateTechnicalScore = (data) => {
+    let score = 30;
+    if (!data.technical.canonical.exists) score -= 5;
+    if (!data.security.https) score -= 5;
+    if (data.technical.schemaMarkup.count === 0) score -= 5;
+    if (!data.meta.robots.content) score -= 5;
+    return Math.max(0, score);
+  };
+
+  const calculateContentScore = (data) => {
+    let score = 20;
+    if (data.content.wordCount < 300) score -= 5;
+    if (data.content.readability < 60) score -= 5;
+    if (data.images.withoutAlt > 0) score -= 5;
+    return Math.max(0, score);
+  };
+
+  const calculateMobileScore = (data) => {
+    let score = 20;
+    if (!data.meta.viewport.mobileFriendly) score -= 10;
+    if (data.pageLoadTime > 3) score -= 5;
+    return Math.max(0, score);
+  };
+
+  const renderReportSection = () => {
+    if (!seoData) return null;
+
+    const { score, deductions, categoryScores } = calculateScores(seoData);
+
+    switch (activeTab) {
+      case "summary":
+        return (
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <ScoreCard
+                title="Overall Score"
+                score={score}
+                max={100}
+                description="Composite SEO health score"
+              />
+              <ScoreCard
+                title="On-Page SEO"
+                score={categoryScores.onPage}
+                max={30}
+                description="Title, meta, headings"
+              />
+              <ScoreCard
+                title="Technical SEO"
+                score={categoryScores.technical}
+                max={30}
+                description="Canonical, schema, security"
+              />
+              <ScoreCard
+                title="Content Quality"
+                score={categoryScores.content}
+                max={20}
+                description="Word count, readability"
+              />
+            </div>
+
+            <div className="bg-white p-6 rounded-lg shadow">
+              <h3 className="text-lg font-semibold mb-4">
+                Key Recommendations
+              </h3>
+              <ul className="space-y-3">
+                {deductions
+                  .sort((a, b) => a.points - b.points)
+                  .map((item, i) => (
+                    <li key={i} className="flex items-start">
+                      {item.points < -7 ? (
+                        <FiAlertTriangle className="text-red-500 mt-1 mr-2 flex-shrink-0" />
+                      ) : (
+                        <FiInfo className="text-yellow-500 mt-1 mr-2 flex-shrink-0" />
+                      )}
+                      <div className="flex-1">
+                        <div className="flex justify-between">
+                          <span className="font-medium">{item.item}</span>
+                          <span
+                            className={`font-mono ${
+                              item.points < 0
+                                ? "text-red-500"
+                                : "text-green-500"
+                            }`}
+                          >
+                            {item.points}
+                          </span>
+                        </div>
+                        <p className="text-gray-600 text-sm">{item.message}</p>
+                        <div className="flex justify-between mt-1">
+                          <span className="text-xs text-gray-500">
+                            Priority:{" "}
+                            {item.points < -7
+                              ? "High"
+                              : item.points < -4
+                              ? "Medium"
+                              : "Low"}
+                          </span>
+                          {item.item === "HTTPS" && !seoData.security.https && (
+                            <a
+                              href={`https://${seoData.url.replace(
+                                /^https?:\/\//,
+                                ""
+                              )}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-xs text-blue-500 flex items-center"
+                            >
+                              Try HTTPS <FiExternalLink className="ml-1" />
+                            </a>
+                          )}
+                        </div>
+                      </div>
+                    </li>
+                  ))}
+              </ul>
+            </div>
+          </div>
+        );
+
+      case "details":
+        return (
+          <div className="space-y-6">
+            <Section title="On-Page SEO">
+              <CheckItem
+                label="Title Tag"
+                status={seoData.title.exists ? "good" : "bad"}
+                goodText={`"${seoData.title.text}" (${seoData.title.text.length} chars)`}
+                badText="Missing"
+                recommendation="Include 1 title tag (50-60 chars)"
+              />
+              <CheckItem
+                label="Meta Description"
+                status={seoData.meta.description.exists ? "good" : "bad"}
+                goodText={`"${seoData.meta.description.text}" (${seoData.meta.description.text.length} chars)`}
+                badText="Missing"
+                recommendation="Write a compelling description (120-160 chars)"
+              />
+              <CheckItem
+                label="Heading Structure"
+                status={
+                  seoData.headings.h1.count === 1 &&
+                  seoData.headings.h2.count >= 2
+                    ? "good"
+                    : "bad"
+                }
+                goodText={`1 H1 and ${seoData.headings.h2.count} H2 headings`}
+                badText={
+                  seoData.headings.h1.count === 0
+                    ? "No H1 heading"
+                    : seoData.headings.h1.count > 1
+                    ? "Multiple H1 headings"
+                    : "Not enough H2 headings"
+                }
+                recommendation="Use one H1 and multiple H2s for proper structure"
+              />
+            </Section>
+
+            <Section title="Technical SEO">
+              <CheckItem
+                label="Canonical URL"
+                status={seoData.technical.canonical.exists ? "good" : "bad"}
+                goodText={`Points to: ${seoData.technical.canonical.url}`}
+                badText="Missing"
+                recommendation="Add canonical URL tag to avoid duplicate content"
+              />
+              <CheckItem
+                label="Schema Markup"
+                status={
+                  seoData.technical.schemaMarkup.count > 0 ? "good" : "bad"
+                }
+                goodText={`${seoData.technical.schemaMarkup.count} schema items found`}
+                badText="Missing"
+                recommendation="Implement structured data for rich snippets"
+              />
+              <CheckItem
+                label="HTTPS"
+                status={seoData.security.https ? "good" : "bad"}
+                goodText="Secure connection"
+                badText="Not secure"
+                recommendation="Install SSL certificate"
+              />
+            </Section>
+
+            <Section title="Content Quality">
+              <CheckItem
+                label="Word Count"
+                status={seoData.content.wordCount >= 300 ? "good" : "bad"}
+                goodText={`${seoData.content.wordCount} words (good length)`}
+                badText={`${seoData.content.wordCount} words (too short)`}
+                recommendation="Aim for at least 300 words of quality content"
+              />
+              <CheckItem
+                label="Readability"
+                status={seoData.content.readability >= 60 ? "good" : "bad"}
+                goodText={`Score: ${seoData.content.readability}/100 (good)`}
+                badText={`Score: ${seoData.content.readability}/100 (needs improvement)`}
+                recommendation="Simplify complex sentences and reduce jargon"
+              />
+              <CheckItem
+                label="Image Alt Text"
+                status={seoData.images.withoutAlt === 0 ? "good" : "bad"}
+                goodText="All images have alt text"
+                badText={`${seoData.images.withoutAlt} images missing alt text`}
+                recommendation="Add descriptive alt text to all images"
+              />
+            </Section>
+          </div>
+        );
+
+      case "full-report":
+        return (
+          <div className="space-y-8 bg-white p-6 rounded-lg shadow">
+            <div className="prose max-w-none">
+              <h2 className="text-2xl font-bold">Comprehensive SEO Report</h2>
+              <p className="text-gray-600">
+                Generated for {seoData.url} on{" "}
+                {new Date(seoData.analyzedAt).toLocaleString()}
+              </p>
+
+              <div className="my-6 p-4 bg-gray-50 rounded-lg">
+                <h3 className="text-xl font-semibold mb-2">
+                  Executive Summary
+                </h3>
+                <p>
+                  Overall SEO Score: <strong>{score}/100</strong> -{" "}
+                  {score >= 80
+                    ? "Excellent"
+                    : score >= 60
+                    ? "Good"
+                    : score >= 40
+                    ? "Needs Improvement"
+                    : "Poor"}
+                </p>
+                <p className="mt-2">
+                  {score >= 80
+                    ? "Your site has strong SEO fundamentals."
+                    : score >= 60
+                    ? "Your site has decent SEO but could use some improvements."
+                    : score >= 40
+                    ? "Your site needs significant SEO improvements."
+                    : "Your site requires urgent SEO attention."}
+                </p>
+              </div>
+
+              <h3 className="text-xl font-semibold mt-8 mb-4">
+                Detailed Findings
+              </h3>
+
+              <h4 className="font-semibold mt-6">On-Page SEO</h4>
+              <ul className="list-disc pl-5 space-y-2">
+                <li>
+                  <strong>Title Tag:</strong>{" "}
+                  {seoData.title.exists
+                    ? `"${seoData.title.text}" (${seoData.title.text.length} characters, ${seoData.title.status})`
+                    : "Missing"}
+                </li>
+                <li>
+                  <strong>Meta Description:</strong>{" "}
+                  {seoData.meta.description.exists
+                    ? `"${seoData.meta.description.text}" (${seoData.meta.description.text.length} characters, ${seoData.meta.description.status})`
+                    : "Missing"}
+                </li>
+                <li>
+                  <strong>Headings:</strong> {seoData.headings.h1.count} H1,{" "}
+                  {seoData.headings.h2.count} H2, {seoData.headings.h3.count} H3
+                </li>
+              </ul>
+
+              <h4 className="font-semibold mt-6">Technical SEO</h4>
+              <ul className="list-disc pl-5 space-y-2">
+                <li>
+                  <strong>Canonical URL:</strong>{" "}
+                  {seoData.technical.canonical.exists
+                    ? seoData.technical.canonical.url
+                    : "Missing"}
+                </li>
+                <li>
+                  <strong>Schema Markup:</strong>{" "}
+                  {seoData.technical.schemaMarkup.count > 0
+                    ? `${seoData.technical.schemaMarkup.count} schema items found`
+                    : "None detected"}
+                </li>
+                <li>
+                  <strong>HTTPS:</strong>{" "}
+                  {seoData.security.https ? "Enabled" : "Not enabled"}
+                </li>
+              </ul>
+
+              <h4 className="font-semibold mt-6">Content Quality</h4>
+              <ul className="list-disc pl-5 space-y-2">
+                <li>
+                  <strong>Word Count:</strong> {seoData.content.wordCount} words
+                </li>
+                <li>
+                  <strong>Readability:</strong> Score{" "}
+                  {seoData.content.readability}/100
+                </li>
+                <li>
+                  <strong>Images:</strong> {seoData.images.total} total,{" "}
+                  {seoData.images.withoutAlt} missing alt text
+                </li>
+              </ul>
+            </div>
+
+            <div className="flex justify-end">
+              <button
+                onClick={() => window.print()}
+                className="bg-blue-600 text-white px-4 py-2 rounded-md flex items-center"
+              >
+                <FiDownload className="mr-2" />
+                Download PDF Report
+              </button>
+            </div>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 bg-white rounded-lg shadow-lg">
+      <div className="mb-8">
+        <div className="flex flex-col sm:flex-row gap-4">
+          <input
+            type="text"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="Enter URL (e.g., https://example.com)"
+            className="flex-1 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            onKeyDown={(e) => e.key === "Enter" && checkSEO()}
+          />
+          <button
+            onClick={checkSEO}
+            disabled={loading || !url}
+            className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 disabled:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center min-w-[150px]"
+          >
+            {loading ? (
+              <>
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                Analyzing...
+              </>
+            ) : (
+              "Run Full Analysis"
+            )}
+          </button>
+        </div>
+        {error && (
+          <p className="mt-2 text-sm text-red-600 flex items-center">
+            <FiAlertTriangle className="mr-1" /> {error}
+          </p>
+        )}
+      </div>
+
+      {loading && (
+        <div className="text-center py-12">
+          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
+          <p className="mt-4 text-gray-600">
+            Running comprehensive SEO analysis...
+          </p>
+          <p className="text-sm text-gray-500">This may take 10-15 seconds</p>
+        </div>
+      )}
+
+      {seoData && (
+        <>
+          <div className="border-b border-gray-200 mb-6">
+            <nav className="flex space-x-4 overflow-x-auto pb-2">
+              {["summary", "details", "full-report"].map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className={`px-4 py-2 text-sm font-medium whitespace-nowrap ${
+                    activeTab === tab
+                      ? "border-b-2 border-blue-500 text-blue-600"
+                      : "text-gray-500 hover:text-gray-700"
+                  }`}
+                >
+                  {tab
+                    .split("-")
+                    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                    .join(" ")}
+                </button>
+              ))}
+            </nav>
+          </div>
+
+          {renderReportSection()}
+        </>
+      )}
+    </div>
+  );
+};
+
+// Helper Components
+const ScoreCard = ({ title, score, max, description }) => {
+  const percentage = (score / max) * 100;
+  const getColor = () => {
+    if (percentage >= 80) return "bg-green-500";
+    if (percentage >= 50) return "bg-yellow-500";
+    return "bg-red-500";
+  };
+
+  return (
+    <div className="bg-white p-4 rounded-lg shadow border border-gray-100">
+      <h3 className="font-medium text-gray-700">{title}</h3>
+      <div className="flex items-end mt-2">
+        <span className="text-3xl font-bold mr-2">{score}</span>
+        <span className="text-gray-500">/ {max}</span>
+      </div>
+      <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
+        <div
+          className={`h-2 rounded-full ${getColor()}`}
+          style={{ width: `${percentage}%` }}
+        ></div>
+      </div>
+      <p className="text-xs text-gray-500 mt-2">{description}</p>
+    </div>
+  );
+};
+
+const Section = ({ title, children }) => (
+  <div className="bg-white p-6 rounded-lg shadow">
+    <h3 className="text-lg font-semibold mb-4">{title}</h3>
+    <div className="space-y-4">{children}</div>
+  </div>
+);
+
+const CheckItem = ({ label, status, goodText, badText, recommendation }) => (
+  <div className="flex items-start">
+    <div className="mr-3 mt-1">
+      {status === "good" ? (
+        <FiCheckCircle className="text-green-500" />
+      ) : (
+        <FiAlertTriangle className="text-red-500" />
+      )}
+    </div>
+    <div>
+      <p className="font-medium">{label}</p>
+      <p className="text-gray-600 text-sm">
+        {status === "good" ? goodText : badText}
+      </p>
+      {status !== "good" && recommendation && (
+        <p className="text-blue-600 text-sm mt-1">
+          Recommendation: {recommendation}
+        </p>
+      )}
+    </div>
+  </div>
+);
+
+export default SEOChecker;

package.json

@@ -20,20 +20,24 @@
         "@supabase/auth-ui-react": "^0.4.7",
         "@supabase/ssr": "^0.5.1",
         "@supabase/supabase-js": "^2.45.2",
+        "@tailwindcss/forms": "^0.5.10",
         "@tailwindcss/postcss": "^4.1.11",
         "aos": "^2.3.4",
-        "axios": "^1.7.2",
+        "axios": "^1.10.0",
+        "cheerio": "^1.1.0",
         "cookies-next": "^4.2.1",
         "lucide-react": "^0.525.0",
         "next": "^14.2.5",
         "nocodb-sdk": "^0.255.0",
         "node-fetch": "^3.3.2",
         "postcss": "^8.5.6",
+        "puppeteer": "^24.11.2",
         "react": "18.2.0",
         "react-curved-text": "^3.0.0",
         "react-dom": "18.2.0",
         "react-google-recaptcha": "^3.1.0",
         "react-hot-toast": "^2.5.2",
+        "react-icons": "^5.5.0",
         "react-modal-video": "^2.0.1",
         "react-phone-number-input": "^3.4.4",
         "resend": "^3.5.0",