Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/AE-Hertz/scruter into branc…
Browse files Browse the repository at this point in the history 
…h5 (#531)
  • Loading branch information
@AE-Hertz
AE-Hertz authored Nov 9, 2024
1 parent 9b33148 commit a1a96b0
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 168 deletions.
113 changes: 113 additions & 0 deletions scruter-nextjs/app/(routes)/(footerPages)/terms/constant/constants.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import {
faUserCheck,
faShieldAlt,
faGavel,
faListAlt,
faLock,
faExternalLinkAlt,
faExclamationTriangle,
faEnvelope,
faLink,
} from '@fortawesome/free-solid-svg-icons';

export const MENU_ITEMS = [
{ id: 'acceptance', icon: faUserCheck, text: 'Acceptance of Terms' },
{
id: 'use-services',
icon: faShieldAlt,
text: 'Use of Platform and Services',
},
{ id: 'intellectual-property', icon: faGavel, text: 'Intellectual Property' },
{ id: 'postings', icon: faListAlt, text: 'Posting Guidelines' },
{ id: 'security', icon: faLock, text: 'Account Security' },
{ id: 'external-links', icon: faExternalLinkAlt, text: 'External Links' },
{
id: 'liability',
icon: faExclamationTriangle,
text: 'Limitation of Liability',
},
{ id: 'privacy', icon: faShieldAlt, text: 'Privacy Policy' },
{ id: 'changes', icon: faLink, text: 'Changes to Terms' },
{ id: 'termination', icon: faLock, text: 'Termination of Access' },
{ id: 'contact', icon: faEnvelope, text: 'Contact Information' },
];

export const TERMS_CONTENT = [
{
id: 'acceptance',
icon: faUserCheck,
title: 'Acceptance of Terms',
content:
'By accessing or using the Scruter platform, you acknowledge that you have read, understood, and agree to be bound by these Terms & Conditions. If you do not agree to these terms, you are advised to discontinue the use of our platform and any related services immediately. Your use of our platform constitutes acceptance of all policies, rules, and guidelines associated with Scruter.',
},
{
id: 'use-services',
icon: faShieldAlt,
title: 'Use of Platform and Services',
content:
'Scruter is designed to connect users within local communities, providing a marketplace for buying, selling, and exchanging goods and services. As a user, you agree to conduct all interactions and transactions in a manner that is lawful, ethical, and respectful. Unauthorized or harmful activity, including any form of fraud, will not be tolerated and may result in account suspension or termination.',
},
{
id: 'intellectual-property',
icon: faGavel,
title: 'Intellectual Property',
content:
'All materials on the Scruter platform, including logos, branding, text, images, and design elements, are the property of Scruter and are protected by copyright and intellectual property laws. Users are prohibited from using or reproducing any Scruter-owned content without explicit permission, as unauthorized use constitutes a violation of these terms.',
},
{
id: 'postings',
icon: faListAlt,
title: 'Posting Guidelines',
content:
'Users are solely responsible for the content they post on the Scruter platform. All posts must adhere to our guidelines, which prohibit spam, offensive language, inappropriate material, and any form of illegal content. Scruter reserves the right to remove content that does not comply with these guidelines and to take appropriate action against violators.',
},
{
id: 'security',
icon: faLock,
title: 'Account Security',
content:
'Account security is a shared responsibility. Users must take care to keep their login credentials secure and confidential. Scruter cannot be held responsible for unauthorized access to accounts caused by negligence or mishandling of personal information. Users should report any suspicious activity or security breaches promptly to our support team.',
},
{
id: 'external-links',
icon: faExternalLinkAlt,
title: 'External Links',
content:
'For your convenience, Scruter may provide links to third-party websites. However, we do not endorse or assume responsibility for the content, privacy practices, or other policies of these external sites. Users accessing third-party links do so at their own risk and should review the terms and policies of those sites independently.',
},
{
id: 'liability',
icon: faExclamationTriangle,
title: 'Limitation of Liability',
content:
'Scruter is not liable for any direct, indirect, incidental, or consequential damages arising from transactions conducted between users on the platform. Users are advised to proceed with caution and to verify information before engaging in any exchange. All transactions are conducted at the user’s own discretion and risk.',
},
{
id: 'privacy',
icon: faShieldAlt,
title: 'Privacy Policy',
content:
'Your privacy is important to us. Scruter’s Privacy Policy explains in detail how we collect, use, share, and protect your personal information. We encourage you to review our Privacy Policy to understand our practices and your rights regarding your personal data.',
},
{
id: 'changes',
icon: faLink,
title: 'Changes to Terms',
content:
'Scruter reserves the right to modify these Terms & Conditions at any time. Major changes will be communicated to users through notifications. However, continued use of the platform following any updates to these terms indicates your acceptance of those changes. We recommend reviewing these terms periodically to stay informed of any adjustments.',
},
{
id: 'termination',
icon: faLock,
title: 'Termination of Access',
content:
'Scruter reserves the right to suspend or terminate any user account that violates these Terms & Conditions. This includes, but is not limited to, the posting of prohibited content, engagement in fraudulent activities, or any behavior deemed detrimental to the platform’s community. Termination may occur without prior notice, depending on the severity of the violation.',
},
{
id: 'contact',
icon: faEnvelope,
title: 'Contact Information',
content:
'If you have questions or need further clarification on these Terms & Conditions, please feel free to reach out to our support team at [email protected]. We are here to assist with any inquiries related to our platform, policies, and services.',
},
];
249 changes: 81 additions & 168 deletions scruter-nextjs/app/(routes)/(footerPages)/terms/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,186 +1,99 @@
'use client';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faUserCheck,
faShieldAlt,
faGavel,
faListAlt,
faLock,
faExternalLinkAlt,
faExclamationTriangle,
faEnvelope,
faLink,
} from '@fortawesome/free-solid-svg-icons';
import { TERMS_CONTENT } from './constant/constants';
import '../../../globals.css';
import { useRef, useEffect } from 'react';

