Merge version_4 into main

Merge version_4 into main

src/app/add-funds/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function AddFundsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "My Orders", id: "/my-orders" },
+              { name: "Add Funds", id: "/add-funds" },
+              { name: "Profile", id: "/profile" },
+              { name: "FAQ", id: "/faq" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{
+              text: "Register",              href: "/register"
+            }}
+          />
+        </div>
+
+        <div className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 bg-background flex items-center justify-center">
+          <div className="max-w-md w-full bg-card p-8 rounded-lg shadow-md border border-border">
+            <h1 className="text-3xl font-bold text-foreground text-center mb-4">Add Funds</h1>
+            <p className="text-md text-muted-foreground text-center mb-8">Top up your account balance securely.</p>
+
+            <form className="space-y-6">
+              <div>
+                <label htmlFor="amount" className="block text-sm font-medium text-foreground">Amount</label>
+                <div className="mt-1">
+                  <input
+                    type="number"
+                    id="amount"
+                    name="amount"
+                    placeholder="Minimum $10.00"
+                    className="block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+                    required
+                    min="10"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="paymentMethod" className="block text-sm font-medium text-foreground">Payment Method</label>
+                <div className="mt-1">
+                  <select
+                    id="paymentMethod"
+                    name="paymentMethod"
+                    className="block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+                    required
+                  >
+                    <option value="">Select a method</option>
+                    <option value="creditCard">Credit Card</option>
+                    <option value="paypal">PayPal</option>
+                    <option value="crypto">Crypto</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <button
+                  type="submit"
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+                >
+                  Add Funds
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Instagram", href: "/services#instagram" },
+                  { label: "YouTube", href: "/services#youtube" },
+                  { label: "TikTok", href: "/services#tiktok" },
+                  { label: "Twitter", href: "/services#twitter" },
+                  { label: "Facebook", href: "/services#facebook" },
+                  { label: "Telegram", href: "/services#telegram" },
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#features" },
+                  { label: "Pricing", href: "/pricing" },
+                  { label: "FAQ", href: "/faq" },
+                  { label: "Contact", href: "/contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Terms of Service", href: "/terms" },
+                  { label: "Privacy Policy", href: "/privacy" },
+                ],
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Blog", href: "#" },
+                  { label: "API Docs", href: "#" },
+                ],
+              },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            logoText="SocBoost"
+            copyrightText="© 2024 SocBoost. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/admin/categories/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminCategoriesPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Categories Management</h2>
+      <p className="text-neutral-300">Content for managing categories will go here.</p>
+    </div>
+  );
+}

src/app/admin/dashboard/layout.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { Home, ShoppingCart, Users, Settings, Package } from "lucide-react";
+
+// Mock authentication check
+const isAuthenticated = () => {
+  // In a real app, this would check tokens, sessions, etc.
+  // For this exercise, we'll simulate a logged-in state.
+  return typeof window !== "undefined" && localStorage.getItem("admin_logged_in") === "true";
+};
+
+const logout = () => {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem("admin_logged_in");
+  }
+};
+
+const adminNavItems = [
+  { name: "Overview", href: "/admin/dashboard/overview", icon: Home },
+  { name: "Services", href: "/admin/dashboard/services", icon: Package },
+  { name: "Orders", href: "/admin/dashboard/orders", icon: ShoppingCart },
+  { name: "Users", href: "/admin/dashboard/users", icon: Users },
+  { name: "Settings", href: "/admin/dashboard/settings", icon: Settings },
+];
+
+export default function AdminDashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isAuth, setIsAuth] = useState(false);
+
+  useEffect(() => {
+    if (!isAuthenticated()) {
+      router.push("/admin/login");
+    } else {
+      setIsAuth(true);
+    }
+  }, [router]);
+
+  const handleLogout = () => {
+    logout();
+    router.push("/admin/login");
+  };
+
+  if (!isAuth) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900">
+        <p className="text-gray-700 dark:text-gray-300">Redirecting to login...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen bg-gray-100 dark:bg-gray-900">
+      {/* Sidebar */}
+      <aside className="w-64 bg-white p-4 shadow-md dark:bg-gray-800">
+        <div className="mb-8 text-2xl font-bold text-gray-900 dark:text-white">
+          Admin Panel
+        </div>
+        <nav>
+          <ul>
+            {adminNavItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = pathname.startsWith(item.href);
+              return (
+                <li key={item.name} className="mb-2">
+                  <Link
+                    href={item.href}
+                    className={`flex items-center rounded-md px-4 py-2 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 ${
+                      isActive ? "bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300" : ""
+                    }`}
+                  >
+                    <Icon className="mr-3 h-5 w-5" />
+                    {item.name}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+        <div className="mt-auto pt-8">
+          <button
+            onClick={handleLogout}
+            className="flex w-full items-center rounded-md px-4 py-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900"
+          >
+            Logout
+          </button>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 p-8">{children}</main>
+    </div>
+  );
+}

