feat: Add Privacy and Terms pages and navigation

Introduces dedicated pages for Privacy Policy and Terms of Service, along with their corresponding navigation links in the footer. Updates the `App.tsx` to route to these new pages.

Also includes:
- Enhancements to Supabase client creation for server-side usage.
- Refactoring of state management in `lib/store.tsx` to include a new `Service` type and initial service data.
- Integration of the new `Service` type and management into the admin panel (`app/admin.tsx`).
- Display of services on the About page (`app/about.tsx`) with corresponding icons.

Author: ilramdhan

App.tsx

@@ -7,6 +7,8 @@ import ProjectDetailPage from './app/project-detail';
 import BlogPage from './app/blog';
 import BlogDetailPage from './app/blog-detail';
 import AboutPage from './app/about';
+import PrivacyPage from './app/privacy';
+import TermsPage from './app/terms';
 import { Toaster } from 'sonner';
 import { RouterProvider, useRouter } from './lib/router';
 import { StoreProvider, useStore } from './lib/store';
@@ -63,6 +65,8 @@ function AppContent() {
   if (path === '/projects') return <ProjectsPage />;
   if (path === '/blog') return <BlogPage />;
   if (path === '/about') return <AboutPage />;
+  if (path === '/privacy') return <PrivacyPage />;
+  if (path === '/terms') return <TermsPage />;
 
   // Dynamic Routes
   if (path.startsWith('/projects/')) {
@@ -91,4 +95,4 @@ export default function App() {
       <Toaster position="bottom-right" theme="system" />
     </div>
   );
-}
+}

app/about.tsx

@@ -1,11 +1,29 @@
 import React from 'react';
 import { useStore } from '../lib/store';
 import { Navbar } from '../components/Navbar';
-import { Download, MapPin, Briefcase, GraduationCap, Mail, Github, Linkedin, Twitter, Instagram, Youtube, Gamepad2, Phone } from 'lucide-react';
+import { Download, MapPin, Briefcase, GraduationCap, Mail, Github, Linkedin, Twitter, Instagram, Youtube, Code, Smartphone, Cloud, Terminal, Layout, Database, Zap } from 'lucide-react';
 import { motion } from 'framer-motion';
 
