'use client'; import { useState } from 'react'; import Link from 'next/link'; import { Activity, ArrowLeft, BookOpen, Server, Shield, Zap, Search, Brain, Eye, Code2, ExternalLink, RefreshCw, Clock, CheckCircle2, ChevronDown, ChevronUp, Layers, Globe, AlertTriangle, } from 'lucide-react'; // --------------------------------------------------------------------------- // Best Practices Data per Layer // --------------------------------------------------------------------------- interface Practice { title: string; description: string; standard: string; priority: 'critical' | 'high' | 'medium' | 'low'; resources: { label: string; url: string }[]; } interface LayerPractices { id: string; name: string; icon: typeof Globe; color: string; bg: string; practices: Practice[]; lastUpdated: string; } const BEST_PRACTICES: LayerPractices[] = [ { id: 'L1', name: 'Infrastructure & Server', icon: Server, color: 'text-emerald-400', bg: 'bg-emerald-500/10 border-emerald-500/20', lastUpdated: '2026-02-15', practices: [ { title: 'Use HTTPS everywhere', description: 'All pages must be served over HTTPS with a valid SSL/TLS certificate. HTTP should 301 redirect to HTTPS. HSTS header should be set with max-age of at least 1 year.', standard: 'OWASP, Google Security', priority: 'critical', resources: [{ label: "Let's Encrypt", url: 'https://letsencrypt.org' }, { label: 'SSL Labs Test', url: 'https://www.ssllabs.com/ssltest/' }] }, { title: 'Server Response Time < 200ms', description: 'Time to First Byte (TTFB) should be under 200ms. Use CDN, server caching, and optimized database queries. Google uses TTFB as a ranking signal.', standard: 'Google Core Web Vitals', priority: 'high', resources: [{ label: 'web.dev TTFB Guide', url: 'https://web.dev/articles/ttfb' }] }, { title: 'Enable compression (gzip/brotli)', description: 'Enable server-side compression for text-based resources. Brotli provides 15-20% better compression than gzip. Configure Content-Encoding headers.', standard: 'HTTP/2 Best Practices', priority: 'high', resources: [{ label: 'Brotli Compression', url: 'https://web.dev/articles/codelab-text-compression-brotli' }] }, { title: 'Set proper cache headers', description: 'Use Cache-Control headers with appropriate max-age for static assets (1 year for versioned files). Use ETag for dynamic content. Implement cache busting for deployments.', standard: 'RFC 7234', priority: 'medium', resources: [{ label: 'Caching Best Practices', url: 'https://web.dev/articles/http-cache' }] }, { title: 'Declare character encoding', description: 'Add as the first element in . This prevents rendering delays and character display issues.', standard: 'W3C HTML Standard', priority: 'medium', resources: [{ label: 'W3C Encoding', url: 'https://www.w3.org/International/questions/qa-html-encoding-declarations' }] }, ], }, { id: 'L2', name: 'Security & Privacy', icon: Shield, color: 'text-red-400', bg: 'bg-red-500/10 border-red-500/20', lastUpdated: '2026-02-15', practices: [ { title: 'Content Security Policy (CSP)', description: 'Implement a strict CSP header to prevent XSS attacks. Start with report-only mode to identify violations before enforcing. Block inline scripts and eval().', standard: 'OWASP Top 10', priority: 'critical', resources: [{ label: 'CSP Reference', url: 'https://content-security-policy.com' }, { label: 'CSP Evaluator', url: 'https://csp-evaluator.withgoogle.com' }] }, { title: 'Security headers (HSTS, X-Frame, etc.)', description: 'Set Strict-Transport-Security, X-Frame-Options: DENY, X-Content-Type-Options: nosniff, Referrer-Policy, and Permissions-Policy headers.', standard: 'OWASP Secure Headers', priority: 'critical', resources: [{ label: 'Security Headers Scanner', url: 'https://securityheaders.com' }] }, { title: 'No API keys in client-side code', description: 'Never expose API keys, tokens, or secrets in HTML, JavaScript, or source maps. Use server-side proxies for API calls. Rotate any exposed keys immediately.', standard: 'OWASP API Security', priority: 'critical', resources: [{ label: 'OWASP Secrets Management', url: 'https://cheatsheetseries.owasp.org/cheatsheets/Secrets_Management_Cheat_Sheet.html' }] }, { title: 'Subresource Integrity (SRI)', description: 'Add integrity attributes to all external scripts and stylesheets. This prevents CDN compromise attacks.', standard: 'W3C SRI', priority: 'high', resources: [{ label: 'SRI Hash Generator', url: 'https://www.srihash.org' }] }, { title: 'Cookie security flags', description: 'Set Secure, HttpOnly, and SameSite flags on all cookies. Use SameSite=Strict for session cookies to prevent CSRF.', standard: 'RFC 6265bis', priority: 'high', resources: [{ label: 'Cookie Security', url: 'https://web.dev/articles/samesite-cookies-explained' }] }, { title: 'Remove server version info', description: 'Remove or obfuscate Server, X-Powered-By, and similar headers that reveal your tech stack. This reduces attack surface.', standard: 'OWASP Information Disclosure', priority: 'medium', resources: [{ label: 'OWASP Info Leakage', url: 'https://owasp.org/www-project-web-security-testing-guide/' }] }, ], }, { id: 'L3', name: 'Performance & Speed', icon: Zap, color: 'text-amber-400', bg: 'bg-amber-500/10 border-amber-500/20', lastUpdated: '2026-02-15', practices: [ { title: 'Core Web Vitals targets', description: 'LCP < 2.5s (Largest Contentful Paint), INP < 200ms (Interaction to Next Paint), CLS < 0.1 (Cumulative Layout Shift). These are Google ranking factors.', standard: 'Google Core Web Vitals', priority: 'critical', resources: [{ label: 'web.dev CWV', url: 'https://web.dev/articles/vitals' }, { label: 'PageSpeed Insights', url: 'https://pagespeed.web.dev' }] }, { title: 'Total page weight < 1.5MB', description: 'Keep total transfer size under 1.5MB for initial page load. Optimize images (WebP/AVIF), minify CSS/JS, tree-shake unused code.', standard: 'HTTP Archive Recommendations', priority: 'high', resources: [{ label: 'HTTP Archive', url: 'https://httparchive.org/reports/page-weight' }] }, { title: 'Responsive images with srcset', description: 'Use srcset and sizes attributes to serve appropriately sized images for each device. Use modern formats (WebP, AVIF) with fallbacks.', standard: 'W3C Responsive Images', priority: 'high', resources: [{ label: 'Responsive Images Guide', url: 'https://web.dev/articles/responsive-images' }] }, { title: 'Lazy load below-fold content', description: 'Add loading="lazy" to images and iframes below the fold. Use Intersection Observer for custom lazy loading. Never lazy-load LCP images.', standard: 'Web Performance Best Practices', priority: 'medium', resources: [{ label: 'Lazy Loading Guide', url: 'https://web.dev/articles/lazy-loading-images' }] }, { title: 'Viewport meta tag for mobile', description: 'Include for proper mobile rendering. Google uses mobile-first indexing.', standard: 'Google Mobile-First Indexing', priority: 'critical', resources: [{ label: 'Mobile-Friendly Test', url: 'https://search.google.com/test/mobile-friendly' }] }, ], }, { id: 'L4', name: 'SEO Foundation', icon: Search, color: 'text-blue-400', bg: 'bg-blue-500/10 border-blue-500/20', lastUpdated: '2026-02-15', practices: [ { title: 'Title tag: 50-60 characters', description: 'Include primary keyword near the start. Make it compelling for clicks. Unique per page. Google truncates at ~60 characters.', standard: 'Google SEO Starter Guide', priority: 'critical', resources: [{ label: 'Google SEO Guide', url: 'https://developers.google.com/search/docs/fundamentals/seo-starter-guide' }] }, { title: 'Meta description: 150-160 characters', description: 'Write compelling descriptions with keyword and call-to-action. Unique per page. Google may override with page content.', standard: 'Google SEO Guidelines', priority: 'high', resources: [{ label: 'Snippet Guide', url: 'https://developers.google.com/search/docs/appearance/snippet' }] }, { title: 'Single H1 with proper hierarchy', description: 'One H1 per page with primary keyword. Use H2-H6 for subsections. Never skip heading levels. Headings should create a logical outline.', standard: 'SEO & Accessibility Standards', priority: 'high', resources: [{ label: 'Heading Structure', url: 'https://www.w3.org/WAI/tutorials/page-structure/headings/' }] }, { title: 'Canonical URL on every page', description: 'Add to prevent duplicate content issues. Self-referencing canonicals are recommended.', standard: 'Google Duplicate Content', priority: 'high', resources: [{ label: 'Canonical Guide', url: 'https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls' }] }, { title: 'JSON-LD structured data', description: 'Add Organization, WebPage, BreadcrumbList schemas at minimum. Use Article, Product, FAQ, HowTo schemas where applicable. Validate with Google Rich Results Test.', standard: 'Schema.org, Google SD Guidelines', priority: 'high', resources: [{ label: 'Schema.org', url: 'https://schema.org' }, { label: 'Rich Results Test', url: 'https://search.google.com/test/rich-results' }] }, { title: 'Open Graph + Twitter Card meta', description: 'Add og:title, og:description, og:image for social sharing previews. Add twitter:card, twitter:title for X/Twitter.', standard: 'Open Graph Protocol', priority: 'medium', resources: [{ label: 'Open Graph Protocol', url: 'https://ogp.me' }] }, ], }, { id: 'L5', name: 'AI & Content Intelligence', icon: Brain, color: 'text-purple-400', bg: 'bg-purple-500/10 border-purple-500/20', lastUpdated: '2026-02-15', practices: [ { title: 'E-E-A-T signals (Experience, Expertise, Authority, Trust)', description: 'Show author credentials, publication dates, expert citations. Link to About and Contact pages. Display trust badges, reviews, and credentials.', standard: 'Google Quality Rater Guidelines', priority: 'critical', resources: [{ label: 'Google E-E-A-T', url: 'https://developers.google.com/search/docs/fundamentals/creating-helpful-content' }] }, { title: 'Content depth: 1000+ words for informational', description: 'Comprehensive content performs better in AI summaries and search. Cover topics thoroughly with examples, data, and expert insights.', standard: 'Content Quality Research', priority: 'high', resources: [{ label: 'Helpful Content Guide', url: 'https://developers.google.com/search/docs/fundamentals/creating-helpful-content' }] }, { title: 'Sentence readability (15-20 words avg)', description: 'Short sentences improve comprehension for both humans and AI. Use Flesch-Kincaid or similar readability scoring. Target 8th grade reading level.', standard: 'Plain Language Guidelines', priority: 'medium', resources: [{ label: 'Readability Guide', url: 'https://www.plainlanguage.gov/guidelines/' }] }, { title: 'FAQ and How-To schema for AI snippets', description: 'Implement FAQPage and HowTo structured data to appear in AI-generated answers and featured snippets.', standard: 'Google AI Overview Guidelines', priority: 'high', resources: [{ label: 'FAQ Schema', url: 'https://developers.google.com/search/docs/appearance/structured-data/faqpage' }] }, { title: 'Content freshness signals', description: 'Include publication and last-modified dates (article:published_time, article:modified_time). Update content regularly and reflect dates.', standard: 'Google Freshness Signals', priority: 'medium', resources: [{ label: 'Content Freshness', url: 'https://developers.google.com/search/docs/appearance/publication-dates' }] }, ], }, { id: 'L6', name: 'Accessibility (WCAG 2.2)', icon: Eye, color: 'text-cyan-400', bg: 'bg-cyan-500/10 border-cyan-500/20', lastUpdated: '2026-02-15', practices: [ { title: 'WCAG 2.2 Level AA compliance', description: 'Meet all Level A and AA success criteria. This covers perceivable, operable, understandable, and robust principles.', standard: 'W3C WCAG 2.2', priority: 'critical', resources: [{ label: 'WCAG 2.2 Quick Ref', url: 'https://www.w3.org/WAI/WCAG22/quickref/' }, { label: 'WAVE Tool', url: 'https://wave.webaim.org' }] }, { title: 'Alt text on all images', description: 'Add descriptive alt text to all informative images. Use alt="" (empty) for decorative images. Never use "image of..." or "picture of..." prefixes.', standard: 'WCAG 1.1.1', priority: 'critical', resources: [{ label: 'Alt Text Guide', url: 'https://www.w3.org/WAI/tutorials/images/' }] }, { title: 'ARIA landmarks and semantic HTML', description: 'Use
,