[UI/UX] More changes to the Frontend

backend/app/services/email_service.py

@@ -58,7 +58,7 @@ async def send_verification_email(email_to: str, raw_token: str):
 
     html_content = f"""
     <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; color: #333;">
-        <h2>Welcome to AI Detector!</h2>
+        <h2>Welcome to Spotix!</h2>
         <p>Please confirm your email address to activate your account.</p>
         <p>Click the button below to verify. <strong>This link will expire in 24 hours.</strong></p>
         <div style="text-align: center; margin: 30px 0;">

backend/main.py

@@ -24,7 +24,7 @@ async def lifespan(app: FastAPI):
     yield
 
 app = FastAPI(
-    title="AI Detection Platform",
+    title="Spotix",
     lifespan=lifespan
 )
 

frontend/app/dashboard/page.tsx

@@ -20,8 +20,8 @@ export default function DashboardPage() {
     
     // Filter & Sort States
     const [searchQuery, setSearchQuery] = useState("");
-    const [sortBy, setSortBy] = useState<'newest'|'confidence'>('newest');
-    const [resultFilter, setResultFilter] = useState<'All'|'AI'|'Real'|'Suspicious'>('All');
+    const [sortBy, setSortBy] = useState<'newest'|'confidence'|'date'>('newest');
+    const [resultFilter, setResultFilter] = useState<'All'|'AI'|'Real'|'Suspicious'|'Videos'|'Images'>('All');
 
     // Fetch Files & Guard
     useEffect(() => {
@@ -87,8 +87,8 @@ export default function DashboardPage() {
         // 3. Sort
         result.sort((a, b) => {
             if (sortBy === 'newest' || sortBy === 'date') {
-                const dateA = a.uploaded_at ? new Date(a.uploaded_at).getTime() : 0;
-                const dateB = b.uploaded_at ? new Date(b.uploaded_at).getTime() : 0;
+                const dateA = a.uploaded_at ? new Date(a.uploaded_at.endsWith('Z') ? a.uploaded_at : a.uploaded_at + 'Z').getTime() : 0;
+                const dateB = b.uploaded_at ? new Date(b.uploaded_at.endsWith('Z') ? b.uploaded_at : b.uploaded_at + 'Z').getTime() : 0;
                 return dateB - dateA; // Both map to newest first logic
             } else {
                 const confA = a.confidence || 0;

frontend/app/learn-more/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowLeft, Upload, Shield, Activity, Database } from "lucide-react";
+import Navbar from "@/components/shared/Navbar";
+
+export default function LearnMorePage() {
+    const router = useRouter();
+
+    useEffect(() => {
+        // Scroll reveal logic
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, { threshold: 0.1 });
+
+        document.querySelectorAll('.scroll-reveal').forEach((el) => observer.observe(el));
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <div className="min-h-screen bg-[var(--theme-bg)] text-[var(--theme-text)] font-sans relative overflow-x-hidden selection:bg-[var(--theme-text)] selection:text-[var(--theme-bg)]">
+            {/* Global Theme & Cursor overrides if needed */}
+            <style dangerouslySetInnerHTML={{
+                __html: `
+                html, body, a, button, [role="button"], input, select, textarea, .cursor-pointer {
+                    cursor: none !important;
+                }
+                body {
+                    background-color: var(--theme-bg);
+                }
+                
+                .scroll-reveal {
+                    opacity: 0;
+                    transform: translateY(30px);
+                    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
+                }
+                .scroll-reveal.visible {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+                `
+            }} />
+
+            {/* Background Effects */}
+            <div className="absolute inset-0 bg-[var(--theme-bg)] z-0"></div>
+            <div className="absolute inset-0 opacity-40 pointer-events-none bg-[radial-gradient(circle_at_50%_50%,_#11141d_0%,_var(--theme-bg)_100%)] z-[1]"></div>
+            <div className="absolute inset-0 z-[2] opacity-[0.03] pointer-events-none" style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }}></div>
+
+            <Navbar />
+
+            <div className="relative z-10 max-w-4xl mx-auto px-6 py-40">
+                {/* Header */}
+                <div className="mb-20 text-center scroll-reveal">
+                    <label className="uppercase tracking-[0.4em] text-[#d0c4bb] mb-6 block text-xs">Platform Guide</label>
+                    <h1 className="text-5xl md:text-7xl font-black tracking-tight text-[var(--theme-text)] mb-6">
+                        Master the Engine
+                    </h1>
+                    <p className="text-lg md:text-xl text-[var(--theme-text)]/70 font-light leading-relaxed max-w-2xl mx-auto">
+                        Welcome to Spotix. Learn how to utilize our neural architecture to detect synthetic and AI-generated media with absolute precision.
+                    </p>
+                </div>
+
+                {/* Steps */}
+                <div className="space-y-12">
+                    {/* Step 1 */}
+                    <div className="flex flex-col md:flex-row gap-8 items-start bg-[var(--theme-text)]/5 p-8 md:p-12 rounded-[2rem] border border-[var(--theme-border)] backdrop-blur-md scroll-reveal hover:bg-[var(--theme-text)]/10 transition-colors">
+                        <div className="w-16 h-16 shrink-0 rounded-2xl bg-[var(--theme-text)]/10 flex items-center justify-center border border-[var(--theme-border)]">
+                            <Upload className="w-8 h-8 text-[var(--theme-text)]" />
+                        </div>
+                        <div>
+                            <h2 className="text-2xl font-bold mb-4">1. Uploading Media</h2>
+                            <p className="text-[var(--theme-text)]/70 leading-relaxed text-lg">
+                                Click the <strong className="text-[var(--theme-text)]">Analyze Media</strong> button on the top right of the navigation bar, or from the Landing Page. A secure uplink zone will appear. You can drag and drop your images or videos (MP4, WEBM, JPG, PNG) directly into this zone.
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Step 2 */}
+                    <div className="flex flex-col md:flex-row gap-8 items-start bg-[var(--theme-text)]/5 p-8 md:p-12 rounded-[2rem] border border-[var(--theme-border)] backdrop-blur-md scroll-reveal hover:bg-[var(--theme-text)]/10 transition-colors">
+                        <div className="w-16 h-16 shrink-0 rounded-2xl bg-[var(--theme-text)]/10 flex items-center justify-center border border-[var(--theme-border)]">
+                            <Activity className="w-8 h-8 text-[var(--theme-text)]" />
+                        </div>
+                        <div>
+                            <h2 className="text-2xl font-bold mb-4">2. The Analysis Phase</h2>
+                            <p className="text-[var(--theme-text)]/70 leading-relaxed text-lg">
+                                Once uploaded, the Spotix engine dissects the file through multiple neural pathways. We check for temporal inconsistencies, latent space noise patterns, and structural artifacts that generative AI models leave behind.
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Step 3 */}
+                    <div className="flex flex-col md:flex-row gap-8 items-start bg-[var(--theme-text)]/5 p-8 md:p-12 rounded-[2rem] border border-[var(--theme-border)] backdrop-blur-md scroll-reveal hover:bg-[var(--theme-text)]/10 transition-colors">
+                        <div className="w-16 h-16 shrink-0 rounded-2xl bg-[var(--theme-text)]/10 flex items-center justify-center border border-[var(--theme-border)]">
+                            <Shield className="w-8 h-8 text-[var(--theme-text)]" />
+                        </div>
+                        <div>
+                            <h2 className="text-2xl font-bold mb-4">3. Deciphering the Results</h2>
+                            <p className="text-[var(--theme-text)]/70 leading-relaxed text-lg">
+                                You will be routed to the Results Terminal. Here, you'll see a confidence score and a verdict (Authentic, Suspicious, or AI Detected). A heatmap visualizes exactly where the neural anomalies were found in the media.
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Step 4 */}
+                    <div className="flex flex-col md:flex-row gap-8 items-start bg-[var(--theme-text)]/5 p-8 md:p-12 rounded-[2rem] border border-[var(--theme-border)] backdrop-blur-md scroll-reveal hover:bg-[var(--theme-text)]/10 transition-colors">
+                        <div className="w-16 h-16 shrink-0 rounded-2xl bg-[var(--theme-text)]/10 flex items-center justify-center border border-[var(--theme-border)]">
+                            <Database className="w-8 h-8 text-[var(--theme-text)]" />
+                        </div>
+                        <div>
+                            <h2 className="text-2xl font-bold mb-4">4. Managing Your Dashboard</h2>
+                            <p className="text-[var(--theme-text)]/70 leading-relaxed text-lg">
+                                Access your Dashboard to view a complete history of all your analyses. You can filter by file type, sort by confidence or date, and delete historical data to maintain your privacy.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Back Button */}
+                <div className="mt-20 flex justify-center scroll-reveal">
+                    <button 
+                        onClick={() => router.push('/')}
+                        className="group relative overflow-hidden rounded-full bg-[var(--theme-text)] text-[var(--theme-bg)] px-10 py-4 font-bold tracking-widest text-sm uppercase transition-all duration-300 hover:shadow-[0_0_40px_rgba(253,232,214,0.3)] hover:scale-105 flex items-center gap-3 !cursor-none"
+                    >
+                        <ArrowLeft className="w-5 h-5 transition-transform duration-300 group-hover:-translate-x-1" />
+                        <span>Return to Gateway</span>
+                    </button>
+                </div>
+            </div>
+            
+            {/* Footer */}
+            <footer className="bg-[var(--theme-bg)] w-full border-t border-[var(--theme-border)] relative z-10">
+                <div className="flex flex-col items-center justify-center py-12 max-w-5xl mx-auto">
+                    <div className="text-xl font-black text-[var(--theme-text)] uppercase mb-2">SPOTIX</div>
+                    <div className="font-['Inter'] uppercase tracking-[0.15em] text-[9px] text-[#d0c4bb] opacity-60">© 2026 SPOTIX KINETIC. ENGINEERED FOR THE ETHEREAL.</div>
+                </div>
+            </footer>
+        </div>
+    );
+}

frontend/app/login/page.tsx

@@ -128,7 +128,7 @@ export default function LoginPage() {
             <div className="fixed top-12 left-6 md:left-12 z-40">
                 <button onClick={() => router.push("/")} className="group flex items-center gap-3 text-[#d0c4bb] hover:text-[var(--theme-text)] transition-colors !cursor-none text-sm font-semibold tracking-wider hover-scale">
                     <ArrowLeft className="w-5 h-5 transition-transform group-hover:-translate-x-1 !cursor-none" />
-                    RETURN TO PLATFORM
+                    RETURN TO SPOTIX
                 </button>
             </div>
 
@@ -137,9 +137,9 @@ export default function LoginPage() {
                     <div className="absolute -top-40 -right-40 w-80 h-80 bg-theme-text/5 rounded-full blur-[80px] pointer-events-none"></div>
                     
                     <h1 className="text-3xl tracking-widest font-bold mb-2 font-sans uppercase">
-                        Neural<span className="text-[var(--theme-text)]/50"> Vault</span> Access
+                        Spotix<span className="text-[var(--theme-text)]/50"> Vault</span> Access
                     </h1>
-                    <p className="text-[#d0c4bb]/60 text-sm mb-6">Authenticate to seamlessly vault and analyze.</p>
+                    <p className="text-[#d0c4bb]/60 text-sm mb-6">Authenticate to seamlessly store and analyze.</p>
 
                     {error && (
                         <div className="bg-red-500/10 border border-red-500/20 text-red-400 text-sm p-3 rounded-lg mb-4">
@@ -186,7 +186,7 @@ export default function LoginPage() {
                                     required={mode === 'signup'}
                                     value={email}
                                     onChange={(e) => setEmail(e.target.value)}
-                                    placeholder="Neural Identity (Email)"
+                                    placeholder="Email"
                                     className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/40 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
                                 />
                             </div>
@@ -198,7 +198,7 @@ export default function LoginPage() {
                                 required
                                 value={password}
                                 onChange={(e) => setPassword(e.target.value)}
-                                placeholder="Passkey"
+                                placeholder="Password"
                                 className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/40 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
                             />
                         </div>
@@ -209,7 +209,7 @@ export default function LoginPage() {
                             className="w-full mt-2 py-4 rounded-xl relative overflow-hidden group dash-border bg-theme-text/5 hover:bg-theme-text/10 transition"
                         >
                             <span className="relative z-10 font-bold tracking-widest text-sm uppercase flex items-center justify-center gap-2">
-                                {loading && mode === 'login' ? 'Authorizing...' : loading && mode === 'signup' ? 'Registering...' : mode === 'login' ? 'Initialize Session' : 'Create Vault'}
+                                {loading && mode === 'login' ? 'Authorizing...' : loading && mode === 'signup' ? 'Registering...' : mode === 'login' ? 'Login' : 'Register'}
                                 <ArrowRight className={`w-4 h-4 transition-transform group-hover:translate-x-1 ${loading ? 'hidden' : ''}`} />
                             </span>
                         </button>
@@ -220,7 +220,7 @@ export default function LoginPage() {
                              onClick={() => setMode(mode === 'login' ? 'signup' : 'login')}
                              className="text-xs text-[#d0c4bb]/60 hover:text-[var(--theme-text)] transition uppercase tracking-widest cursor-pointer"
                          >
-                             {mode === 'login' ? "Don't have a vault? Build one." : "Already have a vault? Initialize."}
+                             {mode === 'login' ? "Don't have an Account? Create one." : "Already have an Account? Login."}
                          </button>
                     </div>
 

frontend/app/page.tsx

@@ -12,6 +12,13 @@ export default function LandingPage() {
 
     const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
 
+    // --- Footer Copyright and Dynamic Date ---
+    const [year, setYear] = useState(new Date().getFullYear());
+
+    useEffect(() =>{
+        setYear(new Date().getFullYear());
+    }, []);
+
     // --- React State for Loader ---
     const [loadProgress, setLoadProgress] = useState(0);
     const [isLoaded, setIsLoaded] = useState(false);
@@ -301,7 +308,7 @@ export default function LandingPage() {
 
                 <div className="absolute inset-0 bg-[var(--theme-bg)] z-0"></div>
                 <div className="absolute inset-0 opacity-40 pointer-events-none bg-[radial-gradient(circle_at_50%_50%,_#11141d_0%,_var(--theme-bg)_100%)] z-[1]" id="hero-bg"></div>
-                <div className="absolute inset-0 z-[2] opacity-[0.03] pointer-events-none" style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }}></div>
+                <div className="absolute inset-0 z-[2] opacity-[0.03] pointer-events-none" style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }}></div>
                 <div className="absolute inset-0 pointer-events-none" id="hero-grid"></div>
                 <div className="absolute inset-0 pointer-events-none" id="hero-glow"></div>
                 
@@ -310,11 +317,11 @@ export default function LandingPage() {
                     {/* Main Hero Content */}
                     <div className={`w-full transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] ${isUploadModalOpen ? 'blur-sm opacity-50 pointer-events-none' : ''}`} id="hero-main-content">
                         <div className="reveal-wrap mb-6">
-                            <label className="reveal-text uppercase tracking-[0.3em] text-[var(--theme-text)] block text-xs font-medium opacity-80;" style={{ transitionDelay: '0.1s' }}>Next-Gen Media Intelligence</label>
+                            <label className="reveal-text uppercase tracking-[0.3em] text-[var(--theme-text)] block text-xs font-medium opacity-80;" style={{ transitionDelay: '0.1s' }}>Next-Gen Media Analyzer</label>
                         </div>
                         <div className="reveal-wrap mb-8">
                             <h1 className="reveal-text text-5xl md:text-8xl lg:text-9xl font-black tracking-[-0.04em] leading-[0.95] text-[var(--theme-text)]" style={{ transitionDelay: '0.3s' }}>
-                                Ethereal Intelligence.<br />
+                                Spotix Intelligence.<br />
                                 <span className="text-outline">Engineered for Truth.</span>
                             </h1>
                         </div>
@@ -329,7 +336,7 @@ export default function LandingPage() {
                                     <span className="transition-transform duration-300 group-hover:-translate-x-2">Analyze Media</span>
                                     <ArrowRight className="w-5 h-5 ml-2 opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] absolute right-8 arrow-animate" />
                                 </button>
-                                <button className="bg-[var(--theme-text)]/5 backdrop-blur-md text-[var(--theme-text)] px-10 py-5 rounded-full text-sm font-semibold hover:bg-[var(--theme-text)]/10 transition-all border-none hover-scale relative z-20">
+                                <button className="bg-[var(--theme-text)]/5 backdrop-blur-md text-[var(--theme-text)] px-10 py-5 rounded-full text-sm font-semibold hover:bg-[var(--theme-text)]/10 transition-all border-none hover-scale relative z-20" onClick={() => router.push('/learn-more')}>
                                     Learn More
                                 </button>
                             </div>
@@ -361,16 +368,20 @@ export default function LandingPage() {
                 <div className="max-w-[1920px] mx-auto scroll-reveal">
                     <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 md:gap-24 items-center">
                         <div className="lg:col-span-5">
-                            <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-8 text-[var(--theme-text)]">Real-time Latent Diagnostics</h2>
-                            <p className="text-[#d0c4bb] mb-10 leading-relaxed text-lg">Experience the precision of the Obsidian Engine. Our live diagnostic interface provides instantaneous metadata readouts and structural integrity mapping.</p>
+                            <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-8 text-[var(--theme-text)]">AI Media Authenticity Analysis</h2>
+                            <p className="text-[#d0c4bb] mb-10 leading-relaxed text-lg">Analyze images and videos using multi-signal detection. Spotix evaluates structural patterns, noise characteristics, and temporal consistency to estimate authenticity.</p>
                             <div className="space-y-6">
                                 <div className="flex items-center gap-4 text-sm text-[var(--theme-text)]/70">
                                     <CheckCircle className="w-5 h-5 text-[var(--theme-text)]" strokeWidth={1.5} />
-                                    <span className="uppercase tracking-widest font-medium">99.8% Detection Rate</span>
+                                    <span className="uppercase tracking-widest font-medium">Noise & Frequency Analysis</span>
                                 </div>
                                 <div className="flex items-center gap-4 text-sm text-[var(--theme-text)]/70">
                                     <CheckCircle className="w-5 h-5 text-[var(--theme-text)]" strokeWidth={1.5} />
-                                    <span className="uppercase tracking-widest font-medium">Sub-200ms Latency</span>
+                                    <span className="uppercase tracking-widest font-medium">Temporal Consistency Checks</span>
+                                </div>
+                                <div className="flex items-center gap-4 text-sm text-[var(--theme-text)]/70">
+                                    <CheckCircle className="w-5 h-5 text-[var(--theme-text)]" strokeWidth={1.5} />
+                                    <span className="uppercase tracking-widest font-medium">Explainable Results</span>
                                 </div>
                             </div>
                         </div>
@@ -382,23 +393,20 @@ export default function LandingPage() {
                                         <div className="bg-[var(--theme-bg)]/80 backdrop-blur-md px-5 py-2.5 rounded-full border border-theme-border">
                                             <span className="text-[10px] font-mono text-[var(--theme-text)] uppercase tracking-tighter">Status: Scanning_Buffer_04</span>
                                         </div>
-                                        <div className="font-mono text-[10px] text-[#d0c4bb] text-right">
-                                            COORD: 34.0522° N<br />TIMESTAMP: 12:44:09:22
-                                        </div>
                                     </div>
                                     <div className="absolute top-1/2 left-0 w-full h-[2px] bg-[var(--theme-text)]/40 shadow-[0_0_20px_rgba(253,232,214,0.5)] animate-pulse"></div>
                                     <div className="mt-auto grid grid-cols-3 gap-3 md:gap-6">
                                         <div className="bg-[var(--theme-bg)]/90 backdrop-blur-md p-5 rounded-2xl border border-theme-border">
-                                            <div className="text-[9px] text-[#d0c4bb] uppercase tracking-widest mb-2">Authenticity</div>
-                                            <div className="text-xl md:text-3xl font-bold text-[var(--theme-text)]">94.2%</div>
+                                            <div className="text-[9px] text-[#d0c4bb] uppercase tracking-widest mb-2">Authenticity Score</div>
+                                            <div className="text-xl md:text-3xl font-bold text-[var(--theme-text)]">94%</div>
                                         </div>
                                         <div className="bg-[var(--theme-bg)]/90 backdrop-blur-md p-5 rounded-2xl border border-theme-border">
-                                            <div className="text-[9px] text-[#d0c4bb] uppercase tracking-widest mb-2">Noise Delta</div>
-                                            <div className="text-xl md:text-3xl font-bold text-[var(--theme-text)]">0.024</div>
+                                            <div className="text-[9px] text-[#d0c4bb] uppercase tracking-widest mb-2">Noise Consistency</div>
+                                            <div className="text-xl md:text-3xl font-bold text-[var(--theme-text)]">0.62</div>
                                         </div>
                                         <div className="bg-[var(--theme-bg)]/90 backdrop-blur-md p-5 rounded-2xl border border-theme-border">
-                                            <div className="text-[9px] text-[#d0c4bb] uppercase tracking-widest mb-2">Neural Rank</div>
-                                            <div className="text-xl md:text-3xl font-bold text-[var(--theme-text)]">A-IV</div>
+                                            <div className="text-[9px] text-[#d0c4bb] uppercase tracking-widest mb-2">Detection Confidence</div>
+                                            <div className="text-xl md:text-3xl font-bold text-[var(--theme-text)]">High</div>
                                         </div>
                                     </div>
                                 </div>
@@ -420,22 +428,22 @@ export default function LandingPage() {
                         <div className="mb-6 md:mb-8 lg:mb-10 inline-block p-5 rounded-2xl bg-theme-text/5 text-[var(--theme-text)] transition-transform group-hover:scale-110 duration-500">
                             <Fingerprint className="w-10 h-10 text-[var(--theme-text)]" strokeWidth={1.5} />
                         </div>
-                        <h3 className="text-xl md:text-2xl font-bold mb-6 text-[var(--theme-text)] transition-colors">Neural Fingerprinting</h3>
-                        <p className="text-[#d0c4bb] leading-relaxed text-base md:text-lg">Extracting deep-layer artifacts invisible to the human eye, identifying the unique synthetic signature of generative models.</p>
+                        <h3 className="text-xl md:text-2xl font-bold mb-6 text-[var(--theme-text)] transition-colors">Noise & Residual Analysis</h3>
+                        <p className="text-[#d0c4bb] leading-relaxed text-base md:text-lg">Examines pixel-level noise patterns and residual signals to identify inconsistencies typical of synthetic generation.</p>
                     </div>
                     <div className="glow-card dash-border group relative p-8 md:p-10 lg:p-12 bg-theme-text/5 backdrop-blur-sm border border-theme-border rounded-3xl transition-all duration-700 hover:bg-theme-text/10 hover:-translate-y-[10px] hover:shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] scroll-reveal tilt-card">
                         <div className="mb-6 md:mb-8 lg:mb-10 inline-block p-5 rounded-2xl bg-theme-text/5 text-[var(--theme-text)] transition-transform group-hover:scale-110 duration-500">
                             <Activity className="w-10 h-10 text-[var(--theme-text)]" strokeWidth={1.5} />
                         </div>
-                        <h3 className="text-xl md:text-2xl font-bold mb-6 text-[var(--theme-text)] transition-colors">Temporal Consistency</h3>
-                        <p className="text-[#d0c4bb] leading-relaxed text-base md:text-lg">Analyzing frame-to-frame variance to detect temporal anomalies and fluid-logic errors in synthetic video generation.</p>
+                        <h3 className="text-xl md:text-2xl font-bold mb-6 text-[var(--theme-text)] transition-colors">Temporal Consistency (Video)</h3>
+                        <p className="text-[#d0c4bb] leading-relaxed text-base md:text-lg">Analyzes frame-to-frame variation to detect unnatural motion, interpolation artifacts, and structural drift.</p>
                     </div>
                     <div className="glow-card dash-border group relative p-8 md:p-10 lg:p-12 bg-theme-text/5 backdrop-blur-sm border border-theme-border rounded-3xl transition-all duration-700 hover:bg-theme-text/10 hover:-translate-y-[10px] hover:shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] scroll-reveal tilt-card">
                         <div className="mb-6 md:mb-8 lg:mb-10 inline-block p-5 rounded-2xl bg-theme-text/5 text-[var(--theme-text)] transition-transform group-hover:scale-110 duration-500">
                             <Network className="w-10 h-10 text-[var(--theme-text)]" strokeWidth={1.5} />
                         </div>
-                        <h3 className="text-xl md:text-2xl font-bold mb-6 text-[var(--theme-text)] transition-colors">Latent Space Analysis</h3>
-                        <p className="text-[#d0c4bb] leading-relaxed text-base md:text-lg">Mapping content against known latent space distributions to identify cross-model similarities and structural patterns.</p>
+                        <h3 className="text-xl md:text-2xl font-bold mb-6 text-[var(--theme-text)] transition-colors">Frequency Domain Analysis</h3>
+                        <p className="text-[#d0c4bb] leading-relaxed text-base md:text-lg">Uses Fourier-based features to detect unnatural frequency distributions and over-smooth textures common in AI-generated media.</p>
                     </div>
                 </div>
             </section>
@@ -459,16 +467,16 @@ export default function LandingPage() {
                         </div>
                         <div className="lg:w-1/2 order-1 lg:order-2">
                             <label className="uppercase tracking-[0.4em] text-[#d0c4bb] mb-8 block text-xs">Transparent Logic</label>
-                            <h2 className="text-6xl md:text-8xl font-black tracking-tighter mb-10 leading-[0.95] text-[var(--theme-text)]">Heatmap<br />Explainability</h2>
-                            <p className="text-[#d0c4bb] text-xl leading-relaxed mb-12">We don't just provide a score. Our engine maps the specific regions of concern, visualizing the neural pathways activated during analysis for absolute clarity.</p>
+                            <h2 className="text-6xl md:text-8xl font-black tracking-tighter mb-10 leading-[0.95] text-[var(--theme-text)]">Explainable<br />Detection</h2>
+                            <p className="text-[#d0c4bb] text-xl leading-relaxed mb-12">Spotix highlights regions that contribute most to the detection score, allowing users to visually understand why a sample is flagged.</p>
                             <div className="grid grid-cols-2 gap-12">
                                 <div>
-                                    <div className="text-[var(--theme-text)] text-3xl font-bold mb-3">0.98</div>
+                                    <div className="text-[var(--theme-text)] text-3xl font-bold mb-3">0.85</div>
                                     <div className="text-[10px] uppercase tracking-[0.2em] text-[#d0c4bb] font-semibold">Confidence Threshold</div>
                                 </div>
                                 <div>
-                                    <div className="text-[var(--theme-text)] text-3xl font-bold mb-3">Linear</div>
-                                    <div className="text-[10px] uppercase tracking-[0.2em] text-[#d0c4bb] font-semibold">Decision Logic</div>
+                                    <div className="text-[var(--theme-text)] text-3xl font-bold mb-3">Multi-signal Fusion</div>
+                                    <div className="text-[10px] uppercase tracking-[0.2em] text-[#d0c4bb] font-semibold">Decision Model</div>
                                 </div>
                             </div>
                         </div>
@@ -480,11 +488,10 @@ export default function LandingPage() {
             <footer className="bg-[var(--theme-bg)] w-full border-t border-theme-border relative z-10">
                 <div className="flex flex-col md:flex-row justify-between items-center px-12 py-24 gap-12 max-w-[1920px] mx-auto">
                     <div className="flex flex-col items-center md:items-start gap-4">
-                        <div className="text-2xl font-black text-[var(--theme-text)] uppercase">OBSIDIAN</div>
-                        <div className="font-['Inter'] uppercase tracking-[0.15em] text-[9px] text-[#d0c4bb] opacity-60">© 2026 OBSIDIAN KINETIC. ENGINEERED FOR THE ETHEREAL.</div>
+                        <div className="text-2xl font-black text-[var(--theme-text)] uppercase">SPOTIX</div>
+                        <div className="font-['Inter'] uppercase tracking-[0.15em] text-[9px] text-[#d0c4bb] opacity-60">&copy; {year} SPOTIX KINETIC. ENGINEERED FOR THE ETHEREAL.</div>
                     </div>
                     <div className="flex flex-wrap justify-center gap-x-12 gap-y-6 items-center">
-                        <a className="font-['Inter'] uppercase tracking-[0.2em] text-[10px] text-[#d0c4bb] hover:text-[var(--theme-text)] transition-colors duration-300" href="#">Documentation</a>
                         <a className="font-['Inter'] uppercase tracking-[0.2em] text-[10px] text-[#d0c4bb] transition-all duration-300 flex items-center gap-2 group hover:text-green-400 hover:drop-shadow-[0_0_8px_rgba(74,222,128,0.5)] cursor-pointer" href="#">
                             <span>System Status</span>
                             <span className="text-[9px] bg-[var(--theme-text)]/5 px-2 py-0.5 rounded-full border border-[var(--theme-text)]/10 group-hover:border-green-500/30 group-hover:bg-green-500/10 flex items-center gap-1.5 transition-colors">

frontend/components/dashboard/HistoryGrid.tsx

@@ -95,7 +95,7 @@ export default function HistoryGrid({ files, onDeleteFile }: { files: any[], onD
                             <div className="flex-1 min-w-0 !cursor-none">
                                 <p className="text-[var(--theme-text)] text-sm font-medium truncate group-hover:text-[var(--theme-text)]/80 transition-colors !cursor-none">{file.filename || `Analysis_${file.id.substring(0,6)}`}</p>
                                 <p className="text-[var(--theme-text)]/30 text-xs font-mono mt-1 !cursor-none">
-                                    {file.uploaded_at ? new Date(file.uploaded_at.endsWith('Z') ? file.uploaded_at : file.uploaded_at + 'Z').toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'Unknown Date'}
+                                    {file.uploaded_at ? new Date(file.uploaded_at.endsWith('Z') ? file.uploaded_at : file.uploaded_at + 'Z').toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'Unknown Date'}
                                 </p>
                             </div>
                         </div>