-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
217 lines (203 loc) · 18 KB
/
index.html
File metadata and controls
217 lines (203 loc) · 18 KB
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
---
layout: default
title: Home
---
<div class="max-w-7xl mx-auto px-6">
<!-- Marketplace Header & Search -->
<div class="flex flex-col md:flex-row justify-between items-center gap-6 mb-12">
<div class="w-full md:w-auto">
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-semibold uppercase mb-3">
Solutions Store
</div>
<h1 class="text-4xl md:text-5xl font-display font-bold text-base">
Cloud <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-600">Marketplace</span>
</h1>
</div>
<div class="w-full md:w-96 relative">
<i class="ph-bold ph-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-muted"></i>
<input type="text" placeholder="Search templates, databases, or add-ons..." class="w-full bg-surface border border-surface-border rounded-full py-3.5 pl-12 pr-6 text-sm text-base placeholder-gray-500 focus:outline-none focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/50 transition-all">
</div>
</div>
<!-- Featured Banner -->
<div class="glass-panel p-8 md:p-12 mb-16 relative overflow-hidden flex flex-col md:flex-row items-center gap-10">
<div class="absolute -right-20 -bottom-20 w-96 h-96 bg-purple-600/20 blur-[100px] rounded-full z-0 pointer-events-none"></div>
<div class="relative z-10 flex-1">
<div class="flex items-center gap-2 text-purple-400 font-bold text-sm tracking-wide mb-3"><i class="ph-fill ph-star"></i> Featured SaaS</div>
<h2 class="text-3xl md:text-5xl font-display font-bold text-base mb-4">Prodaric ERP</h2>
<p class="text-muted text-lg mb-8 max-w-xl">Deploy the ultimate business management suite in seconds. Fully managed, automatically scaled, and directly integrated with Coderic Accounting.</p>
<div class="flex items-center gap-4">
<button class="bg-purple-600 hover:bg-purple-500 text-base font-medium py-3 px-6 rounded-full transition-colors flex items-center gap-2">
1-Click Deploy <i class="ph-bold ph-rocket-launch"></i>
</button>
<span class="text-gray-500 text-sm font-medium">Starts at $25/mo</span>
</div>
</div>
<div class="relative z-10 w-full md:w-1/3 flex justify-center hidden md:flex">
<div class="w-40 h-40 bg-gradient-to-br from-purple-500/10 to-indigo-500/10 border border-purple-500/20 rounded-3xl flex items-center justify-center shadow-[0_0_50px_rgba(168,85,247,0.15)]">
<i class="ph-fill ph-briefcase text-7xl text-purple-400"></i>
</div>
</div>
</div>
<!-- Category Grid: Databases (PaaS) -->
<div class="mb-12">
<div class="flex justify-between items-end mb-6">
<div>
<h3 class="text-2xl font-display font-bold text-base">Managed Databases</h3>
<p class="text-muted text-sm mt-1">High-availability PaaS data stores instantly provisioned.</p>
</div>
<a href="#" class="text-purple-400 hover:text-purple-300 text-sm font-medium flex items-center gap-1">See all <i class="ph-bold ph-arrow-right"></i></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="glass-panel p-6 flex flex-col h-full hover:border-purple-500/30 transition-colors group cursor-pointer">
<div class="flex items-start justify-between mb-4">
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center border border-blue-500/20">
<i class="ph-fill ph-database text-2xl text-blue-400"></i>
</div>
<div class="text-xs font-semibold px-2 py-1 rounded bg-white/5 text-muted">PaaS</div>
</div>
<h4 class="font-bold text-base text-lg mb-1">PostgreSQL</h4>
<span class="text-xs text-purple-400 mb-3 block">by Coderic Cloud</span>
<p class="text-sm text-muted mb-6 flex-grow">Reliable, scalable, and fully managed relational database with automated backups.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-surface-border">
<span class="text-base font-medium">$9<span class="text-gray-500 text-xs font-normal">/mo</span></span>
<button class="bg-white/5 hover:bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center text-base transition-colors group-hover:bg-purple-600">
<i class="ph-bold ph-plus"></i>
</button>
</div>
</div>
<!-- Card 2 -->
<div class="glass-panel p-6 flex flex-col h-full hover:border-purple-500/30 transition-colors group cursor-pointer">
<div class="flex items-start justify-between mb-4">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center border border-red-500/20">
<i class="ph-fill ph-lightning text-2xl text-red-400"></i>
</div>
<div class="text-xs font-semibold px-2 py-1 rounded bg-white/5 text-muted">PaaS</div>
</div>
<h4 class="font-bold text-base text-lg mb-1">Redis Cache</h4>
<span class="text-xs text-purple-400 mb-3 block">by Coderic Cloud</span>
<p class="text-sm text-muted mb-6 flex-grow">In-memory data structure store for caching, message brokering, and real-time speed.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-surface-border">
<span class="text-base font-medium">$5<span class="text-gray-500 text-xs font-normal">/mo</span></span>
<button class="bg-white/5 hover:bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center text-base transition-colors group-hover:bg-purple-600">
<i class="ph-bold ph-plus"></i>
</button>
</div>
</div>
<!-- Card 3 -->
<div class="glass-panel p-6 flex flex-col h-full hover:border-purple-500/30 transition-colors group cursor-pointer">
<div class="flex items-start justify-between mb-4">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
<i class="ph-fill ph-leaf text-2xl text-emerald-400"></i>
</div>
<div class="text-xs font-semibold px-2 py-1 rounded bg-white/5 text-muted">PaaS</div>
</div>
<h4 class="font-bold text-base text-lg mb-1">MongoDB</h4>
<span class="text-xs text-purple-400 mb-3 block">by Coderic Cloud</span>
<p class="text-sm text-muted mb-6 flex-grow">Document-oriented NoSQL database system optimized for modern app development.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-surface-border">
<span class="text-base font-medium">$12<span class="text-gray-500 text-xs font-normal">/mo</span></span>
<button class="bg-white/5 hover:bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center text-base transition-colors group-hover:bg-purple-600">
<i class="ph-bold ph-plus"></i>
</button>
</div>
</div>
<!-- Card 4 -->
<div class="glass-panel p-6 flex flex-col h-full hover:border-purple-500/30 transition-colors group cursor-pointer">
<div class="flex items-start justify-between mb-4">
<div class="w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center border border-orange-500/20">
<i class="ph-fill ph-kanban text-2xl text-orange-400"></i>
</div>
<div class="text-xs font-semibold px-2 py-1 rounded bg-white/5 text-muted">Stream</div>
</div>
<h4 class="font-bold text-base text-lg mb-1">Kafka Events</h4>
<span class="text-xs text-purple-400 mb-3 block">by Coderic Cloud</span>
<p class="text-sm text-muted mb-6 flex-grow">Distributed streaming platform for building real-time data pipelines and apps.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-surface-border">
<span class="text-base font-medium">$35<span class="text-gray-500 text-xs font-normal">/mo</span></span>
<button class="bg-white/5 hover:bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center text-base transition-colors group-hover:bg-purple-600">
<i class="ph-bold ph-plus"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Category Grid: Partner SaaS & 1-Click Apps -->
<div>
<div class="flex justify-between items-end mb-6">
<div>
<h3 class="text-2xl font-display font-bold text-base">SaaS & 1-Click Apps</h3>
<p class="text-muted text-sm mt-1">Instant deployments of open-source tools and integrated partner software.</p>
</div>
<a href="#" class="text-purple-400 hover:text-purple-300 text-sm font-medium flex items-center gap-1">See all <i class="ph-bold ph-arrow-right"></i></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="glass-panel p-6 flex flex-col h-full hover:border-purple-500/30 transition-colors group cursor-pointer relative overflow-hidden">
<div class="absolute top-0 right-0 py-1 px-3 bg-gradient-to-r from-purple-500 to-indigo-500 text-base text-[10px] uppercase font-bold tracking-wider rounded-bl-lg">Partner</div>
<div class="flex items-start justify-between mb-4 mt-2">
<div class="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10">
<i class="ph-fill ph-receipt text-2xl text-base"></i>
</div>
<div class="text-xs font-semibold px-2 py-1 rounded bg-white/5 text-muted">SaaS</div>
</div>
<h4 class="font-bold text-base text-lg mb-1">Siigo Cloud</h4>
<span class="text-xs text-muted mb-3 block">by <span class="text-purple-400 hover:underline">Siigo Corp</span></span>
<p class="text-sm text-muted mb-6 flex-grow">Next-gen accounting and administrative software for LATAM. Auto-provisioned.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-surface-border">
<span class="text-base font-medium">License<span class="text-gray-500 text-xs font-normal">/mo</span></span>
<button class="bg-white/5 px-4 py-1.5 rounded-full text-xs font-bold text-base transition-colors group-hover:bg-purple-600">Deploy</button>
</div>
</div>
<!-- Card 2 -->
<div class="glass-panel p-6 flex flex-col h-full hover:border-purple-500/30 transition-colors group cursor-pointer">
<div class="flex items-start justify-between mb-4">
<div class="w-12 h-12 rounded-xl bg-[#F26322]/10 flex items-center justify-center border border-[#F26322]/20">
<i class="ph-fill ph-shopping-cart text-2xl text-[#F26322]"></i>
</div>
<div class="text-xs font-semibold px-2 py-1 rounded bg-white/5 text-muted">1-Click</div>
</div>
<h4 class="font-bold text-base text-lg mb-1">Magento Commerce</h4>
<span class="text-xs text-muted mb-3 block">Supported via <span class="text-purple-400 hover:underline">Coderic AI</span></span>
<p class="text-sm text-muted mb-6 flex-grow">Full e-commerce platform automatically orchestrated on dedicated containers.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-surface-border">
<span class="text-base font-medium">Free<span class="text-gray-500 text-xs font-normal"> Server Fee</span></span>
<button class="bg-white/5 px-4 py-1.5 rounded-full text-xs font-bold text-base transition-colors group-hover:bg-purple-600">Deploy</button>
</div>
</div>
<!-- Card 3 -->
<div class="glass-panel p-6 flex flex-col h-full hover:border-purple-500/30 transition-colors group cursor-pointer">
<div class="flex items-start justify-between mb-4">
<div class="w-12 h-12 rounded-xl bg-teal-500/10 flex items-center justify-center border border-teal-500/20">
<i class="ph-fill ph-users-three text-2xl text-teal-400"></i>
</div>
<div class="text-xs font-semibold px-2 py-1 rounded bg-white/5 text-muted">1-Click</div>
</div>
<h4 class="font-bold text-base text-lg mb-1">Moodle LMS</h4>
<span class="text-xs text-muted mb-3 block">Supported via <span class="text-purple-400 hover:underline">Coderic AI</span></span>
<p class="text-sm text-muted mb-6 flex-grow">World's most popular learning management system. Perfect for corporate academies.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-surface-border">
<span class="text-base font-medium">Free<span class="text-gray-500 text-xs font-normal"> Server Fee</span></span>
<button class="bg-white/5 px-4 py-1.5 rounded-full text-xs font-bold text-base transition-colors group-hover:bg-purple-600">Deploy</button>
</div>
</div>
<!-- Card 4 -->
<div class="glass-panel p-6 flex flex-col h-full hover:border-purple-500/30 transition-colors group cursor-pointer relative overflow-hidden">
<div class="absolute top-0 right-0 py-1 px-3 bg-gradient-to-r from-purple-500 to-indigo-500 text-base text-[10px] uppercase font-bold tracking-wider rounded-bl-lg">Partner</div>
<div class="flex items-start justify-between mb-4 mt-2">
<div class="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center border border-green-500/20">
<i class="ph-fill ph-calculator text-2xl text-green-400"></i>
</div>
<div class="text-xs font-semibold px-2 py-1 rounded bg-white/5 text-muted">SaaS</div>
</div>
<h4 class="font-bold text-base text-lg mb-1">Alegra SMB</h4>
<span class="text-xs text-muted mb-3 block">by <span class="text-purple-400 hover:underline">Alegra Inc</span></span>
<p class="text-sm text-muted mb-6 flex-grow">Cloud accounting specialized in small and medium businesses. Auto-provisioned.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-surface-border">
<span class="text-base font-medium">License<span class="text-gray-500 text-xs font-normal">/mo</span></span>
<button class="bg-white/5 px-4 py-1.5 rounded-full text-xs font-bold text-base transition-colors group-hover:bg-purple-600">Deploy</button>
</div>
</div>
</div>
</div>
</div>