diff --git a/frontend/public/preview.png b/frontend/public/preview.png new file mode 100644 index 00000000..6affc062 Binary files /dev/null and b/frontend/public/preview.png differ 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..3e401992 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,75 +1,12 @@ -'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 { Metadata } from 'next'; +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 ; } + +export const metadata: Metadata = { + title: 'Auto-Drive', + description: + 'Store, share, and download your files securely with autonomys decentralized permanent storage.', +}; 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..b949920c --- /dev/null +++ b/frontend/src/components/Footer/index.tsx @@ -0,0 +1,162 @@ +import { EXTERNAL_ROUTES } from '../../constants/routes'; +import type { FC } from 'react'; +import { currentYear } from '../../utils/time'; +import { LogoIcon } from '../common/LogoIcon'; + +const Footer: FC = () => { + return ( + + ); +}; + +export default Footer; diff --git a/frontend/src/components/common/DiscordIcon.tsx b/frontend/src/components/common/DiscordIcon.tsx index 6101d9de..ded60603 100644 --- a/frontend/src/components/common/DiscordIcon.tsx +++ b/frontend/src/components/common/DiscordIcon.tsx @@ -1,4 +1,8 @@ -export const DiscordIcon = () => { +export const DiscordIcon = ({ + fillColor = '#5865F2', +}: { + fillColor?: string; +}) => { return ( { diff --git a/frontend/src/components/common/GoogleIcon.tsx b/frontend/src/components/common/GoogleIcon.tsx index 35cf658b..55f83fee 100644 --- a/frontend/src/components/common/GoogleIcon.tsx +++ b/frontend/src/components/common/GoogleIcon.tsx @@ -1,14 +1,47 @@ export const GoogleIcon = () => { return ( - + Google-color + Created with Sketch. + + + + + + + + + + + ); }; diff --git a/frontend/src/components/common/LandingHeader/index.tsx b/frontend/src/components/common/LandingHeader/index.tsx new file mode 100644 index 00000000..886dbc30 --- /dev/null +++ b/frontend/src/components/common/LandingHeader/index.tsx @@ -0,0 +1,35 @@ +'use client'; + +import { HelpCircleIcon, HomeIcon } from 'lucide-react'; +import { usePathname } from 'next/navigation'; +import { useCallback } from 'react'; + +export const LandingHeader = () => { + const pathname = usePathname(); + + const getLinkClass = useCallback( + (path: string) => { + return `rounded-lg px-8 py-2 font-medium ${ + pathname === path ? 'bg-white' : 'bg-transparent hover:cursor-pointer' + }`; + }, + [pathname], + ); + + return ( +
+ +
+ ); +}; diff --git a/frontend/src/components/common/LogoIcon.tsx b/frontend/src/components/common/LogoIcon.tsx new file mode 100644 index 00000000..1796d0ac --- /dev/null +++ b/frontend/src/components/common/LogoIcon.tsx @@ -0,0 +1,79 @@ +import { FC } from 'react'; + +type Props = { + fillColor?: string; +}; + +export const LogoIcon: FC = ({ fillColor = 'white' }) => { + return ( + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/frontend/src/constants/faqs.tsx b/frontend/src/constants/faqs.tsx new file mode 100644 index 00000000..31a7fac3 --- /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..bfec6235 --- /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..463ec1f1 --- /dev/null +++ b/frontend/src/views/Home/index.tsx @@ -0,0 +1,36 @@ +'use client'; + +import Footer from '../../components/Footer'; +import { LandingHeader } from '../../components/common/LandingHeader'; +import { SigningInButtons } from './SignInButtons'; +import Image from 'next/image'; + +export const Home = () => { + return ( +
+ +
+
+

+ Auto-Drive +

+

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

+ +
+
+ Home Hero +
+
+
+ ); +}; diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 6faecb0c..95aee897 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -1,11 +1,7 @@ import type { Config } from 'tailwindcss'; const config: Config = { - content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}', - ], + content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { extend: { colors: { @@ -17,6 +13,11 @@ const config: Config = { 'light-danger': '#ffcdd2', 'gray-button': '#9EA49F', 'light-gray': '#4E4F54', + backgroundLight: '#EBEFFC', + backgroundDark: '#3654A6', + backgroundDarker: '#27355D', + backgroundDarkest: '#050D26', + whiteOpaque: '#ffffffb3', }, }, },