src/app/admin/dashboard/overview/page.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { DollarSign, ShoppingCart, Users, TrendingUp } from "lucide-react";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree"; // Re-using existing component
+
+export default function AdminOverviewPage() {
+  const revenueMetrics = [
+    {
+      id: "total_revenue",      icon: DollarSign,
+      title: "Total Revenue",      value: "$1,234,567"},
+    {
+      id: "monthly_revenue",      icon: TrendingUp,
+      title: "Monthly Revenue",      value: "$89,123"},
+    {
+      id: "total_orders",      icon: ShoppingCart,
+      title: "Total Orders",      value: "15,678"},
+    {
+      id: "new_users",      icon: Users,
+      title: "New Users (Last 30 Days)",      value: "450"}
+  ];
+
+  const recentOrders = [
+    {
+      id: "ORD001",      customer: "John Doe",      service: "Instagram Likes",      amount: "$15.00",      status: "Completed",      date: "2023-10-26"},
+    {
+      id: "ORD002",      customer: "Jane Smith",      service: "YouTube Subscribers",      amount: "$50.00",      status: "Pending",      date: "2023-10-25"},
+    {
+      id: "ORD003",      customer: "Alice Johnson",      service: "TikTok Views",      amount: "$10.50",      status: "Completed",      date: "2023-10-25"},
+    {
+      id: "ORD004",      customer: "Bob Brown",      service: "Twitter Retweets",      amount: "$5.00",      status: "Processing",      date: "2023-10-24"},
+    {
+      id: "ORD005",      customer: "Charlie Green",      service: "Facebook Page Likes",      amount: "$20.00",      status: "Completed",      date: "2023-10-24"}
+  ];
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-4xl font-bold text-gray-900 dark:text-white">Dashboard Overview</h1>
+
+      <div className="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
+        <h2 className="mb-4 text-2xl font-semibold text-gray-900 dark:text-white">Revenue Statistics</h2>
+        <MetricCardThree
+          animationType="none" // No animation needed for a static admin view
+          textboxLayout="default"
+          useInvertedBackground={false} // Adjust as needed for admin theme
+          title="Revenue Statistics" // Added required prop
+          description="Overview of key financial metrics for the platform." // Added required prop
+          metrics={revenueMetrics}
+          className="!p-0" // Override padding from default section styling
+          containerClassName="!p-0" // Override padding from default section styling
+          gridClassName="grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" // Ensure grid layout
+          cardClassName="p-4 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-700"
+          valueClassName="text-3xl font-bold text-indigo-600 dark:text-indigo-400"
+          metricTitleClassName="text-lg text-gray-600 dark:text-gray-400"
+          iconContainerClassName="text-indigo-500 dark:text-indigo-300"
+        />
+      </div>
+
+      <div className="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
+        <h2 className="mb-4 text-2xl font-semibold text-gray-900 dark:text-white">Recent Orders</h2>
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-700">
+              <tr>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+                >
+                  Order ID
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+                >
+                  Customer
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+                >
+                  Service
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+                >
+                  Amount
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+                >
+                  Status
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+                >
+                  Date
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-800">
+              {recentOrders.map((order) => (
+                <tr key={order.id}>
+                  <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
+                    {order.id}
+                  </td>
+                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
+                    {order.customer}
+                  </td>
+                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
+                    {order.service}
+                  </td>
+                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
+                    {order.amount}
+                  </td>
+                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
+                    <span
+                      className={`inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${
+                        order.status === "Completed"
+                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
+                          : order.status === "Pending"
+                          ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300"
+                          : "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
+                      }`}
+                    >
+                      {order.status}
+                    </span>
+                  </td>
+                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-300">
+                    {order.date}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function AdminDashboardPage() {
+  const router = useRouter();
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem('adminToken');
+    const cookieToken = document.cookie.split('; ').find(row => row.startsWith('adminToken='))?.split('=')[1];
+
+    if (token === 'mock-admin-token' && cookieToken === 'mock-admin-token') {
+      setIsAdmin(true);
+    } else {
+      router.push('/admin/login?message=Unauthorized');
+    }
+    setLoading(false);
+  }, [router]);
+
+  const handleLogout = () => {
+    localStorage.removeItem('adminToken');
+    document.cookie = 'adminToken=; path=/; max-age=0;';
+    router.push('/admin/login');
+  };
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "FAQ", id: "/faq" },
+    { name: "Contact", id: "/contact" },
+    { name: "Admin Login", id: "/admin/login" }
+  ];
+
+  if (loading) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+      >
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{ text: "Register", href: "/register" }}
+          />
+        </div>
+        <div className="flex min-h-[calc(100vh-80px)] items-center justify-center p-4 sm:p-6 lg:p-8">
+          <p className="text-foreground">Loading...</p>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  if (!isAdmin) {
+    return null;
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="large"
+      background="grid"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+          logoAlt="SocBoost Logo"
+          brandName="SocBoost"
+          button={{ text: "Register", href: "/register" }}
+        />
+      </div>
+
+      <div className="flex min-h-[calc(100vh-80px)] items-center justify-center p-4 sm:p-6 lg:p-8">
+        <div className="w-full max-w-2xl p-8 space-y-6 bg-card rounded-lg shadow-lg text-center">
+          <h2 className="text-3xl font-bold text-foreground">Welcome to Admin Dashboard!</h2>
+          <p className="text-lg text-foreground-lighter">This is a protected route, accessible only to authenticated administrators.</p>
+          <button
+            onClick={handleLogout}
+            className="mt-6 py-2 px-6 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/admin/layout.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Home, Package, LayoutGrid, ShoppingCart, Users, ReceiptText, Settings, Menu } from 'lucide-react';
+import React, { useState } from 'react';
+
+const adminNavItems = [
+  { href: '/admin', label: 'Overview', icon: Home },
+  { href: '/admin/services', label: 'Services', icon: Package },
+  { href: '/admin/categories', label: 'Categories', icon: LayoutGrid },
+  { href: '/admin/orders', label: 'Orders', icon: ShoppingCart },
+  { href: '/admin/users', label: 'Users', icon: Users },
+  { href: '/admin/transactions', label: 'Transactions', icon: ReceiptText },
+  { href: '/admin/settings', label: 'Settings', icon: Settings },
+];
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <div className="flex min-h-screen bg-neutral-950 text-white">
+      {/* Mobile Menu Button */}
+      <button
+        className="fixed top-4 left-4 z-50 p-2 rounded-md bg-neutral-800 lg:hidden focus:outline-none focus:ring-2 focus:ring-primary-cta"
+        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+        aria-label="Toggle sidebar"
+      >
+        <Menu className="h-6 w-6" />
+      </button>
+
+      {/* Sidebar */}
+      <aside
+        className={`fixed inset-y-0 left-0 z-40 w-64 bg-neutral-900 shadow-lg transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 transition-transform duration-300 ease-in-out`}
+      >
+        <div className="p-6 border-b border-neutral-800">
+          <h1 className="text-2xl font-bold text-primary-cta">Admin Panel</h1>
+        </div>
+        <nav className="mt-6">
+          <ul>
+            {adminNavItems.map((item) => {
+              const isActive = pathname === item.href || (item.href !== '/admin' && pathname.startsWith(item.href));
+              return (
+                <li key={item.href}>
+                  <Link
+                    href={item.href}
+                    className={`flex items-center gap-3 px-6 py-3 text-lg font-medium transition-colors duration-200 ${isActive ? 'bg-primary-cta text-white' : 'text-neutral-300 hover:bg-neutral-800 hover:text-white'}`}
+                    onClick={() => setIsSidebarOpen(false)} // Close sidebar on nav item click
+                  >
+                    <item.icon className="h-5 w-5" />
+                    {item.label}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </aside>
+
+      {/* Main Content */}
+      <main className={`flex-1 transition-all duration-300 ease-in-out ${isSidebarOpen ? 'lg:ml-64 ml-0' : 'lg:ml-64 ml-0'} p-8 pt-16 lg:pt-8`}>
+        <div className="max-w-7xl mx-auto">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}

src/app/admin/login/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+export default function AdminLoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    // In a real application, you would send these credentials to an API route
+    // for authentication. For this exercise, we'll simulate a basic check.
+    if (email === "admin@example.com" && password === "password") {
+      if (typeof window !== "undefined") {
+        localStorage.setItem("admin_logged_in", "true");
+      }
+      alert("Login successful! Redirecting to dashboard...");
+      // Simulate redirect to admin dashboard
+      window.location.href = "/admin/dashboard/overview";
+    } else {
+      setError("Invalid email or password.");
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900">
+      <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md dark:bg-gray-800">
+        <h2 className="mb-6 text-center text-3xl font-bold text-gray-900 dark:text-white">
+          Admin Login
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Email address
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              className="mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Password
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              className="mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+          {error && <p className="text-sm text-red-500">{error}</p>}
+          <div>
+            <button
+              type="submit"
+              className="relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            >
+              Sign in
+            </button>
+          </div>
+        </form>
+        <div className="mt-6 text-center text-sm">
+          <Link
+            href="/"
+            className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+          >
+            Back to homepage
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/orders/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminOrdersPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Orders Management</h2>
+      <p className="text-neutral-300">Content for managing orders will go here.</p>
+    </div>
+  );
+}

src/app/admin/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { BarChart, CreditCard, DollarSign, Package } from 'lucide-react';
+import Link from 'next/link';
+
+const revenueData = [
+  { date: 'Jan 1', revenue: 1000 }, { date: 'Jan 5', revenue: 1200 }, { date: 'Jan 10', revenue: 1500 },
+  { date: 'Jan 15', revenue: 1300 }, { date: 'Jan 20', revenue: 1700 }, { date: 'Jan 25', revenue: 1600 },
+  { date: 'Jan 30', revenue: 2000 },
+];
+
+const recentOrders = [
+  { id: '1001', customer: 'John Doe', amount: '$150.00', status: 'Completed', date: '2024-03-01' },
+  { id: '1002', customer: 'Jane Smith', amount: '$230.50', status: 'Pending', date: '2024-03-01' },
+  { id: '1003', customer: 'Alice Brown', amount: '$75.25', status: 'Completed', date: '2024-02-29' },
+  { id: '1004', customer: 'Bob White', amount: '$400.00', status: 'Processing', date: '2024-02-28' },
+  { id: '1005', customer: 'Charlie Green', amount: '$110.00', status: 'Completed', date: '2024-02-28' },
+];
+
+export default function AdminOverviewPage() {
+  return (
+    <div className="space-y-8">
+      <h2 className="text-4xl font-bold text-white mb-8">Overview</h2>
+
+      {/* Revenue Stats Display */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
+          <div>
+            <p className="text-neutral-400 text-sm">Total Revenue</p>
+            <p className="text-3xl font-semibold text-white">$12,450</p>
+          </div>
+          <DollarSign className="h-8 w-8 text-primary-cta" />
+        </div>
+        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
+          <div>
+            <p className="text-neutral-400 text-sm">Total Orders</p>
+            <p className="text-3xl font-semibold text-white">850</p>
+          </div>
+          <Package className="h-8 w-8 text-primary-cta" />
+        </div>
+        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
+          <div>
+            <p className="text-neutral-400 text-sm">Pending Orders</p>
+            <p className="text-3xl font-semibold text-white">32</p>
+          </div>
+          <CreditCard className="h-8 w-8 text-primary-cta" />
+        </div>
+        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
+          <div>
+            <p className="text-neutral-400 text-sm">New Users</p>
+            <p className="text-3xl font-semibold text-white">120</p>
+          </div>
+          <BarChart className="h-8 w-8 text-primary-cta" />
+        </div>
+      </div>
+
+      {/* Orders Chart (Last 30 Days) */}
+      <div className="bg-neutral-900 p-6 rounded-lg shadow-md">
+        <h3 className="text-2xl font-semibold text-white mb-4">Orders Chart (Last 30 Days)</h3>
+        <div className="h-64 flex items-center justify-center bg-neutral-800 rounded-md text-neutral-500">
+          <p>Placeholder for a chart library (e.g., Recharts, Chart.js)</p>
+        </div>
+      </div>
+
+      {/* Recent Orders Table */}
+      <div className="bg-neutral-900 p-6 rounded-lg shadow-md">
+        <h3 className="text-2xl font-semibold text-white mb-4">Recent Orders</h3>
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-neutral-800">
+            <thead>
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Order ID</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Customer</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Amount</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Status</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Date</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-neutral-800">
+              {recentOrders.map((order) => (
+                <tr key={order.id}>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">{order.id}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.customer}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.amount}</td>
+                  <td className={`px-6 py-4 whitespace-nowrap text-sm ${order.status === 'Completed' ? 'text-green-500' : order.status === 'Pending' ? 'text-yellow-500' : 'text-blue-500'}`}>{order.status}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.date}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="mt-4 text-right">
+          <Link href="/admin/orders" className="text-primary-cta hover:underline">
+            View All Orders
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/services/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminServicesPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Services Management</h2>
+      <p className="text-neutral-300">Content for managing services will go here.</p>
+    </div>
+  );
+}

src/app/admin/settings/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminSettingsPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Settings</h2>
+      <p className="text-neutral-300">Content for managing settings will go here.</p>
+    </div>
+  );
+}

src/app/admin/transactions/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminTransactionsPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Transactions Management</h2>
+      <p className="text-neutral-300">Content for managing transactions will go here.</p>
+    </div>
+  );
+}

src/app/admin/users/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminUsersPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Users Management</h2>
+      <p className="text-neutral-300">Content for managing users will go here.</p>
+    </div>
+  );
+}

