byom-customer-dashboard/src/app/dashboard/showcase/page.tsx

// src/app/dashboard/showcase/page.tsx
'use client'
import { 
    Sparkles, 
    ShoppingBag, 
    Globe, 
    Share2,
    ArrowRight
  } from 'lucide-react'
import { useTheme } from '@/contexts/themecontext'
  
  const integrations = [
    {
      id: 1,
      name: "Shopify",
      description: "Connect your Shopify store to automate product promotion and track sales from social posts",
      icon: "https://img.icons8.com/color/512/shopify.png", // Replace with actual Shopify icon
      features: [
        "Automatic product sync",
        "Sales tracking",
        "Inventory management",
        "Direct checkout"
      ],
      status: "Popular",
      category: "E-commerce"
    },
    {
      id: 2,
      name: "WooCommerce",
      description: "Integrate with WordPress-based stores to streamline your social media marketing",
      icon: "https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/woocommerce-icon.png", // Replace with actual WooCommerce icon
      features: [
        "WordPress integration",
        "Product catalog sync",
        "Order tracking",
        "Custom fields support"
      ],
      status: "New",
      category: "E-commerce"
    },
    {
      id: 3,
      name: "Meta Business",
      description: "Connect with Facebook and Instagram shops for seamless social selling",
      icon: "https://cdn-icons-png.flaticon.com/512/6033/6033716.png", // Replace with actual Meta icon
      features: [
        "Facebook Shop integration",
        "Instagram Shopping",
        "Automated tagging",
        "Cross-platform insights"
      ],
      status: "Popular",
      category: "Social Commerce"
    },
    {
      id: 4,
      name: "Square",
      description: "Connect your Square POS system to track in-store and online sales",
      icon: "https://icons.veryicon.com/png/o/object/material-design-icons-1/square-inc.png", // Replace with actual Square icon
      features: [
        "POS integration",
        "Payment processing",
        "Unified inventory",
        "Sales analytics"
      ],
      status: "New",
      category: "Payments"
    }
  ]
  
  export default function ShowcasePage() {
    const { theme } = useTheme()
  
    return (
      <div className="p-6">
        {/* Header */}
        <div className="mb-8">
          <h1 className={`text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'} mb-2 flex items-center`}>
            <Sparkles className="w-8 h-8 mr-3 text-yellow-500" />
            Integrations
          </h1>
          <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'} text-lg`}>Connect your store and expand your reach</p>
        </div>
  
        {/* Quick Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div className={`${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} rounded-lg p-6 shadow-lg`}>
            <ShoppingBag className="w-8 h-8 text-blue-500 mb-4" />
            <h3 className={`${theme === 'dark' ? 'text-white' : 'text-gray-900'} text-lg font-semibold mb-1`}>E-commerce</h3>
            <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>Connect your online store</p>
          </div>
          <div className={`${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} rounded-lg p-6 shadow-lg`}>
            <Globe className="w-8 h-8 text-purple-500 mb-4" />
            <h3 className={`${theme === 'dark' ? 'text-white' : 'text-gray-900'} text-lg font-semibold mb-1`}>Multi-platform</h3>
            <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>Sell across channels</p>
          </div>
          <div className={`${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} rounded-lg p-6 shadow-lg`}>
            <Share2 className="w-8 h-8 text-green-500 mb-4" />
            <h3 className={`${theme === 'dark' ? 'text-white' : 'text-gray-900'} text-lg font-semibold mb-1`}>Analytics</h3>
            <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>Track performance</p>
          </div>
        </div>
  
        {/* Integrations Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {integrations.map((integration) => (
            <div key={integration.id} className={`${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} rounded-lg p-6 hover:ring-2 hover:ring-blue-500/50 transition-all shadow-lg`}>
              {/* Header */}
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center">
                  <div className={`w-12 h-12 ${theme === 'dark' ? 'bg-gray-700' : 'bg-gray-100'} rounded-lg mr-4 overflow-hidden`}>
                    <img 
                      src={integration.icon} 
                      alt={integration.name} 
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div>
                    <div className="flex items-center">
                      <h3 className={`text-lg font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>{integration.name}</h3>
                      {integration.status && (
                        <span className={`ml-2 px-2 py-0.5 rounded-full text-xs ${
                          integration.status === 'Popular' 
                            ? 'bg-green-500/10 text-green-500' 
                            : 'bg-blue-500/10 text-blue-400'
                        }`}>
                          {integration.status}
                        </span>
                      )}
                    </div>
                    <span className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>{integration.category}</span>
                  </div>
                </div>
              </div>
  
              {/* Description */}
              <p className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'} mb-4`}>{integration.description}</p>
  
              {/* Features */}
              <div className="mb-6">
                <h4 className={`text-sm font-semibold ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'} mb-2`}>Key Features</h4>
                <ul className="grid grid-cols-2 gap-2">
                  {integration.features.map((feature, index) => (
                    <li key={index} className={`flex items-center text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
                      <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
  
              {/* Action Button */}
              <button className={`w-full ${theme === 'dark' ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200'} text-${theme === 'dark' ? 'white' : 'gray-900'} rounded-lg px-4 py-2 flex items-center justify-center space-x-2 transition-colors`}>
                <span>Learn More</span>
                <ArrowRight className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>
  
        {/* Coming Soon Section */}
        <div className={`mt-8 bg-gradient-to-r ${theme === 'dark' ? 'from-blue-500/10 to-purple-500/10' : 'from-blue-100 to-purple-100'} rounded-lg p-6`}>
          <h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'} mb-2`}>More Integrations Coming Soon</h2>
          <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>We are constantly adding new integrations. Request the ones you need!</p>
          <button className="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors">
            Request Integration
          </button>
        </div>
      </div>
    )
  }