Hugging Face's logo

Spaces:
MGZON
/
server
Running

App Files Community
ibrahimlasfar commited on
Commit
66e9737
·
1 Parent(s): d2b02c4

Redesign privacy and terms pages with modern UI

Browse files
Files changed (2) hide show
  1. views/privacy.ejs +130 -48
  2. views/terms.ejs +133 -45
views/privacy.ejs CHANGED
@@ -2,77 +2,159 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Privacy Policy - Portfolio API</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
  <link rel="icon" type="image/png" href="/images/logo.png">
10
  <style>
 
 
 
 
 
 
 
 
 
 
 
11
  .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
12
- .card-hover { transition: all 0.3s ease; }
13
- .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
 
 
 
 
 
 
 
 
 
 
 
14
  </style>
15
  </head>
16
- <body class="bg-gray-50">
17
- <nav class="bg-white shadow-lg sticky top-0 z-50">
 
 
18
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
19
- <div class="flex justify-between items-center h-16">
20
  <div class="flex items-center space-x-3">
21
- <img src="/images/logo.png" alt="Logo" class="w-10 h-10 rounded-lg">
22
- <h1 class="text-xl font-bold gradient-bg bg-clip-text text-transparent">Portfolio API</h1>
23
  </div>
24
- <div class="flex items-center space-x-4">
25
- <a href="/" class="text-gray-600 hover:text-purple-600 transition">Home</a>
26
- <a href="/api-docs" class="text-gray-600 hover:text-purple-600 transition">API Docs</a>
 
 
27
  </div>
28
  </div>
29
  </div>
30
  </nav>
31
 
32
- <div class="max-w-4xl mx-auto px-4 py-16">
33
- <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
34
- <h1 class="text-3xl font-bold text-gray-800 mb-6">Privacy Policy</h1>
35
- <p class="text-gray-500 mb-4">Last updated: April 2, 2026</p>
36
-
37
- <div class="space-y-6 text-gray-600">
38
- <section>
39
- <h2 class="text-xl font-semibold text-gray-800 mb-3">1. Information We Collect</h2>
40
- <p>We collect information you provide directly to us, such as when you create an account, update your profile, or use our API services. This may include:</p>
41
- <ul class="list-disc list-inside mt-2 ml-4">
42
- <li>Name and email address</li>
43
- <li>Profile information (avatar, bio, skills)</li>
44
- <li>Project data you submit</li>
45
- <li>OAuth credentials from Google, Facebook, or GitHub</li>
46
- </ul>
47
- </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
 
49
- <section>
50
- <h2 class="text-xl font-semibold text-gray-800 mb-3">2. How We Use Your Information</h2>
51
- <p>We use the information we collect to:</p>
52
- <ul class="list-disc list-inside mt-2 ml-4">
53
- <li>Provide, maintain, and improve our API services</li>
54
- <li>Authenticate your identity and manage your account</li>
55
- <li>Respond to your comments and questions</li>
56
- <li>Send you technical notices and support messages</li>
57
- </ul>
58
- </section>
 
 
 
 
 
 
59
 
60
- <section>
61
- <h2 class="text-xl font-semibold text-gray-800 mb-3">3. Data Security</h2>
62
- <p>We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.</p>
63
- </section>
 
 
 
 
 
 
64
 
65
- <section>
66
- <h2 class="text-xl font-semibold text-gray-800 mb-3">4. Contact Us</h2>
67
- <p>If you have any questions about this Privacy Policy, please contact us at: <a href="mailto:marklasfar@gmail.com" class="text-purple-600 hover:underline">marklasfar@gmail.com</a></p>
68
- </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  </div>
70
  </div>
71
  </div>
72
 
73
- <footer class="bg-gray-800 text-white py-6 mt-8">
74
- <div class="text-center text-gray-400 text-sm">
75
- <p>&copy; 2026 Ibrahim Al-Asfar. All rights reserved.</p>
 
 
 
 
 
 
 
 
 
 
 
