`DW-Agents/dw-agents/agent-marketing-nextjs/app/page.tsx`

138 lines
export default function MarketingDashboard() {
  return (
    <div className="min-h-screen p-8">
      {/* Header */}
      <div className="bg-gradient-to-r from-[var(--primary)] to-[var(--secondary)] rounded-2xl p-8 mb-8 shadow-lg">
        <div className="flex items-center gap-4 mb-4">
          <span className="text-5xl">📢</span>
          <div>
            <h1 className="text-4xl font-bold text-slate-900">Marketing Agent</h1>
            <p className="text-slate-800 text-lg">AI-Powered Content Creation & Social Media</p>
          </div>
        </div>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <StatCard title="Blog Posts Created" value="0" icon="📝" color="primary" />
        <StatCard title="Social Posts" value="0" icon="📱" color="accent" />
        <StatCard title="Email Campaigns" value="0" icon="📧" color="secondary" />
        <StatCard title="Total Conversations" value="0" icon="💬" color="success" />
      </div>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Create Blog Post */}
        <ContentCard title="Create Blog Post from SKU">
          <p className="text-[var(--foreground-secondary)] mb-4">
            Enter a product SKU to generate a compelling blog post with AI
          </p>
          <form className="space-y-4">
            <input
              type="text"
              placeholder="Enter SKU (e.g. CY1570)"
              className="w-full px-4 py-3 rounded-lg bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--foreground)] placeholder-[var(--foreground-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
            />
            <button className="w-full bg-[var(--primary)] hover:bg-[var(--primary-dark)] text-slate-900 font-semibold py-3 px-6 rounded-lg transition-colors">
              Generate Blog Post
            </button>
          </form>
        </ContentCard>

        {/* Generate Social Media */}
        <ContentCard title="Social Media Content">
          <p className="text-[var(--foreground-secondary)] mb-4">
            Create engaging social media posts for Instagram and Facebook
          </p>
          <form className="space-y-4">
            <textarea
              placeholder="Describe the content or paste product URL..."
              rows={3}
              className="w-full px-4 py-3 rounded-lg bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--foreground)] placeholder-[var(--foreground-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
            />
            <div className="flex gap-3">
              <button className="flex-1 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-all">
                📸 Instagram Post
              </button>
              <button className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors">
                👤 Facebook Post
              </button>
            </div>
          </form>
        </ContentCard>

        {/* Recent Blog Posts */}
        <ContentCard title="Recent Blog Posts">
          <div className="text-center py-8 text-[var(--foreground-secondary)]">
            <p className="text-4xl mb-2">📚</p>
            <p>No blog posts yet</p>
            <p className="text-sm">Create your first blog post to get started</p>
          </div>
        </ContentCard>

        {/* Email Campaigns */}
        <ContentCard title="Email Campaign Draft">
          <p className="text-[var(--foreground-secondary)] mb-4">
            Draft email campaigns with AI assistance
          </p>
          <form className="space-y-4">
            <input
              type="text"
              placeholder="Campaign subject line..."
              className="w-full px-4 py-3 rounded-lg bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--foreground)] placeholder-[var(--foreground-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
            />
            <textarea
              placeholder="Campaign description or key points..."
              rows={3}
              className="w-full px-4 py-3 rounded-lg bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--foreground)] placeholder-[var(--foreground-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
            />
            <button className="w-full bg-[var(--warning)] hover:bg-[var(--warning)]/90 text-slate-900 font-semibold py-3 px-6 rounded-lg transition-colors">
              Draft Email Campaign
            </button>
          </form>
        </ContentCard>
      </div>
    </div>
  );
}

interface StatCardProps {
  title: string;
  value: string;
  icon: string;
  color: string;
}

function StatCard({ title, value, icon, color }: StatCardProps) {
  const colorMap: Record<string, string> = {
    primary: 'bg-[var(--primary)]/10 border-[var(--primary)]',
    accent: 'bg-[var(--accent)]/10 border-[var(--accent)]',
    secondary: 'bg-[var(--secondary)]/10 border-[var(--secondary)]',
    success: 'bg-[var(--success)]/10 border-[var(--success)]',
  };

  return (
    <div className={`${colorMap[color]} border-2 rounded-xl p-6 shadow-md`}>
      <div className="flex items-center justify-between mb-2">
        <span className="text-3xl">{icon}</span>
      </div>
      <p className="text-[var(--foreground-secondary)] text-sm font-medium">{title}</p>
      <p className="text-4xl font-bold text-[var(--foreground)] mt-2">{value}</p>
    </div>
  );
}

interface ContentCardProps {
  title: string;
  children: React.ReactNode;
}

function ContentCard({ title, children }: ContentCardProps) {
  return (
    <div className="bg-[var(--surface)] rounded-xl p-6 shadow-lg border border-[var(--border)]">
      <h2 className="text-2xl font-bold text-[var(--foreground)] mb-4">{title}</h2>
      {children}
    </div>
  );
}