72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
import React from 'react'
|
|
import { mdiRocketLaunch, mdiMapMarker, mdiTagOutline, mdiChartLine, mdiAccountGroupOutline } from '@mdi/js'
|
|
import BaseIcon from './BaseIcon'
|
|
|
|
interface Startup {
|
|
id: string
|
|
name: string
|
|
tagline: string
|
|
industry: string
|
|
location: string
|
|
stage: string
|
|
business_model: string
|
|
description?: string
|
|
logo?: { url: string }[]
|
|
}
|
|
|
|
const StartupSummaryTile = ({ startup }: { startup: Startup }) => {
|
|
const logoUrl = startup.logo && startup.logo[0] ? startup.logo[0].url : null
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl hover:shadow-blue-100 transition-all duration-300">
|
|
<div className="flex items-center mb-6">
|
|
{logoUrl ? (
|
|
<img src={logoUrl} alt={startup.name} className="w-16 h-16 rounded-2xl object-cover border border-slate-100 mr-4" />
|
|
) : (
|
|
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 border border-blue-100 mr-4">
|
|
<BaseIcon path={mdiRocketLaunch} size={32} />
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h3 className="text-xl font-black text-slate-900 leading-tight">{startup.name}</h3>
|
|
<p className="text-sm font-medium text-slate-400 mt-1 uppercase tracking-wider">{startup.industry}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-slate-600 mb-6 font-medium line-clamp-2 italic leading-snug">
|
|
"{startup.tagline}"
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center text-slate-500 font-medium">
|
|
<div className="w-8 h-8 bg-slate-50 rounded-lg flex items-center justify-center mr-3 text-slate-400">
|
|
<BaseIcon path={mdiMapMarker} size={18} />
|
|
</div>
|
|
<span className="text-sm">{startup.location || 'Remote'}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center text-slate-500 font-medium">
|
|
<div className="w-8 h-8 bg-slate-50 rounded-lg flex items-center justify-center mr-3 text-slate-400">
|
|
<BaseIcon path={mdiTagOutline} size={18} />
|
|
</div>
|
|
<span className="text-sm capitalize">{startup.stage} Stage</span>
|
|
</div>
|
|
|
|
<div className="flex items-center text-slate-500 font-medium">
|
|
<div className="w-8 h-8 bg-slate-50 rounded-lg flex items-center justify-center mr-3 text-slate-400">
|
|
<BaseIcon path={mdiChartLine} size={18} />
|
|
</div>
|
|
<span className="text-sm uppercase">{startup.business_model} Model</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-6 border-t border-slate-50">
|
|
<button className="w-full bg-slate-900 hover:bg-slate-800 text-white py-3 rounded-2xl font-bold transition shadow-lg shadow-slate-200">
|
|
View Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default StartupSummaryTile |