feat: Add dynamic footer and legal content

Introduce dynamic display of footer text and legal content (privacy policy, terms of service) by fetching them from the store. This replaces hardcoded values and allows for easier content management.

Also, refactors the admin page to include a new "Legal" tab to manage this content and updates the store to include the new fields.

Author: ilramdhan

app/admin.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from 'react';
 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, Zap } from 'lucide-react';
+import { Plus, Trash2, FolderKanban, Mail, LogOut, Settings, FileText, User, Edit, X, Save, CheckCheck, ExternalLink, Briefcase, GraduationCap, ChevronLeft, ChevronRight, Zap, Scale } from 'lucide-react';
 import { toast } from 'sonner';
 
 const ADMIN_ITEMS_PER_PAGE = 5;
@@ -20,7 +20,7 @@ export default function AdminPage() {
   } = useStore();
 
   const { navigate } = useRouter();
-  const [activeTab, setActiveTab] = useState<'overview' | 'resume' | 'services' | 'projects' | 'blog' | 'messages'>('overview');
+  const [activeTab, setActiveTab] = useState<'overview' | 'resume' | 'services' | 'legal' | 'projects' | 'blog' | 'messages'>('overview');
 
   // -- PAGINATION STATES --
   const [projectPage, setProjectPage] = useState(1);
