Improve landing page

frontend/src/app/page.tsx

@@ -6,7 +6,9 @@ export default function App() {
 }
 
 export const metadata: Metadata = {
-  title: 'Auto-Drive',
+  title: 'Auto Drive',
   description:
-    'Store, share, and download your files securely with autonomys decentralized permanent storage.',
+    'Store, share, and download your files securely with Autonomys Network decentralized permanent storage.',
+  keywords:
+    'autonomys, auto-drive, decentralized storage, permanent storage, autonomys network, file storage, file sharing, secure storage, blockchain storage, distributed storage, cloud storage alternative, web3 storage, peer-to-peer storage, encrypted storage, data persistence',
 };

frontend/src/components/common/LandingHeader/index.tsx

@@ -3,7 +3,7 @@
 import { HelpCircleIcon, HomeIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useCallback } from 'react';
-
+import Link from 'next/link';
 export const LandingHeader = () => {
   const pathname = usePathname();
 
@@ -19,16 +19,16 @@ export const LandingHeader = () => {
   return (
     <div className='flex w-full flex-row justify-center gap-2 bg-transparent px-[20%] py-2'>
       <ul className='flex flex-row gap-4'>
-        <a className='content' href='/'>
+        <Link className='content' href='/'>
           <li className={getLinkClass('/')}>
             <HomeIcon className='h-4 w-4' />
           </li>
-        </a>
-        <a className='content' href='/faqs'>
+        </Link>
+        <Link className='content' href='/faqs'>
           <li className={getLinkClass('/faqs')}>
             <HelpCircleIcon className='h-4 w-4' />
           </li>
-        </a>
+        </Link>
       </ul>
     </div>
   );

frontend/src/views/Home/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import Footer from '../../components/Footer';
 import { LandingHeader } from '../../components/common/LandingHeader';
 import { SigningInButtons } from './SignInButtons';
@@ -11,8 +12,8 @@ export const Home = () => {
       <LandingHeader />
       <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
         <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
-          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent'>
-            Auto-Drive
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Auto Drive
           </h1>
           <p className='text-gray max-w-[75%] text-center text-lg font-light'>
             Store, share, and download your files securely with Autonomys
@@ -30,6 +31,172 @@ export const Home = () => {
           />
         </div>
       </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Upload Once, Access Forever.
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Image
+            className='w-full rounded-3xl border-2 border-gray-200'
+            src='/images/drag-drop-or-select-files-folders.png.png'
+            alt='Drag and drop files and folders'
+            width={420}
+            height={272}
+          />
+        </div>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Upload Files & Folders
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light'>
+            Upload files and folders to Autonomys Network decentralized permanent storage, by simply dragging and dropping them into the upload area. Or select files and folders from your computer.
+          </p>
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Your Drive into Permanent Decentralized Storage.
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Secure End-to-End Encryption (E2EE)
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light leading-relaxed'>
+            Secure your data with optional end-to-end encryption on Autonomys Network. Choose between setting a global encryption key for all files, customizing keys per file, or uploading without encryption - putting you in complete control of your data security.
+          </p>
+        </div>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Image
+            className='w-full rounded-3xl border-2 border-gray-200'
+            src='/images/upload-with-encryption-or-without.png'
+            alt='Upload with encryption or without'
+            width={420}
+            height={272}
+          />
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Seamless Integration & Developer-Friendly
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Image
+            className='w-full rounded-3xl border-2 border-gray-200'
+            src='/images/api-support.png'
+            alt='API Support'
+            width={420}
+            height={272}
+          />
+        </div>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Create API Keys
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light'>
+            Create API keys to access Autonomys Network decentralized permanent storage, through our API.
+          </p>
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        TypeScript & JavaScript Support with Full Type Safety
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            @autonomys/auto-drive
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light'>
+            Implement Auto-Drive&apos;s powerful permanent decentralized storage capabilities into your own applications using our official NPM package. Get started quickly with a familiar JavaScript/TypeScript interface and comprehensive documentation.
+            <br />
+            <br />
+            <Link
+              href='https://www.npmjs.com/package/@autonomys/auto-drive'
+              className='text-accent'
+              target='_blank'
+              rel='noreferrer'
+            >
+              npm install auto-drive
+            </Link>
+            <br />
+            <Link
+              href='https://www.npmjs.com/package/@autonomys/auto-drive'
+              className='text-accent'
+              target='_blank'
+              rel='noreferrer'
+            >
+              yarn add auto-drive
+            </Link>
+          </p>
+        </div>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Link
+            href='https://www.npmjs.com/package/@autonomys/auto-drive'
+            className='text-accent'
+            target='_blank'
+            rel='noreferrer'
+          >
+            <Image
+              className='w-full rounded-3xl border-2 border-gray-200'
+              src='/images/auto-drive-npm.png'
+              alt='Auto-Drive NPM Package'
+              width={420}
+              height={272}
+            />
+          </Link>
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Scalable Data Structure for Decentralized Storage
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Link
+            href='https://www.npmjs.com/package/@autonomys/auto-dag-data'
+            className='text-accent'
+            target='_blank'
+            rel='noreferrer'
+          >
+            <Image
+              className='w-full rounded-3xl border-2 border-gray-200'
+              src='/images/auto-dag-data.png'
+              alt='Auto-DAG Data Structure'
+              width={420}
+              height={272}
+            />
+          </Link>
+        </div>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Auto-DAG Data Structure
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light leading-relaxed'>
+            Autonomys Network uses the Auto-DAG data structure, which store your data on chain in small chunks to fit the block size limit of Autonomys Network and to ensure the integrity and authenticity of your data.
+          </p>
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Join Us Today and Experience the Future of Storage!
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Image
+            className='w-full rounded-3xl border-2 border-gray-200'
+            src='/preview.png'
+            alt='Home Hero'
+            width={420}
+            height={272}
+          />
+        </div>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Auto Drive
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light'>
+            Sign in now to store, share, and download your files securely with Autonomys Network decentralized permanent storage.
+          </p>
+          <SigningInButtons />
+        </div>
+      </div>
       <Footer />
     </div>
   );