SEO оптимизация

src/App.tsx

@@ -1,17 +1,17 @@
-// Import styles of packages that you've installed.
-// All packages except `@mantine/hooks` require styles imports
 import '@mantine/core/styles.css';
 
 import { MantineProvider } from '@mantine/core';
 import { HeroTitle } from './components/HeroTitle/HeroTitle';
 import { DownloadCenter } from './components/DownloadCenter/DownloadCenter';
 import { FeaturesGrid } from './components/FeaturesGrid/FeaturesGrid';
+import { SEO } from './components/SEO/SEO';
 import './style.css'
 import { MessageSteps } from './components/MessageSteps/MessageSteps';
 
 
 export default function App() {
   return <MantineProvider>
+    <SEO />
     <HeroTitle></HeroTitle>
     <FeaturesGrid></FeaturesGrid>
     <MessageSteps></MessageSteps>

src/components/SEO/SEO.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+
+interface SEOProps {
+  title?: string;
+  description?: string;
+  ogImage?: string;
+  keywords?: string;
+}
+
+export function SEO({ 
+  title = 'Rosetta - Secure Messaging for Everyone',
+  description = 'End-to-end encrypted messaging app with military-grade security. Download for macOS, Windows, Linux.',
+  ogImage = '/og-image.png',
+  keywords = 'secure messaging, encrypted chat, private messenger'
+}: SEOProps) {
+  useEffect(() => {
+    // Update title
+    document.title = title;
+    
+    // Update meta tags
+    updateMetaTag('name', 'description', description);
+    updateMetaTag('name', 'keywords', keywords);
+    updateMetaTag('property', 'og:title', title);
+    updateMetaTag('property', 'og:description', description);
+    updateMetaTag('property', 'og:image', ogImage);
+    updateMetaTag('name', 'twitter:title', title);
+    updateMetaTag('name', 'twitter:description', description);
+    updateMetaTag('name', 'twitter:image', ogImage);
+  }, [title, description, ogImage, keywords]);
+
+  return null;
+}
+
+function updateMetaTag(attr: string, name: string, content: string) {
+  let element = document.querySelector(`meta[${attr}="${name}"]`);
+  
+  if (!element) {
+    element = document.createElement('meta');
+    element.setAttribute(attr, name);
+    document.head.appendChild(element);
+  }
+  
+  element.setAttribute('content', content);
+}