page.tsx

Go to the documentation of this file.

"use client";
import Link from "next/link";
import { Icon } from '@/contexts/IconContext';
 
export default function MarketingPage() {
  return (
    <div className="min-h-screen bg-surface-2">
      <div className="max-w-7xl mx-auto p-6">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-text mb-2">Marketing Programs</h1>
          <p className="text-muted">Manage campaigns, promotions, and customer engagement</p>
        </div>
 
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* Campaigns */}
          <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
            <div className="text-4xl mb-4"><Icon name="campaign" size={40} /></div>
            <h2 className="text-xl font-bold text-text mb-2">Campaigns</h2>
            <p className="text-muted text-sm mb-4">
              Create and manage marketing campaigns across multiple channels
            </p>
            <Link
              href="/marketing/campaigns"
              className="block w-full px-4 py-2 bg-brand text-white rounded hover:bg-brand/90 transition text-center"
            >
              Manage Campaigns
            </Link>
          </div>
 
          {/* Promotions */}
          <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
            <div className="text-4xl mb-4"><Icon name="card_giftcard" size={40} /></div>
            <h2 className="text-xl font-bold text-text mb-2">Promotions</h2>
            <p className="text-muted text-sm mb-4">
              Set up discounts, special offers, and promotional pricing
            </p>
            <button className="w-full px-4 py-2 bg-success text-white rounded hover:bg-success/80 transition">
              New Promotion
            </button>
          </div>
 
          {/* Email & Interfaces */}
          <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
            <div className="text-4xl mb-4"><Icon name="email" size={40} /></div>
            <h2 className="text-xl font-bold text-text mb-2">Email &amp; Interfaces</h2>
            <p className="text-muted text-sm mb-4">
              Manage email and SMS communications, logs, and external interfaces
            </p>
            <Link
              href="/marketing/messaging"
              className="block w-full px-4 py-2 bg-info text-white rounded hover:bg-info/80 transition text-center"
            >
              Open Messaging
            </Link>
          </div>
 
          {/* Social Media */}
          <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
            <div className="text-4xl mb-4"><Icon name="share" size={40} /></div>
            <h2 className="text-xl font-bold text-text mb-2">Social Media</h2>
            <p className="text-muted text-sm mb-4">
              Manage your social media presence and engagement
            </p>
            <button className="w-full px-4 py-2 bg-accent text-white rounded hover:bg-accent/80 transition">
              Manage Posts
            </button>
          </div>
 
          {/* Loyalty Programs */}
          <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
            <div className="text-4xl mb-4"><Icon name="star" size={40} /></div>
            <h2 className="text-xl font-bold text-text mb-2">Loyalty Programs</h2>
            <p className="text-muted text-sm mb-4">
              Reward your best customers and increase retention
            </p>
            <Link 
              href="/pages/customers/loyalty"
              className="block w-full px-4 py-2 bg-warn text-white rounded hover:bg-warn/80 transition text-center"
            >
              View Loyalty
            </Link>
          </div>
 
          {/* Analytics */}
          <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
            <div className="text-4xl mb-4"><Icon name="bar_chart" size={40} /></div>
            <h2 className="text-xl font-bold text-text mb-2">Campaign Analytics</h2>
            <p className="text-muted text-sm mb-4">
              Track performance and ROI of your marketing efforts
            </p>
            <Link 
              href="/pages/reports/analytics"
              className="block w-full px-4 py-2 bg-brand2 text-white rounded hover:bg-brand2/80 transition text-center"
            >
              View Analytics
            </Link>
          </div>
        </div>
 
        {/* Info Section */}
        <div className="mt-8 bg-surface border border-border rounded-lg p-6">
          <div className="flex items-start">
            <div className="text-3xl mr-4"><Icon name="construction" size={32} /></div>
            <div>
              <h3 className="font-semibold text-text mb-2">Marketing Suite Under Development</h3>
              <p className="text-text text-sm mb-3">
                The complete marketing platform is being built with features for campaign management, 
                automated email marketing, social media integration, and detailed analytics.
              </p>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
                <div className="bg-surface rounded p-2 text-center text-xs">
                  <div className="font-semibold text-text">Coming Soon</div>
                  <div className="text-muted">Email Templates</div>
                </div>
                <div className="bg-surface rounded p-2 text-center text-xs">
                  <div className="font-semibold text-text">Coming Soon</div>
                  <div className="text-muted">SMS Marketing</div>
                </div>
                <div className="bg-surface rounded p-2 text-center text-xs">
                  <div className="font-semibold text-text">Coming Soon</div>
                  <div className="text-muted">A/B Testing</div>
                </div>
                <div className="bg-surface rounded p-2 text-center text-xs">
                  <div className="font-semibold text-text">Coming Soon</div>
                  <div className="text-muted">Automation</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}