From f678c605a2960bafa95511bad8ad46e1c9254f5b Mon Sep 17 00:00:00 2001
From: Shovon <sakibulhassan.shovon@gmail.com>
Date: Sat, 20 Sep 2025 23:11:53 +0600
Subject: [PATCH] Add ai based user profile analysis ,info pages, footer,

Introduced About, Contact, Terms, and Privacy pages with detailed content. Added a global Footer component with dynamic Game of Thrones quotes and social links, replacing the previous Landing page footer. Implemented UserProfileAnalysis component and integrated AI-powered profile analysis in UserProfile. Refactored App routing to use new info pages and display the Footer on all pages except login/register.
---
 frontend/src/App.jsx                          |  23 +-
 frontend/src/components/Footer.jsx            | 118 +++++++
 .../src/components/UserProfileAnalysis.jsx    | 136 ++++++++
 frontend/src/pages/About.jsx                  | 180 +++++++++++
 frontend/src/pages/Contact.jsx                | 305 ++++++++++++++++++
 frontend/src/pages/Landing.jsx                |  32 --
 frontend/src/pages/Privacy.jsx                | 171 ++++++++++
 frontend/src/pages/Terms.jsx                  | 148 +++++++++
 frontend/src/pages/UserProfile.jsx            |  77 ++++-
 frontend/src/services/profileAnalysis.js      | 140 ++++++++
 10 files changed, 1293 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/components/Footer.jsx
 create mode 100644 frontend/src/components/UserProfileAnalysis.jsx
 create mode 100644 frontend/src/pages/About.jsx
 create mode 100644 frontend/src/pages/Contact.jsx
 create mode 100644 frontend/src/pages/Privacy.jsx
 create mode 100644 frontend/src/pages/Terms.jsx
 create mode 100644 frontend/src/services/profileAnalysis.js

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index db3e831..bfad0c8 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -3,6 +3,7 @@ import { AuthProvider } from "./context/AuthContext";
 import { BrowserRouter as Router, Routes, Route, useLocation, Navigate } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Chatbot from "./components/Chatbot";
+import Footer from "./components/Footer";
 
 // Pages
 import Landing from "./pages/Landing";
@@ -25,6 +26,12 @@ import ForumFeed from "./pages/ForumFeed";
 import ForumPostDetail from "./pages/ForumPostDetail.jsx";
 import ForumPostCreateEdit from "./pages/ForumPostCreateEdit";
 
