add all docs with styles

src/App.js

@@ -59,7 +59,9 @@ import PricingPage from './components/PricingPage';
 import { LanguageProvider } from './contexts/LanguageContext';
 import RTLProvider from './contexts/RTLProvider';
 import ScrollToTop from './components/ScrollToTop';
-import PolicyPage from './components/PolicyPage';
+import TermsOfUse from './components/TermofUse';
+import PrivacyPolicy from './components/PrivacyPolicy';
+import RefundPolicy from './components/RefundPolicy';
 
 // Импорт глобальных стилей для RTL
 import './styles/rtl.css';
@@ -73,7 +75,9 @@ function App() {
           <Routes>
             <Route path="/" element={<BufferLandingPage />} />
             <Route path="/pricing" element={<PricingPage />} />
-            <Route path="/policy" element={<PolicyPage />} />
+            <Route path="/termsOfUse" element={<TermsOfUse />} />
+            <Route path="/privacyPolicy" element={<PrivacyPolicy />} />
+            <Route path="/refundPolicy" element={<RefundPolicy />} />
           </Routes>
         </Router>
       </RTLProvider>

src/components/Footer.js

@@ -39,9 +39,23 @@ export default function Footer() {
         </a>
       );
     }
-    if (key === 'policy') {
+    if (key === 'termsOfUse') {
       return (
-        <CustomLink to="/policy" className="text-base text-gray-500 hover:text-gray-900">
+        <CustomLink to="/termsOfUse" className="text-base text-gray-500 hover:text-gray-900">
+          {value}
+        </CustomLink>
+      );
+    }
+    if (key === 'privacyPolicy') {
+      return (
+        <CustomLink to="/privacyPolicy" className="text-base text-gray-500 hover:text-gray-900">
+          {value}
+        </CustomLink>
+      );
+    }
+    if (key === 'refundPolicy') {
+      return (
+        <CustomLink to="/refundPolicy" className="text-base text-gray-500 hover:text-gray-900">
           {value}
         </CustomLink>
       );

src/components/PrivacyPolicy.js

@@ -0,0 +1,22 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom'; // Если вы используете React Router
+import policyData from '../policy.json';
+import Footer from './Footer';
+
+const PrivacyPolicy = () => {
+  return (
+    <>
+    <div className="termofuse-container">
+      <div className="back-button">
+        <Link to="/" className="back-link">← Back to main page</Link>
+      </div>
+      <h1>Privacy Policy</h1>
+      <div dangerouslySetInnerHTML={{ __html: policyData.privacypolicy }} />
+    </div>
+    <Footer />
+    </>
+  );
+};
+
+export default PrivacyPolicy;

src/components/RefundPolicy.js

@@ -0,0 +1,22 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom'; // Если вы используете React Router
+import policyData from '../policy.json';
+import Footer from './Footer';
+
+const RefundPolicy = () => {
+  return (
+    <>
+    <div className="termofuse-container">
+      <div className="back-button">
+        <Link to="/" className="back-link">← Back to main page</Link>
+      </div>
+      <h1>Refund Policy</h1>
+      <div dangerouslySetInnerHTML={{ __html: policyData.refund }} />
+    </div>
+    <Footer />
+    </>
+  );
+};
+
+export default RefundPolicy;

src/components/TermofUse.js

@@ -16,17 +16,21 @@
 import React from 'react';
 import { Link } from 'react-router-dom'; // Если вы используете React Router
 import policyData from '../policy.json';
+import Footer from './Footer';
 
-const PolicyPage = () => {
+const TermsOfUse = () => {
   return (
-    <div className="policy-container">
+    <>
+    <div className="termofuse-container">
       <div className="back-button">
         <Link to="/" className="back-link">← Back to main page</Link>
       </div>
-      <h1>Privacy Policy</h1>
+      <h1>Terms of Use</h1>
-      <div dangerouslySetInnerHTML={{ __html: policyData.privacyPolicy }} />
+      <div dangerouslySetInnerHTML={{ __html: policyData.termofuse }} />
     </div>
+    <Footer />
+    </>
   );
 };
 
-export default PolicyPage;
+export default TermsOfUse;

src/index.css

@@ -68,10 +68,11 @@
   font-family: 'Rubik', sans-serif !important;
 }
 
-.policy-container {
+
+.termofuse-container {
   white-space: pre-line;
 }
-.policy-container {
+.termofuse-container {
   font-family: 'Rubik', sans-serif; /* Ваш подключённый шрифт */
   line-height: 1.8; /* Интерлиньяж для удобства чтения */
   font-size: 18px; /* Увеличенный размер текста */
@@ -82,7 +83,7 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
 }
 
-.policy-container h1 {
+.termofuse-container h1 {
   color: #000; /* Цвет заголовка */
   font-size: 32px; /* Увеличенный размер заголовка */
   font-weight: 600; /* Толщина шрифта */
@@ -90,35 +91,38 @@
   text-align: center; /* Выравнивание по центру */
 }
 
-.policy-container h2, .policy-container h3 {
+.termofuse-container h2, .termofuse-container h3 {
   color: #555; /* Цвет подзаголовков */
   font-size: 24px; /* Увеличенный размер подзаголовков */
   margin-top: 25px; /* Отступ сверху */
   margin-bottom: 15px; /* Отступ снизу */
 }
 
-.policy-container p {
+.termofuse-container p {
   font-size: 18px; /* Размер текста */
   margin-bottom: 20px; /* Увеличенный отступ снизу */
 }
 
-.policy-container ul {
+.termofuse-container ul {
   margin-left: 25px; /* Увеличенный отступ для списков */
   list-style-type: disc; /* Стилизация маркеров */
 }
 
-.policy-container li {
+.termofuse-container li {
   margin-bottom: 12px; /* Отступ между элементами списка */
 }
 
-.policy-container a {
+.termofuse-container a {
   color: #007bff; /* Цвет ссылок */
   text-decoration: none; /* Убираем подчёркивание */
 }
 
-.policy-container a:hover {
+.termofuse-container a:hover {
   text-decoration: underline; /* Подчёркивание при наведении */
 }
+
+
+
 /* 
 .pricing-container {
   font-family: Arial, sans-serif;

src/translations.json

@@ -637,7 +637,9 @@
           "links": {
             "pricing": "Prices",
             "documentation": "Feedback",
-            "policy": "Policy"
+            "termsOfUse": "Terms of Use",
+            "privacyPolicy": "Privacy Policy",
+            "refundPolicy": "Refund Policy"
           }
         },
         "contacts": {
@@ -671,7 +673,9 @@
           "links": {
             "pricing": "الأسعار",
             "documentation": "التواصل",
-            "policy": "السياسة"
+            "termsOfUse": "شروط الاستخدام",
+            "privacyPolicy": "سياسة الخصوصية",
+            "refundPolicy": "سياسة الإسترجاع"
           }
         },
         "contacts": {