feat(seo): add comprehensive SEO and security optimization

.gitignore

@@ -39,3 +39,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# AI/Claude working files
+.claude/
+.playwright-mcp/
+playwright-*.js
+sticky-scroll-section-prompt.md

next.config.ts

@@ -1,7 +1,23 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  // Disable source maps in production to prevent code exposure
+  productionBrowserSourceMaps: false,
+
+  // Backup security headers (proxy.ts is primary)
+  // Note: X-XSS-Protection is deprecated - CSP handles XSS protection
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          { key: 'X-Content-Type-Options', value: 'nosniff' },
+          { key: 'X-Frame-Options', value: 'DENY' },
+          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+        ],
+      },
+    ]
+  },
 };
 
 export default nextConfig;

public/robots.txt

@@ -0,0 +1,8 @@
+User-agent: *
+Allow: /
+
+# Block access to Next.js internals
+Disallow: /_next/
+Disallow: /api/
+
+Sitemap: https://dentalemon.com/sitemap.xml

src/app/apple-icon.tsx

@@ -0,0 +1,32 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const size = {
+  width: 180,
+  height: 180,
+};
+export const contentType = "image/png";
+
+export default function Icon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)",
+          borderRadius: "40px",
+        }}
+      >
+        <span style={{ fontSize: "100px" }}>🍋</span>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

src/app/icon.tsx

@@ -0,0 +1,32 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const size = {
+  width: 32,
+  height: 32,
+};
+export const contentType = "image/png";
+
+export default function Icon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)",
+          borderRadius: "8px",
+        }}
+      >
+        <span style={{ fontSize: "20px" }}>🍋</span>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

src/app/layout.tsx

@@ -1,10 +1,64 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
+import { StructuredData } from "@/components/structured-data";
 
 export const metadata: Metadata = {
-  title: "DentaLemon - Your Trusted Dental Care Partner",
-  description: "Experience world-class dental care with cutting-edge technology and compassionate professionals. Transform your smile today with DentaLemon.",
+  metadataBase: new URL("https://dentalemon.com"),
+  title: {
+    default: "Dentalemon - Dental Practice Management Software",
+    template: "%s | Dentalemon",
+  },
+  description:
+    "Streamline your dental practice with Dentalemon. Automate scheduling, billing, and patient records. HIPAA-compliant software trusted by modern dental clinics.",
+  keywords: [
+    "dental practice management software",
+    "dental clinic software",
+    "dental scheduling software",
+    "dental billing software",
+    "HIPAA compliant dental software",
+    "dental patient management",
+    "dental EHR",
+    "dental office management",
+    "dentist software",
+    "dental practice automation",
+  ],
+  authors: [{ name: "Dentalemon" }],
+  creator: "Dentalemon",
+  publisher: "Dentalemon",
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://dentalemon.com",
+    siteName: "Dentalemon",
+    title: "Dentalemon - Dental Practice Management Software",
+    description:
+      "Automate scheduling, billing, and patient records. HIPAA-compliant software built for modern dental practices.",
+    // OG image is auto-generated from src/app/opengraph-image.tsx
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Dentalemon - Dental Practice Management Software",
+    description:
+      "Automate scheduling, billing, and patient records. HIPAA-compliant software built for modern dental practices.",
+    // Twitter image uses the same OG image
+    creator: "@dentalemon",
+  },
+  alternates: {
+    canonical: "https://dentalemon.com",
+  },
+  category: "technology",
 };
 
 export default function RootLayout({
@@ -14,6 +68,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <StructuredData />
+      </head>
       <body className="antialiased">
         <ThemeProvider
           attribute="class"

src/app/opengraph-image.tsx

@@ -0,0 +1,121 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const alt = "Dentalemon - Dental Practice Management Software";
+export const size = {
+  width: 1200,
+  height: 630,
+};
+export const contentType = "image/png";
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 48,
+          background: "linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%)",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "60px",
+        }}
+      >
+        {/* Logo area */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            marginBottom: "40px",
+          }}
+        >
+          <div
+            style={{
+              width: "80px",
+              height: "80px",
+              borderRadius: "20px",
+              background: "linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginRight: "24px",
+              fontSize: "48px",
+            }}
+          >
+            🍋
+          </div>
+          <span
+            style={{
+              fontSize: "56px",
+              fontWeight: "bold",
+              color: "white",
+            }}
+          >
+            Dentalemon
+          </span>
+        </div>
+
+        {/* Main heading */}
+        <div
+          style={{
+            fontSize: "52px",
+            fontWeight: "bold",
+            color: "white",
+            textAlign: "center",
+            marginBottom: "24px",
+            lineHeight: 1.2,
+          }}
+        >
+          Dental Practice Management Software
+        </div>
+
+        {/* Subheading */}
+        <div
+          style={{
+            fontSize: "28px",
+            color: "#94a3b8",
+            textAlign: "center",
+            maxWidth: "900px",
+          }}
+        >
+          Automate scheduling, billing, and patient records. HIPAA-compliant
+          software built for modern dental practices.
+        </div>
+
+        {/* Feature badges */}
+        <div
+          style={{
+            display: "flex",
+            marginTop: "48px",
+            gap: "24px",
+          }}
+        >
+          {["Scheduling", "Billing", "Patient Records", "HIPAA Compliant"].map(
+            (feature) => (
+              <div
+                key={feature}
+                style={{
+                  padding: "12px 24px",
+                  background: "rgba(251, 191, 36, 0.15)",
+                  border: "1px solid rgba(251, 191, 36, 0.3)",
+                  borderRadius: "9999px",
+                  color: "#fbbf24",
+                  fontSize: "20px",
+                }}
+              >
+                {feature}
+              </div>
+            )
+          )}
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

src/app/page.tsx

@@ -1,6 +1,7 @@
 import { Navbar } from "@/components/navbar"
 import { Hero } from "@/components/hero"
 import { SocialProof } from "@/components/social-proof"
+import { StickyFeatures } from "@/components/sticky-features"
 import { Features } from "@/components/features"
 import { Pricing } from "@/components/pricing"
 import { CTA } from "@/components/cta"
@@ -14,6 +15,7 @@ export default function Home() {
         <Hero />
         <Features />
         <SocialProof />
+        <StickyFeatures />
         <Pricing />
         <CTA />
       </main>

src/app/sitemap.ts

@@ -0,0 +1,16 @@
+import { MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = "https://dentalemon.com";
+
+  // Note: Fragment URLs (#features, #pricing) are ignored by search engines
+  // Add actual page URLs here when they are created (e.g., /features, /pricing)
+  return [
+    {
+      url: baseUrl,
+      lastModified: new Date("2024-11-28"),
+      changeFrequency: "monthly",
+      priority: 1,
+    },
+  ];
+}

src/components/cta.tsx

@@ -21,7 +21,7 @@ export function CTA() {
               Ready to Transform Your Practice?
             </h2>
             <p className="mx-auto max-w-[768px] text-base sm:text-lg text-primary-foreground/90 leading-relaxed mb-12">
-              Join modern dental practices using DentaLemon to streamline operations and deliver exceptional patient care.
+              Join modern dental practices using Dentalemon to streamline operations and deliver exceptional patient care.
               Schedule a personalized demo today!
             </p>
             <div className="flex justify-center">