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
+3 -3
View File
@@ -186,10 +186,10 @@ templ Features() {
<!-- Gear illustration --> <!-- Gear illustration -->
<img <img
class="absolute left-0 bottom-0 -translate-x-1/2 translate-y-1/3 mix-blend-exclusion max-lg:w-32" 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" alt="Features 02 illustration"
width="173" width="224"
height="167" height="224"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
File diff suppressed because one or more lines are too long
+1 -1
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> <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>
<li class="ml-1"> <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> </li>
</ul> </ul>
</nav> </nav>
+1 -1
View File
@@ -29,7 +29,7 @@ func MarketingHeader() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) 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 { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
+18 -19
View File
@@ -12,9 +12,8 @@ templ Highlights() {
The Internet Rebuilt for You The Internet Rebuilt for You
</h2> </h2>
<p class="text-lg text-zinc-500"> <p class="text-lg text-zinc-500">
AI reads and understands your designs, and with nothing more Sonr is a comprehensive system for Identity Management which proteects users across their digital personas while
than a single line of feedback, perform complex actions providing Developers a cost-effective solution for decentralized authentication.
autonomously.
</p> </p>
</div> </div>
<div x-data="{ tab: '1' }"> <div x-data="{ tab: '1' }">
@@ -146,10 +145,10 @@ templ Highlights() {
alt="Feature 01" alt="Feature 01"
/> />
<img <img
class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]" class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
src="./images/feature-illustration.png" src="https://cdn.sonr.id/img/secure-keys.svg"
width="273" width="224"
height="288" height="224"
alt="Illustration" alt="Illustration"
aria-hidden="true" aria-hidden="true"
/> />
@@ -175,10 +174,10 @@ templ Highlights() {
alt="Feature 02" alt="Feature 02"
/> />
<img <img
class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]" class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
src="./images/feature-illustration.png" src="https://cdn.sonr.id/img/secure-keys.svg"
width="273" width="224"
height="288" height="224"
alt="Illustration" alt="Illustration"
aria-hidden="true" aria-hidden="true"
/> />
@@ -204,10 +203,10 @@ templ Highlights() {
alt="Feature 03" alt="Feature 03"
/> />
<img <img
class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]" class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
src="./images/feature-illustration.png" src="https://cdn.sonr.id/img/secure-keys.svg"
width="273" width="224"
height="288" height="224"
alt="Illustration" alt="Illustration"
aria-hidden="true" aria-hidden="true"
/> />
@@ -233,10 +232,10 @@ templ Highlights() {
alt="Feature 04" alt="Feature 04"
/> />
<img <img
class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]" class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
src="./images/feature-illustration.png" src="https://cdn.sonr.id/img/secure-keys.svg"
width="273" width="224"
height="288" height="224"
alt="Illustration" alt="Illustration"
aria-hidden="true" aria-hidden="true"
/> />
File diff suppressed because one or more lines are too long
+3 -3
View File
@@ -14,9 +14,9 @@ hero = new Hero {
href = "/about"; href = "/about";
}; };
image = new Image { image = new Image {
src = "https://cdn.sonr.id/img/hero-clipped.png"; src = "https://cdn.sonr.id/img/hero-clipped.svg";
width = "520"; width = "500";
height = "520"; height = "500";
}; };
}; };