76
  </div>
77
  </footer>
78
  </body>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
6
  <title>Privacy Policy - Portfolio API</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
  <link rel="icon" type="image/png" href="/images/logo.png">
10
  <style>
11
+ * { margin: 0; padding: 0; box-sizing: border-box; }
12
+ @keyframes fadeInUp {
13
+ from { opacity: 0; transform: translateY(30px); }
14
+ to { opacity: 1; transform: translateY(0); }
15
+ }
16
+ @keyframes float {
17
+ 0%, 100% { transform: translateY(0px); }
18
+ 50% { transform: translateY(-10px); }
19
+ }
20
+ .animate-fadeInUp { animation: fadeInUp 0.6s ease-out; }
21
+ .animate-float { animation: float 3s ease-in-out infinite; }
22
  .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
23
+ .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
24
+ .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
25
+ .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
26
+ .logo-img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
27
+
28
+ @media (max-width: 640px) {
29
+ .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
30
+ .py-16 { padding-top: 2rem; padding-bottom: 2rem; }
31
+ .text-5xl { font-size: 2rem; }
32
+ .text-3xl { font-size: 1.5rem; }
33
+ .text-xl { font-size: 1rem; }
34
+ .h-16 { height: auto; padding: 0.5rem 0; }
35
+ }
36
  </style>
37
  </head>
38
+ <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
39
+
40
+ <!-- Navigation -->
41
+ <nav class="bg-white/90 backdrop-blur-md shadow-lg sticky top-0 z-50">
42
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
43
+ <div class="flex flex-wrap justify-between items-center py-2 md:py-0 md:h-16">
44
  <div class="flex items-center space-x-3">
45
+ <img src="/images/logo.png" alt="Logo" class="logo-img">
46
+ <h1 class="text-lg md:text-xl font-bold gradient-text">Portfolio API</h1>
47
  </div>
48
+ <div class="flex items-center space-x-3 mt-2 md:mt-0">
49
+ <a href="/" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">Home</a>
50
+ <a href="/api-docs" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">API Docs</a>
51
+ <a href="/privacy" class="text-purple-600 font-medium px-2 py-1">Privacy</a>
52
+ <a href="/terms" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">Terms</a>
53
  </div>
54
  </div>
55
  </div>
56
  </nav>
57
 
58
+ <!-- Hero Section -->
59
+ <div class="relative overflow-hidden">
60
+ <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-10"></div>
61
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
62
+ <div class="text-center animate-fadeInUp">
63
+ <div class="inline-flex items-center justify-center p-2 bg-green-100 rounded-full mb-4">
64
+ <i class="fas fa-shield-alt text-green-600 mr-2"></i>
65
+ <span class="text-green-600 text-sm font-medium">Your Privacy Matters</span>
66
+ </div>
67
+ <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">Privacy Policy</h1>
68
+ <p class="text-gray-600 max-w-2xl mx-auto">Last updated: April 2, 2026</p>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Content Section -->
74
+ <div class="max-w-4xl mx-auto px-4 py-8">
75
+ <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 card-hover animate-fadeInUp">
76
+ <div class="prose prose-purple max-w-none">
77
+ <div class="space-y-8">
78
+ <!-- Section 1 -->
79
+ <div class="border-b border-gray-100 pb-6">
80
+ <div class="flex items-center gap-3 mb-4">
81
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center">
82
+ <i class="fas fa-database text-white text-sm"></i>
83
+ </div>
84
+ <h2 class="text-2xl font-bold text-gray-800">1. Information We Collect</h2>
85
+ </div>
86
+ <p class="text-gray-600 leading-relaxed">We collect information you provide directly to us, such as when you create an account, update your profile, or use our API services. This may include:</p>
87
+ <ul class="mt-3 space-y-2">
88
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Name and email address</li>
89
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Profile information (avatar, bio, skills)</li>
90
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Project data you submit</li>
91
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> OAuth credentials from Google, Facebook, GitHub, or MGZon</li>
92
+ </ul>
93
+ </div>
94
 
