import Image from "next/image";
import Link from "next/link";

export default function Page() {
  return (
    <div className="grid gap-12 px-4 py-8 sm:px-12 sm:py-12">
      <div className="grid max-w-3xl gap-2 text-balance">
        <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
          Supercharge your marketing with AI agents
        </h2>
        <p className="text-balance text-lg text-muted-foreground">
          Deploy intelligent marketing agents that work 24/7 to grow your
          business.
        </p>
      </div>

      <div className="grid gap-8 md:grid-cols-3">
        <Link
          className="group flex flex-col overflow-hidden rounded-lg border bg-background p-4 transition-shadow hover:shadow-lg"
          href="https://vercel.com/guides/stateful-slack-bots-with-vercel-workflow"
        >
          <h3 className="font-medium tracking-tight">
            Content Generation Agent
          </h3>
          <p className="mb-8 line-clamp-2 text-muted-foreground text-sm">
            Automatically create blog posts, social media content, and email
            campaigns tailored to your brand voice.
          </p>
          <div className="-mb-12 relative mt-auto">
            <Image
              alt="Content Generation Agent"
              className="-rotate-3 group-hover:-rotate-1 ml-7 aspect-video overflow-hidden rounded-md border object-cover object-top transition-transform duration-300 group-hover:scale-105"
              height={336}
              src="/login/login-page-6.png"
              width={640}
            />
          </div>
        </Link>

        <Link
          className="group flex flex-col overflow-hidden rounded-lg border bg-background p-4 transition-shadow hover:shadow-lg"
          href="https://github.com/vercel/workflow-examples/tree/main/flight-booking-app"
        >
          <h3 className="font-medium tracking-tight">
            Customer Engagement Agent
          </h3>
          <p className="mb-8 line-clamp-2 text-muted-foreground text-sm">
            Respond to customer inquiries instantly, qualify leads, and schedule
            demos without human intervention.
          </p>
          <div className="-mb-12 relative mt-auto">
            <Image
              alt="Customer Engagement Agent"
              className="-rotate-3 group-hover:-rotate-1 ml-7 aspect-video overflow-hidden rounded-md border object-cover object-top transition-transform duration-300 group-hover:scale-105"
              height={336}
              src="/login/login-page-7.png"
              width={640}
            />
          </div>
        </Link>

        <Link
          className="group flex flex-col overflow-hidden rounded-lg border bg-background p-4 transition-shadow hover:shadow-lg"
          href="https://github.com/vercel/workflow-examples/tree/main/natural-language-image-search"
        >
          <h3 className="font-medium tracking-tight">
            Campaign Optimization Agent
          </h3>
          <p className="mb-8 line-clamp-2 text-muted-foreground text-sm">
            Analyze performance data in real-time and automatically adjust ad
            spend, targeting, and creative assets.
          </p>
          <div className="-mb-12 relative mt-auto">
            <Image
              alt="Campaign Optimization Agent"
              className="-rotate-3 group-hover:-rotate-1 ml-7 aspect-video overflow-hidden rounded-md border object-cover object-top transition-transform duration-300 group-hover:scale-105"
              height={336}
              src="/login/login-page-8.png"
              width={640}
            />
          </div>
        </Link>
      </div>
    </div>
  );
}
marketing-feature-grid-1

marketing-feature-grid-1

marketing-feature-grid-1

marketing-feature-grid-1
