sonr/pkg/webapp/components/landing/highlights.templ

package landing

import (
	"fmt"
	models "github.com/onsonr/sonr/pkg/webapp/models"
)

// ╭───────────────────────────────────────────────────────────╮
// │                         Data Model                        │
// ╰───────────────────────────────────────────────────────────╯

// highlights is the (2nd) home page highlights section
var highlights = &models.Highlights{
	Heading:  "The Internet Rebuilt for You",
	Subtitle: "Sonr is a comprehensive system for Identity Management which proteects users across their digital personas while providing Developers a cost-effective solution for decentralized authentication.",
	Features: []*models.Feature{
		{
			Title: "Crypto Wallet",
			Desc:  "Sonr is designed to work across all platforms and devices, building a encrypted and anonymous identity layer for each user on the internet.",
			Icon:  nil,
			Image: &models.Image{
				Src:    "",
				Width:  "44",
				Height: "44",
			},
		},
		{
			Title: "PassKey Authenticator",
			Desc:  "Sonr leverages advanced cryptography to permit facilitating Wallet Operations directly on-chain, without the need for a centralized server.",
			Icon:  nil,
			Image: &models.Image{
				Src:    "",
				Width:  "44",
				Height: "44",
			},
		},
		{
			Title: "Anonymous Identity",
			Desc:  "Sonr follows the latest specifications from W3C, DIF, and ICF to essentially have an Interchain-Connected, Smart Account System - seamlessly authenticated with PassKeys.",
			Icon:  nil,
			Image: &models.Image{
				Src:    "",
				Width:  "44",
				Height: "44",
			},
		},
		{
			Title: "Tokenized Authorization",
			Desc:  "Sonr anonymously associates your online identities with a Quantum-Resistant Vault which only you can access.",
			Icon:  nil,
			Image: &models.Image{
				Src:    "",
				Width:  "44",
				Height: "44",
			},
		},
	},
}

// ╭───────────────────────────────────────────────────────────╮
// │                  Render Section View                      │
// ╰───────────────────────────────────────────────────────────╯
templ 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">
						@highlightTab(1, highlights.Features[0])
						@highlightTab(2, highlights.Features[1])
						@highlightTab(3, highlights.Features[2])
						@highlightTab(4, highlights.Features[3])
					</div>
				</div>
			</div>
		</div>
	</section>
}

templ highlightTab(index int, highlight *models.Feature) {
	<button
		:class={ getSelectedClass(index) }
		class="text-left px-4 py-5 border border-transparent rounded"
		@click.prevent={ getClickPrevent(index) }
	>
		<div class="flex items-center justify-between mb-1">
			<div class="font-inter-tight font-semibold text-zinc-900">
				{ highlight.Title }
			</div>
			<svg
				:class={ getShowBorder(index) }
				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">
			{ highlight.Desc }
		</div>
	</button>
}

templ highlightCard(index int, highlight *models.Feature) {
	<div
		class="w-full text-center"
		x-show={ getXShow(index) }
		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={ highlight.Image.Src }
				width={ highlight.Image.Width }
				height={ highlight.Image.Height }
				alt={ highlight.Title }
			/>
		</div>
	</div>
}

func getSelectedClass(index int) string {
	return fmt.Sprintf("tab === '%d' ? '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'", index+1)
}

func getShowBorder(index int) string {
	return fmt.Sprintf("tab === '%d' ? 'hidden' : ''", index+1)
}

func getClickPrevent(index int) string {
	return fmt.Sprintf("tab = '%d'", index+1)
}

func getXShow(index int) string {
	return fmt.Sprintf("tab === '%d'", index+1)
}