🎨 Feature: New Event Card UI for AI-Generated Events

Overview

EventKonnect currently displays a single type of event card for manually created events.
With the introduction of AI-based event creation, we need a distinct, modern UI card to visually differentiate AI-generated events from manual ones.

---

🎯 Goal

Design and implement a new event card component that highlights events generated via the Groq AI integration.
The new card should feel smart, elegant, and distinct, while maintaining the overall design consistency of EventKonnect.

---

🧩 Design Requirements

Visual Differences

• Slightly different color theme or accent (e.g., gradient border, AI tag, or glow effect).
• Include a small “✨ AI-Generated” label or badge.
• Maintain consistent layout spacing with manual event cards.

Event Card Content

Each AI event card should display:

• Event Title
• Event Description (shortened or truncated)
• Category / Type
• Tags (pill or chip style)
• Date & Time
• AI Badge (e.g., “Generated by AI”)
• Optional: Regenerate or Edit buttons before saving

---

🖼️ UI Behavior

1. Preview Mode

When AI generates an event:

• Show the AI Event Card Preview before final submission.
• Include buttons:
  • Accept & Save
  • Regenerate
  • Edit

2. Saved State

Once saved:

• Show the AI tag badge (e.g., top-right corner).
• Card should appear in event listings, visually distinct from manually created ones.

---

💡 Suggested Design Style

• Use Tailwind CSS with rounded corners (2xl), soft shadows, and subtle glow.
• Gradient accent (e.g., from-blue-500 to-purple-500) for AI cards.
• Clean typography — event title bold, date smaller and muted.
• Responsive for both desktop and mobile.

---

🧠 Example (Figma-style Sketch)

<Card className="rounded-2xl border border-blue-400 bg-gradient-to-br from-blue-50 to-purple-50 shadow-md hover:shadow-lg transition">
  <CardHeader>
    <div className="flex justify-between items-center">
      <h3 className="text-xl font-semibold">{event.title}</h3>
      <span className="text-xs bg-gradient-to-r from-blue-500 to-purple-500 text-white px-2 py-1 rounded-md">✨ AI-Generated</span>
    </div>
  </CardHeader>
  <CardContent>
    <p className="text-gray-700 line-clamp-3">{event.description}</p>
    <div className="flex flex-wrap gap-2 mt-3">
      {event.tags.map(tag => (
        <span key={tag} className="text-xs bg-gray-100 px-2 py-1 rounded-full">{tag}</span>
      ))}
    </div>
  </CardContent>
  <CardFooter className="flex justify-between items-center mt-4">
    <span className="text-sm text-gray-500">{event.date}</span>
    <div className="flex gap-2">
      <Button variant="outline">Regenerate</Button>
      <Button>Save</Button>
    </div>
  </CardFooter>
</Card>
✅ Acceptance Criteria
 A new AI Event Card component is created and styled distinctly.
 The card includes the “AI-Generated” label.
 Supports both preview and saved states.
 Responsive across devices.
 Smooth animations and accessible contrast.
 Integrated with the event creation flow.