95
+ <!-- Section 2 -->
96
+ <div class="border-b border-gray-100 pb-6">
97
+ <div class="flex items-center gap-3 mb-4">
98
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center">
99
+ <i class="fas fa-chart-line text-white text-sm"></i>
100
+ </div>
101
+ <h2 class="text-2xl font-bold text-gray-800">2. How We Use Your Information</h2>
102
+ </div>
103
+ <p class="text-gray-600 leading-relaxed">We use the information we collect to:</p>
104
+ <ul class="mt-3 space-y-2">
105
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Provide, maintain, and improve our API services</li>
106
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Authenticate your identity and manage your account</li>
107
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Respond to your comments and questions</li>
108
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Send you technical notices and support messages</li>
109
+ </ul>
110
+ </div>
111
 
112
+ <!-- Section 3 -->
113
+ <div class="border-b border-gray-100 pb-6">
114
+ <div class="flex items-center gap-3 mb-4">
115
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center">
116
+ <i class="fas fa-lock text-white text-sm"></i>
117
+ </div>
118
+ <h2 class="text-2xl font-bold text-gray-800">3. Data Security</h2>
119
+ </div>
120
+ <p class="text-gray-600 leading-relaxed">We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. Your data is encrypted and stored securely.</p>
121
+ </div>
122
 
123
+ <!-- Section 4 -->
124
+ <div>
125
+ <div class="flex items-center gap-3 mb-4">
126
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center">
127
+ <i class="fas fa-envelope text-white text-sm"></i>
128
+ </div>
129
+ <h2 class="text-2xl font-bold text-gray-800">4. Contact Us</h2>
130
+ </div>
131
+ <p class="text-gray-600 leading-relaxed">If you have any questions about this Privacy Policy, please contact us at:</p>
132
+ <div class="mt-4 p-4 bg-gray-50 rounded-xl">
133
+ <a href="mailto:marklasfar@gmail.com" class="text-purple-600 hover:text-purple-700 font-medium flex items-center gap-2">
134
+ <i class="fas fa-envelope"></i>
135
+ marklasfar@gmail.com
136
+ </a>
137
+ </div>
138
+ </div>
139
+ </div>
140
  </div>
141
  </div>
142
  </div>
143
 
144
+ <!-- Footer -->
145
+ <footer class="bg-gray-800 text-white py-8 mt-8">
146
+ <div class="max-w-7xl mx-auto px-4 text-center">
147
+ <p class="text-gray-400 text-sm">&copy; 2026 Ibrahim Al-Asfar. All rights reserved.</p>
148
+ <p class="text-gray-500 text-xs mt-2">Built with ❤️ using Node.js, Express, MongoDB & TailwindCSS</p>
149
+ <div class="flex flex-wrap justify-center gap-3 mt-4">
150
+ <a href="/privacy" class="text-gray-500 hover:text-purple-400 text-xs transition">Privacy Policy</a>
151
+ <span class="text-gray-600 text-xs">•</span>
152
+ <a href="/terms" class="text-gray-500 hover:text-purple-400 text-xs transition">Terms of Service</a>
153
+ <span class="text-gray-600 text-xs">•</span>
154
+ <a href="/sitemap.xml" class="text-gray-500 hover:text-purple-400 text-xs transition">Sitemap</a>
155
+ <span class="text-gray-600 text-xs">•</span>
156
+ <a href="/api-docs" class="text-gray-500 hover:text-purple-400 text-xs transition">API Docs</a>
157
+ </div>
158
  </div>
159
  </footer>
160
  </body>
views/terms.ejs CHANGED
@@ -2,75 +2,163 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Terms of Service - Portfolio API</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
  <link rel="icon" type="image/png" href="/images/logo.png">
