feat: update homepage with new visual design

This commit is contained in:
Prad Nukala 2024-10-01 19:23:24 -04:00
parent fa6bb93c78
commit 08451a846c
8 changed files with 28 additions and 29 deletions

View File

@ -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>

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -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
}

View File

@ -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"
/>

File diff suppressed because one or more lines are too long

View File

@ -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";
};
};