142 lines
6.6 KiB
Plaintext
142 lines
6.6 KiB
Plaintext
package templates
|
|
|
|
import "dealroom/internal/model"
|
|
import "fmt"
|
|
|
|
type SubscriptionStats struct {
|
|
RoomsUsed int
|
|
RoomsLimit int
|
|
UsersUsed int
|
|
UsersLimit int
|
|
StorageUsed string
|
|
StorageLimit string
|
|
}
|
|
|
|
templ SubscriptionPage(profile *model.Profile, stats *SubscriptionStats) {
|
|
@Layout(profile, "subscription") {
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">Subscription</h1>
|
|
<p class="text-sm text-gray-500 mt-1">Manage your plan and usage.</p>
|
|
</div>
|
|
|
|
<!-- Current Plan -->
|
|
<div class="bg-gray-900 rounded-lg border border-teal-500/30 p-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<h2 class="text-lg font-semibold">Growth Plan</h2>
|
|
<span class="text-xs px-2 py-0.5 rounded-full bg-teal-500/10 text-teal-400 font-medium">Current</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-1">$799/month</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-6 mt-6">
|
|
<div>
|
|
<div class="flex items-center justify-between text-sm mb-1">
|
|
<span class="text-gray-400">Deal Rooms</span>
|
|
<span class="text-gray-300">{ fmt.Sprintf("%d / %d", stats.RoomsUsed, stats.RoomsLimit) }</span>
|
|
</div>
|
|
<div class="w-full bg-gray-800 rounded-full h-2">
|
|
<div class="bg-teal-500 h-2 rounded-full" { usageWidth(stats.RoomsUsed, stats.RoomsLimit)... }> </div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between text-sm mb-1">
|
|
<span class="text-gray-400">Users</span>
|
|
<span class="text-gray-300">{ fmt.Sprintf("%d / %d", stats.UsersUsed, stats.UsersLimit) }</span>
|
|
</div>
|
|
<div class="w-full bg-gray-800 rounded-full h-2">
|
|
<div class="bg-blue-500 h-2 rounded-full" { usageWidth(stats.UsersUsed, stats.UsersLimit)... }> </div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between text-sm mb-1">
|
|
<span class="text-gray-400">Storage</span>
|
|
<span class="text-gray-300">{ stats.StorageUsed } / { stats.StorageLimit }</span>
|
|
</div>
|
|
<div class="w-full bg-gray-800 rounded-full h-2">
|
|
<div class="bg-amber-500 h-2 rounded-full" style="width: 23%"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plan Cards -->
|
|
<div class="grid grid-cols-3 gap-6">
|
|
<!-- Starter -->
|
|
<div class="bg-gray-900 rounded-lg border border-gray-800 p-6 flex flex-col">
|
|
<h3 class="text-lg font-semibold">Starter</h3>
|
|
<p class="text-3xl font-bold mt-2">$299<span class="text-sm font-normal text-gray-500">/mo</span></p>
|
|
<ul class="mt-4 space-y-2 text-sm text-gray-400 flex-1">
|
|
<li class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
3 deal rooms
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
5 users
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
10GB storage
|
|
</li>
|
|
</ul>
|
|
<button onclick="alert('Please contact sales@dealspace.ai to change your plan.')" class="mt-6 w-full py-2 rounded-lg border border-gray-700 text-sm text-gray-400 hover:bg-gray-800 transition">Downgrade</button>
|
|
</div>
|
|
|
|
<!-- Growth -->
|
|
<div class="bg-gray-900 rounded-lg border-2 border-teal-500 p-6 flex flex-col relative">
|
|
<div class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 bg-teal-500 text-white text-xs font-medium rounded-full">Current Plan</div>
|
|
<h3 class="text-lg font-semibold">Growth</h3>
|
|
<p class="text-3xl font-bold mt-2 text-teal-400">$799<span class="text-sm font-normal text-gray-500">/mo</span></p>
|
|
<ul class="mt-4 space-y-2 text-sm text-gray-300 flex-1">
|
|
<li class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
15 deal rooms
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
25 users
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
100GB storage
|
|
</li>
|
|
</ul>
|
|
<button disabled class="mt-6 w-full py-2 rounded-lg bg-teal-500/20 text-teal-400 text-sm font-medium cursor-not-allowed">Active</button>
|
|
</div>
|
|
|
|
<!-- Enterprise -->
|
|
<div class="bg-gray-900 rounded-lg border border-gray-800 p-6 flex flex-col">
|
|
<h3 class="text-lg font-semibold">Enterprise</h3>
|
|
<p class="text-3xl font-bold mt-2">Custom</p>
|
|
<ul class="mt-4 space-y-2 text-sm text-gray-400 flex-1">
|
|
<li class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
Unlimited deal rooms
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
Unlimited users
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
1TB storage
|
|
</li>
|
|
</ul>
|
|
<button onclick="alert('Please contact sales@dealspace.ai to discuss Enterprise pricing.')" class="mt-6 w-full py-2 rounded-lg bg-purple-500 text-white text-sm font-medium hover:bg-purple-600 transition">Contact Sales</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
func usageWidth(used int, limit int) templ.Attributes {
|
|
pct := 0
|
|
if limit > 0 {
|
|
pct = (used * 100) / limit
|
|
}
|
|
return templ.Attributes{"style": fmt.Sprintf("width: %d%%", pct)}
|
|
}
|