PROJECT: RAWNAF AI ASSISTANT - FULL STACK SAAS
TAGLINE: "Solve Any Work with AI Power"
TECH: React.js + Tailwind | Node.js + Express | MongoDB | JWT


INSTALLATION STEPS:
1. Create folder: rawnaf-ai-assistant
2. Create all files below with exact paths
3. cd server && npm install
4. cd client && npm install
5. Create server/.env from.env.example below
6. Create client/.env with REACT_APP_API_URL=http://localhost:5000/api
7. Run: cd server && npm run dev
8. Run: cd client && npm start
9. Login admin: admin@rawnaf.com / admin123

DEPLOY: Vercel for /client, Render/Railway for /server

FILE:.env.example

PORT=5000
MONGO_URI=mongodb+srv://user:pass@cluster.mongodb.net/rawnaf
JWT_SECRET=rawnaf_secret_key_change_in_production_2024
CLIENT_URL=http://localhost:3000
ADMIN_EMAIL=admin@rawnaf.com
ADMIN_PASSWORD=admin123
OPENAI_API_KEY=sk-xxx_optional_for_ai_features

FILE:.gitignore

node_modules
.env
client/.env
client/build
server/uploads/*
!server/uploads/.gitkeep
.DS_Store

FILE: server/package.json

{
  "name": "rawnaf-server",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "express-rate-limit": "^7.4.0",
    "express-validator": "^7.1.0",
    "jsonwebtoken": "^9.0.2",
    "mongoose": "^8.5.1",
    "multer": "^1.4.5-lts.1",
    "openai": "^4.52.7"
  },
  "devDependencies": {
    "nodemon": "^3.1.4"
  }
}

FILE: server/server.js

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const rateLimit = require('express-rate-limit');
const path = require('path');
const connectDB = require('./config/db');
const app = express();
connectDB();
app.use(cors({ origin: process.env.CLIENT_URL, credentials: true }));
app.use(express.json());
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
const limiter = rateLimit({ windowMs: 15 * 60 * 1000, max: 100 });
app.use('/api/', limiter);
app.use('/api/auth', require('./routes/auth'));
app.use('/api/services', require('./routes/services'));
app.use('/api/payments', require('./routes/payments'));
app.use('/api/ads', require('./routes/ads'));
app.use('/api/admin', require('./routes/admin'));
app.use('/api/ai', require('./routes/ai'));
app.get('/', (req, res) => res.json({ msg: 'Rawnaf AI Assistant API Running' }));
const Service = require('./models/Service');
setTimeout(async () => {
  const count = await Service.countDocuments();
  if (count === 0) {
    await Service.insertMany([
      { title: 'AI Marketing', description: 'Auto generate ad campaigns and copy for Facebook, Instagram, Google', price: 2999, features: ['Facebook Ads', 'Instagram Ads', 'Email Campaigns', 'Copy Generator'] },
      { title: 'Social Media Automation', description: 'Auto post to Facebook and Instagram with AI captions', price: 1999, features: ['Schedule Posts', 'Caption Generator', 'Hashtag Research', 'Auto Reply'] },
      { title: 'Data Entry AI', description: 'AI powered data processing and automation', price: 999, features: ['OCR', 'Excel Automation', 'Web Scraping', 'PDF to Excel'] },
      { title: 'Ads Management', description: 'Complete management of your ad accounts', price: 4999, features: ['Strategy', 'Optimization', 'Weekly Reporting', 'A/B Testing'] }
    ]);
  }
}, 2000);
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

FILE: server/config/db.js

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const User = require('../models/User');
const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGO_URI);
    console.log('MongoDB Connected');
    const adminExists = await User.findOne({ email: process.env.ADMIN_EMAIL });
    if (!adminExists) {
      const hashed = await bcrypt.hash(process.env.ADMIN_PASSWORD, 10);
      await User.create({ name: 'Admin', email: process.env.ADMIN_EMAIL, password: hashed, role: 'admin' });
      console.log('Default admin created');
    }
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};
module.exports = connectDB;

FILE: server/middleware/auth.js

const jwt = require('jsonwebtoken');
const User = require('../models/User');
module.exports = async (req, res, next) => {
  const token = req.header('x-auth-token');
  if (!token) return res.status(401).json({ msg: 'No token, access denied' });
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = await User.findById(decoded.id).select('-password');
    if (!req.user) return res.status(401).json({ msg: 'User not found' });
    next();
  } catch (err) {
    res.status(401).json({ msg: 'Token invalid' });
  }
};

FILE: server/middleware/admin.js

module.exports = (req, res, next) => {
  if (req.user && req.user.role === 'admin') {
    next();
  } else {
    res.status(403).json({ msg: 'Admin access required' });
  }
};

FILE: server/models/User.js

const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { type: String, enum: ['user', 'admin'], default: 'user' },
  purchasedServices: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Service' }],
  createdAt: { type: Date, default: Date.now }
});
module.exports = mongoose.model('User', UserSchema);

FILE: server/models/Service.js

const mongoose = require('mongoose');
const ServiceSchema = new mongoose.Schema({
  title: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: Number, required: true },
  features: [String],
  active: { type: Boolean, default: true }
});
module.exports = mongoose.model('Service', ServiceSchema);

FILE: server/models/Payment.js

const mongoose = require('mongoose');
const PaymentSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  service: { type: mongoose.Schema.Types.ObjectId, ref: 'Service', required: true },
  transactionId: { type: String, required: true },
  screenshot: { type: String, required: true },
  status: { type: String, enum: ['pending', 'approved', 'rejected'], default: 'pending' },
  createdAt: { type: Date, default: Date.now }
});
module.exports = mongoose.model('Payment', PaymentSchema);

FILE: server/models/Ad.js

const mongoose = require('mongoose');
const AdSchema = new mongoose.Schema({
  title: { type: String, required: true },
  imageUrl: { type: String, required: true },
  link: String,
  active: { type: Boolean, default: true },
  createdAt: { type: Date, default: Date.now }
});
module.exports = mongoose.model('Ad', AdSchema);

FILE: server/models/Notification.js

const mongoose = require('mongoose');
const NotificationSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
  message: { type: String, required: true },
  read: { type: Boolean, default: false },
  createdAt: { type: Date, default: Date.now }
});
module.exports = mongoose.model('Notification', NotificationSchema);

FILE: server/routes/auth.js

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const { body, validationResult } = require('express-validator');
const User = require('../models/User');
const auth = require('../middleware/auth');
const router = express.Router();
router.post('/register', [
  body('name').notEmpty(),
  body('email').isEmail(),
  body('password').isLength({ min: 6 })
], async (req, res) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });
  const { name, email, password } = req.body;
  try {
    let user = await User.findOne({ email });
    if (user) return res.status(400).json({ msg: 'User already exists' });
    const hashed = await bcrypt.hash(password, 10);
    user = await User.create({ name, email, password: hashed });
    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' });
    res.json({ token, user: { id: user._id, name, email, role: user.role } });
  } catch (err) {
    res.status(500).send('Server error');
  }
});
router.post('/login', async (req, res) => {
  const { email, password } = req.body;
  try {
    const user = await User.findOne({ email });
    if (!user) return res.status(400).json({ msg: 'Invalid credentials' });
    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ msg: 'Invalid credentials' });
    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' });
    res.json({ token, user: { id: user._id, name: user.name, email, role: user.role } });
  } catch (err) {
    res.status(500).send('Server error');
  }
});
router.get('/me', auth, (req, res) => res.json(req.user));
module.exports = router;

FILE: server/routes/services.js

const express = require('express');
const Service = require('../models/Service');
const auth = require('../middleware/auth');
const admin = require('../middleware/admin');
const router = express.Router();
router.get('/', async (req, res) => {
  const services = await Service.find({ active: true });
  res.json(services);
});
router.post('/', [auth, admin], async (req, res) => {
  const service = await Service.create(req.body);
  res.json(service);
});
router.put('/:id', [auth, admin], async (req, res) => {
  const service = await Service.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(service);
});
router.delete('/:id', [auth, admin], async (req, res) => {
  await Service.findByIdAndDelete(req.params.id);
  res.json({ msg: 'Deleted' });
});
module.exports = router;

FILE: server/routes/payments.js

const express = require('express');
const multer = require('multer');
const path = require('path');
const Payment = require('../models/Payment');
const auth = require('../middleware/auth');
const router = express.Router();
const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => cb(null, Date.now() + path.extname(file.originalname))
});
const upload = multer({ storage });
router.post('/', [auth, upload.single('screenshot')], async (req, res) => {
  const { serviceId, transactionId } = req.body;
  const payment = await Payment.create({
    user: req.user.id,
    service: serviceId,
    transactionId,
    screenshot: req.file.filename
  });
  res.json(payment);
});
router.get('/my', auth, async (req, res) => {
  const payments = await Payment.find({ user: req.user.id }).populate('service');
  res.json(payments);
});
module.exports = router;

FILE: server/routes/admin.js

const express = require('express');
const User = require('../models/User');
const Payment = require('../models/Payment');
const Notification = require('../models/Notification');
const auth = require('../middleware/auth');
const admin = require('../middleware/admin');
const router = express.Router();
router.get('/stats', [auth, admin], async (req, res) => {
  const totalUsers = await User.countDocuments({ role: 'user' });
  const totalSales = await Payment.countDocuments({ status: 'approved' });
  const pendingPayments = await Payment.countDocuments({ status: 'pending' });
  res.json({ totalUsers, totalSales, pendingPayments });
});
router.get('/payments', [auth, admin], async (req, res) => {
  const payments = await Payment.find().populate('user', 'name email').populate('service');
  res.json(payments);
});
router.put('/payments/:id/approve', [auth, admin], async (req, res) => {
  const payment = await Payment.findById(req.params.id);
  payment.status = 'approved';
  await payment.save();
  await User.findByIdAndUpdate(payment.user, { $addToSet: { purchasedServices: payment.service } });
  await Notification.create({ user: payment.user, message: 'Your payment was approved. Service unlocked!' });
  res.json(payment);
});
router.put('/payments/:id/reject', [auth, admin], async (req, res) => {
  const payment = await Payment.findByIdAndUpdate(req.params.id, { status: 'rejected' }, { new: true });
  await Notification.create({ user: payment.user, message: 'Your payment was rejected. Please contact support.' });
  res.json(payment);
});
router.get('/users', [auth, admin], async (req, res) => {
  const users = await User.find().select('-password').populate('purchasedServices');
  res.json(users);
});
module.exports = router;

FILE: server/routes/ads.js

const express = require('express');
const Ad = require('../models/Ad');
const auth = require('../middleware/auth');
const admin = require('../middleware/admin');
const router = express.Router();
router.get('/', async (req, res) => {
  const ads = await Ad.find({ active: true });
  res.json(ads);
});
router.post('/', [auth, admin], async (req, res) => {
  const ad = await Ad.create(req.body);
  res.json(ad);
});
router.put('/:id', [auth, admin], async (req, res) => {
  const ad = await Ad.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(ad);
});
router.delete('/:id', [auth, admin], async (req, res) => {
  await Ad.findByIdAndDelete(req.params.id);
  res.json({ msg: 'Deleted' });
});
module.exports = router;

FILE: server/routes/ai.js

const express = require('express');
const { OpenAI } = require('openai');
const auth = require('../middleware/auth');
const User = require('../models/User');
const router = express.Router();
const openai = process.env.OPENAI_API_KEY? new OpenAI({ apiKey: process.env.OPENAI_API_KEY }) : null;
router.post('/generate', auth, async (req, res) => {
  const { prompt, type } = req.body;
  const hasAccess = req.user.purchasedServices.length > 0 || req.user.role === 'admin';
  if (!hasAccess) return res.status(403).json({ msg: 'Purchase a service to use AI features' });
  if (!openai) {
    const demo = {
      'facebook_post': '🚀 Boost your business with AI! Rawnaf AI Assistant handles your social media, sales, and marketing 24/7. Try it now! #AIAssistant #Marketing #Productivity',
      'instagram_caption': 'Solving work with AI power ✨\n1. Automate your social media\n2. Generate content in seconds\n3. Focus on what matters\n#RawnafAI #AIMarketing #ContentCreator',
      'marketing_copy': 'Tired of manual work? Rawnaf AI Assistant is your 24/7 secretary, marketer, and content creator. Generate posts, manage sales, automate tasks. Start solving any work with AI power today.'
    };
    return res.json({ result: demo[type] || 'Demo mode: Connect OpenAI API key for real AI generation.' });
  }
  try {
    const completion = await openai.chat.completions.create({
      model: "gpt-4o-mini",
      messages: [{ role: "user", content: `You are Rawnaf AI Assistant. Generate ${type}: ${prompt}` }],
      max_tokens: 300
    });
    res.json({ result: completion.choices[0].message.content });
  } catch (err) {
    res.status(500).json({ msg: 'AI generation failed' });
  }
});
module.exports = router;

FILE: client/package.json

{
  "name": "rawnaf-client",
  "version": "1.0.0",
  "dependencies": {
    "axios": "^1.7.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.25.1",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.6"
  }
}

FILE: client/tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      colors: {
        primary: '#8B5CF6',
        dark: '#0F0F1E',
        card: '#1A1A2E'
      }
    },
  },
  plugins: [],
}

FILE: client/postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

FILE: client/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Rawnaf AI Assistant - Solve Any Work with AI Power. AI marketing, social automation, ads management." />
  <title>Rawnaf AI Assistant - Solve Any Work with AI Power</title>
<link rel="me" href="https://www.blogger.com/profile/04093134212551408607" />
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>
<!-- --><style type="text/css">@import url(//www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css);
div.b-mobile {display:none;}
</style>

</head>
<body><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
      gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          gapi.iframes.getContext().openChild({
              url: 'https://www.blogger.com/navbar/4826578727714099062?origin\x3dhttps://raahilgamezone.blogspot.com',
              where: document.getElementById("navbar-iframe-container"),
              id: "navbar-iframe"
          });
        }
      });
    </script>
  <div id="root"></div>
</body>
</html>

FILE: client/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
body { @apply bg-dark text-gray-100; }
.btn-primary { @apply bg-primary hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300; }
.btn-secondary { @apply bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg transition duration-300; }
.card { @apply bg-card p-6 rounded-xl border border-gray-800 hover:border-primary transition duration-300; }
.input { @apply w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:border-primary outline-none; }

FILE: client/src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { AuthProvider } from './context/AuthContext';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AuthProvider><App /></AuthProvider>);

FILE: client/src/utils/api.js

import axios from 'axios';
const api = axios.create({ baseURL: process.env.REACT_APP_API_URL });
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers['x-auth-token'] = token;
  return config;
});
export default api;

FILE: client/src/context/AuthContext.jsx

import { createContext, useState, useEffect } from 'react';
import api from '../utils/api';
export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const loadUser = async () => {
      const token = localStorage.getItem('token');
      if (token) {
        try {
          const res = await api.get('/auth/me');
          setUser(res.data);
        } catch {
          localStorage.removeItem('token');
        }
      }
      setLoading(false);
    };
    loadUser();
  }, []);
  const login = async (email, password) => {
    const res = await api.post('/auth/login', { email, password });
    localStorage.setItem('token', res.data.token);
    setUser(res.data.user);
    return res.data;
  };
  const register = async (name, email, password) => {
    const res = await api.post('/auth/register', { name, email, password });
    localStorage.setItem('token', res.data.token);
    setUser(res.data.user);
    return res.data;
  };
  const logout = () => {
    localStorage.removeItem('token');
    setUser(null);
  };
  return <AuthContext.Provider value={{ user, login, register, logout, loading }}>{children}</AuthContext.Provider>;
};

FILE: client/src/components/ProtectedRoute.jsx

import { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { AuthContext } from '../context/AuthContext';
export default function ProtectedRoute({ children }) {
  const { user, loading } = useContext(AuthContext);
  if (loading) return <div className="text-center p-10">Loading...</div>;
  return user? children : <Navigate to="/login" />;
}

FILE: client/src/components/AdminRoute.jsx

import { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { AuthContext } from '../context/AuthContext';
export default function AdminRoute({ children }) {
  const { user, loading } = useContext(AuthContext);
  if (loading) return <div className="text-center p-10">Loading...</div>;
  return user?.role === 'admin'? children : <Navigate to="/" />;
}

FILE: client/src/components/Navbar.jsx

import { Link } from 'react-router-dom';
import { useContext } from 'react';
import { AuthContext } from '../context/AuthContext';
export default function Navbar() {
  const { user, logout } = useContext(AuthContext);
  return (
    <nav className="bg-card border-b border-gray-800 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
        <Link to="/" className="text-2xl font-bold text-primary">Rawnaf AI Assistant</Link>
        <div className="hidden md:flex gap-6 items-center">
          <Link to="/services" className="hover:text-primary">Services</Link>
          <Link to="/pricing" className="hover:text-primary">Pricing</Link>
          <Link to="/about" className="hover:text-primary">About</Link>
          {user? (
            <>
              <Link to="/dashboard" className="hover:text-primary">Dashboard</Link>
              {user.role === 'admin' && <Link to="/admin" className="hover:text-primary">Admin</Link>}
              <button onClick={logout} className="btn-primary">Logout</button>
            </>
          ) : (
            <Link to="/login" className="btn-primary">Login</Link>
          )}
        </div>
      </div>
    </nav>
  );
}

FILE: client/src/components/Footer.jsx

import { Link } from 'react-router-dom';
export default function Footer() {
  return (
    <footer className="bg-card border-t border-gray-800 mt-20">
      <div className="max-w-7xl mx-auto px-4 py-10">
        <div className="grid md:grid-cols-4 gap-8">
          <div>
            <h3 className="text-xl font-bold text-primary mb-4">Rawnaf AI Assistant</h3>
            <p className="text-gray-400">Solve Any Work with AI Power</p>
            <div className="flex gap-4 mt-4">
              <a href="#" className="text-gray-400 hover:text-primary">FB</a>
              <a href="#" className="text-gray-400 hover:text-primary">IG</a>
              <a href="#" className="text-gray-400 hover:text-primary">TW</a>
            </div>
          <div>
            <h4 className="font-bold mb-4">Company</h4>
            <div className="space-y-2">
              <Link to="/about" className="block text-gray-400 hover:text-primary">About Us</Link>
              <Link to="/terms" className="block text-gray-400 hover:text-primary">Terms</Link>
              <Link to="/privacy" className="block text-gray-400 hover:text-primary">Privacy Policy</Link>
            </div>
          <div>
            <h4 className="font-bold mb-4">Services</h4>
            <div className="space-y-2 text-gray-400">
              <p>AI Marketing</p>
              <p>Social Automation</p>
              <p>Ads Management</p>
              <p>Data Entry AI</p>
            </div>
          </div>
          <div>
            <h4 className="font-bold mb-4">Payment Info</h4>
            <p className="text-gray-400">Email: k_rahman10@yahoo.com</p>
            <p className="text-gray-400">bKash: 01969431900</p>
          </div>
        <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
          © 2024 Rawnaf AI Assistant. All rights reserved.
        </div>
      </div>
    </footer>
  );
}

FILE: client/src/components/AdBanner.jsx

import { useEffect, useState } from 'react';
import api from '../utils/api';
export default function AdBanner() {
  const [ads, setAds] = useState([]);
  useEffect(() => {
    api.get('/ads').then(res => setAds(res.data)).catch(() => {});
  }, []);
  if (!ads.length) return null;
  return (
    <div className="my-8">
      {ads.map(ad => (
        <a key={ad._id} href={ad.link} target="_blank" rel="noreferrer">
          <img src={ad.imageUrl} alt={ad.title} className="w-full rounded-xl mb-4" />
        </a>
      ))}
    </div>
  );
}

FILE: client/src/components/ServiceCard.jsx

import { Link } from 'react-router-dom';
export default function ServiceCard({ service }) {
  return (
    <div className="card">
      <h3 className="text-2xl font-bold mb-2 text-primary">{service.title}</h3>
      <p className="text-gray-400 mb-4">{service.description}</p>
      <ul className="mb-6 space-y-2">
        {service.features.map((f, i) => (
          <li key={i} className="flex items-center gap-2">
            <span className="text-primary">✓</span> {f}
          </li>
        ))}
      </ul>
      <div className="flex justify-between items-center">
        <span className="text-3xl font-bold">৳{service.price}</span>
        <Link to={`/payment/${service._id}`} className="btn-primary">Buy Now</Link>
      </div>
    </div>
  );
}

FILE: client/src/App.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './pages/Home';
import Services from './pages/Services';
import Pricing from './pages/Pricing';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import Payment from './pages/Payment';
import AdminPanel from './pages/AdminPanel';
import About from './pages/About';
import Terms from './pages/Terms';
import Privacy from './pages/Privacy';
import ProtectedRoute from './components/ProtectedRoute';
import AdminRoute from './components/AdminRoute';
function App() {
  return (
    <BrowserRouter>
      <div className="min-h-screen flex flex-col">
        <Navbar />
        <main className="flex-grow">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/services" element={<Services />} />
            <Route path="/pricing" element={<Pricing />} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />
            <Route path="/about" element={<About />} />
            <Route path="/terms" element={<Terms />} />
            <Route path="/privacy" element={<Privacy />} />
            <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
            <Route path="/payment/:serviceId" element={<ProtectedRoute><Payment /></ProtectedRoute>} />
            <Route path="/admin" element={<AdminRoute><AdminPanel /></AdminRoute>} />
          </Routes>
        </main>
        <Footer />
      </div>
    </BrowserRouter>
  );
}
export default App;

FILE: client/src/pages/Home.jsx

import { Link } from 'react-router-dom';
import AdBanner from '../components/AdBanner';
export default function Home() {
  return (
    <div>
      <section className="bg-gradient-to-br from-purple-900/20 to-dark py-20">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <h1 className="text-5xl md:text-7xl font-bold mb-6">
            Solve Any Work with <span className="text-primary">AI Power</span>
          </h1>
          <p className="text-xl text-gray-400 mb-8 max-w-3xl mx-auto">
            Rawnaf AI Assistant handles your secretary work, sales, marketing, Facebook posting, Instagram automation, and daily productivity tasks automatically.
          </p>
          <div className="flex gap-4 justify-center">
            <Link to="/services" className="btn-primary text-lg px-8 py-3">Get Started</Link>
            <Link to="/pricing" className="btn-secondary text-lg px-8 py-3">View Pricing</Link>
          </div>
        </div>
      </section>
      <div className="max-w-7xl mx-auto px-4">
        <AdBanner />
        <section className="py-20">
          <h2 className="text-4xl font-bold text-center mb-12">AI Services We Offer</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {['AI Marketing', 'Social Automation', 'Data Entry AI', 'Ads Management'].map(s => (
              <div key={s} className="card text-center">
                <div className="text-5xl mb-4">🤖</div>
                <h3 className="text-xl font-bold mb-2">{s}</h3>
                <p className="text-gray-400">Powered by advanced AI to save you time</p>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

FILE: client/src/pages/Services.jsx

import { useEffect, useState } from 'react';
import api from '../utils/api';
import ServiceCard from '../components/ServiceCard';
export default function Services() {
  const [services, setServices] = useState([]);
  useEffect(() => {
    api.get('/services').then(res => setServices(res.data));
  }, []);
  return (
    <div className="max-w-7xl mx-auto px-4 py-20">
      <h1 className="text-5xl font-bold text-center mb-4">Our AI Services</h1>
      <p className="text-center text-gray-400 mb-12">Choose the perfect AI solution for your business</p>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {services.map(s => <ServiceCard key={s._id} service={s} />)}
      </div>
    </div>
  );
}

FILE: client/src/pages/Pricing.jsx

import { useEffect, useState } from 'react';
import api from '../utils/api';
import ServiceCard from '../components/ServiceCard';
export default function Pricing() {
  const [services, setServices] = useState([]);
  useEffect(() => {
    api.get('/services').then(res => setServices(res.data));
  }, []);
  return (
    <div className="max-w-7xl mx-auto px-4 py-20">
      <h1 className="text-5xl font-bold text-center mb-4">Simple Pricing</h1>
      <p className="text-center text-gray-400 mb-12">One-time payment. Manual bKash process. No hidden fees.</p>
      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
        {services.map(s => <ServiceCard key={s._id} service={s} />)}
      </div>
      <div className="card mt-12 text-center">
        <h3 className="text-2xl font-bold mb-4">Payment Methods</h3>
        <p className="text-gray-400">Email: k_rahman10@yahoo.com</p>
        <p className="text-gray-400">bKash: 01969431900</p>
        <p className="text-sm text-gray-500 mt-4">Send payment, upload screenshot, admin will approve within 24 hours</p>
      </div>
    </div>
  );
}

FILE: client/src/pages/Login.jsx

import { useState, useContext } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { AuthContext } from '../context/AuthContext';
export default function Login() {
  const [form, setForm] = useState({ email: '', password: '' });
  const [error, setError] = useState('');
  const { login } = useContext(AuthContext);
  const nav = useNavigate();
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await login(form.email, form.password);
      nav('/dashboard');
    } catch (err) {
      setError(err.response?.data?.msg || 'Login failed');
    }
  };
  return (
    <div className="max-w-md mx-auto px-4 py-