Hugging Face's logo

Spaces:
wanderingcloud
/
gradientflow-saas
Running

App Files Community
gradientflow-saas
File size: 7,318 Bytes
0bfd444
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GradientFlow - Modern SaaS Solution</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="transition-colors duration-300">
    <!-- Theme Toggle Component -->
    <script src="components/theme-toggle.js"></script>
    <script src="components/navbar.js"></script>
    <script src="components/pricing-card.js"></script>
    
    <!-- Background Gradient Animation -->
    <div class="fixed inset-0 -z-10 overflow-hidden">
        <div class="gradient-bg"></div>
    </div>
    
    <!-- Navigation -->
    <custom-navbar></custom-navbar>
    
    <!-- Hero Section -->
    <section class="relative min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-5xl mx-auto">
            <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600 animate-text-gradient">
                Transform Your Business
            </h1>
            <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 mb-8 leading-relaxed">
                Experience the future of SaaS with intelligent automation, seamless integration, and unparalleled performance
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full font-semibold hover:shadow-2xl hover:scale-105 transition-all duration-300 transform">
                    Start Free Trial
                </button>
                <button class="px-8 py-4 border-2 border-purple-600 text-purple-600 dark:text-purple-400 rounded-full font-semibold hover:bg-purple-600 hover:text-white transition-all duration-300">
                    Watch Demo
                </button>
            </div>
        </div>
    </section>
    
    <!-- Features Section -->
    <section class="py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <h2 class="text-4xl font-bold text-center mb-16 dark:text-white">
                Powerful Features
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="feature-card p-8 rounded-2xl bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg border border-white/20 dark:border-gray-700">
                    <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl mb-6 flex items-center justify-center">
                        <i data-feather="zap" class="w-8 h-8 text-white"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4 dark:text-white">Lightning Fast</h3>
                    <p class="text-gray-600 dark:text-gray-400">Experience blazing speeds with our optimized infrastructure</p>
                </div>
                <div class="feature-card p-8 rounded-2xl bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg border border-white/20 dark:border-gray-700">
                    <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl mb-6 flex items-center justify-center">
                        <i data-feather="shield" class="w-8 h-8 text-white"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4 dark:text-white">Enterprise Security</h3>
                    <p class="text-gray-600 dark:text-gray-400">Bank-level security with end-to-end encryption</p>
                </div>
                <div class="feature-card p-8 rounded-2xl bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg border border-white/20 dark:border-gray-700">
                    <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-xl mb-6 flex items-center justify-center">
                        <i data-feather="trending-up" class="w-8 h-8 text-white"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4 dark:text-white">Scale Effortlessly</h3>
                    <p class="text-gray-600 dark:text-gray-400">Grow your business without worrying about infrastructure</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Pricing Section -->
    <section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold mb-4 dark:text-white">Choose Your Plan</h2>
                <p class="text-xl text-gray-600 dark:text-gray-400">Flexible pricing that scales with your business</p>
            </div>
            
            <!-- Billing Toggle -->
            <div class="flex justify-center mb-12">
                <div class="relative flex items-center bg-gray-200 dark:bg-gray-800 rounded-full p-1">
                    <div class="absolute h-full w-1/2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full transition-transform duration-300" id="billing-toggle"></div>
                    <button id="monthly-btn" class="relative z-10 px-6 py-2 rounded-full font-medium transition-colors duration-300 text-white">
                        Monthly
                    </button>
                    <button id="yearly-btn" class="relative z-10 px-6 py-2 rounded-full font-medium transition-colors duration-300">
                        Yearly
                        <span class="ml-2 text-xs bg-green-500 text-white px-2 py-1 rounded-full">Save 20%</span>
                    </button>
                </div>
            </div>
            
            <!-- Pricing Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <custom-pricing-card 
                    plan="Starter" 
                    price="29" 
                    :features="['5 Projects', '10GB Storage', 'Basic Support', 'API Access']">
                </custom-pricing-card>
                <custom-pricing-card 
                    plan="Professional" 
                    price="79" 
                    popular="true"
                    :features="['Unlimited Projects', '100GB Storage', 'Priority Support', 'Advanced Analytics', 'Team Collaboration']">
                </custom-pricing-card>
                <custom-pricing-card 
                    plan="Enterprise" 
                    price="199" 
                    :features="['Unlimited Everything', '1TB Storage', '24/7 Support', 'Custom Integrations', 'SLA Guarantee']">
                </custom-pricing-card>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto text-center">
            <p>&copy; 2024 GradientFlow. All rights reserved.</p>
        </div>
    </footer>
    
    <script src="script.js"></script>
    <script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>