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/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/login/page.tsx

@@ -1,101 +1,92 @@
 "use client";
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+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 router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
-  const handleLogin = async (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    setError('');
-
-    if (email === "admin@demo.com" && password === "Admin@123") {
-      localStorage.setItem('adminToken', 'mock-admin-token');
-      document.cookie = 'adminToken=mock-admin-token; path=/; max-age=3600;';
-      router.push('/admin/dashboard');
+    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.');
+      setError("Invalid email or password.");
     }
   };
 
-  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" }
-  ];
-
   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-md p-8 space-y-6 bg-card rounded-lg shadow-lg">
-          <h2 className="text-2xl font-bold text-center text-foreground">Admin Login</h2>
-          <form onSubmit={handleLogin} className="space-y-4">
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
-              <input
-                type="email"
-                id="email"
-                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm text-black"
-                placeholder="admin@demo.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-            </div>
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium text-foreground">Password</label>
-              <input
-                type="password"
-                id="password"
-                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm text-black"
-                placeholder="Admin@123"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-              />
-            </div>
-            {error && <p className="text-red-500 text-sm text-center">{error}</p>}
+    <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="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"
+              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"
             >
-              Log In
+              Sign in
             </button>
-          </form>
+          </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>
-    </ThemeProvider>
+    </div>
   );
 }

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

@@ -13,11 +13,29 @@ export default function OrdersManagementPage() {
     { 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" },
+    { 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"
@@ -34,15 +52,7 @@ export default function OrdersManagementPage() {
       <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" }
-            ]}
+            navItems={navItems}
             logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
             logoAlt="SocBoost Logo"
             brandName="SocBoost"
@@ -52,13 +62,13 @@ export default function OrdersManagementPage() {
           />
         </div>
 
-        <main className="container mx-auto px-4 py-8">
-          <h1 className="text-4xl font-bold mb-8">Orders Management</h1>
+        <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">Filter by Status:</label>
-              <select id="status-filter" className="p-2 border rounded-md bg-white dark:bg-gray-800 dark:border-gray-700">
+              <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>
                 ))}
@@ -101,7 +111,7 @@ export default function OrdersManagementPage() {
                       </span>
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <select className="p-1 border rounded-md bg-white dark:bg-gray-700 dark:border-gray-600 mr-2">
+                      <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>
                         ))}
@@ -117,38 +127,7 @@ export default function OrdersManagementPage() {
 
         <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: "#" },
-                ],
-              },
-            ]}
+            columns={footerColumns}
             logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
             logoAlt="SocBoost Logo"
             logoText="SocBoost"
@@ -158,4 +137,4 @@ export default function OrdersManagementPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

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>
+  );
+}