10
  <style>
 
 
 
 
 
 
 
 
 
 
 
11
  .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
12
- .card-hover { transition: all 0.3s ease; }
13
- .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
 
 
 
 
 
 
 
 
 
 
 
14
  </style>
15
  </head>
16
- <body class="bg-gray-50">
17
- <nav class="bg-white shadow-lg sticky top-0 z-50">
 
 
18
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
19
- <div class="flex justify-between items-center h-16">
20
  <div class="flex items-center space-x-3">
21
- <img src="/images/logo.png" alt="Logo" class="w-10 h-10 rounded-lg">
22
- <h1 class="text-xl font-bold gradient-bg bg-clip-text text-transparent">Portfolio API</h1>
23
  </div>
24
- <div class="flex items-center space-x-4">
25
- <a href="/" class="text-gray-600 hover:text-purple-600 transition">Home</a>
26
- <a href="/api-docs" class="text-gray-600 hover:text-purple-600 transition">API Docs</a>
 
 
27
  </div>
28
  </div>
29
  </div>
30
  </nav>
31
 
32
- <div class="max-w-4xl mx-auto px-4 py-16">
33
- <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
34
- <h1 class="text-3xl font-bold text-gray-800 mb-6">Terms of Service</h1>
35
- <p class="text-gray-500 mb-4">Last updated: April 2, 2026</p>
36
-
37
- <div class="space-y-6 text-gray-600">
38
- <section>
39
- <h2 class="text-xl font-semibold text-gray-800 mb-3">1. Acceptance of Terms</h2>
40
- <p>By accessing or using the Portfolio API, you agree to be bound by these Terms of Service. If you disagree with any part of the terms, you may not access the service.</p>
41
- </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
 
43
- <section>
44
- <h2 class="text-xl font-semibold text-gray-800 mb-3">2. API Usage</h2>
45
- <p>You agree to use the API only for lawful purposes and in accordance with these terms. You are responsible for:</p>
46
- <ul class="list-disc list-inside mt-2 ml-4">
47
- <li>Maintaining the security of your account credentials</li>
48
- <li>All activities that occur under your account</li>
49
- <li>Complying with all applicable laws and regulations</li>
50
- </ul>
51
- </section>
 
 
 
 
 
 
52
 
53
- <section>
54
- <h2 class="text-xl font-semibold text-gray-800 mb-3">3. Rate Limits</h2>
55
- <p>The API is subject to rate limits to ensure fair usage. Excessive usage may result in temporary suspension of access.</p>
56
- </section>
 
 
 
 
 
 
57
 
58
- <section>
59
- <h2 class="text-xl font-semibold text-gray-800 mb-3">4. Changes to Terms</h2>
60
- <p>We reserve the right to modify these terms at any time. We will notify users of any material changes via email or through the API documentation.</p>
61
- </section>
 
 
 
 
 
 
62
 
63
- <section>
64
- <h2 class="text-xl font-semibold text-gray-800 mb-3">5. Contact</h2>
65
- <p>Questions about the Terms of Service should be sent to: <a href="mailto:marklasfar@gmail.com" class="text-purple-600 hover:underline">marklasfar@gmail.com</a></p>
66
- </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  </div>
68
  </div>
69
  </div>
70
 
71
- <footer class="bg-gray-800 text-white py-6 mt-8">
72
- <div class="text-center text-gray-400 text-sm">
73
- <p>&copy; 2026 Ibrahim Al-Asfar. All rights reserved.</p>
 
 
 
 
 
 
 
 
 
 
 
74
  </div>
75
  </footer>
76
  </body>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
6
  <title>Terms of Service - Portfolio API</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
  <link rel="icon" type="image/png" href="/images/logo.png">
10
  <style>
