Hugging Face's logo

Spaces:
ngandugilbert
/
cloudflow
Running

App Files Community
ngandugilbert commited on
Commit
f4e99fa
·
verified ·
1 Parent(s): 0307c33

create a saas landing page - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +286 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cloudflow
3
- emoji: 🚀
4
  colorFrom: gray
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cloudflow
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,286 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CloudFlow | Streamline Your Workflow</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#6366f1',
18
+ secondary: '#8b5cf6',
19
+ dark: '#0f172a',
20
+ light: '#f8fafc'
21
+ },
22
+ animation: {
23
+ float: 'float 6s ease-in-out infinite',
24
+ 'bounce-slow': 'bounce 3s infinite'
25
+ },
26
+ keyframes: {
27
+ float: {
28
+ '0%, 100%': { transform: 'translateY(0)' },
29
+ '50%': { transform: 'translateY(-20px)' },
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ </script>
36
+ <style type="text/css">
37
+ * {
38
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
39
+ }
40
+ .hero-bg {
41
+ background: radial-gradient(circle at top right, rgba(139, 92, 246, 0.1), transparent 30%),
42
+ radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.1), transparent 30%),
43
+ linear-gradient(to bottom, #f8fafc, #ffffff);
44
+ }
45
+ .feature-card:hover {
46
+ transform: translateY(-10px);
47
+ box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
48
+ }
49
+ .pricing-card:hover {
50
+ transform: scale(1.05);
51
+ box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
52
+ }
53
+ .testimonial-card {
54
+ transition: all 0.3s ease;
55
+ }
56
+ .testimonial-card:hover {
57
+ transform: translateY(-5px);
58
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
59
+ }
60
+ .cta-bg {
61
+ background: linear-gradient(135deg, #6366f1, #8b5cf6);
62
+ }
63
+ .stat-gradient {
64
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
65
+ -webkit-background-clip: text;
66
+ -webkit-text-fill-color: transparent;
67
+ }
68
+ .glow {
69
+ box-shadow: 0 0 20px 10px rgba(99, 102, 241, 0.2);
70
+ }
71
+ .feature-icon {
72
+ transition: all 0.3s ease;
73
+ }
74
+ .feature-card:hover .feature-icon {
75
+ transform: rotateY(180deg);
76
+ background: linear-gradient(135deg, #6366f1, #8b5cf6);
77
+ }
78
+ .ticker {
79
+ animation: ticker 20s linear infinite;
80
+ }
81
+ @keyframes ticker {
82
+ 0% { transform: translateX(0); }
83
+ 100% { transform: translateX(-50%); }
84
+ }
85
+ .ticker:hover {
86
+ animation-play-state: paused;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-light">
91
+ <!-- Navigation -->
92
+ <nav class="py-5 px-4 md:px-12 lg:px-24 flex justify-between items-center sticky top-0 z-50 bg-white bg-opacity-80 backdrop-blur-sm">
93
+ <div class="flex items-center">
94
+ <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
95
+ <i class="fas fa-cloud text-white text-xl"></i>
96
+ </div>
97
+ <span class="ml-3 text-2xl font-bold text-dark">CloudFlow</span>
98
+ </div>
99
+
100
+ <div class="hidden md:flex space-x-10">
101
+ <a href="#" class="font-medium text-gray-600 hover:text-primary transition">Features</a>
102
+ <a href="#" class="font-medium text-gray-600 hover:text-primary transition">Solutions</a>
103
+ <a href="#" class="font-medium text-gray-600 hover:text-primary transition">Pricing</a>
104
+ <a href="#" class="font-medium text-gray-600 hover:text-primary transition">Resources</a>
105
+ </div>
106
+
107
+ <div class="flex items-center space-x-4">
108
+ <button class="hidden md:block px-5 py-2 text-gray-600 font-medium rounded-lg hover:text-primary transition">Sign In</button>
109
+ <button class="bg-primary text-white px-5 py-2 rounded-lg font-medium hover:bg-indigo-600 transition transform hover:-translate-y-0.5 shadow-md">Get Started</button>
110
+ <button class="md:hidden text-gray-600">
111
+ <i class="fas fa-bars text-xl"></i>
112
+ </button>
113
+ </div>
114
+ </nav>
115
+
116
+ <!-- Hero Section -->
117
+ <section class="hero-bg py-16 md:py-24 px-4 md:px-12 lg:px-24">
118
+ <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
119
+ <div class="order-2 md:order-1">
120
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-dark leading-tight mb-6">
121
+ Streamline Your Workflow with <span class="text-primary">CloudFlow</span>
122
+ </h1>
123
+ <p class="text-lg text-gray-600 mb-10 max-w-lg">
124
+ The all-in-one platform that helps teams collaborate, automate processes, and achieve more in less time. Start your 14-day free trial today!
125
+ </p>
126
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
127
+ <button class="bg-primary text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-indigo-600 transition transform hover:-translate-y-1 shadow-lg hover:shadow-xl flex items-center justify-center">
128
+ Get Started Free
129
+ <i class="fas fa-arrow-right ml-3"></i>
130
+ </button>
131
+ <button class="flex items-center justify-center px-8 py-4 rounded-lg font-semibold text-lg text-dark border border-gray-300 hover:border-primary transition">
132
+ <i class="fas fa-play-circle text-primary mr-3"></i>
133
+ Watch Demo
134
+ </button>
135
+ </div>
136
+ <div class="mt-6 flex items-center">
137
+ <div class="flex -space-x-3">
138
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full border-2 border-white">
139
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full border-2 border-white">
140
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-10 h-10 rounded-full border-2 border-white">
141
+ <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User" class="w-10 h-10 rounded-full border-2 border-white">
142
+ </div>
143
+ <p class="ml-4 text-gray-600"><span class="font-semibold">4,000+</span> teams use CloudFlow</p>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="order-1 md:order-2 flex justify-center relative">
148
+ <div class="relative w-full max-w-md">
149
+ <div class="absolute -top-10 -right-10 w-48 h-48 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-50 animate-blob"></div>
150
+ <div class="absolute -bottom-10 -left-10 w-48 h-48 bg-indigo-200 rounded-full mix-blend-multiply filter blur-xl opacity-50 animate-blob animation-delay-2000"></div>
151
+ <div class="relative bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
152
+ <div class="bg-gray-800 py-3 px-4 flex items-center">
153
+ <div class="flex space-x-2">
154
+ <div class="w-3 h-3 rounded-full bg-red-400"></div>
155
+ <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
156
+ <div class="w-3 h-3 rounded-full bg-green-400"></div>
157
+ </div>
158
+ <div class="text-gray-300 text-sm font-medium ml-4">Dashboard</div>
159
+ </div>
160
+ <div class="p-6">
161
+ <div class="flex justify-between items-center mb-6">
162
+ <h3 class="font-bold text-gray-800">Project Overview</h3>
163
+ <div class="text-sm text-primary font-medium">This Week</div>
164
+ </div>
165
+ <div class="grid grid-cols-3 gap-4 mb-6">
166
+ <div class="bg-indigo-50 p-4 rounded-lg">
167
+ <p class="text-sm text-gray-600 mb-1">Tasks</p>
168
+ <p class="text-2xl font-bold text-gray-800">24</p>
169
+ </div>
170
+ <div class="bg-purple-50 p-4 rounded-lg">
171
+ <p class="text-sm text-gray-600 mb-1">Completed</p>
172
+ <p class="text-2xl font-bold text-gray-800">18</p>
173
+ </div>
174
+ <div class="bg-green-50 p-4 rounded-lg">
175
+ <p class="text-sm text-gray-600 mb-1">Progress</p>
176
+ <p class="text-2xl font-bold text-gray-800">85%</p>
177
+ </div>
178
+ </div>
179
+ <div class="h-40 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-lg flex items-center justify-center">
180
+ <div class="text-center">
181
+ <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
182
+ <i class="fas fa-chart-line text-primary text-2xl"></i>
183
+ </div>
184
+ <p class="font-medium text-gray-700">Productivity increased by 47%</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- Logo Cloud -->
195
+ <div class="py-12 bg-white">
196
+ <div class="max-w-7xl mx-auto px-4 overflow-hidden">
197
+ <p class="text-center text-gray-500 text-sm mb-8">TRUSTED BY INDUSTRY LEADERS</p>
198
+ <div class="ticker flex space-x-16">
199
+ <div class="flex space-x-16">
200
+ <div class="flex items-center text-gray-700 font-bold text-xl">
201
+ <i class="fab fa-slack text-purple-500 mr-2"></i> Slack
202
+ </div>
203
+ <div class="flex items-center text-gray-700 font-bold text-xl">
204
+ <i class="fab fa-google text-blue-500 mr-2"></i> Google
205
+ </div>
206
+ <div class="flex items-center text-gray-700 font-bold text-xl">
207
+ <i class="fab fa-microsoft text-blue-700 mr-2"></i> Microsoft
208
+ </div>
209
+ <div class="flex items-center text-gray-700 font-bold text-xl">
210
+ <i class="fab fa-airbnb text-pink-500 mr-2"></i> Airbnb
211
+ </div>
212
+ <div class="flex items-center text-gray-700 font-bold text-xl">
213
+ <i class="fab fa-spotify text-green-500 mr-2"></i> Spotify
214
+ </div>
215
+ <div class="flex items-center text-gray-700 font-bold text-xl">
216
+ <i class="fab fa-shopify text-green-700 mr-2"></i> Shopify
217
+ </div>
218
+ </div>
219
+ <div class="flex space-x-16">
220
+ <div class="flex items-center text-gray-700 font-bold text-xl">
221
+ <i class="fab fa-slack text-purple-500 mr-2"></i> Slack
222
+ </div>
223
+ <div class="flex items-center text-gray-700 font-bold text-xl">
224
+ <i class="fab fa-google text-blue-500 mr-2"></i> Google
225
+ </div>
226
+ <div class="flex items-center text-gray-700 font-bold text-xl">
227
+ <i class="fab fa-microsoft text-blue-700 mr-2"></i> Microsoft
228
+ </div>
229
+ <div class="flex items-center text-gray-700 font-bold text-xl">
230
+ <i class="fab fa-airbnb text-pink-500 mr-2"></i> Airbnb
231
+ </div>
232
+ <div class="flex items-center text-gray-700 font-bold text-xl">
233
+ <i class="fab fa-spotify text-green-500 mr-2"></i> Spotify
234
+ </div>
235
+ <div class="flex items-center text-gray-700 font-bold text-xl">
236
+ <i class="fab fa-shopify text-green-700 mr-2"></i> Shopify
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Features -->
244
+ <section class="py-20 bg-gray-50" id="features">
245
+ <div class="max-w-7xl mx-auto px-4">
246
+ <div class="text-center max-w-2xl mx-auto mb-16">
247
+ <h2 class="text-4xl font-bold text-dark mb-4">Powerful Features for Modern Teams</h2>
248
+ <p class="text-lg text-gray-600">Streamline your workflow with our comprehensive suite of tools designed to boost productivity and collaboration.</p>
249
+ </div>
250
+
251
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
252
+ <!-- Feature 1 -->
253
+ <div class="feature-card bg-white rounded-2xl p-8 transition-all duration-300 shadow-md hover:shadow-xl">
254
+ <div class="feature-icon w-16 h-16 rounded-2xl bg-indigo-100 text-primary flex items-center justify-center mb-6">
255
+ <i class="fas fa-bolt text-2xl"></i>
256
+ </div>
257
+ <h3 class="text-xl font-bold text-dark mb-3">Automated Workflows</h3>
258
+ <p class="text-gray-600 mb-4">Create custom workflows to automate repetitive tasks and save time for important work.</p>
259
+ <a href="#" class="text-primary font-medium flex items-center">
260
+ Learn more
261
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
262
+ </a>
263
+ </div>
264
+
265
+ <!-- Feature 2 -->
266
+ <div class="feature-card bg-white rounded-2xl p-8 transition-all duration-300 shadow-md hover:shadow-xl">
267
+ <div class="feature-icon w-16 h-16 rounded-2xl bg-purple-100 text-primary flex items-center justify-center mb-6">
268
+ <i class="fas fa-users text-2xl"></i>
269
+ </div>
270
+ <h3 class="text-xl font-bold text-dark mb-3">Team Collaboration</h3>
271
+ <p class="text-gray-600 mb-4">Real-time collaboration tools to keep your team aligned and working together efficiently.</p>
272
+ <a href="#" class="text-primary font-medium flex items-center">
273
+ Learn more
274
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
275
+ </a>
276
+ </div>
277
+
278
+ <!-- Feature 3 -->
279
+ <div class="feature-card bg-white rounded-2xl p-8 transition-all duration-300 shadow-md hover:shadow-xl">
280
+ <div class="feature-icon w-16 h-16 rounded-2xl bg-pink-100 text-primary flex items-center justify-center mb-6">
281
+ <i class="fas fa-chart-pie text-2xl"></i>
282
+ </div>
283
+ <h3 class="text-xl font-bold text-dark mb-3">Advanced Analytics</h3>
284
+ <p class="text-gray-600 mb-4">Gain valuable insights with powerful analytics to make data-driven decisions
285
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ngandugilbert/cloudflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
286
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ create a saas landing page