src/app/api/admin/check-auth/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(req: NextRequest) {
+  // In a real app, this would verify the JWT token from headers or session cookie.
+  // For this mock, we assume the middleware handled the primary check,
+  // or a client component sends a token to be verified.
+  const token = req.cookies.get('adminToken')?.value || req.headers.get('Authorization')?.split(' ')[1];
+
+  if (token === 'mock-admin-token') {
+    return NextResponse.json({ isAuthenticated: true, role: 'admin' }, { status: 200 });
+  } else {
+    return NextResponse.json({ isAuthenticated: false }, { status: 401 });
+  }
+}

src/app/api/admin/login/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const { email, password } = await req.json();
+
+  if (email === 'admin@demo.com' && password === 'Admin@123') {
+    // In a real app, generate a JWT token or create a session.
+    // For this mock, we'll just indicate success.
+    return NextResponse.json({ message: 'Login successful', token: 'mock-admin-token' }, { status: 200 });
+  } else {
+    return NextResponse.json({ message: 'Invalid credentials' }, { status: 401 });
+  }
+}

src/app/api/admin/logout/route.ts

@@ -0,0 +1,7 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  // In a real app, invalidate JWT on server or clear session.
+  // For this mock, no server-side action is strictly needed as client manages localStorage token and cookie.
+  return NextResponse.json({ message: 'Logout successful' }, { status: 200 });
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Wallet, ShoppingCart, Hourglass, CheckCircle, Settings, LogOut } from "lucide-react";
+import Link from "next/link";
+
+export default function UserDashboardPage() {
+  const stats = [
+    { id: "balance", title: "Current Balance", value: "$1,250.50", icon: Wallet },
+    { id: "totalOrders", title: "Total Orders", value: "1,234", icon: ShoppingCart },
+    { id: "pendingOrders", title: "Pending Orders", value: "42", icon: Hourglass },
+    { id: "completedOrders", title: "Completed Orders", value: "1,192", icon: CheckCircle }
+  ];
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Dashboard", id: "/dashboard" },
+    { name: "New Order", id: "/new-order" },
+    { name: "My Orders", id: "/orders" }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/#features" },
+        { label: "Dashboard", href: "/dashboard" },
+        { label: "New Order", href: "/new-order" },
+        { label: "My Orders", href: "/orders" }
+      ]
+    }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{
+              text: "Register",              href: "/register"
+            }}
+          />
+        </div>
+
+        <div className="flex flex-col lg:flex-row min-h-screen pt-20">
+          {/* Sidebar */}
+          <aside className="w-full lg:w-64 bg-card p-6 border-r border-border shadow-md">
+            <h2 className="text-2xl font-semibold mb-6 text-foreground">User Panel</h2>
+            <nav>
+              <ul>
+                <li className="mb-4">
+                  <Link href="/dashboard" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
+                    <Wallet className="mr-2 h-5 w-5" /> Dashboard
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/new-order" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
+                    <ShoppingCart className="mr-2 h-5 w-5" /> New Order
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/orders" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
+                    <Hourglass className="mr-2 h-5 w-5" /> My Orders
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/settings" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
+                    <Settings className="mr-2 h-5 w-5" /> Settings
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <button className="flex items-center text-foreground hover:text-red-500 transition-colors w-full text-left">
+                    <LogOut className="mr-2 h-5 w-5" /> Logout
+                  </button>
+                </li>
+              </ul>
+            </nav>
+          </aside>
+
+          {/* Main Content */}
+          <main className="flex-1 p-8 bg-background">
+            <h1 className="text-4xl font-bold mb-8 text-foreground">Dashboard Overview</h1>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+              {stats.map((stat) => (
+                <div key={stat.id} className="bg-card p-6 rounded-lg shadow-lg flex items-center space-x-4">
+                  <div className="p-3 rounded-full bg-primary-cta bg-opacity-20">
+                    <stat.icon className="h-6 w-6 text-primary-cta" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-foreground-light">{stat.title}</p>
+                    <p className="text-2xl font-bold text-foreground">{stat.value}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Additional Dashboard Content would go here */}
+            <div className="bg-card p-6 rounded-lg shadow-lg">
+              <h2 className="text-2xl font-semibold mb-4 text-foreground">Recent Activity</h2>
+              <p className="text-foreground-light">Your recent orders and transactions will appear here.</p>
+            </div>
+          </main>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={footerColumns}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            logoText="SocBoost"
+            copyrightText="© 2024 SocBoost. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/my-orders/page.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function MyOrdersPage() {
+  const orders = [
+    { id: "#1001", service: "Instagram Likes", quantity: "1000", status: "Completed", date: "2024-07-20" },
+    { id: "#1002", service: "YouTube Views", quantity: "5000", status: "Processing", date: "2024-07-21" },
+    { id: "#1003", service: "TikTok Followers", quantity: "100", status: "Pending", date: "2024-07-21" },
+    { id: "#1004", service: "Twitter Retweets", quantity: "500", status: "Completed", date: "2024-07-19" },
+    { id: "#1005", service: "Facebook Comments", quantity: "10", status: "Cancelled", date: "2024-07-18" }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "My Orders", id: "/my-orders" },
+              { name: "Add Funds", id: "/add-funds" },
+              { name: "Profile", id: "/profile" },
+              { name: "FAQ", id: "/faq" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{
+              text: "Register",              href: "/register"
+            }}
+          />
+        </div>
+
+        <div className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 bg-background">
+          <div className="max-w-7xl mx-auto">
+            <h1 className="text-4xl font-bold text-foreground text-center mb-6">My Orders</h1>
+            <p className="text-lg text-muted-foreground text-center mb-10">View and manage your recent orders.</p>
+
+            <div className="mb-8 flex justify-end">
+              <select className="p-2 rounded-md bg-card border border-border text-foreground">
+                <option value="all">All Statuses</option>
+                <option value="pending">Pending</option>
+                <option value="processing">Processing</option>
+                <option value="completed">Completed</option>
+                <option value="cancelled">Cancelled</option>
+              </select>
+            </div>
+
+            <div className="overflow-x-auto rounded-lg shadow-md border border-border">
+              <table className="min-w-full divide-y divide-border">
+                <thead className="bg-card">
+                  <tr>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">ID</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Service</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Quantity</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Date</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-background divide-y divide-border">
+                  {orders.map((order) => (
+                    <tr key={order.id}>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{order.id}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.service}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.quantity}</td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
+                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                          order.status === 'Completed' ? 'bg-green-100 text-green-800' :
+                          order.status === 'Processing' ? 'bg-blue-100 text-blue-800' :
+                          order.status === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
+                          'bg-red-100 text-red-800'
+                        }`}>
+                          {order.status}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.date}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Instagram", href: "/services#instagram" },
+                  { label: "YouTube", href: "/services#youtube" },
+                  { label: "TikTok", href: "/services#tiktok" },
+                  { label: "Twitter", href: "/services#twitter" },
+                  { label: "Facebook", href: "/services#facebook" },
+                  { label: "Telegram", href: "/services#telegram" },
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#features" },
+                  { label: "Pricing", href: "/pricing" },
+                  { label: "FAQ", href: "/faq" },
+                  { label: "Contact", href: "/contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Terms of Service", href: "/terms" },
+                  { label: "Privacy Policy", href: "/privacy" },
+                ],
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Blog", href: "#" },
+                  { label: "API Docs", href: "#" },
+                ],
+              },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            logoText="SocBoost"
+            copyrightText="© 2024 SocBoost. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/new-order/page.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { ShoppingCart } from "lucide-react";
+import { useState, useEffect } from "react";
+
+export default function NewOrderPage() {
+  const [service, setService] = useState("instagram-likes");
+  const [link, setLink] = useState("");
+  const [quantity, setQuantity] = useState(0);
+  const [price, setPrice] = useState(0);
+
+  const serviceRates = {
+    "instagram-likes": 0.001,
+    "youtube-views": 0.0005,
+    "tiktok-followers": 0.004,
+  };
+
+  useEffect(() => {
+    const rate = serviceRates[service as keyof typeof serviceRates] || 0;
+    const calculatedPrice = quantity * rate;
+    setPrice(calculatedPrice);
+  }, [service, quantity]);
+
+  const handleOrderSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    alert(`Order placed! Service: ${service}, Link: ${link}, Quantity: ${quantity}, Price: $${price.toFixed(2)}`);
+    // Here you would typically send data to your backend
+  };
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Dashboard", id: "/dashboard" },
+    { name: "New Order", id: "/new-order" },
+    { name: "My Orders", id: "/orders" }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/#features" },
+        { label: "Dashboard", href: "/dashboard" },
+        { label: "New Order", href: "/new-order" },
+        { label: "My Orders", href: "/orders" }
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{
+              text: "Register",              href: "/register"
+            }}
+          />
+        </div>
+
+        <main className="container mx-auto px-4 py-8 pt-20 min-h-[calc(100vh-200px)]">
+          <h1 className="text-4xl font-bold mb-8 text-foreground">Create New Order</h1>
+
+          <div className="bg-card p-8 rounded-lg shadow-lg max-w-2xl mx-auto">
+            <form onSubmit={handleOrderSubmit} className="space-y-6">
+              <div>
+                <label htmlFor="service" className="block text-sm font-medium text-foreground mb-2">Service</label>
+                <select
+                  id="service"
+                  className="w-full p-3 border border-border rounded-md bg-background-accent text-foreground focus:ring-primary-cta focus:border-primary-cta"
+                  value={service}
+                  onChange={(e) => setService(e.target.value)}
+                >
+                  <option value="instagram-likes">Instagram Likes</option>
+                  <option value="youtube-views">YouTube Views</option>
+                  <option value="tiktok-followers">TikTok Followers</option>
+                </select>
+              </div>
+
+              <div>
+                <label htmlFor="link" className="block text-sm font-medium text-foreground mb-2">Link</label>
+                <input
+                  type="url"
+                  id="link"
+                  className="w-full p-3 border border-border rounded-md bg-background-accent text-foreground placeholder-foreground-light focus:ring-primary-cta focus:border-primary-cta"
+                  placeholder="Enter link (e.g., Instagram post URL)"
+                  value={link}
+                  onChange={(e) => setLink(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="quantity" className="block text-sm font-medium text-foreground mb-2">Quantity</label>
+                <input
+                  type="number"
+                  id="quantity"
+                  className="w-full p-3 border border-border rounded-md bg-background-accent text-foreground placeholder-foreground-light focus:ring-primary-cta focus:border-primary-cta"
+                  placeholder="Enter quantity (e.g., 1000)"
+                  min="1"
+                  value={quantity === 0 ? "" : quantity}
+                  onChange={(e) => setQuantity(parseInt(e.target.value) || 0)}
+                  required
+                />
+              </div>
+
+              <div className="flex justify-between items-center py-4 border-t border-border-light">
+                <p className="text-lg font-medium text-foreground">Total Price:</p>
+                <p className="text-2xl font-bold text-primary-cta">${price.toFixed(2)}</p>
+              </div>
+
+              <button
+                type="submit"
+                className="w-full flex items-center justify-center space-x-2 px-5 py-3 bg-primary-cta text-white font-semibold rounded-md hover:opacity-90 transition-opacity"
+              >
+                <ShoppingCart className="h-5 w-5" />
+                <span>Place Order</span>
+              </button>
+            </form>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={footerColumns}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            logoText="SocBoost"
+            copyrightText="© 2024 SocBoost. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/orders/page.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { CheckCircle, XCircle } from "lucide-react";
+
+export default function OrdersManagementPage() {
+  // Dummy data for orders
+  const orders = [
+    { id: "#1001", user: "John Doe", service: "Instagram Likes", quantity: 1000, status: "Completed", date: "2024-01-15", amount: "$1.00" },
+    { id: "#1002", user: "Jane Smith", service: "YouTube Views", quantity: 5000, status: "Pending", date: "2024-01-16", amount: "$5.00" },
+    { id: "#1003", user: "Alice Johnson", service: "TikTok Followers", quantity: 200, status: "Processing", date: "2024-01-17", amount: "$0.80" },
+    { id: "#1004", user: "Bob Williams", service: "Twitter Retweets", quantity: 100, status: "Cancelled", date: "2024-01-18", amount: "$0.20" },
+    { id: "#1005", user: "Charlie Brown", service: "Facebook Shares", quantity: 50, status: "Completed", date: "2024-01-19", amount: "$0.15" }
+  ];
+
+  const statuses = ["All", "Completed", "Pending", "Processing", "Cancelled"];
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Dashboard", id: "/dashboard" },
+    { name: "New Order", id: "/new-order" },
+    { name: "My Orders", id: "/orders" }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/#features" },
+        { label: "Dashboard", href: "/dashboard" },
+        { label: "New Order", href: "/new-order" },
+        { label: "My Orders", href: "/orders" }
+      ]
+    }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{
+              text: "Register",              href: "/register"
+            }}
+          />
+        </div>
+
+        <main className="container mx-auto px-4 py-8 pt-20 min-h-[calc(100vh-200px)]">
+          <h1 className="text-4xl font-bold mb-8 text-foreground">My Orders</h1>
+
+          <div className="mb-6 flex justify-between items-center">
+            <div className="flex items-center space-x-2">
+              <label htmlFor="status-filter" className="font-medium text-foreground">Filter by Status:</label>
+              <select id="status-filter" className="p-2 border rounded-md bg-background-accent text-foreground dark:border-border">
+                {statuses.map(status => (
+                  <option key={status} value={status.toLowerCase()}>{status}</option>
+                ))}
+              </select>
+            </div>
+            <button className="px-4 py-2 bg-primary-cta text-white rounded-md hover:opacity-90 transition-opacity">Refresh Orders</button>
+          </div>
+
+          <div className="overflow-x-auto bg-card rounded-lg shadow-lg p-6">
+            <table className="min-w-full divide-y divide-border">
+              <thead className="bg-background-accent">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Order ID</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">User</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Service</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Quantity</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Amount</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Date</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Status</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border">
+                {orders.map(order => (
+                  <tr key={order.id} className="hover:bg-background-accent transition-colors">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{order.id}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.user}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.service}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.quantity}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.amount}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.date}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm">
+                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                        order.status === 'Completed' ? 'bg-green-100 text-green-800' :
+                        order.status === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
+                        order.status === 'Processing' ? 'bg-blue-100 text-blue-800' :
+                        'bg-red-100 text-red-800'
+                      }`}>
+                        {order.status}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <select className="p-1 border rounded-md bg-background-accent text-foreground dark:border-border mr-2">
+                        {statuses.filter(s => s !== 'All').map(status => (
+                          <option key={status} value={status.toLowerCase()} selected={order.status === status}>{status}</option>
+                        ))}
+                      </select>
+                      <button className="px-3 py-1 bg-accent text-white rounded-md text-xs hover:opacity-90 transition-opacity">Update</button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={footerColumns}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            logoText="SocBoost"
+            copyrightText="© 2024 SocBoost. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -30,34 +30,19 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",
+        { name: "Services", id: "/services" },
-          id: "/",
+        { name: "Pricing", id: "/pricing" },
-        },
+        { name: "FAQ", id: "/faq" },
-        {
+        { name: "Contact", id: "/contact" },
-          name: "Services",
+        { name: "Transactions", id: "/transactions" },
-          id: "/services",
+        { name: "Settings", id: "/settings" }
-        },
-        {
-          name: "Pricing",
-          id: "/pricing",
-        },
-        {
-          name: "FAQ",
-          id: "/faq",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
       ]}
       logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
       logoAlt="SocBoost Logo"
       brandName="SocBoost"
       button={{
-        text: "Register",
+        text: "Register",        href: "/register"}}
-        href: "/register",
-      }}
     />
   </div>
 
