All files / features/public/components FeatureCard.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
 
 
 
 
 
 
 
 
1x
 
18x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18x
18x
 
 
 
 
 
 
18x
 
 
 
 
 
 
 
 
 
import { Card, CardContent } from '@core/components/ui/card'
import { Link } from 'react-router-dom'
 
interface FeatureCardProps {
    icon: React.ReactNode
    title: string
    description: string
    url?: string
}
 
export const FeatureCard = ({ icon, title, description, url }: FeatureCardProps) => {
    const CardContentElement = (
        <Card
            className="backdrop-blur-md transition-all duration-500 hover:-translate-y-1 hover:shadow-lg border-0 h-full cursor-pointer"
            style={{
                backgroundColor:
                    'hsl(var(--landing-card-glass-bg) / var(--landing-card-glass-alpha))',
                color: 'var(--card-foreground)',
                boxShadow: 'var(--card-hover-shadow)',
            }}
        >
            <CardContent className="p-6 flex flex-col gap-3">
                <div
                    className="p-3 rounded-xl w-fit"
                    style={{
                        backgroundColor: 'hsl(var(--landing-card-glass-bg) / 0.1)',
                        border: '1px solid hsl(var(--landing-card-glass-border) / 0.2)',
                    }}
                >
                    {icon}
                </div>
                <h3 className="font-bold text-lg">{title}</h3>
                <p className="text-sm opacity-80 leading-relaxed">{description}</p>
            </CardContent>
        </Card>
    )
 
    Eif (url) {
        Iif (url.startsWith('http')) {
            return (
                <a href={url} target="_blank" rel="noopener noreferrer" className="block h-full">
                    {CardContentElement}
                </a>
            )
        }
        return (
            <Link to={url} className="block h-full">
                {CardContentElement}
            </Link>
        )
    }
 
    return <div className="h-full">{CardContentElement}</div>
}