Hugging Face's logo

Spaces:
Bogdan555
/
grantforge-api
Running

App Files Community
grantforge-api
File size: 4,254 Bytes
ce8f04a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React from 'react';
import { motion } from 'framer-motion';
import { FolderOpen, Plus, Sparkles } from 'lucide-react';

interface EmptyProjectsStateProps {
    onCreateClick: () => void;
}

const EmptyProjectsState: React.FC<EmptyProjectsStateProps> = ({ onCreateClick }) => {
    return (
        <motion.div 

            initial={{ opacity: 0, y: 20 }}

            animate={{ opacity: 1, y: 0 }}

            transition={{ duration: 0.5, ease: 'easeOut' }}

            className="glass-card"

            style={{ 

                textAlign: 'center', 

                padding: '6rem 3rem', 

                color: 'var(--text-muted)', 

                display: 'flex', 

                flexDirection: 'column', 

                alignItems: 'center', 

                gap: '1.5rem', 

                background: 'linear-gradient(145deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.2) 100%)',

                border: '1px dashed rgba(59, 130, 246, 0.3)',

                boxShadow: '0 20px 40px rgba(0, 0, 0, 0.2)',

                borderRadius: '24px',

                position: 'relative',

                overflow: 'hidden'

            }}

        >

            {/* T艂o - dekoracyjna po艣wiata */}

            <div style={{ position: 'absolute', top: '-100px', left: '50%', transform: 'translateX(-50%)', width: '300px', height: '300px', background: 'radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%)', filter: 'blur(40px)', zIndex: 0 }}/>



            <motion.div 

                animate={{ y: [0, -10, 0] }}

                transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}

                style={{ 

                    background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.1))', 

                    padding: '1.8rem', 

                    borderRadius: '50%', 

                    marginBottom: '0.5rem',

                    border: '1px solid rgba(255, 255, 255, 0.05)',

                    boxShadow: '0 0 30px rgba(59, 130, 246, 0.1)',

                    position: 'relative',

                    zIndex: 1

                }}

            >

                <FolderOpen size={56} color="var(--accent-blue)" style={{ opacity: 0.9 }} />

                <motion.div

                    animate={{ rotate: 360 }}

                    transition={{ repeat: Infinity, duration: 20, ease: "linear" }}

                    style={{ position: 'absolute', top: -10, right: -10 }}

                >

                    <Sparkles size={24} color="var(--accent-green)" />

                </motion.div>

            </motion.div>



            <h3 className="display-font" style={{ fontSize: '2rem', color: 'var(--text-primary)', fontWeight: 800, margin: 0, zIndex: 1 }}>

                Witaj w GrantForge!

            </h3>

            

            <p style={{ maxWidth: '500px', lineHeight: 1.6, fontSize: '1.1rem', zIndex: 1 }}>

                Nie masz jeszcze 偶adnych aktywnych projekt贸w dotacyjnych. Zacznij swoj膮 podr贸偶, pozwalaj膮c naszej sztucznej inteligencji wygenerowa膰 dla Ciebie pierwszy wniosek optymalizowany pod k膮tem sukcesu.

            </p>

            

            <motion.button 

                whileHover={{ scale: 1.05, boxShadow: '0 0 30px rgba(16, 185, 129, 0.6)' }}

                whileTap={{ scale: 0.95 }}

                className="btn btn-primary"

                onClick={onCreateClick}

                style={{ 

                    marginTop: '2rem', 

                    padding: '1.2rem 2.5rem', 

                    fontSize: '1.15rem', 

                    background: 'linear-gradient(90deg, var(--accent-green), #3b82f6)', 

                    border: 'none', 

                    color: '#000', 

                    fontWeight: 900,

                    borderRadius: '12px',

                    display: 'flex',

                    alignItems: 'center',

                    gap: '0.6rem',

                    cursor: 'pointer',

                    zIndex: 1

                }}

            >

                <Plus size={24} /> Stw贸rz Pierwszy Projekt

            </motion.button>

        </motion.div>
    );
};

export default EmptyProjectsState;