@@ -65,80 +50,45 @@ export default function LandingPage() {
       <HeroSplitTestimonial
       useInvertedBackground={true}
       background={{
-        variant: "canvas-reveal",
+        variant: "canvas-reveal"}}
-      }}
       title="Boost Your Social Presence"
       description="The ultimate SMM panel for resellers and businesses. Scale your social media marketing efforts with reliable and affordable services."
       testimonials={[
         {
-          name: "Alex P.",
+          name: "Alex P.",          handle: "@SocialGain",          testimonial: "SocBoost transformed my reselling business. The quality and speed are unmatched!",          rating: 5,
-          handle: "@SocialGain",
+          imageSrc: "http://img.b2bpic.net/free-photo/smiley-professional-businesswoman-with-glasses-presentation_23-2148824824.jpg"},
-          testimonial: "SocBoost transformed my reselling business. The quality and speed are unmatched!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-professional-businesswoman-with-glasses-presentation_23-2148824824.jpg",
-        },
         {
-          name: "Sarah K.",
+          name: "Sarah K.",          handle: "@InstaFlow",          testimonial: "Incredible service and amazing support. My clients are thrilled with the results.",          rating: 5,
-          handle: "@InstaFlow",
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg"},
-          testimonial: "Incredible service and amazing support. My clients are thrilled with the results.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",
-        },
         {
-          name: "Maria L.",
+          name: "Maria L.",          handle: "@GrowthHive",          testimonial: "Consistent, high-quality services every time. SocBoost is an essential part of our digital strategy.",          rating: 5,
-          handle: "@GrowthHive",
+          imageSrc: "http://img.b2bpic.net/free-photo/bearded-manager-videoconference-call_482257-119336.jpg"},
-          testimonial: "Consistent, high-quality services every time. SocBoost is an essential part of our digital strategy.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-manager-videoconference-call_482257-119336.jpg",
-        },
         {
-          name: "David S.",
+          name: "David S.",          handle: "@PromoPro",          testimonial: "The platform is incredibly user-friendly, and the results speak for themselves. Highly recommended!",          rating: 5,
-          handle: "@PromoPro",
+          imageSrc: "http://img.b2bpic.net/free-photo/new-technology-her-job-is-necessary_329181-12370.jpg"},
-          testimonial: "The platform is incredibly user-friendly, and the results speak for themselves. Highly recommended!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/new-technology-her-job-is-necessary_329181-12370.jpg",
-        },
         {
-          name: "Emily R.",
+          name: "Emily R.",          handle: "@EliteMedia",          testimonial: "Our client engagement has skyrocketed thanks to SocBoost. A powerful tool for any serious marketer.",          rating: 5,
-          handle: "@EliteMedia",
+          imageSrc: "http://img.b2bpic.net/free-photo/freelancing-is-good-idea-independent-person_329181-12349.jpg"},
-          testimonial: "Our client engagement has skyrocketed thanks to SocBoost. A powerful tool for any serious marketer.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/freelancing-is-good-idea-independent-person_329181-12349.jpg",
-        },
       ]}
       tag="Powered by AI"
       tagIcon={Zap}
       buttons={[
         {
-          text: "Get Started",
+          text: "Get Started",          href: "/register"},
-          href: "/register",
-        },
         {
-          text: "View Services",
+          text: "View Services",          href: "/services"},
-          href: "/services",
-        },
       ]}
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/charming-guy-enjoying-his-break-garden_23-2147562344.jpg",
+          src: "http://img.b2bpic.net/free-photo/charming-guy-enjoying-his-break-garden_23-2147562344.jpg",          alt: "User 1"},
-          alt: "User 1",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg",
+          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg",          alt: "User 2"},
-          alt: "User 2",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/man-solar-panels-plant-using-laptop-improve-solar-cells-efficiency_482257-119792.jpg",
+          src: "http://img.b2bpic.net/free-photo/man-solar-panels-plant-using-laptop-improve-solar-cells-efficiency_482257-119792.jpg",          alt: "User 3"},
-          alt: "User 3",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/confident-business-woman-portrait-smiling-face_53876-137693.jpg",
+          src: "http://img.b2bpic.net/free-photo/confident-business-woman-portrait-smiling-face_53876-137693.jpg",          alt: "User 4"},
-          alt: "User 4",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/man-posing-his-office_329181-14596.jpg",
+          src: "http://img.b2bpic.net/free-photo/man-posing-his-office_329181-14596.jpg",          alt: "User 5"},
-          alt: "User 5",
-        },
       ]}
       avatarText="Join 10,000+ happy resellers worldwide!"
       imageSrc="http://img.b2bpic.net/free-photo/office-worker-pointing-laptop-screen_482257-120643.jpg"