const TermsPage = () => {
const mainContentRef = useRef<HTMLDivElement>(null);

useEffect(() => {
const mainContent = mainContentRef.current;

// custom scroll behavior for large screens
if (mainContent && window.innerWidth >= 1024) {
const handleScroll = (event: WheelEvent) => {
event.preventDefault();
const newScrollTop = Math.max(0, mainContent.scrollTop + event.deltaY);
mainContent.scrollTo({ top: newScrollTop, behavior: 'auto' });
};

mainContent.addEventListener('wheel', handleScroll, { passive: false });
return () => mainContent.removeEventListener('wheel', handleScroll);
}
}, []);

return (
<div className="flex flex-col">
<div
id="progress-bar"
className="fixed top-0 left-0 h-1 bg-blue-600 z-50"
></div>
<div className="flex">
<aside className="sidebar w-1/4 bg-gradient-to-b from-blue-600 to-purple-600 text-white p-5 sticky top-0 h-screen">
<div className="min-h-screen bg-gray-900 text-gray-300 flex flex-col w-full overflow-hidden selection:bg-cyan-300 selection:text-cyan-900">
{/* Header Section */}
<header className="bg-custom-gradient dark:bg-dark-custom-gradient pt-20 pb-10 px-4 lg:pt-28 lg:pb-28 lg:px-10 text-start w-full">
<h1 className="text-3xl md:text-4xl lg:text-7xl font-bold mb-2 bg-clip-text text-transparent bg-text-gradient">
Terms of Service
</h1>
<p className="text-gray-200 text-sm md:text-lg">Published and effective on: April 30, {new Date().getFullYear()}</p>
</header>

<div className="flex flex-col lg:flex-row w-full h-full">
{/* Main Content */}
<main
ref={mainContentRef}
className="w-full lg:w-4/5 p-4 lg:p-8 bg-white dark:bg-black shadow-lg h-auto lg:h-[calc(100vh-160px)] overflow-y-auto lg:overflow-y-scroll scroll-smooth custom-scrollbar"
>
{TERMS_CONTENT.map(({ id, icon, title, content }) => (
<section id={id} key={id} className="mb-8">
<h3 className="text-xl md:text-2xl text-black dark:text-white flex items-center mb-2">
<FontAwesomeIcon icon={icon} className="mr-2 text-[#ff476b]" />
{title}
</h3>
<p className="text-gray-500 text-justify text-sm md:text-base">{content}</p>
</section>
))}
</main>

{/* Right Sidebar */}
<aside className="hidden lg:block w-1/5 p-6 bg-white dark:bg-black text-gray-400 sticky top-0 h-[calc(100vh-160px)]">
<h2 className="text-gray-600 text-xs uppercase font-semibold mb-4">On This Page</h2>
<ul>
{[
{
id: 'acceptance',
icon: faUserCheck,
text: 'Acceptance of Terms',
},
{
id: 'use-services',
icon: faShieldAlt,
text: 'Use of Platform and Services',
},
{
id: 'intellectual-property',
icon: faGavel,
text: 'Intellectual Property',
},
{ id: 'postings', icon: faListAlt, text: 'Posting Guidelines' },
{ id: 'security', icon: faLock, text: 'Account Security' },
{
id: 'external-links',
icon: faExternalLinkAlt,
text: 'External Links',
},
{
id: 'liability',
icon: faExclamationTriangle,
text: 'Limitation of Liability',
},
{ id: 'privacy', icon: faShieldAlt, text: 'Privacy Policy' },
{ id: 'changes', icon: faLink, text: 'Changes to Terms' },
{
id: 'termination',
icon: faLock,
text: 'Termination of Access',
},
{
id: 'contact',
icon: faEnvelope,
text: 'Contact Information',
},
].map(({ id, icon, text }) => (
<li key={id} className="mb-4">
<a
href={`#${id}`}
className="flex items-center text-white text-lg hover:text-gray-200 transition-colors duration-200"
{TERMS_CONTENT.map(({ id, title }) => (
<li key={id} className="mb-2">
<button
onClick={() => {
if (mainContentRef.current) {
const section = document.getElementById(id);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
}}
className="text-sm hover:text-black dark:hover:text-white transition-colors duration-200"
>
<FontAwesomeIcon icon={icon} className="mr-2" />
{text}
</a>
{title}
</button>
</li>
))}
</ul>
</aside>

<main className="main-content w-3/4 p-10 bg-white shadow-lg">
<div className="title-section text-center mb-8">
<h1 className="text-3xl text-blue-600 font-bold">
Terms and Conditions for Scruter
</h1>
<p className="text-gray-600 max-w-2xl mx-auto text-lg">
Welcome to Scruter, a platform for local classifieds where you can
buy, sell, and exchange services within your community. By
accessing and using Scruter, you agree to these Terms &
Conditions.
</p>
{/* Contribute Section */}
<div className="mt-8">
<h2 className="text-gray-600 text-xs uppercase font-semibold mb-2">Contribute</h2>
<ul>
<li>
<a href="https://github.com/swarooppatilx/scruter/issues/new?assignees=&labels=bug&projects=&template=bug.yml&title=%5BBUG%5D+" target='_blank' className="text-sm hover:text-black dark:hover:text-white transition-colors duration-200">
Report an issue
</a>
</li>
<li>
<a href="https://github.com/swarooppatilx/scruter/issues/new?assignees=&labels=enhancement&projects=&template=feature.yml&title=%5BFeat%5D" target='_blank' className="text-sm hover:text-black dark:hover:text-white transition-colors duration-200">
Request a feature
</a>
</li>
</ul>
</div>

{[
{
id: 'acceptance',
icon: faUserCheck,
title: 'Acceptance of Terms',
content:
'By using Scruter, you agree to these Terms & Conditions. If you do not accept any of these terms, please refrain from using our platform.',
},
{
id: 'use-services',
icon: faShieldAlt,
title: 'Use of Platform and Services',
content:
'Scruter provides a marketplace for users to connect locally for buying, selling, and exchanging services. Users agree to conduct all transactions legally and ethically.',
},
{
id: 'intellectual-property',
icon: faGavel,
title: 'Intellectual Property',
content:
'All content on Scruter, including logos and trademarks, is owned by Scruter and protected under copyright laws. Unauthorized use is prohibited.',
},
{
id: 'postings',
icon: faListAlt,
title: 'Posting Guidelines',
content:
'Users are responsible for the content they post and must ensure it complies with our guidelines, which prohibit spam, inappropriate content, and illegal activities.',
},
{
id: 'security',
icon: faLock,
title: 'Account Security',
content:
'Users must secure their accounts by keeping their login credentials private. Scruter is not responsible for any loss due to compromised accounts.',
},
{
id: 'external-links',
icon: faExternalLinkAlt,
title: 'External Links',
content:
'Scruter may include links to external websites. We are not responsible for content on these third-party sites.',
},
{
id: 'liability',
icon: faExclamationTriangle,
title: 'Limitation of Liability',
content:
'Scruter is not liable for any damages resulting from transactions between users. All transactions are at the users’ discretion.',
},
{
id: 'privacy',
icon: faShieldAlt,
title: 'Privacy Policy',
content:
'We respect your privacy. Please read our Privacy Policy to understand how we collect, use, and protect your information.',
},
{
id: 'changes',
icon: faLink,
title: 'Changes to Terms',
content:
'Scruter reserves the right to update these Terms & Conditions at any time. Users will be notified of significant changes, but continued use of the platform constitutes acceptance of any modifications.',
},
{
id: 'termination',
icon: faLock,
title: 'Termination of Access',
content:
'We reserve the right to suspend or terminate accounts for violations of our Terms & Conditions, including but not limited to posting prohibited content or engaging in fraudulent activities.',
},
{
id: 'contact',
icon: faEnvelope,
title: 'Contact Information',
content:
'If you have any questions about these Terms & Conditions, please contact us at [email protected].',
},
].map(({ id, icon, title, content }) => (
<section key={id} id={id} className="mt-8">
<h2 className="text-2xl text-gray-800 flex items-center border-l-4 border-blue-600 pl-2 mb-2">
<FontAwesomeIcon icon={icon} className="mr-2 text-purple-600" />
{title}
</h2>
<p className="text-gray-600 text-justify">{content}</p>
</section>
))}
</main>
</aside>
</div>
</div>
);
};

export default TermsPage;
export default TermsPage;
Loading

0 comments on commit a1a96b0

Please sign in to comment.