Files
sonr/nebula/components/home/sections/highlights.templ
T
Prad NukalaandGitHub 279ab6e5e3 feature/1129 integrate webauthn controller (#1135)
* **refactor: remove nebula static file serving**
* **feat: Add login, register, and authorize sections**
* **feat: implement registration form UI**
* **refactor: abstract template rendering to ctx module**
* **feat: add deployment target for Highway gateway**
* **feat: migrate Highway gateway to Cloudflare Workers**
* **feat: refactor nebula routes to components**
* **chore(deps): remove unused dependencies**
* **chore(deps): remove unused dependencies**
* **feat: add user and relaying party entities**
* **refactor: remove unused imports**
* 
* **feat: add motion scale-in and opacity-in animations**
* **refactor: move dwn and orm packages to internal**
* **refactor: update imports to use relative paths**
* **refactor: rename build targets for clarity**
* **feat: add RelayingPartyEntity model**
* **refactor: rename creds templates to credentials**
* **refactor: remove unused entity model**
* **refactor: move models to internal package**
* **refactor: move models package to internal/orm**
* **feat: implement broadcast channel context**
* **feat: remove config upload step**
* **feat: remove unused configuration files**
* **feat: migrate authentication logic to workers**
* **feat: remove cloudflared dependency**
* **refactor: move client related routes to 'routes/client.go'**
* **feat: implement macaroon middleware**
* **refactor: move fetch package to cmd/motr**
* **feat: remove auth and grant endpoints**
* **docs: add conceptual descriptions to did module**

<sub><a
href="https://huly.app/guest/sonrhq?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsaW5rSWQiOiI2NzA4MTIyNmM3ZDZhNTZhOGY4ZGFjOTciLCJndWVzdCI6InRydWUiLCJlbWFpbCI6IiNndWVzdEBoYy5lbmdpbmVlcmluZyIsIndvcmtzcGFjZSI6InctcHJhZC1zb25yaHEtNjVlZjcyZDQtY2UyOGQ0ODJjNi00ZWY4ZDAifQ.j-w5jk5Ji-0vCkaxVaK8pDMIOhRsXmG7o6oZictoHYE">Huly&reg;:
<b>ENG-1057</b></a></sub>
2024-10-10 13:44:17 -04:00

220 lines
9.4 KiB
Templ

package sections
import "github.com/onsonr/sonr/internal/orm/models"
templ Highlights(highlights *models.Highlights) {
<!-- Features -->
<section class="relative bg-zinc-50">
<div class="py-12 md:py-20">
<div class="max-w-5xl mx-auto px-4 sm:px-6">
<div class="max-w-3xl mx-auto text-center pb-12">
<h2
class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4"
>
{ highlights.Heading }
</h2>
<p class="text-lg text-zinc-500">
{ highlights.Subtitle }
</p>
</div>
<div x-data="{ tab: '1' }">
<!-- Tabs buttons -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
<button
:class="tab !== '1' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
class="text-left px-4 py-5 border border-transparent rounded"
@click.prevent="tab = '1'"
>
<div class="flex items-center justify-between mb-1">
<div class="font-inter-tight font-semibold text-zinc-900">
Experience
</div>
<svg
:class="tab !== '1' ? 'hidden' : ''"
class="fill-zinc-400 shrink-0 ml-2"
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
>
<path
d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
></path>
</svg>
</div>
<div class="text-sm text-zinc-500">
Sonr is completely designed to be frictionless for every kind of user.
</div>
</button>
<button
:class="tab !== '2' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
class="text-left px-4 py-5 border border-transparent rounded"
@click.prevent="tab = '2'"
>
<div class="flex items-center justify-between mb-1">
<div class="font-inter-tight font-semibold text-zinc-900">
Compliance
</div>
<svg
:class="tab !== '2' ? 'hidden' : ''"
class="fill-zinc-400 shrink-0 ml-2"
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
>
<path
d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
></path>
</svg>
</div>
<div class="text-sm text-zinc-500">
Sonr is managed by a USA-based Wyoming DUNA, which is fully compliant with the GDPR.
</div>
</button>
<button
:class="tab !== '3' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
class="text-left px-4 py-5 border border-transparent rounded"
@click.prevent="tab = '3'"
>
<div class="flex items-center justify-between mb-1">
<div class="font-inter-tight font-semibold text-zinc-900">
Interoperability
</div>
<svg
:class="tab !== '3' ? 'hidden' : ''"
class="fill-zinc-400 shrink-0 ml-2"
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
>
<path
d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
></path>
</svg>
</div>
<div class="text-sm text-zinc-500">
Sonr is designed to work cross-platform, cross-network, and cross-chain.
</div>
</button>
<button
:class="tab !== '4' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
class="text-left px-4 py-5 border border-transparent rounded"
@click.prevent="tab = '4'"
>
<div class="flex items-center justify-between mb-1">
<div class="font-inter-tight font-semibold text-zinc-900">
Security
</div>
<svg
:class="tab !== '4' ? 'hidden' : ''"
class="fill-zinc-400 shrink-0 ml-2"
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
>
<path
d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
></path>
</svg>
</div>
<div class="text-sm text-zinc-500">
Sonr eliminates 99.9% of attack vectors with its quantum-resistant encryption.
</div>
</button>
</div>
<!-- Tabs items -->
<div
class="relative lg:max-w-none [mask-image:linear-gradient(white_0%,white_calc(100%-40px),_transparent_calc(100%-1px))] -mx-6"
>
<div class="relative flex flex-col pt-12 md:pt-20 mx-6">
<!-- Item 1 -->
<div
class="w-full text-center"
x-show="tab === '1'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
>
<div class="inline-flex relative align-top">
<img
class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
src="./images/feature-01.png"
width="600"
height="360"
alt="Feature 01"
/>
</div>
</div>
<!-- Item 2 -->
<div
class="w-full text-center"
x-show="tab === '2'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
>
<div class="inline-flex relative align-top">
<img
class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
src="./images/feature-01.png"
width="600"
height="360"
alt="Feature 02"
/>
</div>
</div>
<!-- Item 3 -->
<div
class="w-full text-center"
x-show="tab === '3'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
>
<div class="inline-flex relative align-top">
<img
class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
src="./images/feature-01.png"
width="600"
height="360"
alt="Feature 03"
/>
</div>
</div>
<!-- Item 4 -->
<div
class="w-full text-center"
x-show="tab === '4'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
>
<div class="inline-flex relative align-top">
<img
class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
src="./images/feature-01.png"
width="600"
height="360"
alt="Feature 04"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}