+const IconMap = {
+    code: Code,
+    smartphone: Smartphone,
+    cloud: Cloud,
+    terminal: Terminal,
+    layout: Layout,
+    database: Database
+};
+
 export default function AboutPage() {
-  const { profile, experience, education } = useStore();
+  const { profile, experience, education, services, theme } = useStore();
+
+  const getGithubUsername = (url: string) => {
+    if (!url) return '';
+    const cleanUrl = url.replace(/\/$/, ''); // Remove trailing slash
+    return cleanUrl.split('/').pop();
+  };
+
+  const username = getGithubUsername(profile.socials.github);
+  const statsTheme = theme === 'dark' ? 'dark' : 'default';
 
   return (
     <div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-white transition-colors duration-300">
@@ -71,6 +89,38 @@ export default function AboutPage() {
             </div>
         </div>
 
+        {/* Services Section */}
+        {services && services.length > 0 && (
+            <div className="mb-20">
+                <h2 className="text-2xl font-bold mb-8 flex items-center gap-3">
+                    <div className="p-2 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg text-yellow-600 dark:text-yellow-400">
+                        <Zap className="h-6 w-6" />
+                    </div>
+                    What I Do
+                </h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {services.map((service, idx) => {
+                        const Icon = IconMap[service.icon] || Code;
+                        return (
+                            <motion.div
+                                key={service.id}
+                                initial={{ opacity: 0, y: 20 }}
+                                whileInView={{ opacity: 1, y: 0 }}
+                                transition={{ delay: idx * 0.1 }}
+                                className="bg-white border border-slate-200 dark:bg-slate-900/50 dark:border-white/5 p-6 rounded-xl hover:border-indigo-500/30 transition-all shadow-sm dark:shadow-none group"
+                            >
+                                <div className="h-12 w-12 bg-indigo-50 dark:bg-slate-800 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400 mb-4 group-hover:bg-indigo-600 group-hover:text-white transition-colors">
+                                    <Icon className="h-6 w-6" />
+                                </div>
+                                <h3 className="text-lg font-bold mb-2 text-slate-900 dark:text-white">{service.title}</h3>
+                                <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{service.description}</p>
+                            </motion.div>
+                        );
+                    })}
+                </div>
+            </div>
+        )}
+
         <div className="grid md:grid-cols-2 gap-12 mb-20">
             {/* Experience */}
             <div>
@@ -157,18 +207,17 @@ export default function AboutPage() {
         </div>
 
         {/* GitHub Stats Section */}
-        {profile.socials.github && (
+        {username && (
             <div className="border-t border-slate-200 dark:border-white/10 pt-16">
-                 <h2 className="text-2xl font-bold mb-8 text-center">Coding Activity</h2>
+                 <h2 className="text-2xl font-bold mb-8 text-center text-slate-900 dark:text-white">Coding Activity</h2>
                  <div className="flex flex-col md:flex-row gap-6 justify-center items-center">
-                     {/* Replace 'username' in the URL with the actual GitHub username extracted from the profile URL if possible, or just use a placeholder mechanism */}
                      <img 
-                        src={`https://github-readme-stats.vercel.app/api?username=${profile.socials.github.split('/').pop()}&show_icons=true&theme=${'dark'}&bg_color=0f172a&title_color=fff&text_color=94a3b8&icon_color=6366f1&border_color=1e293b`} 
+                        src={`https://github-readme-stats.vercel.app/api?username=${username}&show_icons=true&theme=${statsTheme}&bg_color=${statsTheme === 'dark' ? '0f172a' : 'ffffff'}&title_color=${statsTheme === 'dark' ? 'ffffff' : '0f172a'}&text_color=${statsTheme === 'dark' ? '94a3b8' : '475569'}&icon_color=6366f1&border_color=${statsTheme === 'dark' ? '1e293b' : 'e2e8f0'}`} 
                         alt="GitHub Stats"
                         className="rounded-xl border border-slate-200 dark:border-white/10 shadow-lg max-w-full" 
                      />
                      <img 
-                        src={`https://github-readme-stats.vercel.app/api/top-langs/?username=${profile.socials.github.split('/').pop()}&layout=compact&theme=${'dark'}&bg_color=0f172a&title_color=fff&text_color=94a3b8&border_color=1e293b`} 
+                        src={`https://github-readme-stats.vercel.app/api/top-langs/?username=${username}&layout=compact&theme=${statsTheme}&bg_color=${statsTheme === 'dark' ? '0f172a' : 'ffffff'}&title_color=${statsTheme === 'dark' ? 'ffffff' : '0f172a'}&text_color=${statsTheme === 'dark' ? '94a3b8' : '475569'}&border_color=${statsTheme === 'dark' ? '1e293b' : 'e2e8f0'}`} 
                         alt="Top Languages"
                         className="rounded-xl border border-slate-200 dark:border-white/10 shadow-lg max-w-full" 
                      />

app/admin.tsx

@@ -1,25 +1,26 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { useStore, Experience, Education } from '../lib/store';
+import { useStore, Experience, Education, Service } from '../lib/store';
 import { useRouter } from '../lib/router';
-import { Plus, Trash2, FolderKanban, Mail, LogOut, Settings, FileText, User, Edit, X, Save, CheckCheck, ExternalLink, Briefcase, GraduationCap, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Plus, Trash2, FolderKanban, Mail, LogOut, Settings, FileText, User, Edit, X, Save, CheckCheck, ExternalLink, Briefcase, GraduationCap, ChevronLeft, ChevronRight, Zap } from 'lucide-react';
 import { toast } from 'sonner';
 
 const ADMIN_ITEMS_PER_PAGE = 5;
 
 export default function AdminPage() {
   const { 
-    projects, posts, messages, profile, experience, education,
+    projects, posts, messages, profile, experience, education, services,
     deleteProject, addProject, updateProject, 
     deletePost, addPost, updatePost, 
     updateProfile, setExperience, updateExperience, setEducation, updateEducation,
+    setServices, updateService, deleteService,
     markMessageRead, markAllMessagesRead, deleteMessage,
     logout 
   } = useStore();
 
   const { navigate } = useRouter();
-  const [activeTab, setActiveTab] = useState<'overview' | 'resume' | 'projects' | 'blog' | 'messages'>('overview');
+  const [activeTab, setActiveTab] = useState<'overview' | 'resume' | 'services' | 'projects' | 'blog' | 'messages'>('overview');
 
   // -- PAGINATION STATES --
   const [projectPage, setProjectPage] = useState(1);
@@ -57,6 +58,11 @@ export default function AdminPage() {
   const [showExpForm, setShowExpForm] = useState(false);
   const [showEduForm, setShowEduForm] = useState(false);
 
+  // -- SERVICES STATES --
+  const [serviceForm, setServiceForm] = useState<{title: string, description: string, icon: Service['icon']}>({ title: '', description: '', icon: 'code' });
+  const [editingServiceId, setEditingServiceId] = useState<string | null>(null);
+  const [showServiceForm, setShowServiceForm] = useState(false);
+
   // Unread Messages Count
   const unreadCount = messages ? messages.filter(m => !m.is_read).length : 0;
 
@@ -147,6 +153,33 @@ export default function AdminPage() {
   };
   const handleDeleteEdu = (id: string) => setEducation(education.filter(e => e.id !== id));
 
+  // --- SERVICES HANDLERS ---
+  const handleEditService = (srv?: Service) => {
+      if (srv) {
+          setEditingServiceId(srv.id);
+          setServiceForm({
+              title: srv.title,
+              description: srv.description,
+              icon: srv.icon
+          });
+      } else {
+          setEditingServiceId(null);
+          setServiceForm({ title: '', description: '', icon: 'code' });
+      }
+      setShowServiceForm(true);
+  }
+
+  const saveService = (e: React.FormEvent) => {
+      e.preventDefault();
+      if (editingServiceId) {
+          updateService(editingServiceId, serviceForm);
+          toast.success("Service updated!");
+      } else {
+          setServices([...services, { ...serviceForm, id: Math.random().toString(36).substr(2, 9) }]);
+          toast.success("Service added!");
+      }
+      setShowServiceForm(false);
+  }
 
   // --- PROJECT HANDLERS ---
   const openProjectForm = (project?: any) => {
@@ -256,6 +289,7 @@ export default function AdminPage() {
             {[
                 {id: 'overview', icon: User, label: 'Overview'},
                 {id: 'resume', icon: Briefcase, label: 'Resume'},
+                {id: 'services', icon: Zap, label: 'Services'},
                 {id: 'projects', icon: FolderKanban, label: 'Projects'},
                 {id: 'blog', icon: FileText, label: 'Blog'},
                 {id: 'messages', icon: Mail, label: 'Messages'},
@@ -485,6 +519,69 @@ export default function AdminPage() {
             </div>
         )}
 
+        {activeTab === 'services' && (
+            <div className="max-w-4xl">
+                 <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">Services Management</h1>
+                 
+                 <div className="mb-12">
+                    <div className="flex justify-between items-center mb-4">
+                        <h2 className="text-xl font-semibold text-slate-900 dark:text-white">Offered Services</h2>
+                        <button onClick={() => handleEditService()} className="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded-lg flex items-center gap-1 hover:bg-indigo-700"><Plus className="h-4 w-4" /> Add</button>
+                    </div>
+
+                    {showServiceForm && (
+                        <form onSubmit={saveService} className="bg-white border border-slate-200 dark:bg-slate-900 p-6 rounded-xl dark:border-white/10 mb-6 space-y-4 shadow-sm">
+                            <h3 className="text-slate-900 dark:text-white font-medium mb-2">{editingServiceId ? 'Edit Service' : 'New Service'}</h3>
+                            <input placeholder="Service Title (e.g., Web Development)" required value={serviceForm.title} onChange={e => setServiceForm({...serviceForm, title: e.target.value})} className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded px-3 py-2 text-slate-900 dark:text-white" />
+                            <textarea placeholder="Description" required value={serviceForm.description} onChange={e => setServiceForm({...serviceForm, description: e.target.value})} className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-white/10 rounded px-3 py-2 text-slate-900 dark:text-white" rows={3} />
+                            
+                            <div>
+                                <label className="block text-sm text-slate-500 dark:text-slate-400 mb-2">Icon</label>
+                                <div className="flex flex-wrap gap-2">
+                                    {(['code', 'smartphone', 'cloud', 'terminal', 'layout', 'database'] as const).map(icon => (
+                                        <button 
+                                            key={icon}
+                                            type="button"
+                                            onClick={() => setServiceForm({...serviceForm, icon})}
+                                            className={`p-2 rounded border transition-colors capitalize text-xs ${serviceForm.icon === icon ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-white/10'}`}
+                                        >
+                                            {icon}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+
+                            <div className="flex justify-end gap-2">
+                                <button type="button" onClick={() => setShowServiceForm(false)} className="text-slate-500 dark:text-slate-400 text-sm">Cancel</button>
+                                <button type="submit" className="bg-indigo-600 text-white px-4 py-1.5 rounded-lg text-sm">{editingServiceId ? 'Update' : 'Save'}</button>
+                            </div>
+                        </form>
+                    )}
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        {services && services.map(srv => (
+                            <div key={srv.id} className="bg-white border border-slate-200 dark:bg-slate-900 dark:border-white/5 p-4 rounded-lg flex justify-between items-start group shadow-sm">
+                                <div className="flex items-start gap-3">
+                                    <div className="p-2 bg-slate-100 dark:bg-slate-800 rounded text-indigo-600 dark:text-indigo-400">
+                                        <Zap className="h-5 w-5" />
+                                    </div>
+                                    <div>
+                                        <h3 className="font-bold text-slate-900 dark:text-white text-sm">{srv.title}</h3>
+                                        <p className="text-slate-600 dark:text-slate-400 text-xs mt-1 leading-relaxed">{srv.description}</p>
+                                        <div className="mt-2 inline-block px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-xs text-slate-500 dark:text-slate-400 capitalize">{srv.icon}</div>
+                                    </div>
+                                </div>
+                                <div className="flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                    <button onClick={() => handleEditService(srv)} className="text-blue-500 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-500/10 p-1 rounded"><Edit className="h-4 w-4" /></button>
+                                    <button onClick={() => deleteService(srv.id)} className="text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 p-1 rounded"><Trash2 className="h-4 w-4" /></button>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                 </div>
+            </div>
+        )}
+
         {activeTab === 'projects' && (
           <div>
             <div className="flex justify-between items-center mb-6">

app/page.tsx

@@ -157,8 +157,8 @@ export default function Page() {
               © {new Date().getFullYear()} DevFolio. Built with Next.js & Supabase.
             </span>
             <div className="flex gap-6">
-               <button className="text-slate-500 hover:text-slate-900 dark:hover:text-white text-sm">Privacy Policy</button>
-               <button className="text-slate-500 hover:text-slate-900 dark:hover:text-white text-sm">Terms of Service</button>
+               <button onClick={() => navigate('/privacy')} className="text-slate-500 hover:text-slate-900 dark:hover:text-white text-sm">Privacy Policy</button>
+               <button onClick={() => navigate('/terms')} className="text-slate-500 hover:text-slate-900 dark:hover:text-white text-sm">Terms of Service</button>
             </div>
           </div>
         </div>

app/privacy.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Navbar } from '../components/Navbar';
+
+export default function PrivacyPage() {
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-white transition-colors duration-300">
+      <Navbar />
+      <div className="pt-32 pb-20 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h1 className="text-4xl font-bold mb-8">Privacy Policy</h1>
+        <div className="prose prose-slate dark:prose-invert max-w-none">
+          <p>Last updated: {new Date().toLocaleDateString()}</p>
+          <p>
+            Your privacy is important to us. It is our policy to respect your privacy regarding any information we may collect from you across our website.
+          </p>
+          
+          <h3>1. Information We Collect</h3>
+          <p>
+            We only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will be used.
+          </p>
+
+          <h3>2. Log Data</h3>
+          <p>
+            When you visit our website, our servers may automatically log the standard data provided by your web browser. It includes your computer’s Internet Protocol (IP) address, your browser type and version, the pages you visit, the time and date of your visit, the time spent on each page, and other details.
+          </p>
+
+          <h3>3. Use of Information</h3>
+          <p>
+            We may use the information we collect from you to:
+          </p>
+          <ul>
+            <li>Provide and operate our services</li>
+            <li>Respond to your comments, questions, and requests</li>
+            <li>Send you technical notices, updates, security alerts, and support messages</li>
+          </ul>
+
+          <h3>4. Third-Party Services</h3>
+          <p>
+            We do not share any personally identifying information publicly or with third-parties, except when required to by law.
+          </p>
+
+          <h3>5. Contact Us</h3>
+          <p>
+            If you have any questions about this privacy policy, please contact us via the contact form on our website.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}