Skip to content

Commit

Permalink
feat: add about page
Browse files Browse the repository at this point in the history
  • Loading branch information
diego3g committed Apr 10, 2024
1 parent 979c621 commit 0020aa1
Show file tree
Hide file tree
Showing 8 changed files with 137 additions and 4 deletions.
127 changes: 127 additions & 0 deletions apps/web/src/app/(home)/about/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import { ArrowLeft } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import { twMerge } from 'tailwind-merge'

import nivoIcon from '@/assets/nivo-icon.svg'
import developersScreenshot from '@/assets/screenshots/nivo-developers-screenshot.png'
import newUploadScreenshot from '@/assets/screenshots/nivo-new-upload-screenshot.png'
import videoScreenshot from '@/assets/screenshots/nivo-video-screenshot.png'
import webhooksScreenshot from '@/assets/screenshots/nivo-webhooks-screenshot.png'
import { Button } from '@/components/ui/button'

export default function About() {
return (
<div className="relative flex min-h-screen w-full flex-col items-center bg-zinc-950">
<div className="mx-auto w-full max-w-[800px] px-6 py-20">
<div className="flex flex-col gap-8">
<div className="mx-auto w-full max-w-[600px]">
<div className="-mx-8 flex items-center gap-4">
<Button
asChild
size="lg"
variant="link"
className="text-zinc-400"
>
<Link href="/">
<ArrowLeft className="mr-2 size-4" />
back to homepage
</Link>
</Button>
</div>
</div>

<div className="mx-auto w-full max-w-[600px]">
<Image
src={nivoIcon}
alt="nivo.video"
className="size-8"
width={32}
height={32}
/>
</div>

<div className="flex flex-col gap-6">
<h1
className={twMerge(
'mx-auto w-full max-w-[600px] text-3xl font-bold text-white lg:text-4xl',
)}
>
What is nivo.video?
</h1>
<div className="text-base leading-relaxed text-zinc-200 lg:text-lg">
<p className="mx-auto w-full max-w-[600px]">
Nivo offers secure video hosting, fast video distribution,
transparent and fair pricing, seamless developer experience, and
AI content automation.
</p>

<h2 className="mx-auto mt-8 w-full max-w-[600px] text-xl font-bold text-white lg:text-2xl">
How does it works?
</h2>

<h2 className="mx-auto mt-8 w-full max-w-[600px] text-lg font-bold text-white lg:text-xl">
Upload a video
</h2>
<p className="mx-auto mt-6 w-full max-w-[600px]">
Start by uploading your video files with automatic AI title
generation, audio conversion and video transcription.
</p>
<Image
src={newUploadScreenshot}
alt="Screenshot of new upload page on nivo.video"
className="mt-6 rounded-lg"
/>

<p className="mx-auto mt-6 w-full max-w-[600px]">
Inspect your new uploads and generate AI description with a
click of a button.
</p>
<Image
src={videoScreenshot}
alt="Screenshot of new upload page on nivo.video"
className="mt-6 rounded-lg"
/>

<p className="mx-auto mt-6 w-full max-w-[600px]">
Integrate Nivo with your platform by using our API or listening
to webhook events.
</p>
<Image
src={developersScreenshot}
alt="Screenshot of new upload page on nivo.video"
className="mt-6 rounded-lg"
/>

<p className="mx-auto mt-6 w-full max-w-[600px]">
Check webhook logs to keep track of any communication between
nivo and your platform.
</p>
<Image
src={webhooksScreenshot}
alt="Screenshot of new upload page on nivo.video"
className="mt-6 rounded-lg"
/>
</div>
</div>

<div className="mx-auto w-full max-w-[600px]">
<div className="-mx-8 flex items-center gap-4">
<Button
asChild
size="lg"
variant="link"
className="text-zinc-400"
>
<Link href="/">
<ArrowLeft className="mr-2 size-4" />
back to homepage
</Link>
</Button>
</div>
</div>
</div>
</div>
</div>
)
}
10 changes: 7 additions & 3 deletions apps/web/src/app/(home)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { ArrowRight } from 'lucide-react'
import { Merriweather } from 'next/font/google'
import Image from 'next/image'
import Link from 'next/link'
import { twMerge } from 'tailwind-merge'

import nivoIcon from '@/assets/nivo-icon.svg'
Expand All @@ -15,7 +16,7 @@ const merriWeather = Merriweather({

export default function Homepage() {
return (
<div className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-zinc-950 selection:bg-teal-400/30 selection:text-white">
<div className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-zinc-950">
<div className="z-20 mx-auto max-w-[1280px] px-6">
<div className="flex flex-col items-center gap-16">
<Image
Expand All @@ -30,12 +31,12 @@ export default function Homepage() {
<h1
className={twMerge(
merriWeather.className,
'bg-gradient-to-br from-teal-400 to-sky-400 bg-clip-text text-6xl font-bold leading-snug text-transparent',
'text-balance bg-gradient-to-br from-teal-400 to-sky-400 bg-clip-text text-center text-5xl font-bold leading-snug text-transparent lg:text-6xl lg:leading-snug',
)}
>
Redefining video content
</h1>
<p className="max-w-2xl text-center text-xl leading-relaxed text-zinc-100">
<p className="max-w-2xl text-center text-lg leading-relaxed text-zinc-100 lg:text-xl lg:leading-relaxed">
Nivo offers a{' '}
<strong>
comprehensive video solution tailored for online content
Expand All @@ -47,6 +48,9 @@ export default function Homepage() {
</div>

<div className="flex items-center gap-4">
<Button asChild size="lg" variant="link" className="text-zinc-400">
<Link href="/about">What is Nivo?</Link>
</Button>
<Button
asChild
className="bg-teal-400 text-teal-950 hover:bg-teal-500 dark:bg-teal-400 dark:text-teal-950 dark:hover:bg-teal-500"
Expand Down
Binary file removed apps/web/src/assets/app.png
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion packages/auth/auth.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,9 @@ export const authConfig = {
const isLoggedIn = !!auth?.user

const isOnPublicPages =
nextUrl.pathname.startsWith('/auth') || nextUrl.pathname === '/'
nextUrl.pathname.startsWith('/auth') ||
nextUrl.pathname === '/' ||
nextUrl.pathname === '/about'
const isOnWebhooks = nextUrl.pathname.startsWith('/api/webhooks')
const isOnPublicAPIRoutes = nextUrl.pathname.startsWith('/api/auth')
const isOnAPIRoutes = nextUrl.pathname.startsWith('/api')
Expand Down

0 comments on commit 0020aa1

Please sign in to comment.