From 76c290320c8edeee7b271e877e4738da0204656d Mon Sep 17 00:00:00 2001 From: Carlos Lostao Date: Tue, 24 Dec 2024 17:40:28 +0100 Subject: [PATCH] feat: improve landing page --- frontend/src/app/faqs/page.tsx | 22 +++ frontend/src/app/page.tsx | 72 +------- frontend/src/components/FAQ/index.tsx | 45 +++++ frontend/src/components/Footer/index.tsx | 159 ++++++++++++++++++ .../components/common/LandingHeader/index.tsx | 30 ++++ frontend/src/constants/faqs.tsx | 46 +++++ frontend/src/constants/routes.ts | 26 +++ frontend/src/utils/time.ts | 3 + frontend/src/views/Home/SignInButtons.tsx | 42 +++++ frontend/src/views/Home/index.tsx | 30 ++++ frontend/tailwind.config.ts | 5 + 11 files changed, 410 insertions(+), 70 deletions(-) create mode 100644 frontend/src/app/faqs/page.tsx create mode 100644 frontend/src/components/FAQ/index.tsx create mode 100644 frontend/src/components/Footer/index.tsx create mode 100644 frontend/src/components/common/LandingHeader/index.tsx create mode 100644 frontend/src/constants/faqs.tsx create mode 100644 frontend/src/constants/routes.ts create mode 100644 frontend/src/utils/time.ts create mode 100644 frontend/src/views/Home/SignInButtons.tsx create mode 100644 frontend/src/views/Home/index.tsx diff --git a/frontend/src/app/faqs/page.tsx b/frontend/src/app/faqs/page.tsx new file mode 100644 index 00000000..6eca277a --- /dev/null +++ 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 ( +
+ +
+
+ ); +} diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index af5cdd24..4dd744a1 100644 --- 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) => () => { - setIsLoading(true); - signIn(provider); - }, - [], - ); - - const handleGoogleAuth = useMemo(() => handleAuth('google'), [handleAuth]); - const handleDiscordAuth = useMemo(() => handleAuth('discord'), [handleAuth]); - - return ( -
-
-

- Welcome to Auto-Drive -

-

- Sign in with your Google account to start using our decentralized - storage service -

-
- - -
-
-
- ); + return ; } diff --git a/frontend/src/components/FAQ/index.tsx b/frontend/src/components/FAQ/index.tsx new file mode 100644 index 00000000..29e7bee9 --- /dev/null +++ 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(null); + const toggleFAQ = useCallback( + (index: number) => setOpenIndex(openIndex === index ? null : index), + [openIndex], + ); + + return ( +
+ +
+
+ {faqs.map((question, index) => ( +
+ + {openIndex === index && ( +
+

+ {question.answer} +

+
+ )} +
+ ))} +
+
+
+ ); +}; diff --git a/frontend/src/components/Footer/index.tsx b/frontend/src/components/Footer/index.tsx new file mode 100644 index 00000000..9527279c --- /dev/null +++ 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 ( + + ); +}; + +export default Footer; diff --git a/frontend/src/components/common/LandingHeader/index.tsx b/frontend/src/components/common/LandingHeader/index.tsx new file mode 100644 index 00000000..2a5d563d --- /dev/null +++ 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 ( +
+ +
+ ); +}; diff --git a/frontend/src/constants/faqs.tsx b/frontend/src/constants/faqs.tsx new file mode 100644 index 00000000..7e8e9c03 --- /dev/null +++ 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: ( + + Yes, you can use Auto-Drive for creating apps. Login into your account + and create an API_KEY. +
+
+ + Find more about building with Auto-Drive{' '} + + here + + + + ), + }, +]; diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts new file mode 100644 index 00000000..2e9dac2c --- /dev/null +++ b/frontend/src/constants/routes.ts @@ -0,0 +1,26 @@ +export const EXTERNAL_ROUTES = { + autonomys: 'https://autonomys.xyz/', + academy: 'https://academy.autonomys.xyz/', + privacyPolicy: 'https://www.autonomys.xyz/privacy-policy', + forum: 'https://forum.autonomys.xyz/', + docs: 'https://docs.autonomys.xyz/', + status: 'https://status.autonomys.xyz/', + operatorDocs: 'https://docs.autonomys.xyz/staking/operator/register', + autoDriveDocs: + 'https://github.com/autonomys/auto-sdk/tree/main/packages/auto-drive', + social: { + twitter: 'https://x.com/AutonomysNet', + discord: 'https://autonomys.xyz/discord', + telegram: 'https://t.me/subspace_network', + github: 'https://github.com/autonomys', + reddit: 'https://www.reddit.com/r/autonomys', + medium: 'https://medium.com/subspace-network', + youtube: 'https://www.youtube.com/@AutonomysNetwork', + linkedin: 'https://www.linkedin.com/company/autonomys/', + subSocial: 'https://app.subsocial.network/@NetworkSubspace', + }, + novaExplorer: 'https://nova.subspace.network/', + subscan: 'https://autonomys.subscan.io/', + spaceAcres: + 'https://api.github.com/repos/autonomys/space-acres/releases/latest', +}; diff --git a/frontend/src/utils/time.ts b/frontend/src/utils/time.ts new file mode 100644 index 00000000..08639960 --- /dev/null +++ b/frontend/src/utils/time.ts @@ -0,0 +1,3 @@ +export const currentYear = () => { + return new Date().getFullYear(); +}; diff --git a/frontend/src/views/Home/SignInButtons.tsx b/frontend/src/views/Home/SignInButtons.tsx new file mode 100644 index 00000000..fbb718b7 --- /dev/null +++ b/frontend/src/views/Home/SignInButtons.tsx @@ -0,0 +1,42 @@ +import { signIn } from 'next-auth/react'; +import { useCallback, useState } from 'react'; +import { DiscordIcon } from '../../components/common/DiscordIcon'; +import { GoogleIcon } from '../../components/common/GoogleIcon'; +import { BuiltInProviderType } from 'next-auth/providers'; +import { LoaderCircle } from 'lucide-react'; + +export const SigningInButtons = () => { + const [isClicked, setIsClicked] = useState(); + + const handleGoogleAuth = useCallback(() => { + setIsClicked('google'); + signIn('google'); + }, []); + const handleDiscordAuth = useCallback(() => { + setIsClicked('discord'); + signIn('discord'); + }, []); + + return ( +
+ + +
+ ); +}; diff --git a/frontend/src/views/Home/index.tsx b/frontend/src/views/Home/index.tsx new file mode 100644 index 00000000..18b7777b --- /dev/null +++ b/frontend/src/views/Home/index.tsx @@ -0,0 +1,30 @@ +'use client'; + +import Footer from '../../components/Footer'; +import { LandingHeader } from '../../components/common/LandingHeader'; +import { SigningInButtons } from './SignInButtons'; + +export const Home = () => { + return ( +
+ +
+
+
+

+ Auto-Drive +

+
+

+ Store, share, and download your files securely with autonomys + decentralized permanent storage. +

+
+
+ +
+
+
+ ); +}; diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 6faecb0c..f2c90516 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -17,6 +17,11 @@ const config: Config = { 'light-danger': '#ffcdd2', 'gray-button': '#9EA49F', 'light-gray': '#4E4F54', + backgroundLight: '#EBEFFC', + backgroundDark: '#3654A6', + backgroundDarker: '#27355D', + backgroundDarkest: '#050D26', + whiteOpaque: '#ffffffb3', }, }, },