Update landing page style
This commit is contained in:
@ -7,111 +7,91 @@ import (
|
||||
|
||||
templ content(title string, user types.User) {
|
||||
@layout.Base(title){
|
||||
<div class="bg-white">
|
||||
<div class="bg-gray-100">
|
||||
@layout.Navbar(user)
|
||||
<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">
|
||||
<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 user.Authenticated {
|
||||
<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>
|
||||
} else {
|
||||
<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>
|
||||
}
|
||||
</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 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 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-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>
|
||||
} 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-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">
|
||||
Get started
|
||||
Create your free account
|
||||
</a>
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
@layout.Footer()
|
||||
</main>
|
||||
@layout.Footer()
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user