Skip to main content

Social Media Post Card Variants

Overview​

Three modern, trendy card designs for the Social Media Bot, all aligned with the toto-bo design system.

Viewing the Demos​

Navigate to: /dashboard/ai-hub/social-media-bot/demo-variants

Or run the server and visit:

http://localhost:5000/dashboard/ai-hub/social-media-bot/demo-variants

🎨 Variant 1: Modern Minimal with Accent Border​

Key Features:​

  • Top accent bar - Colored line at the top indicating platform
  • Gradient icon containers - Platform icons in gradient circles (matching toto-bo style)
  • Clean layout - Maximum information density
  • Color-coded confidence - Badges with background colors
  • Overlapping image previews - Space-efficient thumbnail display

Best For:​

  • Professional, business-focused interface
  • Users who need to scan many posts quickly
  • Data-heavy workflows

Design Inspiration:​

  • Linear App
  • Notion cards
  • Modern SaaS dashboards

🌈 Variant 2: Card with Side Accent & Circular Progress​

Key Features:​

  • Vertical accent bar - Bold left-side platform identifier
  • Circular progress indicator - Confidence shown as a circle (like iOS)
  • Rotated urgency label - Vertical text for visual interest
  • Horizontal image grid - 4-image grid display
  • Recommendation badge - Clear "💡 Recommended:" indicator

Best For:​

  • Creative, visual-first teams
  • Emphasizing platform identity
  • Users who prefer bold, distinctive designs

Design Inspiration:​

  • Dribbble
  • Behance cards
  • Apple Health/Fitness apps

✨ Variant 3: Glassmorphism Style (Most Modern)​

Key Features:​

  • Glassmorphic effects - Frosted glass look with backdrop blur
  • Soft gradients - Subtle background color transitions
  • Floating elements - Content feels elevated
  • Image carousel preview - Horizontal scrollable thumbnails
  • Premium shadows - Colored shadows matching button gradients
  • Hover animations - Background gradient appears on hover

Best For:​

  • Modern, trendy applications
  • Premium/high-end feel
  • Impressing stakeholders/investors

Design Inspiration:​

  • Apple iOS 15+ design language
  • Windows 11 Fluent Design
  • Modern crypto/web3 apps

Implementation​

To Use a Variant:​

  1. Import the variant:
import { PostCardVariant1 } from '@/components/social-media/PostCardVariants';
// or PostCardVariant2, PostCardVariant3
  1. Replace the existing card in page.tsx:
<PostCardVariant1
  post={post}
  expanded={expandedPosts.has(post.id)}
  onToggleExpand={() => toggleExpanded(post.id)}
  onCreateCase={() => {
    setSelectedPost(post);
    setCaseCreationModalOpen(true);
  }}
  onCreateUpdate={() => {
    setSelectedPost(post);
    setCaseUpdateModalOpen(true);
  }}
  onViewDetails={() => router.push(`/dashboard/ai-hub/social-media-bot/posts/${post.id}`)}
/>

Design System Alignment​

All variants follow the toto-bo design system:

✅ Gradient Backgrounds​

  • Uses from-{color}-500 to-{color}-600 pattern
  • Matches the cases page stat cards

✅ Rounded Corners​

  • rounded-xl and rounded-2xl for modern feel
  • Consistent with existing toto-bo components

✅ Shadow System​

  • shadow-sm → shadow-md → shadow-lg
  • Hover states enhance shadows
  • Colored shadows for premium buttons

✅ Color Palette​

  • Blue: Twitter, Updates
  • Green/Emerald: Cases, Success
  • Red: Critical urgency
  • Orange: High urgency
  • Yellow: Medium urgency
  • Purple: Instagram, secondary actions

✅ Typography​

  • Consistent font weights (semibold, bold)
  • Proper text hierarchy
  • Gray-900 for headings, gray-600 for secondary

✅ Spacing​

  • Uses p-4, p-5, p-6 for padding
  • gap-2, gap-3, gap-4 for consistent spacing
  • Follows 4px grid system

Recommendation​

For Production: Variant 1 or Variant 3

  • Variant 1 if you prioritize:

    • Information density
    • Quick scanning
    • Professional appearance
    • Maximum posts per screen

  • Variant 3 if you prioritize:

    • Modern, trendy look
    • Premium feel
    • Impressing users/stakeholders
    • Visual appeal over density

Variant 2 is great if you want something bold and different, but takes more vertical space.

Customization​

Each variant can be easily customized:

  1. Colors: Change gradient classes (from-blue-500 → from-indigo-500)
  2. Spacing: Adjust padding/gap values
  3. Shadows: Increase/decrease shadow intensity
  4. Border radius: Change rounded-xl to rounded-lg or rounded-2xl
  5. Image display: Modify grid layouts or thumbnail sizes

Performance Notes​

All variants use:

  • Next.js Image component for optimization
  • Tailwind CSS (no runtime CSS-in-JS)
  • Conditional rendering for expanded states
  • No heavy animations (just transitions)

Expected performance: Excellent for lists of 50+ posts.