@@ -41,7 +41,7 @@ export default function AdminPage() {
 
   // -- PROFILE STATE --
   const [profileForm, setProfileForm] = useState<typeof profile>(profile || {
-    logo_text: '', logo_url: '', name: '', avatar_url: '', title: '', description: '', detailed_bio: '', address: '', resume_url: '', badge: '',
+    logo_text: '', logo_url: '', name: '', avatar_url: '', title: '', description: '', detailed_bio: '', address: '', resume_url: '', badge: '', footer_text: '', privacy_content: '', terms_content: '',
     socials: { github: '', linkedin: '', twitter: '', instagram: '', youtube: '', whatsapp: '', mail: '', steam: '' }
   });
 
@@ -83,7 +83,7 @@ export default function AdminPage() {
   const handleUpdateProfile = (e: React.FormEvent) => {
     e.preventDefault();
     updateProfile(profileForm);
-    toast.success("Profile settings updated!");
+    toast.success("Settings updated!");
   };
 
   // --- EXPERIENCE HANDLERS ---
@@ -290,6 +290,7 @@ export default function AdminPage() {
                 {id: 'overview', icon: User, label: 'Overview'},
                 {id: 'resume', icon: Briefcase, label: 'Resume'},
                 {id: 'services', icon: Zap, label: 'Services'},
+                {id: 'legal', icon: Scale, label: 'Legal & Footer'},
                 {id: 'projects', icon: FolderKanban, label: 'Projects'},
                 {id: 'blog', icon: FileText, label: 'Blog'},
                 {id: 'messages', icon: Mail, label: 'Messages'},
@@ -415,6 +416,42 @@ export default function AdminPage() {
             </div>
         )}
 
+        {activeTab === 'legal' && (
+            <div className="max-w-4xl">
+                <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">Legal Pages & Footer</h1>
+                <form onSubmit={handleUpdateProfile} className="space-y-6">
+                    {/* Footer Settings */}
+                    <div className="grid gap-6 p-6 bg-white border border-slate-200 dark:bg-slate-900 dark:border-white/10 rounded-xl shadow-sm">
+                        <h3 className="text-lg font-medium text-slate-900 dark:text-white border-b border-slate-100 dark:border-white/5 pb-2">Footer Settings</h3>
+                        <div>
+                            <label className="block text-sm text-slate-600 dark:text-slate-400 mb-1">Footer Copyright Text</label>
+                            <input value={profileForm?.footer_text || ''} onChange={e => setProfileForm({...profileForm, footer_text: 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" />
+                        </div>
+                    </div>
+
+                    {/* Privacy Policy */}
+                    <div className="grid gap-6 p-6 bg-white border border-slate-200 dark:bg-slate-900 dark:border-white/10 rounded-xl shadow-sm">
+                        <h3 className="text-lg font-medium text-slate-900 dark:text-white border-b border-slate-100 dark:border-white/5 pb-2">Privacy Policy</h3>
+                        <div>
+                            <label className="block text-sm text-slate-600 dark:text-slate-400 mb-1">Content (Markdown Supported)</label>
+                            <textarea rows={12} value={profileForm?.privacy_content || ''} onChange={e => setProfileForm({...profileForm, privacy_content: 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 font-mono text-sm" />
+                        </div>
+                    </div>
+
+                    {/* Terms of Service */}
+                    <div className="grid gap-6 p-6 bg-white border border-slate-200 dark:bg-slate-900 dark:border-white/10 rounded-xl shadow-sm">
+                        <h3 className="text-lg font-medium text-slate-900 dark:text-white border-b border-slate-100 dark:border-white/5 pb-2">Terms of Service</h3>
+                        <div>
+                            <label className="block text-sm text-slate-600 dark:text-slate-400 mb-1">Content (Markdown Supported)</label>
+                            <textarea rows={12} value={profileForm?.terms_content || ''} onChange={e => setProfileForm({...profileForm, terms_content: 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 font-mono text-sm" />
+                        </div>
+                    </div>
+
+                    <button type="submit" className="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium flex items-center gap-2"><Save className="h-4 w-4" /> Save Changes</button>
+                </form>
+            </div>
+        )}
+
         {activeTab === 'resume' && (
             <div className="max-w-4xl">
                  <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">Resume / CV Management</h1>
@@ -560,7 +597,7 @@ export default function AdminPage() {
 
                     <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 key={srv.id} className="bg-white border border-slate-200 dark:bg-slate-900 dark:border-white/10 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" />

app/page.tsx

@@ -23,7 +23,7 @@ const TECH_STACK = [
 ];
 
 export default function Page() {
-  const { projects, posts } = useStore();
+  const { projects, posts, profile } = useStore();
   const { navigate } = useRouter();
 
   // Filter only featured projects for homepage
@@ -154,7 +154,7 @@ export default function Page() {
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex flex-col md:flex-row justify-between items-center gap-6">
             <span className="text-slate-500 text-sm">
-              © {new Date().getFullYear()} DevFolio. Built with Next.js & Supabase.
+              {profile.footer_text}
             </span>
             <div className="flex gap-6">
                <button onClick={() => navigate('/privacy')} className="text-slate-500 hover:text-slate-900 dark:hover:text-white text-sm">Privacy Policy</button>

app/privacy.tsx

@@ -2,48 +2,21 @@
 
 import React from 'react';
 import { Navbar } from '../components/Navbar';
+import { useStore } from '../lib/store';
 
 export default function PrivacyPage() {
+  const { profile } = useStore();
+
   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>
+          <p className="text-sm text-slate-500 mb-8">Last updated: {new Date().toLocaleDateString()}</p>
+          <div className="whitespace-pre-wrap leading-relaxed text-slate-800 dark:text-slate-300">
+            {profile.privacy_content}
+          </div>
         </div>
       </div>
     </div>

app/terms.tsx

@@ -2,40 +2,21 @@
 
 import React from 'react';
 import { Navbar } from '../components/Navbar';
+import { useStore } from '../lib/store';
 
 export default function TermsPage() {
+  const { profile } = useStore();
+
   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">Terms of Service</h1>
         <div className="prose prose-slate dark:prose-invert max-w-none">
-          <p>Last updated: {new Date().toLocaleDateString()}</p>
-          
-          <h3>1. Terms</h3>
-          <p>
-            By accessing this website, you are agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws.
-          </p>
-
-          <h3>2. Use License</h3>
-          <p>
-            Permission is granted to temporarily download one copy of the materials (information or software) on this website for personal, non-commercial transitory viewing only.
-          </p>
-
-          <h3>3. Disclaimer</h3>
-          <p>
-            The materials on this website are provided on an 'as is' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.
-          </p>
-
-          <h3>4. Limitations</h3>
-          <p>
-            In no event shall we or our suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on this website.
-          </p>
-
-          <h3>5. Accuracy of Materials</h3>
-          <p>
-            The materials appearing on our website could include technical, typographical, or photographic errors. We do not warrant that any of the materials on our website are accurate, complete or current.
-          </p>
+          <p className="text-sm text-slate-500 mb-8">Last updated: {new Date().toLocaleDateString()}</p>
+          <div className="whitespace-pre-wrap leading-relaxed text-slate-800 dark:text-slate-300">
+            {profile.terms_content}
+          </div>
         </div>
       </div>
     </div>

lib/store.tsx

@@ -59,6 +59,9 @@ export interface ProfileConfig {
   address: string;
   resume_url: string;
   badge: string;
+  footer_text: string;
+  privacy_content: string;
+  terms_content: string;
   socials: {
     github: string;
     linkedin: string;
@@ -82,6 +85,23 @@ const INITIAL_PROFILE: ProfileConfig = {
   address: "Jakarta, Indonesia",
   resume_url: "#",
   badge: 'Full Stack Software Engineer',
+  footer_text: `© ${new Date().getFullYear()} DevFolio. Built with Next.js & Supabase.`,
+  privacy_content: `## Privacy Policy
+  
+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.
+
+### 1. Information We Collect
+We only ask for personal information when we truly need it to provide a service to you.
+
+### 2. Log Data
+When you visit our website, our servers may automatically log the standard data provided by your web browser.`,
+  terms_content: `## Terms of Service
+
+### 1. Terms
+By accessing this website, you are agreeing to be bound by these terms of service.
+
+### 2. Use License
+Permission is granted to temporarily download one copy of the materials on this website for personal, non-commercial transitory viewing only.`,
   socials: {
     github: 'https://github.com',
     linkedin: 'https://linkedin.com',