@@ -146,29 +96,19 @@ export default function LandingPage() {
       mediaAnimation="opacity"
       marqueeItems={[
         {
-          type: "text-icon",
+          type: "text-icon",          text: "Growth Achieved",          icon: ArrowUp,
-          text: "Growth Achieved",
-          icon: ArrowUp,
         },
         {
-          type: "text-icon",
+          type: "text-icon",          text: "Instant Delivery",          icon: Zap,
-          text: "Instant Delivery",
-          icon: Zap,
         },
         {
-          type: "text-icon",
+          type: "text-icon",          text: "24/7 Support",          icon: Headphones,
-          text: "24/7 Support",
-          icon: Headphones,
         },
         {
-          type: "text-icon",
+          type: "text-icon",          text: "Secure Payments",          icon: ShieldCheck,
-          text: "Secure Payments",
-          icon: ShieldCheck,
         },
         {
-          type: "text-icon",
+          type: "text-icon",          text: "Trusted by Thousands",          icon: Star,
-          text: "Trusted by Thousands",
-          icon: Star,
         },
       ]}
     />
@@ -181,32 +121,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "1",
+          id: "1",          title: "Automated Order Processing",          descriptions: [
-          title: "Automated Order Processing",
+            "Our system handles orders instantly, ensuring quick delivery and minimal manual intervention. Focus on your business, we'll handle the rest."],
-          descriptions: [
+          imageSrc: "http://img.b2bpic.net/free-photo/planning-strategy-marketing-startup-icon_53876-133749.jpg",          imageAlt: "Automated Order Processing"},
-            "Our system handles orders instantly, ensuring quick delivery and minimal manual intervention. Focus on your business, we'll handle the rest.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/planning-strategy-marketing-startup-icon_53876-133749.jpg",
-          imageAlt: "Automated Order Processing",
-        },
         {
-          id: "2",
+          id: "2",          title: "Scalable & Reliable Services",          descriptions: [
-          title: "Scalable & Reliable Services",
+            "Access a wide range of social media services, from followers to likes, with guaranteed quality and high uptime for all platforms."],
-          descriptions: [
+          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-design-with-colourful-extruding-cubes_1048-12343.jpg",          imageAlt: "Scalable & Reliable Services"},
-            "Access a wide range of social media services, from followers to likes, with guaranteed quality and high uptime for all platforms.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-design-with-colourful-extruding-cubes_1048-12343.jpg",
-          imageAlt: "Scalable & Reliable Services",
-        },
         {
-          id: "3",
+          id: "3",          title: "24/7 Dedicated Support",          descriptions: [
-          title: "24/7 Dedicated Support",
+            "Our expert support team is available around the clock to assist you with any questions or issues, ensuring a smooth experience."],
-          descriptions: [
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-call-center-manager-providing-guidance-intern-addressing-questions_482257-125804.jpg",          imageAlt: "24/7 Dedicated Support"},
-            "Our expert support team is available around the clock to assist you with any questions or issues, ensuring a smooth experience.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-call-center-manager-providing-guidance-intern-addressing-questions_482257-125804.jpg",
-          imageAlt: "24/7 Dedicated Support",
-        },
       ]}
       title="Why Choose SocBoost?"
       description="Unlock unparalleled growth with our robust features designed for maximum efficiency and profitability."
