feat: Add environment configuration, ESLint setup, GitHub Actions deployment workflow, comprehensive API documentation, Jest testing configuration, and optimized Vite setup; implement AI model lazy loading and SEO components for improved performance and user experience

src/components/SEO/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Helmet } from 'react-helmet-async'
+
+interface SEOProps {
+  title?: string
+  description?: string
+  keywords?: string[]
+  image?: string
+  url?: string
+  type?: 'website' | 'article' | 'organization'
+}
+
+export const SEO: React.FC<SEOProps> = ({
+  title = 'Miracles In Motion - Supporting Students in Need',
+  description = 'A 501(c)3 non-profit providing school supplies, clothing, and emergency assistance to students and families in need.',
+  keywords = ['nonprofit', 'charity', '501c3', 'student assistance', 'school supplies', 'donations'],
+  image = 'https://miraclesinmotion.org/og-image.png',
+  url = 'https://miraclesinmotion.org',
+  type = 'website'
+}) => {
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    "name": "Miracles In Motion",
+    "description": description,
+    "url": url,
+    "logo": "https://miraclesinmotion.org/logo.png",
+    "contactPoint": {
+      "@type": "ContactPoint",
+      "telephone": "+1-555-123-4567",
+      "contactType": "Customer Service"
+    },
+    "sameAs": [
+      "https://facebook.com/miraclesinmotion",
+      "https://instagram.com/miraclesinmotion"
+    ]
+  }
+
+  return (
+    <Helmet>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <meta name="keywords" content={keywords.join(', ')} />
+      
+      {/* Open Graph */}
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
+      <meta property="og:url" content={url} />
+      <meta property="og:type" content={type} />
+      
+      {/* Twitter Card */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={image} />
+      
+      {/* Structured Data */}
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+      
+      {/* Additional Meta Tags */}
+      <meta name="robots" content="index, follow" />
+      <meta name="author" content="Miracles In Motion" />
+      <link rel="canonical" href={url} />
+    </Helmet>
+  )
+}