67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
|
|
const AIInsights = ({ insights }) => {
|
|
if (!insights || insights.length === 0) return null
|
|
|
|
return (
|
|
<div style={{
|
|
marginTop: "50px",
|
|
marginBottom: "50px",
|
|
padding: "40px",
|
|
background: "rgba(30, 41, 59, 0.4)",
|
|
border: "1px solid rgba(255,255,255,0.05)",
|
|
borderRadius: "32px",
|
|
backdropFilter: "blur(20px)"
|
|
}}>
|
|
<h3 style={{
|
|
fontSize: "24px",
|
|
fontWeight: "800",
|
|
marginBottom: "35px",
|
|
background: "linear-gradient(to right, #f8fafc, #64748b)",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent"
|
|
}}>
|
|
Executive AI Insights
|
|
</h3>
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "25px" }}>
|
|
{insights.map((ins, i) => (
|
|
<div key={i} style={{
|
|
padding: "32px",
|
|
background: "rgba(255,255,255,0.02)",
|
|
borderRadius: "24px",
|
|
border: "1px solid rgba(255,255,255,0.03)",
|
|
transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
|
|
cursor: "default"
|
|
}}>
|
|
<div style={{
|
|
width: "40px",
|
|
height: "40px",
|
|
background: "rgba(59, 130, 246, 0.1)",
|
|
borderRadius: "12px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
color: "#3b82f6",
|
|
fontSize: "20px",
|
|
marginBottom: "20px",
|
|
border: "1px solid rgba(59, 130, 246, 0.2)"
|
|
}}>
|
|
◈
|
|
</div>
|
|
<div style={{
|
|
fontSize: "16px",
|
|
lineHeight: "1.7",
|
|
color: "#cbd5e1",
|
|
fontWeight: "500"
|
|
}}>
|
|
{ins}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AIInsights
|