+// Info pages
+import About from "./pages/About";
+import Contact from "./pages/Contact";
+import Terms from "./pages/Terms";
+import Privacy from "./pages/Privacy";
+
 // Placeholder pages
 function Placeholder({ title }) {
   return <div style={{ padding: 40, textAlign: 'center', color: '#888' }}><h1>{title} (Coming Soon)</h1></div>;
@@ -51,10 +58,10 @@ export default function App() {
           <Route path="/reviews/:id" element={<ReviewDetails />} />
           <Route path="/watchlist" element={<Watchlist />} />
           <Route path="/ai" element={<AIRecommendations />} />
-          <Route path="/about" element={<Placeholder title="About" />} />
-          <Route path="/contact" element={<Placeholder title="Contact" />} />
-          <Route path="/terms" element={<Placeholder title="Terms & Conditions" />} />
-          <Route path="/privacy" element={<Placeholder title="Privacy Policy" />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="/terms" element={<Terms />} />
+          <Route path="/privacy" element={<Privacy />} />
           <Route path="/discover" element={<Placeholder title="Discover" />} />
           <Route path="/trending" element={<Placeholder title="Trending" />} />
           <Route path="/top-rated" element={<Placeholder title="Top Rated" />} />
@@ -85,6 +92,7 @@ export default function App() {
           <Route path="/AI Recommendation" element={<Navigate to="/ai" replace />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
+        <FooterVisibility />
         <GlobalChatbotVisibility />
       </Router>
     </AuthProvider>
@@ -96,6 +104,13 @@ function NavbarVisibility() {
   return <Navbar />;
 }
 
+// Show Footer on all pages except login/register
+function FooterVisibility() {
+  const { pathname } = useLocation();
+  if (pathname === "/login" || pathname === "/register") return null;
+  return <Footer />;
+}
+
 // Hide Chatbot only on login/register
 function GlobalChatbotVisibility() {
   const { pathname } = useLocation();
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
new file mode 100644
index 0000000..5852d10
--- /dev/null
+++ b/frontend/src/components/Footer.jsx
@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { FaFacebook, FaLinkedin, FaGithub, FaHeart } from 'react-icons/fa';
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear();
+  const [gotQuote, setGotQuote] = useState(null);
+
+  useEffect(() => {
+    fetch('https://api.gameofthronesquotes.xyz/v1/random')
+      .then(res => res.json())
+      .then(data => {
+        if (Array.isArray(data) && data.length > 0) {
+          setGotQuote(data[0]);
+        } else if (data.sentence) {
+          setGotQuote(data);
+        }
+      })
+      .catch(() => setGotQuote(null));
+  }, []);
+
+  return (
+    <footer className="bg-gray-900 dark:bg-black border-t border-gray-800 dark:border-gray-700 mt-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {/* Brand Section */}
+          <div>
+            <Link to="/" className="flex items-center mb-4">
+              <span className="text-2xl font-bold bg-gradient-to-r from-red-500 to-red-700 text-transparent bg-clip-text">
+                RedPill
+              </span>
+            </Link>
+            <p className="text-gray-400 text-sm max-w-md">
+              Discover, review, and discuss movies with fellow film enthusiasts. 
+              Get AI-powered recommendations and analyze movie personalities in our community.
+            </p>
+            <div className="flex items-center mt-4 text-gray-400 text-sm">
+              <span>Made with</span>
+              <FaHeart className="text-red-500 mx-1" />
+              <span>by movie lovers</span>
+            </div>
+            
+            {/* Game of Thrones Quote */}
+            {gotQuote && (
+              <div className="mt-6 text-left">
+                <div className="italic text-base text-gray-300">
+                  <span>❝{gotQuote.sentence}❞</span>
+                  {gotQuote.character && (
+                    <span className="block mt-2 text-sm text-gray-500">— {gotQuote.character.name}</span>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Legal & Info */}
+          <div>
+            <h3 className="text-white font-semibold mb-4">Information</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link 
+                  to="/about" 
+                  className="text-gray-400 hover:text-white transition-colors text-sm"
+                >
+                  About Us
+                </Link>
+              </li>
+              <li>
+                <Link 
+                  to="/contact" 
+                  className="text-gray-400 hover:text-white transition-colors text-sm"
+                >
+                  Contact
+                </Link>
+              </li>
+              <li>
+                <Link 
+                  to="/terms" 
+                  className="text-gray-400 hover:text-white transition-colors text-sm"
+                >
+                  Terms of Service
+                </Link>
+              </li>
+              <li>
+                <Link 
+                  to="/privacy" 
+                  className="text-gray-400 hover:text-white transition-colors text-sm"
+                >
+                  Privacy Policy
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="border-t border-gray-800 dark:border-gray-700 mt-8 pt-8">
+          <div className="flex flex-col md:flex-row justify-between items-center">
+            <p className="text-gray-400 text-sm">
+              © {currentYear} RedPill. All rights reserved.
+            </p>
+            <div className="flex items-center space-x-4 mt-4 md:mt-0">
+              <span className="text-gray-400 text-sm">Follow us:</span>
+              <a 
+                href="https://github.com/RedPill-Team" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-white transition-colors"
+              >
+                <FaGithub className="w-5 h-5" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/UserProfileAnalysis.jsx b/frontend/src/components/UserProfileAnalysis.jsx
new file mode 100644
index 0000000..2b89866
--- /dev/null
+++ b/frontend/src/components/UserProfileAnalysis.jsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export default function UserProfileAnalysis({ analysis, onClose }) {
+  if (!analysis) return null;
+
+  const getPersonalityIcon = (type) => {
+    switch (type.toLowerCase()) {
+      case 'movie enthusiast':
+      case 'movie buff':
+        return '🎬';
+      case 'casual viewer':
+        return '🍿';
+      case 'genre specialist':
+        return '🎭';
+      default:
+        return '🎥';
+    }
+  };
+
+  const getCompatibilityColor = (score) => {
+    if (score >= 80) return 'text-green-400';
+    if (score >= 60) return 'text-yellow-400';
+    return 'text-red-400';
+  };
+
+  const getCompatibilityText = (score) => {
+    if (score >= 80) return 'Highly Compatible';
+    if (score >= 60) return 'Moderately Compatible';
+    return 'Different Tastes';
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 mb-8"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="text-xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 text-transparent bg-clip-text">
+          🎭 Movie Personality Analysis
+        </h3>
+        <div className="flex items-center gap-3">
+          <div className="text-2xl">{getPersonalityIcon(analysis.personality_type)}</div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-full hover:bg-white/10 transition-colors text-gray-400 hover:text-white"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+
+      {/* Personality Type */}
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-gray-300 font-medium">Personality Type</span>
+          <span className="text-white font-bold">{analysis.personality_type}</span>
+        </div>
+        <p className="text-gray-400 text-sm">{analysis.summary}</p>
+      </div>
+
+      {/* Compatibility Score */}
+      <div className="mb-6 p-4 bg-white/5 rounded-lg">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-gray-300 font-medium">Movie Compatibility</span>
+          <span className={`font-bold text-lg ${getCompatibilityColor(analysis.compatibility_score)}`}>
+            {analysis.compatibility_score}%
+          </span>
+        </div>
+        <div className="w-full bg-gray-700 rounded-full h-2 mb-2">
+          <div
+            className={`h-2 rounded-full transition-all duration-500 ${
+              analysis.compatibility_score >= 80 ? 'bg-green-500' :
+              analysis.compatibility_score >= 60 ? 'bg-yellow-500' : 'bg-red-500'
+            }`}
+            style={{ width: `${analysis.compatibility_score}%` }}
+          />
+        </div>
+        <p className={`text-sm ${getCompatibilityColor(analysis.compatibility_score)}`}>
+          {getCompatibilityText(analysis.compatibility_score)}
+        </p>
+      </div>
+
+      {/* Favorite Genres */}
+      <div className="mb-6">
+        <h4 className="text-gray-300 font-medium mb-3">Favorite Genres</h4>
+        <div className="flex flex-wrap gap-2">
+          {analysis.favorite_genres.map((genre, index) => (
+            <span
+              key={index}
+              className="px-3 py-1 bg-purple-600/20 text-purple-300 rounded-full text-sm border border-purple-500/30"
+            >
+              {genre}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Personality Traits */}
+      <div className="mb-6">
+        <h4 className="text-gray-300 font-medium mb-3">Personality Traits</h4>
+        <div className="flex flex-wrap gap-2">
+          {analysis.personality_traits.map((trait, index) => (
+            <span
+              key={index}
+              className="px-3 py-1 bg-blue-600/20 text-blue-300 rounded-full text-sm border border-blue-500/30"
+            >
+              {trait}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Viewing Patterns */}
+      <div className="mb-6">
+        <h4 className="text-gray-300 font-medium mb-2">Viewing Patterns</h4>
+        <p className="text-gray-400 text-sm">{analysis.viewing_patterns}</p>
+      </div>
+
+      {/* Taste Analysis */}
+      <div className="mb-6">
+        <h4 className="text-gray-300 font-medium mb-2">Taste Analysis</h4>
+        <p className="text-gray-400 text-sm">{analysis.taste_analysis}</p>
+      </div>
+
+      {/* Recommendations */}
+      <div className="p-4 bg-gradient-to-r from-purple-600/10 to-blue-600/10 rounded-lg border border-purple-500/20">
+        <h4 className="text-purple-300 font-medium mb-2">Movie Recommendations</h4>
+        <p className="text-gray-300 text-sm">{analysis.recommendations}</p>
+      </div>
+    </motion.div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx
new file mode 100644
index 0000000..3f80ae2
--- /dev/null
+++ b/frontend/src/pages/About.jsx
@@ -0,0 +1,180 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { FaFilm, FaBrain, FaUsers, FaStar } from 'react-icons/fa';
+
+export default function About() {
+  const features = [
+    {
+      icon: FaFilm,
+      title: "Movie Discovery",
+      description: "Explore thousands of movies with detailed information, ratings, and reviews from our community."
+    },
+    {
+      icon: FaBrain,
+      title: "AI-Powered Recommendations",
+      description: "Get personalized movie recommendations using advanced AI that understands your preferences."
+    },
+    {
+      icon: FaUsers,
+      title: "Community Forum",
+      description: "Join discussions, share opinions, and connect with fellow movie enthusiasts worldwide."
+    },
+    {
+      icon: FaStar,
+      title: "Profile Analysis",
+      description: "Analyze movie personalities and discover compatibility with other users based on preferences."
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-20">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        {/* Hero Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center mb-16"
+        >
+          <h1 className="text-4xl md:text-6xl font-bold mb-6">
+            About{' '}
+            <span className="bg-gradient-to-r from-red-500 to-red-700 text-transparent bg-clip-text">
+              RedPill
+            </span>
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto leading-relaxed">
+            RedPill is a modern movie platform that combines the power of artificial intelligence 
+            with community-driven content to create the ultimate movie discovery experience.
+          </p>
+        </motion.div>
+
+        {/* Mission Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="mb-16"
+        >
+          <div className="bg-gradient-to-r from-red-500/10 to-red-700/10 rounded-2xl p-8 border border-red-500/20">
+            <h2 className="text-3xl font-bold mb-6 text-center">Our Mission</h2>
+            <p className="text-lg text-gray-600 dark:text-gray-400 text-center max-w-4xl mx-auto leading-relaxed">
+              We believe that movies are more than entertainment – they're cultural experiences that bring people together. 
+              Our mission is to help movie lovers discover their next favorite film through intelligent recommendations, 
+              meaningful discussions, and personalized insights that understand your unique taste in cinema.
+            </p>
+          </div>
+        </motion.div>
+
+        {/* Features Grid */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="mb-16"
+        >
+          <h2 className="text-3xl font-bold text-center mb-12">What Makes Us Special</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {features.map((feature, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.6 + index * 0.1 }}
+                className="bg-white/5 dark:bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-gray-200 dark:border-white/10 hover:border-red-500/50 transition-all duration-300"
+              >
+                <feature.icon className="text-red-500 text-3xl mb-4" />
+                <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
+                <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
+                  {feature.description}
+                </p>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Technology Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.8 }}
+          className="mb-16"
+        >
+          <h2 className="text-3xl font-bold text-center mb-8">Powered by Advanced Technology</h2>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h3 className="text-2xl font-semibold mb-4">AI-Driven Insights</h3>
+              <p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
+                RedPill uses cutting-edge artificial intelligence to analyze your movie preferences, 
+                viewing patterns, and reviews. Our AI understands not just what you watch, but why you love it, 
+                enabling us to provide remarkably accurate recommendations and personality insights.
+              </p>
+              <ul className="space-y-2 text-gray-600 dark:text-gray-400">
+                <li className="flex items-center">
+                  <span className="w-2 h-2 bg-red-500 rounded-full mr-3"></span>
+                  Personalized movie recommendations
+                </li>
+                <li className="flex items-center">
+                  <span className="w-2 h-2 bg-red-500 rounded-full mr-3"></span>
+                  Movie personality analysis
+                </li>
+                <li className="flex items-center">
+                  <span className="w-2 h-2 bg-red-500 rounded-full mr-3"></span>
+                  Compatibility matching with other users
+                </li>
+                <li className="flex items-center">
+                  <span className="w-2 h-2 bg-red-500 rounded-full mr-3"></span>
+                  Intelligent quiz generation
+                </li>
+              </ul>
+            </div>
+            <div className="bg-gradient-to-br from-red-500/20 to-red-700/20 rounded-2xl p-8 border border-red-500/30">
+              <h4 className="text-xl font-semibold mb-4">Technical Stack</h4>
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <h5 className="font-medium text-red-400 mb-2">Frontend</h5>
+                  <ul className="space-y-1 text-gray-400">
+                    <li>React.js</li>
+                    <li>Tailwind CSS</li>
+                    <li>Framer Motion</li>
+                    <li>Vite</li>
+                  </ul>
+                </div>
+                <div>
+                  <h5 className="font-medium text-red-400 mb-2">Backend</h5>
+                  <ul className="space-y-1 text-gray-400">
+                    <li>Laravel PHP</li>
+                    <li>MySQL</li>
+                    <li>OpenRouter AI</li>
+                    <li>RESTful API</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Community Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 1.0 }}
+          className="text-center"
+        >
+          <h2 className="text-3xl font-bold mb-6">Join Our Community</h2>
+          <p className="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto mb-8 leading-relaxed">
+            Whether you're a casual movie watcher or a dedicated cinephile, RedPill welcomes everyone. 
+            Join thousands of movie lovers who are already discovering their next favorite films and 
+            connecting over shared cinematic experiences.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <button className="px-8 py-3 bg-gradient-to-r from-red-500 to-red-700 text-white font-medium rounded-xl hover:from-red-600 hover:to-red-800 transition-all duration-300 transform hover:scale-105">
+              Get Started Today
+            </button>
+            <button className="px-8 py-3 border border-red-500 text-red-500 hover:bg-red-500 hover:text-white font-medium rounded-xl transition-all duration-300">
+              Learn More
+            </button>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Contact.jsx b/frontend/src/pages/Contact.jsx
new file mode 100644
index 0000000..a1f5ba1
--- /dev/null
+++ b/frontend/src/pages/Contact.jsx
@@ -0,0 +1,305 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { 
+  FaGithub, 
+  FaLinkedin, 
+  FaEnvelope, 
+  FaPhone, 
+  FaMapMarkerAlt,
+  FaTwitter,
+  FaFacebook,
+  FaInstagram
+} from 'react-icons/fa';
+
+export default function Contact() {
+  const teamMembers = [
+    {
+      name: "Sakibul Hassan Shovon",
+      role: "Full Stack Developer & Project Lead",
+      email: "shovon@redpill.com",
+      github: "https://github.com/sakibul-shovon",
+      linkedin: "https://linkedin.com/in/sakibul-hassan-shovon",
+      twitter: "https://twitter.com/shovon_dev",
+      bio: "Passionate full-stack developer specializing in React, Laravel, and AI integration. Leading the development of RedPill's innovative movie recommendation platform.",
+      skills: ["React", "Laravel", "JavaScript", "PHP", "AI Integration", "UI/UX Design"]
+    },
+    {
+      name: "Md. Iftekhar Zawad",
+      role: "Backend Developer & Database Architect",
+      email: "zawad@redpill.com",
+      github: "https://github.com/iftekharzawad",
+      linkedin: "https://linkedin.com/in/iftekhar-zawad",
+      twitter: "https://twitter.com/zawad_dev",
+      bio: "Expert backend developer focused on API development, database optimization, and system architecture. Ensuring RedPill's scalable and secure infrastructure.",
+      skills: ["Laravel", "MySQL", "API Development", "System Architecture", "Database Design", "DevOps"]
+    }
+  ];
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.3
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 }
+  };
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-20">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center mb-16"
+        >
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">
+            Contact{' '}
+            <span className="bg-gradient-to-r from-red-500 to-red-700 text-transparent bg-clip-text">
+              Us
+            </span>
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+            Meet the passionate developers behind RedPill. We're here to help and would love to hear from you!
+          </p>
+        </motion.div>
+
+        {/* Team Section */}
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          className="mb-16"
+        >
+          <h2 className="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">
+            Our Team
+          </h2>
+          
+          <div className="grid md:grid-cols-2 gap-8">
+            {teamMembers.map((member, index) => (
+              <motion.div
+                key={index}
+                variants={itemVariants}
+                className="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 border border-gray-200 dark:border-gray-800 hover:shadow-xl transition-all duration-300"
+              >
+                <div className="text-center mb-6">
+                  <div className="w-24 h-24 bg-gradient-to-r from-red-500 to-red-700 rounded-full mx-auto mb-4 flex items-center justify-center text-white text-2xl font-bold">
+                    {member.name.split(' ').map(n => n[0]).join('')}
+                  </div>
+                  <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                    {member.name}
+                  </h3>
+                  <p className="text-red-600 dark:text-red-400 font-semibold mb-4">
+                    {member.role}
+                  </p>
+                </div>
+
+                <p className="text-gray-600 dark:text-gray-400 mb-6 text-center">
+                  {member.bio}
+                </p>
+
+                {/* Skills */}
+                <div className="mb-6">
+                  <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
+                    Expertise:
+                  </h4>
+                  <div className="flex flex-wrap gap-2">
+                    {member.skills.map((skill, skillIndex) => (
+                      <span
+                        key={skillIndex}
+                        className="px-3 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded-full text-sm"
+                      >
+                        {skill}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Contact Links */}
+                <div className="flex justify-center space-x-4">
+                  <a
+                    href={`mailto:${member.email}`}
+                    className="p-3 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"
+                    title="Email"
+                  >
+                    <FaEnvelope className="w-5 h-5" />
+                  </a>
+                  <a
+                    href={member.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="p-3 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    title="GitHub"
+                  >
+                    <FaGithub className="w-5 h-5" />
+                  </a>
+                  <a
+                    href={member.linkedin}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="p-3 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"
+                    title="LinkedIn"
+                  >
+                    <FaLinkedin className="w-5 h-5" />
+                  </a>
+                  <a
+                    href={member.twitter}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="p-3 bg-blue-100 dark:bg-blue-900/30 text-blue-400 dark:text-blue-400 rounded-full hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"
+                    title="Twitter"
+                  >
+                    <FaTwitter className="w-5 h-5" />
+                  </a>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Contact Information */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.6 }}
+          className="grid md:grid-cols-3 gap-8 mb-16"
+        >
+          <div className="text-center p-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
+            <FaEnvelope className="w-8 h-8 text-red-600 dark:text-red-400 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Email Us</h3>
+            <p className="text-gray-600 dark:text-gray-400">support@redpill.com</p>
+            <p className="text-gray-600 dark:text-gray-400">contact@redpill.com</p>
+          </div>
+
+          <div className="text-center p-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
+            <FaMapMarkerAlt className="w-8 h-8 text-red-600 dark:text-red-400 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Location</h3>
+            <p className="text-gray-600 dark:text-gray-400">Dhaka, Bangladesh</p>
+            <p className="text-gray-600 dark:text-gray-400">Remote Team</p>
+          </div>
+
+          <div className="text-center p-6 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
+            <FaPhone className="w-8 h-8 text-red-600 dark:text-red-400 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Response Time</h3>
+            <p className="text-gray-600 dark:text-gray-400">Within 24 hours</p>
+            <p className="text-gray-600 dark:text-gray-400">Monday - Friday</p>
+          </div>
+        </motion.div>
+
+        {/* Project Information */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.8 }}
+          className="bg-gradient-to-r from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 rounded-xl p-8 border border-red-200 dark:border-red-800/50"
+        >
+          <div className="text-center">
+            <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">
+              About RedPill Project
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-400 mb-6 max-w-3xl mx-auto">
+              RedPill is an innovative movie discovery platform that combines the power of artificial intelligence 
+              with social features to create a personalized cinema experience. Our mission is to help movie lovers 
+              discover their next favorite film through intelligent recommendations and community insights.
+            </p>
+            
+            <div className="grid md:grid-cols-2 gap-8 mt-8">
+              <div>
+                <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-white">
+                  🎬 What We Do
+                </h3>
+                <ul className="text-gray-600 dark:text-gray-400 space-y-2">
+                  <li>• AI-powered movie recommendations</li>
+                  <li>• Personality analysis through movie preferences</li>
+                  <li>• Social movie discovery platform</li>
+                  <li>• Interactive movie quizzes and reviews</li>
+                </ul>
+              </div>
+              
+              <div>
+                <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-white">
+                  🚀 Our Technology
+                </h3>
+                <ul className="text-gray-600 dark:text-gray-400 space-y-2">
+                  <li>• React.js Frontend with Tailwind CSS</li>
+                  <li>• Laravel PHP Backend</li>
+                  <li>• OpenRouter AI Integration</li>
+                  <li>• MySQL Database</li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="mt-8 flex justify-center space-x-4">
+              <a
+                href="https://github.com/redpill-movie-platform"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="px-6 py-3 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors flex items-center space-x-2"
+              >
+                <FaGithub className="w-5 h-5" />
+                <span>View on GitHub</span>
+              </a>
+              <a
+                href="/about"
+                className="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+              >
+                Learn More
+              </a>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Social Links */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 1.0 }}
+          className="text-center mt-16"
+        >
+          <h3 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
+            Follow Our Journey
+          </h3>
+          <div className="flex justify-center space-x-6">
+            <a
+              href="https://twitter.com/redpill_platform"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-4 bg-blue-100 dark:bg-blue-900/30 text-blue-500 dark:text-blue-400 rounded-full hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"
+            >
+              <FaTwitter className="w-6 h-6" />
+            </a>
+            <a
+              href="https://facebook.com/redpill.platform"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-4 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"
+            >
+              <FaFacebook className="w-6 h-6" />
+            </a>
+            <a
+              href="https://instagram.com/redpill_platform"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-4 bg-pink-100 dark:bg-pink-900/30 text-pink-500 dark:text-pink-400 rounded-full hover:bg-pink-200 dark:hover:bg-pink-900/50 transition-colors"
+            >
+              <FaInstagram className="w-6 h-6" />
+            </a>
+            <a
+              href="https://github.com/redpill-movie-platform"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+            >
+              <FaGithub className="w-6 h-6" />
+            </a>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Landing.jsx b/frontend/src/pages/Landing.jsx
index 52ae880..22989d2 100644
--- a/frontend/src/pages/Landing.jsx
+++ b/frontend/src/pages/Landing.jsx
@@ -134,7 +134,6 @@ export default function Landing() {
   const [loading, setLoading] = useState({ trending: true, topRated: true, recommended: true, genres: true });
   const [loadingReviews, setLoadingReviews] = useState(true);
   const [searchTerm, setSearchTerm] = useState("");
-  const [gotQuote, setGotQuote] = useState(null);
 
   useEffect(() => {
     (async () => {
@@ -161,19 +160,6 @@ export default function Landing() {
     })();
   }, []);
 
-  useEffect(() => {
-    fetch('https://api.gameofthronesquotes.xyz/v1/random')
-      .then(res => res.json())
-      .then(data => {
-        if (Array.isArray(data) && data.length > 0) {
-          setGotQuote(data[0]);
-        } else if (data.sentence) {
-          setGotQuote(data);
-        }
-      })
-      .catch(() => setGotQuote(null));
-  }, []);
-
   useEffect(() => {
     getRecentReviews()
       .then(res => {
@@ -329,24 +315,6 @@ export default function Landing() {
             </div>
           )}
         </section>
-
-        <footer className="mt-14 border-t border-gray-200/20 dark:border-white/10 pt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
-          <div className="flex flex-wrap items-center justify-center gap-4">
-            <Link to="/about" className="hover:underline">About</Link>
-            <Link to="/contact" className="hover:underline">Contact</Link>
-            <Link to="/terms" className="hover:underline">Terms</Link>
-            <Link to="/privacy" className="hover:underline">Privacy</Link>
-          </div>
-          {gotQuote && (
-            <div className="mt-4 italic text-base text-gray-800 dark:text-gray-200">
-              <span>❝{gotQuote.sentence}❞</span>
-              {gotQuote.character && (
-                <span className="block mt-1 text-xs text-gray-500 dark:text-gray-400">— {gotQuote.character.name}</span>
-              )}
-            </div>
-          )}
-          <p className="mt-3 text-gray-500 dark:text-gray-500">&copy; {new Date().getFullYear()} RedPill. All rights reserved.</p>
-        </footer>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/Privacy.jsx b/frontend/src/pages/Privacy.jsx
new file mode 100644
index 0000000..7c7d46d
--- /dev/null
+++ b/frontend/src/pages/Privacy.jsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export default function Privacy() {
+  const lastUpdated = "September 20, 2025";
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-20">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-12"
+        >
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">
+            Privacy{' '}
+            <span className="bg-gradient-to-r from-red-500 to-red-700 text-transparent bg-clip-text">
+              Policy
+            </span>
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            Last updated: {lastUpdated}
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="prose prose-gray dark:prose-invert max-w-none"
+        >
+          <div className="space-y-8">
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">1. Information We Collect</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                We collect information you provide directly to us, such as when you create an account, use our services, or contact us:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li><strong>Account Information:</strong> Username, email address, and password</li>
+                <li><strong>Profile Information:</strong> Bio, preferences, and profile picture (optional)</li>
+                <li><strong>Movie Data:</strong> Watchlists, watched movies, ratings, and reviews</li>
+                <li><strong>Community Content:</strong> Forum posts, comments, and interactions</li>
+                <li><strong>Usage Information:</strong> How you interact with our platform and features</li>
+              </ul>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">2. How We Use Your Information</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                We use the information we collect to:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li>Provide, maintain, and improve our services</li>
+                <li>Generate personalized movie recommendations using AI</li>
+                <li>Analyze your movie preferences for personality insights</li>
+                <li>Enable community features like forums and user interactions</li>
+                <li>Send you updates and notifications about our service</li>
+                <li>Respond to your comments, questions, and customer service requests</li>
+                <li>Monitor and analyze trends and usage patterns</li>
+              </ul>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">3. AI-Powered Features and Data Processing</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                RedPill uses artificial intelligence to enhance your experience:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li><strong>Movie Recommendations:</strong> We analyze your viewing history and preferences to suggest movies</li>
+                <li><strong>Profile Analysis:</strong> Our AI examines your movie choices to determine personality traits and compatibility</li>
+                <li><strong>Content Generation:</strong> AI helps generate quizzes and personalized content</li>
+                <li><strong>Data Processing:</strong> We may process your data using third-party AI services (OpenRouter) while maintaining privacy</li>
+              </ul>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mt-4">
+                <strong>Note:</strong> AI analysis is performed for entertainment and personalization purposes only. 
+                We do not use this information for any other purposes without your consent.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">4. Information Sharing and Disclosure</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                We do not sell, trade, or otherwise transfer your personal information to third parties, except in the following circumstances:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li><strong>Public Content:</strong> Reviews, forum posts, and profile information you choose to make public</li>
+                <li><strong>Service Providers:</strong> Third-party services that help us operate our platform (with privacy protections)</li>
+                <li><strong>Legal Requirements:</strong> When required by law or to protect our rights and safety</li>
+                <li><strong>Aggregated Data:</strong> Non-personally identifiable information for analytics and improvements</li>
+              </ul>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">5. Data Security</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                We implement appropriate security measures to protect your personal information against unauthorized access, 
+                alteration, disclosure, or destruction. This includes encryption of sensitive data, secure servers, 
+                and regular security assessments. However, no method of transmission over the internet is 100% secure.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">6. Your Privacy Rights</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                You have the right to:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li>Access and review your personal information</li>
+                <li>Update or correct your account information</li>
+                <li>Delete your account and associated data</li>
+                <li>Opt out of certain communications</li>
+                <li>Control privacy settings for your profile and content</li>
+                <li>Request a copy of your data in a portable format</li>
+              </ul>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">7. Cookies and Tracking</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                We use cookies and similar tracking technologies to collect and track information about your use of our service. 
+                Cookies help us remember your preferences, improve functionality, and analyze usage patterns. 
+                You can control cookie settings through your browser.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">8. Children's Privacy</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                Our service is not intended for children under 13 years of age. We do not knowingly collect personal information 
+                from children under 13. If we become aware that we have collected personal information from a child under 13, 
+                we will take steps to remove that information.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">9. Third-Party Services</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                Our service may contain links to third-party websites or integrate with third-party services:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li>Movie database providers for film information</li>
+                <li>AI services for recommendations and analysis</li>
+                <li>Authentication services for secure login</li>
+              </ul>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mt-4">
+                These third-party services have their own privacy policies, and we are not responsible for their practices.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">10. Changes to This Privacy Policy</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                We may update this Privacy Policy from time to time. We will notify you of any material changes by posting 
+                the new Privacy Policy on this page and updating the "Last updated" date. 
+                We encourage you to review this Privacy Policy periodically.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">11. Contact Us</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                If you have any questions about this Privacy Policy or our privacy practices, please contact us through our 
+                Contact page or reach out to our development team. We are committed to addressing your privacy concerns promptly.
+              </p>
+            </section>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Terms.jsx b/frontend/src/pages/Terms.jsx
new file mode 100644
index 0000000..d7d6201
--- /dev/null
+++ b/frontend/src/pages/Terms.jsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export default function Terms() {
+  const lastUpdated = "September 20, 2025";
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-20">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-12"
+        >
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">
+            Terms of{' '}
+            <span className="bg-gradient-to-r from-red-500 to-red-700 text-transparent bg-clip-text">
+              Service
+            </span>
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            Last updated: {lastUpdated}
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="prose prose-gray dark:prose-invert max-w-none"
+        >
+          <div className="space-y-8">
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">1. Acceptance of Terms</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                By accessing and using RedPill ("the Service"), you accept and agree to be bound by the terms and provision of this agreement. 
+                If you do not agree to abide by the above, please do not use this service.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">2. Description of Service</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                RedPill is a movie discovery platform that provides:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li>Movie information, ratings, and reviews</li>
+                <li>AI-powered movie recommendations</li>
+                <li>Community forums for movie discussions</li>
+                <li>User profile analysis and compatibility features</li>
+                <li>Watchlist and movie tracking capabilities</li>
+              </ul>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">3. User Accounts</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                To access certain features of the Service, you must register for an account. You agree to:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li>Provide accurate, current, and complete information during registration</li>
+                <li>Maintain and promptly update your account information</li>
+                <li>Maintain the security of your password and account</li>
+                <li>Accept responsibility for all activities under your account</li>
+              </ul>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">4. User Content and Conduct</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                You are responsible for all content you post, including reviews, forum posts, and comments. You agree not to:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li>Post content that is illegal, harmful, threatening, abusive, defamatory, or offensive</li>
+                <li>Impersonate any person or entity or misrepresent your affiliation</li>
+                <li>Post spam, duplicate content, or irrelevant material</li>
+                <li>Violate any applicable laws or regulations</li>
+                <li>Interfere with or disrupt the Service or servers</li>
+              </ul>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">5. AI-Powered Features</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
+                RedPill uses artificial intelligence to provide recommendations and analysis. You understand that:
+              </p>
+              <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 ml-4">
+                <li>AI recommendations are based on algorithms and may not always reflect personal preferences</li>
+                <li>Profile analysis features are for entertainment and social purposes only</li>
+                <li>AI-generated content may not be 100% accurate</li>
+                <li>We continuously improve our AI systems based on user interactions</li>
+              </ul>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">6. Intellectual Property</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                The Service and its original content, features, and functionality are owned by RedPill and are protected by 
+                international copyright, trademark, patent, trade secret, and other intellectual property laws. 
+                Movie data is provided by third-party services and remains the property of their respective owners.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">7. Privacy</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                Your privacy is important to us. Please review our Privacy Policy, which also governs your use of the Service, 
+                to understand our practices regarding your personal information.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">8. Termination</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, 
+                under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">9. Disclaimer</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                The information on this Service is provided on an "as is" basis. RedPill disclaims all warranties, 
+                express or implied, including but not limited to implied warranties of merchantability and fitness for a particular purpose.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">10. Changes to Terms</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                We reserve the right to modify or replace these Terms at any time. If a revision is material, 
+                we will provide at least 30 days' notice prior to any new terms taking effect.
+              </p>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">11. Contact Information</h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                If you have any questions about these Terms of Service, please contact us through our Contact page or 
+                reach out to our development team on GitHub.
+              </p>
+            </section>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/UserProfile.jsx b/frontend/src/pages/UserProfile.jsx
index c99c6f5..c35e2c4 100644
--- a/frontend/src/pages/UserProfile.jsx
+++ b/frontend/src/pages/UserProfile.jsx
@@ -2,12 +2,16 @@ import React, { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { usersApi } from '../api/usersApi';
 import { getWatchlist, getWatched } from '../api/watchlist';
-import { FaFilm, FaStar, FaComment, FaThumbsUp, FaBookmark } from 'react-icons/fa';
+import { FaFilm, FaStar, FaComment, FaThumbsUp, FaBookmark, FaBrain } from 'react-icons/fa';
 import UserReviewsSection from './UserReviewsSection';
 import UserForumPostsSection from './UserForumPostsSection';
+import UserProfileAnalysis from '../components/UserProfileAnalysis';
+import { analyzeUserProfile } from '../services/profileAnalysis';
+import { useUser } from '../context/UserContext';
 
 export default function UserProfile() {
     const { id } = useParams(); // if visiting /profile/:id
+    const { user: currentUser } = useUser(); // Get current logged in user
     const [profile, setProfile] = useState(null);
     const [watchlist, setWatchlist] = useState([]);
     const [watched, setWatched] = useState([]);
@@ -15,6 +19,14 @@ export default function UserProfile() {
     const [forumPosts, setForumPosts] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    
+    // Analysis states
+    const [analysis, setAnalysis] = useState(null);
+    const [analysisLoading, setAnalysisLoading] = useState(false);
+    const [showAnalysis, setShowAnalysis] = useState(false);
+
+    // Check if this is the current user's own profile
+    const isOwnProfile = !id || (currentUser && profile && currentUser.id === profile.id);
 
     useEffect(() => {
         fetchProfileData();
@@ -61,6 +73,33 @@ export default function UserProfile() {
         }
     };
 
+    const handleAnalyzeProfile = async () => {
+        if (!profile || isOwnProfile || analysisLoading) return;
+        
+        setAnalysisLoading(true);
+        try {
+            const userData = {
+                ...profile,
+                watchlist: watchlist,
+                watchedMovies: watched,
+                reviews: reviews
+            };
+            
+            const result = await analyzeUserProfile(userData);
+            setAnalysis(result);
+            setShowAnalysis(true);
+        } catch (error) {
+            console.error('Analysis failed:', error);
+            // Could show a toast error here
+        } finally {
+            setAnalysisLoading(false);
+        }
+    };
+
+    const handleCloseAnalysis = () => {
+        setShowAnalysis(false);
+    };
+
 
 
     if (loading) return <LoadingScreen />;
@@ -77,6 +116,42 @@ export default function UserProfile() {
                     reviewsCount={profile.reviews_count || 0}
                     forumPostsCount={profile.forum_posts_count || 0}
                 />
+                
+                {/* AI Analysis Button - Only show for other users */}
+                {!isOwnProfile && (
+                    <div className="mb-8">
+                        {!showAnalysis ? (
+                            <div className="text-center">
+                                <button
+                                    onClick={handleAnalyzeProfile}
+                                    disabled={analysisLoading}
+                                    className="inline-flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 disabled:from-gray-600 disabled:to-gray-700 text-white font-medium rounded-xl transition-all duration-300 transform hover:scale-105 disabled:scale-100 disabled:cursor-not-allowed"
+                                >
+                                    {analysisLoading ? (
+                                        <>
+                                            <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                                            Analyzing Movie Personality...
+                                        </>
+                                    ) : (
+                                        <>
+                                            <FaBrain className="text-lg" />
+                                            Analyze Movie Personality
+                                        </>
+                                    )}
+                                </button>
+                                <p className="text-gray-400 text-sm mt-2">
+                                    Discover {profile.name}'s movie preferences and compatibility
+                                </p>
+                            </div>
+                        ) : (
+                            <UserProfileAnalysis 
+                                analysis={analysis}
+                                onClose={handleCloseAnalysis}
+                            />
+                        )}
+                    </div>
+                )}
+                
                 <MoviesSection title="Watchlist" movies={watchlist} linkPrefix="/movies" />
                 <MoviesSection title="Watched Movies" movies={watched} linkPrefix="/movies" />                
                 <UserReviewsSection userId={profile.id} />
diff --git a/frontend/src/services/profileAnalysis.js b/frontend/src/services/profileAnalysis.js
new file mode 100644
index 0000000..6dd642a
--- /dev/null
+++ b/frontend/src/services/profileAnalysis.js
@@ -0,0 +1,140 @@
+const API_KEY = import.meta.env.VITE_OPENROUTER_API_KEY;
+
+// Analyze user profile based on their movie preferences
+export async function analyzeUserProfile(userData) {
+  try {
+    console.log("🎭 Analyzing user profile...", userData.name);
+    
+    // Prepare user data for analysis
+    const watchlist = userData.watchlist || [];
+    const watchedList = userData.watchedMovies || [];
+    const reviews = userData.reviews || [];
+    
+    // Create analysis prompt
+    const prompt = `
+Analyze this user's movie preferences and personality based on their movie choices, watchlist, and reviews:
+
+USER: ${userData.name}
+
+WATCHLIST (${watchlist.length} movies):
+${watchlist.slice(0, 10).map(movie => `- ${movie.title} (${movie.release_date?.slice(0,4)}) - ${movie.genres?.map(g => g.name).join(', ')}`).join('\n')}
+
+WATCHED MOVIES (${watchedList.length} movies):
+${watchedList.slice(0, 10).map(movie => `- ${movie.title} (${movie.release_date?.slice(0,4)}) - ${movie.genres?.map(g => g.name).join(', ')}`).join('\n')}
+
+REVIEWS (${reviews.length} reviews):
+${reviews.slice(0, 5).map(review => `- ${review.movie_title}: "${review.content}" (Rating: ${review.rating}/10)`).join('\n')}
+
+Based on this data, provide a personality analysis in the following JSON format:
+{
+  "personality_type": "Movie Enthusiast/Casual Viewer/Genre Specialist/etc.",
+  "favorite_genres": ["Genre1", "Genre2", "Genre3"],
+  "viewing_patterns": "Description of their viewing habits",
+  "taste_analysis": "Analysis of their movie taste and preferences",
+  "personality_traits": ["Trait1", "Trait2", "Trait3"],
+  "recommendations": "What type of movies they might enjoy next",
+  "compatibility_score": 85,
+  "summary": "A brief summary of this person as a movie lover"
+}
+
+Important: Return ONLY valid JSON, no markdown or extra text.
+`;
+
+    const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${API_KEY}`,
+        "HTTP-Referer": window.location.origin,
+        "X-Title": "RedPill Movie Platform"
+      },
+      body: JSON.stringify({
+        model: "deepseek/deepseek-chat-v3.1",
+        messages: [
+          {
+            role: "system",
+            content: "You are an expert movie psychologist who can analyze people's personalities based on their movie preferences, watchlists, and reviews. You understand how movie choices reflect personality traits, emotional preferences, and lifestyle patterns."
+          },
+          {
+            role: "user",
+            content: prompt
+          }
+        ],
+        temperature: 0.7,
+        max_tokens: 1000
+      })
+    });
+
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+
+    const data = await response.json();
+    
+    if (!data.choices?.[0]?.message?.content) {
+      throw new Error("Invalid API response");
+    }
+
+    // Parse AI response
+    const analysisText = data.choices[0].message.content;
+    
+    try {
+      // Clean and parse JSON
+      const cleanResponse = analysisText
+        .replace(/```json|```/g, '')
+        .trim();
+      
+      const analysis = JSON.parse(cleanResponse);
+      
+      console.log("✅ Profile analysis completed:", analysis);
+      return analysis;
+      
+    } catch (parseError) {
+      console.error("Failed to parse AI response:", parseError);
+      return generateFallbackAnalysis(userData);
+    }
+
+  } catch (error) {
+    console.error("Profile analysis error:", error);
+    return generateFallbackAnalysis(userData);
+  }
+}
+
+// Fallback analysis when AI fails
+function generateFallbackAnalysis(userData) {
+  const watchlist = userData.watchlist || [];
+  const watchedList = userData.watchedMovies || [];
+  const reviews = userData.reviews || [];
+  
+  // Basic genre analysis
+  const allGenres = [...watchlist, ...watchedList].flatMap(movie => movie.genres?.map(g => g.name) || []);
+  const genreCount = {};
+  allGenres.forEach(genre => {
+    genreCount[genre] = (genreCount[genre] || 0) + 1;
+  });
+  
+  const topGenres = Object.entries(genreCount)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 3)
+    .map(([genre]) => genre);
+
+  const totalMovies = watchlist.length + watchedList.length;
+  let personalityType = "Movie Enthusiast";
+  
+  if (totalMovies < 10) {
+    personalityType = "Casual Viewer";
+  } else if (totalMovies > 50) {
+    personalityType = "Movie Buff";
+  }
+
+  return {
+    personality_type: personalityType,
+    favorite_genres: topGenres.length > 0 ? topGenres : ["Drama", "Action", "Comedy"],
+    viewing_patterns: `Has ${watchedList.length} watched movies and ${watchlist.length} movies in watchlist`,
+    taste_analysis: `Shows interest in ${topGenres.join(', ') || 'various genres'} with ${reviews.length} reviews written`,
+    personality_traits: ["Movie Lover", "Thoughtful Viewer", "Genre Explorer"],
+    recommendations: "Based on their preferences, they might enjoy similar movies in their favorite genres",
+    compatibility_score: Math.min(85, totalMovies * 2),
+    summary: `A ${personalityType.toLowerCase()} who enjoys ${topGenres[0] || 'various'} movies and has built a collection of ${totalMovies} movies`
+  };
+}
\ No newline at end of file