Skip to content

Commit f8c1716

Browse files
marc-aurele-besnermarc-aurele-besner
committed
improve landing page
1 parent 8cafc42 commit f8c1716

File tree

1 file changed

+259
-23
lines changed

1 file changed

+259
-23
lines changed

‎lib/fileonchain_web/controllers/page_html/home.html.heex

Lines changed: 259 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<.flash_group flash={@flash} />
2-
<div class="relative bg-brand-900 overflow-hidden">
2+
3+
<!-- Hero Section -->
4+
<div class="relative bg-gradient-to-br from-brand-900 to-brand-800 overflow-hidden">
35
<div class="max-w-7xl mx-auto">
4-
<div class="relative z-10 pb-8 bg-brand-800 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
5-
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-brand-800 transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
6-
<polygon points="50,0 100,0 50,100 0,100" />
7-
</svg>
6+
<div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:pb-28 xl:pb-32">
87
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
98
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
109
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
@@ -17,21 +16,26 @@
1716
</div>
1817
</nav>
1918
</div>
19+
2020
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
21-
<div class="sm:text-center lg:text-left">
22-
<h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
23-
<span class="block xl:inline">Fileonchain</span>
24-
<span class="block text-secondary-400 xl:inline">Secure File Storage</span>
21+
<div class="text-center lg:text-left">
22+
<h1 class="text-4xl tracking-tight font-extrabold text-white sm:max-w-xl sm:text-5xl md:text-6xl">
23+
<span class="block xl:inline">Secure Your Files with</span>
24+
<span class="block text-secondary-400 xl:inline">Fileonchain</span>
2525
</h1>
26-
<p class="mt-3 text-base text-brand-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">Allows anyone to upload small and large files to any substrate network, making them permanently available on-chain ⛓️.</p>
26+
<p class="mt-3 text-base text-brand-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
27+
Upload and store your files on the blockchain, ensuring permanent availability and unmatched security. Experience the future of decentralized storage with Fileonchain.
28+
</p>
2729
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
2830
<div class="rounded-md shadow-brand">
2931
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary-600 hover:bg-secondary-700 md:py-4 md:text-lg md:px-10 transition duration-150 ease-in-out">
30-
Get started
32+
Get Started
3133
</a>
3234
</div>
3335
<div class="mt-3 sm:mt-0 sm:ml-3">
34-
<a href="https://www.youtube.com/watch?v=o7fz7lqIdgo" target="_blank" rel="noopener noreferrer" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-brand-900 bg-accent-100 hover:bg-accent-200 md:py-4 md:text-lg md:px-10 transition duration-150 ease-in-out">Live demo</a>
36+
<a href="https://www.youtube.com/watch?v=o7fz7lqIdgo" target="_blank" rel="noopener noreferrer" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-brand-900 bg-accent-300 hover:bg-accent-400 md:py-4 md:text-lg md:px-10 transition duration-150 ease-in-out">
37+
Watch Demo
38+
</a>
3539
</div>
3640
</div>
3741
</div>
@@ -42,19 +46,251 @@
4246
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="/images/hero-image.jpg" alt="">
4347
</div>
4448
</div>
45-
<div class="bg-brand-800">
46-
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
47-
<h2 class="text-3xl font-extrabold text-white sm:text-4xl">
48-
<span class="block">Ready to dive in?</span>
49-
<span class="block text-secondary-400">Start your free trial today.</span>
49+
50+
<!-- Features Section -->
51+
<div class="py-12 bg-brand-800">
52+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
53+
<div class="lg:text-center">
54+
<h2 class="text-base text-secondary-400 font-semibold tracking-wide uppercase">Features</h2>
55+
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
56+
Why Choose Fileonchain?
57+
</p>
58+
<p class="mt-4 max-w-2xl text-xl text-brand-300 lg:mx-auto">
59+
Experience the benefits of blockchain-powered file storage with our cutting-edge platform.
60+
</p>
61+
</div>
62+
63+
<div class="mt-10">
64+
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
65+
<div class="relative">
66+
<dt>
67+
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary-500 text-white">
68+
<.icon name="hero-lock-closed-solid" class="h-6 w-6" />
69+
</div>
70+
<p class="ml-16 text-lg leading-6 font-medium text-white">Unmatched Security</p>
71+
</dt>
72+
<dd class="mt-2 ml-16 text-base text-brand-300">
73+
Your files are encrypted and stored on the blockchain, ensuring the highest level of security and immutability.
74+
</dd>
75+
</div>
76+
77+
<div class="relative">
78+
<dt>
79+
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary-500 text-white">
80+
<.icon name="hero-clock-solid" class="h-6 w-6" />
81+
</div>
82+
<p class="ml-16 text-lg leading-6 font-medium text-white">Permanent Availability</p>
83+
</dt>
84+
<dd class="mt-2 ml-16 text-base text-brand-300">
85+
Access your files anytime, anywhere. Once uploaded, your data remains permanently available on the blockchain.
86+
</dd>
87+
</div>
88+
89+
<div class="relative">
90+
<dt>
91+
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary-500 text-white">
92+
<.icon name="hero-cloud-arrow-up-solid" class="h-6 w-6" />
93+
</div>
94+
<p class="ml-16 text-lg leading-6 font-medium text-white">Easy Upload Process</p>
95+
</dt>
96+
<dd class="mt-2 ml-16 text-base text-brand-300">
97+
Our user-friendly interface makes it simple to upload both small and large files to any substrate network.
98+
</dd>
99+
</div>
100+
101+
<div class="relative">
102+
<dt>
103+
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary-500 text-white">
104+
<.icon name="hero-shield-check-solid" class="h-6 w-6" />
105+
</div>
106+
<p class="ml-16 text-lg leading-6 font-medium text-white">Decentralized Storage</p>
107+
</dt>
108+
<dd class="mt-2 ml-16 text-base text-brand-300">
109+
Benefit from the power of decentralized storage, eliminating single points of failure and ensuring data integrity.
110+
</dd>
111+
</div>
112+
</dl>
113+
</div>
114+
</div>
115+
</div>
116+
117+
<!-- CTA Section -->
118+
<div class="bg-gradient-to-r from-brand-700 to-secondary-600">
119+
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
120+
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
121+
<span class="block">Ready to secure your files?</span>
122+
<span class="block text-brand-300">Start your free trial today.</span>
50123
</h2>
51-
<div class="mt-8 flex justify-center">
52-
<div class="inline-flex rounded-md shadow-secondary">
53-
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary-600 hover:bg-secondary-700 transition duration-150 ease-in-out">Get started</a>
124+
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
125+
<div class="rounded-md shadow-brand">
126+
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary-600 hover:bg-secondary-700 md:py-4 md:text-lg md:px-10 transition duration-150 ease-in-out">
127+
Get Started
128+
</a>
54129
</div>
55-
<div class="ml-3 inline-flex">
56-
<a href="https://www.canva.com/design/DAGGzsyvreI/nlvCgcaMf1EmWGtRCBj8uA/edit?utm_content=DAGGzsyvreI&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-brand-900 bg-accent-200 hover:bg-accent-200 transition duration-150 ease-in-out">Learn more</a>
130+
<div class="mt-3 sm:mt-0 sm:ml-3">
131+
<a href="https://www.youtube.com/watch?v=o7fz7lqIdgo" target="_blank" rel="noopener noreferrer" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-brand-900 bg-accent-300 hover:bg-accent-400 md:py-4 md:text-lg md:px-10 transition duration-150 ease-in-out">
132+
Watch Demo
133+
</a>
57134
</div>
58135
</div>
59136
</div>
60-
</div>
137+
</div>
138+
139+
<!-- Testimonials Section -->
140+
<div class="bg-brand-900 py-16 sm:py-24">
141+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
142+
<div class="lg:text-center">
143+
<h2 class="text-base text-secondary-400 font-semibold tracking-wide uppercase">Testimonials</h2>
144+
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
145+
What Our Users Say
146+
</p>
147+
</div>
148+
<div class="mt-16">
149+
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
150+
<div class="bg-brand-800 rounded-lg shadow-lg p-6">
151+
<p class="text-lg text-brand-300">"Fileonchain has revolutionized how we store and share sensitive documents. The security and permanence it offers are unmatched."</p>
152+
<div class="mt-4">
153+
<p class="text-base font-medium text-white">John Doe</p>
154+
<p class="text-sm text-brand-400">CEO, TechCorp</p>
155+
</div>
156+
</div>
157+
<div class="bg-brand-800 rounded-lg shadow-lg p-6">
158+
<p class="text-lg text-brand-300">"The ease of use and peace of mind that comes with knowing our files are securely stored on the blockchain is invaluable."</p>
159+
<div class="mt-4">
160+
<p class="text-base font-medium text-white">Jane Smith</p>
161+
<p class="text-sm text-brand-400">CTO, DataSafe Inc.</p>
162+
</div>
163+
</div>
164+
<div class="bg-brand-800 rounded-lg shadow-lg p-6">
165+
<p class="text-lg text-brand-300">"Fileonchain's decentralized approach to file storage has given us a competitive edge in data management and security."</p>
166+
<div class="mt-4">
167+
<p class="text-base font-medium text-white">Mike Johnson</p>
168+
<p class="text-sm text-brand-400">Head of IT, SecureData Solutions</p>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
176+
<!-- Footer -->
177+
<footer class="bg-brand-800">
178+
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
179+
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
180+
<div class="space-y-8 xl:col-span-1">
181+
<img class="h-10" src="/images/logo.svg" alt="Fileonchain">
182+
<p class="text-brand-300 text-base">
183+
Secure your files on the blockchain with Fileonchain. Experience unmatched security and permanent availability.
184+
</p>
185+
<div class="flex space-x-6">
186+
<a href="https://x.com/fileonchain" class="text-brand-400 hover:text-brand-300">
187+
<span class="sr-only">Twitter</span>
188+
<.icon name="hero-twitter-solid" class="h-6 w-6" />
189+
</a>
190+
<a href="https://github.com/FileOnchain/fileonchain" class="text-brand-400 hover:text-brand-300">
191+
<span class="sr-only">GitHub</span>
192+
<.icon name="hero-github-solid" class="h-6 w-6" />
193+
</a>
194+
</div>
195+
</div>
196+
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
197+
<div class="md:grid md:grid-cols-2 md:gap-8">
198+
<div>
199+
<h3 class="text-sm font-semibold text-brand-200 tracking-wider uppercase">
200+
Solutions
201+
</h3>
202+
<ul role="list" class="mt-4 space-y-4">
203+
<li>
204+
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="text-base text-brand-300 hover:text-white">
205+
File Storage
206+
</a>
207+
</li>
208+
<li>
209+
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="text-base text-brand-300 hover:text-white">
210+
Data Security
211+
</a>
212+
</li>
213+
<li>
214+
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="text-base text-brand-300 hover:text-white">
215+
Blockchain Integration
216+
</a>
217+
</li>
218+
</ul>
219+
</div>
220+
<div class="mt-12 md:mt-0">
221+
<h3 class="text-sm font-semibold text-brand-200 tracking-wider uppercase">
222+
Support
223+
</h3>
224+
<ul role="list" class="mt-4 space-y-4">
225+
<li>
226+
<a href="#" class="text-base text-brand-300 hover:text-white">
227+
Pricing
228+
</a>
229+
</li>
230+
<li>
231+
<a href="#" class="text-base text-brand-300 hover:text-white">
232+
Documentation
233+
</a>
234+
</li>
235+
<li>
236+
<a href="#" class="text-base text-brand-300 hover:text-white">
237+
API Status
238+
</a>
239+
</li>
240+
</ul>
241+
</div>
242+
</div>
243+
<div class="md:grid md:grid-cols-2 md:gap-8">
244+
<div>
245+
<h3 class="text-sm font-semibold text-brand-200 tracking-wider uppercase">
246+
Company
247+
</h3>
248+
<ul role="list" class="mt-4 space-y-4">
249+
<li>
250+
<a href="#" class="text-base text-brand-300 hover:text-white">
251+
About
252+
</a>
253+
</li>
254+
<li>
255+
<a href="#" class="text-base text-brand-300 hover:text-white">
256+
Blog
257+
</a>
258+
</li>
259+
<li>
260+
<a href="#" class="text-base text-brand-300 hover:text-white">
261+
Careers
262+
</a>
263+
</li>
264+
</ul>
265+
</div>
266+
<div class="mt-12 md:mt-0">
267+
<h3 class="text-sm font-semibold text-brand-200 tracking-wider uppercase">
268+
Legal
269+
</h3> <ul role="list" class="mt-4 space-y-4">
270+
<li>
271+
<a href="#" class="text-base text-brand-300 hover:text-white">
272+
Privacy Policy
273+
</a>
274+
</li>
275+
<li>
276+
<a href="#" class="text-base text-brand-300 hover:text-white">
277+
Terms of Service
278+
</a>
279+
</li>
280+
<li>
281+
<a href="#" class="text-base text-brand-300 hover:text-white">
282+
Cookie Policy
283+
</a>
284+
</li>
285+
</ul>
286+
</div>
287+
</div>
288+
</div>
289+
</div>
290+
<div class="mt-12 border-t border-brand-700 pt-8">
291+
<p class="text-base text-brand-400 xl:text-center">
292+
&copy; 2024 Fileonchain, Inc. All rights reserved.
293+
</p>
294+
</div>
295+
</div>
296+
</footer>

0 commit comments

Comments
 (0)