import { type GetServerSideProps, type NextPage } from "next"; import Head from "next/head"; import { getSession } from "next-auth/react"; import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; import { Dialog } from "@headlessui/react"; import { useState } from "react"; import Link from "next/link"; import { usePostHog } from "posthog-js/react"; import { useAtom } from "jotai"; import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; import VideoRecordModal from "~/components/VideoRecordModal"; import { ShareIcon, VideoCameraIcon } from "@heroicons/react/24/solid"; import { CheckIcon } from "@heroicons/react/20/solid"; import { CheckCircleIcon } from "@heroicons/react/24/outline"; const navigation = [ { name: "Features", href: "#features" }, { name: "Pricing", href: "/pricing" }, { name: "Discord", href: "https://discord.com/invite/invalid" }, ]; const Home: NextPage = () => { const [, setRecordOpen] = useAtom(recordVideoModalOpen); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const posthog = usePostHog(); const openRecordModal = () => { setRecordOpen(true); posthog?.capture("open record video modal", { cta: "landing page", }); }; return ( <> Snapify | Async video messaging
Snapify
{navigation.map((item) => ( {item.name} ))}
Log in
{/*
*/} {/*
*/} {/* Announcing our next round of funding.{" "}*/} {/* */} {/*
*/} {/*
*/}

Async video messaging

Share high-quality videos asynchronously and collaborate on your own schedule

TRUSTED BY THE BEST BRANDS

{[1, 2].map((x) => (
{[1, 2, 3, 4, 5].map((i) => ( ))}
))}
How does Snapify work? Get started easily. Share video instantly.
step description
{[ { icon: ( ), title: "1. Record a video message", description: "Record a short video of your screen and camera with just a few clicks. No installations required.", }, { icon: , title: "2. Share with a link", description: "Simply share a link to your video message. Your recipients can watch it right then and there without the need to create an account or sign in.", }, { icon: , title: "3. Get work done", description: "Get feedback, gather opinions, make decisions and more using interactive features such as on-video comments, on-video emoji reactions, video replies, polls, and more.", }, ].map(({ title, description, icon }) => (
{icon}
{title} {description}
))}
Ways to Use Snapify Snapify helps you get your message across quickly and clearly whether you’re sharing an update with your team, documenting a bug, or demoing an app.
{[ { title: "Engineering", description: "Review, document, and collaborate across engineering teams using async video.", features: [ "To improve code reviews", "To centralize team knowledge", "To collaborate asynchronously", ], }, { title: "Bug Reporting", description: "Stop reading and writing wordy bug reports. Instead report bugs in a highly demonstrative way.", features: [ "Record a video on how to reproduce a bug", "Request a quick demo when the bug is fixed", "Keep it in your issue tracking system", ], }, { title: "Education", description: "Stop reading and writing wordy bug reports. Instead, Tape can help you report bugs in a highly demonstrative way. Show, don't tell.", features: [ "To enable individualized learning", "To complement a curriculum", "To add context to assignments", ], }, { title: "Support", description: "Stop reading and writing wordy bug reports. Instead, Tape can help you report bugs in a highly demonstrative way. Show, don't tell.", features: [ "To provide visual support", "To improve self-serve content", "To accelerate team onboarding", ], }, ].map(({ title, description, features }) => (
{title} {description}
{features.map((feature) => (
{feature}
))}
usecase cover
))}
{[ { stat: "uptime", value: "99%" }, { stat: "minutes recorded", value: "15B" }, { stat: "recordings created", value: "15M" }, { stat: "data served", value: "15PB" }, ].map(({ stat, value }) => (
{value} {stat}
))}

Ready to improve how your team communicates?

); }; export default Home; export const getServerSideProps: GetServerSideProps = async (context) => { const session = await getSession(context); if (session) { return { redirect: { destination: "/videos", permanent: false, }, }; } return { props: { session }, }; };