mirror of
https://github.com/cf-sonr/motr.git
synced 2026-01-12 02:59:13 +00:00
66 lines
2.1 KiB
Plaintext
66 lines
2.1 KiB
Plaintext
package home
|
|
|
|
import "github.com/sonr-io/motr/ui"
|
|
import "github.com/sonr-io/motr/pkg/metadata"
|
|
|
|
func HomeView() templ.Component {
|
|
return homeComponent()
|
|
}
|
|
|
|
templ homeComponent() {
|
|
@ui.HTML() {
|
|
@ui.Head() {
|
|
@metadata.DefaultMetaComponent()
|
|
}
|
|
@ui.Nav() {
|
|
@ui.NavLeft() {
|
|
<button class="flex items-center gap-2 text-gray-300 hover:text-white">
|
|
<sl-icon name="arrow-left"></sl-icon>
|
|
Return Home
|
|
</button>
|
|
}
|
|
@ui.NavRight() {
|
|
<sl-badge class="gap-2 space-x-2 p-0.5" variant="success" pill>
|
|
<sl-icon class="p-0.5" name="check"></sl-icon>
|
|
Connected
|
|
</sl-badge>
|
|
}
|
|
}
|
|
@ui.Body() {
|
|
@ui.Container() {
|
|
<!-- Main Card with Glowing Border -->
|
|
<div class="max-w-md mx-auto mt-10 relative">
|
|
<!-- Glowing Border Effect -->
|
|
<div class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg opacity-100 blur"></div>
|
|
<!-- Card Content -->
|
|
<div class="relative bg-gray-900 rounded-lg px-7 py-8">
|
|
<div class="flex flex-col items-center">
|
|
<!-- Center Logo -->
|
|
<div class="mb-6 p-2 border border-blue-400/30 rounded-lg transform rotate-45 bg-gray-800/50">
|
|
<div class="transform -rotate-45">
|
|
<sl-icon library="sonr" style="font-size: 60px;" class="text-blue-400" name="sonr"></sl-icon>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-white mb-8 text-center">CREATE A SONR IDENTITY</h2>
|
|
<!-- Form Fields -->
|
|
<div class="w-full mb-4"></div>
|
|
<!-- Register Button -->
|
|
<sl-button href="/register" type="primary" size="large" class="w-full mb-4">
|
|
Claim Handle
|
|
<sl-icon slot="suffix" library="sonr" name="arrow-right"></sl-icon>
|
|
</sl-button>
|
|
<!-- Terms -->
|
|
<div class="text-xs text-gray-400 text-center mb-4">
|
|
By signing up you agree to our Terms of Service and Privacy Policy
|
|
</div>
|
|
<div class="text-center text-sm text-gray-400">
|
|
Already have an account? <a href="/login" class="text-blue-400 hover:underline">Login</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
}
|
|
}
|