@@ -218,16 +143,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       names={[
-        "Instagram",
+        "Instagram",        "YouTube",        "TikTok",        "Twitter",        "Facebook",        "Telegram",        "Reddit"]}
-        "YouTube",
-        "TikTok",
-        "Twitter",
-        "Facebook",
-        "Telegram",
-        "Reddit",
-      ]}
       title="Trusted by Top Resellers & Agencies"
-      description="Join a thriving network of digital marketing professionals who choose SocBoost for their social media growth needs."
+      description="We provide comprehensive services for leading platforms like Instagram, YouTube, TikTok, and more, helping resellers and agencies achieve their social media growth goals."
     />
   </div>
 
@@ -238,29 +156,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
+          id: "m1",          icon: Users,
-          icon: Users,
+          title: "Active Users",          value: "50K+"},
-          title: "Active Users",
-          value: "50K+",
-        },
         {
-          id: "m2",
+          id: "m2",          icon: ShoppingCart,
-          icon: ShoppingCart,
+          title: "Total Orders",          value: "2M+"},
-          title: "Total Orders",
-          value: "2M+",
-        },
         {
-          id: "m3",
+          id: "m3",          icon: DollarSign,
-          icon: DollarSign,
+          title: "Total Revenue",          value: "$50M+"},
-          title: "Total Revenue",
-          value: "$50M+",
-        },
         {
-          id: "m4",
+          id: "m4",          icon: Zap,
-          icon: Zap,
+          title: "Delivery Speed",          value: "Instant"},
-          title: "Delivery Speed",
-          value: "Instant",
-        },
       ]}
       title="Numbers That Speak For Themselves"
       description="Our platform consistently delivers top-tier performance and satisfaction to a growing global user base."