11
+ * { margin: 0; padding: 0; box-sizing: border-box; }
12
+ @keyframes fadeInUp {
13
+ from { opacity: 0; transform: translateY(30px); }
14
+ to { opacity: 1; transform: translateY(0); }
15
+ }
16
+ @keyframes float {
17
+ 0%, 100% { transform: translateY(0px); }
18
+ 50% { transform: translateY(-10px); }
19
+ }
20
+ .animate-fadeInUp { animation: fadeInUp 0.6s ease-out; }
21
+ .animate-float { animation: float 3s ease-in-out infinite; }
22
  .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
23
+ .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
24
+ .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
25
+ .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
26
+ .logo-img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
27
+
28
+ @media (max-width: 640px) {
29
+ .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
30
+ .py-16 { padding-top: 2rem; padding-bottom: 2rem; }
31
+ .text-5xl { font-size: 2rem; }
32
+ .text-3xl { font-size: 1.5rem; }
33
+ .text-xl { font-size: 1rem; }
34
+ .h-16 { height: auto; padding: 0.5rem 0; }
35
+ }
36
  </style>
37
  </head>
38
+ <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
39
+
40
+ <!-- Navigation -->
41
+ <nav class="bg-white/90 backdrop-blur-md shadow-lg sticky top-0 z-50">
42
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
43
+ <div class="flex flex-wrap justify-between items-center py-2 md:py-0 md:h-16">
44
  <div class="flex items-center space-x-3">
45
+ <img src="/images/logo.png" alt="Logo" class="logo-img">
46
+ <h1 class="text-lg md:text-xl font-bold gradient-text">Portfolio API</h1>
47
  </div>
48
+ <div class="flex items-center space-x-3 mt-2 md:mt-0">
49
+ <a href="/" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">Home</a>
50
+ <a href="/api-docs" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">API Docs</a>
51
+ <a href="/privacy" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">Privacy</a>
52
+ <a href="/terms" class="text-purple-600 font-medium px-2 py-1">Terms</a>
53
  </div>
54
  </div>
55
  </div>
56
  </nav>
57
 
58
+ <!-- Hero Section -->
59
+ <div class="relative overflow-hidden">
60
+ <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-10"></div>
61
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
62
+ <div class="text-center animate-fadeInUp">
63
+ <div class="inline-flex items-center justify-center p-2 bg-blue-100 rounded-full mb-4">
64
+ <i class="fas fa-gavel text-blue-600 mr-2"></i>
65
+ <span class="text-blue-600 text-sm font-medium">Legal Agreement</span>
66
+ </div>
67
+ <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">Terms of Service</h1>
68
+ <p class="text-gray-600 max-w-2xl mx-auto">Last updated: April 2, 2026</p>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Content Section -->
74
+ <div class="max-w-4xl mx-auto px-4 py-8">
75
+ <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 card-hover animate-fadeInUp">
76
+ <div class="prose prose-purple max-w-none">
77
+ <div class="space-y-8">
78
+ <!-- Section 1 -->
79
+ <div class="border-b border-gray-100 pb-6">
80
+ <div class="flex items-center gap-3 mb-4">
81
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center">
82
+ <i class="fas fa-check-circle text-white text-sm"></i>
83
+ </div>
84
+ <h2 class="text-2xl font-bold text-gray-800">1. Acceptance of Terms</h2>
85
+ </div>
86
+ <p class="text-gray-600 leading-relaxed">By accessing or using the Portfolio API, you agree to be bound by these Terms of Service. If you disagree with any part of the terms, you may not access the service.</p>
87
+ </div>
88
 
89
+ <!-- Section 2 -->
90
+ <div class="border-b border-gray-100 pb-6">
91
+ <div class="flex items-center gap-3 mb-4">
92
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center">
93
+ <i class="fas fa-code text-white text-sm"></i>
94
+ </div>
95
+ <h2 class="text-2xl font-bold text-gray-800">2. API Usage</h2>
96
+ </div>
97
+ <p class="text-gray-600 leading-relaxed">You agree to use the API only for lawful purposes and in accordance with these terms. You are responsible for:</p>
98
+ <ul class="mt-3 space-y-2">
99
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Maintaining the security of your account credentials</li>
100
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> All activities that occur under your account</li>
101
+ <li class="flex items-center gap-2 text-gray-600"><i class="fas fa-check-circle text-green-500 text-sm"></i> Complying with all applicable laws and regulations</li>
102
+ </ul>
103
+ </div>
104
 
