Merge pull request #442 from Sawan-Kushwah/page/termsOfUse

Added terms of use for glassy UI 🚀✨
Jaishree2310 · Nov 9, 2024 · c82f7c9 · c82f7c9
2 parents c425647 + 3d947fc
commit c82f7c9
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -43,6 +43,7 @@ import Statistic from './components/StatisticDetails';
 import GalleryDetailsPage from './components/GalleryDetailsPage';
 import SpinnerDetailsPage from './components/SpinnerDetailsPage';
 import ProductCardDetailsPage from './components/ProductCardDetailsPage';
+import { TermsOfUse } from './components/TermsOfUse';
 
 const ThemeToggle: React.FC = () => {
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
@@ -112,6 +113,7 @@ const App: React.FC = () => {
         <Route path='/spinner' element={<SpinnerDetailsPage />} />
         <Route path='/product-details' element={<ProductCardDetailsPage />} />
         <Route path='/gallery-details' element={<GalleryDetailsPage />} />
+        <Route path='/termsOfUse' element={<TermsOfUse />} />
         <Route path='*' element={<NotFoundPage />} />
       </Routes>
       <ConditionalFooter />

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,8 +1,35 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import GoogleTranslate from './GoogleTranslator';
-
+import { FormEvent } from 'react';
 const Footer: React.FC = () => {
+  const [name, setName] = useState<string>('');
+  const [email, setEmail] = useState<string>('');
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    console.log(name + ' ' + email);
+    // try {
+    //   const response = await fetch("http://localhost:5000/api/newsletter/subscribe", {
+    //     method: "POST",
+    //     headers: {
+    //       "Content-Type": "application/json",
+    //     },
+    //     body: JSON.stringify({ name, email }),
+    //   });
+
+    //   if (response.ok) {
+    //     alert("Subscription successful!");
+    //     setName("");
+    //     setEmail("");
+    //   } else {
+    //     alert("Failed to subscribe.");
+    //   }
+    // } catch (error) {
+    //   alert("An error occurred. Please try again.");
+    // }
+  };
+
   return (
     <>
       <footer className='glass-footer'>
@@ -24,6 +51,9 @@ const Footer: React.FC = () => {
             <Link to='/about' className='footer-link'>
               About
             </Link>
+            <Link to='/termsOfUse' className='footer-link'>
+              Terms Of Use
+            </Link>
             <GoogleTranslate />
           </div>
         </div>

diff --git a/src/components/TermsOfUse.tsx b/src/components/TermsOfUse.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import Footer from './Footer';
+
+export const TermsOfUse: React.FC = () => {
+  return (
+    <>
+      <div className='bg-gray-50 dark:bg-gray-900 py-20'>
+        <div className='max-w-4xl mx-auto p-8 bg-white dark:bg-gray-800 shadow-md rounded-lg glass-effect'>
+          <h1 className='text-4xl font-bold text-center text-blue-600 dark:text-blue-300 mb-6'>
+            <h1 className='text-white text-4xl font-bold'>
+              <span className='text-blue-400'>Glass</span>UI
+            </h1>{' '}
+            Terms of Use
+          </h1>
+
+          {/* Acceptance of Terms */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              1. Acceptance of Terms
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              By accessing or using GlassyUI-Components, you agree to abide by
+              these Terms. If you disagree with any part of these terms, please
+              refrain from using this library.
+            </p>
+          </section>
+
+          {/* User Obligations */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              2. User Obligations
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              Users must use the components responsibly, providing proper
+              attribution as required. Redistribution without modification is
+              prohibited.
+            </p>
+          </section>
+
+          {/* Intellectual Property */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              3. Intellectual Property Rights
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              GlassyUI-Components and its designs are the intellectual property
+              of the creators and contributors.
+            </p>
+          </section>
+
+          {/* Limitation of Liability */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              4. Limitation of Liability
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              We are not liable for any damages arising from the use or misuse
+              of GlassyUI-Components.
+            </p>
+          </section>
+
+          {/* Termination */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              5. Termination
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              We reserve the right to terminate access to GlassyUI-Components
+              for users who violate these Terms.
+            </p>
+          </section>
+
+          {/* Modification of Terms */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              6. Modification of Terms
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              We reserve the right to modify these Terms at any time. Changes
+              will be announced through our GitHub repository or other official
+              channels.
+            </p>
+          </section>
+
+          {/* Privacy Policy */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              7. Privacy Policy
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              We respect your privacy. Any data collected is handled according
+              to our Privacy Policy, accessible through our main website.
+            </p>
+          </section>
+
+          {/* Third-Party Links */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              8. Third-Party Links
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              Our library may contain links to third-party websites or services.
+              We are not responsible for the content, policies, or practices of
+              these external sites.
+            </p>
+          </section>
+
+          {/* User-Generated Content */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              9. User-Generated Content
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              Any contributions or modifications made to GlassyUI-Components are
+              welcome but must align with our community guidelines and
+              open-source policies.
+            </p>
+          </section>
+
+          {/* Governing Law */}
+          <section className='mb-8'>
+            <h2 className='text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 border-b-2 border-blue-500 pb-2'>
+              10. Governing Law
+            </h2>
+            <p className='text-gray-700 dark:text-gray-300'>
+              These Terms are governed by and construed in accordance with the
+              applicable intellectual property laws and open-source policies.
+            </p>
+          </section>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};