feat: improve landing page

autonomys · Dec 24, 2024 · 76c2903 · 76c2903
1 parent f6891b1
commit 76c2903
Show file tree

Hide file tree

Showing 11 changed files with 410 additions and 70 deletions.
diff --git a/frontend/src/app/faqs/page.tsx b/frontend/src/app/faqs/page.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import localFont from 'next/font/local';
+import Footer from '../../components/Footer';
+import { FAQ } from '../../components/FAQ';
+
+const geistSans = localFont({
+  src: '../fonts/GeistMonoVF.woff',
+  variable: '--font-geist-sans',
+  weight: '100 900',
+});
+
+export default function App() {
+  return (
+    <div
+      className={`from-backgroundLight to-backgroundDark flex min-h-screen flex-col items-center justify-between bg-gradient-to-b ${geistSans.variable}`}
+    >
+      <FAQ />
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,75 +1,7 @@
 'use client';
 
-import { LoaderCircle } from 'lucide-react';
-import { type LiteralUnion, signIn } from 'next-auth/react';
-import { useCallback, useMemo, useState } from 'react';
-import { GoogleIcon } from '../components/common/GoogleIcon';
-import { DiscordIcon } from '../components/common/DiscordIcon';
-import type { BuiltInProviderType } from 'next-auth/providers/index';
+import { Home } from '../views/Home';
 
 export default function App() {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleAuth = useCallback(
-    (provider: LiteralUnion<BuiltInProviderType>) => () => {
-      setIsLoading(true);
-      signIn(provider);
-    },
-    [],
-  );
-
-  const handleGoogleAuth = useMemo(() => handleAuth('google'), [handleAuth]);
-  const handleDiscordAuth = useMemo(() => handleAuth('discord'), [handleAuth]);
-
-  return (
-    <div className='flex min-h-screen items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600'>
-      <div className='w-full max-w-md rounded-lg bg-white p-8 shadow-2xl'>
-        <h1 className='mb-6 text-center text-3xl font-bold text-gray-800'>
-          Welcome to Auto-Drive
-        </h1>
-        <p className='mb-8 text-center text-gray-600'>
-          Sign in with your Google account to start using our decentralized
-          storage service
-        </p>
-        <div className='flex flex-col items-center justify-center gap-4'>
-          <button
-            onClick={handleGoogleAuth}
-            disabled={isLoading}
-            className='flex w-full max-w-xs transform items-center justify-center rounded-full border-2 border-transparent bg-black px-6 py-3 font-bold text-white transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-105 hover:border-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2'
-            aria-label='Sign in with Google'
-          >
-            {isLoading ? (
-              <div className='flex items-center justify-center'>
-                <LoaderCircle className='mr-2 h-4 w-4 animate-spin' />
-                Redirecting...
-              </div>
-            ) : (
-              <>
-                <GoogleIcon />
-                Sign in with Google
-              </>
-            )}
-          </button>
-          <button
-            onClick={handleDiscordAuth}
-            disabled={isLoading}
-            className='flex w-full max-w-xs transform items-center justify-center rounded-full border-2 border-transparent bg-black px-6 py-3 font-bold text-white transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-105 hover:border-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2'
-            aria-label='Sign in with Google'
-          >
-            {isLoading ? (
-              <div className='flex items-center justify-center'>
-                <LoaderCircle className='mr-2 h-4 w-4 animate-spin' />
-                Redirecting...
-              </div>
-            ) : (
-              <>
-                <DiscordIcon />
-                Sign in with Discord
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
+  return <Home />;
 }
diff --git a/frontend/src/components/FAQ/index.tsx b/frontend/src/components/FAQ/index.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { FC, useCallback, useState } from 'react';
+import { LandingHeader } from '../common/LandingHeader';
+import { faqs } from '../../constants/faqs';
+
+export const FAQ: FC = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+  const toggleFAQ = useCallback(
+    (index: number) => setOpenIndex(openIndex === index ? null : index),
+    [openIndex],
+  );
+
+  return (
+    <div className='min-h-full w-full'>
+      <LandingHeader />
+      <div className='mt-8 flex w-full flex-col items-center justify-center'>
+        <div className='mt-4 w-[60%]'>
+          {faqs.map((question, index) => (
+            <div key={index} className='m-4'>
+              <button
+                className='dark:bg-boxDark w-full rounded-lg bg-white p-8 text-left text-gray-900 shadow-md dark:border-none dark:text-white'
+                onClick={() => toggleFAQ(index)}
+              >
+                <span className='font-semibold'>
+                  {index + 1}. {question.question}
+                </span>
+                <span className='float-right'>
+                  {openIndex === index ? '▲' : '▼'}
+                </span>
+              </button>
+              {openIndex === index && (
+                <div className='mt-2 rounded-lg bg-gray-100 p-4 dark:bg-gray-700'>
+                  <p className='whitespace-pre-line text-gray-700 dark:text-white'>
+                    {question.answer}
+                  </p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/Footer/index.tsx b/frontend/src/components/Footer/index.tsx
@@ -0,0 +1,159 @@
+import { EXTERNAL_ROUTES } from '../../constants/routes';
+import type { FC } from 'react';
+import { currentYear } from '../../utils/time';
+
+const Footer: FC = () => {
+  return (
+    <footer className='container mb-[50px] px-4 sm:mx-auto xl:px-0'>
+      <div className='body-font bg-backgroundDarker dark:bg-backgroundDark rounded-xl p-10 text-white'>
+        <div className='md:grid md:grid-cols-2'>
+          <div className='mb-20 flex justify-center md:mb-0 md:justify-start'>
+            <div className='flex flex-col md:justify-between'>
+              <div className='shrink-0 text-center md:mx-0 md:text-left'></div>
+              <div className='container mx-auto hidden flex-col flex-wrap pb-1 pr-5 pt-20 sm:flex sm:flex-row'>
+                <p className='text-whiteOpaque text-center text-xs sm:text-left'>
+                  © {currentYear()} Autonomys Labs, Inc. All Rights Reserved
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 gap-8 sm:grid-cols-2 sm:gap-6'>
+            <div>
+              <h2 className='title-font mb-6 text-xs font-semibold uppercase text-white'>
+                Links:
+              </h2>
+              <ul className='text-whiteOpaque dark:text-gray-400'>
+                <li key='academy' className='mb-4'>
+                  <a
+                    target='_blank'
+                    href={EXTERNAL_ROUTES.academy}
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    Academy
+                  </a>
+                </li>
+                <li key='forum' className='mb-4'>
+                  <a
+                    href={EXTERNAL_ROUTES.forum}
+                    target='_blank'
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    Forum
+                  </a>
+                </li>
+                <li key='docs' className='mb-4'>
+                  <a
+                    href={EXTERNAL_ROUTES.docs}
+                    target='_blank'
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    Docs
+                  </a>
+                </li>
+                <li key='autonomys'>
+                  <a
+                    target='_blank'
+                    href={EXTERNAL_ROUTES.autonomys}
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    Website
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div className='grid grid-cols-2 gap-x-6'>
+              <h2 className='title-font col-span-2 mb-6 text-xs font-semibold uppercase text-white'>
+                Social:
+              </h2>
+              <ul className='space-y-4 text-gray-600 dark:text-gray-400'>
+                <li key='twitter'>
+                  <a
+                    target='_blank'
+                    href={EXTERNAL_ROUTES.social.twitter}
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    X / Twitter
+                  </a>
+                </li>
+                <li key='discord'>
+                  <a
+                    target='_blank'
+                    href={EXTERNAL_ROUTES.social.discord}
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    Discord
+                  </a>
+                </li>
+                <li key='telegram'>
+                  <a
+                    target='_blank'
+                    href={EXTERNAL_ROUTES.social.telegram}
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    Telegram
+                  </a>
+                </li>
+                <li key='github'>
+                  <a
+                    target='_blank'
+                    href={EXTERNAL_ROUTES.social.github}
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    GitHub
+                  </a>
+                </li>
+              </ul>
+              <ul className='space-y-4 text-gray-600 dark:text-gray-400'>
+                <li key='medium'>
+                  <a
+                    target='_blank'
+                    href={EXTERNAL_ROUTES.social.medium}
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    Medium
+                  </a>
+                </li>
+                <li key='youtube'>
+                  <a
+                    target='_blank'
+                    href={EXTERNAL_ROUTES.social.youtube}
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    YouTube
+                  </a>
+                </li>
+                <li key='linkedin'>
+                  <a
+                    target='_blank'
+                    href={EXTERNAL_ROUTES.social.linkedin}
+                    className='text-whiteOpaque hover:text-primaryAccent text-xs'
+                    rel='noreferrer'
+                  >
+                    LinkedIn
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div className='container mx-auto flex flex-col flex-wrap pb-1 pr-5 pt-20 sm:hidden sm:flex-row'>
+          <p className='text-whiteOpaque text-center text-sm sm:text-left'>
+            © {currentYear()} Autonomys Network, Inc. All Rights Reserved
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/frontend/src/components/common/LandingHeader/index.tsx b/frontend/src/components/common/LandingHeader/index.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useCallback } from 'react';
+
+export const LandingHeader = () => {
+  const pathname = usePathname();
+
+  const getLinkClass = useCallback(
+    (path: string) => {
+      return `rounded-xl px-8 py-[1px] font-semibold ${
+        pathname === path ? 'bg-white' : 'bg-transparent'
+      }`;
+    },
+    [pathname],
+  );
+
+  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'>
+        <li className={getLinkClass('/')}>
+          <a href='/'>Home</a>
+        </li>
+        <li className={getLinkClass('/faqs')}>
+          <a href='/faqs'>FAQs</a>
+        </li>
+      </ul>
+    </div>
+  );
+};
diff --git a/frontend/src/constants/faqs.tsx b/frontend/src/constants/faqs.tsx
@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { EXTERNAL_ROUTES } from './routes';
+
+export type FAQ = {
+  question: string;
+  answer: ReactNode;
+};
+
+export const faqs = [
+  {
+    question: 'Is it free to use Auto-Drive?',
+    answer:
+      'Yes, it is free but uploads and downloads have a monthly limit in bytes.',
+  },
+  {
+    question: 'Is all data stored on-chain?',
+    answer: 'Yes, all data is stored on-chain.',
+  },
+  {
+    question: 'Are all files public?',
+    answer:
+      'Autonomys is a decentralized storage network, so all files are public by default. However, you can encrypt your files before uploading them to ensure they are private.',
+  },
+  {
+    question: 'Can I use Auto-Drive for creating apps?',
+    answer: (
+      <span>
+        Yes, you can use Auto-Drive for creating apps. Login into your account
+        and create an API_KEY.
+        <br />
+        <br />
+        <span>
+          Find more about building with Auto-Drive{' '}
+          <a
+            href={EXTERNAL_ROUTES.autoDriveDocs}
+            target='_blank'
+            rel='noreferrer'
+            className='text-blue-500 transition-all duration-300 hover:text-blue-600 hover:underline'
+          >
+            here
+          </a>
+        </span>
+      </span>
+    ),
+  },
+];