@@ -274,53 +180,23 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "t1",
+          id: "t1",          name: "Priya Sharma",          handle: "SocialPro Agency",          testimonial: "SocBoost has been instrumental in scaling our client's social media presence. The quality is consistently high, and the delivery is always on time. A true partner!",          rating: 5,
-          name: "Priya Sharma",
+          imageSrc: "http://img.b2bpic.net/free-photo/user-sign-icon-front-side_187299-47522.jpg"},
-          handle: "SocialPro Agency",
-          testimonial: "SocBoost has been instrumental in scaling our client's social media presence. The quality is consistently high, and the delivery is always on time. A true partner!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/user-sign-icon-front-side_187299-47522.jpg",
-        },
         {
-          id: "t2",
+          id: "t2",          name: "Omar Hassan",          handle: "Digital Reach LLC",          testimonial: "The best SMM panel I've used. The automated system and wide range of services make it easy to fulfill orders for our diverse client base. Highly recommended for resellers!",          rating: 5,
-          name: "Omar Hassan",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-african-businesswoman-work_329181-20179.jpg"},
-          handle: "Digital Reach LLC",
-          testimonial: "The best SMM panel I've used. The automated system and wide range of services make it easy to fulfill orders for our diverse client base. Highly recommended for resellers!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-african-businesswoman-work_329181-20179.jpg",
-        },
         {
-          id: "t3",
+          id: "t3",          name: "Sofia Rodriguez",          handle: "GrowthHack Marketing",          testimonial: "Fantastic platform with exceptional customer support. Any issues are resolved quickly, and the service quality is top-notch. Truly helps us grow our business efficiently.",          rating: 5,
-          name: "Sofia Rodriguez",
+          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-people-avatars-zoom-call_23-2149576744.jpg"},
-          handle: "GrowthHack Marketing",
-          testimonial: "Fantastic platform with exceptional customer support. Any issues are resolved quickly, and the service quality is top-notch. Truly helps us grow our business efficiently.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-people-avatars-zoom-call_23-2149576744.jpg",
-        },
         {
-          id: "t4",
+          id: "t4",          name: "Kenji Tanaka",          handle: "ViralBoost Solutions",          testimonial: "SocBoost provides an incredible value. We've seen significant improvements in client satisfaction and retention since switching to their services. A game-changer!",          rating: 5,
-          name: "Kenji Tanaka",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-asian-man-suit-smiling-standing-bridge_181624-14528.jpg"},
-          handle: "ViralBoost Solutions",
-          testimonial: "SocBoost provides an incredible value. We've seen significant improvements in client satisfaction and retention since switching to their services. A game-changer!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-asian-man-suit-smiling-standing-bridge_181624-14528.jpg",
-        },
         {
-          id: "t5",
+          id: "t5",          name: "Latoya Jackson",          handle: "Influence Hub",          testimonial: "Reliability and speed are key in this industry, and SocBoost delivers on both. Their comprehensive API allows for seamless integration, making our operations incredibly smooth.",          rating: 5,
-          name: "Latoya Jackson",
+          imageSrc: "http://img.b2bpic.net/free-photo/tired-black-woman-manager-looking-camera-sighing-after_482257-15606.jpg"},
-          handle: "Influence Hub",
-          testimonial: "Reliability and speed are key in this industry, and SocBoost delivers on both. Their comprehensive API allows for seamless integration, making our operations incredibly smooth.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/tired-black-woman-manager-looking-camera-sighing-after_482257-15606.jpg",
-        },
         {
-          id: "t6",
+          id: "t6",          name: "John D.",          handle: "GlobalBoost Partners",          testimonial: "SocBoost's API integration is seamless and powerful. We've automated our entire workflow, significantly reducing overhead. Truly an invaluable tool.",          rating: 5,
-          name: "John D.",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-man-city-night-with-headphones_23-2149024727.jpg"},
-          handle: "GlobalBoost Partners",
-          testimonial: "SocBoost's API integration is seamless and powerful. We've automated our entire workflow, significantly reducing overhead. Truly an invaluable tool.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-man-city-night-with-headphones_23-2149024727.jpg",
-        },
       ]}
       showRating={true}
       title="What Our Clients Say"
@@ -335,60 +211,25 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "basic",
+          id: "basic",          tag: "Starter",          tagIcon: Sparkles,
-          tag: "Starter",
+          price: "$0.01",          period: "per 1000",          description: "Perfect for new resellers testing the waters.",          button: {
-          tagIcon: Sparkles,
+            text: "Start Reselling",            href: "/register"},
-          price: "$0.01",
+          featuresTitle: "Includes:",          features: [
-          period: "per 1000",
+            "Access to basic services",            "Limited API access",            "Standard support"],
-          description: "Perfect for new resellers testing the waters.",
-          button: {
-            text: "Start Reselling",
-            href: "/register",
-          },
-          featuresTitle: "Includes:",
-          features: [
-            "Access to basic services",
-            "Limited API access",
-            "Standard support",
-          ],
         },
         {
-          id: "pro",
+          id: "pro",          tag: "Pro Reseller",          tagIcon: Star,
-          tag: "Pro Reseller",
+          price: "$0.008",          period: "per 1000",          description: "Ideal for growing businesses and serious resellers.",          button: {
-          tagIcon: Star,
+            text: "Choose Pro",            href: "/register"},
-          price: "$0.008",
+          featuresTitle: "Includes:",          features: [
-          period: "per 1000",
+            "Full service catalog",            "Advanced API features",            "Priority support",            "Volume discounts"],
-          description: "Ideal for growing businesses and serious resellers.",
-          button: {
-            text: "Choose Pro",
-            href: "/register",
-          },
-          featuresTitle: "Includes:",
-          features: [
-            "Full service catalog",
-            "Advanced API features",
-            "Priority support",
-            "Volume discounts",
-          ],
         },
         {
-          id: "enterprise",
+          id: "enterprise",          tag: "Enterprise",          tagIcon: Award,
-          tag: "Enterprise",
+          price: "Custom",          period: "Quote",          description: "Tailored solutions for large agencies and high-volume needs.",          button: {
-          tagIcon: Award,
+            text: "Contact Sales",            href: "/contact"},
-          price: "Custom",
+          featuresTitle: "Includes:",          features: [
-          period: "Quote",
+            "Dedicated account manager",            "Custom integrations",            "White-label options",            "Highest volume discounts"],
-          description: "Tailored solutions for large agencies and high-volume needs.",
-          button: {
-            text: "Contact Sales",
-            href: "/contact",
-          },
-          featuresTitle: "Includes:",
-          features: [
-            "Dedicated account manager",
-            "Custom integrations",
-            "White-label options",
-            "Highest volume discounts",
-          ],
         },
       ]}
       title="Flexible Plans for Every Business"
@@ -400,79 +241,47 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Services",
+          title: "Services",          items: [
-          items: [
             {
-              label: "Instagram",
+              label: "Instagram",              href: "/services#instagram"},
-              href: "/services#instagram",
-            },
             {
-              label: "YouTube",
+              label: "YouTube",              href: "/services#youtube"},
-              href: "/services#youtube",
-            },
             {
-              label: "TikTok",
+              label: "TikTok",              href: "/services#tiktok"},
-              href: "/services#tiktok",
-            },
             {
-              label: "Twitter",
+              label: "Twitter",              href: "/services#twitter"},
-              href: "/services#twitter",
-            },
             {
-              label: "Facebook",
+              label: "Facebook",              href: "/services#facebook"},
-              href: "/services#facebook",
-            },
             {
-              label: "Telegram",
+              label: "Telegram",              href: "/services#telegram"},
-              href: "/services#telegram",
-            },
           ],
         },
         {
-          title: "Company",
+          title: "Company",          items: [
-          items: [
             {
-              label: "About Us",
+              label: "About Us",              href: "/#features"},
-              href: "/#features",
-            },
             {
-              label: "Pricing",
+              label: "Pricing",              href: "/pricing"},
-              href: "/pricing",
-            },
             {
-              label: "FAQ",
+              label: "FAQ",              href: "/faq"},
-              href: "/faq",
-            },
             {
-              label: "Contact",
+              label: "Contact",              href: "/contact"},
-              href: "/contact",
-            },
           ],
         },
         {
-          title: "Legal",
+          title: "Legal",          items: [
-          items: [
             {
-              label: "Terms of Service",
+              label: "Terms of Service",              href: "/terms"},
-              href: "/terms",
-            },
             {
-              label: "Privacy Policy",
+              label: "Privacy Policy",              href: "/privacy"},
-              href: "/privacy",
-            },
           ],
         },
         {
-          title: "Resources",
+          title: "Resources",          items: [
-          items: [
             {
-              label: "Blog",
+              label: "Blog",              href: "#"},
-              href: "#",
-            },
             {
-              label: "API Docs",
+              label: "API Docs",              href: "#"},
-              href: "#",
-            },
           ],
         },
       ]}

