|
1 | 1 | import React from 'react'; |
2 | 2 | import { Link } from 'react-router-dom'; |
3 | 3 | import { ArrowRight } from '@phosphor-icons/react'; |
4 | | -import colors from '../config/colors'; |
5 | 4 | import { appIcons } from '../utils/appIcons'; |
6 | 5 |
|
7 | 6 | const AppCard = ({ app }) => { |
8 | 7 | const { to, title, description } = app; |
9 | 8 | const Icon = appIcons[app.icon]; |
10 | 9 |
|
11 | | - const cardStyle = { |
12 | | - backgroundColor: colors['app-alpha-10'], |
13 | | - borderColor: colors['app-alpha-50'], |
14 | | - color: colors.app, |
15 | | - }; |
16 | | - |
17 | | - const detailTextColor = colors['app-light']; |
18 | | - |
19 | 10 | return ( |
20 | | - <Link to={to} className="block h-full"> |
21 | | - <div className="group border rounded-lg shadow-lg p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out overflow-hidden h-full bg-app-alpha-10 border-app-alpha-50 text-app hover:bg-rose-900/30"> |
22 | | - <div |
23 | | - className="absolute top-0 left-0 w-full h-full opacity-10 group-hover:opacity-0 transition-opacity duration-500 ease-in-out" |
24 | | - style={{ |
25 | | - backgroundImage: |
26 | | - 'radial-gradient(circle, white 1px, transparent 1px)', |
27 | | - backgroundSize: '10px 10px', |
28 | | - }} |
29 | | - ></div> |
30 | | - <div |
31 | | - className="absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-10 transition-opacity duration-500 ease-in-out" |
32 | | - style={{ |
33 | | - backgroundImage: |
34 | | - 'linear-gradient(white 1px, transparent 1px), linear-gradient(to right, white 1px, transparent 1px)', |
35 | | - backgroundSize: '15px 15px', |
36 | | - }} |
37 | | - ></div> |
38 | | - <div> |
39 | | - <h2 |
40 | | - className="text-xl font-normal transition-colors flex items-center gap-2" |
41 | | - style={{ color: cardStyle.color }} |
42 | | - > |
43 | | - {Icon && <Icon size={24} />} |
44 | | - {title} |
45 | | - </h2> |
46 | | - <p className="mt-2" style={{ color: detailTextColor }}> |
| 11 | + <Link to={to} className="block h-full group"> |
| 12 | + <div className="relative h-full p-6 bg-gray-800/40 border border-gray-700 rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:border-primary-500/50 flex flex-col"> |
| 13 | + {/* Gradient Glow Effect */} |
| 14 | + <div className="absolute inset-0 opacity-0 group-hover:opacity-20 transition-opacity duration-500 bg-gradient-to-br from-primary-500 to-transparent pointer-events-none" /> |
| 15 | + |
| 16 | + <div className="relative z-10 flex flex-col h-full"> |
| 17 | + <div className="flex items-center gap-4 mb-4"> |
| 18 | + <div className="p-3 rounded-xl bg-gray-700/50 text-primary-400 group-hover:text-white group-hover:bg-primary-500 transition-colors duration-300"> |
| 19 | + {Icon && <Icon size={32} weight="duotone" />} |
| 20 | + </div> |
| 21 | + <h3 className="text-xl font-semilight font-mono text-gray-100 group-hover:text-white transition-colors"> |
| 22 | + {title} |
| 23 | + </h3> |
| 24 | + </div> |
| 25 | + <p className="text-gray-400 text-sm leading-relaxed flex-grow font-sans"> |
47 | 26 | {description} |
48 | 27 | </p> |
49 | | - </div> |
50 | | - <div className="flex justify-end items-center mt-4"> |
51 | | - <ArrowRight |
52 | | - size={24} |
53 | | - className="transition-colors" |
54 | | - style={{ color: detailTextColor }} |
55 | | - /> |
| 28 | + |
| 29 | + <div className="mt-6 flex items-center text-sm font-medium text-primary-400 group-hover:text-primary-300 transition-colors font-mono"> |
| 30 | + Launch App <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" /> |
| 31 | + </div> |
56 | 32 | </div> |
57 | 33 | </div> |
58 | 34 | </Link> |
|
0 commit comments