bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update landing page style

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-09-17 20:25:46 +07:00
parent e2c0f0b12c
commit d6463fa36f
2 changed files with 98 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
view/client/index/index.templ
View File

@ -7,111 +7,91 @@ import (
templ content(title string, user types.User) { templ content(title string, user types.User) {
@layout.Base(title){ @layout.Base(title){
<div class="bg-white"> <div class="bg-gray-100">
@layout.Navbar(user) @layout.Navbar(user)
<main class="container mx-auto px-6 py-16 text-center"> <main class="container mx-auto px-4 py-16">
<h1 class="text-5xl font-bold text-gray-900 mb-2">Your files, always within reach</h1> <div class="text-center mb-16">
<p class="text-gray-700 text-lg mb-8"> <h1 class="text-5xl font-bold mb-6 text-primary">Your files, always within reach</h1>
Store, access, and share your files from anywhere. We offer secure and reliable file storage, so you can <p class="text-xl mb-8 text-gray-600">
focus on what matters most. Store, access, and manage your files with ease. Filekeeper offers generous storage and seamless access from any device, completely free.
</p> </p>
<div class="flex justify-center items-center space-x-4">
<div class="sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
if user.Authenticated { if user.Authenticated {
<a class="w-full flex items-center justify-center px-8 py-3 text-base leading-6 font-medium rounded-md text-white bg-pink-400 hover:bg-pink-500 hover:text-white focus:ring ring-offset-2 ring-pink-400 focus:outline-none transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10" <a class="px-8 py-4 bg-black text-white text-lg font-semibold rounded-full hover:bg-black/90 transition-colors"
href="/user" hx-get="/user" hx-swap="innerHTML" hx-push-url="true" hx-target="#content"> href="/user" hx-get="/user" hx-swap="innerHTML" hx-push-url="true" hx-target="#content">
Open Dashboard Open Dashboard
</a> </a>
} else { } else {
<a class="w-full flex items-center justify-center px-8 py-3 text-base leading-6 font-medium rounded-md text-white bg-pink-400 hover:bg-pink-500 hover:text-white focus:ring ring-offset-2 ring-pink-400 focus:outline-none transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10" <a class="px-8 py-4 bg-black text-white text-lg font-semibold rounded-full hover:bg-black/90 transition-colors"
href="/signup" hx-get="/signup" hx-swap="innerHTML" hx-push-url="true" hx-target="#content"> href="/signup" hx-get="/signup" hx-swap="innerHTML" hx-push-url="true" hx-target="#content">
Get started Sign up for free
</a> </a>
} }
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
<div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg>
<h2 class="text-xl font-semibold mb-2">Easy Access</h2>
<p class="text-gray-600">Access your files with just a few clicks, anytime you need them.</p>
</div>
<div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
</svg>
<h2 class="text-xl font-semibold mb-2">Generous Storage</h2>
<p class="text-gray-600">Store all your important files with our spacious free storage.</p>
</div>
<div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<h2 class="text-xl font-semibold mb-2">Access Anywhere</h2>
<p class="text-gray-600">Use Filekeeper on any device - computer, tablet, or smartphone.</p>
</div>
<div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<h2 class="text-xl font-semibold mb-2">Secure Storage</h2>
<p class="text-gray-600">Rest easy knowing your files are stored securely in the cloud.</p>
</div> </div>
</div> </div>
<section class="w-full py-12 md:py-24 lg:py-32"> <div class="bg-zinc-800 text-white rounded-lg p-8 mb-16">
<div class="container px-4 md:px-6"> <h2 class="text-3xl font-bold mb-4">Why choose Filekeeper?</h2>
<div class="grid gap-8 sm:grid-cols-2 md:grid-cols-3"> <ul class="list-disc list-inside space-y-2">
<div class="grid gap-1 items-center"> <li>Completely free to use</li>
<div class="flex justify-center"> <li>Intuitive and user-friendly interface</li>
<svg <li>Generous storage space for all your files</li>
xmlns="http://www.w3.org/2000/svg" <li>Access your files from any device, anywhere</li>
width="24" <li>Robust file organization and search capabilities</li>
height="24" <li>Dedicated customer support team</li>
viewBox="0 0 24 24" </ul>
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-8 w-8 text-gray-900"
>
<path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path>
</svg>
</div> </div>
<h3 class="text-lg font-bold">Unlimited Storage</h3>
<p class="text-gray-500"> <div class="bg-white rounded-lg p-8 shadow-lg">
Store as many files as you need with our generous storage limits. <h2 class="text-3xl font-bold mb-4 text-center">Get Started with Filekeeper</h2>
</p> <p class="text-center mb-6">Join Filekeeper today and experience hassle-free file management - no credit card required!</p>
</div> <div class="flex justify-center space-x-4">
<div class="grid gap-1 items-center"> if user.Authenticated {
<div class="flex justify-center"> <a class="px-6 py-3 bg-black text-white font-semibold rounded-full hover:bg-black/90 transition-colors"
<svg href="/user" hx-get="/user" hx-swap="innerHTML" hx-push-url="true" hx-target="#content">
xmlns="http://www.w3.org/2000/svg" Open Dashboard
width="24" </a>
height="24" } else {
viewBox="0 0 24 24" <a class="px-6 py-3 bg-black text-white font-semibold rounded-full hover:bg-black/90 transition-colors"
fill="none" href="/signup" hx-get="/signup" hx-swap="innerHTML" hx-push-url="true" hx-target="#content">
stroke="currentColor" Create your free account
stroke-width="2" </a>
stroke-linecap="round" }
stroke-linejoin="round"
class="h-8 w-8 text-gray-900"
>
<rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<h3 class="text-lg font-bold">Secure Encryption</h3>
<p class="text-gray-500">
Your files are encrypted with the latest security protocols to keep them safe.
</p>
</div>
<div class="grid gap-1 items-center">
<div class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-8 w-8 text-gray-900"
>
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
<polyline points="16 6 12 2 8 6"></polyline>
<line x1="12" x2="12" y1="2" y2="15"></line>
</svg>
</div>
<h3 class="text-lg font-bold">Easy Sharing</h3>
<p class="text-gray-500">
Quickly share files with friends, family, or colleagues with shareable links.
</p>
</div> </div>
</div> </div>
</div>
</section>
</main> </main>
</div>
@layout.Footer() @layout.Footer()
</div>
} }
} }

29
view/client/index/index_templ.go
View File

@ -34,7 +34,7 @@ func content(title string, user types.User) templ.Component {
templ_7745c5c3_Buffer = templ.GetBuffer() templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer) defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"bg-white\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"bg-gray-100\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -42,22 +42,37 @@ func content(title string, user types.User) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<main class=\"container mx-auto px-6 py-16 text-center\"><h1 class=\"text-5xl font-bold text-gray-900 mb-2\">Your files, always within reach</h1><p class=\"text-gray-700 text-lg mb-8\">Store, access, and share your files from anywhere. We offer secure and reliable file storage, so you can focus on what matters most.</p><div class=\"flex justify-center items-center space-x-4\"><div class=\"sm:flex sm:justify-center lg:justify-start\"><div class=\"rounded-md shadow\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<main class=\"container mx-auto px-4 py-16\"><div class=\"text-center mb-16\"><h1 class=\"text-5xl font-bold mb-6 text-primary\">Your files, always within reach</h1><p class=\"text-xl mb-8 text-gray-600\">Store, access, and manage your files with ease. Filekeeper offers generous storage and seamless access from any device, completely free.</p>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if user.Authenticated { if user.Authenticated {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"w-full flex items-center justify-center px-8 py-3 text-base leading-6 font-medium rounded-md text-white bg-pink-400 hover:bg-pink-500 hover:text-white focus:ring ring-offset-2 ring-pink-400 focus:outline-none transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10\" href=\"/user\" hx-get=\"/user\" hx-swap=\"innerHTML\" hx-push-url=\"true\" hx-target=\"#content\">Open Dashboard</a>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"px-8 py-4 bg-black text-white text-lg font-semibold rounded-full hover:bg-black/90 transition-colors\" href=\"/user\" hx-get=\"/user\" hx-swap=\"innerHTML\" hx-push-url=\"true\" hx-target=\"#content\">Open Dashboard</a>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} else { } else {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"w-full flex items-center justify-center px-8 py-3 text-base leading-6 font-medium rounded-md text-white bg-pink-400 hover:bg-pink-500 hover:text-white focus:ring ring-offset-2 ring-pink-400 focus:outline-none transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10\" href=\"/signup\" hx-get=\"/signup\" hx-swap=\"innerHTML\" hx-push-url=\"true\" hx-target=\"#content\">Get started</a>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"px-8 py-4 bg-black text-white text-lg font-semibold rounded-full hover:bg-black/90 transition-colors\" href=\"/signup\" hx-get=\"/signup\" hx-swap=\"innerHTML\" hx-push-url=\"true\" hx-target=\"#content\">Sign up for free</a>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div><section class=\"w-full py-12 md:py-24 lg:py-32\"><div class=\"container px-4 md:px-6\"><div class=\"grid gap-8 sm:grid-cols-2 md:grid-cols-3\"><div class=\"grid gap-1 items-center\"><div class=\"flex justify-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-8 w-8 text-gray-900\"><path d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\"></path></svg></div><h3 class=\"text-lg font-bold\">Unlimited Storage</h3><p class=\"text-gray-500\">Store as many files as you need with our generous storage limits.</p></div><div class=\"grid gap-1 items-center\"><div class=\"flex justify-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-8 w-8 text-gray-900\"><rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"></rect> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg></div><h3 class=\"text-lg font-bold\">Secure Encryption</h3><p class=\"text-gray-500\">Your files are encrypted with the latest security protocols to keep them safe.</p></div><div class=\"grid gap-1 items-center\"><div class=\"flex justify-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-8 w-8 text-gray-900\"><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path> <polyline points=\"16 6 12 2 8 6\"></polyline> <line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"15\"></line></svg></div><h3 class=\"text-lg font-bold\">Easy Sharing</h3><p class=\"text-gray-500\">Quickly share files with friends, family, or colleagues with shareable links.</p></div></div></div></section></main></div>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 mb-16\"><div class=\"p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-primary mx-auto mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z\"></path></svg><h2 class=\"text-xl font-semibold mb-2\">Easy Access</h2><p class=\"text-gray-600\">Access your files with just a few clicks, anytime you need them.</p></div><div class=\"p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-primary mx-auto mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4\"></path></svg><h2 class=\"text-xl font-semibold mb-2\">Generous Storage</h2><p class=\"text-gray-600\">Store all your important files with our spacious free storage.</p></div><div class=\"p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-primary mx-auto mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"></path></svg><h2 class=\"text-xl font-semibold mb-2\">Access Anywhere</h2><p class=\"text-gray-600\">Use Filekeeper on any device - computer, tablet, or smartphone.</p></div><div class=\"p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-primary mx-auto mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"></path></svg><h2 class=\"text-xl font-semibold mb-2\">Secure Storage</h2><p class=\"text-gray-600\">Rest easy knowing your files are stored securely in the cloud.</p></div></div><div class=\"bg-zinc-800 text-white rounded-lg p-8 mb-16\"><h2 class=\"text-3xl font-bold mb-4\">Why choose Filekeeper?</h2><ul class=\"list-disc list-inside space-y-2\"><li>Completely free to use</li><li>Intuitive and user-friendly interface</li><li>Generous storage space for all your files</li><li>Access your files from any device, anywhere</li><li>Robust file organization and search capabilities</li><li>Dedicated customer support team</li></ul></div><div class=\"bg-white rounded-lg p-8 shadow-lg\"><h2 class=\"text-3xl font-bold mb-4 text-center\">Get Started with Filekeeper</h2><p class=\"text-center mb-6\">Join Filekeeper today and experience hassle-free file management - no credit card required!</p><div class=\"flex justify-center space-x-4\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if user.Authenticated {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"px-6 py-3 bg-black text-white font-semibold rounded-full hover:bg-black/90 transition-colors\" href=\"/user\" hx-get=\"/user\" hx-swap=\"innerHTML\" hx-push-url=\"true\" hx-target=\"#content\">Open Dashboard</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} else {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"px-6 py-3 bg-black text-white font-semibold rounded-full hover:bg-black/90 transition-colors\" href=\"/signup\" hx-get=\"/signup\" hx-swap=\"innerHTML\" hx-push-url=\"true\" hx-target=\"#content\">Create your free account</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></main>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -65,6 +80,10 @@ func content(title string, user types.User) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer { if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer) _, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
} }