src/app/profile/page.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function ProfilePage() {
+  // Placeholder for API Key. In a real app, this would be fetched or generated.
+  const apiKey = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; 
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "My Orders", id: "/my-orders" },
+              { name: "Add Funds", id: "/add-funds" },
+              { name: "Profile", id: "/profile" },
+              { name: "FAQ", id: "/faq" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{
+              text: "Register",              href: "/register"
+            }}
+          />
+        </div>
+
+        <div className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 bg-background">
+          <div className="max-w-xl mx-auto space-y-10">
+            <h1 className="text-4xl font-bold text-foreground text-center mb-6">My Profile</h1>
+            <p className="text-lg text-muted-foreground text-center mb-10">Manage your account details, password, and API keys.</p>
+
+            {/* Account Details Form */}
+            <div className="bg-card p-8 rounded-lg shadow-md border border-border">
+              <h2 className="text-2xl font-semibold text-foreground mb-6">Account Details</h2>
+              <form className="space-y-6">
+                <div>
+                  <label htmlFor="name" className="block text-sm font-medium text-foreground">Name</label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    defaultValue="John Doe" // Placeholder
+                    className="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-foreground">Email Address</label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    defaultValue="john.doe@example.com" // Placeholder
+                    className="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+                  />
+                </div>
+                <div>
+                  <button
+                    type="submit"
+                    className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+                  >
+                    Update Profile
+                  </button>
+                </div>
+              </form>
+            </div>
+
+            {/* Change Password Form */}
+            <div className="bg-card p-8 rounded-lg shadow-md border border-border">
+              <h2 className="text-2xl font-semibold text-foreground mb-6">Change Password</h2>
+              <form className="space-y-6">
+                <div>
+                  <label htmlFor="current-password" className="block text-sm font-medium text-foreground">Current Password</label>
+                  <input
+                    type="password"
+                    id="current-password"
+                    name="current-password"
+                    className="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="new-password" className="block text-sm font-medium text-foreground">New Password</label>
+                  <input
+                    type="password"
+                    id="new-password"
+                    name="new-password"
+                    className="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="confirm-password" className="block text-sm font-medium text-foreground">Confirm New Password</label>
+                  <input
+                    type="password"
+                    id="confirm-password"
+                    name="confirm-password"
+                    className="mt-1 block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+                  />
+                </div>
+                <div>
+                  <button
+                    type="submit"
+                    className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+                  >
+                    Change Password
+                  </button>
+                </div>
+              </form>
+            </div>
+
+            {/* API Key Management */}
+            <div className="bg-card p-8 rounded-lg shadow-md border border-border">
+              <h2 className="text-2xl font-semibold text-foreground mb-6">API Key</h2>
+              <p className="text-sm text-muted-foreground mb-4">Your API key allows programmatic access to your account.</p>
+              <div className="flex items-center space-x-2">
+                <input
+                  type="text"
+                  readOnly
+                  value={apiKey}
+                  className="flex-grow px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground text-sm font-mono"
+                />
+                <button
+                  type="button"
+                  className="inline-flex items-center px-4 py-2 border border-border rounded-md shadow-sm text-sm font-medium text-foreground bg-background hover:bg-muted-background focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+                >
+                  Copy
+                </button>
+                <button
+                  type="button"
+                  className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                >
+                  Revoke
+                </button>
+              </div>
+              <p className="text-xs text-muted-foreground mt-2">Keep your API key secure. Do not share it with anyone.</p>
+            </div>
+
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Instagram", href: "/services#instagram" },
+                  { label: "YouTube", href: "/services#youtube" },
+                  { label: "TikTok", href: "/services#tiktok" },
+                  { label: "Twitter", href: "/services#twitter" },
+                  { label: "Facebook", href: "/services#facebook" },
+                  { label: "Telegram", href: "/services#telegram" },
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#features" },
+                  { label: "Pricing", href: "/pricing" },
+                  { label: "FAQ", href: "/faq" },
+                  { label: "Contact", href: "/contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Terms of Service", href: "/terms" },
+                  { label: "Privacy Policy", href: "/privacy" },
+                ],
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Blog", href: "#" },
+                  { label: "API Docs", href: "#" },
+                ],
+              },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            logoText="SocBoost"
+            copyrightText="© 2024 SocBoost. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/users/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Plus, Minus } from "lucide-react";
+
+export default function UsersManagementPage() {
+  // Dummy data for users
+  const users = [
+    { id: "u1", username: "johndoe", email: "john@example.com", balance: 150.75, status: "Active" },
+    { id: "u2", username: "janesmith", email: "jane@example.com", balance: 23.50, status: "Active" },
+    { id: "u3", username: "alicej", email: "alice@example.com", balance: 0.00, status: "Inactive" },
+    { id: "u4", username: "bobw", email: "bob@example.com", balance: 500.00, status: "Active" },
+    { id: "u5", username: "charlieb", email: "charlie@example.com", balance: 12.30, status: "Active" },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "FAQ", id: "/faq" },
+              { name: "Contact", id: "/contact" },
+              { name: "Orders", id: "/orders" },
+              { name: "Users", id: "/users" }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            brandName="SocBoost"
+            button={{
+              text: "Register",              href: "/register"
+            }}
+          />
+        </div>
+
+        <main className="container mx-auto px-4 py-8">
+          <h1 className="text-4xl font-bold mb-8">Users Management</h1>
+
+          <div className="overflow-x-auto bg-card rounded-lg shadow-lg p-6">
+            <table className="min-w-full divide-y divide-border">
+              <thead className="bg-background-accent">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Username</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Email</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Balance</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Status</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border">
+                {users.map(user => (
+                  <tr key={user.id} className="hover:bg-background-accent transition-colors">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{user.username}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{user.email}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">${user.balance.toFixed(2)}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm">
+                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                        user.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                      }`}>
+                        {user.status}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium flex space-x-2">
+                      <button className="px-3 py-1 bg-primary-cta text-white rounded-md text-xs flex items-center hover:opacity-90 transition-opacity">
+                        <Plus size={14} className="mr-1" /> Add Funds
+                      </button>
+                      <button className="px-3 py-1 bg-secondary-cta text-white rounded-md text-xs flex items-center hover:opacity-90 transition-opacity">
+                        <Minus size={14} className="mr-1" /> Deduct Funds
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Instagram", href: "/services#instagram" },
+                  { label: "YouTube", href: "/services#youtube" },
+                  { label: "TikTok", href: "/services#tiktok" },
+                  { label: "Twitter", href: "/services#twitter" },
+                  { label: "Facebook", href: "/services#facebook" },
+                  { label: "Telegram", href: "/services#telegram" },
+                ],
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#features" },
+                  { label: "Pricing", href: "/pricing" },
+                  { label: "FAQ", href: "/faq" },
+                  { label: "Contact", href: "/contact" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Terms of Service", href: "/terms" },
+                  { label: "Privacy Policy", href: "/privacy" },
+                ],
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Blog", href: "#" },
+                  { label: "API Docs", href: "#" },
+                ],
+              },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+            logoAlt="SocBoost Logo"
+            logoText="SocBoost"
+            copyrightText="© 2024 SocBoost. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/middleware.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  // Protect /admin routes
+  if (pathname.startsWith('/admin') && !pathname.startsWith('/admin/login')) {
+    const adminToken = request.cookies.get('adminToken');
+
+    if (adminToken?.value === 'mock-admin-token') {
+      return NextResponse.next();
+    }
+
+    const url = request.nextUrl.clone();
+    url.pathname = '/admin/login';
+    url.searchParams.set('redirected', 'true'); // Optional: Add a query param to indicate redirection
+    return NextResponse.redirect(url);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/admin/:path*'], // Apply middleware to all routes under /admin
+};