105
+ <!-- Section 3 -->
106
+ <div class="border-b border-gray-100 pb-6">
107
+ <div class="flex items-center gap-3 mb-4">
108
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center">
109
+ <i class="fas fa-tachometer-alt text-white text-sm"></i>
110
+ </div>
111
+ <h2 class="text-2xl font-bold text-gray-800">3. Rate Limits</h2>
112
+ </div>
113
+ <p class="text-gray-600 leading-relaxed">The API is subject to rate limits to ensure fair usage. Excessive usage may result in temporary suspension of access. We reserve the right to modify rate limits at any time.</p>
114
+ </div>
115
 
116
+ <!-- Section 4 -->
117
+ <div class="border-b border-gray-100 pb-6">
118
+ <div class="flex items-center gap-3 mb-4">
119
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center">
120
+ <i class="fas fa-sync-alt text-white text-sm"></i>
121
+ </div>
122
+ <h2 class="text-2xl font-bold text-gray-800">4. Changes to Terms</h2>
123
+ </div>
124
+ <p class="text-gray-600 leading-relaxed">We reserve the right to modify these terms at any time. We will notify users of any material changes via email or through the API documentation. Your continued use of the service constitutes acceptance of the modified terms.</p>
125
+ </div>
126
 
127
+ <!-- Section 5 -->
128
+ <div>
129
+ <div class="flex items-center gap-3 mb-4">
130
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center">
131
+ <i class="fas fa-envelope text-white text-sm"></i>
132
+ </div>
133
+ <h2 class="text-2xl font-bold text-gray-800">5. Contact</h2>
134
+ </div>
135
+ <p class="text-gray-600 leading-relaxed">Questions about the Terms of Service should be sent to:</p>
136
+ <div class="mt-4 p-4 bg-gray-50 rounded-xl">
137
+ <a href="mailto:marklasfar@gmail.com" class="text-purple-600 hover:text-purple-700 font-medium flex items-center gap-2">
138
+ <i class="fas fa-envelope"></i>
139
+ marklasfar@gmail.com
140
+ </a>
141
+ </div>
142
+ </div>
143
+ </div>
144
  </div>
145
  </div>
146
  </div>
147
 
148
+ <!-- Footer -->
149
+ <footer class="bg-gray-800 text-white py-8 mt-8">
150
+ <div class="max-w-7xl mx-auto px-4 text-center">
151
+ <p class="text-gray-400 text-sm">&copy; 2026 Ibrahim Al-Asfar. All rights reserved.</p>
152
+ <p class="text-gray-500 text-xs mt-2">Built with ❤️ using Node.js, Express, MongoDB & TailwindCSS</p>
153
+ <div class="flex flex-wrap justify-center gap-3 mt-4">
154
+ <a href="/privacy" class="text-gray-500 hover:text-purple-400 text-xs transition">Privacy Policy</a>
155
+ <span class="text-gray-600 text-xs">•</span>
156
+ <a href="/terms" class="text-gray-500 hover:text-purple-400 text-xs transition">Terms of Service</a>
157
+ <span class="text-gray-600 text-xs">•</span>
158
+ <a href="/sitemap.xml" class="text-gray-500 hover:text-purple-400 text-xs transition">Sitemap</a>
159
+ <span class="text-gray-600 text-xs">•</span>
160
+ <a href="/api-docs" class="text-gray-500 hover:text-purple-400 text-xs transition">API Docs</a>
161
+ </div>
162
  </div>
163
  </footer>
164
  </body>