feat: update homepage with new visual design
This commit is contained in:
Prad Nukala committed
1 parent
fa6bb93c78
commit
08451a846c
8 files changed
+28
-29
No files matched your search
@@ -186,10 +186,10 @@ templ Features() {
|
||||
<!-- Gear illustration -->
|
||||
<img
|
||||
class="absolute left-0 bottom-0 -translate-x-1/2 translate-y-1/3 mix-blend-exclusion max-lg:w-32"
|
||||
src="./images/features-illustration.png"
|
||||
src="https://cdn.sonr.id/img/secure-vault.svg"
|
||||
alt="Features 02 illustration"
|
||||
width="173"
|
||||
height="167"
|
||||
width="224"
|
||||
height="224"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ func Features() templ.Component {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Features #3 --><section class=\"relative bg-zinc-800 after:absolute after:top-0 after:right-0 after:h-full after:w-96 after:pointer-events-none after:bg-gradient-to-l after:from-zinc-800 max-lg:after:hidden\"><div class=\"py-12 md:py-20\"><!-- Carousel --><div class=\"max-w-xl lg:max-w-6xl mx-auto px-8 sm:px-6\"><div class=\"lg:flex space-y-12 lg:space-y-0 lg:space-x-12 xl:space-x-24\" x-data=\"{ tab: '1' }\"><!-- Content --><div class=\"lg:max-w-none lg:min-w-[524px]\"><div class=\"mb-8\"><div class=\"inline-flex text-sm font-medium text-zinc-400 px-4 py-0.5 border border-transparent [background:linear-gradient(theme(colors.zinc.800),theme(colors.zinc.800))_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] rounded-full mb-4\">L1 Blockchain</div><h3 class=\"font-inter-tight text-3xl font-bold text-zinc-200 mb-4\">The Protocol for Decentralized Identity & Authentication</h3><p class=\"text-lg text-zinc-500\">We're creating the Global Standard for Decentralized Identity. Authenticate users with PassKeys, Issue Crypto Wallets, Build Payment flows, Send Encrypted Messages - all on a single platform.</p></div><!-- Tabs buttons --><div class=\"mb-8 md:mb-0 space-y-2\"><button :class=\"tab !== '1' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'\" class=\"text-left flex items-center px-6 py-4 rounded border border-transparent\" @click.prevent=\"tab = '1'\"><svg class=\"shrink-0 fill-zinc-400 mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"m7.951 14.537 6.296-7.196 1.506 1.318-7.704 8.804-3.756-3.756 1.414-1.414 2.244 2.244Zm11.296-7.196 1.506 1.318-7.704 8.804-1.756-1.756 1.414-1.414.244.244 6.296-7.196Z\"></path></svg><div><div class=\"font-inter-tight text-lg font-semibold text-zinc-200 mb-1\">Make designs feel real</div><div class=\"text-zinc-500\">Save time and keep things consistent with reusable images, and 3D assets in shared libraries.</div></div></button> <button :class=\"tab !== '2' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'\" class=\"text-left flex items-center px-6 py-4 rounded border border-transparent\" @click.prevent=\"tab = '2'\"><svg class=\"shrink-0 fill-zinc-400 mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"m16.997 19.056-1.78-.912A13.91 13.91 0 0 0 16.75 11.8c0-2.206-.526-4.38-1.533-6.344l1.78-.912A15.91 15.91 0 0 1 18.75 11.8c0 2.524-.602 5.01-1.753 7.256Zm-3.616-1.701-1.77-.93A9.944 9.944 0 0 0 12.75 11.8c0-1.611-.39-3.199-1.14-4.625l1.771-.93c.9 1.714 1.37 3.62 1.369 5.555 0 1.935-.47 3.841-1.369 5.555Zm-3.626-1.693-1.75-.968c.49-.885.746-1.881.745-2.895a5.97 5.97 0 0 0-.745-2.893l1.75-.968a7.968 7.968 0 0 1 .995 3.861 7.97 7.97 0 0 1-.995 3.863Zm-3.673-1.65-1.664-1.11c.217-.325.333-.709.332-1.103 0-.392-.115-.776-.332-1.102L6.082 9.59c.437.655.67 1.425.668 2.21a3.981 3.981 0 0 1-.668 2.212Z\"></path></svg><div><div class=\"font-inter-tight text-lg font-semibold text-zinc-200 mb-1\">Bring creatives closer</div><div class=\"text-zinc-500\">Save time and keep things consistent with reusable images, and 3D assets in shared libraries.</div></div></button> <button :class=\"tab !== '3' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'\" class=\"text-left flex items-center px-6 py-4 rounded border border-transparent\" @click.prevent=\"tab = '3'\"><svg class=\"shrink-0 fill-zinc-400 mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"m11.293 5.293 1.414 1.414-8 8-1.414-1.414 8-8Zm7-1 1.414 1.414-8 8-1.414-1.414 8-8Zm0 6 1.414 1.414-8 8-1.414-1.414 8-8Z\"></path></svg><div><div class=\"font-inter-tight text-lg font-semibold text-zinc-200 mb-1\">Scale and align your design team</div><div class=\"text-zinc-500\">Save time and keep things consistent with reusable images, and 3D assets in shared libraries.</div></div></button></div></div><!-- Tabs items --><div class=\"relative lg:max-w-none\"><div class=\"relative flex flex-col\"><!-- Item 1 --><div class=\"w-full\" x-show=\"tab === '1'\" x-transition:enter=\"transition ease-in-out duration-700 transform order-first\" x-transition:enter-start=\"opacity-0 translate-x-8\" x-transition:enter-end=\"opacity-100 translate-x-0\" x-transition:leave=\"transition ease-in-out duration-300 transform absolute\" x-transition:leave-start=\"opacity-100 translate-x-0\" x-transition:leave-end=\"opacity-0 -translate-x-8\"><div><img class=\"lg:max-w-none mx-auto Line truncated
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Features #3 --><section class=\"relative bg-zinc-800 after:absolute after:top-0 after:right-0 after:h-full after:w-96 after:pointer-events-none after:bg-gradient-to-l after:from-zinc-800 max-lg:after:hidden\"><div class=\"py-12 md:py-20\"><!-- Carousel --><div class=\"max-w-xl lg:max-w-6xl mx-auto px-8 sm:px-6\"><div class=\"lg:flex space-y-12 lg:space-y-0 lg:space-x-12 xl:space-x-24\" x-data=\"{ tab: '1' }\"><!-- Content --><div class=\"lg:max-w-none lg:min-w-[524px]\"><div class=\"mb-8\"><div class=\"inline-flex text-sm font-medium text-zinc-400 px-4 py-0.5 border border-transparent [background:linear-gradient(theme(colors.zinc.800),theme(colors.zinc.800))_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] rounded-full mb-4\">L1 Blockchain</div><h3 class=\"font-inter-tight text-3xl font-bold text-zinc-200 mb-4\">The Protocol for Decentralized Identity & Authentication</h3><p class=\"text-lg text-zinc-500\">We're creating the Global Standard for Decentralized Identity. Authenticate users with PassKeys, Issue Crypto Wallets, Build Payment flows, Send Encrypted Messages - all on a single platform.</p></div><!-- Tabs buttons --><div class=\"mb-8 md:mb-0 space-y-2\"><button :class=\"tab !== '1' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'\" class=\"text-left flex items-center px-6 py-4 rounded border border-transparent\" @click.prevent=\"tab = '1'\"><svg class=\"shrink-0 fill-zinc-400 mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"m7.951 14.537 6.296-7.196 1.506 1.318-7.704 8.804-3.756-3.756 1.414-1.414 2.244 2.244Zm11.296-7.196 1.506 1.318-7.704 8.804-1.756-1.756 1.414-1.414.244.244 6.296-7.196Z\"></path></svg><div><div class=\"font-inter-tight text-lg font-semibold text-zinc-200 mb-1\">Make designs feel real</div><div class=\"text-zinc-500\">Save time and keep things consistent with reusable images, and 3D assets in shared libraries.</div></div></button> <button :class=\"tab !== '2' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'\" class=\"text-left flex items-center px-6 py-4 rounded border border-transparent\" @click.prevent=\"tab = '2'\"><svg class=\"shrink-0 fill-zinc-400 mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"m16.997 19.056-1.78-.912A13.91 13.91 0 0 0 16.75 11.8c0-2.206-.526-4.38-1.533-6.344l1.78-.912A15.91 15.91 0 0 1 18.75 11.8c0 2.524-.602 5.01-1.753 7.256Zm-3.616-1.701-1.77-.93A9.944 9.944 0 0 0 12.75 11.8c0-1.611-.39-3.199-1.14-4.625l1.771-.93c.9 1.714 1.37 3.62 1.369 5.555 0 1.935-.47 3.841-1.369 5.555Zm-3.626-1.693-1.75-.968c.49-.885.746-1.881.745-2.895a5.97 5.97 0 0 0-.745-2.893l1.75-.968a7.968 7.968 0 0 1 .995 3.861 7.97 7.97 0 0 1-.995 3.863Zm-3.673-1.65-1.664-1.11c.217-.325.333-.709.332-1.103 0-.392-.115-.776-.332-1.102L6.082 9.59c.437.655.67 1.425.668 2.21a3.981 3.981 0 0 1-.668 2.212Z\"></path></svg><div><div class=\"font-inter-tight text-lg font-semibold text-zinc-200 mb-1\">Bring creatives closer</div><div class=\"text-zinc-500\">Save time and keep things consistent with reusable images, and 3D assets in shared libraries.</div></div></button> <button :class=\"tab !== '3' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'\" class=\"text-left flex items-center px-6 py-4 rounded border border-transparent\" @click.prevent=\"tab = '3'\"><svg class=\"shrink-0 fill-zinc-400 mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"m11.293 5.293 1.414 1.414-8 8-1.414-1.414 8-8Zm7-1 1.414 1.414-8 8-1.414-1.414 8-8Zm0 6 1.414 1.414-8 8-1.414-1.414 8-8Z\"></path></svg><div><div class=\"font-inter-tight text-lg font-semibold text-zinc-200 mb-1\">Scale and align your design team</div><div class=\"text-zinc-500\">Save time and keep things consistent with reusable images, and 3D assets in shared libraries.</div></div></button></div></div><!-- Tabs items --><div class=\"relative lg:max-w-none\"><div class=\"relative flex flex-col\"><!-- Item 1 --><div class=\"w-full\" x-show=\"tab === '1'\" x-transition:enter=\"transition ease-in-out duration-700 transform order-first\" x-transition:enter-start=\"opacity-0 translate-x-8\" x-transition:enter-end=\"opacity-100 translate-x-0\" x-transition:leave=\"transition ease-in-out duration-300 transform absolute\" x-transition:leave-start=\"opacity-100 translate-x-0\" x-transition:leave-end=\"opacity-0 -translate-x-8\"><div><img class=\"lg:max-w-none mx-auto Line truncated
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ templ MarketingHeader() {
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition" href="/login">Log in</a>
|
||||
</li>
|
||||
<li class="ml-1">
|
||||
<a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href="/register">Register</a>
|
||||
<div class="btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get="/register">Register</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -29,7 +29,7 @@ func MarketingHeader() templ.Component {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site header --><header class=\"absolute top-2 md:top-6 w-full z-30\"><div class=\"px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto\"><div class=\"flex items-center justify-between h-14 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] rounded-lg px-3\"><!-- Site branding --><div class=\"shrink-0 mr-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/img/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><!-- Desktop navigation --><nav class=\"flex grow\"><!-- Desktop sign in links --><ul class=\"flex grow justify-end flex-wrap items-center\"><li><a class=\"text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" href=\"/login\">Log in</a></li><li class=\"ml-1\"><a class=\"btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" href=\"/register\">Register</a></li></ul></nav></div></div></div></header>")
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site header --><header class=\"absolute top-2 md:top-6 w-full z-30\"><div class=\"px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto\"><div class=\"flex items-center justify-between h-14 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] rounded-lg px-3\"><!-- Site branding --><div class=\"shrink-0 mr-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/img/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><!-- Desktop navigation --><nav class=\"flex grow\"><!-- Desktop sign in links --><ul class=\"flex grow justify-end flex-wrap items-center\"><li><a class=\"text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" href=\"/login\">Log in</a></li><li class=\"ml-1\"><div class=\"btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow\" hx-swap=\"afterend\" hx-get=\"/register\">Register</div></li></ul></nav></div></div></div></header>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
@@ -12,9 +12,8 @@ templ Highlights() {
|
||||
The Internet Rebuilt for You
|
||||
</h2>
|
||||
<p class="text-lg text-zinc-500">
|
||||
AI reads and understands your designs, and with nothing more
|
||||
than a single line of feedback, perform complex actions
|
||||
autonomously.
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div x-data="{ tab: '1' }">
|
||||
@@ -146,10 +145,10 @@ templ Highlights() {
|
||||
alt="Feature 01"
|
||||
/>
|
||||
<img
|
||||
class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
|
||||
src="./images/feature-illustration.png"
|
||||
width="273"
|
||||
height="288"
|
||||
class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
|
||||
src="https://cdn.sonr.id/img/secure-keys.svg"
|
||||
width="224"
|
||||
height="224"
|
||||
alt="Illustration"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -175,10 +174,10 @@ templ Highlights() {
|
||||
alt="Feature 02"
|
||||
/>
|
||||
<img
|
||||
class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
|
||||
src="./images/feature-illustration.png"
|
||||
width="273"
|
||||
height="288"
|
||||
class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
|
||||
src="https://cdn.sonr.id/img/secure-keys.svg"
|
||||
width="224"
|
||||
height="224"
|
||||
alt="Illustration"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -204,10 +203,10 @@ templ Highlights() {
|
||||
alt="Feature 03"
|
||||
/>
|
||||
<img
|
||||
class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
|
||||
src="./images/feature-illustration.png"
|
||||
width="273"
|
||||
height="288"
|
||||
class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
|
||||
src="https://cdn.sonr.id/img/secure-keys.svg"
|
||||
width="224"
|
||||
height="224"
|
||||
alt="Illustration"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
@@ -233,10 +232,10 @@ templ Highlights() {
|
||||
alt="Feature 04"
|
||||
/>
|
||||
<img
|
||||
class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
|
||||
src="./images/feature-illustration.png"
|
||||
width="273"
|
||||
height="288"
|
||||
class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
|
||||
src="https://cdn.sonr.id/img/secure-keys.svg"
|
||||
width="224"
|
||||
height="224"
|
||||
alt="Illustration"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
@@ -29,7 +29,7 @@ func Highlights() templ.Component {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- 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\">The Internet Rebuilt for You</h2><p class=\"text-lg text-zinc-500\">AI reads and understands your designs, and with nothing more than a single line of feedback, perform complex actions autonomously.</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 pLine truncated
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- 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\">The Internet Rebuilt for You</h2><p class=\"text-lg text-zinc-500\">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.</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),_transparentLine truncated
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
@@ -14,9 +14,9 @@ hero = new Hero {
|
||||
href = "/about";
|
||||
};
|
||||
image = new Image {
|
||||
src = "https://cdn.sonr.id/img/hero-clipped.png";
|
||||
width = "520";
|
||||
height = "520";
|
||||
src = "https://cdn.sonr.id/img/hero-clipped.svg";
|
||||
width = "500";
|
||||
height = "500";
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
File renamed without changes.
Reference in new issue
Block a user